// §1 What is Excelsa? Species intro.

function Species(){
  return (
    <section id="species" className="paper-bg">
      <div className="wrap">

        <SectionHeader
          num="01"
          label="Species Profile"
          title='What <em>is</em> Excelsa?'
          lede="Excelsa is the third cultivated species of coffee — after Arabica and Robusta. A 2025 Nature Plants genomic study confirmed Coffea excelsa as its own species, ending a century of taxonomic confusion that had folded it into Liberica as var. dewevrei."
        />

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

          {/* LEFT: Specimen card */}
          <Reveal delay={1}>
            <div className="plate">
              <div style={{ background:"var(--paper-2)" }}>
                <BotanicalPlate height={560}/>
              </div>
              <div className="caption">
                <span>PLATE I · COFFEA EXCELSA</span>
                <span>After Dewèvre, 1895 · A. Chevalier, 1903</span>
              </div>
            </div>
          </Reveal>

          {/* RIGHT: Taxonomy + traits */}
          <Reveal delay={2}>
            <div className="stack" style={{ gap: 28 }}>

              <div>
                <div className="tracked" style={{ color:"var(--copper)", marginBottom:8 }}>Taxonomy</div>
                <table className="datatable">
                  <tbody>
                    <tr><th>Kingdom</th><td>Plantae</td></tr>
                    <tr><th>Family</th><td>Rubiaceae</td></tr>
                    <tr><th>Genus</th><td><i>Coffea</i></td></tr>
                    <tr><th>Species</th><td><i>Coffea excelsa</i> A. Chevalier (1903)</td></tr>
                    <tr><th>Former name</th><td><i>C. liberica</i> var. <i>dewevrei</i> · reclassified 2025</td></tr>
                    <tr><th>Common</th><td>Excelsa · Barako (PH) · Kape Alamid</td></tr>
                    <tr><th>Ploidy</th><td>2n = 22 (diploid)</td></tr>
                    <tr><th>Native range</th><td>West & Central Africa — Liberia → S. Sudan</td></tr>
                  </tbody>
                </table>
              </div>

              <div className="grid g2" style={{ gap: 18 }}>
                <TraitBar label="Leaf size vs Arabica" value={2.4} unit="×" max={3}/>
                <TraitBar label="Cherry diameter" value={18} unit="mm" max={25}/>
                <TraitBar label="Tree height (wild)" value={15} unit="m" max={20}/>
                <TraitBar label="Time to first crop" value={4} unit="yrs" max={6}/>
              </div>

              <div className="card" style={{ background:"var(--paper-2)" }}>
                <div className="tracked" style={{ color:"var(--sage-2)", marginBottom:10 }}>Diagnostic</div>
                <p style={{ margin:0, color:"var(--ink-2)", fontSize:16, lineHeight:1.55 }}>
                  Excelsa is recognised by <b>large leathery leaves</b> (up to 30 cm), <b>pear-shaped cherries</b> with a pronounced apex, and a <b>flat, elongated bean</b> with a deep centre-cut. Aromatics are unmistakable: dried fruit, smoke, jackfruit, cedar.
                </p>
              </div>

            </div>
          </Reveal>

        </div>
      </div>
    </section>
  );
}

function TraitBar({ label, value, unit, max }){
  const pct = Math.min(100, (value/max)*100);
  return (
    <div>
      <div style={{ display:"flex", justifyContent:"space-between", alignItems:"baseline" }}>
        <span className="mono" style={{ fontSize:10, letterSpacing:"0.2em", textTransform:"uppercase", color:"var(--ink-3)" }}>{label}</span>
        <span className="mono" style={{ fontSize:12, color:"var(--ink)" }}>{value}<span style={{ color:"var(--ink-3)", marginLeft:3 }}>{unit}</span></span>
      </div>
      <div style={{ height: 2, background:"var(--line-2)", marginTop:8, position:"relative" }}>
        <div style={{ position:"absolute", left:0, top:0, bottom:0, width:`${pct}%`, background:"var(--copper)" }}/>
      </div>
    </div>
  );
}

window.Species = Species;