// Shop catalog — full peptide list with product images

const CATALOG = [
  { slug: "sermorelin",  code: "Sermorelin",  category: "gh",        catLabel: "GH support",   tag: "GH pulse",         price: 179, desc: "Restores your nightly growth-hormone pulse. Sleep, recovery, lean mass." },
  { slug: "ipamorelin",  code: "Ipamorelin",  category: "gh",        catLabel: "GH support",   tag: "Selective GH",     price: 169, desc: "Pulses GH at night without raising cortisol or prolactin." },
  { slug: "cjc-1295",    code: "CJC-1295",    category: "gh",        catLabel: "GH support",   tag: "GHRH analog",      price: 169, desc: "Stable GH amplifier. Almost always stacked with ipamorelin." },
  { slug: "bpc-157",     code: "BPC-157",     category: "recovery",  catLabel: "Recovery",     tag: "Tissue repair",    price: 149, desc: "Body protection compound — soft tissue, joints, gut lining repair." },
  { slug: "nad-plus",    code: "NAD+",        category: "longevity", catLabel: "Cellular",     tag: "Energy + repair",  price: 189, desc: "Mitochondrial fuel. The substrate every cell needs to make ATP." },
  { slug: "ghk-cu",      code: "GHK-Cu",      category: "skin",      catLabel: "Skin + Hair",  tag: "Copper peptide",   price: 159, desc: "Hair density, skin texture, collagen — the most-studied skin peptide." },
  { slug: "glutathione", code: "Glutathione", category: "skin",      catLabel: "Skin + Hair",  tag: "Antioxidant",      price: 119, desc: "Master antioxidant. Skin clarity, detox, energy." },
  { slug: "selank",      code: "Selank",      category: "cognitive", catLabel: "Mind",         tag: "Calm focus",       price: 139, desc: "Calm focus without sedation. Russian-developed anxiolytic." },
  { slug: "dsip",        code: "DSIP",        category: "sleep",     catLabel: "Sleep",        tag: "Delta-wave depth", price: 129, desc: "Increases slow-wave sleep depth — the kind that actually restores you." },
  { slug: "b12-mic",     code: "B12 / MIC",   category: "weight",    catLabel: "Energy",       tag: "Energy + metab",   price:  99, desc: "Methylation + lipotropic blend. Energy, mood, fat metabolism." },
];

const FILTERS = [
  { id: "all",       label: "All" },
  { id: "gh",        label: "GH support" },
  { id: "recovery",  label: "Recovery" },
  { id: "longevity", label: "Cellular" },
  { id: "cognitive", label: "Mind" },
  { id: "sleep",     label: "Sleep" },
  { id: "skin",      label: "Skin + Hair" },
  { id: "weight",    label: "Energy" },
];

const ShopHero = () => (
  <section style={{ background: "var(--paper)", paddingTop: 60, paddingBottom: 24 }}>
    <div className="container">
      <div className="m-grid-2" style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 64, alignItems: "start" }}>
        <div>
          <div style={{ display: "flex", gap: 8, marginBottom: 22, alignItems: "center", flexWrap: "wrap" }}>
            <span className="eyebrow-lime">★ THE CATALOG</span>
            <span className="eyebrow">{CATALOG.length} PEPTIDES</span>
          </div>
          <h1 style={{ fontFamily: "var(--font-display)", fontWeight: 900, fontSize: "clamp(56px, 7.4vw, 100px)", letterSpacing: "-0.045em", lineHeight: 0.94, margin: "0 0 18px" }}>
            Every peptide<br/>we{" "}
            <span style={{
              background: "linear-gradient(180deg, var(--ink) 62%, var(--lime) 62%)",
              WebkitBackgroundClip: "text",
              WebkitTextFillColor: "transparent",
              backgroundClip: "text",
              paddingRight: 4,
            }}>carry.</span>
          </h1>
          <p style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 19, marginTop: 8, marginBottom: 12 }}>
            Pick one. Or let the BioScan match a stack.
          </p>
        </div>
        <p style={{ fontSize: 16, lineHeight: 1.6, color: "var(--muted)", maxWidth: 380 }}>
          Each peptide does one thing well. Click any to read what it does, how to use it, and what to expect. Want a goal-driven stack instead? <a href="/protocols/" style={{ color: "var(--ink)", textDecoration: "underline" }}>Browse by goal →</a>
        </p>
      </div>
    </div>
  </section>
);

const FilterBar = ({ active, onChange }) => (
  <div style={{
    position: "sticky",
    top: 72,
    zIndex: 20,
    background: "var(--paper)",
    borderBottom: "1px solid var(--paper-3)",
    padding: "20px 0",
  }}>
    <div className="container" style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
      {FILTERS.map(f => (
        <button key={f.id} onClick={() => onChange(f.id)}
          className="chip"
          style={{
            background: active === f.id ? "var(--ink)" : "rgba(0,0,0,0.06)",
            color: active === f.id ? "var(--paper)" : "var(--ink)",
            border: "none",
            padding: "8px 14px",
            cursor: "pointer",
            transition: "background .15s ease, color .15s ease",
          }}>
          {f.label}
        </button>
      ))}
    </div>
  </div>
);

const PeptideCard = ({ p }) => {
  const pal = getPalette(p.code);
  const [hover, setHover] = React.useState(false);
  return (
    <a href={`/shop/${p.slug}.html`} style={{
      display: "block",
      background: "white",
      border: "1px solid var(--paper-3)",
      borderRadius: "var(--r-lg)",
      overflow: "hidden",
      transition: "transform .2s ease, box-shadow .2s ease",
      transform: hover ? "translateY(-4px)" : "translateY(0)",
      boxShadow: hover ? "var(--shadow-lg)" : "none",
    }}
    onMouseEnter={() => setHover(true)}
    onMouseLeave={() => setHover(false)}
    >
      <div style={{ aspectRatio: "1 / 1", borderRadius: 0 }}>
        <ProductShot bg={pal.bg} cap={pal.cap} tint={pal.tint} product={p.code} />
      </div>
      <div style={{ padding: 24 }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "start", gap: 12, marginBottom: 8 }}>
          <div className="mono" style={{ fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--muted)" }}>
            {p.catLabel} · {p.tag}
          </div>
        </div>
        <h3 style={{
          fontFamily: "var(--font-display)",
          fontWeight: 800,
          fontSize: 22,
          letterSpacing: "-0.015em",
          lineHeight: 1.05,
          marginBottom: 10,
          textTransform: "uppercase",
        }}>{p.code}</h3>
        <p style={{ fontSize: 14, color: "var(--muted)", lineHeight: 1.5, marginBottom: 20, minHeight: 42 }}>
          {p.desc}
        </p>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", paddingTop: 16, borderTop: "1px solid var(--paper-3)" }}>
          <div>
            <div style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 22, letterSpacing: "-0.02em" }}>
              ${p.price}
            </div>
            <div className="mono" style={{ fontSize: 10, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--muted-2)", marginTop: 2 }}>
              30-day supply
            </div>
          </div>
          <span className="btn btn-sm" style={{
            background: hover ? "var(--ink)" : "var(--paper-2)",
            color: hover ? "var(--paper)" : "var(--ink)",
          }}>
            View product →
          </span>
        </div>
      </div>
    </a>
  );
};

const Catalog = () => {
  const initial = (() => {
    const cat = new URLSearchParams(window.location.search).get("cat");
    return FILTERS.some(f => f.id === cat) ? cat : "all";
  })();
  const [active, setActive] = React.useState(initial);
  const visible = active === "all" ? CATALOG : CATALOG.filter(p => p.category === active);
  return (
    <>
      <FilterBar active={active} onChange={setActive} />
      <section style={{ background: "var(--paper)", padding: "48px 0 96px" }}>
        <div className="container">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", marginBottom: 32 }}>
            <div className="mono" style={{ fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--muted)" }}>
              {visible.length} {visible.length === 1 ? "result" : "results"}
            </div>
            <a href="/bioreveal.html" className="btn btn-sm btn-dark">Not sure? Run the BioScan →</a>
          </div>
          <div style={{
            display: "grid",
            gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))",
            gap: 20,
          }}>
            {visible.map(p => <PeptideCard key={p.code} p={p} />)}
          </div>
          {visible.length === 0 && (
            <div style={{ textAlign: "center", padding: "80px 0", color: "var(--muted)" }}>
              No peptides match this filter.
            </div>
          )}
        </div>
      </section>
    </>
  );
};

const ShopFinalCTA = () => (
  <section style={{ background: "var(--ink)", color: "var(--paper)", padding: "96px 0", position: "relative", overflow: "hidden" }}>
    <div className="container">
      <div className="m-grid-2" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "center" }}>
        <div>
          <span className="chip chip-lime" style={{ marginBottom: 20, display: "inline-flex" }}>AI STACK BUILDER</span>
          <h2 className="display-lg">Skip the<br />guesswork.</h2>
          <p style={{ marginTop: 20, fontSize: 16, lineHeight: 1.6, opacity: 0.75, maxWidth: 460 }}>
            Tell us your goal and metrics — we'll match you against 47,000+ member outcomes and propose a stack with mechanism, dosing, and timeline.
          </p>
          <div style={{ marginTop: 28, display: "flex", gap: 12, flexWrap: "wrap" }}>
            <a href="bioreveal.html" className="btn btn-primary btn-lg">Build my stack →</a>
            <a href="index.html#protocols" className="btn btn-ghost-light btn-lg">See protocols</a>
          </div>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 12 }}>
          {["BPC-157", "Sermorelin", "NAD+", "Selank"].map(code => {
            const pal = getPalette(code);
            return (
              <div key={code} style={{ aspectRatio: "1/1" }}>
                <ProductShot bg={pal.bg} cap={pal.cap} tint={pal.tint} product={code} chip={false}/>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  </section>
);

const App = () => (
  <>
    <Header active="shop" />
    <ShopHero />
    <Catalog />
    <ShopFinalCTA />
    <Footer />
  </>
);

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