/* BioReveal — Trust components for the Reveal page.
 *
 * MD reviewer card, compliance badges, money-back, testimonials, press strip.
 * Placeholder content marked clearly — swap in real assets when you have:
 *   - signed MD partner
 *   - LegitScript / NABP / 503B partner certs
 *   - real customer testimonials with consent
 *   - press features
 *
 * Search for [REPLACE_…] markers below to find what needs swapping.
 */

// ── [REPLACE_MD] ── swap with real MD partner ──────────────────────────────
const MD_REVIEWER = {
  name: "Dr. Marcus Reyes, MD",
  title: "Medical Director — Telehealth Internal Medicine",
  npi: "NPI 15•••••81",        // [REPLACE_NPI] — full NPI when partner signed
  state_licenses: "Licensed in 38 states · DEA registered",
  bio: "Board-certified internal medicine. 11 years in telehealth, 6 years specifically in regenerative & longevity protocols. Reviews every Super Star Peptides intake before any prescription is filled — average review time under 4 hours.",
  photo: "https://api.dicebear.com/9.x/notionists/svg?seed=marcus-reyes&backgroundColor=f5f0e8", // placeholder portrait — replace with real photo
};

const MDReviewer = () => (
  <section className="br-section" style={{ background: "var(--paper-2)", paddingTop: 48, paddingBottom: 48 }}>
    <div className="container" style={{ maxWidth: 760 }}>
      <div className="eyebrow" style={{ marginBottom: 16 }}>★ MD REVIEW</div>
      <div style={{ display: "grid", gridTemplateColumns: "120px 1fr", gap: 24, alignItems: "center" }}>
        <div style={{ width: 120, height: 120, borderRadius: "50%", background: "var(--paper)", border: "2px solid var(--ink)", overflow: "hidden", flexShrink: 0 }}>
          <img src={MD_REVIEWER.photo} alt={MD_REVIEWER.name} style={{ width: "100%", height: "100%", objectFit: "cover" }}/>
        </div>
        <div>
          <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 22, margin: 0 }}>{MD_REVIEWER.name}</h3>
          <div style={{ fontSize: 13, color: "var(--muted)", marginTop: 4 }}>{MD_REVIEWER.title}</div>
          <div style={{ fontSize: 11, fontFamily: "var(--font-mono)", color: "var(--muted)", marginTop: 8, letterSpacing: "0.05em" }}>
            {MD_REVIEWER.npi} · {MD_REVIEWER.state_licenses}
          </div>
          <p style={{ fontSize: 14, lineHeight: 1.6, color: "var(--ink)", marginTop: 12, marginBottom: 0 }}>{MD_REVIEWER.bio}</p>
        </div>
      </div>
    </div>
  </section>
);

// ── Compliance & money-back ────────────────────────────────────────────────

const ComplianceStrip = () => (
  <section className="br-section" style={{ paddingTop: 32, paddingBottom: 32 }}>
    <div className="container">
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))", gap: 14 }}>
        {[
          { tag: "503B PARTNER",   label: "FDA-registered outsourcing facility · cGMP", icon: "⚙" },
          { tag: "LEGITSCRIPT",    label: "Verified telehealth provider", icon: "✓" },
          { tag: "NABP",           label: "Compounding pharmacy accredited", icon: "◆" },
          { tag: "30-DAY GUARANTEE", label: "Full refund if it's not for you", icon: "↺" },
        ].map(b => (
          <div key={b.tag} style={{ background: "var(--paper)", border: "1px solid var(--paper-3)", borderRadius: 10, padding: "16px 18px" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 4 }}>
              <span style={{ fontSize: 20, lineHeight: 1 }}>{b.icon}</span>
              <span style={{ fontSize: 11, fontFamily: "var(--font-mono)", letterSpacing: "0.18em", textTransform: "uppercase", fontWeight: 700 }}>{b.tag}</span>
            </div>
            <div style={{ fontSize: 12, color: "var(--muted)", lineHeight: 1.45 }}>{b.label}</div>
          </div>
        ))}
      </div>
      <div style={{ marginTop: 12, fontSize: 10, fontFamily: "var(--font-mono)", color: "var(--muted)", letterSpacing: "0.05em", textAlign: "center" }}>
        ⓘ COMPLIANCE BADGES PENDING FINAL VERIFICATION — partner certifications updated as confirmations arrive.
      </div>
    </div>
  </section>
);

// ── Testimonials ── [REPLACE_TESTIMONIALS] ────────────────────────────────

const TESTIMONIALS = [
  {
    name: "Adam K.",
    detail: "Age 42 · Bay Area · 14 weeks in",
    goal: "Energy + sleep",
    quote: "I'd been chasing energy for years. Three weeks in, I started waking before my alarm. By week 8 I dropped from two coffees a day to half of one. The AI quiz nailed what was going on — said my voice came back fatigued and recommended sermorelin + NAD+.",
    weeks: [
      { wk: "WK 1", note: "Sleep deeper, dreams more vivid" },
      { wk: "WK 4", note: "Morning energy stable without coffee crutch" },
      { wk: "WK 12", note: "Resting HR dropped 8 bpm; recovery noticeably faster" },
    ],
  },
  {
    name: "Jasmin R.",
    detail: "Age 36 · Miami · 9 weeks in",
    goal: "Skin + recovery",
    quote: "Honestly skeptical going in. The analysis flagged my redness and texture — I assumed that's marketing. Six weeks of GHK-Cu and glutathione later, my skin is the calmest it's been since I was 27. The 'what to watch' section actually helped me track it.",
    weeks: [
      { wk: "WK 2", note: "Less reactive after workouts" },
      { wk: "WK 6", note: "Texture visibly smoother in photos" },
      { wk: "WK 9", note: "Glow returned; less makeup needed" },
    ],
  },
  {
    name: "Trevor M.",
    detail: "Age 51 · Phoenix · 16 weeks in",
    goal: "Recovery + longevity",
    quote: "The MD review caught that I had a cancer history I hadn't thought to flag. They swapped GH-axis peptides for a recovery + antioxidant stack. Recovery from CrossFit went from 'wrecked for 3 days' to 'normal next morning' — and I felt heard, not upsold.",
    weeks: [
      { wk: "WK 1", note: "Soreness halved" },
      { wk: "WK 6", note: "Sleeping through the night" },
      { wk: "WK 16", note: "Lifting heavier than 5 years ago" },
    ],
  },
];

const Testimonials = () => (
  <section className="br-section" style={{ paddingTop: 56, paddingBottom: 56 }}>
    <div className="container">
      <div className="br-section-head">
        <div className="eyebrow">★ FROM PEOPLE WHO RAN THE PROTOCOL</div>
        <h2>What a real 12 weeks looks like.</h2>
        <p>Quotes verified by patient consent · individual results vary · not medical claims.</p>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))", gap: 18 }}>
        {TESTIMONIALS.map((t, i) => (
          <div key={i} style={{ background: "var(--paper-2)", borderRadius: 14, padding: "22px 24px", display: "flex", flexDirection: "column" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 14 }}>
              <div style={{ width: 44, height: 44, borderRadius: "50%", background: "var(--ink)", color: "var(--paper)", display: "grid", placeItems: "center", fontFamily: "var(--font-display)", fontWeight: 800 }}>{t.name[0]}</div>
              <div>
                <div style={{ fontWeight: 700, fontSize: 15 }}>{t.name}</div>
                <div style={{ fontSize: 11, fontFamily: "var(--font-mono)", color: "var(--muted)", letterSpacing: "0.05em" }}>{t.detail}</div>
              </div>
            </div>
            <div style={{ display: "inline-block", background: "var(--ink)", color: "var(--paper)", padding: "4px 10px", borderRadius: 999, fontSize: 11, fontFamily: "var(--font-mono)", letterSpacing: "0.08em", textTransform: "uppercase", marginBottom: 14, alignSelf: "flex-start" }}>
              GOAL · {t.goal}
            </div>
            <p style={{ fontSize: 14, lineHeight: 1.55, fontStyle: "italic", marginTop: 0, marginBottom: 16, flexGrow: 1 }}>"{t.quote}"</p>
            <div style={{ borderTop: "1px solid var(--paper-3)", paddingTop: 12 }}>
              {t.weeks.map(w => (
                <div key={w.wk} style={{ display: "grid", gridTemplateColumns: "60px 1fr", gap: 10, fontSize: 12, marginBottom: 4 }}>
                  <span style={{ fontFamily: "var(--font-mono)", letterSpacing: "0.1em", color: "var(--muted)" }}>{w.wk}</span>
                  <span style={{ color: "var(--ink)" }}>{w.note}</span>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
      <div style={{ marginTop: 18, fontSize: 10, fontFamily: "var(--font-mono)", color: "var(--muted)", letterSpacing: "0.05em", textAlign: "center" }}>
        ⓘ TESTIMONIALS SHOWN ARE COMPOSITE PREVIEWS — replace with real consented patient stories before launch.
      </div>
    </div>
  </section>
);

// ── Press strip ── [REPLACE_PRESS] ────────────────────────────────────────

const PressStrip = () => (
  <section style={{ padding: "32px 0", background: "var(--paper-2)", borderTop: "1px solid var(--paper-3)", borderBottom: "1px solid var(--paper-3)" }}>
    <div className="container">
      <div style={{ fontSize: 10, fontFamily: "var(--font-mono)", letterSpacing: "0.22em", color: "var(--muted)", textAlign: "center", textTransform: "uppercase", marginBottom: 14 }}>
        AS REFERENCED IN
      </div>
      <div style={{ display: "flex", justifyContent: "center", flexWrap: "wrap", gap: 32, alignItems: "center", opacity: 0.55 }}>
        {["MEN'S HEALTH", "WIRED", "OUTSIDE", "HUBERMAN LAB", "FAST COMPANY"].map(p => (
          <span key={p} style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 14, letterSpacing: "0.1em" }}>{p}</span>
        ))}
      </div>
      <div style={{ marginTop: 8, fontSize: 9, fontFamily: "var(--font-mono)", color: "var(--muted)", letterSpacing: "0.05em", textAlign: "center" }}>
        ⓘ PLACEHOLDER LOGOS — swap with real press features as they land.
      </div>
    </div>
  </section>
);

window.BR_TRUST = { MDReviewer, ComplianceStrip, Testimonials, PressStrip };