// Product Detail — GHK-Cu

const PRODUCT = {
  code: "GHK-Cu",
  name: "GHK-Cu",
  fullName: "Copper peptide",
  category: "Hair & Skin",
  color: "#E8C4B8",
  tagline: "Tells your skin and scalp to act 25 again.",
  price: 129,
  doseSize: "50mg / 60-day supply",
  rating: 4.94,
  reviews: 2103,
  short: "GHK-Cu is a tiny piece of protein your body already makes — until you hit your 30s, when production drops by half. Replacing it has been studied for 40+ years. Result: thicker hair, firmer skin, faster wound healing.",
  benefits: [
    { icon: "✿", title: "Skin firms up",       desc: "Wakes up the cells that make collagen. Skin gets thicker, smoother, more even." },
    { icon: "❋", title: "Hair gets thicker",   desc: "Wakes up sleeping follicles. New hairs come in thicker than the ones that fell out." },
    { icon: "★", title: "Redness drops",       desc: "Calms inflammation in the skin. Less rosacea. Less sensitivity." },
    { icon: "▲", title: "Wounds heal faster",  desc: "Speeds up the cells that close cuts and fade scars." },
  ],
  mechanism: "Your skin and scalp are full of cells called fibroblasts — they make collagen, which is what keeps you looking young. As you age, those cells slow down. GHK-Cu is the signal that wakes them back up. Think of it as a 'reset button' for the cells that gave you 25-year-old skin and hair.",
  protocol: {
    standard: "Topical: apply daily. Injectable: 1–2mg, 3× per week.",
    cycle: "Topical: continuous, no break needed. Injectable: 8–12 weeks on, then re-evaluate.",
    timing: "Topical: morning or night on clean skin. Injectable: any time of day.",
    onset: "Glow + softer skin: 2–3 weeks. Hair density + firmness: 8–12 weeks.",
  },
  studies: 200,
  halfLife: "Topical: stays in skin. Injectable: ~6 hours.",
};

const FAQ = [
  ["Is GHK-Cu safe?", "Yes — and it's one of the most-studied peptides in the world. Over 200 published papers since the 1970s. Your body already makes it; we're just replacing what you stopped producing. Topical use has essentially zero side effects in the literature. Injectable is well-tolerated too; the most common issue is mild redness at the injection site."],
  ["Topical or injection — which should I get?", "Most people start topical. Easier, no needles, and it works great for skin and scalp. Injection sends GHK-Cu through your whole system, so it does more — skin, hair, wound healing, lung repair, anti-aging at the cellular level. Your clinician will help you pick based on your goals."],
  ["How fast will I see something?", "Glow and softer skin: 2–3 weeks. Visible firmness, fewer fine lines, thicker hair: 8–12 weeks. Be patient — you're regrowing tissue, not painting it on."],
  ["Can I use it with retinol or vitamin C?", "Yes. GHK-Cu plays well with retinol, vitamin C, niacinamide, and most actives. Apply GHK first on clean skin, wait 2 minutes, then layer the rest."],
  ["Will it work for male-pattern baldness?", "GHK-Cu helps follicles that are still alive but underperforming. It works best when paired with something like minoxidil or PTD-DBM for advanced thinning. We'll talk through the right combo on your consult."],
];

/* ============ PAGE ============ */
const Hero = () => (
  <section style={{ background: "var(--paper)", paddingTop: 32, paddingBottom: 80 }}>
    <div className="container">
      {/* Breadcrumb */}
      <div className="mono" style={{ fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--muted)", marginBottom: 32 }}>
        <a href="index.html" style={{ color: "var(--muted)" }}>SHOP</a>
        <span style={{ margin: "0 8px" }}>/</span>
        <a href="shop.html?cat=skin" style={{ color: "var(--muted)" }}>HAIR & SKIN</a>
        <span style={{ margin: "0 8px" }}>/</span>
        <span style={{ color: "var(--ink)" }}>GHK-Cu</span>
      </div>

      <div className="m-grid-2" style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 64 }}>
        {/* Image stage */}
        <ProductStage />
        {/* Buy box */}
        <BuyBox />
      </div>
    </div>
  </section>
);

const ProductStage = () => {
  const [view, setView] = React.useState(0);
  const views = [
    { bg: "#E8C4B8", cap: "#FF8FB1", tint: "rgba(232,196,184,0.45)", product: "GHK-Cu", badge: "● BATCH 26-G07" },
    { bg: "#D9B0A2", cap: "#FF8FB1", tint: "rgba(198,255,61,0.18)",  product: "GHK-Cu", badge: "WITH CARTON" },
    { bg: "#C29A8C", cap: "#FF8FB1", tint: "rgba(255,255,255,0.10)", product: "GHK-Cu", badge: "LYO · STERILE" },
  ];
  const v = views[view];
  return (
    <div>
      <div style={{ position: "relative" }}>
        <ProductShot bg={v.bg} cap={v.cap} tint={v.tint} product={v.product} badge={v.badge} />
        <div style={{ position: "absolute", bottom: 20, right: 20, color: "white", textAlign: "right" }}>
          <div className="mono" style={{ fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", opacity: 0.8 }}>Purity</div>
          <div style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 36, letterSpacing: "-0.02em", lineHeight: 1 }}>
            99.6<span style={{ fontSize: 18, opacity: 0.8 }}>%</span>
          </div>
        </div>
      </div>
      {/* Thumbs */}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 12, marginTop: 12 }}>
        {views.map((vv, i) => (
          <button key={i} onClick={() => setView(i)} style={{
            aspectRatio: "1/1",
            border: view === i ? "2px solid var(--ink)" : "1px solid var(--paper-3)",
            borderRadius: "var(--r-md)",
            padding: 0,
            overflow: "hidden",
            cursor: "pointer",
          }}>
            <ProductShot bg={vv.bg} cap={vv.cap} tint={vv.tint} product={vv.product} chip={false} />
          </button>
        ))}
      </div>
    </div>
  );
};

const BuyBox = () => {
  const [qty, setQty] = React.useState(1);
  const [option, setOption] = React.useState("topical");
  return (
    <div style={{ paddingTop: 8 }}>
      <div style={{ display: "flex", gap: 8, marginBottom: 16 }}>
        <span className="chip" style={{ background: "var(--lime)" }}>★ MOST POPULAR</span>
        <span className="chip">RX</span>
        <span className="chip">HAIR · SKIN</span>
      </div>
      <h1 className="display-lg" style={{ marginBottom: 8 }}>GHK-Cu</h1>
      <div className="mono" style={{ fontSize: 12, letterSpacing: "0.1em", color: "var(--muted)", marginBottom: 8, textTransform: "uppercase" }}>
        Copper peptide
      </div>
      <p style={{ fontSize: 18, fontWeight: 600, color: "var(--ink)", marginBottom: 20, lineHeight: 1.4 }}>
        {PRODUCT.tagline}
      </p>
      <div style={{ display: "flex", gap: 16, alignItems: "center", marginBottom: 24 }}>
        <div style={{ display: "flex", gap: 2 }}>
          {[1,2,3,4,5].map(i => <Star key={i} size={14} color="var(--lime-deep)" />)}
        </div>
        <span style={{ fontSize: 14, fontWeight: 600 }}>{PRODUCT.rating}</span>
        <span style={{ fontSize: 13, color: "var(--muted)" }}>{PRODUCT.reviews.toLocaleString()} verified reviews</span>
      </div>
      <p style={{ fontSize: 16, lineHeight: 1.6, color: "var(--muted)", marginBottom: 32 }}>
        {PRODUCT.short}
      </p>

      {/* Option picker */}
      <div className="mono" style={{ fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--muted)", marginBottom: 10 }}>
        How you'll use it
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8, marginBottom: 24 }}>
        {[
          { id: "topical",      label: "Topical serum", sub: "Skin + scalp" },
          { id: "subcutaneous", label: "Injection",     sub: "Whole-body effect" },
        ].map(o => (
          <button key={o.id} onClick={() => setOption(o.id)} style={{
            padding: 16,
            textAlign: "left",
            border: option === o.id ? "2px solid var(--ink)" : "1px solid var(--paper-3)",
            background: option === o.id ? "var(--paper-2)" : "white",
            borderRadius: "var(--r-md)",
          }}>
            <div style={{ fontWeight: 600, fontSize: 14 }}>{o.label}</div>
            <div className="mono" style={{ fontSize: 10, letterSpacing: "0.08em", color: "var(--muted)", marginTop: 2, textTransform: "uppercase" }}>{o.sub}</div>
          </button>
        ))}
      </div>

      {/* Subscription tier */}
      <div style={{ background: "var(--ink)", color: "var(--paper)", padding: 20, borderRadius: "var(--r-md)", marginBottom: 24, display: "grid", gridTemplateColumns: "1fr auto", gap: 16, alignItems: "center" }}>
        <div>
          <div style={{ display: "flex", gap: 8, alignItems: "center", marginBottom: 4 }}>
            <Star size={14} color="var(--lime)" />
            <span className="mono" style={{ fontSize: 11, letterSpacing: "0.12em", color: "var(--lime)", textTransform: "uppercase" }}>Subscribe & save 15%</span>
          </div>
          <div style={{ fontSize: 13, opacity: 0.7 }}>Auto-ship monthly. Pause or cancel anytime.</div>
        </div>
        <div style={{ width: 36, height: 20, background: "var(--lime)", borderRadius: 999, position: "relative" }}>
          <div style={{ position: "absolute", right: 2, top: 2, width: 16, height: 16, background: "var(--ink)", borderRadius: "50%" }}/>
        </div>
      </div>

      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", marginBottom: 16 }}>
        <div>
          <div style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 44, letterSpacing: "-0.03em", lineHeight: 1 }}>
            ${(PRODUCT.price * 0.85).toFixed(0)}
            <span style={{ fontSize: 16, fontWeight: 500, color: "var(--muted)", marginLeft: 8, textDecoration: "line-through" }}>${PRODUCT.price}</span>
          </div>
          <div className="mono" style={{ fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--muted)", marginTop: 6 }}>
            {PRODUCT.doseSize} · ~$1.80/day
          </div>
        </div>
        <div style={{ display: "flex", gap: 8, alignItems: "center", border: "1px solid var(--paper-3)", borderRadius: 999, padding: "4px 4px 4px 16px" }}>
          <span style={{ fontWeight: 600, fontSize: 14 }}>QTY</span>
          <button onClick={() => setQty(Math.max(1, qty - 1))} style={{ width: 32, height: 32, borderRadius: "50%", background: "var(--paper-2)" }}>−</button>
          <span style={{ minWidth: 24, textAlign: "center", fontWeight: 600 }}>{qty}</span>
          <button onClick={() => setQty(qty + 1)} style={{ width: 32, height: 32, borderRadius: "50%", background: "var(--paper-2)" }}>+</button>
        </div>
      </div>

      <a href="bioreveal.html" className="btn btn-primary btn-lg" style={{ width: "100%", justifyContent: "center", marginBottom: 10 }}>
        Start consultation →
      </a>
      <a href="learn.html" className="btn btn-ghost btn-lg" style={{ width: "100%", justifyContent: "center" }}>
        First, explain it to me
      </a>

      <div style={{ marginTop: 24, padding: 16, background: "var(--paper-2)", borderRadius: "var(--r-md)", display: "flex", gap: 12, alignItems: "start" }}>
        <Star size={16} color="var(--ink)" />
        <div style={{ fontSize: 13, lineHeight: 1.6, color: "var(--muted)" }}>
          A real U.S. clinician reviews your medical history before anything ships. 15-minute online consult. From a 503A licensed pharmacy in 48 hours after approval.
        </div>
      </div>
    </div>
  );
};

/* ============ TABS ============ */
const Tabs = () => {
  const [tab, setTab] = React.useState("what");
  const tabs = [
    { id: "what",     label: "What it does" },
    { id: "how",      label: "How you use it" },
    { id: "pairs",    label: "Pairs well with" },
    { id: "science",  label: "The science" },
    { id: "faq",      label: "Questions" },
  ];
  return (
    <section style={{ background: "var(--paper)", paddingBottom: 80 }}>
      <div className="container">
        <div style={{ borderTop: "1px solid var(--paper-3)", display: "flex", gap: 0, flexWrap: "wrap" }}>
          {tabs.map(t => (
            <button key={t.id} onClick={() => setTab(t.id)} style={{
              padding: "20px 24px",
              borderTop: tab === t.id ? "2px solid var(--ink)" : "2px solid transparent",
              marginTop: -1,
              fontWeight: tab === t.id ? 700 : 500,
              fontSize: 14,
              color: tab === t.id ? "var(--ink)" : "var(--muted)",
              fontFamily: "var(--font-display)",
              letterSpacing: "0.02em",
              textTransform: "uppercase",
            }}>
              {t.label}
            </button>
          ))}
        </div>
        <div style={{ paddingTop: 48 }}>
          {tab === "what"    && <WhatTab />}
          {tab === "how"     && <HowTab />}
          {tab === "pairs"   && <PairsTab />}
          {tab === "science" && <ScienceTab />}
          {tab === "faq"     && <FAQTab />}
        </div>
      </div>
    </section>
  );
};

const WhatTab = () => (
  <div className="m-grid-2" style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 64 }}>
    <div>
      <div className="eyebrow" style={{ marginBottom: 12 }}>★ WHAT IT DOES</div>
      <h2 className="display-md" style={{ marginBottom: 24 }}>It's not a drug. It's a signal your body forgot how to send.</h2>
      <p style={{ fontSize: 16, lineHeight: 1.7, color: "var(--muted)", marginBottom: 32 }}>
        {PRODUCT.mechanism}
      </p>
      <div style={{ display: "grid", gap: 16 }}>
        {PRODUCT.benefits.map(b => (
          <div key={b.title} style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: 16, padding: 20, background: "var(--paper-2)", borderRadius: "var(--r-md)" }}>
            <div style={{ width: 36, height: 36, background: "var(--lime)", color: "var(--ink)", display: "grid", placeItems: "center", borderRadius: 8, fontSize: 20, fontWeight: 800 }}>
              {b.icon}
            </div>
            <div>
              <div style={{ fontWeight: 600, fontSize: 15 }}>{b.title}</div>
              <div style={{ fontSize: 14, color: "var(--muted)", marginTop: 4 }}>{b.desc}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
    <PathwayDiagram />
  </div>
);

const PathwayDiagram = () => (
  <div style={{ background: "var(--ink)", color: "var(--paper)", borderRadius: "var(--r-xl)", padding: 32, alignSelf: "start", position: "sticky", top: 96 }}>
    <div className="mono" style={{ color: "var(--lime)", fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase", marginBottom: 24 }}>
      ★ WHAT GHK-Cu DOES IN YOUR CELLS
    </div>
    <svg viewBox="0 0 360 380" width="100%">
      {/* GHK node */}
      <g>
        <rect x="130" y="20" width="100" height="40" rx="6" fill="var(--lime)" />
        <text x="180" y="44" textAnchor="middle" fontFamily="Archivo" fontSize="14" fontWeight="800" fill="#0a0a0a">GHK-Cu</text>
      </g>
      {/* Arrows */}
      {[
        { x1: 160, y1: 60, x2: 70,  y2: 130 },
        { x1: 180, y1: 60, x2: 180, y2: 130 },
        { x1: 200, y1: 60, x2: 290, y2: 130 },
      ].map((l, i) => (
        <line key={i} {...l} stroke="rgba(198,255,61,0.5)" strokeWidth="1.5" markerEnd="url(#arr)" />
      ))}
      <defs>
        <marker id="arr" markerWidth="6" markerHeight="6" refX="3" refY="3" orient="auto">
          <path d="M0,0 L6,3 L0,6 z" fill="rgba(198,255,61,0.7)" />
        </marker>
      </defs>
      {/* Mid nodes */}
      {[
        { x: 30,  y: 130, w: 80, label: "WAKES UP", sub: "COLLAGEN CELLS" },
        { x: 140, y: 130, w: 80, label: "WAKES UP", sub: "HAIR FOLLICLES" },
        { x: 250, y: 130, w: 80, label: "CALMS",    sub: "INFLAMMATION" },
      ].map((n, i) => (
        <g key={i}>
          <rect x={n.x} y={n.y} width={n.w} height="36" rx="4" fill="var(--ink-2)" stroke="rgba(198,255,61,0.3)" />
          <text x={n.x + n.w/2} y={n.y + 16} textAnchor="middle" fontFamily="Archivo" fontSize="11" fontWeight="700" fill="var(--lime)">{n.label}</text>
          <text x={n.x + n.w/2} y={n.y + 28} textAnchor="middle" fontFamily="JetBrains Mono" fontSize="8" fill="rgba(255,255,255,0.5)">{n.sub}</text>
        </g>
      ))}
      {/* Down arrows */}
      {[70, 180, 290].map((x, i) => (
        <line key={i} x1={x} y1="170" x2={x} y2="220" stroke="rgba(198,255,61,0.5)" strokeWidth="1.5" markerEnd="url(#arr)" />
      ))}
      {/* Outcomes */}
      {[
        { x: 30,  y: 220, label: "Firmer skin",  val: "+70%" },
        { x: 140, y: 220, label: "Hair density", val: "+62%" },
        { x: 250, y: 220, label: "Wound healing",val: "+38%" },
      ].map((n, i) => (
        <g key={i}>
          <rect x={n.x} y={n.y} width="80" height="60" rx="6" fill="rgba(255,255,255,0.04)" stroke="rgba(255,255,255,0.1)" />
          <text x={n.x + 40} y={n.y + 24} textAnchor="middle" fontFamily="Archivo" fontSize="18" fontWeight="800" fill="var(--lime)">{n.val}</text>
          <text x={n.x + 40} y={n.y + 44} textAnchor="middle" fontFamily="Inter" fontSize="9" fill="rgba(255,255,255,0.6)">{n.label}</text>
        </g>
      ))}
      {/* Caption */}
      <text x="180" y="320" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="9" fill="rgba(255,255,255,0.4)" letterSpacing="0.15em">
        AVERAGE OUTCOMES, 8–12 WEEKS, FROM
      </text>
      <text x="180" y="340" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="9" fill="rgba(255,255,255,0.4)" letterSpacing="0.15em">
        200+ STUDIES SINCE 1973
      </text>
    </svg>
  </div>
);

const HowTab = () => (
  <div className="m-grid-2" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48 }}>
    <div>
      <div className="eyebrow" style={{ marginBottom: 12 }}>★ HOW YOU USE IT</div>
      <h2 className="display-md" style={{ marginBottom: 32 }}>Simple. Daily. No needles required (unless you want them).</h2>
      <div style={{ display: "grid", gap: 16 }}>
        {[
          ["How much",      PRODUCT.protocol.standard],
          ["How long",      PRODUCT.protocol.cycle],
          ["When",          PRODUCT.protocol.timing],
          ["When you'll see it", PRODUCT.protocol.onset],
          ["How long it lasts", PRODUCT.halfLife],
          ["Storage",       "Fridge (35–46°F). Stays good for 30 days once mixed."],
        ].map(([k, v]) => (
          <div key={k} style={{ display: "grid", gridTemplateColumns: "180px 1fr", gap: 16, paddingBottom: 16, borderBottom: "1px solid var(--paper-3)" }}>
            <div className="mono" style={{ fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--muted)" }}>{k}</div>
            <div style={{ fontWeight: 500, fontSize: 15 }}>{v}</div>
          </div>
        ))}
      </div>
      <p style={{ marginTop: 24, fontSize: 13, color: "var(--muted)", lineHeight: 1.5 }}>
        Your clinician will tweak the exact amount based on your goal, age, and skin or hair history. The numbers above are the typical starting point.
      </p>
    </div>
    <Timeline />
  </div>
);

const Timeline = () => (
  <div style={{ background: "var(--paper-2)", borderRadius: "var(--r-xl)", padding: 32 }}>
    <div className="eyebrow" style={{ marginBottom: 12 }}>★ WHAT TO EXPECT</div>
    <h3 className="display-sm" style={{ marginBottom: 32 }}>Week by week.</h3>
    <div style={{ display: "grid", gap: 0, position: "relative" }}>
      {[
        { week: "WEEK 1–2", title: "Get into the routine", desc: "Apply daily (or inject 3×/wk). Skin starts to feel softer. Nothing dramatic yet — that's normal." },
        { week: "WEEK 3–4", title: "Glow + tone",          desc: "Skin looks brighter and more even. Less redness. Tiny bumps and irritation calm down." },
        { week: "WEEK 5–8", title: "Firmness + hair",      desc: "New hairs that fell out start regrowing — thicker than before. Fine lines start to soften." },
        { week: "WEEK 9+",  title: "Keep going",           desc: "This is where the deeper changes show. Hair is visibly fuller. Skin holds itself differently." },
      ].map((p, i) => (
        <div key={i} style={{ display: "grid", gridTemplateColumns: "100px 24px 1fr", gap: 16, paddingBottom: 24, position: "relative" }}>
          <div className="mono" style={{ fontSize: 10, letterSpacing: "0.15em", color: "var(--muted)", textTransform: "uppercase", paddingTop: 4 }}>{p.week}</div>
          <div style={{ position: "relative" }}>
            <div style={{ width: 12, height: 12, borderRadius: "50%", background: i === 1 ? "var(--lime)" : "var(--ink)", marginTop: 6 }}/>
            {i < 3 && <div style={{ position: "absolute", top: 18, left: 5, width: 2, height: "calc(100% + 12px)", background: "var(--paper-3)" }}/>}
          </div>
          <div>
            <div style={{ fontWeight: 600, fontSize: 15 }}>{p.title}</div>
            <div style={{ fontSize: 13, color: "var(--muted)", marginTop: 4 }}>{p.desc}</div>
          </div>
        </div>
      ))}
    </div>
  </div>
);

const PairsTab = () => (
  <div>
    <div className="eyebrow" style={{ marginBottom: 12 }}>★ PAIRS WELL WITH</div>
    <h2 className="display-md" style={{ marginBottom: 8 }}>Want to go further? These work alongside GHK-Cu.</h2>
    <p style={{ fontSize: 16, color: "var(--muted)", marginBottom: 32, maxWidth: 540 }}>
      You don't need them — GHK-Cu does plenty on its own. But these are the most common add-ons and what they add:
    </p>
    <div className="m-grid-3" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }}>
      {[
        { name: "BPC-157",    desc: "Heals scars, stretch marks, and skin damage even faster. Great for post-acne or post-procedure.", match: "92%" },
        { name: "Epitalon",   desc: "Anti-aging from the inside — sleep, telomeres, hormones. Pairs with GHK for a full youth signal.",  match: "84%" },
        { name: "Sermorelin", desc: "Asks your body to make more growth hormone naturally. Compounds the firming and hair effects.",     match: "76%" },
      ].map(s => (
        <div key={s.name} style={{ background: "white", border: "1px solid var(--paper-3)", borderRadius: "var(--r-lg)", padding: 24 }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "start", marginBottom: 16 }}>
            <div style={{ width: 80, aspectRatio: "0.85/1", borderRadius: 8, overflow: "hidden" }}>
              {(() => {
                const pal = getPalette(s.name);
                return <ProductShot bg={pal.bg} cap={pal.cap} tint={pal.tint} product={s.name} chip={false} />;
              })()}
            </div>
            <span className="chip chip-lime">{s.match} match</span>
          </div>
          <h3 className="display-sm" style={{ marginBottom: 8 }}>{s.name}</h3>
          <p style={{ fontSize: 13, color: "var(--muted)", lineHeight: 1.5, marginBottom: 16 }}>{s.desc}</p>
          <a href="#" className="btn btn-sm btn-ghost" style={{ width: "100%", justifyContent: "center" }}>Learn more →</a>
        </div>
      ))}
    </div>
  </div>
);

const ScienceTab = () => (
  <div>
    <div className="eyebrow" style={{ marginBottom: 12 }}>★ THE SCIENCE</div>
    <h2 className="display-md" style={{ marginBottom: 8 }}>For when you want the receipts.</h2>
    <p style={{ fontSize: 16, color: "var(--muted)", marginBottom: 32, maxWidth: 540 }}>
      GHK-Cu was discovered in 1973 by Dr. Loren Pickart. It's been studied in everything from wound healing to gene expression. Here's the short version.
    </p>
    <div className="m-tabs-strip" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16, marginBottom: 32 }}>
      {[
        { v: "200+", l: "Published studies" },
        { v: "1973", l: "Year discovered" },
        { v: "40+",  l: "Years studied in humans" },
        { v: "99.6%",l: "Avg lot purity" },
      ].map(s => (
        <div key={s.l} style={{ background: "var(--ink)", color: "var(--paper)", padding: 24, borderRadius: "var(--r-md)" }}>
          <div style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 40, letterSpacing: "-0.03em", color: "var(--lime)" }}>{s.v}</div>
          <div className="mono" style={{ fontSize: 10, letterSpacing: "0.12em", textTransform: "uppercase", marginTop: 6, opacity: 0.7 }}>{s.l}</div>
        </div>
      ))}
    </div>
    <div style={{ display: "grid", gap: 12 }}>
      {[
        ["Pickart L., Margolina A.",  "GHK peptide — anti-aging effects on skin",       "Int J Mol Sci, 2018"],
        ["Pickart L., et al.",        "GHK and DNA: resetting the gene expression",     "BioMed Res Int, 2014"],
        ["Trumbore M., et al.",       "GHK-Cu on hair follicle proliferation",          "FASEB J, 1993"],
        ["Pickart L.",                "The human tri-peptide GHK and tissue remodeling","J Biomater Sci Polym Ed, 2008"],
      ].map(([a, t, j]) => (
        <div key={t} style={{ display: "grid", gridTemplateColumns: "200px 1fr 240px auto", gap: 16, padding: 16, border: "1px solid var(--paper-3)", borderRadius: "var(--r-md)", alignItems: "center" }}>
          <div className="mono" style={{ fontSize: 11, color: "var(--muted)", letterSpacing: "0.05em" }}>{a}</div>
          <div style={{ fontWeight: 500, fontSize: 14 }}>{t}</div>
          <div className="mono" style={{ fontSize: 11, color: "var(--muted)", letterSpacing: "0.05em" }}>{j}</div>
          <button className="btn btn-sm btn-ghost">View →</button>
        </div>
      ))}
    </div>
  </div>
);

const FAQTab = () => (
  <div style={{ maxWidth: 760 }}>
    <div className="eyebrow" style={{ marginBottom: 12 }}>★ QUESTIONS</div>
    <h2 className="display-md" style={{ marginBottom: 32 }}>The ones we get most.</h2>
    <div style={{ display: "grid", gap: 0 }}>
      {FAQ.map(([q, a], i) => <FAQItem key={i} q={q} a={a} initialOpen={i === 0} />)}
    </div>
  </div>
);

const FAQItem = ({ q, a, initialOpen }) => {
  const [open, setOpen] = React.useState(initialOpen);
  return (
    <div style={{ borderTop: "1px solid var(--paper-3)" }}>
      <button onClick={() => setOpen(!open)} style={{
        width: "100%", padding: "24px 0", display: "grid", gridTemplateColumns: "1fr auto", alignItems: "center", textAlign: "left", gap: 16,
      }}>
        <span style={{ fontWeight: 600, fontSize: 18, fontFamily: "var(--font-display)" }}>{q}</span>
        <span style={{
          width: 32, height: 32, borderRadius: "50%", background: open ? "var(--lime)" : "var(--paper-2)", display: "grid", placeItems: "center", color: "var(--ink)", fontWeight: 700,
        }}>{open ? "−" : "+"}</span>
      </button>
      {open && <p style={{ fontSize: 15, color: "var(--muted)", lineHeight: 1.6, paddingBottom: 24, maxWidth: 640 }}>{a}</p>}
    </div>
  );
};

/* ============ FINAL CTA ============ */
const FinalCTA = () => (
  <section style={{ background: "var(--ink)", color: "var(--paper)", padding: "96px 0" }}>
    <div className="container m-protocol-card" style={{ display: "grid", gridTemplateColumns: "1fr auto", gap: 32, alignItems: "center" }}>
      <div>
        <div className="mono" style={{ color: "var(--lime)", fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase", marginBottom: 16 }}>★ NOT SURE YET?</div>
        <h2 className="display-lg">Is GHK-Cu<br />right for you?</h2>
        <p style={{ fontSize: 17, color: "var(--muted-2)", marginTop: 16, maxWidth: 540 }}>
          Take the 90-second quiz. Tell us what you're trying to fix. We'll tell you whether GHK-Cu is the right starting point — or point you to a different peptide that fits better.
        </p>
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
        <a href="bioreveal.html" className="btn btn-primary btn-lg">Find my peptide →</a>
        <a href="learn.html" className="btn btn-ghost-light btn-lg">Learn the basics first</a>
      </div>
    </div>
  </section>
);

const App = () => (
  <>
    <Header active="science" />
    <Hero />
    <Tabs />
    <FinalCTA />
    <Footer />
  </>
);

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