// Homepage — Superstar Peptides

const PEPTIDES = [
  { code: "GHK-Cu",      category: "Hair & Skin", color: "#E8C4B8", tag: "Collagen + follicles", desc: "Tells your skin and scalp to act 25 again." },
  { code: "BPC-157",     category: "Muscle",      color: "#E8B5A8", tag: "Repair",               desc: "Speeds healing of tendons, ligaments, and gut lining." },
  { code: "Tirzepatide", category: "Fat Loss",    color: "#A0B098", tag: "Appetite",             desc: "Quiets cravings. Steadies blood sugar." },
  { code: "Sermorelin",  category: "Muscle",      color: "#D9A47C", tag: "Growth hormone",       desc: "Tells your body to release more growth hormone — naturally." },
  { code: "Semax",       category: "Mind",        color: "#A8B4C4", tag: "Focus",                desc: "Brain fertilizer. Sharper focus, better memory." },
  { code: "PT-141",      category: "Libido",      color: "#9A4A4A", tag: "Desire",               desc: "Works in the brain, not the bloodstream." },
];

const CATEGORIES = [
  { id: "hair",    name: "For Hair",     peptides: "GHK-Cu · PTD-DBM",                          icon: "❋", accent: "#FF8FB1", desc: "Wake up sleeping follicles. Thicker, fuller hair." },
  { id: "skin",    name: "For Skin",     peptides: "GHK-Cu · Epitalon · BPC-157",               icon: "✿", accent: "#E8B5A8", desc: "Make collagen again like you did at 25." },
  { id: "muscle",  name: "For Muscle",   peptides: "BPC-157 · TB-500 · Sermorelin · Ipamorelin",icon: "◆", accent: "#FF4A1C", desc: "Train hard. Recover fast. Heal old injuries." },
  { id: "fatloss", name: "For Fat Loss", peptides: "Semaglutide · Tirzepatide · AOD-9604",       icon: "⚖", accent: "#C68B7C", desc: "Quiet the cravings. Move the scale." },
  { id: "mind",    name: "For Mind",     peptides: "Semax · Selank · Dihexa",                    icon: "✦", accent: "#7C5BFF", desc: "Sharper focus. Calmer mood. Clearer thinking." },
  { id: "sleep",   name: "For Sleep",    peptides: "DSIP · Epitalon",                            icon: "☾", accent: "#6FD8FF", desc: "Deeper sleep. Wake up actually rested." },
  { id: "libido",  name: "For Libido",   peptides: "PT-141",                                     icon: "♥", accent: "#FF4A1C", desc: "Works in the brain — not the bloodstream." },
];

const PROTOCOLS = [
  {
    name: "12-Week Recomp",
    duration: "84 days",
    goal: "Drop fat. Add muscle.",
    color: "#E8B5A8",
    peptides: ["Semaglutide", "BPC-157", "Sermorelin"],
    price: "$489/mo",
    benefit: "Engineered cycle for body recomposition. Fat loss without muscle loss.",
  },
  {
    name: "Joint Repair",
    duration: "56 days",
    goal: "Heal old injuries.",
    color: "#6FD8FF",
    peptides: ["BPC-157", "TB-500"],
    price: "$329/mo",
    benefit: "Aggressive soft-tissue repair stack. Tendons, ligaments, gut.",
  },
  {
    name: "Longevity Stack",
    duration: "Ongoing",
    goal: "Slow biological aging.",
    color: "#E8C76B",
    peptides: ["NAD+", "Epitalon", "GHK-Cu"],
    price: "$399/mo",
    benefit: "Cellular maintenance: telomeres, mitochondria, collagen.",
  },
  {
    name: "Peak Performance",
    duration: "12 weeks",
    goal: "Train like a pro.",
    color: "#FF4A1C",
    peptides: ["Sermorelin", "Ipamorelin", "BPC-157"],
    price: "$549/mo",
    benefit: "Sleep deeper, recover faster, perform under load.",
  },
];

/* ============ HERO ============ */
const Hero = () => (
  <section style={{ background: "var(--paper)", paddingTop: 64, paddingBottom: 0, position: "relative", overflow: "hidden" }}>
    <div className="container" style={{ position: "relative", zIndex: 2 }}>
      <div className="m-hero-grid" style={{ display: "grid", gridTemplateColumns: "1.3fr 1fr", gap: 64, alignItems: "end", paddingBottom: 40 }}>
        <div>
          <div style={{ display: "flex", gap: 8, marginBottom: 28, alignItems: "center" }}>
            <span className="eyebrow-lime">★ PEPTIDES · EXPLAINED</span>
            <span className="eyebrow">RX · U.S. PHARMACIES</span>
          </div>
          <h1 className="display-xl">
            Peptides,<br />
            finally<br />
            <span style={{
              background: "linear-gradient(180deg, var(--ink) 60%, var(--lime) 60%)",
              WebkitBackgroundClip: "text",
              WebkitTextFillColor: "transparent",
              backgroundClip: "text",
              paddingRight: 8,
            }}>explained.</span>
          </h1>
          <p style={{ fontSize: 19, lineHeight: 1.5, maxWidth: 520, marginTop: 24, color: "var(--muted)" }}>
            Real medicine your body already makes — explained in plain English. Pick a goal: hair, skin, muscle, fat loss, or mind. We match you with a peptide that does the job, prescribed and shipped from a U.S. pharmacy.
          </p>
          <div style={{ display: "flex", gap: 12, marginTop: 32, flexWrap: "wrap" }}>
            <a href="bioreveal.html" className="btn btn-primary btn-lg">Find my peptide →</a>
            <a href="learn.html" className="btn btn-ghost btn-lg">Learn the basics</a>
          </div>
          <div style={{ marginTop: 40, display: "flex", gap: 28, flexWrap: "wrap" }}>
            <Stat value="Lab-verified" label="COA on every batch" />
            <Stat value="MD-led" label="Real U.S. clinicians" />
            <Stat value="48h" label="Ships to your door" />
          </div>
        </div>
        <HeroVisual />
      </div>
    </div>
  </section>
);

const Stat = ({ value, label }) => (
  <div>
    <div style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 24, letterSpacing: "-0.02em" }}>
      {value}
    </div>
    <div className="mono" style={{ color: "var(--muted)", marginTop: 4, fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase" }}>{label}</div>
  </div>
);

const HERO_PRODUCTS = [
  { code: "GHK-Cu",      fullName: "Hair + skin",          category: "Hair · Skin", shortLabel: "GHK-Cu",    stats: { dose: "50mg",   purity: "99.6%", price: "$129" } },
  { code: "BPC-157",     fullName: "Repair + recovery",    category: "Muscle",      shortLabel: "BPC-1...",  stats: { dose: "5mg",    purity: "99.6%", price: "$89" } },
  { code: "Tirzepatide", fullName: "Quiets your appetite", category: "Fat Loss",    shortLabel: "Tirzep...", stats: { dose: "5mg",    purity: "99.5%", price: "$449" } },
  { code: "Semax",       fullName: "Focus + memory",       category: "Mind",        shortLabel: "Semax",     stats: { dose: "30mg",   purity: "99.7%", price: "$179" } },
];

const HeroChip = ({ children }) => (
  <span style={{
    display: "inline-flex",
    alignItems: "center",
    gap: 6,
    padding: "6px 10px",
    borderRadius: 999,
    background: "rgba(0,0,0,0.72)",
    color: "white",
    fontFamily: "var(--font-mono)",
    fontSize: 10,
    fontWeight: 600,
    letterSpacing: "0.12em",
    textTransform: "uppercase",
    backdropFilter: "blur(6px)",
  }}>{children}</span>
);

const HeroStat = ({ value, label }) => (
  <div>
    <div style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 22, letterSpacing: "-0.02em", lineHeight: 1 }}>
      {value}
    </div>
    <div className="mono" style={{ fontSize: 10, color: "var(--muted)", letterSpacing: "0.14em", textTransform: "uppercase", marginTop: 6 }}>
      {label}
    </div>
  </div>
);

const HeroVisual = () => {
  const [active, setActive] = React.useState(0);
  const p = HERO_PRODUCTS[active];
  const pal = getPalette(p.code);
  return (
    <div style={{ display: "grid", gap: 12 }}>
      {/* Main showcase card */}
      <div style={{
        background: "white",
        border: "1px solid var(--paper-3)",
        borderRadius: "var(--r-xl)",
        overflow: "hidden",
      }}>
        <div style={{ position: "relative", aspectRatio: "1 / 0.86" }}>
          <ProductShot bg={pal.bg} cap={pal.cap} tint={pal.tint} product={p.code} chip={false} />
          <div style={{ position: "absolute", top: 16, left: 16, right: 16, display: "flex", justifyContent: "space-between", gap: 8 }}>
            <HeroChip>● BATCH 26-A15</HeroChip>
            <HeroChip>● 250 SOLD TODAY</HeroChip>
          </div>
        </div>
        <div style={{ padding: 24 }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 16, marginBottom: 20 }}>
            <div style={{ minWidth: 0 }}>
              <h3 style={{
                fontFamily: "var(--font-display)",
                fontWeight: 800,
                fontSize: 30,
                letterSpacing: "-0.025em",
                lineHeight: 1,
                marginBottom: 6,
                whiteSpace: "nowrap",
                overflow: "hidden",
                textOverflow: "ellipsis",
              }}>{p.code}</h3>
              <div style={{ fontSize: 13, color: "var(--muted)" }}>{p.fullName}</div>
            </div>
            <a href="product.html" className="btn btn-sm" style={{
              background: "var(--paper-2)",
              flexShrink: 0,
            }}>View →</a>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16, paddingTop: 16, borderTop: "1px solid var(--paper-3)" }}>
            <HeroStat value={p.stats.dose}   label="Dose" />
            <HeroStat value={p.stats.purity} label="Purity" />
            <HeroStat value={p.stats.price}  label="From" />
          </div>
        </div>
      </div>
      {/* Thumbnail strip */}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 8 }}>
        {HERO_PRODUCTS.map((hp, i) => {
          const tpal = getPalette(hp.code);
          const isActive = i === active;
          return (
            <button key={hp.code} onClick={() => setActive(i)}
              aria-label={`Show ${hp.code}`}
              style={{
                border: isActive ? "2px solid var(--ink)" : "1px solid var(--paper-3)",
                borderRadius: "var(--r-md)",
                overflow: "hidden",
                padding: 0,
                background: "white",
                cursor: "pointer",
                textAlign: "left",
                transition: "border-color .15s ease, transform .15s ease",
                transform: isActive ? "translateY(-1px)" : "none",
              }}
              onMouseEnter={e => { if (!isActive) e.currentTarget.style.borderColor = "var(--muted-2)"; }}
              onMouseLeave={e => { if (!isActive) e.currentTarget.style.borderColor = "var(--paper-3)"; }}
            >
              <div style={{ aspectRatio: "1 / 1" }}>
                <ProductShot bg={tpal.bg} cap={tpal.cap} tint={tpal.tint} product={hp.code} chip={false} />
              </div>
              <div style={{ padding: "8px 10px 10px" }}>
                <div className="mono" style={{ fontSize: 9, color: "var(--muted)", letterSpacing: "0.14em", textTransform: "uppercase", marginBottom: 2 }}>
                  {hp.category}
                </div>
                <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: "-0.005em" }}>
                  {hp.shortLabel}
                </div>
              </div>
            </button>
          );
        })}
      </div>
    </div>
  );
};

const Sparkline = () => (
  <svg viewBox="0 0 100 60" width="100%" height="100%" aria-hidden="true">
    <polyline points="0,45 12,42 22,38 30,40 42,28 54,22 66,18 78,12 90,8 100,6"
      fill="none" stroke="#E8B5A8" strokeWidth="2" />
    <circle cx="100" cy="6" r="3" fill="#E8B5A8" />
  </svg>
);

/* ============ MARQUEE ============ */
const Marquee = () => {
  const items = ["BPC-157", "★", "Sermorelin", "★", "NAD+", "★", "Tirzepatide", "★", "Selank", "★", "TB-500", "★", "GHK-Cu", "★", "Semaglutide", "★", "Ipamorelin", "★"];
  const row = (
    <span>
      {items.map((it, i) =>
        it === "★"
          ? <Star key={i} size={18} color="var(--lime)" />
          : <span key={i}>{it}</span>
      )}
    </span>
  );
  return (
    <div className="marquee">
      <div className="marquee-track">
        {row}{row}{row}
      </div>
    </div>
  );
};

/* ============ CATEGORIES ============ */
const Categories = () => (
  <section id="categories" className="section" style={{ background: "var(--paper)" }}>
    <div className="container">
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", marginBottom: 48, flexWrap: "wrap", gap: 24 }}>
        <div>
          <div className="eyebrow" style={{ marginBottom: 12 }}>★ BROWSE BY GOAL · 7 CATEGORIES</div>
          <h2 className="display-lg">What are you<br />optimizing?</h2>
        </div>
        <p style={{ maxWidth: 380, color: "var(--muted)", fontSize: 16, lineHeight: 1.5 }}>
          Each peptide does one thing well. Pick your goal — we'll match you with the molecule that's been studied for it.
        </p>
      </div>
      <div className="m-grid-3" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }}>
        {CATEGORIES.map((c, i) => <CategoryCard key={c.id} cat={c} featured={i === 0} />)}
      </div>
    </div>
  </section>
);

const CategoryCard = ({ cat, featured }) => (
  <a href={`shop.html?cat=${cat.id}`} className="category-card" style={{
    display: "block",
    padding: 28,
    borderRadius: "var(--r-lg)",
    background: featured ? "var(--ink)" : "white",
    color: featured ? "var(--paper)" : "var(--ink)",
    border: `1px solid ${featured ? "var(--line)" : "var(--paper-3)"}`,
    aspectRatio: "1.05 / 1",
    position: "relative",
    overflow: "hidden",
    transition: "transform .2s ease, box-shadow .2s ease",
    cursor: "pointer",
  }}
  onMouseEnter={e => { e.currentTarget.style.transform = "translateY(-4px)"; e.currentTarget.style.boxShadow = "var(--shadow-lg)"; }}
  onMouseLeave={e => { e.currentTarget.style.transform = "translateY(0)"; e.currentTarget.style.boxShadow = "none"; }}
  >
    <div style={{
      position: "absolute",
      top: -40, right: -40,
      width: 200, height: 200,
      borderRadius: "50%",
      background: cat.accent,
      opacity: featured ? 0.9 : 0.18,
      filter: featured ? "none" : "blur(8px)",
    }} />
    <div style={{ position: "relative", display: "flex", flexDirection: "column", height: "100%", justifyContent: "space-between" }}>
      <div>
        <div style={{ fontSize: 32, marginBottom: 16, color: featured ? "var(--lime)" : cat.accent }}>{cat.icon}</div>
        <h3 className="display-md" style={{ marginBottom: 8 }}>{cat.name}</h3>
        <p style={{ fontSize: 13, opacity: featured ? 0.7 : 0.6, maxWidth: 280, lineHeight: 1.5 }}>{cat.desc}</p>
      </div>
      <div>
        <div className="mono" style={{ fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase", opacity: featured ? 0.5 : 0.4, marginBottom: 8 }}>
          Includes
        </div>
        <div style={{ fontSize: 14, fontWeight: 500 }}>{cat.peptides}</div>
      </div>
    </div>
  </a>
);

/* ============ STACK BUILDER CTA ============ */
const StackCTA = () => (
  <section id="stacks" style={{ background: "var(--ink)", color: "var(--paper)", padding: "120px 0", overflow: "hidden", position: "relative" }}>
    {/* Decorative grid */}
    <svg width="100%" height="100%" style={{ position: "absolute", inset: 0, opacity: 0.08 }} aria-hidden="true">
      <defs>
        <pattern id="grid2" width="60" height="60" patternUnits="userSpaceOnUse">
          <path d="M 60 0 L 0 0 0 60" fill="none" stroke="var(--lime)" strokeWidth="1"/>
        </pattern>
      </defs>
      <rect width="100%" height="100%" fill="url(#grid2)" />
    </svg>
    <div className="container" style={{ position: "relative" }}>
      <div className="m-grid-2 m-stack-cta" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "center" }}>
        <div>
          <div style={{ marginBottom: 24 }}>
            <span className="chip chip-lime">90-SECOND MATCH</span>
          </div>
          <h2 className="display-lg">Not sure<br />where to<br /><span style={{ color: "var(--lime)" }}>start?</span></h2>
          <p style={{ marginTop: 24, fontSize: 17, lineHeight: 1.6, opacity: 0.75, maxWidth: 480 }}>
            Tell us your goal in plain English. We match you with the peptide (or two) that's been studied for it — with simple instructions, realistic timelines, and a real clinician's review before anything ships.
          </p>
          <div style={{ marginTop: 36, display: "flex", gap: 12, flexWrap: "wrap" }}>
            <a href="bioreveal.html" className="btn btn-primary btn-lg">Take the 90-second quiz →</a>
            <a href="#protocols" className="btn btn-ghost-light btn-lg">See pre-built protocols</a>
          </div>
          <div className="m-grid-3" style={{ marginTop: 48, display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
            <Step n="01" label="Tell us your goal" />
            <Step n="02" label="A few lifestyle questions" />
            <Step n="03" label="Get matched" />
          </div>
        </div>
        <StackPreview />
      </div>
    </div>
  </section>
);

const Step = ({ n, label }) => (
  <div style={{ borderTop: "1px solid var(--line)", paddingTop: 12 }}>
    <div className="mono" style={{ color: "var(--lime)", fontSize: 11, letterSpacing: "0.18em" }}>{n}</div>
    <div style={{ fontWeight: 500, fontSize: 14, marginTop: 4 }}>{label}</div>
  </div>
);

const StackPreview = () => (
  <div style={{ position: "relative" }}>
    <div style={{
      background: "var(--ink-2)",
      border: "1px solid var(--line)",
      borderRadius: "var(--r-lg)",
      padding: 28,
      transform: "rotate(-1.5deg)",
    }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "start", marginBottom: 20 }}>
        <div>
          <div className="mono" style={{ color: "var(--muted-2)", fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase" }}>YOUR STACK · BUILT FOR M.K.</div>
          <div style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 28, marginTop: 8, letterSpacing: "-0.02em", textTransform: "uppercase" }}>
            Recomp Protocol
          </div>
        </div>
        <span className="chip chip-lime">94% match</span>
      </div>
      <div style={{ display: "grid", gap: 10 }}>
        {[
          { name: "Semaglutide", dose: "0.5mg / wk", color: "#C68B7C", purpose: "Appetite + glucose" },
          { name: "BPC-157", dose: "250mcg / 2x day", color: "#E8B5A8", purpose: "Recovery" },
          { name: "Sermorelin", dose: "200mcg / nightly", color: "#FF4A1C", purpose: "GH + sleep" },
        ].map(p => (
          <div key={p.name} style={{
            background: "var(--ink-3)",
            borderRadius: "var(--r-md)",
            padding: 14,
            display: "grid",
            gridTemplateColumns: "auto 1fr auto",
            gap: 14,
            alignItems: "center",
            border: "1px solid rgba(255,255,255,0.04)",
          }}>
            <div style={{ width: 36, height: 36, borderRadius: 8, background: p.color, display: "grid", placeItems: "center", color: "#0a0a0a", fontWeight: 800, fontSize: 11, fontFamily: "var(--font-mono)", letterSpacing: "0.05em" }}>
              {p.name.slice(0, 2).toUpperCase()}
            </div>
            <div>
              <div style={{ fontWeight: 600, fontSize: 14 }}>{p.name}</div>
              <div className="mono" style={{ color: "var(--muted-2)", fontSize: 11, letterSpacing: "0.08em", marginTop: 2 }}>{p.purpose}</div>
            </div>
            <div className="mono" style={{ color: "var(--lime)", fontSize: 11, letterSpacing: "0.05em" }}>{p.dose}</div>
          </div>
        ))}
      </div>
      <div style={{ marginTop: 20, display: "flex", justifyContent: "space-between", alignItems: "center", paddingTop: 16, borderTop: "1px solid var(--line)" }}>
        <div className="mono" style={{ color: "var(--muted-2)", fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase" }}>12 weeks · ships monthly</div>
        <div style={{ fontFamily: "var(--font-display)", fontSize: 22, fontWeight: 800, letterSpacing: "-0.02em" }}>
          $489<span style={{ fontSize: 13, color: "var(--muted-2)", fontWeight: 500 }}>/mo</span>
        </div>
      </div>
    </div>
  </div>
);

/* ============ PROTOCOLS ============ */
const Protocols = () => (
  <section id="protocols" className="section" style={{ background: "var(--paper-2)" }}>
    <div className="container">
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", marginBottom: 48, flexWrap: "wrap", gap: 24 }}>
        <div>
          <div className="eyebrow" style={{ marginBottom: 12 }}>★ ENGINEERED PROTOCOLS</div>
          <h2 className="display-lg">Pre-built<br />for results.</h2>
        </div>
        <p style={{ maxWidth: 420, color: "var(--muted)", fontSize: 16, lineHeight: 1.5 }}>
          Stacks designed by our medical team for specific outcomes. Sequenced dosing, monthly shipments, MD oversight.
        </p>
      </div>
      <div className="m-grid-2" style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 20 }}>
        {PROTOCOLS.map(p => <ProtocolCard key={p.name} p={p} />)}
      </div>
    </div>
  </section>
);

const ProtocolCard = ({ p }) => (
  <div className="m-protocol-card" style={{
    background: "white",
    borderRadius: "var(--r-lg)",
    padding: 32,
    border: "1px solid var(--paper-3)",
    display: "grid",
    gridTemplateColumns: "1fr auto",
    gap: 24,
    alignItems: "start",
  }}>
    <div>
      <div style={{ display: "flex", gap: 8, marginBottom: 16 }}>
        <span className="chip" style={{ background: p.color, color: "var(--ink)" }}>★ {p.duration}</span>
        <span className="chip">RX</span>
      </div>
      <h3 className="display-md" style={{ marginBottom: 6 }}>{p.name}</h3>
      <p style={{ fontSize: 14, color: "var(--muted)", marginBottom: 20, lineHeight: 1.5 }}>{p.benefit}</p>
      <div className="mono" style={{ fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--muted)", marginBottom: 8 }}>STACK</div>
      <div style={{ display: "flex", flexWrap: "wrap", gap: 6, marginBottom: 24 }}>
        {p.peptides.map(pep => (
          <span key={pep} style={{
            padding: "6px 10px",
            border: "1px solid var(--paper-3)",
            borderRadius: 6,
            fontSize: 12,
            fontWeight: 500,
            fontFamily: "var(--font-mono)",
            letterSpacing: "0.02em",
          }}>{pep}</span>
        ))}
      </div>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", paddingTop: 20, borderTop: "1px solid var(--paper-3)" }}>
        <div style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 24, letterSpacing: "-0.02em" }}>
          {p.price}
        </div>
        <a href="bioreveal.html" className="btn btn-sm btn-dark">Start protocol →</a>
      </div>
    </div>
    <div style={{ width: 140, aspectRatio: "0.85 / 1", borderRadius: "var(--r-md)", overflow: "hidden" }}>
      {(() => {
        const pal = getPalette(p.peptides[0]);
        return <ProductShot bg={pal.bg} cap={pal.cap} tint={pal.tint} product={p.peptides[0]} chip={false} />;
      })()}
    </div>
  </div>
);

/* ============ EDUCATION / SCIENCE ============ */
const Science = () => (
  <section className="section" style={{ background: "var(--paper)" }}>
    <div className="container">
      <div className="m-grid-2" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "center" }}>
        <div style={{ position: "relative" }}>
          <MechanismDiagram />
        </div>
        <div>
          <div className="eyebrow" style={{ marginBottom: 12 }}>★ HOW IT'S MADE</div>
          <h2 className="display-lg">Real medicine.<br />Real pharmacies.<br />No gray market.</h2>
          <p style={{ marginTop: 24, fontSize: 17, lineHeight: 1.6, color: "var(--muted)", maxWidth: 480 }}>
            Every peptide on this site is compounded by a U.S. licensed pharmacy and prescribed by a real clinician — only after you talk to one. Every batch is tested for what's in it, how pure it is, and that it's sterile. You get the certificate.
          </p>
          <div style={{ marginTop: 36, display: "grid", gap: 16 }}>
            {[
              ["Triple-tested", "What's in it, how pure, and sterile — every batch."],
              ["U.S. licensed pharmacies", "503A registered. Same place your prescriptions come from."],
              ["A real clinician reviews it", "No bots. A licensed MD signs off before anything ships."],
              ["You see the certificate", "Lab results for your batch, in your inbox."],
            ].map(([t, d]) => (
              <div key={t} style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: 16, alignItems: "start", paddingBottom: 16, borderBottom: "1px solid var(--paper-3)" }}>
                <div style={{ width: 28, height: 28, background: "var(--lime)", color: "var(--ink)", display: "grid", placeItems: "center", borderRadius: 6, marginTop: 2 }}>
                  <Star size={14} />
                </div>
                <div>
                  <div style={{ fontWeight: 600, fontSize: 15 }}>{t}</div>
                  <div style={{ color: "var(--muted)", fontSize: 14, marginTop: 2 }}>{d}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  </section>
);

const MechanismDiagram = () => (
  <div style={{
    background: "var(--ink)",
    color: "var(--paper)",
    borderRadius: "var(--r-xl)",
    padding: 48,
    aspectRatio: "1/1",
    position: "relative",
    overflow: "hidden",
  }}>
    <div className="mono" style={{ color: "var(--lime)", fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase", marginBottom: 24 }}>
      WHAT GHK-Cu DOES
    </div>
    <svg viewBox="0 0 400 400" width="100%" style={{ maxWidth: 400, position: "absolute", top: 60, left: "50%", transform: "translateX(-50%)" }}>
      {/* Concentric rings */}
      {[180, 140, 100, 60].map((r, i) => (
        <circle key={i} cx="200" cy="200" r={r} fill="none" stroke="rgba(198,255,61,0.15)" strokeWidth="1" strokeDasharray="2 4" />
      ))}
      {/* Center */}
      <circle cx="200" cy="200" r="40" fill="var(--lime)" />
      <text x="200" y="195" textAnchor="middle" fontFamily="Archivo" fontWeight="800" fontSize="13" fill="#0a0a0a" letterSpacing="0.02em">GHK</text>
      <text x="200" y="210" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="9" fill="#0a0a0a" letterSpacing="0.1em">copper</text>

      {/* Nodes */}
      {[
        { x: 200, y: 60,  label: "COLLAGEN", sub: "Skin firms up" },
        { x: 340, y: 200, label: "FOLLICLES", sub: "Hair gets thicker" },
        { x: 200, y: 340, label: "REDNESS",   sub: "Inflammation drops" },
        { x: 60,  y: 200, label: "REPAIR",    sub: "Cells act younger" },
      ].map((n, i) => (
        <g key={i}>
          <line x1="200" y1="200" x2={n.x} y2={n.y} stroke="rgba(232,181,168,0.5)" strokeWidth="1" />
          <circle cx={n.x} cy={n.y} r="26" fill="var(--ink-2)" stroke="var(--lime)" strokeWidth="1" />
          <text x={n.x} y={n.y + 2} textAnchor="middle" fontFamily="JetBrains Mono" fontSize="8" fontWeight="600" fill="var(--lime)">{n.label}</text>
          <text x={n.x} y={n.y + 42} textAnchor="middle" fontFamily="Inter" fontSize="10" fill="rgba(255,255,255,0.6)" letterSpacing="0.04em">{n.sub}</text>
        </g>
      ))}
    </svg>
    <div style={{ position: "absolute", bottom: 48, left: 48, right: 48, display: "flex", justifyContent: "space-between", alignItems: "end" }}>
      <div>
        <div className="mono" style={{ color: "var(--muted-2)", fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase" }}>You'll notice</div>
        <div style={{ fontFamily: "var(--font-display)", fontSize: 22, fontWeight: 800 }}>4–8 wks</div>
      </div>
      <div>
        <div className="mono" style={{ color: "var(--muted-2)", fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase" }}>Use it</div>
        <div style={{ fontFamily: "var(--font-display)", fontSize: 22, fontWeight: 800 }}>Daily</div>
      </div>
      <div>
        <div className="mono" style={{ color: "var(--muted-2)", fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase" }}>Safety</div>
        <div style={{ fontFamily: "var(--font-display)", fontSize: 22, fontWeight: 800 }}>40+ yrs</div>
      </div>
    </div>
  </div>
);

/* ============ STEP ILLUSTRATIONS ============ */
const QuizArt = ({ dark }) => (
  <svg viewBox="0 0 200 130" width="100%" aria-hidden="true">
    <rect x="14" y="14" width="172" height="102" rx="10"
      fill={dark ? "#1F1F1F" : "white"}
      stroke={dark ? "rgba(255,255,255,0.18)" : "var(--paper-3)"} strokeWidth="1"/>
    <circle cx="26" cy="26" r="2" fill={dark ? "rgba(255,255,255,0.45)" : "var(--muted-2)"}/>
    <circle cx="34" cy="26" r="2" fill={dark ? "rgba(255,255,255,0.45)" : "var(--muted-2)"}/>
    <circle cx="42" cy="26" r="2" fill={dark ? "rgba(255,255,255,0.45)" : "var(--muted-2)"}/>
    <rect x="26" y="40" width="80" height="5" rx="2" fill={dark ? "rgba(255,255,255,0.55)" : "var(--ink)"}/>
    {[0,1,2,3].map(i => {
      const y = 56 + i*13;
      const checked = i === 1;
      return (
        <g key={i}>
          <circle cx="32" cy={y} r="4"
            fill={checked ? "var(--lime)" : "transparent"}
            stroke={dark ? "rgba(255,255,255,0.35)" : "var(--paper-3)"} strokeWidth="1"/>
          {checked && <path d={`M ${30} ${y} L ${31.6} ${y+1.6} L ${34} ${y-1.6}`} stroke="var(--ink)" strokeWidth="1.2" fill="none" strokeLinecap="round"/>}
          <rect x="42" y={y-2.5} width={i===1 ? 110 : 90 + (i*7 % 24)} height="3.5" rx="1.5"
            fill={dark ? "rgba(255,255,255,0.32)" : "var(--paper-3)"}/>
        </g>
      );
    })}
  </svg>
);

const HubArt = () => {
  const center = { x: 100, y: 65 };
  const nodes = [
    { x: 40, y: 30, label: "BPC-157" },
    { x: 160, y: 30, label: "TB-500" },
    { x: 30, y: 100, label: "NAD+" },
    { x: 170, y: 100, label: "GHK-Cu" },
  ];
  return (
    <svg viewBox="0 0 200 130" width="100%" aria-hidden="true">
      {nodes.map((n, i) => (
        <line key={i} x1={center.x} y1={center.y} x2={n.x} y2={n.y}
          stroke="var(--paper-3)" strokeWidth="1" strokeDasharray="2 3"/>
      ))}
      {nodes.map((n, i) => (
        <g key={i}>
          <circle cx={n.x} cy={n.y} r="11" fill="white" stroke="var(--paper-3)" strokeWidth="1"/>
          <text x={n.x} y={n.y+1} textAnchor="middle"
            fontFamily="JetBrains Mono, monospace" fontSize="5.5" fontWeight="600" fill="var(--muted)">
            {n.label}
          </text>
        </g>
      ))}
      <circle cx={center.x} cy={center.y} r="22" fill="var(--lime)"/>
      <text x={center.x} y={center.y-2} textAnchor="middle"
        fontFamily="Archivo, sans-serif" fontSize="6.5" fontWeight="800" fill="var(--ink)" letterSpacing="0.05em">YOUR</text>
      <text x={center.x} y={center.y+6} textAnchor="middle"
        fontFamily="Archivo, sans-serif" fontSize="6.5" fontWeight="800" fill="var(--ink)" letterSpacing="0.05em">STACK</text>
    </svg>
  );
};

const RxArt = () => (
  <svg viewBox="0 0 200 130" width="100%" aria-hidden="true">
    <rect x="46" y="14" width="108" height="108" rx="6" fill="white" stroke="var(--paper-3)" strokeWidth="1"/>
    <text x="56" y="34" fontFamily="Archivo, serif" fontSize="14" fontWeight="800" fill="var(--ink)">℞</text>
    {[44, 52, 60, 68, 76].map((y, i) => (
      <rect key={y} x="56" y={y} width={i % 2 === 0 ? 80 : 64} height="2.5" rx="1" fill="var(--paper-3)"/>
    ))}
    <path d="M 56 96 Q 64 88 72 96 T 88 96 T 104 96 T 120 96"
      stroke="var(--lime-deep)" strokeWidth="1.4" fill="none" strokeLinecap="round"/>
    <line x1="56" y1="108" x2="144" y2="108" stroke="var(--paper-3)" strokeWidth="0.6"/>
    <text x="56" y="118" fontFamily="JetBrains Mono, monospace" fontSize="5" fill="var(--muted-2)" letterSpacing="0.1em">MD · LICENSED</text>
  </svg>
);

const ShipArt = () => (
  <svg viewBox="0 0 200 130" width="100%" aria-hidden="true">
    <path d="M 28 100 Q 100 18 172 60"
      stroke="var(--lime-deep)" strokeWidth="1" strokeDasharray="3 3" fill="none"/>
    <circle cx="28" cy="100" r="3" fill="var(--ink)"/>
    <circle cx="172" cy="60" r="3" fill="var(--lime-deep)"/>
    <g transform="translate(82 50)">
      <path d="M 0 12 L 18 0 L 36 12 L 36 36 L 18 48 L 0 36 Z" fill="white" stroke="var(--ink)" strokeWidth="1.3"/>
      <path d="M 0 12 L 18 24 L 36 12" fill="none" stroke="var(--ink)" strokeWidth="1.3"/>
      <line x1="18" y1="24" x2="18" y2="48" stroke="var(--ink)" strokeWidth="1.3"/>
      <line x1="6" y1="6" x2="24" y2="18" stroke="var(--lime-deep)" strokeWidth="1.3"/>
    </g>
    <rect x="74" y="106" width="52" height="14" rx="7" fill="var(--ink)"/>
    <text x="100" y="116" textAnchor="middle"
      fontFamily="JetBrains Mono, monospace" fontSize="6.5" fontWeight="600" fill="var(--lime)" letterSpacing="0.12em">ETA 48H</text>
  </svg>
);

/* ============ TESTIMONIALS / HOW IT WORKS ============ */
const HowItWorks = () => {
  const steps = [
    { n: "01", t: "Tell us your goal", d: "90 seconds. No medical jargon.",                   art: <QuizArt dark /> },
    { n: "02", t: "Get your match",   d: "We show you the peptide and why it fits.",          art: <HubArt /> },
    { n: "03", t: "A clinician reviews", d: "A real MD signs off after a quick consult.",     art: <RxArt /> },
    { n: "04", t: "It ships to you",  d: "48-hour express from a licensed U.S. pharmacy.",    art: <ShipArt /> },
  ];
  return (
    <section className="section" style={{ background: "var(--paper-2)" }}>
      <div className="container">
        <div style={{ textAlign: "center", marginBottom: 56 }}>
          <div className="eyebrow" style={{ marginBottom: 12 }}>★ HOW IT WORKS</div>
          <h2 className="display-lg">Four steps.<br />No clinic visit.</h2>
        </div>
        <div className="m-grid-4" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16 }}>
          {steps.map((s, i) => {
            const dark = i === 0;
            return (
              <div key={s.n} style={{
                padding: 24,
                background: dark ? "var(--ink)" : "white",
                color: dark ? "var(--paper)" : "var(--ink)",
                borderRadius: "var(--r-lg)",
                border: dark ? "1px solid var(--line)" : "1px solid var(--paper-3)",
                aspectRatio: "0.85 / 1",
                display: "flex",
                flexDirection: "column",
                justifyContent: "space-between",
                gap: 16,
              }}>
                <div className="mono" style={{ fontSize: 11, letterSpacing: "0.18em", color: dark ? "var(--lime)" : "var(--muted)" }}>{s.n} / 04</div>
                <div style={{ flex: 1, display: "grid", placeItems: "center", padding: "8px 4px" }}>
                  {s.art}
                </div>
                <div>
                  <h3 className="display-sm" style={{ marginBottom: 6 }}>{s.t}</h3>
                  <p style={{ fontSize: 13, opacity: dark ? 0.7 : 0.6, lineHeight: 1.5 }}>{s.d}</p>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
};

/* ============ FINAL 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 }}>
        <h2 style={{
          fontFamily: "var(--font-display)",
          fontWeight: 800,
          fontSize: "clamp(56px, 9vw, 140px)",
          lineHeight: 0.92,
          letterSpacing: "-0.04em",
          textTransform: "uppercase",
        }}>
          Pick one<br />
          thing to<br />
          fix first.
        </h2>
        <p style={{ marginTop: 24, fontSize: 18, lineHeight: 1.5, maxWidth: 540, fontWeight: 500 }}>
          Hair. Skin. Muscle. Fat loss. Mood. Pick the goal that's loudest right now — we'll show you the peptide that's been studied for it.
        </p>
        <div style={{ display: "flex", gap: 12, marginTop: 40, flexWrap: "wrap" }}>
          <a href="bioreveal.html" className="btn btn-dark btn-lg">Find my peptide →</a>
          <a href="learn.html" className="btn btn-ghost btn-lg">First, explain it to me</a>
        </div>
      </div>
    </div>
    {/* Giant offset star */}
    <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="home" />
    <Hero />
    <Marquee />
    <Categories />
    <StackCTA />
    <Protocols />
    <Science />
    <HowItWorks />
    <FinalCTA />
    <Footer />
  </>
);

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