/* Per-archetype landing page — shared template.
 * Reads window.PARTNER_SLUG, pulls data from window.PARTNER_DATA[slug],
 * renders hero, why-yes, peptide stack, talk track, event explainer,
 * earnings calculator, what-you-get section, FAQ, and apply CTA.
 */

const ArchetypePage = () => {
  const data = window.PARTNER_CURRENT();
  const Header = window.Header;
  const Footer = window.Footer;
  const PartnerCalculator = window.PartnerCalculator;

  if (!data) {
    return (
      <div style={{ padding: 80, textAlign: "center", fontFamily: "var(--font-display)" }}>
        Partner archetype not found.
      </div>
    );
  }

  const accent = data.accent;
  const accentSoft = data.accentSoft;

  return (
    <div className="br-page partner-archetype" style={{ "--arch-accent": accent, "--arch-accent-soft": accentSoft }}>
      <Header active="partners" />

      {/* HERO */}
      <section className="archetype-hero">
        <div className="container">
          <div className="archetype-hero-grid">
            <div className="archetype-hero-left">
              <div className="archetype-eyebrow" style={{ color: accent }}>{data.eyebrow}</div>
              <h1 className="archetype-h1">
                {data.headline}
              </h1>
              <p className="archetype-sub">{data.subhead}</p>
              <div className="archetype-hero-stats">
                <div className="archetype-hero-stat">
                  <div className="archetype-hero-stat-label">Industry</div>
                  <div className="archetype-hero-stat-value">{data.industryStat}</div>
                </div>
                <div className="archetype-hero-stat">
                  <div className="archetype-hero-stat-label">Why this works</div>
                  <div className="archetype-hero-stat-value">{data.demoNote}</div>
                </div>
              </div>
              <div className="archetype-hero-cta">
                <a href="/partners/apply.html" className="btn btn-primary archetype-cta-primary" style={{ background: accent }}>
                  Apply to be a Certified Partner →
                </a>
                <a href="#calculator" className="btn btn-ghost archetype-cta-ghost">
                  Run my numbers
                </a>
              </div>
            </div>
            <div className="archetype-hero-right">
              <div className="archetype-glyph-frame" style={{ background: accentSoft }}>
                <div className="archetype-glyph-orb" style={{ background: accent }}>
                  <span style={{ color: "#fff", fontSize: 64 }}>★</span>
                </div>
                <div className="archetype-glyph-rings">
                  <div className="archetype-glyph-ring" style={{ borderColor: accent }} />
                  <div className="archetype-glyph-ring archetype-glyph-ring-2" style={{ borderColor: accent }} />
                  <div className="archetype-glyph-ring archetype-glyph-ring-3" style={{ borderColor: accent }} />
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* WHY YES */}
      <section className="archetype-section">
        <div className="container" style={{ maxWidth: 1080 }}>
          <div className="archetype-section-eyebrow" style={{ color: accent }}>★ WHY YOU SAY YES</div>
          <h2 className="archetype-h2">Built for the venue you actually run.</h2>
          <div className="archetype-why-grid">
            {data.whyYesBullets.map((bullet, i) => (
              <div key={i} className="archetype-why-card">
                <div className="archetype-why-num" style={{ color: accent, borderColor: accent }}>{String(i + 1).padStart(2, "0")}</div>
                <div className="archetype-why-text">{bullet}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* PEPTIDE STACK */}
      <section className="archetype-section archetype-section-tinted" style={{ background: accentSoft }}>
        <div className="container" style={{ maxWidth: 1080 }}>
          <div className="archetype-section-eyebrow" style={{ color: accent }}>★ THE STACK</div>
          <h2 className="archetype-h2">Peptides matched to your members.</h2>
          <p className="archetype-section-sub">
            Curated for {data.label.toLowerCase()}. Foundation peptides are FDA Cat 1 + established Rx (sermorelin, TRT, GLP-1, NAD+ oral). The Cat-2-pending peptides (BPC-157, GHK-Cu injectable) clip on after PCAC's July 2026 ruling.
          </p>
          <div className="archetype-stack-grid">
            {data.peptideStack.map((p, i) => (
              <div key={i} className="archetype-stack-card">
                <div className="archetype-stack-num" style={{ color: accent }}>{String(i + 1).padStart(2, "0")}</div>
                <div className="archetype-stack-name">{p.name}</div>
                <div className="archetype-stack-note">{p.note}</div>
                {p.slug && (
                  <a href={`/peptides/${p.slug}.html`} className="archetype-stack-link" style={{ color: accent }}>
                    Read deep-dive →
                  </a>
                )}
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* TALK TRACK */}
      <section className="archetype-section">
        <div className="container" style={{ maxWidth: 920 }}>
          <div className="archetype-section-eyebrow" style={{ color: accent }}>★ THE CONVERSATION</div>
          <h2 className="archetype-h2">{data.talkTrack.heading}</h2>
          <div className="archetype-talktrack">
            {data.talkTrack.lines.map((line, i) => (
              <div key={i} className="archetype-talktrack-line" style={{ borderLeftColor: accent }}>
                <span className="archetype-talktrack-num" style={{ background: accent }}>{i + 1}</span>
                <span>{line}</span>
              </div>
            ))}
          </div>
          <p className="archetype-talktrack-meta">
            We provide the full script library — what to say, what NEVER to say, how to redirect medical questions to the MD. Quiz-based 90-minute certification, free, self-paced.
          </p>
        </div>
      </section>

      {/* PEPTIDE DAY EVENT */}
      <section className="archetype-section archetype-section-dark">
        <div className="container" style={{ maxWidth: 1080 }}>
          <div className="archetype-event-grid">
            <div>
              <div className="archetype-section-eyebrow" style={{ color: accent }}>★ THE CATALYST</div>
              <h2 className="archetype-h2 archetype-h2-light">{data.eventName}</h2>
              <p className="archetype-event-blurb">{data.pepDayHook}</p>
              <p className="archetype-event-sub">{data.eventBlurb}</p>
            </div>
            <div className="archetype-event-stats">
              <div className="archetype-event-stat" style={{ borderTopColor: accent }}>
                <div className="archetype-event-stat-num">6 hrs</div>
                <div className="archetype-event-stat-label">MD on-site</div>
              </div>
              <div className="archetype-event-stat" style={{ borderTopColor: accent }}>
                <div className="archetype-event-stat-num">24</div>
                <div className="archetype-event-stat-label">Consult slots</div>
              </div>
              <div className="archetype-event-stat" style={{ borderTopColor: accent }}>
                <div className="archetype-event-stat-num">40-50%</div>
                <div className="archetype-event-stat-label">Convert to subscription</div>
              </div>
              <div className="archetype-event-stat" style={{ borderTopColor: accent }}>
                <div className="archetype-event-stat-num">Free</div>
                <div className="archetype-event-stat-label">We bring MD + signage + booking</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* EARNINGS CALCULATOR */}
      <section className="archetype-section archetype-section-calc" id="calculator">
        <div className="container" style={{ maxWidth: 1080 }}>
          <PartnerCalculator slug={data.slug} />
        </div>
      </section>

      {/* WHAT YOU GET */}
      <section className="archetype-section">
        <div className="container" style={{ maxWidth: 1080 }}>
          <div className="archetype-section-eyebrow" style={{ color: accent }}>★ WHAT YOU GET</div>
          <h2 className="archetype-h2">A complete partner enablement system.</h2>
          <p className="archetype-section-sub">
            Your venue is a brand. We make you look like one. Every piece below ships on Day 1.
          </p>
          <div className="archetype-getlist">
            {[
              { title: "Your unique referral link + QR code pack", desc: "peptides.cynthiaconcierge.com/p/[your-slug]. QR codes printable in 5 sizes. Every patient tagged to your venue forever.", icon: "★" },
              { title: "Co-branded landing page", desc: "Your logo, your photo, your colors — on a page that converts. Hosted by us. You don't touch infrastructure.", icon: "✦" },
              { title: "The Content Library", desc: "Peptide reference cards, dosing guides, sales scripts by archetype, FAQ + objection handlers, compliance cheat sheets, Peptide Day playbook.", icon: "✿" },
              { title: "The Campaign Library", desc: "12 pre-written email templates, 30 SMS templates, 50 social posts, 4 in-venue printable posters. Editable. Branded with your logo + your link.", icon: "✪" },
              { title: "One-click 'send to my list'", desc: "Connect Mailchimp / Klaviyo / Constant Contact / Mindbody / Square. We compose the blast. You hit send. FTC disclosure auto-appended.", icon: "❖" },
              { title: "Real-time dashboard", desc: "Clicks, consults booked, subscribers, MRR, leaderboard rank. Updated in real time. Tier-progress bar shows your path to higher retainer.", icon: "✷" },
              { title: "Superstar Peptides partner success system", desc: "Texts you weekly with what to share, what's converting, when your next event ships. Like having a sales-enablement team on retainer.", icon: "✺" },
              { title: "Monthly office hours + Slack community", desc: "Live Q&A with our medical director. Slack room for partners trading wins, scripts, and event playbooks.", icon: "✯" },
            ].map((item, i) => (
              <div key={i} className="archetype-get-card">
                <div className="archetype-get-icon" style={{ color: accent }}>{item.icon}</div>
                <div className="archetype-get-title">{item.title}</div>
                <div className="archetype-get-desc">{item.desc}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* NUTSHELL */}
      <section className="archetype-section archetype-section-tinted" style={{ background: accentSoft }}>
        <div className="container" style={{ maxWidth: 760 }}>
          <div className="archetype-section-eyebrow" style={{ color: accent }}>★ THE BOTTOM LINE</div>
          <h2 className="archetype-h2">{data.nutshell.title}</h2>
          <ul className="archetype-nutshell-list">
            {data.nutshell.bullets.map((b, i) => (
              <li key={i} className="archetype-nutshell-item">
                <span style={{ color: accent }}>★</span>
                <span>{b}</span>
              </li>
            ))}
          </ul>
        </div>
      </section>

      {/* FAQ */}
      <section className="archetype-section">
        <div className="container" style={{ maxWidth: 760 }}>
          <div className="archetype-section-eyebrow" style={{ color: accent }}>★ FAQ</div>
          <h2 className="archetype-h2">Real questions, real answers.</h2>
          <div className="archetype-faq">
            {data.faq.map((item, i) => (
              <FAQItem key={i} q={item.q} a={item.a} accent={accent} />
            ))}
          </div>
        </div>
      </section>

      {/* FINAL CTA */}
      <section className="archetype-section archetype-section-final">
        <div className="container" style={{ maxWidth: 720, textAlign: "center" }}>
          <h2 className="archetype-h2">Ready to be a Certified Partner?</h2>
          <p className="archetype-final-sub">
            5-minute application. 15-minute discovery call. 90-min cert. Live in under 30 days.
          </p>
          <a href="/partners/apply.html" className="btn btn-primary archetype-cta-primary archetype-cta-big" style={{ background: accent }}>
            Apply now →
          </a>
          <div className="archetype-final-meta">
            Questions first? Email <a href="mailto:partners@cynthiaconcierge.com">partners@cynthiaconcierge.com</a>
          </div>
        </div>
      </section>

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

const FAQItem = ({ q, a, accent }) => {
  const [open, setOpen] = React.useState(false);
  return (
    <div className={"archetype-faq-item" + (open ? " open" : "")} style={open ? { borderColor: accent } : {}}>
      <button className="archetype-faq-q" onClick={() => setOpen(!open)}>
        <span>{q}</span>
        <span className="archetype-faq-toggle" style={open ? { color: accent } : {}}>{open ? "−" : "+"}</span>
      </button>
      {open && <div className="archetype-faq-a">{a}</div>}
    </div>
  );
};

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