function Manufacturing() {
  return (
    <Section id="manufacturing" background="var(--paper-warm)">
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center' }} className="sse-mfg-grid">
        {/* Left: story */}
        <div>
          <Kicker>§ 05 · Manufacturing & Quality</Kicker>
          <Display size={64} style={{ marginTop: 24 }}>
            An in-house facility built around one obsession — <em style={{ fontStyle: 'italic', color: 'var(--amber)' }}>getting the details right.</em>
          </Display>
          <p style={{ fontSize: 17, lineHeight: 1.6, color: 'var(--navy-soft)', marginTop: 32, maxWidth: 520, textWrap: 'pretty' }}>
            Our Silvassa facility is organized around efficient manufacturing and inventory management systems — enabling us to dispatch most purchase orders within 48 hours of confirmation, without compromising the inspection standards our customers expect.
          </p>

          <div style={{ marginTop: 40, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
            <QualityPoint k="In-house Manufacturing" v="From tooling to final inspection, every step controlled internally." />
            <QualityPoint k="Batch Traceability" v="Each SKU tracked from raw material to shipping label." />
            <QualityPoint k="Inspection Protocol" v="Dimensional, electrical and material checks pre-dispatch." />
            <QualityPoint k="Ready Inventory" v="Fast-moving SKUs held in stock for immediate dispatch." />
          </div>
        </div>

        {/* Right: spec-sheet card */}
        <div>
          <SpecSheet />
        </div>
      </div>

      <style>{`
        @media (max-width: 1000px) {
          .sse-mfg-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </Section>
  );
}

function QualityPoint({ k, v }) {
  return (
    <div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
        <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
          <polygon points="6,1 10.5,3.5 10.5,8.5 6,11 1.5,8.5 1.5,3.5" fill="var(--amber)"/>
        </svg>
        <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--navy)', letterSpacing: '-0.01em' }}>{k}</div>
      </div>
      <div style={{ fontSize: 13, lineHeight: 1.5, color: 'var(--steel-dark)', paddingLeft: 20 }}>{v}</div>
    </div>
  );
}

function SpecSheet() {
  return (
    <div style={{
      background: 'var(--paper)',
      border: '1px solid var(--line)',
      borderRadius: 8,
      padding: 32,
      fontFamily: 'var(--font-mono)',
      fontSize: 13,
      position: 'relative',
    }}>
      {/* Header */}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20, paddingBottom: 16, borderBottom: '1px dashed var(--line-strong)' }}>
        <div style={{ letterSpacing: '0.15em', textTransform: 'uppercase', color: 'var(--navy)', fontWeight: 600 }}>
          SSE / Capabilities
        </div>
        <div style={{ letterSpacing: '0.1em', color: 'var(--steel-dark)', fontSize: 11 }}>
          Rev. 06 · 2026
        </div>
      </div>

      {/* Rows */}
      {[
        ['Product families', '05'],
        ['SKU count', '100+ active'],
        ['Current range', '10A – 63A'],
        ['Gasket ID range', '45mm – 350mm'],
        ['Push button sizes', '7 / 12 / 16 mm'],
        ['Materials', 'Polyamide · Silicone · SS304'],
        ['Dispatch window', '≤ 48 hours'],
        ['Territory', 'Pan-India · Export ready'],
      ].map(([k, v], i) => (
        <div key={k} style={{
          display: 'grid',
          gridTemplateColumns: '1fr auto',
          gap: 20,
          padding: '12px 0',
          borderBottom: i < 7 ? '1px dashed var(--line)' : 'none',
        }}>
          <span style={{ color: 'var(--steel-dark)', letterSpacing: '0.05em' }}>{k}</span>
          <span style={{ color: 'var(--navy)', fontWeight: 500 }}>{v}</span>
        </div>
      ))}

      {/* Stamp */}
      <div style={{
        position: 'absolute',
        top: 24, right: -12,
        transform: 'rotate(6deg)',
        border: '1.5px solid var(--amber)',
        color: 'var(--amber)',
        padding: '6px 12px',
        borderRadius: 4,
        fontSize: 10,
        letterSpacing: '0.2em',
        fontWeight: 600,
        background: 'var(--paper)',
      }}>
        Q.C. VERIFIED
      </div>
    </div>
  );
}

Object.assign(window, { Manufacturing });