function EduTeaser() {
  const cards = [
    { tag: "Mixing · 90s", title: "Your first vial, with a calm voice", duration: "1:32" },
    { tag: "Numbers · 2m", title: "Units, ml, mcg — the three words people muddle", duration: "2:14" },
    { tag: "Storage · 90s", title: "What a warm Bangkok afternoon does to a vial", duration: "1:48" },
  ];
  return (
    <section>
      <div className="container">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", flexWrap: "wrap", gap: 24, marginBottom: 40 }}>
          <div className="section-head">
            <span className="eyebrow">Free to read · no email wall</span>
            <h2 className="display section-title">A small library, in plain language.</h2>
          </div>
          <a href="#" className="btn btn-ghost btn-sm">Browse all videos <IArrow size={14} /></a>
        </div>
        <div className="grid-3">
          {cards.map((c, i) => (
            <div key={i} className="card" style={{ overflow: "hidden", display: "flex", flexDirection: "column" }}>
              <div className="ph" style={{ aspectRatio: "16/10", borderRadius: 0, border: 0, position: "relative" }}>
                <div style={{ position: "absolute", inset: 0, display: "grid", placeItems: "center" }}>
                  <div style={{ width: 56, height: 56, borderRadius: "50%", background: "white", display: "grid", placeItems: "center", boxShadow: "0 4px 18px rgba(0,0,0,0.08)" }}>
                    <IPlay size={20} stroke="var(--accent-deep)" fill="var(--accent-deep)" />
                  </div>
                </div>
                <span className="mono" style={{ position: "absolute", right: 12, bottom: 12, padding: "4px 8px", borderRadius: 4, background: "rgba(14, 20, 16, 0.85)", color: "white", fontSize: 11 }}>{c.duration}</span>
              </div>
              <div style={{ padding: 20 }}>
                <div className="mono" style={{ fontSize: 11, color: "var(--accent-deep)", letterSpacing: "0.12em", textTransform: "uppercase", marginBottom: 8 }}>{c.tag}</div>
                <h3 style={{ fontSize: 16, margin: 0, fontWeight: 600, color: "var(--ink)", lineHeight: 1.3 }}>{c.title}</h3>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FAQ() {
  const items = [
    {
      q: "I've never done this before. Can I really do it at home?",
      a: "Yes. The first time takes about four minutes. Not because it's easy, because you'll have everything laid out in front of you in the right order, and you'll have practiced on the pad first. Most people are surprised by how unremarkable it actually is. \"The doing took about four minutes,\" as one of our first-timers put it.",
    },
    {
      q: "What if I'm scared of needles?",
      a: "That's the most common worry, and it's reasonable. The walkthrough card in the kit asks you to sit, breathe out, and count to three. That's the whole technique. After that: the syringes are 31-gauge (about the diameter of a human hair) and 8mm long, designed for subcutaneous use. Most people don't feel them go in.",
    },
    {
      q: "Where do I dispose of used syringes in Bangkok and Thailand?",
      a: "You'll source the container locally — a thick glass jar works, or grab a free puncture-proof container from any hospital pharmacy take-back program. When it's full (usually 30–60 days), seal it and drop it back at any hospital pharmacy or clinic; most accept sharps for free, no questions. The booklet has the full disposal walkthrough plus a list of Bangkok hospitals that have confirmed they'll take it. Don't put sharps in household waste.",
    },
    {
      q: "What if it doesn't work for me?",
      a: "If your most recent kit hasn't been opened, message us within 14 days of its delivery and we'll refund it. Keep the booklet, keep the welcome kit. No photos, no forms, no questions about why. The Starter is one payment, but the same 14-day window applies to whichever kit was most recently shipped.",
    },
    {
      q: "Do I need a doctor's prescription for the kit?",
      a: "No. Everything in the kit — syringes, bacteriostatic water, alcohol pads, gauze, the booklet — is a legal medical supply in Thailand and doesn't require a prescription. The peptide itself is a separate matter; that's between you and a clinician.",
    },
    {
      q: "What about the peptides themselves?",
      a: "We don't supply peptides. Vialprep is a supplies and education company — the syringes, the right water, the booklet, the walkthrough. The peptide is a conversation for you and a licensed clinician, and there's a short page in the booklet about what to ask them. We're deliberate about this: it keeps us honest, and it keeps the kit legal everywhere we ship.",
    },
    {
      q: "Will my flatmate know?",
      a: "Plain brown box. No logo, no medical iconography, no return address that gives anything away. The driver sees a parcel like any other.",
    },
    {
      q: "What if I want to stop?",
      a: "On Monthly: a friendly text seven days before any renewal. Reply STOP and the next box pauses — no charge, no surprise shipments. On the Starter: it's one payment for six months; after that, you decide whether to continue with monthly or not. Either way, we don't make leaving awkward.",
    },
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <section id="faq" style={{ background: "var(--paper-2)" }}>
      <div className="container">
        <div className="section-head" style={{ marginBottom: 48 }}>
          <h2 className="display section-title">The questions you'd rather not ask in a forum.</h2>
        </div>
        <div style={{ maxWidth: 820 }}>
          {items.map((it, i) => (
            <div key={i} style={{ borderBottom: "1px solid var(--line)" }}>
              <button onClick={() => setOpen(open === i ? -1 : i)}
                style={{ width: "100%", padding: "20px 0", display: "flex", justifyContent: "space-between", alignItems: "center", background: "transparent", border: 0, textAlign: "left", cursor: "pointer", fontFamily: "var(--font-body)" }}>
                <span style={{ fontSize: 16, fontWeight: 600, color: "var(--ink)" }}>{it.q}</span>
                {open === i ? <IMinus size={18} stroke="var(--ink-3)" /> : <IPlus size={18} stroke="var(--ink-3)" />}
              </button>
              {open === i && (
                <div style={{ paddingBottom: 20, color: "var(--ink-3)", fontSize: 15, maxWidth: "62ch", lineHeight: 1.6 }}>{it.a}</div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { EduTeaser, FAQ });
