// §8 Comparison — Arabica vs Robusta vs Liberica vs Excelsa

function Comparison(){
  const species = [
    {
      key:"arab", name:"Arabica", latin:"C. arabica", share:"60%",
      temp:"18–24°C", alt:"900–2000 m", caffeine:"1.1–1.5%", yield:"1.5–3.0 t/ha", notes:"Bright, floral, citric",
      heat:35, disease:30, cup:92, yieldN:55, shade:70,
    },
    {
      key:"rob",  name:"Robusta", latin:"C. canephora", share:"36%",
      temp:"22–30°C", alt:"0–800 m",   caffeine:"2.2–2.7%", yield:"2.3–4.0 t/ha", notes:"Earthy, bitter, rubber",
      heat:75, disease:72, cup:58, yieldN:80, shade:30,
    },
    {
      key:"exc",  name:"Excelsa",  latin:"C. excelsa", share:"<1%", featured:true,
      temp:"20–34°C", alt:"0–1500 m",  caffeine:"0.9–1.4%", yield:"1.2–2.2 t/ha", notes:"Jackfruit, tamarind, cedar",
      heat:88, disease:80, cup:86, yieldN:60, shade:90,
    },
  ];
  return (
    <section id="comparison" className="paper-bg">
      <div className="wrap">
        <SectionHeader
          num="08"
          label="Comparative Matrix"
          title='Three species. <em>One</em> outlier.'
          lede="The three main cultivated coffee species — Arabica, Robusta, and Excelsa — side-by-side. Excelsa sits uniquely at the intersection of resilience, yield viability, and specialty-grade cup potential."
        />

        <Reveal delay={1} style={{ marginTop:70 }}>
          <div style={{ overflowX:"auto", border:"1px solid var(--line)" }}>
          <table className="datatable" style={{ minWidth:900 }}>
            <thead>
              <tr>
                <th>Species</th>
                <th>Global share</th>
                <th>Temp. range</th>
                <th>Altitude</th>
                <th>Caffeine (db)</th>
                <th>Yield</th>
                <th>Cup archetype</th>
              </tr>
            </thead>
            <tbody>
              {species.map(s => (
                <tr key={s.key} style={s.featured ? { background:"rgba(177,98,44,0.08)" } : {}}>
                  <td>
                    <div style={{ fontFamily:"var(--serif)", fontSize:18, color: s.featured ? "var(--copper-2)" : "var(--ink)" }}>{s.name}</div>
                    <div style={{ fontStyle:"italic", color:"var(--ink-3)", fontSize:11 }}>{s.latin}</div>
                  </td>
                  <td>{s.share}</td>
                  <td>{s.temp}</td>
                  <td>{s.alt}</td>
                  <td>{s.caffeine}</td>
                  <td>{s.yield}</td>
                  <td>{s.notes}</td>
                </tr>
              ))}
            </tbody>
          </table>
          </div>
        </Reveal>

        <div className="grid g4" style={{ marginTop: 70, gap:24 }}>
          {species.map((s,i) => (
            <Reveal key={s.key} delay={(i%4)+1}>
              <SpeciesCard s={s}/>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function SpeciesCard({ s }){
  const axes = ["Heat","Disease","Cup","Yield","Shade"];
  const values = [s.heat/10, s.disease/10, s.cup/10, s.yieldN/10, s.shade/10];
  return (
    <div className="card" style={{
      padding: 24,
      background: s.featured ? "var(--ink)" : "var(--cream-hi)",
      color: s.featured ? "var(--paper)" : "var(--ink)",
      borderColor: s.featured ? "var(--ink)" : "var(--line)",
    }}>
      <div className="between flex" style={{ alignItems:"baseline", marginBottom:14 }}>
        <div>
          <div style={{ fontFamily:"var(--serif)", fontSize:24, letterSpacing:"-0.02em" }}>{s.name}</div>
          <div className="mono" style={{ fontSize:10, letterSpacing:"0.18em", opacity:.6, marginTop:2 }}>{s.latin.toUpperCase()}</div>
        </div>
        {s.featured && <span className="tag copper" style={{ background:"var(--copper)", color:"var(--paper)", borderColor:"var(--copper)" }}>★ Featured</span>}
      </div>
      <Radar
        axes={axes} values={values} size={240}
        color={s.featured ? "var(--copper-hi)" : "var(--copper)"}
      />
    </div>
  );
}

window.Comparison = Comparison;