// Education Hub — Peptides, Explained

const LESSONS = [
  {
    id: "what",
    n: "01",
    eyebrow: "★ THE BASICS",
    short: "What is a peptide?",
    headline: "A peptide is a tiny piece of protein your body uses to send a message.",
    body: [
      "Your cells talk to each other constantly. Every second, they're sending texts that say things like 'grow more collagen,' 'release more growth hormone,' 'calm down inflammation,' 'go to sleep already.'",
      "Those texts are peptides. Tiny strings of amino acids. Each one says one specific thing.",
      "As you age, your body sends fewer of these texts. Or sends them less reliably. That's a big part of what aging actually is — your cellular phone plan getting worse.",
      "When you take a peptide, you're sending the text your body forgot to send. That's it. Not a drug that overrides your biology. A signal that's already in your DNA."
    ],
    facts: [
      ["Insulin", "is a peptide"],
      ["Oxytocin", "is a peptide"],
      ["Glucagon (Ozempic)", "is a peptide"],
      ["Even sleep itself", "starts with one"],
    ],
  },
  {
    id: "safe",
    n: "02",
    eyebrow: "★ SAFETY",
    short: "Are peptides safe?",
    headline: "Most have decades of research. Your body already makes them. The risks come from where you get them.",
    body: [
      "Some peptides have been studied for 40+ years. GHK-Cu was discovered in 1973. Sermorelin has been prescribed since the 1990s. Semaglutide (Ozempic) is one of the most-studied medications in the world right now.",
      "They're not steroids. They don't override your physiology — they nudge it. Side effects exist but are usually mild: a little redness at the injection site, maybe some nausea the first week on a GLP-1.",
      "The real risk isn't the peptide. It's where you get it. Gray-market peptides sold as 'research chemicals' are unregulated, often contaminated, sometimes not even what the label says.",
      "That's why every peptide on this site comes from a U.S. licensed compounding pharmacy, with a real prescription from a real clinician, after a real consult. You see the lab results for your batch."
    ],
    facts: [
      ["1973", "GHK-Cu discovered"],
      ["200+", "GHK-Cu studies"],
      ["1990s", "Sermorelin prescribed"],
      ["FDA-approved", "Semaglutide"],
    ],
  },
  {
    id: "take",
    n: "03",
    eyebrow: "★ HOW YOU TAKE THEM",
    short: "How do you take them?",
    headline: "Most are a tiny needle. Some are a cream. A few are a pill. None of them require a doctor's office.",
    body: [
      "Most peptides are subcutaneous — a tiny insulin-style needle into the fat layer just under your skin. It's the same way millions of diabetics dose themselves every day. The needle is shorter than a fingernail. Most people barely feel it.",
      "Some peptides come as a cream or serum — GHK-Cu for skin, BPC-157 for scars. You apply them like any other skincare.",
      "A few come as capsules or sublingual lozenges — usually for gut healing or quick mood/cognitive effects.",
      "Whatever method fits your goal, we send everything you need: the peptide itself, the syringes (if injectable), alcohol wipes, a sharps container, and a guide written in plain English. The whole kit shows up in 48 hours."
    ],
    facts: [
      ["Subcutaneous", "Most common"],
      ["Topical", "Skin + scalp"],
      ["Oral", "Gut + mood"],
      ["Nasal", "Brain + focus"],
    ],
  },
  {
    id: "fast",
    n: "04",
    eyebrow: "★ TIMELINES",
    short: "How fast do they work?",
    headline: "Some are fast. Most are slow. Anyone selling you 'instant' is selling you something else.",
    body: [
      "Different peptides work on different timescales — depending on what they're asking your body to do.",
      "Fast ones (minutes to a day): PT-141 for libido kicks in around 30 minutes. Semax for focus, same day. DSIP for sleep, within hours.",
      "Medium ones (1–4 weeks): Selank for anxiety. BPC-157 for inflammation. GLP-1s for appetite.",
      "Slow ones (4–12+ weeks): Anything that grows new tissue. Hair regrowth, collagen, tendon repair, muscle gain. Your body is literally rebuilding things — it doesn't matter how good the signal is, the construction takes time.",
      "If a peptide claims to grow back hair in two weeks, it doesn't. That's just biology. The honest answer is: the slower stuff is the most worth doing."
    ],
    facts: [
      ["30 min", "PT-141 (libido)"],
      ["Same day", "Semax (focus)"],
      ["1–4 wks", "Appetite, mood"],
      ["8–12 wks", "Hair, collagen, muscle"],
    ],
  },
];

/* ============ HERO ============ */
const HeroMolecules = () => (
  /* Subtle ambient background — 4 peptide chains drifting at different speeds */
  <svg
    viewBox="0 0 1200 600"
    preserveAspectRatio="xMidYMid slice"
    aria-hidden="true"
    style={{ position: "absolute", inset: 0, width: "100%", height: "100%", pointerEvents: "none", zIndex: 1, opacity: 0.55 }}
  >
    <defs>
      <radialGradient id="hMnode" cx="50%" cy="50%" r="50%">
        <stop offset="0%" stopColor="#E8B5A8"/>
        <stop offset="100%" stopColor="#C68B7C" stopOpacity="0.6"/>
      </radialGradient>
    </defs>
    <g className="hero-mol drift-1">
      <path d="M 0 80 L 60 110 L 130 90 L 200 130 L 270 100" stroke="rgba(232,181,168,0.5)" strokeWidth="1" fill="none"/>
      <circle cx="0"   cy="80"  r="6" fill="url(#hMnode)"/>
      <circle cx="60"  cy="110" r="5" fill="url(#hMnode)"/>
      <circle cx="130" cy="90"  r="7" fill="url(#hMnode)"/>
      <circle cx="200" cy="130" r="5" fill="url(#hMnode)"/>
      <circle cx="270" cy="100" r="6" fill="url(#hMnode)"/>
    </g>
    <g className="hero-mol drift-2">
      <path d="M 950 60 L 1020 100 L 1080 70 L 1140 110 L 1200 80" stroke="rgba(232,181,168,0.4)" strokeWidth="1" fill="none"/>
      <circle cx="950"  cy="60"  r="5" fill="url(#hMnode)"/>
      <circle cx="1020" cy="100" r="7" fill="url(#hMnode)"/>
      <circle cx="1080" cy="70"  r="5" fill="url(#hMnode)"/>
      <circle cx="1140" cy="110" r="6" fill="url(#hMnode)"/>
      <circle cx="1200" cy="80"  r="5" fill="url(#hMnode)"/>
    </g>
    <g className="hero-mol drift-3">
      <path d="M 100 480 L 180 510 L 250 490 L 320 530 L 400 500" stroke="rgba(232,181,168,0.45)" strokeWidth="1" fill="none"/>
      <circle cx="100" cy="480" r="6" fill="url(#hMnode)"/>
      <circle cx="180" cy="510" r="5" fill="url(#hMnode)"/>
      <circle cx="250" cy="490" r="7" fill="url(#hMnode)"/>
      <circle cx="320" cy="530" r="5" fill="url(#hMnode)"/>
      <circle cx="400" cy="500" r="6" fill="url(#hMnode)"/>
    </g>
    <g className="hero-mol drift-4">
      <path d="M 800 460 L 870 500 L 940 470 L 1010 510 L 1080 480" stroke="rgba(232,181,168,0.4)" strokeWidth="1" fill="none"/>
      <circle cx="800"  cy="460" r="5" fill="url(#hMnode)"/>
      <circle cx="870"  cy="500" r="7" fill="url(#hMnode)"/>
      <circle cx="940"  cy="470" r="5" fill="url(#hMnode)"/>
      <circle cx="1010" cy="510" r="6" fill="url(#hMnode)"/>
      <circle cx="1080" cy="480" r="5" fill="url(#hMnode)"/>
    </g>
    <g className="hero-mol drift-5">
      <path d="M 480 280 L 540 250 L 600 290 L 670 260 L 730 295" stroke="rgba(232,181,168,0.3)" strokeWidth="1" fill="none"/>
      <circle cx="480" cy="280" r="4" fill="url(#hMnode)"/>
      <circle cx="540" cy="250" r="5" fill="url(#hMnode)"/>
      <circle cx="600" cy="290" r="4" fill="url(#hMnode)"/>
      <circle cx="670" cy="260" r="5" fill="url(#hMnode)"/>
      <circle cx="730" cy="295" r="4" fill="url(#hMnode)"/>
    </g>
  </svg>
);

const Hero = () => (
  <section style={{ background: "var(--paper)", paddingTop: 64, paddingBottom: 80, position: "relative", overflow: "hidden", minHeight: 540 }}>
    <HeroMolecules/>
    <div className="container" style={{ position: "relative", zIndex: 2 }}>
      <div style={{ maxWidth: 880 }}>
        <div style={{ display: "flex", gap: 8, marginBottom: 28, alignItems: "center", flexWrap: "wrap" }}>
          <span className="eyebrow-lime hero-pulse">★ HOW TO BECOME A SUPER STAR</span>
          <span className="eyebrow">~6 MIN READ</span>
        </div>
        <h1 style={{
          fontFamily: "var(--font-display)", fontWeight: 900,
          fontSize: "clamp(54px, 7.4vw, 104px)", letterSpacing: "-0.045em",
          lineHeight: 0.94, margin: "0 0 16px",
        }}>
          The molecules<br/>
          running your body,<br/>
          finally{" "}
          <span className="hero-accent" style={{
            background: "linear-gradient(180deg, var(--ink) 62%, var(--lime) 62%)",
            WebkitBackgroundClip: "text",
            WebkitTextFillColor: "transparent",
            backgroundClip: "text",
            paddingRight: 4,
          }}>explained.</span>
        </h1>
        <p style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 22, color: "var(--ink)", marginTop: 0, marginBottom: 18, lineHeight: 1.3 }}>
          No jargon. No bro-science. Just the truth in plain English.
        </p>
        <p style={{ fontSize: 18, lineHeight: 1.55, maxWidth: 580, marginTop: 0, color: "var(--muted)" }}>
          Four honest questions. By the end of this page, you'll know <strong style={{ color: "var(--ink)" }}>exactly what peptides are, whether they're safe, and whether they make sense for you</strong>. That's it. No upsell.
        </p>
        <div style={{ display: "flex", gap: 12, marginTop: 32, flexWrap: "wrap" }}>
          <a href="#what" className="btn btn-primary btn-lg">Start with the basics →</a>
          <a href="bioreveal.html?start=1" className="btn btn-ghost btn-lg">Or skip to my match</a>
        </div>
      </div>
    </div>

    {/* Hero animation styles — keyframes scoped here */}
    <style>{`
      .hero-mol { transform-box: fill-box; }
      .drift-1 { animation: drift1 22s ease-in-out infinite; }
      .drift-2 { animation: drift2 28s ease-in-out infinite; }
      .drift-3 { animation: drift3 26s ease-in-out infinite; }
      .drift-4 { animation: drift4 32s ease-in-out infinite; }
      .drift-5 { animation: drift5 18s ease-in-out infinite; }
      @keyframes drift1 { 0%,100% { transform: translate(0, 0) } 50% { transform: translate(40px, 22px) } }
      @keyframes drift2 { 0%,100% { transform: translate(0, 0) } 50% { transform: translate(-50px, 18px) } }
      @keyframes drift3 { 0%,100% { transform: translate(0, 0) } 50% { transform: translate(60px, -20px) } }
      @keyframes drift4 { 0%,100% { transform: translate(0, 0) } 50% { transform: translate(-40px, -25px) } }
      @keyframes drift5 { 0%,100% { transform: translate(0, 0) } 50% { transform: translate(30px, 18px) } }
      .hero-pulse {
        position: relative;
        display: inline-flex;
        align-items: center;
      }
      .hero-pulse::before {
        content: "";
        display: inline-block;
        width: 8px; height: 8px; border-radius: 50%;
        background: var(--lime, #E8B5A8);
        margin-right: 8px;
        box-shadow: 0 0 0 0 rgba(232,181,168,0.7);
        animation: hero-pulse-dot 2s ease-out infinite;
      }
      @keyframes hero-pulse-dot {
        0% { box-shadow: 0 0 0 0 rgba(232,181,168,0.7); }
        70% { box-shadow: 0 0 0 12px rgba(232,181,168,0); }
        100% { box-shadow: 0 0 0 0 rgba(232,181,168,0); }
      }
      .hero-accent {
        background-size: 100% 200% !important;
        background-position: 0 0;
        animation: hero-accent-fill 1.4s cubic-bezier(.5,.9,.3,1) 0.3s both;
      }
      @keyframes hero-accent-fill {
        from { background-position: 0 100%; }
        to   { background-position: 0 0; }
      }
      @media (prefers-reduced-motion: reduce) {
        .hero-mol, .hero-pulse::before, .hero-accent { animation: none !important; }
      }
    `}</style>
  </section>
);

/* ============ TOC ============ */
const TOC = () => (
  <section style={{ background: "var(--paper-2)", padding: "48px 0", borderTop: "1px solid var(--paper-3)", borderBottom: "1px solid var(--paper-3)" }}>
    <div className="container">
      <div className="mono" style={{ fontSize: 11, letterSpacing: "0.15em", textTransform: "uppercase", color: "var(--muted)", marginBottom: 16 }}>★ FOUR QUESTIONS</div>
      <div className="m-grid-4" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16 }}>
        {LESSONS.map(l => (
          <a key={l.id} href={`#${l.id}`} style={{
            display: "block",
            padding: 24,
            background: "white",
            borderRadius: "var(--r-md)",
            border: "1px solid var(--paper-3)",
            transition: "transform .15s ease, box-shadow .15s ease",
          }}
          onMouseEnter={e => { e.currentTarget.style.transform = "translateY(-2px)"; e.currentTarget.style.boxShadow = "var(--shadow-sm)"; }}
          onMouseLeave={e => { e.currentTarget.style.transform = "none"; e.currentTarget.style.boxShadow = "none"; }}
          >
            <div className="mono" style={{ color: "var(--lime-deep)", fontSize: 11, letterSpacing: "0.18em", marginBottom: 12 }}>{l.n} / 04</div>
            <div style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 20, lineHeight: 1.15, letterSpacing: "-0.015em" }}>
              {l.short}
            </div>
          </a>
        ))}
      </div>
    </div>
  </section>
);

/* ============ LESSON ============ */
const LessonArt = ({ id }) => {
  if (id === "what") {
    // Cells texting each other
    return (
      <svg viewBox="0 0 320 320" width="100%" aria-hidden="true">
        <circle cx="80" cy="100" r="44" fill="var(--paper-2)" stroke="var(--ink)" strokeWidth="1.5"/>
        <circle cx="240" cy="100" r="44" fill="var(--paper-2)" stroke="var(--ink)" strokeWidth="1.5"/>
        <circle cx="160" cy="240" r="44" fill="var(--paper-2)" stroke="var(--ink)" strokeWidth="1.5"/>
        {/* Cell nuclei */}
        <circle cx="80" cy="100" r="16" fill="var(--lime)"/>
        <circle cx="240" cy="100" r="16" fill="var(--lime)"/>
        <circle cx="160" cy="240" r="16" fill="var(--lime)"/>
        {/* Peptide messages — chain of dots */}
        {[
          { from: [124, 100], to: [196, 100] },
          { from: [110, 130], to: [140, 210] },
          { from: [210, 130], to: [180, 210] },
        ].map((m, i) => {
          const dx = (m.to[0] - m.from[0]) / 5;
          const dy = (m.to[1] - m.from[1]) / 5;
          return Array.from({ length: 5 }).map((_, j) => (
            <circle key={`${i}-${j}`} cx={m.from[0] + dx*j} cy={m.from[1] + dy*j} r="3" fill="var(--ink)" opacity={0.85 - j*0.1}/>
          ));
        })}
        {/* Speech-bubble labels */}
        <g transform="translate(50 38)">
          <rect width="100" height="22" rx="11" fill="var(--ink)"/>
          <text x="50" y="15" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="9" fill="var(--lime)" letterSpacing="0.1em">"GROW COLLAGEN"</text>
        </g>
        <g transform="translate(170 38)">
          <rect width="100" height="22" rx="11" fill="var(--ink)"/>
          <text x="50" y="15" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="9" fill="var(--lime)" letterSpacing="0.1em">"RELEASE GH"</text>
        </g>
        <g transform="translate(110 290)">
          <rect width="100" height="22" rx="11" fill="var(--ink)"/>
          <text x="50" y="15" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="9" fill="var(--lime)" letterSpacing="0.1em">"GO TO SLEEP"</text>
        </g>
      </svg>
    );
  }
  if (id === "safe") {
    // Lab vial + checkmarks
    return (
      <svg viewBox="0 0 320 320" width="100%" aria-hidden="true">
        {/* Vial */}
        <rect x="125" y="60" width="70" height="200" rx="12" fill="var(--paper-2)" stroke="var(--ink)" strokeWidth="1.5"/>
        <rect x="115" y="50" width="90" height="20" rx="6" fill="var(--ink)"/>
        <rect x="125" y="140" width="70" height="120" fill="var(--lime)" opacity="0.4"/>
        <text x="160" y="190" textAnchor="middle" fontFamily="Archivo" fontSize="12" fontWeight="800" fill="var(--ink)" letterSpacing="0.05em">RX</text>
        {/* Floating checks */}
        {[
          { x: 50,  y: 80,  label: "MD-LED" },
          { x: 230, y: 80,  label: "503A" },
          { x: 50,  y: 200, label: "TESTED" },
          { x: 230, y: 200, label: "COA" },
        ].map((c, i) => (
          <g key={i}>
            <circle cx={c.x} cy={c.y} r="22" fill="var(--lime)" stroke="var(--ink)" strokeWidth="1.5"/>
            <path d={`M ${c.x-8} ${c.y} L ${c.x-2} ${c.y+6} L ${c.x+9} ${c.y-6}`} stroke="var(--ink)" strokeWidth="2.5" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
            <text x={c.x} y={c.y + 38} textAnchor="middle" fontFamily="JetBrains Mono" fontSize="9" fill="var(--ink)" letterSpacing="0.1em" fontWeight="600">{c.label}</text>
          </g>
        ))}
      </svg>
    );
  }
  if (id === "take") {
    // Three delivery methods — syringe, dropper, capsule
    return (
      <svg viewBox="0 0 320 320" width="100%" aria-hidden="true">
        {/* Syringe */}
        <g transform="translate(48 60)">
          <rect width="14" height="90" rx="3" fill="var(--paper-2)" stroke="var(--ink)" strokeWidth="1.5"/>
          <rect x="3" y="20" width="8" height="50" fill="var(--lime)" opacity="0.6"/>
          <rect x="-4" y="0" width="22" height="6" rx="2" fill="var(--ink)"/>
          <line x1="7" y1="90" x2="7" y2="120" stroke="var(--ink)" strokeWidth="1.5"/>
          <text x="7" y="160" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="10" fill="var(--ink)" letterSpacing="0.12em" fontWeight="600">INJECT</text>
        </g>
        {/* Dropper */}
        <g transform="translate(140 50)">
          <rect x="6" y="40" width="28" height="70" rx="6" fill="var(--paper-2)" stroke="var(--ink)" strokeWidth="1.5"/>
          <rect x="0" y="0" width="40" height="14" rx="4" fill="var(--ink)"/>
          <rect x="14" y="14" width="12" height="30" fill="var(--ink)"/>
          <rect x="10" y="60" width="20" height="40" fill="var(--lime)" opacity="0.5"/>
          <text x="20" y="160" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="10" fill="var(--ink)" letterSpacing="0.12em" fontWeight="600">TOPICAL</text>
        </g>
        {/* Capsule */}
        <g transform="translate(228 70)">
          <rect width="50" height="30" rx="15" fill="var(--paper-2)" stroke="var(--ink)" strokeWidth="1.5"/>
          <rect width="25" height="30" rx="15" fill="var(--lime)"/>
          <rect x="10" y="50" width="30" height="50" rx="4" fill="var(--paper-2)" stroke="var(--ink)" strokeWidth="1.5"/>
          <text x="25" y="160" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="10" fill="var(--ink)" letterSpacing="0.12em" fontWeight="600">ORAL</text>
        </g>
        {/* Connector dots */}
        <line x1="60" y1="240" x2="260" y2="240" stroke="var(--paper-3)" strokeWidth="1" strokeDasharray="3 3"/>
        <text x="160" y="280" textAnchor="middle" fontFamily="Archivo" fontSize="12" fontWeight="700" fill="var(--ink)" letterSpacing="0.02em">we send everything you need</text>
      </svg>
    );
  }
  if (id === "fast") {
    // Timeline with 4 markers
    return (
      <svg viewBox="0 0 320 320" width="100%" aria-hidden="true">
        <line x1="40" y1="160" x2="280" y2="160" stroke="var(--ink)" strokeWidth="1.5"/>
        {[
          { x: 60,  label: "30 min", sub: "PT-141",   color: "var(--lime)" },
          { x: 130, label: "1 day",  sub: "Semax",    color: "var(--lime)" },
          { x: 200, label: "2–4 wk", sub: "GLP-1s",   color: "var(--lime)" },
          { x: 270, label: "8–12 wk",sub: "Hair, skin", color: "var(--lime)" },
        ].map((m, i) => (
          <g key={i}>
            <circle cx={m.x} cy="160" r="10" fill={m.color} stroke="var(--ink)" strokeWidth="1.5"/>
            <line x1={m.x} y1={i % 2 === 0 ? 100 : 175} x2={m.x} y2={i % 2 === 0 ? 150 : 220} stroke="var(--paper-3)" strokeWidth="1"/>
            <text x={m.x} y={i % 2 === 0 ? 88 : 240} textAnchor="middle" fontFamily="Archivo" fontSize="13" fontWeight="800" fill="var(--ink)">{m.label}</text>
            <text x={m.x} y={i % 2 === 0 ? 76 : 254} textAnchor="middle" fontFamily="JetBrains Mono" fontSize="9" fill="var(--muted)" letterSpacing="0.1em">{m.sub}</text>
          </g>
        ))}
        <text x="160" y="300" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="9" fill="var(--muted)" letterSpacing="0.15em">FAST → SLOW</text>
      </svg>
    );
  }
  return null;
};

const Lesson = ({ l, dark }) => (
  <section id={l.id} style={{
    background: dark ? "var(--ink)" : "var(--paper)",
    color: dark ? "var(--paper)" : "var(--ink)",
    padding: "120px 0",
  }}>
    <div className="container">
      <div className="m-grid-2" style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 80, alignItems: "center" }}>
        <div>
          <div style={{ display: "flex", gap: 12, alignItems: "center", marginBottom: 16 }}>
            <span className="mono" style={{ color: "var(--lime)", fontSize: 12, letterSpacing: "0.18em" }}>{l.n} / 04</span>
            <span className="mono" style={{ fontSize: 11, letterSpacing: "0.18em", color: dark ? "var(--muted-2)" : "var(--muted)" }}>{l.eyebrow.replace("★ ", "")}</span>
          </div>
          <h2 className="display-lg" style={{ marginBottom: 24, lineHeight: 1.05 }}>{l.short}</h2>
          <p style={{
            fontFamily: "var(--font-display)",
            fontSize: 22,
            fontWeight: 600,
            lineHeight: 1.35,
            color: dark ? "var(--lime)" : "var(--ink)",
            marginBottom: 28,
            letterSpacing: "-0.01em",
          }}>
            {l.headline}
          </p>
          <div style={{ display: "grid", gap: 16 }}>
            {l.body.map((p, i) => (
              <p key={i} style={{ fontSize: 16.5, lineHeight: 1.65, color: dark ? "rgba(255,255,255,0.78)" : "var(--muted)", maxWidth: 580 }}>
                {p}
              </p>
            ))}
          </div>
          <div style={{ marginTop: 36, display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 12, maxWidth: 480 }}>
            {l.facts.map(([k, v]) => (
              <div key={k} style={{
                padding: "14px 16px",
                background: dark ? "var(--ink-2)" : "var(--paper-2)",
                borderRadius: "var(--r-sm)",
                border: dark ? "1px solid var(--line)" : "1px solid var(--paper-3)",
              }}>
                <div style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 16, letterSpacing: "-0.01em" }}>{k}</div>
                <div className="mono" style={{ fontSize: 10, letterSpacing: "0.12em", textTransform: "uppercase", color: dark ? "var(--muted-2)" : "var(--muted)", marginTop: 4 }}>{v}</div>
              </div>
            ))}
          </div>
        </div>
        <div style={{
          background: dark ? "var(--ink-2)" : "var(--paper-2)",
          borderRadius: "var(--r-xl)",
          padding: 48,
          border: dark ? "1px solid var(--line)" : "1px solid var(--paper-3)",
        }}>
          <LessonArt id={l.id} />
        </div>
      </div>
    </div>
  </section>
);

/* ============ CTA ============ */
const FinalCTA = () => (
  <section style={{ background: "var(--lime)", color: "var(--ink)", padding: "120px 0", position: "relative", overflow: "hidden" }}>
    <div className="container" style={{ position: "relative", zIndex: 2 }}>
      <div style={{ maxWidth: 880 }}>
        <div className="mono" style={{ fontSize: 12, letterSpacing: "0.18em", textTransform: "uppercase", marginBottom: 16 }}>★ NOW YOU KNOW</div>
        <h2 style={{
          fontFamily: "var(--font-display)",
          fontWeight: 800,
          fontSize: "clamp(56px, 9vw, 140px)",
          lineHeight: 0.92,
          letterSpacing: "-0.04em",
          textTransform: "uppercase",
        }}>
          Ready to<br />
          pick a goal?
        </h2>
        <p style={{ marginTop: 24, fontSize: 18, lineHeight: 1.5, maxWidth: 540, fontWeight: 500 }}>
          Hair. Skin. Muscle. Fat loss. Mind. Pick the one that matters most right now — we'll match you with the peptide that's been studied for it.
        </p>
        <div style={{ display: "flex", gap: 12, marginTop: 40, flexWrap: "wrap" }}>
          <a href="bioreveal.html?start=1" className="btn btn-dark btn-lg">Find my peptide →</a>
          <a href="index.html#categories" className="btn btn-ghost btn-lg">Browse by goal</a>
        </div>
      </div>
    </div>
    <div style={{ position: "absolute", right: "-5%", top: "50%", transform: "translateY(-50%) rotate(15deg)", color: "var(--ink)", opacity: 0.08 }}>
      <Star size={520} />
    </div>
  </section>
);

/* ============ APP ============ */
const App = () => (
  <>
    <Header active="learn" />
    <Hero />
    <TOC />
    {LESSONS.map((l, i) => <Lesson key={l.id} l={l} dark={i % 2 === 1} />)}
    <FinalCTA />
    <Footer />
  </>
);

ReactDOM.createRoot(document.getElementById("root")).render(<App />);
