/* global React, Section, Placeholder, useReveal */

/* ============================================================
   07 — WHO'S INSIDE
   Eight "A Maverick who..." cards with industry tags.
   ============================================================ */
function WhoInsideSection() {
  const cards = [
    { body: 'Built a power company from scratch in South Africa. And created a transformative thesis of change to empower the communities they build in.', tag: 'Renewable energy' },
    { body: 'Exited after 26 years. Now chasing impact.', tag: 'B2B Platform' },
    { body: 'Ran a billion-dollar brand. Now designs at the edge of beauty and soul.', tag: 'Brand & strategy' },
    { body: 'Built (and exited) 400+ educational centers.', tag: 'Education' },
    { body: 'Stewards thousands of acres of bamboo for a more sustainable world.', tag: 'Sustainability' },
    { body: 'Sold for 18x when the industry standard was 2-3x.', tag: 'Exit strategy' },
    { body: 'Reinvented how farmers become organic.', tag: 'Agriculture' },
    { body: 'Negotiated hostages for the FBI. Then sold 5M+ copies of his book.', tag: 'Negotiation & author' },
  ];

  return (
    <Section id="inside" num={7} kicker="Who's inside">
      <h2 className="h-serif inside-h">Meet a few Mavericks.</h2>

      <div className="inside-grid">
        {cards.map((c, i) => (
          <article key={i} className="mvk-card">
            <span className="mvk-prefix">A Maverick who...</span>
            <p className="mvk-body">{c.body}</p>
            <span className="mvk-tag">{c.tag}</span>
          </article>
        ))}
      </div>

      <p className="mvk-foot">And 110+ other Mavericks to connect with.</p>

      <style>{`
        .inside-h {
          font-size: clamp(36px, 5.6vw, 56px);
          line-height: 1.04;
          letter-spacing: -0.015em;
          color: var(--ink);
          margin-bottom: 40px;
        }
        .inside-grid {
          display: grid;
          grid-template-columns: 1fr;
          gap: 10px;
        }
        @media (min-width: 600px) { .inside-grid { grid-template-columns: 1fr 1fr; } }
        @media (min-width: 1000px) { .inside-grid { grid-template-columns: repeat(4, 1fr); } }

        .mvk-card {
          background: var(--bg-elev);
          border: 1px solid var(--rule);
          border-radius: 6px;
          padding: 18px;
          min-height: 180px;
          display: flex;
          flex-direction: column;
          gap: 12px;
        }
        .mvk-prefix {
          font-family: var(--serif);
          font-style: italic;
          font-size: 13px;
          color: var(--green);
        }
        .mvk-body {
          font-family: var(--serif);
          font-size: 15px;
          line-height: 1.45;
          color: var(--ink);
          text-wrap: pretty;
        }
        .mvk-tag {
          margin-top: auto;
          font-family: var(--sans);
          font-size: 10px;
          letter-spacing: 0.14em;
          text-transform: uppercase;
          color: var(--ink-mute);
        }
        .mvk-foot {
          margin-top: 28px;
          font-family: var(--serif);
          font-style: italic;
          font-size: clamp(15px, 1.8vw, 17px);
          color: var(--ink-2);
        }
      `}</style>
    </Section>
  );
}

/* ============================================================
   08 — TESTIMONIALS
   Boipelo hero quote + 3 supporting.
   ============================================================ */
function TestimonialsSection() {
  const supports = [
    { name: 'Scott Thompson', role: 'Maverick Mentor', quote: 'Maverick really is my family. It\'s literally transformed my life.' },
    { name: 'Danette May', role: 'Founder, Speaker, Author', quote: 'There\'s a component of magic you\'ll experience that\'s really hard to explain.' },
    { name: 'Marie Elizabeth Mali', role: 'Founder, CEO, Speaker', quote: 'Fun and play, excellence and growth — it\'s hitting all the boxes for me.' },
  ];

  return (
    <Section id="testimonials" num={8} kicker="In their own words">
      <h3 className="h-serif test-h">What Mavericks say.</h3>

      <div className="t-hero">
        <blockquote className="h-serif t-hero-text">
          <span className="t-hero-q">&ldquo;</span>
          I never knew there were other <em>'weird' people like me.</em>
          <span className="t-hero-q">&rdquo;</span>
        </blockquote>
        <div className="t-hero-attrib">
          <div className="t-avatar">
            <Placeholder label="BM" sub="Boipelo" ratio="1 / 1" />
          </div>
          <div>
            <div className="t-name">Boipelo Moloabi</div>
            <div className="t-role">Maverick of Energy</div>
          </div>
        </div>
      </div>

      <div className="t-supports">
        {supports.map((s) => (
          <figure key={s.name} className="t-support">
            <blockquote className="t-support-q">&ldquo;{s.quote}&rdquo;</blockquote>
            <figcaption className="t-support-cap">
              <div className="t-support-avatar">
                <Placeholder label={s.name[0]} sub="Avatar" ratio="1 / 1" />
              </div>
              <div>
                <div className="t-name">{s.name}</div>
                <div className="t-role">{s.role}</div>
              </div>
            </figcaption>
          </figure>
        ))}
      </div>

      <style>{`
        .test-h {
          font-style: italic;
          font-size: clamp(26px, 3.6vw, 36px);
          color: var(--ink);
          margin-bottom: 40px;
        }
        .t-hero { max-width: 980px; margin-bottom: 72px; }
        .t-hero-text {
          font-size: clamp(32px, 6vw, 64px);
          line-height: 1.18;
          font-style: italic;
          letter-spacing: -0.012em;
          color: var(--ink);
          font-weight: 400;
          text-wrap: pretty;
        }
        .t-hero-text em { color: var(--green); font-style: italic; }
        .t-hero-q { color: var(--green); font-style: normal; padding: 0 2px; }
        .t-hero-attrib { display: flex; gap: 14px; align-items: center; margin-top: 28px; }
        .t-avatar { width: 44px; height: 44px; }
        .t-avatar .ph { width: 100%; height: 100%; border-radius: 50%; padding: 0; font-size: 11px; }
        .t-name { font-family: var(--serif); font-size: 14px; color: var(--ink); }
        .t-role { font-family: var(--serif); font-style: italic; font-size: 12px; color: var(--ink-faint); margin-top: 2px; }

        .t-supports {
          display: grid;
          grid-template-columns: 1fr;
          gap: 28px;
          padding-top: 36px;
          border-top: 1px solid var(--rule);
        }
        @media (min-width: 800px) { .t-supports { grid-template-columns: repeat(3, 1fr); gap: 28px; } }
        .t-support { margin: 0; }
        .t-support-q {
          font-family: var(--serif);
          font-size: 15px;
          line-height: 1.6;
          color: var(--ink-2);
          margin: 0 0 18px;
        }
        .t-support-cap {
          display: flex; align-items: center; gap: 12px;
          padding-top: 14px;
          border-top: 1px solid var(--rule);
        }
        .t-support-avatar { width: 32px; height: 32px; flex-shrink: 0; }
        .t-support-avatar .ph { width: 100%; height: 100%; border-radius: 50%; padding: 0; font-size: 10px; }
      `}</style>
    </Section>
  );
}

/* ============================================================
   09 — THE INVITATION
   ============================================================ */
function InvitationSection() {
  return (
    <Section id="invitation" num={9} kicker="An invitation">
      <div className="inv">
        <h2 className="h-serif inv-h">
          Being part of a community shouldn't be <em>a big decision.</em>
        </h2>
        <p className="inv-p">
          If you've got the Maverick DNA and you want to change the way business is played, that's the whole signal.
        </p>
      </div>

      <style>{`
        .inv { max-width: 880px; }
        .inv-h {
          font-size: clamp(34px, 5.4vw, 56px);
          line-height: 1.15;
          letter-spacing: -0.012em;
          color: var(--ink);
        }
        .inv-h em { font-style: italic; color: var(--green); }
        .inv-p {
          margin-top: 24px;
          font-family: var(--serif);
          font-style: italic;
          font-size: clamp(17px, 2vw, 20px);
          color: var(--ink-2);
          line-height: 1.55;
          max-width: 56ch;
        }
      `}</style>
    </Section>
  );
}

/* ============================================================
   10 — PRICING
   "Better Than Free" Guarantee → ROI / Ripples → dues
   ============================================================ */
function PricingSection() {
  return (
    <Section id="pricing" num={10} kicker="Membership">
      <h2 className="h-serif price-h">
        The <span className="mark">&ldquo;</span><em>Better Than Free</em><span className="mark">&rdquo;</span> Guarantee.
      </h2>

      <p className="price-roi-line">
        One big idea. One magical connection. One new partner. One transformative experience.
      </p>
      <p className="price-roi-conclusion">
        Any of them makes membership an easy yes.
      </p>

      <hr className="price-rule" />

      <p className="price-savings">
        Members save <strong>$5,000</strong> on every retreat, mastermind, and Epic Experience.
      </p>
      <p className="price-bridge">
        You literally can't help but have significant <em>ROI</em>. Return on Investment.<span className="dots"> And...</span>
      </p>
      <p className="price-ripples">Ripples of Impact.</p>

      <div className="prices-block">
        <div className="prices-row">
          <div className="price-label">Annual membership</div>
          <div className="price-amount h-serif">$5,500</div>
        </div>
        <div className="prices-row">
          <div className="price-label">
            One-time activation
            <small>Includes $1,000 donation to the Impact Fund</small>
          </div>
          <div className="price-amount h-serif">$2,500</div>
        </div>
      </div>

      <style>{`
        .price-h {
          font-size: clamp(38px, 6vw, 64px);
          line-height: 1.05;
          letter-spacing: -0.018em;
          margin-bottom: 36px;
          color: var(--ink);
        }
        .price-h em { font-style: italic; color: var(--green); }
        .price-h .mark { color: var(--green); font-style: normal; }

        .price-roi-line {
          font-family: var(--serif);
          font-size: clamp(18px, 2.4vw, 24px);
          line-height: 1.45;
          color: var(--ink);
          max-width: 56ch;
          text-wrap: pretty;
        }
        .price-roi-conclusion {
          font-family: var(--serif);
          font-style: italic;
          font-size: clamp(20px, 2.6vw, 28px);
          line-height: 1.4;
          color: var(--green);
          margin-top: 10px;
          max-width: 48ch;
        }
        .price-rule {
          border: 0; border-top: 1px solid var(--rule);
          width: 60px; margin: 36px 0;
        }
        .price-savings {
          font-family: var(--serif);
          font-size: clamp(16px, 2vw, 19px);
          line-height: 1.65;
          color: var(--ink-2);
          max-width: 60ch;
          margin-bottom: 14px;
        }
        .price-savings strong { color: var(--ink); font-weight: 500; }
        .price-bridge {
          font-family: var(--serif);
          font-size: clamp(16px, 2vw, 19px);
          line-height: 1.65;
          color: var(--ink-2);
          max-width: 60ch;
          margin-bottom: 8px;
        }
        .price-bridge em { font-style: italic; color: var(--green); }
        .price-bridge .dots { color: var(--ink-faint); letter-spacing: 0.2em; }
        .price-ripples {
          font-family: var(--serif);
          font-style: italic;
          font-size: clamp(28px, 4.2vw, 44px);
          color: var(--green);
          margin-bottom: 48px;
        }
        .prices-block {
          padding-top: 28px;
          border-top: 1px solid var(--rule);
          max-width: 600px;
        }
        .prices-row {
          display: flex;
          justify-content: space-between;
          align-items: baseline;
          gap: 24px;
          padding: 18px 0;
          border-bottom: 1px solid var(--rule);
        }
        .prices-row:last-child { border-bottom: none; }
        .price-label {
          font-family: var(--serif);
          font-size: 17px;
          color: var(--ink);
        }
        .price-label small {
          display: block;
          font-style: italic;
          color: var(--ink-mute);
          font-size: 12px;
          margin-top: 4px;
        }
        .price-amount {
          font-size: clamp(28px, 4vw, 40px);
          color: var(--ink);
          letter-spacing: -0.01em;
          font-feature-settings: "tnum";
        }
      `}</style>
    </Section>
  );
}

/* ============================================================
   11 — FINAL CTA
   ============================================================ */
function FinalCTASection() {
  return (
    <Section id="apply" num={11} kicker="Last word">
      <div className="final">
        <p className="h-serif final-line">
          If you're ready to <em>change the way business is played</em>, it's time.
        </p>

        <a href="#" className="cta final-cta">Let's Play <span className="arr">→</span></a>

        <p className="final-foot">
          All applicants are reviewed by current Mavericks.
        </p>

        <div className="benediction">
          <p>One thousand suns lighting one thousand suns.</p>
        </div>
      </div>

      <style>{`
        .final { max-width: 880px; margin: 0 auto; text-align: center; padding: 24px 0; }
        .final-line {
          font-size: clamp(28px, 4.6vw, 48px);
          line-height: 1.3;
          letter-spacing: -0.012em;
          color: var(--ink);
          margin-bottom: 44px;
          text-wrap: pretty;
        }
        .final-line em { font-style: italic; color: var(--green); }
        .final-cta {
          padding: 22px 36px;
          font-size: 14px;
          letter-spacing: 0.18em;
        }
        .final-foot {
          margin-top: 28px;
          font-family: var(--serif);
          font-style: italic;
          font-size: clamp(15px, 1.4vw, 17px);
          color: var(--green);
          letter-spacing: 0.01em;
        }
        .benediction {
          margin-top: 64px;
          padding-top: 36px;
          border-top: 1px solid var(--rule);
          max-width: 560px;
          margin-left: auto;
          margin-right: auto;
        }
        .benediction p {
          font-family: var(--serif);
          font-style: italic;
          font-size: clamp(15px, 1.8vw, 17px);
          color: var(--green);
          letter-spacing: 0.06em;
          line-height: 1.6;
        }
      `}</style>
    </Section>
  );
}

Object.assign(window, { WhoInsideSection, TestimonialsSection, InvitationSection, PricingSection, FinalCTASection });