// §3 History — forgotten bean, handdrawn plates timeline

function History(){
  return (
    <section id="history" className="paper-bg">
      <div className="wrap">
        <SectionHeader
          num="03"
          label="A Brief Natural History"
          title='150 <em>forgotten</em> years.'
          lede="Excelsa was described in 1903, celebrated as coffee's savior when leaf rust devastated Ceylon, then forgotten. A handful of Filipino farmers and a few Vietnamese smallholders kept it alive."
        />

        <div className="grid g2" style={{ marginTop: 70, gap: 56, alignItems:"start" }}>
          <Reveal delay={1}>
            <div className="plate">
              <div style={{ background:"var(--paper-2)", padding:20 }}>
                <OldPlate/>
              </div>
              <div className="caption">
                <span>Pl. XVII · Dewèvre &amp; De Wildeman</span>
                <span>Brussels, 1896</span>
              </div>
            </div>
            <p className="hand" style={{ marginTop:18, color:"var(--sage-2)", fontSize:24, transform:"rotate(-1deg)", maxWidth:"40ch" }}>
              "A plant of surprising vigor, resisting both the blight and the heat... the berries greater, the leaf robust." — E. De Wildeman, Brussels
            </p>
          </Reveal>

          <Reveal delay={2}>
            <ol style={{ listStyle:"none", padding:0, margin:0, display:"flex", flexDirection:"column", gap:26 }}>
              <Era year="1872" title="Hemileia vastatrix reaches Ceylon">
                Coffee leaf rust collapses the world's largest coffee industry. Planters hunt for resistant species.
              </Era>
              <Era year="1874" title="W. Bull publishes C. liberica">
                A hardy, large-leaved species from West Africa enters commerce. Ceylon replants with it — but yields disappoint.
              </Era>
              <Era year="1903" title="Excelsa is described">
                A. Chevalier identifies a closely related form in the French Congo: <i>Coffea excelsa</i>, distinguished by smaller fruit and finer cup.
              </Era>
              <Era year="1910s" title="Philippines & French Indochina">
                Colonial planters establish Excelsa in the Philippines (as <i>barako</i>) and Vietnam. It thrives where Arabica fails.
              </Era>
              <Era year="1950s" title="Instant coffee absorbs the lesser species">
                Robusta consolidates the low-grade market. Excelsa falls below commercial radar — preserved only by smallholders.
              </Era>
              <Era year="2006" title="Reclassification attempts">
                N. Davis &amp; collaborators reclassify Excelsa as a variety of <i>C. liberica</i>. The lumpers and splitters argue for two decades.
              </Era>
              <Era year="2020→" title="Climate reopens the file">
                Arabica's projected range contracts 50% by 2050. Specialty importers and breeders revisit Liberica/Excelsa.
              </Era>
              <Era year="2025" copper title="Nature Plants — genomic consensus">
                173 accessions sequenced. Excelsa restored to its own species — <i>Coffea excelsa</i> — distinct from Liberica. A new chapter begins.
              </Era>
            </ol>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function Era({ year, title, children, copper }){
  return (
    <li style={{ display:"grid", gridTemplateColumns:"90px 1fr", gap:24, paddingBottom:22, borderBottom:"1px solid var(--line-2)" }}>
      <div className="mono" style={{ fontSize:13, letterSpacing:"0.16em", color: copper ? "var(--copper)" : "var(--ink-3)", fontWeight:500 }}>{year}</div>
      <div>
        <div style={{ fontFamily:"var(--serif)", fontSize:22, letterSpacing:"-0.015em", marginBottom:4, color: copper ? "var(--copper-2)" : "var(--ink)" }}>{title}</div>
        <p style={{ margin:0, color:"var(--ink-2)", fontSize:15, lineHeight:1.55 }}>{children}</p>
      </div>
    </li>
  );
}

/* A rougher, older-looking botanical plate (for history) */
function OldPlate(){
  return (
    <svg viewBox="0 0 360 480" width="100%" aria-hidden="true">
      <defs>
        <filter id="old-rough">
          <feTurbulence type="fractalNoise" baseFrequency="1.3" numOctaves="2" seed="9"/>
          <feDisplacementMap in="SourceGraphic" scale="0.6"/>
        </filter>
      </defs>
      <g stroke="var(--ink-2)" strokeWidth="0.6" fill="none" filter="url(#old-rough)">
        <path d="M180 460 C 178 380, 185 300, 180 220 C 175 140, 188 80, 180 30"/>
        <path d="M180 380 Q 120 360, 70 330"/>
        <path d="M180 300 Q 250 280, 300 250"/>
        <path d="M180 220 Q 115 200, 65 170"/>
        <path d="M180 140 Q 260 120, 310 90"/>

        {[[70,330,-30],[300,250,35],[65,170,-40],[310,90,42]].map(([cx,cy,a],i)=>(
          <g key={i} transform={`translate(${cx},${cy}) rotate(${a})`}>
            <path d="M0 -40 C 30 -20, 35 30, 0 60 C -35 30, -30 -20, 0 -40 Z"/>
            <path d="M0 -38 L 0 58"/>
          </g>
        ))}
      </g>
      <g>
        {[[155,375],[170,370],[165,385],[220,290],[235,300],[140,215],[155,208]].map(([cx,cy],i)=>(
          <g key={i}>
            <circle cx={cx} cy={cy} r="5" fill="var(--copper-2)" stroke="var(--ink-2)" strokeWidth="0.5"/>
          </g>
        ))}
      </g>
      <g fontFamily="var(--serif)" fill="var(--ink)">
        <text x="20" y="30" fontSize="14" fontStyle="italic">Coffea excelsa</text>
        <text x="20" y="46" fontSize="10" fill="var(--ink-3)" fontFamily="var(--mono)" letterSpacing="1">A. CHEVALIER, 1903</text>
      </g>
      <g transform="translate(260, 440)" fontFamily="var(--hand)" fontSize="14" fill="var(--ink-3)">
        <text>— pl. xvii —</text>
      </g>
    </svg>
  );
}

window.History = History;