/* Shop product page — Vercel-style hero + tabs layout.
 * Reads window.PRODUCT_SLUG → merges window.PEPTIDE_DB[slug] + window.SHOP_DB[slug].
 * Per-peptide accent color from window.PEPTIDE_ACCENTS.
 * Pulls window.PROTOCOL_DB to derive "Pairs well with" recommendations.
 */

const slug = window.PRODUCT_SLUG;
const peptideData = window.PEPTIDE_DB[slug];
const shopData = (window.SHOP_DB || {})[slug] || {};
const data = { ...peptideData, ...shopData };
if (!peptideData) {
  document.getElementById("root").innerHTML =
    '<div style="padding: 60px; text-align: center; font-family: system-ui;"><h1>Product not found</h1><p>Slug: ' + slug + '</p><a href="/shop.html">Back to shop</a></div>';
}

const PRICING_TIERS = [
  { qty: 1, label: "1 month",  multiplier: 1.0, savings: 0,  badge: null },
  { qty: 3, label: "3 months", multiplier: 2.7, savings: 10, badge: "SAVE 10%" },
  { qty: 6, label: "6 months", multiplier: 5.1, savings: 15, badge: "BEST VALUE" },
];

const SLUG_TO_NAME = {
  "sermorelin": "Sermorelin", "nad-plus": "NAD+", "bpc-157": "BPC-157",
  "ipamorelin": "Ipamorelin", "ghk-cu": "GHK-Cu", "glutathione": "Glutathione",
  "selank": "Selank", "dsip": "DSIP", "b12-mic": "B12 / MIC", "cjc-1295": "CJC-1295",
};
const NAME_TO_SLUG = Object.fromEntries(Object.entries(SLUG_TO_NAME).map(([k, v]) => [v, k]));

// Derive "pairs well with" from PROTOCOL_DB:
// any peptide that appears alongside this one in any protocol, ranked by frequency.
function getPairings(currentSlug) {
  const protocols = window.PROTOCOL_DB || {};
  const counts = {};
  const protocolNames = {};
  Object.values(protocols).forEach(p => {
    const slugs = (p.stack || []).map(name => NAME_TO_SLUG[name]).filter(Boolean);
    if (!slugs.includes(currentSlug)) return;
    slugs.forEach(s => {
      if (s === currentSlug) return;
      counts[s] = (counts[s] || 0) + 1;
      protocolNames[s] = [...(protocolNames[s] || []), p.name];
    });
  });
  return Object.entries(counts)
    .sort((a, b) => b[1] - a[1])
    .slice(0, 3)
    .map(([s, n]) => ({ slug: s, name: SLUG_TO_NAME[s], count: n, protocols: protocolNames[s] }));
}

/* ============ STAR ICON ============ */
const StarIcon = ({ size = 14, color = "currentColor" }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill={color}>
    <path d="M12 0 L13.6 9.4 L24 12 L13.6 14.6 L12 24 L10.4 14.6 L0 12 L10.4 9.4 Z"/>
  </svg>
);

/* ============ HERO ============ */
const Hero = ({ d, accent }) => {
  const [tier, setTier] = React.useState(0);
  const [subscribe, setSubscribe] = React.useState(true);
  const [view, setView] = React.useState(0);
  const opt = PRICING_TIERS[tier];
  const baseTotal = Math.round(d.price * opt.multiplier);
  const total = subscribe ? Math.round(baseTotal * 0.85) : baseTotal;
  const perMonth = Math.round(total / opt.qty);

  // Per-product palette (real product photo on colored backdrop) — pulled from brand.jsx PRODUCT_PALETTES
  const pal = (window.PRODUCT_PALETTES || {})[d.name] || {};
  // 3 thumbnail variants — same vial photo, slightly different backdrops
  const stageVariants = [
    { bg: pal.bg, label: "★ BATCH 26-A15" },
    { bg: pal.cap || pal.bg, label: "WITH CARTON" },
    { bg: "#1a1a1a", label: "LYO · STERILE", dark: true },
  ];
  const v = stageVariants[view];

  return (
    <section className="shop-hero">
      <div className="container" style={{ maxWidth: 1180 }}>
        {/* Breadcrumb */}
        <div className="shop-breadcrumb">
          <a href="/shop.html">SHOP</a>
          <span className="sep">/</span>
          <span className="current">{d.name}</span>
        </div>

        <div className="shop-hero-grid">
          {/* LEFT: real product shot */}
          <div>
            <div className="shop-stage" style={{ background: v.bg, position: "relative" }}>
              <div className="shop-stage-batch" style={{ color: v.dark ? "rgba(255,255,255,0.7)" : "rgba(0,0,0,0.7)" }}>{v.label}</div>
              <img src="/assets/vial.png" alt={`${d.name} vial`} className="shop-stage-photo" style={{ filter: v.dark ? "drop-shadow(0 24px 36px rgba(0,0,0,0.5))" : "drop-shadow(0 24px 36px rgba(0,0,0,0.22))" }}/>
              {/* Color-tinted overlay matching cap so each peptide reads visually distinct */}
              <div className="shop-stage-tint" style={{ background: `radial-gradient(ellipse at 50% 30%, ${pal.tint || "rgba(0,0,0,0.05)"} 0%, transparent 65%)` }}/>
              <div className="shop-stage-product-name" style={{ color: v.dark ? "rgba(255,255,255,0.7)" : "rgba(0,0,0,0.65)" }}>{d.name}</div>
              <div className="shop-stage-purity" style={{ color: v.dark ? "var(--paper)" : "var(--ink)" }}>
                <div className="shop-stage-purity-label">Purity</div>
                <div className="shop-stage-purity-val">99.6<span>%</span></div>
              </div>
            </div>
            {/* Thumbs */}
            <div className="shop-thumbs">
              {stageVariants.map((vv, i) => (
                <button key={i} onClick={() => setView(i)} className="shop-thumb" style={{
                  background: vv.bg,
                  borderColor: view === i ? "var(--ink)" : "var(--paper-3)",
                  borderWidth: view === i ? 2 : 1,
                  position: "relative",
                  overflow: "hidden",
                }}>
                  <img src="/assets/vial.png" alt="" style={{ width: "70%", height: "80%", objectFit: "contain", filter: vv.dark ? "drop-shadow(0 6px 8px rgba(0,0,0,0.5))" : "drop-shadow(0 6px 8px rgba(0,0,0,0.2))" }}/>
                </button>
              ))}
            </div>
          </div>

          {/* RIGHT: buy box */}
          <div className="shop-buybox">
            <div className="shop-chips">
              <span className="shop-chip shop-chip-accent" style={{ background: accent, color: "#fff" }}>★ MOST POPULAR</span>
              <span className="shop-chip">RX</span>
              <span className="shop-chip">{(d.class_label || "").split("(")[0].trim().toUpperCase()}</span>
            </div>

            <h1 className="shop-title">{d.name}</h1>
            <div className="shop-class">{d.class_label}</div>
            <p className="shop-tagline">{d.hero_subtitle || d.tagline}</p>

            <div className="shop-rating">
              <div className="shop-rating-stars" style={{ color: accent }}>
                {[1,2,3,4,5].map(i => <StarIcon key={i} size={14} color="currentColor"/>)}
              </div>
              <span className="shop-rating-num">4.9</span>
              <span className="shop-rating-count">{(1200 + (d.price * 7)).toLocaleString()} verified reviews</span>
            </div>

            <p className="shop-short">{d.one_liner}</p>

            {/* Pricing tier picker */}
            <div className="shop-section-label">How long you'll order</div>
            <div className="shop-tiers">
              {PRICING_TIERS.map((o, i) => {
                const t = subscribe ? Math.round(d.price * o.multiplier * 0.85) : Math.round(d.price * o.multiplier);
                const pm = Math.round(t / o.qty);
                return (
                  <button key={i} onClick={() => setTier(i)} className="shop-tier" style={{
                    borderColor: tier === i ? "var(--ink)" : "var(--paper-3)",
                    borderWidth: tier === i ? 2 : 1,
                    background: tier === i ? "var(--ink)" : "var(--paper)",
                    color: tier === i ? "var(--paper)" : "var(--ink)",
                  }}>
                    {o.badge && <span className="shop-tier-badge" style={{ background: accent, color: "#fff" }}>{o.badge}</span>}
                    <div className="shop-tier-label">{o.label.toUpperCase()}</div>
                    <div className="shop-tier-pm">${pm}<span>/mo</span></div>
                    {o.qty > 1 && <div className="shop-tier-total">${t} TOTAL</div>}
                  </button>
                );
              })}
            </div>

            {/* Subscribe banner */}
            <button className="shop-subscribe" onClick={() => setSubscribe(s => !s)} style={{ background: subscribe ? "var(--ink)" : "var(--paper-2)", color: subscribe ? "var(--paper)" : "var(--ink)", borderColor: subscribe ? "var(--ink)" : "var(--paper-3)" }}>
              <div>
                <div className="shop-subscribe-eyebrow" style={{ color: subscribe ? accent : "var(--muted)" }}>
                  <StarIcon size={11} color="currentColor"/>
                  <span>SUBSCRIBE & SAVE 15%</span>
                </div>
                <div className="shop-subscribe-sub" style={{ opacity: subscribe ? 0.75 : 0.65 }}>Auto-ship monthly. Pause or cancel anytime.</div>
              </div>
              <div className="shop-toggle" style={{ background: subscribe ? accent : "var(--paper-3)" }}>
                <div className="shop-toggle-knob" style={{ left: subscribe ? "calc(100% - 22px)" : 2, background: subscribe ? "var(--paper)" : "var(--ink)" }}/>
              </div>
            </button>

            {/* Price + CTA */}
            <div className="shop-price-row">
              <div>
                <div className="shop-price">
                  ${perMonth}<span className="shop-price-mo">/mo</span>
                  {subscribe && <span className="shop-price-strike">${Math.round(d.price * opt.multiplier / opt.qty)}</span>}
                </div>
                <div className="shop-price-meta">{(d.dose_ladder?.[0]?.range || "").replace(/^Start:\s*/, "")} · per shipment</div>
              </div>
            </div>

            <a href="/bioreveal.html?start=1" className="btn btn-dark btn-lg shop-cta-primary">Start consultation →</a>
            <a href="/learn.html" className="btn btn-ghost btn-lg shop-cta-ghost">First, explain it to me</a>

            <div className="shop-trust">
              <StarIcon size={14} color="var(--ink)"/>
              <div>A real U.S. clinician reviews your medical history before anything ships. 15-min online consult. From a 503A licensed pharmacy in 48 hours after approval.</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

/* ============ TABS ============ */
const Tabs = ({ d, accent }) => {
  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 className="shop-tabs-section">
      <div className="container" style={{ maxWidth: 1180 }}>
        <div className="shop-tabs-strip">
          {tabs.map(t => (
            <button key={t.id} onClick={() => setTab(t.id)} className="shop-tab" style={{
              borderTopColor: tab === t.id ? accent : "transparent",
              color: tab === t.id ? "var(--ink)" : "var(--muted)",
              fontWeight: tab === t.id ? 700 : 500,
            }}>
              {t.label}
            </button>
          ))}
        </div>
        <div className="shop-tab-body">
          {tab === "what"    && <WhatTab d={d} accent={accent}/>}
          {tab === "how"     && <HowTab d={d} accent={accent}/>}
          {tab === "pairs"   && <PairsTab d={d} accent={accent}/>}
          {tab === "science" && <ScienceTab d={d} accent={accent}/>}
          {tab === "faq"     && <FAQTab d={d} accent={accent}/>}
        </div>
      </div>
    </section>
  );
};

/* ─────────────────────────  WHAT IT DOES  ───────────────────────── */

const WhatTab = ({ d, accent }) => {
  // Split each indication on em-dash into title + desc; benefits cap at 4
  const benefits = (d.indications || []).slice(0, 4).map(it => {
    const parts = it.split(/—|–|-\s/);
    return parts.length > 1
      ? { title: parts[0].trim(), desc: parts.slice(1).join(" — ").trim() }
      : { title: it, desc: "" };
  });
  const ICONS = ["✿", "❋", "★", "▲"];

  return (
    <div className="shop-tab-grid">
      <div>
        <div className="eyebrow" style={{ marginBottom: 14 }}>★ WHAT IT DOES</div>
        <h2 className="shop-tab-h2">It's not a drug — it's a signal your body forgot how to send.</h2>
        <p className="shop-tab-p">{d.mechanism}</p>
        {d.the_promise && (
          <div className="shop-promise" style={{ borderLeftColor: accent }}>
            <div className="eyebrow" style={{ marginBottom: 8, color: accent }}>★ WHAT TO EXPECT</div>
            <p style={{ fontSize: 16, lineHeight: 1.6, margin: 0, color: "var(--ink)" }}>{d.the_promise}</p>
          </div>
        )}
        <div className="shop-benefits">
          {benefits.map((b, i) => (
            <div key={i} className="shop-benefit">
              <div className="shop-benefit-icon" style={{ background: accent, color: "#fff" }}>{ICONS[i % ICONS.length]}</div>
              <div>
                <div className="shop-benefit-title">{b.title}</div>
                {b.desc && <div className="shop-benefit-desc">{b.desc}</div>}
              </div>
            </div>
          ))}
        </div>
      </div>
      <PathwayDiagram d={d} accent={accent}/>
    </div>
  );
};

const PathwayDiagram = ({ d, accent }) => {
  const Glyph = window.PEPTIDE_GLYPH;
  const outcomes = (d.indications || []).slice(0, 3).map(it => {
    const t = it.split(/—|–|-\s/)[0].trim();
    return t.length > 28 ? t.slice(0, 26) + "…" : t;
  });

  return (
    <div className="shop-pathway">
      <div className="shop-pathway-eyebrow" style={{ color: accent }}>
        ★ WHAT {d.name.toUpperCase()} DOES IN YOUR BODY
      </div>
      <div className="shop-pathway-glyph" style={{ background: `radial-gradient(circle at center, ${accent}30 0%, transparent 70%)` }}>
        {Glyph && <Glyph slug={d.slug} color={accent} size={140}/>}
      </div>
      <div className="shop-pathway-name">{d.name}</div>
      <div className="shop-pathway-class" style={{ color: accent }}>{(d.class_label || "").split("(")[0].trim()}</div>

      <div className="shop-pathway-arrows">
        <svg width="100%" height="48" viewBox="0 0 300 48" preserveAspectRatio="none" fill="none" aria-hidden="true">
          <path d="M 50 4 L 50 30 M 150 4 L 150 30 M 250 4 L 250 30" stroke={accent} strokeWidth="1.5" strokeDasharray="3 4" opacity="0.7"/>
          <path d="M 46 24 L 50 30 L 54 24 M 146 24 L 150 30 L 154 24 M 246 24 L 250 30 L 254 24" stroke={accent} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      </div>

      <div className="shop-pathway-outcomes">
        {outcomes.map((o, i) => (
          <div key={i} className="shop-pathway-outcome">
            <div className="shop-pathway-outcome-num" style={{ color: accent }}>{String(i + 1).padStart(2, "0")}</div>
            <div className="shop-pathway-outcome-label">{o}</div>
          </div>
        ))}
      </div>

      <div className="shop-pathway-caption">
        Average outcomes from {d.evidence?.length ? `${d.evidence.length}+ peer-reviewed studies` : "decades of clinical research"}.
      </div>
    </div>
  );
};

/* ─────────────────────────  HOW YOU USE IT  ───────────────────────── */

const HowTab = ({ d, accent }) => {
  const steps = d.how_you_use_it || (d.dose_ladder || []).map(dose => ({ step: dose.range, note: dose.note }));
  return (
    <div className="shop-tab-grid-flip">
      <div>
        <div className="eyebrow" style={{ marginBottom: 14 }}>★ HOW YOU USE IT</div>
        <h2 className="shop-tab-h2">Simple, daily, no guesswork.</h2>
        <p className="shop-tab-p" style={{ marginBottom: 28 }}>Your prescriber sets the exact dose for you. The numbers below are typical starting points.</p>
        <div className="shop-how-list">
          {steps.map((s, i) => (
            <div key={i} className="shop-how-step">
              <div className="shop-how-num" style={{ color: accent }}>{String(i + 1).padStart(2, "0")}</div>
              <div>
                <div className="shop-how-step-title">{s.step || s.range}</div>
                <div className="shop-how-step-note">{s.note}</div>
              </div>
            </div>
          ))}
        </div>
        {d.whats_in_the_box && (
          <div className="shop-box-card" style={{ borderLeftColor: accent }}>
            <div className="eyebrow" style={{ marginBottom: 12 }}>★ WHAT SHIPS IN THE BOX</div>
            <div className="shop-box-grid">
              {d.whats_in_the_box.map((b, i) => (
                <div key={i} className="shop-box-item">
                  <span className="shop-box-dot" style={{ background: accent }}/>
                  <div>
                    <div className="shop-box-item-name">{b.item}</div>
                    <div className="shop-box-item-note">{b.note}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}
      </div>
      <ShopTimeline d={d} accent={accent}/>
    </div>
  );
};

const ShopTimeline = ({ d, accent }) => (
  <div className="shop-timeline-card">
    <div className="eyebrow" style={{ marginBottom: 14 }}>★ WHAT TO EXPECT</div>
    <h3 className="shop-timeline-h3">Week by week.</h3>
    <div className="shop-timeline-list">
      {d.timeline.map((r, i) => (
        <div key={i} className="shop-timeline-row">
          <div className="shop-timeline-week" style={{ color: accent }}>{r.wk}</div>
          <div className="shop-timeline-rail">
            <div className="shop-timeline-dot" style={{ background: i === 0 ? accent : "var(--ink)", boxShadow: i === 0 ? `0 0 0 5px ${accent}33` : "none" }}/>
            {i < d.timeline.length - 1 && <div className="shop-timeline-line"/>}
          </div>
          <div className="shop-timeline-text">{r.what}</div>
        </div>
      ))}
    </div>
  </div>
);

/* ─────────────────────────  PAIRS WELL WITH  ───────────────────────── */

const PairsTab = ({ d, accent }) => {
  const pairs = getPairings(d.slug);
  const PALETTES = window.PRODUCT_PALETTES || {};
  const ACCENTS = window.PEPTIDE_ACCENTS || {};

  return (
    <div>
      <div className="eyebrow" style={{ marginBottom: 14 }}>★ PAIRS WELL WITH</div>
      <h2 className="shop-tab-h2">Want to go further? These work alongside {d.name}.</h2>
      <p className="shop-tab-p" style={{ maxWidth: 600 }}>
        You don't need them — {d.name} does plenty on its own. These are the most common stack-mates we prescribe and what they add.
      </p>
      {pairs.length === 0 ? (
        <div className="shop-empty">
          <p>{d.name} stands alone — your prescriber will add things based on your goals from the BioReveal.</p>
          <a href="/bioreveal.html?start=1" className="btn btn-dark btn-lg" style={{ marginTop: 20 }}>Start the BioReveal →</a>
        </div>
      ) : (
        <div className="shop-pairs-grid">
          {pairs.map(p => {
            const pAccent = ACCENTS[p.slug] || "#6b6b6b";
            const pData = window.PEPTIDE_DB[p.slug];
            const pPal = PALETTES[p.name] || {};
            const inProtocols = p.protocols.length;
            const matchPct = Math.min(96, 70 + p.count * 8);
            return (
              <a key={p.slug} href={`/shop/${p.slug}.html`} className="shop-pair-card">
                <div className="shop-pair-glyph" style={{ background: pPal.bg || `${pAccent}26`, position: "relative", overflow: "hidden" }}>
                  <img src="/assets/vial.png" alt={`${p.name} vial`} style={{ width: "62%", height: "82%", objectFit: "contain", filter: "drop-shadow(0 12px 18px rgba(0,0,0,0.22))" }}/>
                  <div style={{ position: "absolute", inset: 0, background: `radial-gradient(ellipse at 50% 30%, ${pPal.tint || "rgba(0,0,0,0.04)"} 0%, transparent 65%)`, pointerEvents: "none" }}/>
                  <div className="shop-pair-match" style={{ background: pAccent, color: "#fff" }}>{matchPct}% match</div>
                </div>
                <div className="shop-pair-body">
                  <div className="shop-pair-class">{(pData?.class_label || "").split("(")[0].trim()}</div>
                  <h3 className="shop-pair-name">{p.name}</h3>
                  <p className="shop-pair-desc">{pData?.tagline || pData?.one_liner?.split(".")[0] + "."}</p>
                  <div className="shop-pair-meta">
                    <span className="shop-pair-meta-label">Stacked in</span>
                    <span className="shop-pair-meta-val">{inProtocols} protocol{inProtocols === 1 ? "" : "s"}</span>
                  </div>
                </div>
                <div className="shop-pair-foot">
                  <span className="shop-pair-price">${pData?.price}<span style={{ opacity: 0.5 }}>/mo</span></span>
                  <span className="shop-pair-cta">View →</span>
                </div>
              </a>
            );
          })}
        </div>
      )}
    </div>
  );
};

/* ─────────────────────────  THE SCIENCE  ───────────────────────── */

const ScienceTab = ({ d, accent }) => {
  const stats = [
    { v: `${d.evidence?.length || 0}+`, l: "Cited studies" },
    { v: (d.fda_status || "").match(/\d{4}/)?.[0] || "—", l: "Year established" },
    { v: d.half_life ? d.half_life.split(/[\s—]/)[0] : "—", l: "Half-life" },
    { v: "99.6%", l: "Avg lot purity" },
  ];

  return (
    <div>
      <div className="eyebrow" style={{ marginBottom: 14 }}>★ THE SCIENCE</div>
      <h2 className="shop-tab-h2">For when you want the receipts.</h2>
      <p className="shop-tab-p" style={{ maxWidth: 600 }}>
        {d.fda_status}
      </p>

      <div className="shop-stats-grid">
        {stats.map(s => (
          <div key={s.l} className="shop-stat-card">
            <div className="shop-stat-val" style={{ color: accent }}>{s.v}</div>
            <div className="shop-stat-label">{s.l}</div>
          </div>
        ))}
      </div>

      <div className="shop-cite-list">
        {(d.evidence || []).map((e, i) => (
          <div key={i} className="shop-cite-card" style={{ borderLeftColor: accent }}>
            <div className="shop-cite-num" style={{ color: accent }}>{String(i + 1).padStart(2, "0")}</div>
            <div className="shop-cite-body">
              <div className="shop-cite-meta">{e.cite}</div>
              <div className="shop-cite-note">{e.note}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

/* ─────────────────────────  FAQ  ───────────────────────── */

const FAQItem = ({ q, a, accent, initialOpen }) => {
  const [open, setOpen] = React.useState(initialOpen);
  return (
    <div className="shop-faq-item" style={{ borderColor: open ? accent : "var(--paper-3)" }}>
      <button onClick={() => setOpen(!open)} className="shop-faq-q">
        <span>{q}</span>
        <span className="shop-faq-toggle" style={{ background: open ? accent : "var(--paper-2)", color: open ? "#fff" : "var(--ink)" }}>{open ? "−" : "+"}</span>
      </button>
      {open && <div className="shop-faq-a">{a}</div>}
    </div>
  );
};

const FAQTab = ({ d, accent }) => {
  const faqs = d.faq || peptideData?.faq || [];
  return (
    <div style={{ maxWidth: 820 }}>
      <div className="eyebrow" style={{ marginBottom: 14 }}>★ QUESTIONS</div>
      <h2 className="shop-tab-h2">The ones we get most.</h2>
      <div className="shop-faq-list">
        {faqs.map((f, i) => (
          <FAQItem key={i} q={f.q} a={f.a} accent={accent} initialOpen={i === 0}/>
        ))}
      </div>
    </div>
  );
};

/* ─────────────────────────  REVIEW (if present)  ───────────────────────── */

const ReviewSection = ({ d, accent }) => {
  if (!d.review) return null;
  return (
    <section className="shop-review">
      <div className="container" style={{ maxWidth: 920 }}>
        <div className="shop-review-card" style={{ borderColor: accent + "55", background: `linear-gradient(165deg, ${accent}10 0%, ${accent}03 100%)` }}>
          <div className="shop-review-stars" style={{ color: accent }}>
            {[1,2,3,4,5].map(i => <StarIcon key={i} size={16} color="currentColor"/>)}
          </div>
          <p className="shop-review-quote">"{d.review.quote}"</p>
          <div className="shop-review-meta">
            — {d.review.name}, {d.review.age} · {d.review.location}
          </div>
        </div>
      </div>
    </section>
  );
};

/* ─────────────────────────  FINAL CTA  ───────────────────────── */

const FinalCTA = ({ d, accent }) => (
  <section className="shop-final-cta">
    <div className="container" style={{ maxWidth: 1080 }}>
      <div className="shop-final-grid">
        <div>
          <div className="eyebrow" style={{ marginBottom: 16, color: accent }}>★ NOT SURE YET?</div>
          <h2 className="shop-final-h2">Is {d.name}<br/>right for you?</h2>
          <p className="shop-final-p">
            Take the 4-minute BioReveal. Tell us what you want to fix. We'll tell you whether {d.name} is the right starting point — or point you to a different peptide that fits better.
          </p>
        </div>
        <div className="shop-final-buttons">
          <a href="/bioreveal.html?start=1" className="btn btn-lg" style={{ background: accent, color: "#fff", borderColor: accent }}>Find my peptide →</a>
          <a href="/learn.html" className="btn btn-ghost-light btn-lg">Learn the basics first</a>
        </div>
      </div>
    </div>
  </section>
);

/* ─────────────────────────  PAGE  ───────────────────────── */

function ProductPage() {
  const d = data;
  const accent = (window.PEPTIDE_ACCENTS || {})[d.slug] || "#6b6b6b";

  return (
    <div className="br-page shop-page" style={{ "--shop-accent": accent }}>
      <Header active="shop"/>
      <Hero d={d} accent={accent}/>
      <Tabs d={d} accent={accent}/>
      <ReviewSection d={d} accent={accent}/>
      <FinalCTA d={d} accent={accent}/>
      <Footer/>
    </div>
  );
}

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