/* Master /partners hub — the umbrella page.
 * Sells the program to all venue types, lets them pick their archetype,
 * runs the earnings calculator with a venue picker, and showcases the
 * partner enablement system (library, campaigns, integrations, dashboard preview).
 */

const ARCHETYPE_CARDS = [
  {
    slug: "hair-salons",
    label: "Hair Salons",
    blurb: "Stylists already discuss thinning every visit. Now those conversations earn you recurring revenue.",
    accent: "#a3793a",
  },
  {
    slug: "yoga-studios",
    label: "Yoga + Pilates",
    blurb: "Members 28-55 AHHI $90K+ are searching longevity peptides. Be the studio that has the answer.",
    accent: "#7a5cad",
  },
  {
    slug: "chiropractors",
    label: "Chiropractors",
    blurb: "75% of your patients buy supplements somewhere. The only gap is the prescriber. We fill it.",
    accent: "#1e6d8c",
  },
  {
    slug: "gyms",
    label: "Gyms + PT Studios",
    blurb: "TRT, recovery, body comp — your athletes are already asking. You can finally say yes.",
    accent: "#b04434",
  },
  {
    slug: "boutique-fitness",
    label: "Fitness Chains (HQ deals)",
    blurb: "Crunch + Thrive. Equinox + Function. One signature unlocks 200-1,500 locations.",
    accent: "#2a2a2a",
  },
];

const INTEGRATION_LOGOS = [
  { name: "Mailchimp", category: "Email" },
  { name: "Klaviyo", category: "Email" },
  { name: "Constant Contact", category: "Email" },
  { name: "ConvertKit", category: "Email" },
  { name: "ActiveCampaign", category: "Email" },
  { name: "HubSpot", category: "CRM" },
  { name: "Mindbody", category: "Booking" },
  { name: "Vagaro", category: "Booking" },
  { name: "Square", category: "Booking" },
  { name: "Squire", category: "Booking" },
  { name: "Booker", category: "Booking" },
  { name: "Schedulicity", category: "Booking" },
  { name: "Glofox", category: "Booking" },
  { name: "Beehiiv", category: "Email" },
  { name: "Substack", category: "Email" },
  { name: "Apple/Google", category: "iMessage SMS" },
];

const PartnersHub = () => {
  const Header = window.Header;
  const Footer = window.Footer;
  const PartnerCalculator = window.PartnerCalculator;

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

      {/* HERO */}
      <section className="partners-hero">
        <div className="container">
          <div className="partners-hero-inner">
            <div className="partners-eyebrow">★ THE CYNTHIA PARTNER PROGRAM</div>
            <h1 className="partners-h1">
              Add a peptide revenue stream<br/>
              <span className="partners-h1-accent">to your business</span>.
            </h1>
            <p className="partners-sub">
              Gyms. Yoga + pilates. Hair salons. Chiropractors. Fitness chains. Your members are already asking about peptides — TRT, GLP-1, sermorelin, NAD+, recovery stacks. Become the venue that has the answer, without ever stocking, dispensing, or prescribing anything yourself.
            </p>
            <div className="partners-hero-stats">
              <div className="partners-hero-stat">
                <div className="partners-hero-stat-value">$30-80K</div>
                <div className="partners-hero-stat-label">Per-partner Y1 earnings</div>
              </div>
              <div className="partners-hero-stat">
                <div className="partners-hero-stat-value">$0</div>
                <div className="partners-hero-stat-label">Inventory + clinical liability</div>
              </div>
              <div className="partners-hero-stat">
                <div className="partners-hero-stat-value">90 min</div>
                <div className="partners-hero-stat-label">Total staff training</div>
              </div>
              <div className="partners-hero-stat">
                <div className="partners-hero-stat-value">30 days</div>
                <div className="partners-hero-stat-label">Application to live</div>
              </div>
            </div>
            <div className="partners-hero-cta">
              <a href="/partners/apply.html" className="btn btn-primary partners-cta-primary">
                Apply now →
              </a>
              <a href="#calculator" className="btn btn-ghost partners-cta-ghost">
                Run my numbers
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* HOW IT WORKS */}
      <section className="partners-section">
        <div className="container" style={{ maxWidth: 1080 }}>
          <div className="partners-section-eyebrow">★ HOW IT WORKS</div>
          <h2 className="partners-h2">A complete partnership stack — not a referral link.</h2>
          <p className="partners-section-sub">
            Most "affiliate programs" hand you a UTM link and disappear. We give you a real sales-rep enablement system. Materials, integrations, training, events, dashboards, and a partner success agent. You're treated like a sales channel — because you are one.
          </p>

          <div className="partners-howit-grid">
            {[
              { num: "01", title: "You apply + qualify", text: "5-min application. 15-min discovery call. Your venue type, geo, and customer base determine your per-patient marketing-services fee." },
              { num: "02", title: "We onboard you", text: "Your team takes a 90-min quiz-based cert. You get your unique referral link, QR code pack, co-branded landing page, and full content library." },
              { num: "03", title: "You connect your tools", text: "One-click connect Mailchimp, Klaviyo, Mindbody, Square, or any of 16+ supported tools. We pre-write every campaign — you click send." },
              { num: "04", title: "We send the MD", text: "Quarterly Peptide Days at your venue. We bring the MD, lab kits, branded signage. You provide the chairs and the customers." },
              { num: "05", title: "You get paid monthly", text: "Flat marketing-services fee per active tracked patient — paid every month they stay on a protocol. Never per-prescription. FMV-compliant." },
              { num: "06", title: "We run the rest", text: "Weekly check-ins, content drops, blast suggestions, dashboard alerts. Like having a sales-enablement team on retainer — automated." },
            ].map((step) => (
              <div key={step.num} className="partners-howit-card">
                <div className="partners-howit-num">{step.num}</div>
                <div className="partners-howit-title">{step.title}</div>
                <div className="partners-howit-text">{step.text}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ARCHETYPE PICKER */}
      <section className="partners-section partners-section-tinted">
        <div className="container" style={{ maxWidth: 1080 }}>
          <div className="partners-section-eyebrow">★ PICK YOUR ARCHETYPE</div>
          <h2 className="partners-h2">Built differently for every venue type.</h2>
          <p className="partners-section-sub">
            We don't run one generic program. The peptide stack, talk track, event format, and conversion playbook are tuned to your specific venue. Pick yours to see the deep-dive page.
          </p>
          <div className="partners-archetype-grid">
            {ARCHETYPE_CARDS.map((c) => (
              <a
                key={c.slug}
                href={`/partners/${c.slug}.html`}
                className="partners-archetype-card"
                style={{ "--card-accent": c.accent }}
              >
                <div className="partners-archetype-card-orb" style={{ background: c.accent }}>★</div>
                <div className="partners-archetype-card-label">{c.label}</div>
                <div className="partners-archetype-card-blurb">{c.blurb}</div>
                <div className="partners-archetype-card-cta">See the playbook →</div>
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* PARTNER ENABLEMENT — what they actually get */}
      <section className="partners-section">
        <div className="container" style={{ maxWidth: 1180 }}>
          <div className="partners-section-eyebrow">★ THE ENABLEMENT SYSTEM</div>
          <h2 className="partners-h2">Treated like a real sales channel — because you are one.</h2>
          <p className="partners-section-sub">
            Every partner ships with a complete enablement system on Day 1. Affiliate link. Content library. Campaign templates. Integration with your tools. Real-time dashboard. And Superstar Peptides — the AI partner success agent — running it all.
          </p>

          <div className="partners-enablement-grid">
            {/* Affiliate link block */}
            <div className="partners-enable-card partners-enable-card-feature">
              <div className="partners-enable-icon">★</div>
              <div className="partners-enable-title">Your unique referral link + QR pack</div>
              <div className="partners-enable-desc">
                Every partner gets a permanent URL — <code>peptides.cynthiaconcierge.com/p/[your-slug]</code> — with full attribution. Every patient who walks through is tagged to your venue forever, regardless of whether they bought today or in 8 months.
              </div>
              <div className="partners-enable-mock">
                <div className="partners-enable-mock-row">
                  <div className="partners-enable-mock-label">Your link</div>
                  <code>peptides.cynthiaconcierge.com/p/aurora-yoga-tx</code>
                </div>
                <div className="partners-enable-mock-row">
                  <div className="partners-enable-mock-label">QR codes</div>
                  <span>5 sizes — counter / locker / chair / poster / ad</span>
                </div>
                <div className="partners-enable-mock-row">
                  <div className="partners-enable-mock-label">Lifetime tagging</div>
                  <span>Cookie-less attribution via referral param + email match</span>
                </div>
              </div>
            </div>

            {/* Content library block */}
            <div className="partners-enable-card">
              <div className="partners-enable-icon">✿</div>
              <div className="partners-enable-title">The Content Library</div>
              <div className="partners-enable-desc">
                Sales guides, dosing references, FAQ + objection handlers, peptide deep-dives, compliance cheat sheets, Peptide Day playbook. Updated quarterly.
              </div>
              <ul className="partners-enable-list">
                <li>Peptide Reference (1-pager × 10)</li>
                <li>Dosing Quick-Cards (printable)</li>
                <li>Sales Scripts by venue type</li>
                <li>FAQ + Objection Handlers</li>
                <li>Compliance Cheat Sheet</li>
                <li>Peptide Day Playbook</li>
              </ul>
            </div>

            {/* Campaign library */}
            <div className="partners-enable-card">
              <div className="partners-enable-icon">✪</div>
              <div className="partners-enable-title">The Campaign Library</div>
              <div className="partners-enable-desc">
                Pre-written, ready to blast. Every template branded with YOUR logo + YOUR referral link auto-injected. Editable if you want to tweak.
              </div>
              <ul className="partners-enable-list">
                <li>12 email templates (per archetype + season)</li>
                <li>30 SMS templates</li>
                <li>50 social posts (Reels, IG, TikTok)</li>
                <li>4 in-venue printable posters</li>
                <li>FTC disclosure auto-appended</li>
              </ul>
            </div>

            {/* Integrations / blast */}
            <div className="partners-enable-card partners-enable-card-feature">
              <div className="partners-enable-icon">❖</div>
              <div className="partners-enable-title">One-click "send to my list"</div>
              <div className="partners-enable-desc">
                Connect your existing email/CRM/booking system. Pick a campaign template, hit send. Our system composes the email branded as you, with your referral link, and the FTC disclosure auto-appended. Your customer list never leaves your tool.
              </div>
              <div className="partners-integrations-grid">
                {INTEGRATION_LOGOS.map((logo) => (
                  <div key={logo.name} className="partners-integration-tile">
                    <div className="partners-integration-name">{logo.name}</div>
                    <div className="partners-integration-cat">{logo.category}</div>
                  </div>
                ))}
              </div>
              <div className="partners-enable-meta">
                Don't see your tool? We add new integrations on request — typical turnaround 2 weeks. SendGrid fallback available for any platform.
              </div>
            </div>

            {/* Dashboard preview */}
            <div className="partners-enable-card partners-enable-card-feature partners-enable-card-dark">
              <div className="partners-enable-icon" style={{ color: "var(--lime)" }}>✷</div>
              <div className="partners-enable-title" style={{ color: "var(--paper)" }}>Real-time Partner Dashboard</div>
              <div className="partners-enable-desc" style={{ color: "rgba(255,255,255,0.75)" }}>
                Clicks, consults booked, subscribers, MRR, leaderboard rank. Updated in real time. Tier-progress bar shows your path to higher retainer.
              </div>
              <div className="partners-dashboard-mock">
                <div className="partners-dash-row">
                  <div className="partners-dash-stat">
                    <div className="partners-dash-stat-num">412</div>
                    <div className="partners-dash-stat-label">Link clicks (30d)</div>
                  </div>
                  <div className="partners-dash-stat">
                    <div className="partners-dash-stat-num">38</div>
                    <div className="partners-dash-stat-label">Consults booked</div>
                  </div>
                  <div className="partners-dash-stat">
                    <div className="partners-dash-stat-num">17</div>
                    <div className="partners-dash-stat-label">New subscribers</div>
                  </div>
                  <div className="partners-dash-stat partners-dash-stat-highlight">
                    <div className="partners-dash-stat-num">$4,200</div>
                    <div className="partners-dash-stat-label">Patient MRR you drove</div>
                  </div>
                </div>
                <div className="partners-dash-tier">
                  <div className="partners-dash-tier-label">Recurring this month: <strong>$1,200/mo</strong></div>
                  <div className="partners-dash-tier-bar"><div className="partners-dash-tier-fill" style={{ width: "62%" }} /></div>
                  <div className="partners-dash-tier-meta">+12 patients vs. last month → <strong>+$360/mo</strong> next pay cycle.</div>
                </div>
              </div>
            </div>

            {/* Superstar Peptides */}
            <div className="partners-enable-card">
              <div className="partners-enable-icon">✺</div>
              <div className="partners-enable-title">Superstar Peptides — your AI partner success agent</div>
              <div className="partners-enable-desc">
                Texts you weekly with what to share, what's converting, when your next event ships. Answers any question — sales scripts, dosing references, "is this peptide for [client]?" — over iMessage / SMS / Slack.
              </div>
              <div className="partners-enable-mock">
                <div className="partners-cynthia-bubble partners-cynthia-bubble-her">
                  Heads up — your link converted 4 patients this week (best week yet). Want me to compose a thank-you blast for your Sunday newsletter? Y/N.
                </div>
                <div className="partners-cynthia-bubble partners-cynthia-bubble-you">Y</div>
                <div className="partners-cynthia-bubble partners-cynthia-bubble-her">
                  Done. Drafted 2 versions in your dashboard. Both have your link + the FTC disclosure. Send when ready.
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* CALCULATOR */}
      <section className="partners-section partners-section-calc" id="calculator">
        <div className="container" style={{ maxWidth: 1080 }}>
          <div className="partners-section-eyebrow">★ EARNINGS CALCULATOR</div>
          <h2 className="partners-h2">Plug in your numbers.</h2>
          <p className="partners-section-sub">
            Pick your venue, slide your member count + conversion %, see your monthly recurring. Marketing-services fee per active tracked patient — flat, FMV-compliant, never per-prescription.
          </p>
          <PartnerCalculator />
        </div>
      </section>

      {/* COMPLIANCE TRUST */}
      <section className="partners-section partners-section-tinted">
        <div className="container" style={{ maxWidth: 920 }}>
          <div className="partners-section-eyebrow">★ COMPLIANCE — WE CARRY IT</div>
          <h2 className="partners-h2">Built to survive every law that matters.</h2>
          <div className="partners-compliance-grid">
            <div className="partners-compliance-card">
              <div className="partners-compliance-stat">PC-MSO</div>
              <div className="partners-compliance-text">
                Friendly-PC structure: physicians own the medical entity, MSO owns marketing/tech. You partner with the MSO. Industry standard for telehealth.
              </div>
            </div>
            <div className="partners-compliance-card">
              <div className="partners-compliance-stat">FMV</div>
              <div className="partners-compliance-text">
                Your retainer is set in advance by a third-party valuator and disclosed annually. Survives state anti-kickback statutes (CA, FL, TX, NY). OIG Advisory Opinion 25-03 is the playbook.
              </div>
            </div>
            <div className="partners-compliance-card">
              <div className="partners-compliance-stat">FTC</div>
              <div className="partners-compliance-text">
                Every endorsement template ships with FTC material-connection disclosure auto-appended. We provide every disclosure language sample. You stay protected.
              </div>
            </div>
            <div className="partners-compliance-card">
              <div className="partners-compliance-stat">503A/B</div>
              <div className="partners-compliance-text">
                Our pharmacy partners are FDA-registered 503A/B compounders. Your venue never holds product. The Rx, the dispensing, the liability — all on us.
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* SOCIAL PROOF / TESTIMONIAL PLACEHOLDER */}
      <section className="partners-section partners-section-quote">
        <div className="container" style={{ maxWidth: 720, textAlign: "center" }}>
          <div className="partners-quote-mark">"</div>
          <p className="partners-quote-body">
            We've added a recurring revenue line that compounds while my chairs do what they always do. Stylists love the Peptide Days. Clients ask about them. And my retainer hits the same day every month — no inventory, no headaches, no exposure.
          </p>
          <div className="partners-quote-attrib">
            — [Pilot partner testimonial — coming after Phase 2]
          </div>
        </div>
      </section>

      {/* FINAL CTA */}
      <section className="partners-section partners-section-final">
        <div className="container" style={{ maxWidth: 720, textAlign: "center" }}>
          <h2 className="partners-h2 partners-h2-light">Ready when you are.</h2>
          <p className="partners-final-sub">
            5-minute application. 15-minute discovery call. 90-min cert. Live in under 30 days. We're selecting our pilot cohort now.
          </p>
          <a href="/partners/apply.html" className="btn btn-primary partners-cta-primary partners-cta-big">
            Apply to be a Certified Partner →
          </a>
          <div className="partners-final-meta">
            Questions? Email <a href="mailto:partners@cynthiaconcierge.com">partners@cynthiaconcierge.com</a> · Or chat with us (bottom right)
          </div>
        </div>
      </section>

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

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