/* /peptides/ — Library index page. Lists every peptide with rich card design. */

const PEPTIDE_LIST = Object.values(window.PEPTIDE_DB);

function LibraryIndex() {
  const Glyph = window.PEPTIDE_GLYPH;
  const ACCENTS = window.PEPTIDE_ACCENTS;

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

      {/* HERO */}
      <section className="library-hero">
        <div className="container" style={{ maxWidth: 1080 }}>
          <div className="library-hero-grid">
            <div>
              <div className="eyebrow" style={{ marginBottom: 16 }}>★ THE LIBRARY</div>
              <h1 style={{ fontFamily: "var(--font-display)", fontWeight: 900, fontSize: "clamp(48px, 7.4vw, 96px)", letterSpacing: "-0.045em", lineHeight: 0.95, margin: "0 0 18px" }}>
                Every peptide,<br/>
                <span style={{ fontStyle: "italic", fontWeight: 700 }}>finally explained.</span>
              </h1>
              <p style={{ fontSize: 18, lineHeight: 1.6, color: "var(--ink)", maxWidth: 560 }}>
                Plain-English deep-dives on every compound we work with. What it does, who it's for, the dose ladder, the timeline, the evidence — no jargon, no marketing, no bro-science.
              </p>
              <div style={{ display: "flex", gap: 14, flexWrap: "wrap", marginTop: 28 }}>
                <a href="/bioreveal.html?start=1" className="btn btn-dark btn-lg">Find my match →</a>
                <a href="#all" className="btn btn-ghost btn-lg">Browse all {PEPTIDE_LIST.length}</a>
              </div>
            </div>
            <div className="library-hero-orb">
              <div className="library-hero-orb-bg"/>
              <div className="library-hero-orb-grid">
                {PEPTIDE_LIST.slice(0, 6).map((p, i) => (
                  <div key={p.slug} className="library-hero-mini" style={{ animationDelay: `${0.1 + i * 0.1}s` }}>
                    <Glyph slug={p.slug} color={ACCENTS[p.slug] || "#888"} size={86}/>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* CARDS */}
      <section id="all" style={{ padding: "32px 0 88px", background: "var(--paper)" }}>
        <div className="container" style={{ maxWidth: 1180 }}>
          <div style={{ marginBottom: 28, display: "flex", alignItems: "baseline", justifyContent: "space-between", flexWrap: "wrap", gap: 12 }}>
            <div className="eyebrow">★ ALL {PEPTIDE_LIST.length} COMPOUNDS</div>
            <div style={{ fontSize: 13, color: "var(--muted)", fontFamily: "var(--font-mono)", letterSpacing: "0.06em" }}>Tap any to read deeply</div>
          </div>
          <div className="library-grid">
            {PEPTIDE_LIST.map((p, i) => {
              const accent = ACCENTS[p.slug] || "#6b6b6b";
              return (
                <a key={p.slug} href={`/peptides/${p.slug}.html`} className="library-card" style={{ "--accent": accent, animationDelay: `${0.04 + i * 0.05}s` }}>
                  <div className="library-card-glyph" style={{ background: `linear-gradient(160deg, ${accent}26 0%, ${accent}0d 100%)` }}>
                    <Glyph slug={p.slug} color={accent} size={140}/>
                    <div className="library-card-num">{String(i + 1).padStart(2, "0")}</div>
                  </div>
                  <div className="library-card-body">
                    <div className="library-card-class">{p.class_label}</div>
                    <h3 className="library-card-name">{p.name}</h3>
                    <p className="library-card-tag">{p.tagline}</p>
                    <p className="library-card-line">{p.one_liner}</p>
                  </div>
                  <div className="library-card-foot">
                    <span className="library-card-price">${p.price}<span style={{ opacity: 0.5, fontWeight: 500 }}>/mo</span></span>
                    <span className="library-card-cta">READ →</span>
                  </div>
                </a>
              );
            })}
          </div>
        </div>
      </section>

      {/* FINAL CTA */}
      <section style={{ padding: "88px 0", background: "var(--paper-2)", borderTop: "1px solid var(--paper-3)" }}>
        <div className="container" style={{ maxWidth: 720, textAlign: "center" }}>
          <div className="eyebrow" style={{ marginBottom: 18 }}>★ NOT SURE WHICH IS RIGHT?</div>
          <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "clamp(32px, 5vw, 48px)", letterSpacing: "-0.03em", lineHeight: 1.05, marginBottom: 20 }}>
            Let our 4-min BioScan match you.
          </h2>
          <p style={{ fontSize: 17, color: "var(--muted)", maxWidth: 560, margin: "0 auto 32px", lineHeight: 1.55 }}>
            We read your goals, lifestyle, and (optionally) your face + voice + heart rate. Then your personal peptide stack — explained in plain English. Free. MD-reviewed before anything ships.
          </p>
          <a href="/bioreveal.html?start=1" className="btn btn-dark btn-lg">Run the BioScan →</a>
          <div style={{ fontSize: 12, color: "var(--muted)", marginTop: 28, lineHeight: 1.55 }}>
            Compounded peptides are not FDA-approved for these indications. MD-reviewed before fulfillment.
          </div>
        </div>
      </section>

      <Footer/>
    </div>
  );
}

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