function About() {
  return (
    <Section id="about" background="var(--paper)">
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 80, alignItems: 'start' }} className="sse-about-grid">
        {/* Left rail */}
        <div style={{ position: 'sticky', top: 120 }} className="sse-about-sticky">
          <Kicker>§ 01 · About SSE</Kicker>
          <Display size={72} style={{ marginTop: 24 }}>
            Built in Silvassa, trusted worldwide.
          </Display>
          <div style={{ marginTop: 40, display: 'flex', flexDirection: 'column', gap: 16 }}>
            <MetaRow k="Founded by" v="Mr. Navin Jha" />
            <MetaRow k="Experience" v="31+ years combined" />
            <MetaRow k="Headquarters" v="Silvassa, D&NH, India" />
            <MetaRow k="Focus" v="Flameproof · Plastic · Silicone" />
            <MetaRow k="Reach" v="India · International Export" />
          </div>
        </div>

        {/* Right editorial */}
        <div>
          <p style={{ fontSize: 22, lineHeight: 1.5, color: 'var(--navy)', fontWeight: 400, textWrap: 'pretty', marginBottom: 32, maxWidth: 620 }}>
            Sakshi Saurabh Enterprises is a manufacturer committed to delivering high-quality, innovative and cost-effective industrial solutions — with a strong focus on flameproof electrical spare parts, precision plastic and silicone components for the industries that keep the world running.
          </p>
          <p style={{ fontSize: 16, lineHeight: 1.65, color: 'var(--steel-dark)', maxWidth: 620, textWrap: 'pretty', marginBottom: 24 }}>
            The company is led by Mr. Navin Jha, whose 31+ years of combined industrial and business experience translate into products with superior performance, enhanced durability and excellent value. We continuously invest in product innovation, process improvement and quality enhancement so our customers can rely on us for the long term.
          </p>
          <p style={{ fontSize: 16, lineHeight: 1.65, color: 'var(--steel-dark)', maxWidth: 620, textWrap: 'pretty' }}>
            All our products are manufactured to IEC/IS standards, making them suitable for international supply. We actively serve OEMs, EPC contractors, and industrial distributors across the globe — with 48-hour dispatch from our Silvassa facility.
          </p>

          {/* Leadership card — founder only */}
          <div style={{ marginTop: 72 }}>
            <LeaderCard
              name={SSE_INFO.founder}
              title={SSE_INFO.founderTitle}
              img="assets/Founder Photo.webp"
              badge="LEADERSHIP"
            >
              <p style={{ marginBottom: 16 }}>
                Dear Valued Customers & Business Partners,<br/>
                Welcome to Sakshi Saurabh Enterprises.
              </p>
              <p style={{ marginBottom: 16 }}>
                With over 31 years of combined industry and business experience, I founded Sakshi Saurabh Enterprises with a vision to deliver high-quality, innovative, and cost-effective solutions. Today, we proudly manufacture a wide range of Flameproof Electrical Spare Parts, Plastic Products, and Silicone Products, serving industries with reliability and excellence.
              </p>
              <p style={{ marginBottom: 16 }}>
                Our commitment to quality, continuous innovation, timely delivery, and customer satisfaction remains at the heart of everything we do.
              </p>
              <p>
                We thank our customers and partners for their trust and support and look forward to building lasting relationships.
              </p>
            </LeaderCard>
          </div>

          {/* Values strip */}
          <div style={{ marginTop: 72, borderTop: '1px solid var(--line)', paddingTop: 40, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24 }} className="sse-values-grid">
            {[
              { k: 'Innovation', v: 'New products, new processes.' },
              { k: 'Reliability', v: 'Every part, every time.' },
              { k: 'Integrity', v: 'Honest engineering.' },
              { k: 'Global Reach', v: 'Exporting worldwide.' },
            ].map(v => (
              <div key={v.k}>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.15em', color: 'var(--amber)', textTransform: 'uppercase', marginBottom: 8 }}>{v.k}</div>
                <div style={{ fontSize: 15, color: 'var(--navy)', lineHeight: 1.4 }}>{v.v}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .sse-about-grid { grid-template-columns: 1fr !important; }
          .sse-values-grid { grid-template-columns: 1fr 1fr !important; }
          .sse-about-sticky { position: relative !important; top: 0 !important; }
        }
      `}</style>
    </Section>
  );
}

function MetaRow({ k, v }) {
  return (
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 20, paddingBottom: 14, borderBottom: '1px dashed var(--line)' }}>
      <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.15em', color: 'var(--steel-dark)', textTransform: 'uppercase' }}>{k}</span>
      <span style={{ fontSize: 15, color: 'var(--navy)', fontWeight: 500 }}>{v}</span>
    </div>
  );
}

function LeaderCard({ name, title, body, children, badge, img }) {
  return (
    <div style={{
      background: 'var(--paper-warm)',
      border: '1px solid var(--line)',
      borderRadius: 6,
      padding: 32,
      position: 'relative',
      overflow: 'hidden',
      maxWidth: 620,
    }}>
      {img ? (
        <img src={img} alt={name} style={{ width: 88, height: 88, borderRadius: '50%', objectFit: 'cover', marginBottom: 20 }} />
      ) : (
        <div style={{
          width: 72, height: 72,
          borderRadius: '50%',
          background: 'linear-gradient(135deg, var(--navy) 0%, var(--navy-soft) 100%)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: 'var(--paper)',
          fontFamily: 'var(--font-display)',
          fontSize: 22,
          fontWeight: 600,
          letterSpacing: '-0.02em',
          marginBottom: 20,
        }}>
          {name.split(' ').filter(w => w !== 'Mr.').slice(0, 2).map(w => w[0]).join('')}
        </div>
      )}
      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.2em', color: 'var(--amber)', textTransform: 'uppercase', marginBottom: 6 }}>{badge}</div>
      <div style={{ fontFamily: 'var(--font-display)', fontSize: 24, fontWeight: 500, letterSpacing: '-0.02em', color: 'var(--navy)', marginBottom: 4 }}>{name}</div>
      <div style={{ fontSize: 13, color: 'var(--steel-dark)', marginBottom: 20 }}>{title}</div>
      {children ? (
        <div style={{ fontSize: 15, lineHeight: 1.6, color: 'var(--navy-soft)', textWrap: 'pretty' }}>{children}</div>
      ) : (
        <p style={{ fontSize: 15, lineHeight: 1.6, color: 'var(--navy-soft)', textWrap: 'pretty' }}>{body}</p>
      )}
    </div>
  );
}

Object.assign(window, { About });