// §11 FAQ

function FAQ(){
  const qs = [
    { q:"Is Excelsa the same as Liberica?",
      a:"No — as of 2025, they're distinct species. A Nature Plants genomic study resolved a 130-year debate by confirming Excelsa (Coffea excelsa) as its own species, separate from Coffea liberica. They share a lineage and were long considered the same species (with Excelsa filed as var. dewevrei), but the genomes say otherwise. In the cup they also taste quite different, so most roasters label them separately." },
    { q:"Does Excelsa have less caffeine than regular coffee?",
      a:"Yes. Excelsa runs 0.9–1.4% caffeine (dry basis) versus 1.1–1.5% in Arabica and 2.2–2.7% in Robusta. A typical 10 oz brew delivers roughly 70–110 mg of caffeine." },
    { q:"Why does my Excelsa taste like jackfruit and smoke?",
      a:"Excelsa's volatile profile is lactone- and terpene-heavy. Lactones deliver the dried-fruit, coconut and tamarind character; phenols and pyrazines contribute cedar and smoke. This is species, not roast." },
    { q:"Is Excelsa safer from mycotoxins?",
      a:"Under good post-harvest practice, yes — measurably. Our 2023–2025 lab release data show Excelsa lots averaging 0.4 µg/kg Ochratoxin A against an EU limit of 5.0. Thick cherry skin, dry processing, and hermetic storage do most of the work." },
    { q:"How should I brew Excelsa?",
      a:"Start coarser and cooler than you would for Arabica — 88–92°C, a 1:16 ratio, and a 3:30–4:00 extraction for pourover. Excelsa's body is naturally dense; over-extracting bullies the aromatics." },
    { q:"Is it climate-resilient, really?",
      a:"Relative to Arabica, significantly. Excelsa tolerates Tmax up to ~34°C before flower abortion, grows at 0–1500 m, and handles both 1000–3600 mm rainfall windows. That does not make it invincible — but it makes it a credible hedge." },
    { q:"Is this the 'third species' of coffee I keep reading about?",
      a:"The phrase is a marketing shorthand. Taxonomically, there are ~130 Coffea species. Three dominate global cultivation: Arabica, Robusta (Coffea canephora), and Excelsa (Coffea excelsa, recognised as its own species in 2025). Liberica — Excelsa's close cousin — and Stenophylla are grown at much smaller scale. Excelsa is the one with the combination of climate resilience and specialty-grade cup potential." },
    { q:"Where can I buy it?",
      a:"Directly from us at excelsacoffee.com/collections/frontpage, or through our Amazon storefront. Both carry the same lots, with the same lab reports." },
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <section id="faq" className="paper-bg">
      <div className="wrap-narrow">
        <SectionHeader
          num="11"
          label="Frequently Asked"
          title='Things people <em>ask</em>.'
        />
        <div style={{ marginTop: 50 }}>
          {qs.map((item, i) => (
            <Reveal key={i} delay={(i%4)+1}>
              <div style={{ borderTop:"1px solid var(--line)", padding:"4px 0" }}>
                <button
                  onClick={() => setOpen(open === i ? -1 : i)}
                  style={{
                    width:"100%", textAlign:"left", background:"none", border:0, cursor:"pointer",
                    padding:"22px 0", display:"flex", justifyContent:"space-between", alignItems:"flex-start", gap:24,
                    font:"inherit", color:"inherit",
                  }}
                >
                  <span style={{ fontFamily:"var(--serif)", fontSize:"clamp(20px, 2.4vw, 28px)", letterSpacing:"-0.02em", fontWeight:500 }}>{item.q}</span>
                  <span className="mono" style={{ fontSize:20, color:"var(--copper)", minWidth:24, textAlign:"right" }}>{open===i ? "−" : "+"}</span>
                </button>
                <div style={{
                  overflow:"hidden",
                  maxHeight: open===i ? 400 : 0,
                  transition:"max-height 500ms cubic-bezier(.2,.8,.2,1), padding 300ms ease",
                  padding: open===i ? "0 0 24px 0" : "0",
                }}>
                  <p style={{ margin:0, color:"var(--ink-2)", fontSize:17, lineHeight:1.6, maxWidth:"70ch" }}>{item.a}</p>
                </div>
              </div>
            </Reveal>
          ))}
          <div style={{ borderTop:"1px solid var(--line)" }}/>
        </div>
      </div>
    </section>
  );
}

window.FAQ = FAQ;
