/* /peptides/ — formulary index page. Lists every peptide we carry. */

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

function FormularyIndex() {
  return (
    <div className="br-page">
      <Header active="peptides"/>

      <section className="br-section" style={{ paddingTop: 60, paddingBottom: 40 }}>
        <div className="container" style={{ maxWidth: 920 }}>
          <div className="eyebrow" style={{ marginBottom: 12 }}>★ THE FORMULARY</div>
          <h1 style={{ fontFamily: "var(--font-display)", fontWeight: 900, fontSize: 56, letterSpacing: "-0.04em", lineHeight: 0.95, margin: "0 0 18px" }}>Every peptide we use.</h1>
          <p style={{ fontSize: 17, lineHeight: 1.65, color: "var(--ink)", maxWidth: 680 }}>Each one has a deep page — mechanism, dose ladder, evidence, timeline, FAQ. Click any to read it.</p>
        </div>
      </section>

      <section className="br-section" style={{ paddingTop: 20, paddingBottom: 60 }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))", gap: 16 }}>
            {PEPTIDE_LIST.map(p => (
              <a key={p.slug} href={`/peptides/${p.slug}.html`}
                 style={{
                   display: "block", textDecoration: "none", color: "var(--ink)",
                   background: "var(--paper-2)", borderRadius: 12, padding: "22px 24px",
                   border: "1px solid var(--paper-3)", transition: "all 0.2s",
                 }}
                 onMouseEnter={e => { e.currentTarget.style.borderColor = "var(--ink)"; e.currentTarget.style.transform = "translateY(-2px)"; }}
                 onMouseLeave={e => { e.currentTarget.style.borderColor = "var(--paper-3)"; e.currentTarget.style.transform = "translateY(0)"; }}>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.18em", color: "var(--muted)", textTransform: "uppercase", marginBottom: 6 }}>{p.class_label}</div>
                <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 26, margin: "0 0 8px" }}>{p.name}</h3>
                <p style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 15, color: "var(--ink)", margin: "0 0 14px", lineHeight: 1.4 }}>{p.tagline}</p>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", borderTop: "1px solid var(--paper-3)", paddingTop: 12, marginTop: 12 }}>
                  <span style={{ fontSize: 13, fontWeight: 700 }}>${p.price}<span style={{ fontWeight: 400, color: "var(--muted)" }}>/mo</span></span>
                  <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.1em" }}>READ →</span>
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>

      <section className="br-final-cta">
        <div className="container">
          <h2>Not sure which is right?</h2>
          <div className="br-final-buttons">
            <a href="/bioreveal.html" className="btn btn-dark btn-lg">Run the 4-min BioScan →</a>
          </div>
          <div className="br-disclaimer">Compounded peptides are not FDA-approved for these indications. MD-reviewed before fulfillment.</div>
        </div>
      </section>

      <Footer/>
    </div>
  );
}

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