// §6 Chemistry — caffeine + chlorogenic acid molecule diagrams

function Chemistry(){
  return (
    <section id="chemistry" 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)" }}>§ 06</span>
            <span style={{ marginLeft:10 }}>Chemistry of the Cup</span>
          </Reveal>
          <Reveal delay={1}><h2 className="display" style={{ color:"var(--paper)", maxWidth:"20ch" }}>
            Half the caffeine. <em style={{color:"var(--copper-hi)"}}>Twice</em> the aromatics.
          </h2></Reveal>
          <Reveal delay={2}><p className="lede" style={{ color:"rgba(244,237,225,0.75)", maxWidth:"62ch" }}>
            Excelsa's volatile profile is dominated by lactones, furans and terpenes — the molecules responsible for jackfruit, tamarind, cedar and smoke. Caffeine runs roughly 40–50% of Robusta.
          </p></Reveal>
        </div>

        <div className="grid g2" style={{ marginTop:70, gap:60, alignItems:"start" }}>
          <Reveal delay={1}>
            <MoleculeCard
              name="Caffeine"
              formula="C₈H₁₀N₄O₂"
              weight="194.19 g·mol⁻¹"
              note="Excelsa: 0.9–1.4% dry basis · Robusta: 2.2–2.7% · Arabica: 1.1–1.5%"
            >
              <Caffeine/>
            </MoleculeCard>
          </Reveal>
          <Reveal delay={2}>
            <MoleculeCard
              name="Chlorogenic Acid (5-CQA)"
              formula="C₁₆H₁₈O₉"
              weight="354.31 g·mol⁻¹"
              note="Antioxidant, bitter precursor. Excelsa retains ~7.0% dry basis — between Arabica (5.5%) and Robusta (10%)."
            >
              <CGA/>
            </MoleculeCard>
          </Reveal>
        </div>

        <Reveal delay={3}>
          <div style={{ marginTop:70 }}>
            <div className="tracked" style={{ color:"var(--copper-hi)", marginBottom:12 }}>Volatile Aroma Profile · GC-MS peak families</div>
            <VolatileBars/>
          </div>
        </Reveal>

      </div>
    </section>
  );
}

function MoleculeCard({ name, formula, weight, note, children }){
  return (
    <div style={{ border:"1px solid rgba(244,237,225,0.18)", padding:28, background:"rgba(244,237,225,0.03)" }}>
      <div style={{ display:"flex", justifyContent:"space-between", alignItems:"baseline", marginBottom: 18 }}>
        <div>
          <div style={{ fontFamily:"var(--serif)", fontSize:28, letterSpacing:"-0.02em", color:"var(--paper)" }}>{name}</div>
          <div className="mono" style={{ fontSize:11, color:"rgba(244,237,225,0.6)", letterSpacing:"0.18em", marginTop:4 }}>{formula} · {weight}</div>
        </div>
      </div>
      <div style={{ background:"rgba(244,237,225,0.04)", padding:20, borderRadius:2 }}>
        {children}
      </div>
      <p style={{ fontFamily:"var(--mono)", fontSize:11, color:"rgba(244,237,225,0.65)", marginTop:18, lineHeight:1.6, letterSpacing:"0.04em" }}>{note}</p>
    </div>
  );
}

/* Simplified caffeine structural formula */
function Caffeine(){
  const s = "rgba(244,237,225,0.85)";
  return (
    <svg viewBox="0 0 340 220" width="100%" aria-hidden="true">
      <g stroke={s} strokeWidth="1.2" fill="none">
        {/* Fused rings - 6 + 5 */}
        <polygon points="120,60 160,45 200,60 200,110 160,125 120,110"/>
        <polygon points="200,60 250,50 270,95 230,120 200,110"/>
        <line x1="125" y1="65" x2="155" y2="55"/>
        <line x1="160" y1="120" x2="195" y2="105"/>
      </g>
      {/* Atom labels */}
      <g fontFamily="var(--mono)" fontSize="13" fill={s} textAnchor="middle">
        <text x="120" y="64">N</text>
        <text x="160" y="49">C</text>
        <text x="200" y="64">N</text>
        <text x="200" y="113">C</text>
        <text x="160" y="129">N</text>
        <text x="120" y="113">C</text>
        <text x="250" y="54">N</text>
        <text x="270" y="99">C</text>
        <text x="230" y="124">C</text>
        {/* substituents */}
        <text x="94" y="128">H₃C</text>
        <text x="134" y="36">CH₃</text>
        <text x="170" y="149">CH₃</text>
        <text x="288" y="40">O</text>
        <text x="294" y="115">O</text>
      </g>
      {/* bonds to substituents */}
      <g stroke={s} strokeWidth="1">
        <line x1="108" y1="118" x2="118" y2="112"/>
        <line x1="158" y1="38" x2="160" y2="47"/>
        <line x1="162" y1="138" x2="160" y2="128"/>
        <line x1="264" y1="42" x2="252" y2="50"/>
        <line x1="283" y1="105" x2="272" y2="97"/>
        <line x1="276" y1="100" x2="273" y2="91"/>
      </g>
    </svg>
  );
}

/* Simplified chlorogenic acid diagram */
function CGA(){
  const s = "rgba(244,237,225,0.85)";
  return (
    <svg viewBox="0 0 360 220" width="100%" aria-hidden="true">
      {/* left — quinic acid (cyclohexane) */}
      <g stroke={s} strokeWidth="1.2" fill="none">
        <polygon points="80,50 120,35 160,50 160,95 120,110 80,95"/>
      </g>
      {/* caffeoyl — benzene ring */}
      <g stroke={s} strokeWidth="1.2" fill="none">
        <polygon points="250,50 290,35 330,50 330,95 290,110 250,95"/>
        <polygon points="252,52 288,38 326,52 326,93 290,106 254,93" strokeDasharray="3 3"/>
      </g>
      {/* ester link */}
      <g stroke={s} strokeWidth="1.1" fill="none">
        <line x1="160" y1="72" x2="200" y2="72"/>
        <line x1="200" y1="72" x2="220" y2="60"/>
        <line x1="220" y1="60" x2="250" y2="72"/>
        <line x1="220" y1="60" x2="220" y2="40"/>
      </g>
      <g fontFamily="var(--mono)" fontSize="12" fill={s} textAnchor="middle">
        <text x="120" y="18">quinic acid</text>
        <text x="290" y="18">caffeic acid</text>
        <text x="230" y="36">O</text>
        <text x="204" y="88">O</text>
        <text x="330" y="115">OH</text>
        <text x="250" y="115">HO</text>
        <text x="68" y="100">HO</text>
        <text x="68" y="47">HO</text>
        <text x="170" y="40">OH</text>
      </g>
    </svg>
  );
}

function VolatileBars(){
  const families = [
    { name:"Furans",          arab:38, rob:30, exc:52, note:"caramel · toasted" },
    { name:"Pyrazines",       arab:28, rob:35, exc:22, note:"roasty · nutty" },
    { name:"Lactones",        arab:12, rob:10, exc:38, note:"coconut · dried fruit" },
    { name:"Terpenes",        arab:18, rob:8,  exc:28, note:"cedar · resinous" },
    { name:"Sulfur compounds",arab:10, rob:14, exc:6,  note:"onion · burnt" },
    { name:"Phenols",         arab:22, rob:30, exc:34, note:"smoke · clove" },
  ];
  const max = 55;
  return (
    <div style={{ display:"grid", gridTemplateColumns:"1.4fr repeat(3, 1fr) 1.6fr", gap: 12, alignItems:"center", fontFamily:"var(--mono)", fontSize: 11, color:"rgba(244,237,225,0.85)" }}>
      <div style={{ opacity:.5, letterSpacing:"0.2em" }}>FAMILY</div>
      <div style={{ opacity:.5, letterSpacing:"0.2em", textAlign:"right" }}>ARABICA</div>
      <div style={{ opacity:.5, letterSpacing:"0.2em", textAlign:"right" }}>ROBUSTA</div>
      <div style={{ opacity:.5, letterSpacing:"0.2em", textAlign:"right", color:"var(--copper-hi)" }}>EXCELSA</div>
      <div style={{ opacity:.5, letterSpacing:"0.2em" }}>IMPRESSION</div>

      {families.map(f => (
        <React.Fragment key={f.name}>
          <div style={{ letterSpacing:"0.12em" }}>{f.name}</div>
          {[f.arab, f.rob, f.exc].map((v, i) => (
            <div key={i} style={{ position:"relative", height:18, background:"rgba(244,237,225,0.06)" }}>
              <div style={{
                position:"absolute", right:0, top:0, bottom:0, width:`${(v/max)*100}%`,
                background: i===2 ? "var(--copper-hi)" : "rgba(244,237,225,0.35)",
              }}/>
              <span style={{ position:"absolute", right:6, top:"50%", transform:"translateY(-50%)", fontSize:10, color: i===2 ? "var(--ink)" : "rgba(244,237,225,0.85)" }}>{v}</span>
            </div>
          ))}
          <div style={{ opacity:.65, fontStyle:"italic", fontFamily:"var(--serif)", fontSize: 13 }}>{f.note}</div>
        </React.Fragment>
      ))}
    </div>
  );
}

window.Chemistry = Chemistry;