/* SFS website UI kit — Home page */
const DSH = window.SFSDesignSystem_95f437;
const { Button: BtnH, ArrowLink: AL, SectionLabel: SL, Stat, Card: DSCard, Tag: TagH } = DSH;
const ChromeH = window.SFSChrome;

const HOME_INDUSTRIES = [
  { name: 'Engine Parts', img: window.SFS_ASSET('../assets/ind-engine.jpg'), page: 'products' },
  { name: 'Turbocharger', img: window.SFS_ASSET('../assets/ind-turbo.jpg'), page: 'products' },
  { name: 'Fuel System', img: window.SFS_ASSET('../assets/ind-fuel.jpg'), page: 'products' },
  { name: 'Aerospace', img: window.SFS_ASSET('../assets/ind-aerospace.jpg'), page: 'aerospace' },
];

function HeroNumbers() {
  return (
    <div className="sfs-hero">
      <img className="sfs-hero__img" src={window.SFS_ASSET("../assets/hero-cnc.jpg")} alt="SFS precision components in CNC production" />
      <div className="sfs-hero__big" aria-hidden="true">
        <span className="sfs-hero__num">24</span>
        <span className="sfs-hero__num">/7</span>
      </div>
      <svg className="sfs-hero__play" viewBox="0 0 64 64" aria-hidden="true"><circle cx="32" cy="32" r="31" fill="none" stroke="#fff" strokeWidth="2"/><path d="M26 22l18 10-18 10z" fill="#fff"/></svg>
    </div>
  );
}

function HomePage({ onNavigate }) {
  return (
    <main className="sfs-site">
      <HeroNumbers />

      <section className="sfs-section">
        <div className="sfs-shell">
          <p className="sfs-lede" style={{ marginBottom: 'var(--space-6)' }}>
            Formerly Indo Schöttle and now part of the SFS Group, we are a reliable companion to the
            world's leading automotive and industrial manufacturers. Mostly unnoticed — our precision
            engine, turbocharger, fuel-system and fluid-power components are embedded in the products
            and processes of our customers, where they fulfil mission-critical functions.
          </p>
          <BtnH onClick={() => onNavigate('aerospace')}>Success Stories</BtnH>
        </div>
      </section>

      {/* Industry solutions — dark */}
      <section className="sfs-section sfs-section--dark">
        <div className="sfs-shell">
          <SL onDark>Industry Solutions</SL>
          <div className="sfs-mega__tiles" style={{ padding: '8px 0 0' }}>
            {HOME_INDUSTRIES.map((it) => (
              <a key={it.name} href="#" className="sfs-tile" onClick={(e) => { e.preventDefault(); onNavigate(it.page); }}>
                <span className="sfs-tile__name">{it.name}</span>
                <span className="sfs-tile__frame"><img src={it.img} alt={it.name} /></span>
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* Products & Technologies */}
      <section className="sfs-section">
        <div className="sfs-shell">
          <SL>Products &amp; Technologies</SL>
          <div className="sfs-pt">
            <div className="sfs-pt__panel"></div>
            <div className="sfs-pt__wafer"><img src={window.SFS_ASSET("../assets/products-technologies.png")} alt="SFS precision components" /></div>
            <div className="sfs-pt__content">
              <a href="#" className="sfs-arrow-link sfs-arrow-link--xl" onClick={(e) => { e.preventDefault(); onNavigate('products'); }}>Products</a>
              <a href="#" className="sfs-arrow-link sfs-arrow-link--xl" onClick={(e) => { e.preventDefault(); onNavigate('coldforming'); }}>Technologies</a>
              <a href="#" className="sfs-arrow-link sfs-arrow-link--xl" onClick={(e) => { e.preventDefault(); onNavigate('capabilities'); }}>Services</a>
              <button className="sfs-btn sfs-pt__cta" onClick={() => onNavigate('products')}>All products and technologies</button>
            </div>
          </div>
        </div>
      </section>

      {/* SFS Group cards */}
      <section className="sfs-section sfs-section--subtle">
        <div className="sfs-shell">
          <SL>SFS Group India</SL>
          <div className="sfs-grid-3">
            <DSCard image={window.SFS_ASSET("../assets/career-banner.png")} mediaHeight={170} title="Your Career at SFS" text="Shape the future with us in Pune & Belgaum." href="#" linkLabel="Explore Careers" onClick={(e) => { e.preventDefault(); onNavigate('careers'); }} />
            <DSCard image={window.SFS_ASSET("../assets/infrastructure.jpg")} mediaHeight={170} title="Capabilities" text="From cold forming to matched assembly." href="#" linkLabel="Our Capabilities" onClick={(e) => { e.preventDefault(); onNavigate('capabilities'); }} />
            <DSCard image={window.SFS_ASSET("../assets/sustainability.jpg")} mediaHeight={170} title="Sustainability" text="Manufacturing responsibly." href="#" linkLabel="Our Commitment" onClick={(e) => { e.preventDefault(); onNavigate('sustainability'); }} />
          </div>
        </div>
      </section>

      {/* SFS India in numbers — dark */}
      <section className="sfs-section sfs-section--dark">
        <div className="sfs-shell">
          <SL onDark>SFS Group India in Numbers</SL>
          <div className="sfs-grid-4 sfs-stats-band" style={{ marginTop: 8 }}>
            <Stat value="300+ Million" label="Engine Components" sub="per year" onDark />
            <Stat value="15+ Million" label="Turbocharger Components" sub="per year" onDark />
            <Stat value="8+ Million" label="Fuel System Components" sub="per year" onDark />
            <Stat value="5+ Million" label="Fluid Power Components" sub="per year" onDark />
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { SFSHomePage: HomePage });