// §4 Farm — regenerative + climate tolerance chart

function Farm(){
  return (
    <section id="farm" className="paper-bg">
      <div className="wrap">
        <SectionHeader
          num="04"
          label="Regenerative Farming"
          title='A tree that <em>wants</em> to grow with the forest.'
          lede="Excelsa's deep taproot, wide canopy and tolerance for shade make it one of the few cultivated coffees genuinely suited to agroforestry — not as a compromise, but as optimum."
        />

        <div className="grid g2" style={{ marginTop:70, gap:56, alignItems:"start" }}>
          <Reveal delay={1}>
            <ClimateChart/>
            <div className="fig-caption"><b>Fig. 4.1 —</b> Cultivation envelope. Excelsa's tolerance window overlaps with — and extends beyond — both Arabica and Robusta for temperature, rainfall and altitude.</div>
          </Reveal>

          <Reveal delay={2}>
            <div className="stack" style={{ gap:24 }}>
              <PracticeRow n="A" title="Shade-grown agroforestry">
                Our farms interplant Excelsa beneath native timber and banana canopies at 40–60% shade. Canopy lowers leaf-surface temperature by 3–5°C, reducing evapotranspiration and stress-triggered mycotoxin precursors.
              </PracticeRow>
              <PracticeRow n="B" title="Soil carbon + cover cropping">
                Legume understory (mucuna, tephrosia) fixes N, protects topsoil, and over 5 years adds 0.8–1.4% SOC. No synthetic N required after year 3.
              </PracticeRow>
              <PracticeRow n="C" title="Pollinator corridors">
                Untouched hedgerows every 40 m. 14 native bee species documented on our Sulu flagship farm; fruit set up 22% vs. monoculture baseline.
              </PracticeRow>
              <PracticeRow n="D" title="Water: dry processing by default">
                Natural / sun-dried processing reduces water use to near-zero vs. washed coffee's 40–140 L/kg. Excelsa's robust skin is structurally suited to this.
              </PracticeRow>
              <PracticeRow n="E" title="Fair farmer economics">
                Longer-lived trees (30–50 yr productive life vs. Arabica's 15–20) plus premium cup pricing = 2.3× smallholder income at parity yield.
              </PracticeRow>
            </div>
          </Reveal>
        </div>

        <div className="grid g4" style={{ marginTop:90, gap: 28, padding: "40px 0", borderTop:"1px solid var(--line)", borderBottom:"1px solid var(--line)" }}>
          <Reveal delay={1}><Stat value="+4.2" unit="°C" label="Heat headroom vs. Arabica" note="Tmax tolerance before flower abortion."/></Reveal>
          <Reveal delay={2}><Stat value="40" unit="yrs" label="Productive tree life" note="Against Arabica's 15–20 years."/></Reveal>
          <Reveal delay={3}><Stat value="1.1" unit="t SOC / ha / yr" label="Soil carbon sequestered" note="5-yr mean, shaded agroforestry system."/></Reveal>
          <Reveal delay={4}><Stat value="0" unit="L / kg" label="Processing water" note="Natural-dry, our standard protocol."/></Reveal>
        </div>
      </div>
    </section>
  );
}

function PracticeRow({ n, title, children }){
  return (
    <div style={{ display:"grid", gridTemplateColumns:"44px 1fr", gap:20, borderTop:"1px solid var(--line-2)", paddingTop:20 }}>
      <div style={{
        width:36, height:36, border:"1px solid var(--ink)", borderRadius:"50%",
        display:"flex", alignItems:"center", justifyContent:"center",
        fontFamily:"var(--serif)", fontStyle:"italic", fontSize:16,
      }}>{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 ClimateChart(){
  // three horizontal tolerance bars — temp, rainfall, altitude
  const rows = [
    { label:"Temperature", unit:"°C", ticks:[14, 18, 22, 26, 30, 34, 38],
      bars:[
        { name:"Arabica",  color:"var(--sage)",    min:18, max:24 },
        { name:"Robusta",  color:"var(--ink-3)",   min:22, max:30 },
        { name:"Excelsa",  color:"var(--copper)",  min:20, max:34 },
      ] },
    { label:"Annual rainfall", unit:"mm", ticks:[600, 1200, 1800, 2400, 3000, 3600],
      bars:[
        { name:"Arabica",  color:"var(--sage)",    min:1400, max:2000 },
        { name:"Robusta",  color:"var(--ink-3)",   min:1200, max:2200 },
        { name:"Excelsa",  color:"var(--copper)",  min:1000, max:3600 },
      ] },
    { label:"Altitude", unit:"m.a.s.l.", ticks:[0, 400, 800, 1200, 1600, 2000],
      bars:[
        { name:"Arabica",  color:"var(--sage)",    min:900, max:2000 },
        { name:"Robusta",  color:"var(--ink-3)",   min:0,    max:800 },
        { name:"Excelsa",  color:"var(--copper)",  min:0,    max:1500 },
      ] },
  ];

  return (
    <div className="stack" style={{ gap: 28 }}>
      {rows.map(r => {
        const min = r.ticks[0], max = r.ticks[r.ticks.length-1];
        const norm = (v) => ((v-min)/(max-min))*100;
        return (
          <div key={r.label}>
            <div className="between flex" style={{ alignItems:"baseline", marginBottom: 10 }}>
              <span className="tracked" style={{ color:"var(--ink)" }}>{r.label}</span>
              <span className="mono" style={{ fontSize:10, color:"var(--ink-3)", letterSpacing:"0.2em" }}>{r.unit}</span>
            </div>
            <div style={{ position:"relative", paddingBottom: 24, overflow: "hidden" }}>
              {/* ticks */}
              <div style={{ height:1, background:"var(--line)", position:"relative" }}>
                {r.ticks.map(t => (
                  <div key={t} style={{ position:"absolute", left:`${norm(t)}%`, top:-4, bottom:-4, width:1, background:"var(--line)" }}/>
                ))}
              </div>
              {/* bars */}
              <div style={{ position:"relative", marginTop:12, display:"flex", flexDirection:"column", gap:8 }}>
                {r.bars.map(b => {
                  const atEdge = norm(b.max) > 78; // label would overflow right → render inside bar
                  return (
                  <div key={b.name} style={{ position:"relative", height:22 }}>
                    <div style={{ position:"absolute", left:0, right:0, top:"50%", height:1, background:"var(--line-2)" }}/>
                    <div style={{
                      position:"absolute",
                      left:`${norm(b.min)}%`,
                      width:`${norm(b.max)-norm(b.min)}%`,
                      top:3, bottom:3,
                      background:b.color,
                      opacity: b.name==="Excelsa" ? 1 : 0.35,
                      border: b.name==="Excelsa" ? "1px solid var(--copper-2)" : "none",
                    }}/>
                    <span className="mono" style={atEdge ? {
                      position:"absolute",
                      right:`calc(100% - ${norm(b.max)}% + 6px)`,
                      top: 6,
                      fontSize:10, letterSpacing:"0.14em", textTransform:"uppercase",
                      color: b.name==="Excelsa" ? "var(--cream-hi)" : "var(--ink)",
                      pointerEvents:"none",
                      whiteSpace:"nowrap",
                    } : {
                      position:"absolute",
                      left:`calc(${norm(b.max)}% + 8px)`,
                      top: 2,
                      fontSize:10, letterSpacing:"0.18em", textTransform:"uppercase",
                      color:"var(--ink-3)",
                      whiteSpace:"nowrap",
                    }}>{b.name}</span>
                  </div>
                  );
                })}
              </div>
              {/* tick labels */}
              <div style={{ position:"relative", marginTop: 18 }}>
                {r.ticks.map(t => (
                  <span key={t} className="mono" style={{ position:"absolute", left:`${norm(t)}%`, transform:"translateX(-50%)", fontSize:9, color:"var(--ink-3)", letterSpacing:"0.14em", whiteSpace:"nowrap" }}>{t}</span>
                ))}
              </div>
            </div>
          </div>
        );
      })}
    </div>
  );
}

window.Farm = Farm;