// §2 The Science — Nature 2025 findings + genome/chromosome diagram

function Science(){
  return (
    <section id="science" className="paper-dark">
      <div className="wrap">
        <div className="stack" style={{ gap:20 }}>
          <Reveal className="section-label" style={{ color:"rgba(244,237,225,0.6)" }}>
            <span className="section-num" style={{ color:"var(--copper-hi)" }}>§ 02</span>
            <span style={{ marginLeft:10 }}>The Science · Nature Plants, 2025</span>
          </Reveal>
          <Reveal delay={1}>
            <h2 className="display" style={{ color:"var(--paper)", maxWidth:"20ch" }}>
              A genome <em style={{color:"var(--copper-hi)"}}>rewrote</em> the coffee family tree.
            </h2>
          </Reveal>
          <Reveal delay={2}>
            <p className="lede" style={{ color:"rgba(244,237,225,0.75)", maxWidth:"60ch" }}>
              A 2025 genomic study in <i>Nature Plants</i> sequenced 173 Liberica accessions across its native range and resolved a 130-year argument: <b>Excelsa</b> is its own species — <i>Coffea excelsa</i> — not merely a variety of Liberica. More importantly, it carries allelic diversity Arabica lost long ago.
            </p>
          </Reveal>
        </div>

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

          {/* LEFT — chromosome / genome diagram */}
          <Reveal delay={1}>
            <GenomeDiagram/>
            <div className="fig-caption" style={{ color:"rgba(244,237,225,0.6)", borderColor:"rgba(244,237,225,0.15)" }}>
              <b style={{color:"var(--paper)"}}>Fig. 2.1 —</b>
              <i>C. excelsa</i> diploid genome (2n = 22), ~690 Mb. Highlighted loci: <span style={{color:"var(--copper-hi)"}}>CcCYP82C4</span> (caffeine reduction), <span style={{color:"var(--sage-hi)"}}>CcLOX</span> (mold resistance), <span style={{color:"var(--copper-hi)"}}>CcCBF</span> (heat-tolerance cluster).
            </div>
          </Reveal>

          {/* RIGHT — findings */}
          <Reveal delay={2}>
            <div className="stack" style={{ gap: 28 }}>

              <Finding n="I" title="Two species, one lineage">
                Accessions historically labelled <i>C. liberica</i>, <i>C. excelsa</i> and <i>C. dewevrei</i> resolved into two distinct species with strong genomic separation: <i>C. liberica</i> and <i>C. excelsa</i>. The 2006 variety-of-liberica designation was overturned.
              </Finding>
              <Finding n="II" title="Higher diversity than Arabica">
                Excelsa retains ~3.2× the nucleotide diversity (π ≈ 0.0041) of cultivated Arabica — a reservoir of alleles lost to a single domestication bottleneck ~600 yrs ago.
              </Finding>
              <Finding n="III" title="Heat-tolerance alleles">
                CBF transcription-factor variants and HSP90 copy-number expansions associate with survival at Tmax &gt; 34°C — thresholds that shut Arabica down.
              </Finding>
              <Finding n="IV" title="Disease-resistance loci">
                Excelsa carries the same SH-class resistance genes that breeders have long introgressed from this lineage into Arabica (Timor hybrid, Sarchimor) — the basis of today's commercial CLR-resistant cultivars.
              </Finding>

              <div className="card" style={{ background:"rgba(244,237,225,0.06)", border:"1px solid rgba(244,237,225,0.15)", color:"var(--paper)" }}>
                <div className="tracked" style={{ color:"var(--copper-hi)" }}>Citation</div>
                <p style={{ margin:"10px 0 0", fontSize:14, color:"rgba(244,237,225,0.85)", lineHeight:1.55 }}>
                  “Genomic data define species delimitation in Liberica coffee with implications for crop development.” <i>Nature Plants</i>, 2025. DOI: 10.1038/s41477-025-02073-y
                </p>
              </div>

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

function Finding({ n, title, children }){
  return (
    <div style={{ borderTop:"1px solid rgba(244,237,225,0.18)", paddingTop:20, display:"grid", gridTemplateColumns:"60px 1fr", gap: 20 }}>
      <div className="mono" style={{ fontSize:12, color:"var(--copper-hi)", letterSpacing:"0.2em" }}>{n}.</div>
      <div>
        <div style={{ fontFamily:"var(--serif)", fontSize:22, color:"var(--paper)", letterSpacing:"-0.015em", marginBottom:6 }}>{title}</div>
        <p style={{ margin:0, color:"rgba(244,237,225,0.72)", fontSize:15, lineHeight:1.55 }}>{children}</p>
      </div>
    </div>
  );
}

/* Chromosome diagram — 11 chromosome pairs */
function GenomeDiagram(){
  const chromosomes = Array.from({length:11}, (_,i)=>{
    const len = 38 + Math.sin(i*1.3)*16;
    return len;
  });
  return (
    <svg viewBox="0 0 520 420" width="100%" style={{ display:"block" }} aria-hidden="true">
      {/* title */}
      <text x="0" y="16" fontFamily="var(--mono)" fontSize="10" fill="rgba(244,237,225,0.7)" letterSpacing="2">KARYOGRAM · COFFEA EXCELSA (2n=22)</text>

      {chromosomes.map((len, i) => {
        const x = 30 + i*44;
        const cent = len*0.4;
        const highlight1 = i===2 ? cent+8 : null;
        const highlight2 = i===6 ? cent-6 : null;
        const highlight3 = i===9 ? cent+14 : null;
        return (
          <g key={i} transform={`translate(${x}, 60)`}>
            {/* pair */}
            {[0,18].map((dx,k)=>(
              <g key={k} transform={`translate(${dx},0)`}>
                <rect x="0" y="0" width="12" height={len*4} rx="6" fill="rgba(244,237,225,0.1)" stroke="rgba(244,237,225,0.4)" strokeWidth="0.6"/>
                {/* bands */}
                {Array.from({length:6}).map((_,b)=>(
                  <rect key={b} x="1.5" y={10 + b*(len*4-20)/6} width="9" height="4" fill="rgba(244,237,225,0.18)"/>
                ))}
                {/* centromere */}
                <rect x="-2" y={cent*4} width="16" height="3" fill="var(--ink)"/>
                <rect x="0" y={cent*4} width="12" height="3" fill="rgba(244,237,225,0.45)"/>
                {/* highlighted loci */}
                {highlight1 && k===0 && <circle cx="6" cy={highlight1*4} r="4" fill="var(--copper-hi)"/>}
                {highlight2 && k===0 && <circle cx="6" cy={highlight2*4} r="4" fill="var(--sage-hi)"/>}
                {highlight3 && k===0 && <circle cx="6" cy={highlight3*4} r="4" fill="var(--copper-hi)"/>}
              </g>
            ))}
            {/* label */}
            <text x="15" y={len*4 + 18} textAnchor="middle" fontFamily="var(--mono)" fontSize="9" fill="rgba(244,237,225,0.6)" letterSpacing="1">{i+1}</text>
          </g>
        );
      })}

      {/* legend */}
      <g transform="translate(30, 350)" fontFamily="var(--mono)" fontSize="10" fill="rgba(244,237,225,0.75)" letterSpacing="1">
        <g><circle cx="6" cy="6" r="5" fill="var(--copper-hi)"/><text x="18" y="10">CcCYP82C4 · caffeine</text></g>
        <g transform="translate(200,0)"><circle cx="6" cy="6" r="5" fill="var(--sage-hi)"/><text x="18" y="10">CcLOX · mold defense</text></g>
        <g transform="translate(0,24)"><circle cx="6" cy="6" r="5" fill="var(--copper-hi)"/><text x="18" y="10">CcCBF · heat tolerance cluster</text></g>
      </g>
    </svg>
  );
}

window.Science = Science;