/* /protocols/ — index page listing every pre-built protocol. */

const PROTOCOL_LIST = Object.values(window.PROTOCOL_DB);

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

      <section style={{ paddingTop: 60, paddingBottom: 40, background: "var(--paper)" }}>
        <div className="container" style={{ maxWidth: 920 }}>
          <div className="eyebrow" style={{ marginBottom: 14 }}>★ PRE-BUILT PROTOCOLS</div>
          <h1 style={{ fontFamily: "var(--font-display)", fontWeight: 900, fontSize: "clamp(54px, 7vw, 100px)", letterSpacing: "-0.045em", lineHeight: 0.94, margin: "0 0 18px" }}>
            Pick a goal.<br/>We built the stack.
          </h1>
          <p style={{ fontSize: 18, lineHeight: 1.6, maxWidth: 660, color: "var(--ink)", marginBottom: 0 }}>
            Six pre-built protocols designed by our medical team. Each one combines 2–3 peptides for a specific outcome. Click any to read the long version — what it's for, how it works, and what to expect.
          </p>
        </div>
      </section>

      <section style={{ paddingTop: 30, paddingBottom: 60 }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(320px, 1fr))", gap: 18 }}>
            {PROTOCOL_LIST.map(p => (
              <a key={p.slug} href={`/protocols/${p.slug}.html`}
                 style={{
                   display: "block", textDecoration: "none", color: "var(--ink)",
                   background: "var(--paper-2)", borderRadius: 14, padding: "26px 28px",
                   border: "1px solid var(--paper-3)", transition: "all 0.2s",
                 }}
                 onMouseEnter={e => { e.currentTarget.style.borderColor = "var(--ink)"; e.currentTarget.style.transform = "translateY(-3px)"; }}
                 onMouseLeave={e => { e.currentTarget.style.borderColor = "var(--paper-3)"; e.currentTarget.style.transform = "translateY(0)"; }}>
                <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 14 }}>
                  <span style={{ width: 10, height: 10, borderRadius: "50%", background: p.hero_color, flexShrink: 0 }}/>
                  <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.16em", color: "var(--muted)", textTransform: "uppercase" }}>{p.duration}</span>
                </div>
                <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 28, margin: "0 0 10px", letterSpacing: "-0.02em" }}>{p.name}</h3>
                <p style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 16, color: "var(--ink)", margin: "0 0 16px", lineHeight: 1.4 }}>{p.tagline}</p>
                <div style={{ fontSize: 13, color: "var(--muted)", lineHeight: 1.5, marginBottom: 16 }}>{p.short_for}</div>
                <div style={{ marginBottom: 16, fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.06em" }}>
                  STACK · {p.stack.join(" + ")}
                </div>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", borderTop: "1px solid var(--paper-3)", paddingTop: 14 }}>
                  <span style={{ fontWeight: 800, fontSize: 18, fontFamily: "var(--font-display)" }}>${p.price}<span style={{ fontWeight: 400, color: "var(--muted)", fontSize: 14 }}>/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?</h2>
          <div className="br-final-buttons">
            <a href="/bioreveal.html" className="btn btn-dark btn-lg">Run the BioScan — it'll match you →</a>
          </div>
          <div className="br-disclaimer">All protocols MD-reviewed. 30-day money-back. Not FDA-approved for these indications.</div>
        </div>
      </section>

      <Footer/>
    </div>
  );
}

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