/* Partner Playbook viewer — the visible content library.
 * Tabbed interface: Peptide Reference / Dosing / Sales Scripts /
 * Email Templates / Compliance / Peptide Day Playbook.
 * Public-facing version (3 free, rest require login). Real partners
 * see the full library in the dashboard.
 */

const TABS = [
  { id: "peptides", label: "Peptide Reference", free: true },
  { id: "dosing", label: "Dosing Quick-Cards", free: true },
  { id: "scripts", label: "Sales Scripts", free: true },
  { id: "emails", label: "Email Templates", free: false },
  { id: "compliance", label: "Compliance Cheat Sheet", free: false },
  { id: "events", label: "Peptide Day Playbook", free: false },
];

const PEPTIDE_REFERENCES = [
  {
    name: "Sermorelin",
    slug: "sermorelin",
    cls: "GHRH analog",
    benefits: ["Sleep depth", "Recovery", "Lean mass", "Skin"],
    fdaStatus: "Cat 1 (safe to compound)",
    typicalSpend: "$220-280/mo",
  },
  {
    name: "NAD+ (oral)",
    slug: "nad-plus",
    cls: "Coenzyme",
    benefits: ["Energy", "Mitochondrial support", "Longevity framing", "Cognitive"],
    fdaStatus: "Established supplement",
    typicalSpend: "$150-220/mo",
  },
  {
    name: "GHK-Cu (topical)",
    slug: "ghk-cu",
    cls: "Tripeptide",
    benefits: ["Skin clarity", "Scalp health", "Wound healing"],
    fdaStatus: "Cat 1 topical / Cat 2 injectable (PCAC pending)",
    typicalSpend: "$80-120/mo",
  },
  {
    name: "Glutathione",
    slug: "glutathione",
    cls: "Tripeptide antioxidant",
    benefits: ["Inflammation", "Skin", "Detox", "Recovery"],
    fdaStatus: "Established",
    typicalSpend: "$130-180/mo",
  },
  {
    name: "Selank",
    slug: "selank",
    cls: "Anxiolytic peptide",
    benefits: ["Stress", "Anxiety", "Sleep architecture"],
    fdaStatus: "Cat 2 (PCAC pending)",
    typicalSpend: "$140-180/mo",
  },
  {
    name: "BPC-157",
    slug: "bpc-157",
    cls: "Pentadecapeptide",
    benefits: ["Tendon healing", "Gut", "Joint recovery"],
    fdaStatus: "Cat 2 (PCAC pending July 2026)",
    typicalSpend: "$200-280/mo",
  },
  {
    name: "Ipamorelin",
    slug: "ipamorelin",
    cls: "GHRP",
    benefits: ["GH pulses", "Lean mass", "Recovery"],
    fdaStatus: "Cat 2 (PCAC pending)",
    typicalSpend: "$220-300/mo",
  },
  {
    name: "TRT (testosterone)",
    slug: null,
    cls: "Bioidentical hormone",
    benefits: ["Energy", "Recovery", "Body comp", "Mood"],
    fdaStatus: "FDA-approved Rx",
    typicalSpend: "$180-260/mo",
  },
];

const DOSING_CARDS = [
  {
    peptide: "Sermorelin",
    dose: "200-300 mcg SC",
    cadence: "Nightly, 5 nights/week",
    cycle: "12 weeks on / 4 off",
    when: "Bedtime, empty stomach",
    note: "GH pulses follow ~30 min after — sleep is downstream.",
  },
  {
    peptide: "GHK-Cu (topical)",
    dose: "0.05% serum",
    cadence: "AM + PM application",
    cycle: "Continuous",
    when: "Clean dry skin/scalp",
    note: "Stack under sunscreen AM. Layer well at PM.",
  },
  {
    peptide: "NAD+ (oral)",
    dose: "300-500 mg",
    cadence: "Morning, daily",
    cycle: "Ongoing",
    when: "With food",
    note: "Build slowly — start at 250 mg if sensitive.",
  },
  {
    peptide: "Glutathione",
    dose: "200 mg liposomal",
    cadence: "AM + PM",
    cycle: "Ongoing",
    when: "Empty stomach",
    note: "Best paired with N-acetylcysteine for synthesis.",
  },
  {
    peptide: "TRT",
    dose: "Per MD — typically 100-150 mg/wk SC",
    cadence: "1-2× weekly injections OR daily SC",
    cycle: "Ongoing with quarterly labs",
    when: "Same time of day",
    note: "Clinic monitors estradiol, hematocrit, PSA quarterly.",
  },
];

const SALES_SCRIPTS = {
  "hair-salons": {
    title: "Sales scripts — Hair Salons",
    scripts: [
      {
        scenario: "Mid-cut conversation about thinning",
        script: '"I see this all the time at the part — totally common. My salon partners with a telehealth MD who specializes in this. There\'s a peptide called sermorelin that supports the growth phase, plus a topical GHK-Cu that helps the scalp. Want me to text you the link? Free 15-min consult, no pressure."',
      },
      {
        scenario: "Color appointment, post-chemical",
        script: '"While we wait for that to set — your hair needs more support after this kind of color. our Peptide Partner has a recovery stack — GHK-Cu and glutathione. I can send you the QR code if you want to read more later."',
      },
      {
        scenario: "Client asks 'what is sermorelin?'",
        script: '"Best to hear it from the MD — they explain it WAY better than I can, and it\'s free to chat with them. Here\'s the link." [Hand them the QR card]',
      },
      {
        scenario: "What you NEVER say",
        script: '"You should take sermorelin." / "200 micrograms per night." / "It cured my friend\'s hair loss." \n\nAll three cross into medical advice. Always redirect to the MD link.',
      },
    ],
  },
  "yoga-studios": {
    title: "Sales scripts — Yoga + Pilates Studios",
    scripts: [
      {
        scenario: "Pre-class announcement (occasional, not every class)",
        script: '"Quick note — for anyone who\'s been asking about NAD+ or longevity peptides, our telehealth MD partner has a free MD consult — link\'s on the wall and in tomorrow\'s newsletter. We\'re hosting a Peptide Longevity Day [date] for members."',
      },
      {
        scenario: "1:1 with a member after class",
        script: '"How\'s your sleep been? You mentioned you\'re trying to dial it in. Our partner Superstar Peptides has a sermorelin/selank stack specifically for sleep architecture. Free 15-min consult — link\'s on the back of your member card."',
      },
      {
        scenario: "Member asks about GLP-1",
        script: '"We carry it but we don\'t lead with it — it\'s your call. The MD will help you decide if it\'s right for your goals. The link covers everything."',
      },
      {
        scenario: "What you NEVER say",
        script: '"Try [peptide] for [condition]." / "I take it and feel amazing." / "It\'ll definitely help your [symptom]." \n\nTeacher = connector, not clinician. Always to the link.',
      },
    ],
  },
  "chiropractors": {
    title: "Sales scripts — Chiropractors",
    scripts: [
      {
        scenario: "Active injury patient",
        script: '"This [tendon/ligament] is healing slower than I\'d like. There\'s a peptide called BPC-157 that has solid evidence for tendon repair — once it\'s through the FDA review (expected July 2026). In the meantime, our partner MD can put you on a sermorelin recovery stack right now. Want me to send you the consult link?"',
      },
      {
        scenario: "Chronic recovery patient",
        script: '"You\'ve plateaued on the table work. Recovery peptides — sermorelin, glutathione, NAD+ — would be the next layer. My telehealth MD partner We handle all the prescribing. 15-min consult is free. Here\'s the QR code."',
      },
      {
        scenario: "Patient already buying supplements",
        script: '"What you\'re taking is great. Want to dial in further? Our partner MD can prescribe peptides that go deeper than supplements — same recovery focus, different mechanism. Free consult — I\'ll send the link."',
      },
      {
        scenario: "What you NEVER say",
        script: '"You need to take BPC-157." / "Stop your other treatment." / "I prescribe peptides." (You don\'t — the MD does.) \n\nYou\'re the recommender. The MD is the prescriber.',
      },
    ],
  },
  "gyms": {
    title: "Sales scripts — Gyms + PT Studios",
    scripts: [
      {
        scenario: "Member asking about TRT",
        script: '"Honestly the smartest move is talk to a real MD — labs first, then a protocol if it makes sense. We partner with our telehealth MD, free 15-min consult, link\'s at the front desk. Best $0 you\'ll spend on your training this year."',
      },
      {
        scenario: "Recovery conversation",
        script: '"Recovery is where the gains live. Superstar Peptides has a sermorelin/BPC-157/glutathione recovery stack — MD-prescribed. 15 min on the phone with them and you\'ll know if it fits your training. QR code\'s by the squat rack."',
      },
      {
        scenario: "Body comp / cut/bulk talk",
        script: '"GLP-1 is real but it\'s not a shortcut for someone training as hard as you. Superstar Peptides has options — TRT, sermorelin, ipamorelin — that work WITH the training instead of replacing it. Talk to the MD before deciding anything."',
      },
      {
        scenario: "What you NEVER say",
        script: '"Run [X] mg of [peptide] for [Y] weeks." / "Test cyp is way better than test enth." / "I dose this myself." \n\nTrainer = connector. Send everything through the MD.',
      },
    ],
  },
};

const EMAIL_TEMPLATES = [
  {
    archetype: "hair-salons",
    subject: "Quick heads-up — peptide hair stack now available",
    preview: "Did you know sermorelin + GHK-Cu can support your hair growth phase? Our our partner MD is now offering free 15-min consults to anyone curious — link below. — [Stylist] @ [Salon]",
  },
  {
    archetype: "yoga-studios",
    subject: "Members-only invite — Peptide Longevity Day",
    preview: "Saturday [date]. Our our partner MD is hosting a Longevity Day at the studio — pre-class lab draw, post-class consult, NAD+/sermorelin/selank stack discussion. 24 slots, members first. — [Studio]",
  },
  {
    archetype: "chiropractors",
    subject: "New: recovery peptide protocols for [Practice] patients",
    preview: "We've been talking with our patients about supporting tissue recovery between visits. We've partnered with our telehealth MD partner, who can prescribe sermorelin and (soon) BPC-157 protocols. Free 15-min consult. — Dr. [Name]",
  },
  {
    archetype: "gyms",
    subject: "Performance peptides — finally a real path",
    preview: "TRT, sermorelin, recovery peptides — all the conversations you've been having in the parking lot. Our new partner our telehealth MD partner (, free consults) is here to help you dial it in for real. Link below. — [Gym]",
  },
];

const PlaybookViewer = () => {
  const Header = window.Header;
  const Footer = window.Footer;
  const [tab, setTab] = React.useState("peptides");
  const [scriptArchetype, setScriptArchetype] = React.useState("hair-salons");

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

      <section className="playbook-hero">
        <div className="container" style={{ maxWidth: 1080 }}>
          <div className="playbook-eyebrow">★ THE PARTNER PLAYBOOK</div>
          <h1 className="playbook-h1">
            Everything your team uses on Day 1.
          </h1>
          <p className="playbook-sub">
            This is a preview of the Superstar Peptides Partner Library — the content, scripts, dosing guides, email templates, compliance sheets, and event playbooks every Certified Partner gets access to. Browse a sample below. Full access ships when you're approved.
          </p>
        </div>
      </section>

      <section className="playbook-tabs-wrap">
        <div className="container" style={{ maxWidth: 1080 }}>
          <div className="playbook-tabs">
            {TABS.map((t) => (
              <button
                key={t.id}
                onClick={() => setTab(t.id)}
                className={"playbook-tab" + (tab === t.id ? " active" : "")}
              >
                {t.label}
                {!t.free && <span className="playbook-lock">★ partners only</span>}
              </button>
            ))}
          </div>
        </div>
      </section>

      <section className="playbook-section">
        <div className="container" style={{ maxWidth: 1080 }}>
          {tab === "peptides" && (
            <>
              <h2 className="playbook-h2">Peptide Reference</h2>
              <p className="playbook-section-sub">One-page summary per peptide. Mechanism in plain English, who it's for, FDA status, typical patient spend.</p>
              <div className="playbook-pep-grid">
                {PEPTIDE_REFERENCES.map((p) => (
                  <div key={p.name} className="playbook-pep-card">
                    <div className="playbook-pep-name">{p.name}</div>
                    <div className="playbook-pep-class">{p.cls}</div>
                    <div className="playbook-pep-benefits">
                      {p.benefits.map((b) => <span key={b} className="playbook-pep-chip">{b}</span>)}
                    </div>
                    <div className="playbook-pep-meta">
                      <div><span>FDA:</span> {p.fdaStatus}</div>
                      <div><span>Typical spend:</span> {p.typicalSpend}</div>
                    </div>
                    {p.slug && (
                      <a href={`/peptides/${p.slug}.html`} className="playbook-pep-link">Deep dive →</a>
                    )}
                  </div>
                ))}
              </div>
            </>
          )}

          {tab === "dosing" && (
            <>
              <h2 className="playbook-h2">Dosing Quick-Cards</h2>
              <p className="playbook-section-sub">Reference only — the MD always calibrates. These are what your staff sees so they can speak intelligently when asked. Print-ready.</p>
              <div className="playbook-dose-grid">
                {DOSING_CARDS.map((c) => (
                  <div key={c.peptide} className="playbook-dose-card">
                    <div className="playbook-dose-name">{c.peptide}</div>
                    <div className="playbook-dose-row"><span>Dose:</span><strong>{c.dose}</strong></div>
                    <div className="playbook-dose-row"><span>Cadence:</span><strong>{c.cadence}</strong></div>
                    <div className="playbook-dose-row"><span>Cycle:</span><strong>{c.cycle}</strong></div>
                    <div className="playbook-dose-row"><span>When:</span><strong>{c.when}</strong></div>
                    <div className="playbook-dose-note">{c.note}</div>
                  </div>
                ))}
              </div>
              <div className="playbook-dose-disclaimer">
                ★ <strong>Reference only.</strong> Real doses are set by our MD-of-record per patient based on labs, weight, comorbidities, and goals. Staff never quote doses to clients — always redirect to the consult.
              </div>
            </>
          )}

          {tab === "scripts" && (
            <>
              <h2 className="playbook-h2">Sales Scripts by Venue Type</h2>
              <p className="playbook-section-sub">What your staff actually says. Pick your archetype to see the script library.</p>
              <div className="playbook-script-pills">
                {Object.keys(SALES_SCRIPTS).map((k) => (
                  <button
                    key={k}
                    onClick={() => setScriptArchetype(k)}
                    className={"playbook-script-pill" + (scriptArchetype === k ? " active" : "")}
                  >
                    {window.PARTNER_DATA[k].label}
                  </button>
                ))}
              </div>
              <h3 className="playbook-script-title">{SALES_SCRIPTS[scriptArchetype].title}</h3>
              <div className="playbook-script-list">
                {SALES_SCRIPTS[scriptArchetype].scripts.map((s, i) => (
                  <div key={i} className="playbook-script-item">
                    <div className="playbook-script-scenario">★ {s.scenario}</div>
                    <div className="playbook-script-body">{s.script}</div>
                  </div>
                ))}
              </div>
            </>
          )}

          {tab === "emails" && (
            <>
              <h2 className="playbook-h2">Email Templates</h2>
              <p className="playbook-section-sub">12 pre-written templates per archetype. Branded with your logo + your referral link auto-injected. FTC disclosure auto-appended. Sample preview below — full library in the partner dashboard.</p>
              <div className="playbook-email-grid">
                {EMAIL_TEMPLATES.map((e, i) => (
                  <div key={i} className="playbook-email-card">
                    <div className="playbook-email-archetype">{window.PARTNER_DATA[e.archetype].label}</div>
                    <div className="playbook-email-subject">{e.subject}</div>
                    <div className="playbook-email-preview">{e.preview}</div>
                    <div className="playbook-email-foot">
                      <span>FTC disclosure auto-appended ✓</span>
                      <span>Your link injected ✓</span>
                    </div>
                  </div>
                ))}
              </div>
              <div className="playbook-locked-note">
                ★ <strong>Full library has 60+ email templates</strong> across all 5 archetypes + seasonal variants (New Year, summer, member-renewal, post-event, win-back). Plus 30 SMS templates and 50 social posts. Available in your partner dashboard after onboarding.
              </div>
            </>
          )}

          {tab === "compliance" && (
            <>
              <h2 className="playbook-h2">Compliance Cheat Sheet</h2>
              <p className="playbook-section-sub">The "what to say / never say" rules. Memorize the never-say column. Always say column is in your scripts.</p>
              <div className="playbook-comp-grid">
                <div className="playbook-comp-col playbook-comp-col-yes">
                  <div className="playbook-comp-title">★ ALWAYS SAY</div>
                  <ul>
                    <li>"Our partner MD specializes in this — here's the link"</li>
                    <li>"It's a free 15-minute consult"</li>
                    <li>"They'll figure out if it's a fit"</li>
                    <li>"Here's a peptide reference card if you want to read more first"</li>
                    <li>"We host quarterly Peptide Days at the studio"</li>
                  </ul>
                </div>
                <div className="playbook-comp-col playbook-comp-col-no">
                  <div className="playbook-comp-title">★ NEVER SAY</div>
                  <ul>
                    <li>"You should take [peptide]"</li>
                    <li>"[Specific dose] for [specific duration]"</li>
                    <li>"It cured my [symptom]"</li>
                    <li>"It's better than [other treatment]"</li>
                    <li>"It's safe for everyone"</li>
                    <li>"You don't need labs"</li>
                  </ul>
                </div>
              </div>
              <div className="playbook-locked-note">
                ★ Full sheet covers FTC disclosure language (per platform), state-specific notes (CA/FL/TX/NY/AZ priority), and a flowchart for redirecting medical questions. In your dashboard.
              </div>
            </>
          )}

          {tab === "events" && (
            <>
              <h2 className="playbook-h2">Peptide Day Playbook</h2>
              <p className="playbook-section-sub">A Peptide Day in 18 steps. We handle ~14 of them. You handle 4.</p>
              <div className="playbook-events-timeline">
                {[
                  { phase: "T-30 days", you: "Set the date with your Superstar Peptides partner success agent.", us: "We confirm MD availability + lab kit shipping + branded signage order." },
                  { phase: "T-21 days", you: "—", us: "We send your branded promo kit: email template, social posts, in-venue posters, member SMS template." },
                  { phase: "T-14 days", you: "Send the email blast (one click via your CRM integration).", us: "We auto-inject your link, FTC disclosure, and event details." },
                  { phase: "T-7 days", you: "—", us: "We push social reminders, send pre-event SMS, prep MD with your venue brief." },
                  { phase: "T-2 days", you: "Confirm your space, table setup, optional refreshments.", us: "Lab kits ship overnight to your venue. MD travel confirmed." },
                  { phase: "Event day", you: "Greet members, manage walk-ins, take photos.", us: "MD runs 15-min consults × 24 slots. Lab draws on-site." },
                  { phase: "T+1 day", you: "—", us: "All consult-takers get follow-up texts from Superstar Peptides to convert to subscription." },
                  { phase: "T+7 days", you: "—", us: "Conversion report in your dashboard. Tier progress updated. Content drop sent: post-event Reels + recap email." },
                ].map((s, i) => (
                  <div key={i} className="playbook-event-row">
                    <div className="playbook-event-phase">{s.phase}</div>
                    <div className="playbook-event-cells">
                      <div className="playbook-event-cell">
                        <div className="playbook-event-cell-label">YOU</div>
                        <div className="playbook-event-cell-body">{s.you}</div>
                      </div>
                      <div className="playbook-event-cell playbook-event-cell-us">
                        <div className="playbook-event-cell-label">CYNTHIA</div>
                        <div className="playbook-event-cell-body">{s.us}</div>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </>
          )}
        </div>
      </section>

      <section className="partners-section partners-section-final">
        <div className="container" style={{ maxWidth: 720, textAlign: "center" }}>
          <h2 className="partners-h2 partners-h2-light">Want the full playbook?</h2>
          <p className="partners-final-sub">Apply to be a Certified Partner — 5-minute application, 15-minute discovery call, and you're in.</p>
          <a href="/partners/apply.html" className="btn btn-primary partners-cta-primary partners-cta-big">
            Apply now →
          </a>
        </div>
      </section>

      <Footer />
    </div>
  );
};

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