// WNN Live — landing page sections (Proof-First funnel)
const { Button, Card, Badge, Accordion } = window.WNNPropertiesDesignSystem_c1f4c9;
const I = window.WNNIcon;

/* -------- event facts (all verified from brief) -------- */
const EV = {
  date: 'Saturday, August 22, 2026',
  dateShort: 'Sat · Aug 22, 2026',
  time: '9:00 AM – 3:00 PM',
  venue: 'Silverton Casino Lodge',
  addr: '3333 Blue Diamond Rd, Las Vegas, NV 89139',
  price: '$97',
  seats: '50 seats',
};
/* Real member testimonial screenshots supplied by the client */
const SHOTS = [
  'https://assets.cdn.filesafe.space/dio5UBMvzVzG1S3NYsb2/media/68d72f12f981f4ebb212eb50.png',
  'https://assets.cdn.filesafe.space/dio5UBMvzVzG1S3NYsb2/media/68d72f052be34c22fb4e8bfb.png',
  'https://assets.cdn.filesafe.space/dio5UBMvzVzG1S3NYsb2/media/68d72efbffd415250584ec68.png',
];

const Eyebrow = ({ children, color }) => (
  <div className="eyebrow" style={{ color: color || 'var(--brand)', marginBottom: 14 }}>{children}</div>
);

function ReserveBtn({ children = 'Reserve My Seat', variant = 'accent', size = 'lg', block }) {
  const { openReserve } = useReserve();
  return (
    <Button variant={variant} size={size} onClick={() => openReserve('optin')}
      style={block ? { width: '100%' } : undefined}
      iconRight={<I name="arrow-right" size={20} stroke={2.5} />}>{children}</Button>
  );
}

const reassure = (
  <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap', marginTop: 4 }}>
    {[['check-circle', 'Free to reserve'], ['users', '50 seats only'], ['shield', '100% money-back']].map(([ic, tx]) => (
      <span key={tx} style={{ display: 'inline-flex', alignItems: 'center', gap: 7, fontSize: 14,
        fontWeight: 700, fontFamily: 'var(--font-heading)', color: 'var(--text-muted)' }}>
        <I name={ic} size={16} color="var(--brand)" /> {tx}
      </span>
    ))}
  </div>
);

/* ---------------- Announcement bar ---------------- */
function AnnouncementBar() {
  const { openReserve } = useReserve();
  return (
    <div style={{ background: 'var(--neutral-7)', color: '#fff', fontFamily: 'var(--font-heading)',
      fontWeight: 600, fontSize: 14 }}>
      <div className="wrap" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center',
        gap: 14, height: 42, textAlign: 'center', flexWrap: 'wrap' }}>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, whiteSpace: 'nowrap' }}>
          <I name="calendar" size={15} color="var(--accent)" />
          <span className="nd">WNN Live — </span>{EV.dateShort} · Las Vegas
        </span>
        <button onClick={() => openReserve('optin')} style={{ background: 'var(--accent)', color: 'var(--accent-on)',
          border: 'none', borderRadius: 999, padding: '4px 14px', fontWeight: 700, fontFamily: 'var(--font-heading)',
          fontSize: 13, cursor: 'pointer' }}>Reserve →</button>
      </div>
    </div>
  );
}

/* ---------------- Navbar ---------------- */
function Navbar() {
  return (
    <header className="scheme-3" style={{ position: 'sticky', top: 0, zIndex: 100,
      borderBottom: '2px solid var(--border)', background: 'var(--surface)' }}>
      <div className="wrap" style={{ height: 72, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <img src="assets/logo/wnn-logo.png" alt="WNN Properties" style={{ height: 34 }} />
        <nav className="nav-links" style={{ gap: 28, alignItems: 'center', flexShrink: 0 }}>
          {['The day', 'Your host', 'Proof', 'FAQ'].map((l) => (
            <a key={l} href="#" style={{ fontFamily: 'var(--font-heading)', fontWeight: 600, fontSize: 15, whiteSpace: 'nowrap' }}>{l}</a>
          ))}
        </nav>
        <ReserveBtn size="sm">Reserve My Seat</ReserveBtn>
      </div>
    </header>
  );
}

/* ---------------- Vidalytics hero video ----------------
   React can't execute a raw <script> dropped in JSX, so we render the
   placeholder div and run Vidalytics' loader IIFE from a useEffect (after the
   target div is mounted). Guarded so it initializes only once. */
function VidalyticsEmbed() {
  const EMBED_ID = 'vidalytics_embed_T6xuu7r1rJ560tSg';
  React.useEffect(() => {
    if (window['__vid_' + EMBED_ID]) return;
    window['__vid_' + EMBED_ID] = true;
    (function (v, i, d, a, l, y, t, c, s) {
      y = '_' + d.toLowerCase(); c = d + 'L';
      if (!v[d]) { v[d] = {}; } if (!v[c]) { v[c] = {}; } if (!v[y]) { v[y] = {}; }
      var vl = 'Loader', vli = v[y][vl], vsl = v[c][vl + 'Script'], vlf = v[c][vl + 'Loaded'], ve = 'Embed';
      if (!vsl) {
        vsl = function (u, cb) {
          if (t) { cb(); return; }
          s = i.createElement('script'); s.type = 'text/javascript'; s.async = 1; s.src = u;
          if (s.readyState) { s.onreadystatechange = function () { if (s.readyState === 'loaded' || s.readyState == 'complete') { s.onreadystatechange = null; vlf = 1; cb(); } }; }
          else { s.onload = function () { vlf = 1; cb(); }; }
          i.getElementsByTagName('head')[0].appendChild(s);
        };
      }
      vsl(l + 'loader.min.js', function () {
        if (!vli) { var vlc = v[c][vl]; vli = new vlc(); }
        vli.loadScript(l + 'player.min.js', function () { var vec = v[d][ve]; t = new vec(); t.run(a); });
      });
    })(window, document, 'Vidalytics', EMBED_ID, 'https://fast.vidalytics.com/embeds/Bi1MeaDB/T6xuu7r1rJ560tSg/');
  }, []);
  return <div id={EMBED_ID} style={{ width: '100%', position: 'relative', paddingTop: '56.25%' }}></div>;
}

/* ---------------- Hero ---------------- */
function Hero({ scheme }) {
  return (
    <section className={scheme + ' sec'} style={{ paddingTop: 56, paddingBottom: 56 }}>
      <div className="wrap split">
        <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
          <div style={{ display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap' }}>
            <Badge tone="accent" variant="solid"><span style={{ whiteSpace: 'nowrap' }}>Remote Rentals LIVE</span></Badge>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 14,
              fontWeight: 700, fontFamily: 'var(--font-heading)', whiteSpace: 'nowrap' }}>
              <I name="map-pin" size={15} color="var(--brand)" /> Las Vegas · One day
            </span>
          </div>
          <h1 className="hero-h" style={{ margin: 0 }}>From a UPS truck to 90 doors. On Aug 22, he hands you the system.</h1>
          <p style={{ margin: 0, fontSize: 'var(--text-large)', color: 'var(--text-muted)', maxWidth: 560 }}>
            A one-day, in-person intensive for equity-rich Hawaii &amp; West-Coast owners who already know Midwest
            rentals cash flow — and are done "researching." This is the system and the accountability, not another explainer.
          </p>
          <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', alignItems: 'center' }}>
            <ReserveBtn />
            <Button variant="secondary" size="lg" iconLeft={<I name="play" size={16} fill="currentColor" stroke={0} />}>
              Watch a 2-min preview</Button>
          </div>
          {reassure}
        </div>

        {/* media + floating ticket facts */}
        <div style={{ position: 'relative' }}>
          <div style={{ border: '2px solid var(--border)', borderRadius: 'var(--radius-card)', overflow: 'hidden',
            boxShadow: 'var(--shadow-edge)', background: 'var(--neutral-7)' }}>
            <VidalyticsEmbed />
          </div>
          <div style={{ background: 'var(--surface)', border: '2px solid var(--border)', borderRadius: 'var(--radius-card)',
            boxShadow: 'var(--shadow-sm)', padding: 16, marginTop: -42, marginLeft: 16, marginRight: 16, position: 'relative',
            display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
            {[['calendar', EV.date, EV.time], ['map-pin', EV.venue, 'Las Vegas, NV'],
              ['dollar', EV.price + ' / seat', 'Partner: half off'], ['users', EV.seats, 'Intentionally small']].map(([ic, a, b]) => (
              <div key={a} style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
                <span style={{ flex: 'none', color: 'var(--brand)', marginTop: 2 }}><I name={ic} size={18} stroke={2} /></span>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
                  <div style={{ fontFamily: 'var(--font-heading)', fontWeight: 700, fontSize: 15, lineHeight: 1.2 }}>{a}</div>
                  <div style={{ fontSize: 13, color: 'var(--text-muted)', lineHeight: 1.2 }}>{b}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- Proof wall (real screenshots, up top) ---------------- */
function Shot({ src, i }) {
  const [err, setErr] = React.useState(false);
  return (
    <div style={{ border: '2px solid var(--border)', borderRadius: 'var(--radius-card)', overflow: 'hidden',
      background: 'var(--surface)', boxShadow: 'var(--shadow-edge)' }}>
      {!err ? (
        <img src={src} alt={'WNN member testimonial ' + (i + 1)} onError={() => setErr(true)}
          style={{ width: '100%', display: 'block' }} />
      ) : (
        <image-slot id={'wnn-testimonial-' + (i + 1)} style={{ width: '100%', height: '260px', display: 'block' }}
          shape="rect" placeholder={'Drop member testimonial screenshot #' + (i + 1)}></image-slot>
      )}
    </div>
  );
}
function ProofWall() {
  return (
    <section className="scheme-3 sec">
      <div className="wrap">
        <div style={{ textAlign: 'center', maxWidth: 760, margin: '0 auto 44px' }}>
          <Eyebrow>Real members · real results</Eyebrow>
          <h2 className="sec-h" style={{ margin: 0 }}>Before you read another word — read theirs.</h2>
          <p style={{ marginTop: 16, fontSize: 'var(--text-large)', color: 'var(--text-muted)' }}>
            These are real WNN members who stopped researching and started owning. Same starting point as you.
          </p>
        </div>
        <div className="g3" style={{ alignItems: 'start' }}>
          {SHOTS.map((s, i) => <Shot key={i} src={s} i={i} />)}
        </div>
        <div style={{ display: 'flex', justifyContent: 'center', marginTop: 28 }}>
          <span style={{ display: 'inline-flex', gap: 8, alignItems: 'center', color: 'var(--text-muted)', fontSize: 14 }}>
            <span style={{ display: 'flex', gap: 2 }}>{[0,1,2,3,4].map(k => <I key={k} name="star" size={16} fill="var(--accent)" color="var(--accent)" />)}</span>
            Unedited screenshots, shared with permission.
          </span>
        </div>
      </div>
    </section>
  );
}

/* ---------------- Authority: CJ ---------------- */
function Authority() {
  return (
    <section className="scheme-4 sec">
      <div className="wrap split rev">
        <div style={{ position: 'relative' }}>
          <image-slot id="wnn-cj-portrait" style={{ width: '100%', height: '440px', display: 'block',
            border: '2px solid var(--border)', borderRadius: 'var(--radius-card)', boxShadow: 'var(--shadow-edge)' }}
            shape="rounded" radius="8" placeholder="Drop CJ's photo"></image-slot>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
          <Eyebrow>Your host</Eyebrow>
          <h2 className="sec-h" style={{ margin: 0 }}>Meet CJ Calio.</h2>
          <p style={{ margin: 0, fontSize: 'var(--text-medium)', color: 'var(--text-muted)' }}>
            CJ went from driving a UPS truck to acquiring <strong style={{ color: 'var(--text)' }}>90+ doors in
            just 5 years</strong> — enough cash flow for him and his wife to retire early. WNN Live is CJ handing
            you that exact playbook, in one room, in one day.
          </p>
          <div className="g3" style={{ gridTemplateColumns: 'repeat(3,1fr)', gap: 14 }}>
            {[['key', '90+ doors', 'in 5 years'], ['home', 'Retired early', 'with his wife'], ['trending-up', 'Deal creation', 'not luck']].map(([ic, a, b]) => (
              <div key={a} style={{ background: 'var(--surface)', border: '2px solid var(--border)',
                borderRadius: 'var(--radius-card)', padding: 16 }}>
                <span style={{ color: 'var(--brand)' }}><I name={ic} size={24} stroke={2} /></span>
                <div style={{ fontFamily: 'var(--font-heading)', fontWeight: 700, fontSize: 18, marginTop: 8 }}>{a}</div>
                <div style={{ fontSize: 14, color: 'var(--text-muted)' }}>{b}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- The problem ---------------- */
function Problem() {
  return (
    <section className="scheme-2 sec">
      <div className="wrap" style={{ maxWidth: 900 }}>
        <Eyebrow>If this is you</Eyebrow>
        <h2 className="sec-h" style={{ margin: '0 0 22px' }}>You've watched the videos. You ran the numbers. You're still sitting on the equity.</h2>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 18, fontSize: 'var(--text-medium)', color: 'var(--text-muted)', maxWidth: 720 }}>
          <p style={{ margin: 0 }}>
            You're not under-educated. You get the strategy. What's actually happening is paralysis — the quiet kind,
            where another quarter slips by and the spreadsheet stays a spreadsheet.
          </p>
          <p style={{ margin: 0 }}>
            Here's the part nobody says out loud: <strong style={{ color: 'var(--text)' }}>the market moved, not you.</strong>
            In 2020 the math was easy. By 2025, prices climbed and the window narrowed. That's timing, not a personal failure.
          </p>
        </div>
        <Card variant="edge" style={{ marginTop: 28, maxWidth: 720 }}>
          <div style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
            <span style={{ flex: 'none', color: 'var(--accent-hover)' }}><I name="trending-up" size={28} stroke={2.2} /></span>
            <p style={{ margin: 0, fontSize: 18, color: 'var(--text)' }}>
              Every month that equity naps, the next window gets more expensive. The cost isn't the ticket —
              it's another year of your money working part-time.
            </p>
          </div>
        </Card>
      </div>
    </section>
  );
}

/* ---------------- Mechanism ---------------- */
function Mechanism() {
  return (
    <section className="scheme-3 sec">
      <div className="wrap">
        <div style={{ maxWidth: 760, marginBottom: 44 }}>
          <Eyebrow>Why WNN is different</Eyebrow>
          <h2 className="sec-h" style={{ margin: 0 }}>Stop finding deals. Start creating them.</h2>
        </div>
        <div className="g2">
          <div style={{ border: '2px solid var(--border)', borderRadius: 'var(--radius-card)', padding: 28,
            background: 'var(--neutral-1)' }}>
            <span style={{ display: 'inline-flex', width: 52, height: 52, borderRadius: 'var(--radius-card)',
              border: '2px solid var(--border)', background: 'var(--surface)', color: 'var(--text-subtle)',
              alignItems: 'center', justifyContent: 'center' }}><I name="home" size={26} stroke={2} /></span>
            <h3 style={{ fontSize: 26, margin: '16px 0 8px' }}>Deal finding (the trap)</h3>
            <p style={{ margin: 0, color: 'var(--text-muted)', fontSize: 17 }}>
              Hunting listings everyone else can see, bidding against the whole market, and losing the good ones to cash buyers.
              It's exhausting — and it's why most investors stall.
            </p>
          </div>
          <div style={{ border: '2px solid var(--border)', borderRadius: 'var(--radius-card)', padding: 28,
            background: 'var(--brand-subtle)', boxShadow: 'var(--shadow-edge)' }}>
            <span style={{ display: 'inline-flex', width: 52, height: 52, borderRadius: 'var(--radius-card)',
              border: '2px solid var(--border)', background: 'var(--brand)', color: '#fff',
              alignItems: 'center', justifyContent: 'center' }}><I name="key" size={26} stroke={2} /></span>
            <h3 style={{ fontSize: 26, margin: '16px 0 8px' }}>Deal creation (the system)</h3>
            <p style={{ margin: 0, color: 'var(--text-muted)', fontSize: 17 }}>
              WNN members make deals exist — off-market, through relationships and direct access — so you're not
              competing at all. That's the whole day: how to create the deal instead of chasing it.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- Leihua bridge ---------------- */
function Leihua() {
  return (
    <section className="scheme-4 sec">
      <div className="wrap split">
        <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
          <Eyebrow>This could be you</Eyebrow>
          <h2 className="sec-h" style={{ margin: 0 }}>Leihua sat on dead Hawaii equity too.</h2>
          <p style={{ margin: 0, fontSize: 'var(--text-medium)', color: 'var(--text-muted)' }}>
            Equity-rich, successful in her career, and quietly tired of watching her money work part-time —
            Leihua had run the numbers a dozen times. Then she became a WNN client, put the system to work, and
            stopped waiting on the "perfect" moment.
          </p>
          <span className="ph-flag"><I name="check" size={13} /> Leihua's specific results — to confirm before publish</span>
          <div style={{ marginTop: 6 }}><ReserveBtn variant="primary">Reserve My Seat</ReserveBtn></div>
        </div>
        <image-slot id="wnn-leihua-portrait" style={{ width: '100%', height: '420px', display: 'block',
          border: '2px solid var(--border)', borderRadius: 'var(--radius-card)', boxShadow: 'var(--shadow-edge)' }}
          shape="rounded" radius="8" placeholder="Drop Leihua's photo"></image-slot>
      </div>
    </section>
  );
}

/* ---------------- Outcomes + Agenda ---------------- */
function Agenda() {
  const outcomes = [
    'A repeatable system to create off-market deals from 2,500 miles away',
    'The exact criteria that makes a Midwest door actually cash flow',
    'A 90-day action plan you leave the room holding',
    'The confidence to have the kitchen-table conversation tonight',
  ];
  const rows = [
    ['Full-day intensive training', '9:00 AM – 3:00 PM', '$497'],
    ['The Remote Cashflow System Playbook', 'Yours to keep', '$49'],
    ['Networking with other local investors', 'Build your bench', '$59'],
    ['Live Q&A for YOUR situation', 'Real answers, not theory', '$197'],
  ];
  return (
    <section className="scheme-3 sec">
      <div className="wrap split">
        <div>
          <Eyebrow>What you'll walk away with</Eyebrow>
          <h2 className="sec-h" style={{ margin: '0 0 24px' }}>Outcomes, not a stack of notes.</h2>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            {outcomes.map((o) => (
              <div key={o} style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                <span style={{ flex: 'none', width: 26, height: 26, borderRadius: 999, background: 'var(--brand)',
                  display: 'grid', placeItems: 'center', marginTop: 2 }}><I name="check" size={15} stroke={3} color="#fff" /></span>
                <span style={{ fontSize: 'var(--text-medium)' }}>{o}</span>
              </div>
            ))}
          </div>
        </div>
        <div style={{ border: '2px solid var(--border)', borderRadius: 'var(--radius-card)', overflow: 'hidden',
          background: 'var(--surface)', boxShadow: 'var(--shadow-edge)' }}>
          <div style={{ padding: '16px 20px', borderBottom: '2px solid var(--border)', background: 'var(--neutral-1)' }}>
            <div style={{ fontFamily: 'var(--font-heading)', fontWeight: 700, fontSize: 18 }}>The agenda</div>
            <div style={{ fontSize: 14, color: 'var(--text-muted)' }}>One day · {EV.time}</div>
          </div>
          {rows.map(([a, b, v]) => (
            <div key={a} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12,
              padding: '14px 20px', borderBottom: '2px dashed var(--neutral-2)' }}>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
                <div style={{ fontFamily: 'var(--font-heading)', fontWeight: 700, fontSize: 16, lineHeight: 1.2 }}>{a}</div>
                <div style={{ fontSize: 13, color: 'var(--text-muted)', lineHeight: 1.2 }}>{b}</div>
              </div>
              <div style={{ fontFamily: 'var(--font-heading)', fontWeight: 700, color: 'var(--text-muted)', flexShrink: 0 }}>{v}</div>
            </div>
          ))}
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '16px 20px',
            background: 'var(--accent-subtle)' }}>
            <span style={{ fontFamily: 'var(--font-heading)', fontWeight: 700, fontSize: 18, whiteSpace: 'nowrap' }}>Total value</span>
            <span style={{ fontFamily: 'var(--font-heading)', fontWeight: 700, fontSize: 24 }}>$851</span>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- Pricing + partner + guarantee ---------------- */
function Pricing({ scheme }) {
  return (
    <section className={scheme + ' sec'} id="reserve">
      <div className="wrap split">
        <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
          <Eyebrow color="var(--neutral-7)">Reserve your seat</Eyebrow>
          <h2 className="sec-h" style={{ margin: 0 }}>One Saturday. ${'97'}. The system that ends the waiting.</h2>

          <div style={{ background: 'var(--surface)', border: '2px solid var(--border)', borderRadius: 'var(--radius-card)',
            padding: 22, boxShadow: 'var(--shadow-edge)' }}>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 12 }}>
              <span style={{ fontFamily: 'var(--font-heading)', fontWeight: 700, fontSize: 52, lineHeight: 1 }}>$97</span>
              <span style={{ color: 'var(--text-muted)', textDecoration: 'line-through', fontSize: 22 }}>$851 value</span>
            </div>
            <div style={{ marginTop: 14, borderTop: '2px dashed var(--neutral-2)', paddingTop: 14, display: 'flex',
              gap: 12, alignItems: 'flex-start' }}>
              <span style={{ flex: 'none', color: 'var(--brand)' }}><I name="users" size={22} stroke={2} /></span>
              <p style={{ margin: 0, fontSize: 15 }}>
                <strong style={{ fontFamily: 'var(--font-heading)' }}>Bring your partner — half off.</strong>{' '}
                Their seat is just <strong>$48.50</strong>. Come decide together.
              </p>
            </div>
            <div style={{ marginTop: 14, display: 'inline-flex', alignItems: 'center', gap: 8, background: 'var(--brand-subtle)',
              border: '2px solid var(--border)', borderRadius: 999, padding: '6px 14px', fontFamily: 'var(--font-heading)',
              fontWeight: 700, fontSize: 14 }}>
              <I name="shield" size={16} color="var(--brand)" /> 100% money-back guarantee
            </div>
          </div>

          {/* cost-of-waiting comparison */}
          <div className="g2" style={{ gap: 14 }}>
            <div style={{ border: '2px solid var(--border)', borderRadius: 'var(--radius-card)', padding: 16,
              background: '#fdeeec' }}>
              <div style={{ fontFamily: 'var(--font-heading)', fontWeight: 700, fontSize: 17, marginBottom: 6 }}>Wait another year</div>
              <p style={{ margin: 0, fontSize: 14, color: 'var(--text-muted)' }}>Equity idle, prices climbing, the deal you'd have owned going to someone else.</p>
            </div>
            <div style={{ border: '2px solid var(--border)', borderRadius: 'var(--radius-card)', padding: 16,
              background: 'var(--brand-subtle)' }}>
              <div style={{ fontFamily: 'var(--font-heading)', fontWeight: 700, fontSize: 17, marginBottom: 6 }}>$97 + one Saturday</div>
              <p style={{ margin: 0, fontSize: 14, color: 'var(--text-muted)' }}>The system, the room, and a 90-day plan to put that equity to work.</p>
            </div>
          </div>
        </div>

        {/* the opt-in (GHL slot) */}
        <div style={{ background: 'var(--surface)', border: '2px solid var(--border)', borderRadius: 'var(--radius-card)',
          padding: 24, boxShadow: 'var(--shadow-edge)' }}>
          <div style={{ marginBottom: 16 }}>
            <div style={{ fontFamily: 'var(--font-heading)', fontWeight: 700, fontSize: 22 }}>Reserve your seat — free</div>
            <div style={{ fontSize: 14, color: 'var(--text-muted)', marginTop: 4 }}>
              No card now. You hold your spot; payment is the next step.
            </div>
          </div>
          <ReserveInlineForm />
        </div>
      </div>
    </section>
  );
}

/* ---------------- FAQ ---------------- */
function FAQ() {
  const items = [
    { q: "It's only $97 — what's the catch?", a: "No catch. $97 holds your seat for a full-day, in-person intensive worth far more — we keep it low so the right people show up. Reserving is free; you only pay the $97 once you're ready, on the step after you reserve." },
    { q: "How do I get my spouse or partner on board?", a: "That's exactly why the partner seat is half off ($48.50). This isn't 'go home and convince them later' — it's 'come decide together.' Most big moves happen at the kitchen table, so we made it easy to bring the other person to the table with you." },
    { q: "Who is CJ, and why should I trust him?", a: "CJ Calio went from driving a UPS truck to acquiring 90+ doors in 5 years, which let him and his wife retire early. WNN Live is him teaching the exact deal-creation system that got him there — and you'll hear directly from real members who've used it." },
    { q: "What if the day isn't for me?", a: "You're covered by our 100% money-back guarantee. Show up, do the work, and if it's not worth far more than $97, you get your money back." },
    { q: "Do I have to pay right now to reserve?", a: "No. Reserving is free and takes 20 seconds — just your name, email and phone. That holds your spot among the 50 seats. Payment ($97) happens on the very next step, once you've reserved." },
    { q: "Where and when is it?", a: `${EV.date}, ${EV.time}, at ${EV.venue} — ${EV.addr}.` },
  ];
  return (
    <section className="scheme-3 sec">
      <div className="wrap" style={{ maxWidth: 860 }}>
        <div style={{ textAlign: 'center', marginBottom: 44 }}>
          <Eyebrow>Straight answers</Eyebrow>
          <h2 className="sec-h" style={{ margin: 0 }}>The three things people ask first.</h2>
        </div>
        <Accordion items={items} defaultOpen={[0]} />
      </div>
    </section>
  );
}

/* ---------------- Closing urgency ---------------- */
function Closing() {
  return (
    <section className="scheme-5 sec" style={{ textAlign: 'center' }}>
      <div className="wrap" style={{ maxWidth: 820 }}>
        <Eyebrow color="#fff">Capacity is the point</Eyebrow>
        <h2 className="sec-h" style={{ margin: '0 0 18px', color: '#fff' }}>50 seats. That's the whole room.</h2>
        <p style={{ margin: '0 auto 28px', maxWidth: 600, fontSize: 'var(--text-large)', color: 'rgba(255,255,255,0.92)' }}>
          We capped it at 50 on purpose. You can't actually teach and answer real questions in a room of hundreds —
          and the whole point of this day is your situation, answered. When the 50 are gone, they're gone.
        </p>
        <div style={{ display: 'flex', justifyContent: 'center' }}>
          <ReserveBtn variant="accent">Reserve My Seat</ReserveBtn>
        </div>
        <div style={{ marginTop: 16, color: 'rgba(255,255,255,0.85)', fontSize: 14, fontFamily: 'var(--font-heading)', fontWeight: 600 }}>
          {EV.dateShort} · {EV.venue} · Free to reserve
        </div>
      </div>
    </section>
  );
}

/* ---------------- Footer ---------------- */
function Footer() {
  return (
    <footer style={{ background: 'var(--neutral-7)', color: '#fff' }}>
      <div className="wrap" style={{ padding: '52px 24px 32px' }}>
        <div className="split" style={{ alignItems: 'start' }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16, maxWidth: 360 }}>
            <img src="assets/logo/wnn-logo-light.png" alt="WNN Properties" style={{ height: 40, alignSelf: 'flex-start' }} />
            <p style={{ margin: 0, color: 'rgba(255,255,255,0.7)', fontSize: 15 }}>
              WNN Live · Remote Rentals LIVE — a one-day, in-person intensive on creating cash-flowing rentals.
            </p>
            <ReserveBtn variant="accent" size="md">Reserve My Seat</ReserveBtn>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8, fontSize: 15, color: 'rgba(255,255,255,0.75)' }}>
            <div style={{ fontFamily: 'var(--font-heading)', fontWeight: 700, color: '#fff', marginBottom: 6 }}>The event</div>
            <span><I name="calendar" size={15} style={{ marginRight: 8 }} color="var(--accent)" />{EV.date}</span>
            <span><I name="phone" size={15} style={{ marginRight: 8 }} color="var(--accent)" />{EV.time}</span>
            <span><I name="map-pin" size={15} style={{ marginRight: 8 }} color="var(--accent)" />{EV.venue}</span>
            <span style={{ marginLeft: 23, color: 'rgba(255,255,255,0.55)' }}>{EV.addr}</span>
          </div>
        </div>
        <div style={{ borderTop: '1px solid rgba(255,255,255,0.15)', marginTop: 40, paddingTop: 20, display: 'flex',
          justifyContent: 'space-between', flexWrap: 'wrap', gap: 10, color: 'rgba(255,255,255,0.5)', fontSize: 13 }}>
          <span>© 2026 WNN Properties. All rights reserved.</span>
          <span>WNN Properties is an education company, not a brokerage or financial advisor.</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  WNNAnnouncementBar: AnnouncementBar, WNNNav: Navbar, WNNHero: Hero, WNNProofWall: ProofWall,
  WNNAuthority: Authority, WNNProblem: Problem, WNNMechanism: Mechanism, WNNLeihua: Leihua,
  WNNAgenda: Agenda, WNNPricing: Pricing, WNNFAQ: FAQ, WNNClosing: Closing, WNNFooter: Footer,
});