/* SFS website UI kit — Company / About page */
const DSCo = window.SFSDesignSystem_95f437;
const { SectionLabel: SLCo, Breadcrumb: BcCo, Stat: StatCo, Button: BtnCo, ArrowLink: ALCo } = DSCo;

const MILESTONES = [
  { y: '1986', points: ['Indo Schöttle is incorporated', '1st product family (Engine Valve Collets)', 'Single Customer'] },
  { y: '1993', points: ['2nd product line (Rocker Arm Screws)', '30 employees'] },
  { y: '1996', points: ['Established as a premier OEM supplier', 'Development of precision machined parts', '3rd product line introduced (Turbocharger Parts)'] },
  { y: '1999', points: ['100% Export Unit (EOU) established', 'QS 9000 certification'] },
  { y: '2002', points: ['4th product family started (Fuel System Parts and Assemblies)'] },
  { y: '2004', points: ['3rd manufacturing plant started in the EOU certification', 'ISO 14001 certification'] },
  { y: '2008', points: ['Cold Forming started in Pune, Maharashtra'] },
  { y: '2011', points: ['Honaga Plant set up, Belagavi, Karnataka'] },
  { y: '2012', points: ['SEZ Unit, Belagavi', 'Partnership with SFS Intec, Switzerland'] },
  { y: '2015', points: ['Acquired plant and machinery of a European Company'] },
  { y: '2016', points: ['Brand identity changed', 'Member of the SFS Group'] },
  { y: '2018', points: ['Entered new segments of Aerospace and Emission System Components'] },
  { y: '2021', points: ['Becomes part of the SFS Group, a worldwide precision-components leader.'] },
];

const TEAM = [
  { img: window.SFS_ASSET('../assets/team-vijay-pusalkar.jpg'), name: 'Mr. Vijay Pusalkar', role: 'Chairman Emeritus' },
  { img: window.SFS_ASSET('../assets/team-prashant-kore.jpg'), name: 'Mr. Prashant Kore', role: 'Managing Director · Member of SFS India Board' },
  { img: window.SFS_ASSET('../assets/team-paras-shah.jpg'), name: 'Mr. Paras Shah', role: 'CFO & VP' },
];

const CLIENTS = Array.from({ length: 24 }, (_, i) => window.SFS_ASSET(`../assets/clients/logo${i + 1}.jpg`));

function CompanyPage({ onNavigate }) {
  const tlRef = React.useRef(null);
  React.useEffect(() => window.SFSTimelineProgress(tlRef.current), []);
  return (
    <main className="sfs-site">
      <img className="sfs-hero__img" src={window.SFS_ASSET("../assets/about-banner.jpg")} alt="SFS Group India" style={{ height: 'clamp(260px, 34vw, 420px)' }} />

      <section className="sfs-section" style={{ paddingTop: 'var(--space-6)' }}>
        <div className="sfs-shell">
          <div style={{ marginBottom: 'var(--space-5)' }}>
            <BcCo items={[{ label: 'Home', href: '#' }, { label: 'Company' }]} />
          </div>
          <div className="sfs-grid-2" style={{ gap: 56, alignItems: 'center' }}>
            <div>
              <p className="sfs-eyebrow">About SFS Group India</p>
              <h1 style={{ fontSize: 'var(--text-h1)', margin: '0 0 var(--space-4)' }}>Precision With Heritage</h1>
              <p className="sfs-lede" style={{ marginBottom: 'var(--space-4)' }}>
                Formerly Indo Schöttle and now part of the SFS Group, we manufacture
                application-critical precision components for the automotive, aerospace and
                industrial sectors from our plants in Pune and Belgaum.
              </p>
              <p style={{ color: 'var(--text-body)' }}>
                Cold forming and precision machining have been our base technologies for decades —
                paired with matched assembly and rigorous metrology, they let us deliver parts that
                fulfil mission-critical functions, mostly unnoticed.
              </p>
            </div>
            <div className="sfs-frame" style={{ width: '100%', padding: 0 }}>
              <img src={window.SFS_ASSET("../assets/about-history.jpg")} alt="Our history" style={{ width: '100%', height: 320, objectFit: 'cover' }} />
            </div>
          </div>
        </div>
      </section>

      {/* Stats */}
      <section className="sfs-section sfs-section--dark" style={{ paddingBlock: 'var(--space-7)' }}>
        <div className="sfs-shell">
          <div className="sfs-grid-4">
            <StatCo value="1994" label="Established" sub="as Indo Schöttle" onDark />
            <StatCo value="6" label="Plants" sub="Pune & Belagavi" onDark />
            <StatCo value="40+" label="Customers" sub="OEMs & tier-1" onDark />
            <StatCo value="8" label="Markets" sub="engine to aerospace" onDark />
          </div>
        </div>
      </section>

      {/* Milestones */}
      <section className="sfs-section">
        <div className="sfs-shell">
          <SLCo>Milestones</SLCo>
          <div className="sfs-timeline" ref={tlRef}>
            {MILESTONES.map((m) => (
              <div key={m.y} className="sfs-tl">
                <div className="sfs-tl__year">{m.y}</div>
                <div className="sfs-tl__rail"><span className="sfs-tl__dot"></span></div>
                <ul className="sfs-tl__list">
                  {m.points.map((pt, i) => <li key={i}>{pt}</li>)}
                </ul>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Chairman message */}
      <section className="sfs-section sfs-section--subtle">
        <div className="sfs-shell">
          <SLCo>From the Director's Desk</SLCo>
          <div className="sfs-chairman">
            <img className="sfs-chairman__photo" src={window.SFS_ASSET("../assets/director-desk.jpg")} alt="Director" />
            <div>
              <blockquote>
                “Our commitment to precision is matched only by our commitment to our customers and
                our people. As part of the SFS Group, we combine global engineering excellence with
                deep local expertise — and we are only getting started.”
              </blockquote>
              <div className="sfs-chairman__sign">SFS Group India</div>
              <div className="sfs-chairman__role">Director's Message</div>
            </div>
          </div>
        </div>
      </section>

      {/* Leadership */}
      <section className="sfs-section">
        <div className="sfs-shell">
          <SLCo>Our Leadership</SLCo>
          <div className="sfs-grid-3">
            {TEAM.map((t) => (
              <div key={t.name} className="sfs-leader">
                <div className="sfs-leader__photo"><img src={t.img} alt={t.name} /></div>
                <h4>{t.name}</h4>
                <span>{t.role}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Clients */}
      <section className="sfs-section sfs-section--subtle">
        <div className="sfs-shell">
          <SLCo>Trusted by Industry Leaders</SLCo>
          <div className="sfs-clients">
            {CLIENTS.map((c, i) => (
              <div key={i} className="sfs-clients__cell"><img src={c} alt="Client logo" loading="lazy" /></div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="sfs-section sfs-section--dark" style={{ textAlign: 'center' }}>
        <div className="sfs-shell" style={{ maxWidth: 640 }}>
          <h2 style={{ color: '#fff', fontSize: 'var(--text-h2)', marginBottom: 14 }}>Build With a Precision Partner</h2>
          <p style={{ color: 'var(--text-on-dark-muted)', marginBottom: 'var(--space-6)' }}>From prototype to series production — let's solve your manufacturing challenge.</p>
          <div style={{ display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap' }}>
            <BtnCo variant="solid" onClick={() => onNavigate('contact')}>Get in Touch</BtnCo>
            <BtnCo onDark onClick={() => onNavigate('capabilities')}>Our Capabilities</BtnCo>
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { SFSCompanyPage: CompanyPage });