// §5 Supply Chain — resilience + mycotoxin/mold comparison

function Supply(){
  return (
    <section id="supply" className="paper-bg">
      <div className="wrap">
        <SectionHeader
          num="05"
          label="Supply Chain"
          title='Resilient inputs. <em>Cleaner</em> cups.'
          lede="Excelsa's thick cherry skin, dry-processing compatibility, and phenolic profile translate into measurably lower mycotoxin load than industry-average Arabica and Robusta lots."
        />

        <div className="grid g2" style={{ marginTop:70, gap:56, alignItems:"start" }}>

          <Reveal delay={1}>
            <MycotoxinChart/>
            <div className="fig-caption"><b>Fig. 5.1 —</b> Ochratoxin A (OTA) in green coffee, n=240 lots, Excelsa Coffee Co. internal lab 2023–2025. EU limit = 5 µg/kg (regulation 2023/915).</div>
          </Reveal>

          <Reveal delay={2}>
            <div className="stack" style={{ gap:24 }}>
              <ChainNode n="01" title="Harvest at 22% defect threshold">
                Only ripe (full copper) cherries are picked; overripe and fermented drops are discarded at the tree. 3 passes per season.
              </ChainNode>
              <ChainNode n="02" title="Raised-bed drying, 14–21 days">
                Moisture taken to 10.5–11.5% on elevated African beds. Pile-drying on earth (the primary OTA driver) is prohibited on our farms.
              </ChainNode>
              <ChainNode n="03" title="Hermetic GrainPro storage">
                Dried parchment stored in sealed, oxygen-barrier bags at &lt;60% RH. Water-activity monitored weekly; anything &gt; 0.65 aw is pulled.
              </ChainNode>
              <ChainNode n="04" title="Pre-shipment lab release">
                Every export lot: OTA by HPLC-FLD, aflatoxin by ELISA, moisture + water activity, defect count. Released only at ≤1.5 µg/kg OTA.
              </ChainNode>
              <ChainNode n="05" title="Cold-chain ocean freight">
                40' reefer containers at 15°C, 55% RH, with data-loggers. Transit climate published per-lot on each bag's QR.
              </ChainNode>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function ChainNode({ n, title, children }){
  return (
    <div style={{ display:"grid", gridTemplateColumns:"60px 1fr", gap:20, paddingTop:20, borderTop:"1px solid var(--line-2)" }}>
      <div className="mono" style={{ fontSize:13, letterSpacing:"0.2em", color:"var(--copper)" }}>{n}</div>
      <div>
        <div style={{ fontFamily:"var(--serif)", fontSize:22, letterSpacing:"-0.015em", marginBottom:6 }}>{title}</div>
        <p style={{ margin:0, color:"var(--ink-2)", fontSize:15, lineHeight:1.6 }}>{children}</p>
      </div>
    </div>
  );
}

function MycotoxinChart(){
  // OTA µg/kg — industry vs. our Excelsa
  const rows = [
    { label:"Commodity Robusta",    value:4.1, color:"var(--ink-3)",    sub:"ICO sampling, global mean" },
    { label:"Commodity Arabica",    value:2.3, color:"var(--sage)",     sub:"ICO sampling, global mean" },
    { label:"Specialty Arabica",    value:1.1, color:"var(--sage-hi)",  sub:"SCA-grade, independent" },
    { label:"Excelsa Coffee Co.",   value:0.4, color:"var(--copper)",   sub:"Internal lab, 2023–25" },
  ];
  const max = 5;
  return (
    <div className="stack" style={{ gap:18 }}>
      <div className="between flex">
        <span className="tracked">OTA (µg / kg)</span>
        <span className="mono" style={{ fontSize:10, color:"var(--ink-3)", letterSpacing:"0.2em" }}>N=240 · 2025</span>
      </div>
      <div style={{ position:"relative", borderLeft:"1px solid var(--line)", paddingLeft:12, marginLeft: 4 }}>
        {rows.map(r => (
          <div key={r.label} style={{ marginBottom:18 }}>
            <div className="between flex" style={{ alignItems:"baseline", marginBottom:6 }}>
              <span className="mono" style={{ fontSize:11, letterSpacing:"0.14em" }}>{r.label}</span>
              <span className="mono" style={{ fontSize:11, color:"var(--ink-3)" }}>{r.value.toFixed(1)} µg/kg</span>
            </div>
            <div style={{ position:"relative", height:14, background:"var(--paper-2)", border:"1px solid var(--line-2)" }}>
              <div style={{ position:"absolute", left:0, top:0, bottom:0, width:`${(r.value/max)*100}%`, background:r.color }}/>
              {/* EU limit marker */}
              <div style={{ position:"absolute", left:`${(5/max)*100}%`, top:-4, bottom:-4, width:1, background:"var(--copper-2)" }} title="EU limit"/>
            </div>
            <div className="mono" style={{ fontSize:10, color:"var(--ink-3)", letterSpacing:"0.1em", marginTop:4 }}>{r.sub}</div>
          </div>
        ))}
      </div>
      <div className="flex" style={{ alignItems:"center", gap:8 }}>
        <span style={{ display:"inline-block", width:14, height:1, background:"var(--copper-2)" }}/>
        <span className="mono" style={{ fontSize:10, color:"var(--ink-3)", letterSpacing:"0.2em", textTransform:"uppercase" }}>EU Regulatory Limit · 5.0 µg/kg</span>
      </div>
    </div>
  );
}

window.Supply = Supply;