// §7 Cupping protocol & scoring

function Cupping(){
  return (
    <section id="cupping" className="paper-bg">
      <div className="wrap">
        <SectionHeader
          num="07"
          label="Cupping Protocol"
          title='How we <em>score</em> a cup.'
          lede="The SCA cupping form was built around Arabica. Excelsa deserves its own lens — we extend the protocol with three Liberica-specific axes: tropical intensity, structural weight, and aromatic persistence."
        />

        <div className="grid g2" style={{ marginTop:70, gap:56, alignItems:"start" }}>
          <Reveal delay={1}>
            <div className="card" style={{ padding: 32 }}>
              <div className="tracked" style={{ color:"var(--copper)" }}>Form · EXC.01</div>
              <h3 style={{ fontFamily:"var(--serif)", fontSize:28, letterSpacing:"-0.02em", margin:"10px 0 24px" }}>Excelsa Cupping Sheet</h3>
              <CuppingForm/>
            </div>
          </Reveal>

          <Reveal delay={2}>
            <div className="stack" style={{ gap: 22 }}>
              <Axis n="01" title="Fragrance / Aroma">Dry grounds evaluated at 8.25 g / 150 mL. Crust break at 4:00. Note lactones, terpenes, tamarind impressions.</Axis>
              <Axis n="02" title="Flavor">Taste at 60–65°C. Excelsa leads with dried-fruit and jackfruit character; malic/tartaric acids frame mid-palate.</Axis>
              <Axis n="03" title="Aftertaste">Persistence measured at 90 s and 180 s. Our Sulu lots average 210 s before drop-off — longer than most Arabicas.</Axis>
              <Axis n="04" title="Acidity">Expected: moderate, tartaric/phosphoric. Excelsa is not bright — it is structured.</Axis>
              <Axis n="05" title="Body">Syrupy to dense. Tannic edge from extended polyphenols.</Axis>
              <Axis n="06" title="Balance & Uniformity">Across 5 cups per lot. One deviant cup = full defect penalty.</Axis>
              <Axis n="07" copper title="+ Tropical intensity">Excelsa-specific: jackfruit, durian, tamarind, lychee density.</Axis>
              <Axis n="08" copper title="+ Aromatic persistence">Volatile decay from crust through cool cup.</Axis>
            </div>
          </Reveal>
        </div>

        <Reveal delay={1}>
          <div style={{ marginTop:80, borderTop:"1px solid var(--line)", paddingTop: 30 }}>
            <div className="between flex" style={{ alignItems:"baseline", marginBottom:18 }}>
              <span className="tracked">Scoring Scale · SCA + EXC extensions</span>
              <span className="mono" style={{ fontSize:10, color:"var(--ink-3)", letterSpacing:"0.2em" }}>0 — 100</span>
            </div>
            <ScoreScale/>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function Axis({ n, title, children, copper }){
  return (
    <div style={{ display:"grid", gridTemplateColumns:"50px 1fr", gap:16, borderTop:"1px solid var(--line-2)", paddingTop:16 }}>
      <div className="mono" style={{ fontSize:12, color: copper ? "var(--copper)" : "var(--ink-3)", letterSpacing:"0.2em" }}>{n}</div>
      <div>
        <div style={{ fontFamily:"var(--serif)", fontSize:20, color: copper ? "var(--copper-2)" : "var(--ink)", marginBottom:4 }}>{title}</div>
        <p style={{ margin:0, color:"var(--ink-2)", fontSize:14, lineHeight:1.55 }}>{children}</p>
      </div>
    </div>
  );
}

function CuppingForm(){
  const rows = [
    ["Fragrance / Aroma", 8.25],
    ["Flavor", 8.50],
    ["Aftertaste", 8.25],
    ["Acidity", 7.75],
    ["Body", 8.75],
    ["Balance", 8.25],
    ["Uniformity", 10.00],
    ["Clean Cup", 9.00],
    ["Sweetness", 8.50],
    ["+ Tropical intensity", 8.75],
    ["+ Aromatic persistence", 8.50],
    ["Overall", 8.25],
  ];
  const total = rows.reduce((s,[,v])=>s+v,0);
  return (
    <div className="stack" style={{ gap: 6 }}>
      {rows.map(([k, v]) => (
        <div key={k} style={{ display:"grid", gridTemplateColumns:"1fr auto auto", alignItems:"center", gap:10, padding:"6px 0", borderBottom:"1px dashed var(--line-2)" }}>
          <span className="mono" style={{ fontSize:12, letterSpacing:"0.1em", color: k.startsWith("+") ? "var(--copper)" : "var(--ink-2)" }}>{k}</span>
          <span className="mono" style={{ fontSize:12, color:"var(--ink-3)", width:44, textAlign:"right" }}>{v.toFixed(2)}</span>
          <ScoreTicks v={v}/>
        </div>
      ))}
      <div style={{ display:"flex", justifyContent:"space-between", alignItems:"baseline", marginTop:12, borderTop:"1px solid var(--ink)", paddingTop:10 }}>
        <span className="tracked">Total Score</span>
        <span style={{ fontFamily:"var(--serif)", fontSize:36, fontWeight:500, letterSpacing:"-0.02em" }}>{total.toFixed(2)}</span>
      </div>
    </div>
  );
}

function ScoreTicks({ v }){
  const pct = (v/10)*100;
  return (
    <div style={{ width:100, height:6, background:"var(--paper-2)", border:"1px solid var(--line-2)" }}>
      <div style={{ width:`${pct}%`, height:"100%", background:"var(--copper)" }}/>
    </div>
  );
}

function ScoreScale(){
  const bands = [
    { to:79, label:"Below specialty", color:"var(--ink-3)" },
    { to:84, label:"Very good", color:"var(--sage)" },
    { to:87, label:"Excellent", color:"var(--sage-hi)" },
    { to:89, label:"Outstanding", color:"var(--copper-hi)" },
    { to:100,label:"Exemplary", color:"var(--copper)" },
  ];
  let last = 60;
  return (
    <div style={{ position:"relative", height:60, width:"100%", display:"flex", border:"1px solid var(--line)" }}>
      {bands.map(b => {
        const pct = ((b.to - last) / (100 - 60)) * 100;
        const l = last; last = b.to;
        return (
          <div key={b.to} style={{ flex:`${pct} 0 0`, background:b.color, position:"relative", borderRight:"1px solid rgba(0,0,0,0.08)" }}>
            <span className="mono" style={{ position:"absolute", bottom:6, left:8, fontSize:10, letterSpacing:"0.18em", textTransform:"uppercase", color: "rgba(35,23,18,0.8)" }}>{b.label}</span>
            <span className="mono" style={{ position:"absolute", top:6, right:8, fontSize:10, color:"rgba(35,23,18,0.6)" }}>{l}–{b.to}</span>
          </div>
        );
      })}
    </div>
  );
}

window.Cupping = Cupping;