const STEPS = [
  { n: '01', t: 'Discovery', body: 'One working session. We pressure-test your concept against cost, materials, and MOQs before you spend a cent on samples.', foot: 'Week 1' },
  { n: '02', t: 'Design & patent', body: 'CAD, pattern-making, and a utility/design patent filing where there\'s something worth protecting. You own the IP outright.', foot: 'Week 2 to 4' },
  { n: '03', t: 'Sampling', body: 'First-pattern, fit-sample, pre-production. Three rounds baked in. You get factory-floor video of every stitch.', foot: 'Week 4 to 8' },
  { n: '04', t: 'Production & QC', body: 'In-line inspection on every unit, AQL 1.5 final audit, freight booked through our forwarder at our rate. No surprises at the port.', foot: 'Week 9+' }
];

const Process = () => (
  <section className="process" id="process">
    <Container>
      <div className="process__head">
        <div>
          <span className="eyebrow">How we work</span>
          <h2 style={{ marginTop: 18 }}>Four stages. <em>One contract.</em><br/>No hand-offs between studios.</h2>
        </div>
        <p className="lead">Most soft-goods projects die in the gap between the designer, the patent attorney, and the factory. We close that gap by doing all three under one roof in Ho Chi Minh City.</p>
      </div>
      <div className="process__grid">
        {STEPS.map((s) => (
          <div key={s.n} className="pcard glass">
            <div className="pcard__n">{s.n} / {STEPS.length.toString().padStart(2,'0')}</div>
            <h3>{s.t}</h3>
            <p>{s.body}</p>
            <div className="pcard__foot">{s.foot}</div>
          </div>
        ))}
      </div>
    </Container>
  </section>
);

window.Process = Process;