// §10 Buyers Guide — lab-report cards

const BUYER_AMAZON = "https://www.amazon.com/stores/ExcelsaCoffee/page/B84E6CB2-25C1-458B-AAB5-1441967921D7?lp_asin=B0FPPXPKL8&ref_=ast_bln&store_ref=bl_ast_dp_brandlogo_sto";
const BUYER_SHOP   = "https://excelsacoffee.com/collections/frontpage";

const PRODUCTS = [
  {
    lot: "EXC-VN-01",
    name: "Quang Tri Highland",
    origin: "Quang Tri, Vietnam",
    process: "Washed (double-fermented)",
    altitude: "700–950 m",
    varietal: "Coffea excelsa",
    harvest: "Dec 2024–Feb 2025",
    roast: "Medium",
    roastDate: "Within 14 days of order",
    score: 88.00,
    notes: ["White peach", "Lychee", "Honeysuckle", "Green cardamom", "Brown butter"],
    ota: "0.2 µg/kg",
    caffeine: "1.0% db",
    moisture: "10.5%",
    aw: "0.55",
    radar: [9.0, 8.75, 8.5, 8.25, 8.5, 8.5, 9.0],
    image: "https://cdn.shopify.com/s/files/1/0690/1229/1814/files/excelsa__vietnam.png?v=1750784024",
    shopUrl: "https://excelsacoffee.com/products/excelsa-vietnam",
    featured: true,
  },
  {
    lot: "EXC-PH-02",
    name: "Batangas Barako",
    origin: "Batangas, Philippines",
    process: "Honey (Yellow)",
    altitude: "320–480 m",
    varietal: "Coffea excelsa",
    harvest: "Jan–Mar 2025",
    roast: "Medium-dark",
    roastDate: "Within 14 days of order",
    score: 85.50,
    notes: ["Dried date", "Black tea", "Bittersweet cocoa", "Leather", "Pipe tobacco"],
    ota: "0.5 µg/kg",
    caffeine: "1.3% db",
    moisture: "11.1%",
    aw: "0.60",
    radar: [8.25, 8.5, 8.0, 7.5, 8.75, 8.25, 8.0],
    image: "https://cdn.shopify.com/s/files/1/0690/1229/1814/files/excelsa__philippines.png?v=1750784071",
    shopUrl: "https://excelsacoffee.com/products/excelsa-philippines",
  },
  {
    lot: "EXC-PH-03",
    name: "Mindanao Wildwood",
    origin: "Mindanao, Philippines",
    process: "Natural / Sun-dried",
    altitude: "420–680 m",
    varietal: "Coffea excelsa",
    harvest: "Feb–Apr 2025",
    roast: "Medium",
    roastDate: "Within 14 days of order",
    score: 87.25,
    notes: ["Jackfruit", "Dark caramel", "Cedar smoke", "Tamarind", "Muscovado"],
    ota: "0.3 µg/kg",
    caffeine: "1.1% db",
    moisture: "10.8%",
    aw: "0.58",
    radar: [8.5, 8.75, 8.25, 7.75, 9.0, 8.25, 8.75],
    image: "https://cdn.shopify.com/s/files/1/0690/1229/1814/files/excelsa__philippines.png?v=1750784071",
    shopUrl: "https://excelsacoffee.com/products/excelsa-philippines",
    featured: true,
  },
];

function Buyers(){
  return (
    <section id="buyers" 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)" }}>§ 10</span>
            <span style={{ marginLeft:10 }}>Buyers Guide · Excelsa Coffee Co.</span>
          </Reveal>
          <Reveal delay={1}>
            <h2 className="display" style={{ color:"var(--paper)", maxWidth:"22ch" }}>
              Three lots. <em style={{color:"var(--copper-hi)"}}>Every</em> traceable.
            </h2>
          </Reveal>
          <Reveal delay={2}>
            <p className="lede" style={{ color:"rgba(244,237,225,0.75)", maxWidth:"60ch" }}>
              Each bag ships with its full lab report — cup score, mycotoxin load, moisture, water activity, and a GPS-tagged origin. Order direct or through Amazon; either way, you see the same numbers.
            </p>
          </Reveal>
        </div>

        <div className="grid g2" style={{ marginTop: 70, gap:28 }}>
          {PRODUCTS.map((p,i) => (
            <Reveal key={p.lot} delay={(i%2)+1}>
              <ProductCard p={p}/>
            </Reveal>
          ))}
        </div>

        <Reveal delay={1} style={{ marginTop: 60, display:"flex", flexWrap:"wrap", gap:16, justifyContent:"center" }}>
          <a className="btn" href={BUYER_SHOP} target="_blank" rel="noopener">Shop all lots — Excelsacoffee.com <span className="arrow">→</span></a>
          <a className="btn ghost" href={BUYER_AMAZON} target="_blank" rel="noopener" style={{ color:"var(--paper)", borderColor:"var(--paper)" }}>Buy on Amazon</a>
        </Reveal>
      </div>
    </section>
  );
}

function ProductCard({ p }){
  const axes = ["Aroma", "Flavor", "Aftertaste", "Acidity", "Body", "Balance", "Tropical"];
  return (
    <article style={{
      background: "rgba(244,237,225,0.04)",
      border: "1px solid rgba(244,237,225,0.18)",
      padding: 28,
      color: "var(--paper)",
      position: "relative",
    }}>
      {p.featured && (
        <div style={{ position:"absolute", top:-1, right:-1, background:"var(--copper)", color:"var(--ink)", padding:"6px 14px", fontFamily:"var(--mono)", fontSize:10, letterSpacing:"0.24em", textTransform:"uppercase" }}>
          ★ Editor's pick
        </div>
      )}

      <header className="between flex" style={{ alignItems:"flex-start", paddingBottom:18, borderBottom:"1px solid rgba(244,237,225,0.2)" }}>
        <div>
          <div className="mono" style={{ fontSize:11, letterSpacing:"0.22em", color:"rgba(244,237,225,0.55)" }}>LOT {p.lot}</div>
          <div style={{ fontFamily:"var(--serif)", fontSize:34, letterSpacing:"-0.02em", margin:"4px 0" }}>{p.name}</div>
          <div className="hand" style={{ fontSize:20, color:"var(--copper-hi)" }}>{p.origin}</div>
        </div>
        <div style={{ textAlign:"right", borderLeft:"1px solid rgba(244,237,225,0.18)", paddingLeft:18 }}>
          <div className="mono" style={{ fontSize:10, color:"rgba(244,237,225,0.55)", letterSpacing:"0.22em" }}>SCORE</div>
          <div style={{ fontFamily:"var(--serif)", fontSize:52, fontWeight:500, lineHeight:1, color:"var(--copper-hi)" }}>{p.score.toFixed(2)}</div>
          <div className="mono" style={{ fontSize:9, color:"rgba(244,237,225,0.55)", letterSpacing:"0.2em" }}>/ 100</div>
        </div>
      </header>

      <div className="grid g2" style={{ gap: 20, marginTop: 22 }}>
        {/* Left: product image linking to the shop */}
        <div style={{ position:"relative" }}>
          <a href={p.shopUrl} target="_blank" rel="noopener" style={{ display:"block" }}>
            <div style={{
              aspectRatio: "3 / 4",
              background: "rgba(244,237,225,0.06)",
              border: "1px solid rgba(244,237,225,0.18)",
              overflow: "hidden",
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
            }}>
              <img src={p.image} alt={`${p.name} — ${p.origin}`} loading="lazy"
                style={{ width:"100%", height:"100%", objectFit:"contain", display:"block" }}/>
            </div>
          </a>
          <div style={{ display:"flex", flexWrap:"wrap", gap:6, marginTop:12 }}>
            {p.notes.map(n => (
              <span key={n} className="mono" style={{
                fontSize:10, letterSpacing:"0.16em", textTransform:"uppercase",
                padding:"5px 9px", border:"1px solid rgba(244,237,225,0.24)",
                color:"rgba(244,237,225,0.85)", borderRadius:999
              }}>{n}</span>
            ))}
          </div>
        </div>

        {/* Right: radar + data */}
        <div>
          <Radar axes={axes} values={p.radar} size={220} color="var(--copper-hi)"/>
          <table className="datatable" style={{ marginTop: 14, fontSize:11 }}>
            <tbody>
              <SpecRow k="Process" v={p.process}/>
              <SpecRow k="Altitude" v={p.altitude}/>
              <SpecRow k="Species" v={p.varietal}/>
              <SpecRow k="Harvest" v={p.harvest}/>
              <SpecRow k="Roast" v={`${p.roast} · ${p.roastDate}`}/>
            </tbody>
          </table>
        </div>
      </div>

      {/* Lab strip */}
      <div style={{ marginTop:22, padding:16, background:"rgba(244,237,225,0.05)", border:"1px solid rgba(244,237,225,0.12)" }}>
        <div className="between flex">
          <span className="mono" style={{ fontSize:10, letterSpacing:"0.22em", color:"var(--copper-hi)" }}>LAB REPORT</span>
          <span className="mono" style={{ fontSize:10, letterSpacing:"0.1em", color:"rgba(244,237,225,0.5)" }}>ISO 17025 · file: {p.lot}.pdf</span>
        </div>
        <div style={{ display:"grid", gridTemplateColumns:"repeat(4, 1fr)", gap:16, marginTop:12 }}>
          <LabStat label="OTA" v={p.ota}/>
          <LabStat label="Caffeine" v={p.caffeine}/>
          <LabStat label="Moisture" v={p.moisture}/>
          <LabStat label="Water act." v={p.aw}/>
        </div>
      </div>

      {/* CTAs */}
      <div style={{ display:"flex", flexWrap:"wrap", gap:10, marginTop:22 }}>
        <a className="btn" href={p.shopUrl || BUYER_SHOP} target="_blank" rel="noopener" style={{ background:"var(--copper)", borderColor:"var(--copper)", color:"var(--ink)" }}>
          Buy direct <span className="arrow">→</span>
        </a>
        <a className="btn ghost" href={BUYER_AMAZON} target="_blank" rel="noopener" style={{ color:"var(--paper)", borderColor:"rgba(244,237,225,0.5)" }}>
          Amazon
        </a>
      </div>
    </article>
  );
}

function SpecRow({ k, v }){
  return (
    <tr>
      <th style={{ color:"rgba(244,237,225,0.5)", borderColor:"rgba(244,237,225,0.12)" }}>{k}</th>
      <td style={{ color:"var(--paper)", borderColor:"rgba(244,237,225,0.12)" }}>{v}</td>
    </tr>
  );
}
function LabStat({ label, v }){
  return (
    <div>
      <div className="mono" style={{ fontSize:9, letterSpacing:"0.22em", color:"rgba(244,237,225,0.55)" }}>{label.toUpperCase()}</div>
      <div className="mono" style={{ fontSize:16, color:"var(--paper)", marginTop:4 }}>{v}</div>
    </div>
  );
}

window.Buyers = Buyers;