/* Per-product (shop) page renderer.
 * Reads window.PRODUCT_SLUG → merges window.PEPTIDE_DB[slug] (educational data)
 * with window.SHOP_DB[slug] (sales-focused, unique copy per product).
 */

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_OPTIONS = [
  { qty: 1, label: "1-month",  multiplier: 1.0,  per_month_savings: 0,  badge: null },
  { qty: 3, label: "3-month",  multiplier: 2.7,  per_month_savings: 10, badge: "SAVE 10%" },
  { qty: 6, label: "6-month",  multiplier: 5.1,  per_month_savings: 15, badge: "BEST VALUE" },
];

function ProductPage() {
  const d = data;
  const [selected, setSelected] = React.useState(0);
  const opt = PRICING_OPTIONS[selected];
  const total = Math.round(d.price * opt.multiplier);
  const perMonth = Math.round(total / opt.qty);

  return (
    <div className="br-page">
      <Header active="shop"/>

      {/* HERO — image + buy box */}
      <section style={{ paddingTop: 56, paddingBottom: 56 }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "start" }} className="m-grid-2">
            {/* Product image */}
            <div style={{ background: "var(--paper-2)", borderRadius: 16, padding: 40, aspectRatio: "1 / 1.1", display: "grid", placeItems: "center", border: "1px solid var(--paper-3)", position: "relative" }}>
              <div style={{ position: "absolute", top: 18, left: 18, fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.18em", color: "var(--muted)", textTransform: "uppercase" }}>BATCH 26-A15 · 99.6% PURITY</div>
              <ProductShot product={d.name.replace(" / MIC","").replace(/\s+\(.+/,"")} chip={false}/>
              <div style={{ position: "absolute", bottom: 18, right: 18, background: "var(--ink)", color: "var(--paper)", padding: "5px 10px", borderRadius: 999, fontSize: 10, fontFamily: "var(--font-mono)", letterSpacing: "0.12em" }}>★ 250 SOLD TODAY</div>
            </div>

            {/* Buy box */}
            <div>
              <div className="eyebrow" style={{ marginBottom: 12 }}>★ {d.class_label.toUpperCase()}</div>
              <h1 style={{ fontFamily: "var(--font-display)", fontWeight: 900, fontSize: "clamp(44px, 5.5vw, 72px)", letterSpacing: "-0.04em", lineHeight: 0.95, margin: "0 0 14px" }}>{d.name}</h1>
              <p style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 22, color: "var(--ink)", marginTop: 0, marginBottom: 18, lineHeight: 1.3 }}>{d.hero_subtitle || d.tagline}</p>
              <p style={{ fontSize: 15, lineHeight: 1.6, color: "var(--muted)", marginTop: 0, marginBottom: 24 }}>{d.one_liner}</p>

              {/* Pricing tiles */}
              <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 8, marginBottom: 18 }}>
                {PRICING_OPTIONS.map((o, i) => {
                  const t = Math.round(d.price * o.multiplier);
                  const pm = Math.round(t / o.qty);
                  return (
                    <button key={i} onClick={() => setSelected(i)} style={{
                      background: selected === i ? "var(--ink)" : "var(--paper)",
                      color: selected === i ? "var(--paper)" : "var(--ink)",
                      border: selected === i ? "2px solid var(--ink)" : "1.5px solid var(--paper-3)",
                      borderRadius: 10, padding: "14px 12px", cursor: "pointer", textAlign: "left",
                      position: "relative", fontFamily: "inherit",
                    }}>
                      {o.badge && <span style={{ position: "absolute", top: -8, left: 12, background: "#E8B5A8", color: "#0A0A0A", padding: "2px 8px", borderRadius: 999, fontSize: 9, fontFamily: "var(--font-mono)", letterSpacing: "0.1em", fontWeight: 700 }}>{o.badge}</span>}
                      <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.12em", opacity: 0.7, marginBottom: 4 }}>{o.label.toUpperCase()}</div>
                      <div style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 22 }}>${pm}<span style={{ fontSize: 11, fontWeight: 400, opacity: 0.65 }}>/mo</span></div>
                      {o.qty > 1 && <div style={{ fontSize: 10, fontFamily: "var(--font-mono)", marginTop: 3, opacity: 0.6 }}>${t} TOTAL</div>}
                    </button>
                  );
                })}
              </div>

              <a href="/bioreveal.html" className="btn btn-dark btn-lg" style={{ width: "100%", textAlign: "center", justifyContent: "center", display: "inline-flex", alignItems: "center", gap: 8 }}>
                Start with my BioScan →
              </a>
              <div style={{ marginTop: 10, fontSize: 11, fontFamily: "var(--font-mono)", letterSpacing: "0.05em", color: "var(--muted)", textAlign: "center" }}>
                Includes free MD consult · Ships in 48h · 30-day money back
              </div>

              {/* Trust strip */}
              <div style={{ marginTop: 22, display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 8, paddingTop: 18, borderTop: "1px solid var(--paper-3)" }}>
                {[
                  ["MD-reviewed", "Every order"],
                  ["503B partner", "FDA-registered"],
                  ["Lab-tested", "COA per batch"],
                ].map(([t, s]) => (
                  <div key={t} style={{ textAlign: "center" }}>
                    <div style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 13 }}>{t}</div>
                    <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.06em", color: "var(--muted)", marginTop: 3, textTransform: "uppercase" }}>{s}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* THE PROBLEM — why you'd buy this */}
      {d.the_problem && (
        <section style={{ background: "var(--paper-2)", padding: "56px 0" }}>
          <div className="container" style={{ maxWidth: 760 }}>
            <div className="eyebrow" style={{ marginBottom: 12 }}>★ WHY YOU'RE HERE</div>
            <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 30, marginBottom: 18, letterSpacing: "-0.02em", lineHeight: 1.1 }}>You know the feeling.</h2>
            <p style={{ fontSize: 17, lineHeight: 1.7, marginBottom: 24, color: "var(--ink)" }}>{d.the_problem}</p>
            {d.the_promise && (
              <div style={{ background: "var(--paper)", borderLeft: "4px solid var(--ink)", padding: "18px 22px", borderRadius: 6 }}>
                <div className="eyebrow" style={{ marginBottom: 8 }}>★ WHAT TO EXPECT</div>
                <p style={{ fontSize: 16, lineHeight: 1.6, margin: 0 }}>{d.the_promise}</p>
              </div>
            )}
          </div>
        </section>
      )}

      {/* WHY BUY NOW */}
      {d.why_buy_now && (
        <section style={{ padding: "48px 0" }}>
          <div className="container" style={{ maxWidth: 760 }}>
            <div className="eyebrow" style={{ marginBottom: 12 }}>★ WHY US, WHY NOW</div>
            <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 28, marginBottom: 16, letterSpacing: "-0.02em", lineHeight: 1.1 }}>The honest answer.</h2>
            <p style={{ fontSize: 16, lineHeight: 1.7, color: "var(--ink)" }}>{d.why_buy_now}</p>
          </div>
        </section>
      )}

      {/* WHAT IT DOES — mechanism */}
      <section style={{ padding: "48px 0", background: "var(--paper-2)" }}>
        <div className="container" style={{ maxWidth: 760 }}>
          <div className="eyebrow" style={{ marginBottom: 12 }}>★ HOW IT ACTUALLY WORKS</div>
          <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 28, marginBottom: 18, letterSpacing: "-0.02em", lineHeight: 1.1 }}>The mechanism, in one paragraph.</h2>
          <p style={{ fontSize: 16, lineHeight: 1.7, marginBottom: 18 }}>{d.mechanism}</p>
          {d.indications && (
            <div style={{ marginTop: 24 }}>
              <div className="eyebrow" style={{ marginBottom: 10 }}>★ WHAT YOU'LL FEEL OR SEE</div>
              <ul style={{ listStyle: "none", padding: 0, margin: 0 }}>
                {d.indications.map((it, i) => (
                  <li key={i} style={{ display: "grid", gridTemplateColumns: "20px 1fr", gap: 10, fontSize: 15, lineHeight: 1.55, marginBottom: 8 }}>
                    <span style={{ color: "#10b981", fontWeight: 800 }}>✓</span>
                    <span>{it}</span>
                  </li>
                ))}
              </ul>
            </div>
          )}
        </div>
      </section>

      {/* HOW YOU USE IT — narrative steps (sales copy version) */}
      <section style={{ padding: "56px 0" }}>
        <div className="container" style={{ maxWidth: 920 }}>
          <div className="eyebrow" style={{ marginBottom: 12 }}>★ HOW YOU ACTUALLY USE IT</div>
          <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 30, marginBottom: 24, letterSpacing: "-0.02em", lineHeight: 1.1 }}>{d.how_you_use_it ? "Step-by-step. No guessing." : "Simple. Fits any routine."}</h2>
          <div style={{ display: "grid", gap: 14 }}>
            {(d.how_you_use_it || d.dose_ladder.map(dose => ({ step: dose.range, note: dose.note }))).map((s, i) => (
              <div key={i} style={{ display: "grid", gridTemplateColumns: "60px 1fr", gap: 18, padding: "20px 22px", background: "var(--paper-2)", borderRadius: 10 }}>
                <div style={{ fontFamily: "var(--font-display)", fontWeight: 900, fontSize: 36, color: "var(--ink)" }}>{String(i + 1).padStart(2, "0")}</div>
                <div>
                  <div style={{ fontWeight: 700, fontSize: 16, marginBottom: 4 }}>{s.step || s.range}</div>
                  <div style={{ fontSize: 14, color: "var(--muted)", lineHeight: 1.55 }}>{s.note}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* WHAT'S IN THE BOX — per-product custom */}
      <section style={{ padding: "32px 0 56px", background: "var(--paper-2)" }}>
        <div className="container" style={{ maxWidth: 920 }}>
          <div className="eyebrow" style={{ marginBottom: 12 }}>★ WHAT'S IN THE BOX</div>
          <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 30, marginBottom: 24, letterSpacing: "-0.02em", lineHeight: 1.1 }}>Everything you need.</h2>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))", gap: 14 }}>
            {(d.whats_in_the_box || [
              { item: "Vial of " + d.name, note: "30-day supply, batch-tested" },
              { item: "Insulin syringes (×30)", note: "Ultra-fine, 0.3mL" },
              { item: "Alcohol wipes (×60)", note: "Sterile" },
              { item: "Sharps container", note: "FDA-compliant disposal" },
              { item: "How-to guide", note: "Plain English, with photos" },
              { item: "MD consult booking", note: "Included free" },
            ]).map((b, i) => (
              <div key={i} style={{ background: "var(--paper)", border: "1px solid var(--paper-3)", borderRadius: 8, padding: "16px 18px" }}>
                <div style={{ fontWeight: 700, fontSize: 14, marginBottom: 4 }}>{b.item}</div>
                <div style={{ fontSize: 12, color: "var(--muted)", fontFamily: "var(--font-mono)", letterSpacing: "0.04em" }}>{b.note}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* TIMELINE */}
      <section style={{ padding: "56px 0" }}>
        <div className="container" style={{ maxWidth: 920 }}>
          <div className="eyebrow" style={{ marginBottom: 12 }}>★ TIMELINE</div>
          <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 30, marginBottom: 24, letterSpacing: "-0.02em", lineHeight: 1.1 }}>What you'll feel, week by week.</h2>
          <div className="br-timeline">
            {d.timeline.map((r, i) => (
              <div key={i} className="br-tl-row">
                <div className="br-tl-week">{r.wk}</div>
                <div className="br-tl-text"><span style={{ fontSize: 15, lineHeight: 1.6 }}>{r.what}</span></div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* SIDE EFFECTS — be honest */}
      <section style={{ padding: "32px 0 56px", background: "var(--paper-2)" }}>
        <div className="container" style={{ maxWidth: 920 }}>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(320px, 1fr))", gap: 36 }}>
            <div>
              <div className="eyebrow" style={{ marginBottom: 12 }}>★ SIDE EFFECTS · HONEST</div>
              <ul style={{ listStyle: "none", padding: 0, margin: 0 }}>
                {d.side_effects.map((s, i) => (
                  <li key={i} style={{ fontSize: 14, lineHeight: 1.55, marginBottom: 8, paddingLeft: 14, position: "relative" }}>
                    <span style={{ position: "absolute", left: 0, color: "var(--muted)" }}>·</span>{s}
                  </li>
                ))}
              </ul>
            </div>
            <div>
              <div className="eyebrow" style={{ marginBottom: 12, color: "#dc2626" }}>★ NOT FOR YOU IF</div>
              <ul style={{ listStyle: "none", padding: 0, margin: 0 }}>
                {d.not_for.map((s, i) => (
                  <li key={i} style={{ display: "grid", gridTemplateColumns: "20px 1fr", gap: 10, fontSize: 14, lineHeight: 1.55, marginBottom: 8 }}>
                    <span style={{ color: "#dc2626", fontWeight: 800 }}>×</span>
                    <span>{s}</span>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section style={{ padding: "56px 0" }}>
        <div className="container" style={{ maxWidth: 760 }}>
          <div className="eyebrow" style={{ marginBottom: 12 }}>★ FAQ</div>
          <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 30, marginBottom: 22, letterSpacing: "-0.02em", lineHeight: 1.1 }}>The questions we hear most.</h2>
          <div style={{ display: "grid", gap: 14 }}>
            {d.faq.map((f, i) => (
              <details key={i} style={{ background: "var(--paper-2)", borderRadius: 10, padding: "16px 22px", cursor: "pointer" }}>
                <summary style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 16, listStyle: "none" }}>{f.q}</summary>
                <p style={{ fontSize: 14, lineHeight: 1.6, marginTop: 10, marginBottom: 0, color: "var(--ink)" }}>{f.a}</p>
              </details>
            ))}
          </div>
          <div style={{ marginTop: 18, fontSize: 12, color: "var(--muted)" }}>
            Have a question we didn't answer? <a href="#" style={{ color: "var(--ink)" }}>Ask the AI on your BioScan reveal page →</a>
          </div>
        </div>
      </section>

      {/* CUSTOMER REVIEW — per-product */}
      {d.review && (
        <section style={{ padding: "56px 0", background: "#1a1a1a", color: "#fff" }}>
          <div className="container" style={{ maxWidth: 760 }}>
            <div className="eyebrow" style={{ marginBottom: 14, color: "#888" }}>★ FROM SOMEONE WHO USES IT</div>
            <p style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 24, lineHeight: 1.45, marginTop: 0, marginBottom: 22, color: "#fff" }}>"{d.review.quote}"</p>
            <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
              <div style={{ width: 48, height: 48, borderRadius: "50%", background: "var(--lime, #E8B5A8)", color: "#0A0A0A", display: "grid", placeItems: "center", fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 18 }}>{d.review.name[0]}</div>
              <div>
                <div style={{ fontWeight: 700, fontSize: 15 }}>{d.review.name}</div>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.06em", color: "rgba(255,255,255,0.55)" }}>AGE {d.review.age} · {d.review.location.toUpperCase()}</div>
              </div>
            </div>
            <div style={{ marginTop: 18, fontSize: 10, fontFamily: "var(--font-mono)", letterSpacing: "0.05em", color: "rgba(255,255,255,0.4)" }}>
              ⓘ COMPOSITE PREVIEW — replace with consented patient story before launch.
            </div>
          </div>
        </section>
      )}

      {/* CTA */}
      <section className="br-final-cta">
        <div className="container">
          <h2>Start your {d.name} protocol.</h2>
          <div className="br-final-price">
            {opt.label} · ${perMonth}<small>/mo</small>
            {opt.qty > 1 && <span style={{ fontSize: 14, opacity: 0.7, marginLeft: 8 }}>(${total} total)</span>}
          </div>
          <div className="br-final-buttons">
            <a href="/bioreveal.html" className="btn btn-dark btn-lg">Start with my BioScan →</a>
            <a href={`/peptides/${d.slug}.html`} className="btn btn-ghost btn-lg">Read the deep dive</a>
          </div>
          <div className="br-disclaimer">
            Compounded peptides are not FDA-approved for these indications. Every order is reviewed by a licensed US clinician before fulfillment. 30-day money-back guarantee. RX only · 21+ · US only.
          </div>
        </div>
      </section>

      <Footer/>
    </div>
  );
}

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