// PROCESS / HOW WE WORK
// Four-step ledger: Source → Verify → Move → Deliver. Editorial layout with
// large step numbers, italic display titles, supporting body, side metrics.
function Process() {
  const steps = [
    {
      n: 'I',
      title: 'Source',
      tag: 'Origin & relationships',
      body: 'We work a vetted book of farms, vessels, and processing plants. Every supplier is qualified before a single container moves — facility audits, certification review, and reference checks form the price of admission.',
      kpis: [
        { k: 'Qualification', v: '90 days' },
        { k: 'Audit cycle',    v: 'Annual' },
      ],
    },
    {
      n: 'II',
      title: 'Verify',
      tag: 'Quality & compliance',
      body: 'Every lot is documented end-to-end. BAP, ASC, MSC, HACCP and FDA paperwork is prepared before shipment, and our team performs pre-shipment inspections at origin to confirm spec, sizing, and cold-chain history.',
      kpis: [
        { k: 'Inspection',  v: '100%' },
        { k: 'Traceability', v: 'Lot-level' },
      ],
    },
    {
      n: 'III',
      title: 'Move',
      tag: 'Logistics & cold chain',
      body: 'Reefer ocean freight, airfreight for live and premium fresh, and bonded warehousing in key markets. We manage carriers, customs, and cold-chain integrity as a single line of responsibility — not a relay.',
      kpis: [
        { k: 'Lanes',     v: '40+ active' },
        { k: 'Coverage',  v: '24/7 ops' },
      ],
    },
    {
      n: 'IV',
      title: 'Deliver',
      tag: 'Buyers & after-sale',
      body: 'Product arrives to spec, on schedule, with paperwork in hand. After delivery we close the loop — quality reports, claim handling, and continuous calibration with both ends of the trade.',
      kpis: [
        { k: 'On-time',   v: '> 98%' },
        { k: 'Claim rate', v: '< 0.5%' },
      ],
    },
  ];

  return (
    <>
      <style>{`
        .process{background:var(--paper-2);padding:120px 0}
        .process .section-head .meta{color:rgba(20,29,36,.55)}
        .proc-list{margin-top:48px}
        .proc-step{
          display:grid;
          grid-template-columns:120px 1fr 1.2fr 220px;
          gap:32px;
          padding:48px 0;
          border-top:1px solid rgba(20,33,51,.18);
          align-items:start;
        }
        .proc-step:last-child{border-bottom:1px solid rgba(20,33,51,.18)}
        .proc-step .roman{
          font-family:var(--serif);
          font-style:italic;font-weight:400;
          font-size:64px;line-height:1;
          color:var(--brass);
        }
        .proc-step .tag{
          font-family:var(--mono);
          font-size:10px;letter-spacing:.18em;text-transform:uppercase;
          color:rgba(20,33,51,.5);
          margin-bottom:14px;
        }
        .proc-step .title{
          font-family:var(--serif);
          font-style:italic;font-weight:500;
          font-size:clamp(36px,4vw,56px);line-height:1;letter-spacing:-0.01em;
          margin:0;color:var(--ink);
        }
        .proc-step .body{
          font-size:15px;line-height:1.6;color:rgba(20,33,51,.78);
          font-weight:300;margin:0;padding-top:8px;
        }
        .proc-step .kpis{
          display:flex;flex-direction:column;gap:14px;
          padding:8px 0 0 24px;
          border-left:1px solid rgba(20,33,51,.2);
        }
        .proc-step .kpis .k{
          font-family:var(--mono);font-size:10px;letter-spacing:.18em;
          text-transform:uppercase;color:rgba(20,33,51,.5);
        }
        .proc-step .kpis .v{
          font-family:var(--serif);font-style:italic;font-weight:500;
          font-size:24px;color:var(--ink);margin-top:2px;line-height:1;
        }
        @media (max-width:980px){
          .proc-step{grid-template-columns:60px 1fr;gap:18px}
          .proc-step .roman{font-size:40px}
          .proc-step .body,.proc-step .kpis{grid-column:2}
          .proc-step .kpis{padding-left:0;border-left:0;border-top:1px solid rgba(20,33,51,.18);padding-top:14px;flex-direction:row;flex-wrap:wrap;gap:24px}
        }
      `}</style>

      <section id="process" className="process">
        <div className="container">
          <div className="section-head">
            <div className="num">§ 03 — Method</div>
            <h2>How we work</h2>
            <div className="meta">
              Four-stage protocol<br/>
              Source · Verify · Move · Deliver
            </div>
          </div>

          <div className="proc-list">
            {steps.map(s => (
              <div key={s.n} className="proc-step">
                <div className="roman">{s.n}</div>
                <div>
                  <div className="tag">{s.tag}</div>
                  <h3 className="title">{s.title}</h3>
                </div>
                <p className="body">{s.body}</p>
                <div className="kpis">
                  {s.kpis.map(k => (
                    <div key={k.k}>
                      <div className="k">{k.k}</div>
                      <div className="v">{k.v}</div>
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}

window.Process = Process;