// Shop catalog — full peptide list with product images

const CATALOG = [
  { code: "BPC-157",        category: "recovery",  catLabel: "Recovery",       tag: "Tissue repair",   price: 189, desc: "Accelerated soft-tissue repair, gut lining integrity, systemic anti-inflammatory.", href: "product.html" },
  { code: "TB-500",         category: "recovery",  catLabel: "Recovery",       tag: "Soft tissue",     price: 219, desc: "Systemic healing for tendons, ligaments, and muscle. Pairs with BPC-157." },
  { code: "Semaglutide",    category: "weight",    catLabel: "Weight Loss",    tag: "GLP-1",           price: 349, desc: "Appetite regulation. Clinically validated weight loss protocol." },
  { code: "Tirzepatide",    category: "weight",    catLabel: "Weight Loss",    tag: "Dual GIP/GLP-1",  price: 449, desc: "Dual-agonist for accelerated fat loss with metabolic improvement." },
  { code: "Sermorelin",     category: "gh",        catLabel: "Growth Hormone", tag: "GHRH analog",     price: 199, desc: "Stimulates natural GH release for sleep, recovery, and lean mass." },
  { code: "Ipamorelin",     category: "gh",        catLabel: "Growth Hormone", tag: "GHRP",            price: 169, desc: "Selective GH secretagogue. Pulsatile release without cortisol spike." },
  { code: "CJC-1295",       category: "gh",        catLabel: "Growth Hormone", tag: "GHRH long-act",   price: 209, desc: "Extended GHRH analog. Stacks with Ipamorelin for sustained pulses." },
  { code: "NAD+",           category: "longevity", catLabel: "Anti-Aging",     tag: "Cellular energy", price: 249, desc: "Mitochondrial fuel for energy, focus, and DNA repair." },
  { code: "Epitalon",       category: "longevity", catLabel: "Anti-Aging",     tag: "Telomere",        price: 179, desc: "Telomerase activator studied for circadian rhythm and longevity markers." },
  { code: "GHK-Cu",         category: "skin",      catLabel: "Skin & Hair",    tag: "Copper peptide",  price: 159, desc: "Copper-binding peptide for collagen, hair density, and skin remodeling." },
  { code: "Selank",         category: "cognitive", catLabel: "Cognitive",      tag: "Anxiolytic",      price: 139, desc: "Calm focus without sedation. Modulates GABA and serotonin pathways." },
  { code: "Semax",          category: "cognitive", catLabel: "Cognitive",      tag: "Nootropic",       price: 149, desc: "ACTH-derived nootropic. Up-regulates BDNF for memory and recall." },
  { code: "DSIP",           category: "sleep",     catLabel: "Sleep & Mood",   tag: "Sleep onset",     price: 129, desc: "Delta sleep–inducing peptide. Restorative slow-wave architecture." },
  { code: "PT-141",         category: "vitality",  catLabel: "Sexual Health",  tag: "Melanocortin",    price: 169, desc: "On-demand sexual response. Melanocortin pathway, no daily pill." },
  { code: "Thymosin",       category: "immune",    catLabel: "Immune",         tag: "Immune",          price: 229, desc: "Thymosin Alpha-1. Immune modulation and resilience to viral load." },
  { code: "MIC + B12",      category: "weight",    catLabel: "Weight Loss",    tag: "Lipotropic",      price: 119, desc: "Methionine, Inositol, Choline + B12. Lipotropic adjunct to GLP-1." },
];

const FILTERS = [
  { id: "all",       label: "All" },
  { id: "weight",    label: "Weight Loss" },
  { id: "recovery",  label: "Recovery" },
  { id: "gh",        label: "Growth Hormone" },
  { id: "longevity", label: "Anti-Aging" },
  { id: "cognitive", label: "Cognitive" },
  { id: "sleep",     label: "Sleep & Mood" },
  { id: "skin",      label: "Skin & Hair" },
  { id: "vitality",  label: "Sexual Health" },
  { id: "immune",    label: "Immune" },
];

const ShopHero = () => (
  <section style={{ background: "var(--paper)", paddingTop: 64, paddingBottom: 24 }}>
    <div className="container">
      <div className="m-grid-2" style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 64, alignItems: "end" }}>
        <div>
          <div style={{ display: "flex", gap: 8, marginBottom: 24, alignItems: "center" }}>
            <span className="eyebrow-lime">★ THE CATALOG</span>
            <span className="eyebrow">{CATALOG.length} PEPTIDES · 09 CATEGORIES</span>
          </div>
          <h1 className="display-xl">
            Pick your<br />
            <span style={{
              background: "linear-gradient(180deg, var(--ink) 60%, var(--lime) 60%)",
              WebkitBackgroundClip: "text",
              WebkitTextFillColor: "transparent",
              backgroundClip: "text",
              paddingRight: 8,
            }}>molecule.</span>
          </h1>
        </div>
        <p style={{ fontSize: 17, lineHeight: 1.6, color: "var(--muted)", maxWidth: 440 }}>
          Pharmaceutical-grade peptides, dispensed by U.S. licensed compounding pharmacies. Every batch lab-verified. Filter by goal, or let the Stack Builder match you in 90 seconds.
        </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="product.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? Take the quiz →</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 />);