// Page components — clinical light theme
const { useEffect: useEffectP, useState: useStateP, useRef: useRefP, useMemo: useMemoP } = React;

// Simple line icons (stroke-based, inherit currentColor)
const Icons = {
  flask: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <path d="M9 3h6M10 3v6.3L4.8 18a2 2 0 0 0 1.8 3h10.8a2 2 0 0 0 1.8-3L14 9.3V3" />
      <path d="M7.5 14h9" />
    </svg>
  ),
  shield: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 3l7 3v5c0 4.5-3 8.5-7 10-4-1.5-7-5.5-7-10V6l7-3z" />
      <path d="M9 12l2 2 4-4" />
    </svg>
  ),
  truck: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <path d="M3 7h11v9H3zM14 10h4l3 3v3h-7" />
      <circle cx="7" cy="18" r="1.8" /><circle cx="17.5" cy="18" r="1.8" />
    </svg>
  ),
  doc: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <path d="M7 3h7l4 4v14H7z" /><path d="M14 3v4h4" /><path d="M10 12h6M10 16h6" />
    </svg>
  ),
};

function Hero({ variant = "split" }) {
  if (variant === "centered") return <HeroCentered />;
  return <HeroSplit />;
}

function HeroSplit() {
  const featured = window.PRODUCTS.slice(0, 3);
  return (
    <section className="hero" data-screen-label="Home hero">
      <div className="hero-grid-bg"></div>
      <div className="hero-split-inner">
        <div className="hero-copy">
          <div className="hero-badge"><span className="status-dot"></span> Premium Research Peptides</div>
          <h1 className="hero-title">
            <span className="line"><span className="word">Verified peptides for</span></span>
            <span className="line"><span className="word">serious <span className="accent">research.</span></span></span>
          </h1>
          <p className="hero-sub">High-purity research compounds — sourced and shipped with care. Order through the cart and we'll follow up by email with payment options.</p>
          <div className="hero-cta">
            <a href="/shop" className="btn btn-primary"><span>Shop All Peptides</span><span className="arrow">→</span></a>
            <a href="/newsletter" className="btn btn-ghost"><span>Join the Newsletter</span></a>
          </div>
          <div className="trust-row">
            <span className="trust-item"><span className="trust-check">✓</span> Fast discreet shipping</span>
            <span className="trust-item"><span className="trust-check">✓</span> Simple email ordering</span>
            <span className="trust-item"><span className="trust-check">✓</span> Weekly newsletter</span>
          </div>
        </div>
        <div className="hero-visual">
          <div className="hero-blob"></div>
          <div className="hero-deco" style={{ top: "4%", right: "2%" }}><Molecule size={150} speed={26} /></div>
          <div className="hero-deco" style={{ bottom: "0%", left: "0%" }}><Torus size={170} speed={36} /></div>
          <div className="hero-vial-stack">
            {["semaglutide", "tirzepatide", "retatrutide"].map((id) => {
              const p = window.PRODUCTS.find(x => x.id === id);
              return <PhotoVial key={id} name={p.name} mass={p.dose} width={132} />;
            })}
          </div>
        </div>
      </div>
    </section>
  );
}

function HeroCentered() {
  const featured = window.PRODUCTS.slice(0, 4);
  return (
    <section className="hero" data-screen-label="Home hero">
      <div className="hero-grid-bg"></div>
      <div className="hero-centered-inner">
        <div className="hero-badge"><span className="status-dot"></span> Premium Research Peptides</div>
        <h1 className="hero-title">
          <span className="line"><span className="word">Verified peptides for</span></span>
          <span className="line"><span className="word">serious <span className="accent">research.</span></span></span>
        </h1>
        <p className="hero-sub">High-purity research compounds — sourced and shipped with care. Order through the cart and we'll follow up by email with payment options.</p>
        <div className="hero-cta">
          <a href="/shop" className="btn btn-primary"><span>Shop All Peptides</span><span className="arrow">→</span></a>
          <a href="/newsletter" className="btn btn-ghost"><span>Join the Newsletter</span></a>
        </div>
        <div className="trust-row">
          <span className="trust-item"><span className="trust-check">✓</span> Fast discreet shipping</span>
          <span className="trust-item"><span className="trust-check">✓</span> Simple email ordering</span>
        </div>
        <div className="hero-centered-vials">
          {featured.map((p) => (
            <PhotoVial key={p.id} name={p.name} mass={p.dose} width={108} />
          ))}
        </div>
      </div>
    </section>
  );
}

// Category icons — stroke style matching the why-card icons
const CatIcons = {
  "Weight Loss": (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <path d="M5 4h14a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1z" />
      <path d="M8 4c0 2.5 1.8 4.5 4 4.5S16 6.5 16 4" />
      <path d="M12 8.5v2.5" />
    </svg>
  ),
  "Healing & Energy": (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <path d="M13 2L5 13h5l-1 9 8-11h-5l1-9z" />
    </svg>
  ),
  "GH Class": (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <path d="M4 20h16" /><path d="M5 20V12M10 20V8M15 20V11M20 20V5" /><path d="M16 5h4v4" />
    </svg>
  ),
  "Sexual Health": (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 20s-7-4.5-9-9c-1.2-2.8.4-6 3.5-6C8.5 5 10.5 6 12 8c1.5-2 3.5-3 5.5-3 3.1 0 4.7 3.2 3.5 6-2 4.5-9 9-9 9z" />
      <path d="M7 12h3l1.5-2.5L13 13l1.5-1h2.5" />
    </svg>
  ),
  "Skin & Tan": (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="12" r="4" />
      <path d="M12 2v2.5M12 19.5V22M2 12h2.5M19.5 12H22M4.9 4.9l1.8 1.8M17.3 17.3l1.8 1.8M19.1 4.9l-1.8 1.8M6.7 17.3l-1.8 1.8" />
    </svg>
  ),
  "Nootropics": (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 4a4 4 0 0 0-4 4 3.5 3.5 0 0 0-2.5 5.9A3.4 3.4 0 0 0 8 19.5c.8 0 1.6-.3 2.2-.8.5.8 1.2 1.3 1.8 1.3s1.3-.5 1.8-1.3c.6.5 1.4.8 2.2.8a3.4 3.4 0 0 0 2.5-5.6A3.5 3.5 0 0 0 16 8a4 4 0 0 0-4-4z" />
      <path d="M12 4v16M8.5 11h7" />
    </svg>
  ),
  "Immunity": (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 3l7 3v5c0 4.5-3 8.5-7 10-4-1.5-7-5.5-7-10V6l7-3z" />
      <path d="M12 8v6M9 11h6" />
    </svg>
  ),
  "Bio-Regulators": (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <path d="M7 3c0 4 10 6 10 10M7 11c0 4 10 6 10 10M7 3c0 4 10 6 10 10M17 3c0 4-10 6-10 10M17 11c0 4-10 6-10 10" />
      <path d="M8.5 5.5h7M8.5 18.5h7" />
    </svg>
  ),
  "Supplies": (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <path d="M19 5l-1.5-1.5M21 7l-3.5-3.5M18 6l-9.5 9.5a2 2 0 0 0-.5 1l-.5 2.5a.5.5 0 0 0 .6.6l2.5-.5a2 2 0 0 0 1-.5L21 9" />
      <path d="M13 8l3 3" />
    </svg>
  ),
};

// Shop by category — full-bleed photo tiles
const __res = window.__resources || {};
const CAT_IMAGES = {
  "Weight Loss": __res.catWeightLoss || "/assets/catv2-weight-loss.png",
  "Healing & Energy": __res.catHealing || "/assets/catv2-healing.png",
  "GH Class": __res.catGhClass || "/assets/catv2-gh-class.png",
  "Sexual Health": __res.catSexual || "/assets/catv2-sexual.png",
  "Skin & Tan": __res.catSkinTan || "/assets/catv2-skin-tan.png",
  "Nootropics": __res.catNootropics || "/assets/catv2-nootropics.png",
  "Immunity": __res.catImmunity || "/assets/catv2-immunity.png",
  "Bio-Regulators": __res.catBioReg || "/assets/catv2-bio-reg.png",
  "Supplies": __res.catSupplies || "/assets/catv2-supplies.png",
};

function CategoryRow() {
  const cats = window.CATEGORIES.filter(c => c !== "All").map(c => ({
    name: c,
    count: window.PRODUCTS.filter(p => p.category === c).length,
  }));
  return (
    <section className="section" data-screen-label="Categories">
      <div className="section-head">
        <div>
          <div className="section-eyebrow">Browse the catalog</div>
          <h2 className="section-title">Shop by category</h2>
          <p className="section-sub">Research peptides organized by function and application.</p>
        </div>
        <a href="/shop" className="section-link">View all products →</a>
      </div>
      <div className="cat-grid">
        {cats.map((c, i) => (
          <Reveal key={c.name} delay={i * 50}>
            <a className="cat-card" href={`/shop/${window.CAT_SLUG(c.name)}`}>
              <img className="cat-card-img" src={CAT_IMAGES[c.name]} alt={`${c.name} research peptides`} draggable={false} />
              <div className="cat-card-overlay">
                <div className="cat-card-name">{c.name}</div>
                <div className="cat-card-count">{c.count} compounds</div>
              </div>
              <div className="cat-card-arrow">→</div>
            </a>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

// Featured strip
function FeaturedRow() {
  const ids = ["semaglutide", "tirzepatide", "retatrutide", "bpc-157", "wolverine", "tb-500", "nad", "glow"];
  const featured = ids.map(id => window.PRODUCTS.find(p => p.id === id)).filter(Boolean);
  return (
    <section className="section featured" data-screen-label="Featured products">
      <div className="section-head">
        <div>
          <div className="section-eyebrow">Top of the bench</div>
          <h2 className="section-title">Featured peptides</h2>
          <p className="section-sub">Best-selling research compounds, ready to ship.</p>
        </div>
        <a href="/shop" className="section-link">View all {window.PRODUCTS.length} →</a>
      </div>
      <div className="product-grid">
        {featured.map((p, i) => <Reveal key={p.id} delay={i * 50}><ProductCard p={p} /></Reveal>)}
      </div>
    </section>
  );
}

// Stats strip (navy band)
function StatsStrip() {
  return (
    <section className="section" data-screen-label="Stats">
      <Reveal>
        <div className="stats-strip">
          <div className="stat-cell"><span className="stat-num">{window.PRODUCTS.length}<span className="pct">+</span></span><span className="stat-lbl">Compounds in catalog</span></div>
          <div className="stat-cell"><span className="stat-num">$300<span className="pct">+</span></span><span className="stat-lbl">Free shipping threshold</span></div>
          <div className="stat-cell"><span className="stat-num">24<span className="pct">h</span></span><span className="stat-lbl">Same-day order processing</span></div>
          <div className="stat-cell"><span className="stat-num">1<span className="pct">/wk</span></span><span className="stat-lbl">Newsletter — every week</span></div>
        </div>
      </Reveal>
    </section>
  );
}

// Why 4-up
function WhyStrip() {
  const cards = [
    { icon: Icons.truck, title: "Fast, discreet shipping", body: "Orders processed same day. Lyophilized vials, tracked to your door — $20 flat rate, free over $300." },
    { icon: Icons.flask, title: "Simple email ordering", body: "Place your order through the cart and we'll reply by email with payment options. No card required on-site." },
    { icon: Icons.shield, title: "Weekly newsletter", body: "New releases, restocks, and research updates delivered every week. Subscribe and stay ahead of the catalog." },
  ];
  return (
    <section className="section" data-screen-label="Why us">
      <div className="section-head">
        <div>
          <div className="section-eyebrow">Why Clown Catcher</div>
          <h2 className="section-title">Ordering made simple</h2>
          <p className="section-sub">Shop the catalog, send your order, and we handle the rest by email — fast, direct, and discreet.</p>
        </div>
      </div>
      <div className="why-grid">
        {cards.map((c, i) => (
          <Reveal key={c.title} delay={i * 60}>
            <div className="why-card">
              <div className="why-icon">{c.icon}</div>
              <h3>{c.title}</h3>
              <p>{c.body}</p>
            </div>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

// Disclaimer banner
function DisclaimerBanner() {
  return (
    <section className="section" style={{ paddingTop: 0, paddingBottom: 0 }}>
      <div className="disclaimer-banner">
        <div className="disclaimer-icon">!</div>
        <div>
          <strong>Research use only.</strong> All products sold by Clown Catcher Research are intended strictly for in-vitro and laboratory research purposes. They are not intended for human or animal consumption, therapeutic use, or any other application. Must be 21+ to purchase.
        </div>
      </div>
    </section>
  );
}

// FAQ
function FAQ() {
  const items = [
    ["What payment methods do you accept?", "Cash App, Venmo, Zelle, Bitcoin, and CIM. PayPal is available with a 5% fee, and credit card with a 7% fee (limited availability)."],
    ["How much is shipping?", "$20 flat-rate shipping and handling — free on all orders over $300."],
    ["What's the difference between research peptides and clinical grade?", "Research peptides are produced for in-vitro and laboratory use only. We don't sell clinical or pharmaceutical-grade material — and you should be skeptical of anyone online who claims they do."],
    ["How should vials be stored?", "Un-reconstituted vials can be stored in a dark, cool place. Reconstituted vials should be refrigerated."],
    ["How do I pay for my order?", "Place your order through the cart and choose your preferred payment method from the dropdown. We'll receive your order by email and reply with payment instructions for that method. Your order ships once payment is confirmed."],
    ["What's your refund policy?", "Damaged or compromised shipments: full credit, no questions. Sealed-vial returns are not accepted — chain of custody can't be re-verified."],
    ["Why 'Clown Catcher'?", "Half this industry sells flour and sugar in vials. We're tired of clowns. So are you."],
  ];
  const [open, setOpen] = useStateP(0);
  return (
    <section className="section" data-screen-label="FAQ">
      <div className="section-head">
        <div>
          <div className="section-eyebrow">FAQ</div>
          <h2 className="section-title">Questions you should ask</h2>
        </div>
      </div>
      <div className="faq-list">
        {items.map(([q, a], i) => (
          <div key={i} className={`faq-item ${open === i ? "open" : ""}`} onClick={() => setOpen(open === i ? -1 : i)}>
            <div className="faq-q">
              <span className="faq-num">{String(i + 1).padStart(2, "0")}</span>
              <span className="faq-q-text">{q}</span>
              <span className="faq-toggle">{open === i ? "−" : "+"}</span>
            </div>
            <div className="faq-a">{a}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

// Newsletter
function Newsletter({ big = false }) {
  const [email, setEmail] = useStateP("");
  const [done, setDone] = useStateP(false);
  return (
    <section className={`section newsletter ${big ? "newsletter-big" : ""}`} data-screen-label="Newsletter">
      <div className="news-inner">
        <div className="news-copy">
          <h2>Join the weekly newsletter</h2>
          <p>New peptide releases, restock alerts, and research updates — delivered to your inbox every week. No spam, unsubscribe anytime.</p>
        </div>
        <div>
          <form className="news-form" onSubmit={(e) => { e.preventDefault(); setDone(true); }}>
            <input type="email" placeholder="you@email.com" value={email} onChange={(e) => setEmail(e.target.value)} required />
            <button type="submit"><span>{done ? "Subscribed ✓" : "Subscribe"}</span></button>
          </form>
          <div className="news-fine">By subscribing, you certify you are 21+ and a qualified research professional.</div>
        </div>
      </div>
    </section>
  );
}

// Dedicated newsletter page
function NewsletterPage() {
  return (
    <main className="info-page" data-screen-label="Newsletter">
      <section className="info-head">
        <div className="info-eyebrow">Clown Catcher Research</div>
        <h1 className="info-title">The weekly <span className="accent">newsletter</span></h1>
        <p>One email a week. Everything you need to stay current on the catalog.</p>
      </section>
      <Newsletter big={true} />
      <section className="section">
        <div className="info-grid">
          <div className="info-cell"><h3>New releases</h3><p>Be first to know when new compounds are added to the catalog.</p></div>
          <div className="info-cell dark"><h3>Restock alerts</h3><p>Popular items move fast — get notified the moment they're back.</p></div>
          <div className="info-cell"><h3>Price updates</h3><p>Price list changes and bundle deals, straight to your inbox.</p></div>
          <div className="info-cell dark"><h3>Research updates</h3><p>Reconstitution, storage, and handling news for research vials — plus what's new in the field.</p></div>
        </div>
      </section>
    </main>
  );
}

// HOME PAGE
function HomePage({ heroVariant }) {
  return (
    <main>
      <Hero variant={heroVariant} />
      <CategoryRow />
      <FeaturedRow />
      <StatsStrip />
      <WhyStrip />
      <DisclaimerBanner />
      <FAQ />
      <Newsletter />
    </main>
  );
}

// SHOP PAGE
function ShopPage({ initialCat = "All" }) {
  const [cat, setCat] = useStateP(initialCat);
  useEffectP(() => { setCat(initialCat); }, [initialCat]);
  const [sort, setSort] = useStateP("featured");
  const [q, setQ] = useStateP("");
  const filtered = useMemoP(() => {
    let list = window.PRODUCTS;
    if (cat !== "All") list = list.filter(p => p.category === cat);
    if (q) list = list.filter(p => (p.name + p.subtitle).toLowerCase().includes(q.toLowerCase()));
    if (sort === "price-asc") list = [...list].sort((a, b) => a.price - b.price);
    if (sort === "price-desc") list = [...list].sort((a, b) => b.price - a.price);
    if (sort === "name") list = [...list].sort((a, b) => a.name.localeCompare(b.name));
    return list;
  }, [cat, sort, q]);

  // Each category URL gets its own H1 and intro copy — nine pages sharing
  // one "All peptides" heading would read as duplicate content.
  const isAll = cat === "All";
  const catCount = isAll ? window.PRODUCTS.length : window.PRODUCTS.filter(p => p.category === cat).length;

  return (
    <main data-screen-label="Shop">
      <section className="shop-head">
        <div className="section-eyebrow">{isAll ? "Full catalog" : cat} · {catCount} compounds</div>
        <h1 className="shop-title">{isAll ? "All peptides" : `${cat} peptides`}</h1>
        <p className="shop-sub">
          {isAll
            ? "Every compound, every batch — cold-chain shipped, fast and discreet."
            : `${catCount} ${cat.toLowerCase()} research compounds, third-party tested and cold-chain shipped. For laboratory research use only.`}
        </p>
      </section>

      <section className="shop-controls">
        <div className="cat-row">
          {window.CATEGORIES.map(c => (
            <a
              key={c}
              className={`cat-btn ${cat === c ? "on" : ""}`}
              href={c === "All" ? "/shop" : `/shop/${window.CAT_SLUG(c)}`}
            >{c}</a>
          ))}
        </div>
        <div className="shop-controls-right">
          <input className="search-input" placeholder="Search compounds…" value={q} onChange={(e) => setQ(e.target.value)} />
          <select className="sort-select" value={sort} onChange={(e) => setSort(e.target.value)}>
            <option value="featured">Featured</option>
            <option value="price-asc">Price: low to high</option>
            <option value="price-desc">Price: high to low</option>
            <option value="name">Name A–Z</option>
          </select>
        </div>
      </section>

      <section className="section shop-grid-section">
        <div className="product-grid">
          {filtered.map((p, i) => <Reveal key={p.id} delay={i * 30}><ProductCard p={p} /></Reveal>)}
          {filtered.length === 0 && <div className="empty">No compounds match. Try another filter.</div>}
        </div>
      </section>
    </main>
  );
}

// PRODUCT DETAIL
function ProductPage({ id }) {
  const p = window.PRODUCTS.find(x => x.id === id);
  const { add } = useCart();
  const [qty, setQty] = useStateP(1);
  const [v, setV] = useStateP(0);
  const [tab, setTab] = useStateP("overview");
  const [added, setAdded] = useStateP(false);
  if (!p) return <main className="empty-page">Compound not found. <a href="/shop">Back to catalog →</a></main>;

  const variant = p.variants[v];
  const related = window.PRODUCTS.filter(x => x.category === p.category && x.id !== p.id).slice(0, 4);

  return (
    <main className="product-page" data-screen-label={`Product: ${p.name}`}>
      <div className="crumbs">
        <a href="/">Home</a> / <a href="/shop">Shop</a> / <a href="/shop">{p.category}</a> / <span>{p.name}</span>
      </div>
      <section className="product-hero">
        <div className="product-visual">
          <div className="product-vial-big">
            <PhotoVial name={p.name} mass={p.dose} width={270} />
          </div>
          <div className="product-deco-1"><Torus size={380} speed={50} /></div>
          <div className="product-deco-2"><Molecule size={120} speed={22} /></div>
          <div className="product-corner tl">CC—{p.id.toUpperCase()}</div>
          <div className="product-corner tr">{p.dose}</div>
          <div className="product-corner bl">BATCH 2026-Q2</div>
          <div className="product-corner br">LOT-{(p.id.length * 137 % 9999).toString().padStart(4, "0")}</div>
        </div>
        <div className="product-info">
          <div className="product-cat">{p.category} · {p.subtitle}</div>
          <h1 className="product-name">{p.name}</h1>
          <p className="product-tag">{p.tagline}. Research-grade material, shipped lyophilized and tracked to your door.</p>
          {p.note && <p className="product-note">{p.note}</p>}

          <div className="bench-row">
            {p.bench.map(b => <span key={b} className="bench-pill">{b}</span>)}
          </div>

          {p.variants.length > 1 && (
            <div className="variant-block">
              <div className="variant-label">Options</div>
              <div className="variant-row">
                {p.variants.map((opt, i) => (
                  <button key={opt.l} className={`variant-pill ${v === i ? "on" : ""}`} onClick={() => setV(i)}>
                    <span className="variant-name">{opt.l}</span>
                    <span className="variant-price">${opt.p}</span>
                  </button>
                ))}
              </div>
            </div>
          )}

          <div className="price-row">
            <div className="big-price"><span className="dollar">$</span>{variant.p}<span className="per">/ {variant.l} {window.UNIT_WORD(p.form)}</span></div>
            <div className="qty">
              <button onClick={() => setQty(Math.max(1, qty - 1))}>−</button>
              <span>{qty}</span>
              <button onClick={() => setQty(qty + 1)}>+</button>
            </div>
          </div>

          <button className="btn btn-primary big-add" onClick={() => { add(p.id, qty, v); setAdded(true); setTimeout(() => setAdded(false), 1600); window.flyToCart(document.querySelector(".product-vial-big")); }}>
            <span>{added ? "Added to cart ✓" : `Add ${qty} to cart`}</span><span className="arrow">→</span>
          </button>
          <a href="/cart" className="btn btn-ghost wide" onClick={() => add(p.id, qty, v)}>
            <span>Buy it now</span>
          </a>

          <div className="spec-grid">
            <div><span className="mono">Option</span><strong>{variant.l}</strong></div>
            <div><span className="mono">Form</span><strong>{p.form}</strong></div>
            <div><span className="mono">Processing</span><strong>Same day</strong></div>
            <div><span className="mono">Shipping</span><strong>$20 · free $300+</strong></div>
          </div>

          <div className="research-warn">
            <div className="warn-bar"></div>
            <div><strong>For research use only.</strong> Not for human consumption. By purchasing you certify you are a qualified research professional.</div>
          </div>
        </div>
      </section>

      <section className="product-tabs">
        <div className="tabs-row">
          {[["overview", "Overview"], ["specs", "Specifications"]].map(([t, label]) => (
            <button key={t} className={`tab ${tab === t ? "on" : ""}`} onClick={() => setTab(t)}>{label}</button>
          ))}
        </div>
        <div className="tab-content">
          {tab === "overview" && (
            <div className="prose">
              <p><strong>{p.name}</strong> ({p.subtitle}) is supplied as a sterile lyophilized powder, sealed under nitrogen in a glass vial. Orders are shipped cold and tracked to your door.</p>
              <p className="fine">All material is intended exclusively for in-vitro and ex-vivo research applications.</p>
            </div>
          )}
          {tab === "specs" && (
            <div className="spec-table">
              <div><span>Compound</span><strong>{p.name}</strong></div>
              <div><span>Class</span><strong>{p.subtitle}</strong></div>
              <div><span>Net mass</span><strong>{p.mass}</strong></div>
              <div><span>Form</span><strong>Lyophilized, sterile</strong></div>
              <div><span>Container</span><strong>Type I borosilicate, butyl stopper</strong></div>
              <div><span>Storage</span><strong>−20°C lyophilized</strong></div>
              <div><span>Origin</span><strong>USA</strong></div>
            </div>
          )}
        </div>
      </section>

      {related.length > 0 && (
        <section className="section related">
          <div className="section-head">
            <div>
              <div className="section-eyebrow">Stack with</div>
              <h2 className="section-title">More in {p.category}</h2>
            </div>
          </div>
          <div className="product-grid">
            {related.map((r, i) => <Reveal key={r.id} delay={i * 50}><ProductCard p={r} /></Reveal>)}
          </div>
        </section>
      )}
    </main>
  );
}

// CART PAGE
function CartPage() {
  const { items, remove, setQty, subtotal, count, clear } = useCart();
  const info = window.ORDER_INFO;
  const ship = subtotal >= info.freeOver ? 0 : (subtotal > 0 ? info.shipping : 0);
  const total = subtotal + ship;
  return (
    <main className="cart-page" data-screen-label="Cart">
      <section className="cart-head">
        <div className="cart-head-eyebrow">{count} item{count === 1 ? "" : "s"} in your cart</div>
        <h1 className="cart-title">Your cart</h1>
      </section>
      {items.length === 0 ? (
        <div className="cart-empty">
          <div className="empty-3d"><Molecule size={150} speed={24} /></div>
          <h2>Your cart is empty</h2>
          <p>No compounds queued for shipping. Browse the catalog and queue something up.</p>
          <a href="/shop" className="btn btn-primary"><span>Shop all peptides</span><span className="arrow">→</span></a>
        </div>
      ) : (
        <div className="cart-grid">
          <div className="cart-list">
            {items.map(i => {
              const p = window.PRODUCTS.find(p => p.id === i.id);
              if (!p) return null;
              const variant = p.variants[i.v || 0] || p.variants[0];
              return (
                <div key={i.id + ":" + (i.v || 0)} className="cart-row">
                  <div className="cart-vial"><PhotoVial name={p.name} mass={p.dose} width={52} /></div>
                  <div className="cart-info">
                    <div className="cart-name">{p.name}</div>
                    <div className="cart-sub">{p.subtitle} · {variant.l}</div>
                    <div className="cart-id">CC—{p.id.toUpperCase()}</div>
                  </div>
                  <div className="cart-qty">
                    <button onClick={() => setQty(i.id, i.v || 0, i.qty - 1)}>−</button>
                    <span>{i.qty}</span>
                    <button onClick={() => setQty(i.id, i.v || 0, i.qty + 1)}>+</button>
                  </div>
                  <div className="cart-price">${variant.p * i.qty}</div>
                  <button className="cart-remove" onClick={() => remove(i.id, i.v || 0)}>×</button>
                </div>
              );
            })}
            <button className="clear-btn" onClick={clear}>Clear all</button>
          </div>
          <aside className="cart-summary">
            <h3>Order summary</h3>
            <div className="sum-line"><span>Subtotal</span><strong>${subtotal}</strong></div>
            <div className="sum-line"><span>Shipping &amp; handling</span><strong>{ship === 0 ? "Free" : `$${ship}`}</strong></div>
            <div className="sum-divider"></div>
            <div className="sum-total"><span>Total</span><strong>${total}</strong></div>
            {ship > 0 && <div className="sum-note">Add ${info.freeOver - subtotal} more for free shipping</div>}
            <a className="btn btn-primary wide checkout" href="/checkout"><span>Proceed to checkout</span><span className="arrow">→</span></a>
            <div className="sum-fine">Choose your preferred payment method at checkout — we'll email you payment options after we receive your order. By checking out you certify you are 21+ and a qualified research professional. All compounds are sold for research use only.</div>
          </aside>
        </div>
      )}
    </main>
  );
}

Object.assign(window, { HomePage, ShopPage, ProductPage, CartPage, NewsletterPage });

