const { useState, useEffect, useRef } = React;
const { Button, Card, Badge, Input } = window.MasterplanDesignSystem_e447d3;

/* ----------------------------------------------------------------
   EVENT DETAILS — edit these three values
---------------------------------------------------------------- */
const EVENT = {
  iso: '2026-07-13T16:00:00+01:00', // 4:00pm UK time (BST)
  dayDate: 'Monday 13 July 2026',
  time: '4:00pm',
  broadcast: 'Broadcast live to your home or office',
};

/* Live registrant counter.
   Anchored at 856 on 30 Jun 2026, drifts up ~9/hour, monotonic. */
const REG_ANCHOR = Date.parse('2026-06-30T12:00:00Z');
const REG_BASE = 856;
const REG_PER_HOUR = 2;
function computeRegCount() {
  const hours = Math.max(0, (Date.now() - REG_ANCHOR) / 3600000);
  let n = REG_BASE + Math.floor(hours * REG_PER_HOUR);
  const stored = parseInt(localStorage.getItem('mp_reg_count') || '0', 10);
  if (stored > n) n = stored;
  return n;
}

/* ----------------------------------------------------------------
   TRACKING — capture UTM params + Facebook click IDs so they can be
   forwarded into the CRM. Values are merged into localStorage so they
   survive the two-step form and the redirect to the thank-you page.
---------------------------------------------------------------- */
const UTM_KEYS = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content'];

function getCookie(name) {
  const m = document.cookie.match('(?:^|; )' + name + '=([^;]*)');
  return m ? decodeURIComponent(m[1]) : '';
}

function captureTracking() {
  let stored = {};
  try { stored = JSON.parse(localStorage.getItem('mp_tracking') || '{}'); } catch (e) {}
  const params = new URLSearchParams(window.location.search);
  const out = { ...stored };

  UTM_KEYS.forEach((k) => { const v = params.get(k); if (v) out[k] = v; });

  const fbclid = params.get('fbclid');
  if (fbclid) out.fbclid = fbclid;

  // _fbc / _fbp are written by the Meta Pixel; fall back to building _fbc from fbclid.
  let fbc = getCookie('_fbc');
  if (!fbc && fbclid) fbc = 'fb.1.' + Date.now() + '.' + fbclid;
  if (fbc) out.fbc = fbc;
  const fbp = getCookie('_fbp');
  if (fbp) out.fbp = fbp;

  if (!out.landing_page) out.landing_page = window.location.pathname;
  if (!out.referrer && document.referrer) out.referrer = document.referrer;

  try { localStorage.setItem('mp_tracking', JSON.stringify(out)); } catch (e) {}
  return out;
}

function TrackingFields({ data }) {
  return (
    <React.Fragment>
      {Object.entries(data).map(([k, v]) => (
        <input key={k} type="hidden" name={k} value={v} readOnly />
      ))}
    </React.Fragment>
  );
}

/* ----------------------------------------------------------------
   CRM — leads are posted to our own /api/lead endpoint, which forwards
   them to GoHighLevel server-side (keeps the webhook URL off the page).
---------------------------------------------------------------- */
const OWN_LABELS = {
  no: 'No, does not own a business',
  over: 'Yes — turns over more than £100k/year',
  under: 'Yes — turns over less than £100k/year',
};

async function sendLeadToCrm(payload) {
  const ctrl = new AbortController();
  const timer = setTimeout(() => ctrl.abort(), 5000);
  try {
    const res = await fetch('/api/lead', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(payload),
      keepalive: true,
      signal: ctrl.signal,
    });
    return res.ok;
  } catch (e) {
    return false; // never trap the user — redirect happens regardless
  } finally {
    clearTimeout(timer);
  }
}

const Ic = ({ name, size = 18, style }) => (
  <i data-lucide={name} style={{ width: size, height: size, display: 'inline-flex', flexShrink: 0, ...style }} />
);

function useReveal() {
  // Reveal is now pure CSS (see .reveal in the stylesheet). This just
  // returns a ref so section markup can keep its structure; no JS gating,
  // which kept getting clobbered by React re-renders.
  return useRef(null);
}

const scrollToRegister = () => {
  const el = document.getElementById('register');
  if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
};

/* ============================================================ COUNTDOWN */
function useCountdown() {
  const target = Date.parse(EVENT.iso);
  const [now, setNow] = useState(() => Date.now());
  useEffect(() => {
    const id = setInterval(() => setNow(Date.now()), 1000);
    return () => clearInterval(id);
  }, []);
  let diff = Math.max(0, target - now);
  const d = Math.floor(diff / 86400000); diff -= d * 86400000;
  const h = Math.floor(diff / 3600000); diff -= h * 3600000;
  const m = Math.floor(diff / 60000); diff -= m * 60000;
  const s = Math.floor(diff / 1000);
  const pad = (n) => String(n).padStart(2, '0');
  return [
    { v: pad(d), l: 'Days' },
    { v: pad(h), l: 'Hrs' },
    { v: pad(m), l: 'Min' },
    { v: pad(s), l: 'Sec' },
  ];
}

function HeaderCountdown() {
  const segs = useCountdown();
  return (
    <div className="header-countdown" style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
      <span className="eyebrow" style={{ color: 'var(--mp-gold-light)', whiteSpace: 'nowrap' }}>Live in</span>
      <div style={{ display: 'flex', alignItems: 'flex-start', gap: 6 }}>
        {segs.map((seg, i) => (
          <React.Fragment key={seg.l}>
            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', minWidth: 34 }}>
              <span style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: '1.05rem', lineHeight: 1, color: 'var(--text-on-dark)', fontVariantNumeric: 'tabular-nums' }}>{seg.v}</span>
              <span style={{ fontSize: '9px', fontWeight: 800, textTransform: 'uppercase', letterSpacing: '0.08em', color: 'var(--text-on-dark-muted)', marginTop: 4 }}>{seg.l}</span>
            </div>
            {i < segs.length - 1 && <span style={{ fontWeight: 800, color: 'rgba(255,255,255,0.32)', fontSize: '1rem', lineHeight: 1, marginTop: 1 }}>:</span>}
          </React.Fragment>
        ))}
      </div>
    </div>
  );
}

/* ============================================================ HEADER */
function Header() {
  const [solid, setSolid] = useState(false);
  useEffect(() => {
    const onScroll = () => setSolid(window.scrollY > 24);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <header style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
      background: solid ? 'rgba(21,22,47,0.88)' : 'rgba(255,255,255,0)',
      backdropFilter: solid ? 'saturate(160%) blur(10px)' : 'none',
      borderBottom: solid ? '1px solid var(--border-inverse)' : '1px solid transparent',
      transition: 'background .3s var(--ease-out), border-color .3s var(--ease-out)',
    }}>
      <div className="wrap header-bar" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <img className="header-logo" src="assets/ec-linear-white.svg?v=2" alt="Entrepreneurs Circle" style={{ height: 26, filter: 'brightness(0) invert(1)' }} />
        <div style={{ display: 'flex', alignItems: 'center', gap: 22 }}>
          <HeaderCountdown />
          <Button variant="gold" size="sm" onClick={scrollToRegister}>Register Free</Button>
        </div>
      </div>
    </header>
  );
}

/* ============================================================ HERO */
function Hero() {
  const ref = useReveal();
  return (
    <section className="panel-navy hero-section" ref={ref} style={{ position: 'relative', paddingTop: 116, paddingBottom: 'clamp(48px, 6vw, 88px)', overflow: 'hidden' }}>
      <div className="wrap hero-grid">
        {/* LEFT */}
        <div className="hero-copy">
          <div className="reveal hero-badge" style={{ display: 'inline-flex', flexWrap: 'wrap', maxWidth: '100%', alignItems: 'center', gap: 12, padding: '9px 18px', borderRadius: 'var(--radius-pill)', background: '#fff', boxShadow: 'var(--shadow-md)', marginBottom: 26 }}>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7 }}>
              <span style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--ec-red)', boxShadow: '0 0 0 4px rgba(200,16,46,0.16)' }} />
              <span className="eyebrow" style={{ color: 'var(--ec-red)', fontWeight: 900 }}>Live</span>
            </span>
            <span className="hero-badge-text" style={{ fontWeight: 800, fontSize: 'var(--fs-sm)', color: 'var(--mp-navy)', letterSpacing: '-0.005em' }}>A Brand-New Live Event for UK Business Owners</span>
          </div>

          <h1 className="reveal" style={{ margin: 0, color: 'var(--text-on-dark)', fontWeight: 900, fontSize: 'clamp(2.2rem, 1.3rem + 3vw, 3.6rem)', lineHeight: 1.04, letterSpacing: '-0.02em', textWrap: 'balance' }}>
            Here's How We Built 15 Businesses To <span className="gold-text">£100k Months</span>
            <span style={{ display: 'block', marginTop: 8, fontSize: '0.62em', fontWeight: 800 }} className="gold-text">(…and one to £1m a month)</span>
          </h1>

          <p className="reveal" style={{ marginTop: 22, marginBottom: 0, maxWidth: 600, color: 'rgba(255,255,255,0.86)', fontSize: 'clamp(1.15rem, 1.02rem + 0.5vw, 1.4rem)', lineHeight: 1.55, fontWeight: 600 }}>
            In this brand-new live event, we reveal the nine-step system we use so you can finally crack that £100k month mark, without spending a ton on marketing, burning out, or selling your soul in the process.
          </p>

          <div className="reveal event-badge" style={{ marginTop: 30, display: 'inline-flex', flexWrap: 'wrap', maxWidth: '100%', alignItems: 'center', gap: 16, padding: '16px 22px', borderRadius: 'var(--radius-lg)', background: 'rgba(255,255,255,0.05)', border: '1px solid var(--border-inverse)', boxShadow: 'var(--shadow-md)' }}>
            <span style={{ flexShrink: 0, width: 48, height: 48, borderRadius: 'var(--radius-md)', background: 'var(--mp-gold-gradient)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: 'var(--mp-navy)', boxShadow: 'var(--shadow-gold)' }}>
              <Ic name="calendar-days" size={24} />
            </span>
            <div className="event-badge__text">
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 'clamp(1.25rem, 1.02rem + 0.8vw, 1.65rem)', color: 'var(--text-on-dark)', lineHeight: 1.05, letterSpacing: '-0.01em' }}>
                Monday 13 July · <span className="gold-text">{EVENT.time}</span>
              </div>
              <div style={{ marginTop: 6, fontSize: 'var(--fs-base)', fontWeight: 700, color: 'rgba(255,255,255,0.82)' }}>
                Live online · Broadcast to your home or office
              </div>
            </div>
          </div>
        </div>

        {/* RIGHT — registration card */}
        <div className="reveal" id="register" style={{ scrollMarginTop: 88 }}>
          <RegisterCard />
        </div>
      </div>
    </section>
  );
}

function EventChip({ icon, text }) {
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 9, color: 'var(--text-on-dark)', fontWeight: 700, fontSize: 'var(--fs-sm)' }}>
      <span style={{ display: 'inline-flex', color: 'var(--mp-gold-light)' }}><Ic name={icon} size={17} /></span>
      {text}
    </span>
  );
}

/* ============================================================ PHONE FIELD */
const COUNTRIES = [
  { iso: 'GB', name: 'United Kingdom', dial: '+44', flag: '🇬🇧' },
  { iso: 'IE', name: 'Ireland', dial: '+353', flag: '🇮🇪' },
  { iso: 'US', name: 'United States', dial: '+1', flag: '🇺🇸' },
  { iso: 'CA', name: 'Canada', dial: '+1', flag: '🇨🇦' },
  { iso: 'AU', name: 'Australia', dial: '+61', flag: '🇦🇺' },
  { iso: 'NZ', name: 'New Zealand', dial: '+64', flag: '🇳🇿' },
  { iso: 'AE', name: 'United Arab Emirates', dial: '+971', flag: '🇦🇪' },
  { iso: 'AT', name: 'Austria', dial: '+43', flag: '🇦🇹' },
  { iso: 'BE', name: 'Belgium', dial: '+32', flag: '🇧🇪' },
  { iso: 'BR', name: 'Brazil', dial: '+55', flag: '🇧🇷' },
  { iso: 'CH', name: 'Switzerland', dial: '+41', flag: '🇨🇭' },
  { iso: 'CN', name: 'China', dial: '+86', flag: '🇨🇳' },
  { iso: 'CY', name: 'Cyprus', dial: '+357', flag: '🇨🇾' },
  { iso: 'CZ', name: 'Czechia', dial: '+420', flag: '🇨🇿' },
  { iso: 'DE', name: 'Germany', dial: '+49', flag: '🇩🇪' },
  { iso: 'DK', name: 'Denmark', dial: '+45', flag: '🇩🇰' },
  { iso: 'ES', name: 'Spain', dial: '+34', flag: '🇪🇸' },
  { iso: 'FI', name: 'Finland', dial: '+358', flag: '🇫🇮' },
  { iso: 'FR', name: 'France', dial: '+33', flag: '🇫🇷' },
  { iso: 'GR', name: 'Greece', dial: '+30', flag: '🇬🇷' },
  { iso: 'HK', name: 'Hong Kong', dial: '+852', flag: '🇭🇰' },
  { iso: 'IN', name: 'India', dial: '+91', flag: '🇮🇳' },
  { iso: 'IT', name: 'Italy', dial: '+39', flag: '🇮🇹' },
  { iso: 'JP', name: 'Japan', dial: '+81', flag: '🇯🇵' },
  { iso: 'KE', name: 'Kenya', dial: '+254', flag: '🇰🇪' },
  { iso: 'LU', name: 'Luxembourg', dial: '+352', flag: '🇱🇺' },
  { iso: 'MT', name: 'Malta', dial: '+356', flag: '🇲🇹' },
  { iso: 'MX', name: 'Mexico', dial: '+52', flag: '🇲🇽' },
  { iso: 'MY', name: 'Malaysia', dial: '+60', flag: '🇲🇾' },
  { iso: 'NG', name: 'Nigeria', dial: '+234', flag: '🇳🇬' },
  { iso: 'NL', name: 'Netherlands', dial: '+31', flag: '🇳🇱' },
  { iso: 'NO', name: 'Norway', dial: '+47', flag: '🇳🇴' },
  { iso: 'PH', name: 'Philippines', dial: '+63', flag: '🇵🇭' },
  { iso: 'PL', name: 'Poland', dial: '+48', flag: '🇵🇱' },
  { iso: 'PT', name: 'Portugal', dial: '+351', flag: '🇵🇹' },
  { iso: 'RO', name: 'Romania', dial: '+40', flag: '🇷🇴' },
  { iso: 'SA', name: 'Saudi Arabia', dial: '+966', flag: '🇸🇦' },
  { iso: 'SE', name: 'Sweden', dial: '+46', flag: '🇸🇪' },
  { iso: 'SG', name: 'Singapore', dial: '+65', flag: '🇸🇬' },
  { iso: 'TH', name: 'Thailand', dial: '+66', flag: '🇹🇭' },
  { iso: 'TR', name: 'Türkiye', dial: '+90', flag: '🇹🇷' },
  { iso: 'ZA', name: 'South Africa', dial: '+27', flag: '🇿🇦' },
];
const findCountry = (iso) => COUNTRIES.find((c) => c.iso === iso) || COUNTRIES[0];
// Countries where a leading zero is part of the national number in international (E.164) format.
const KEEP_LEADING_ZERO = new Set(['IT']);
// National significant number: strip non-digits, and drop trunk-prefix leading zeros
// except for countries (e.g. Italy) where the leading zero is significant.
const phoneNsn = (raw, iso) => {
  const digits = String(raw || '').replace(/\D/g, '');
  return KEEP_LEADING_ZERO.has(iso) ? digits : digits.replace(/^0+/, '');
};
// Per-country national-number validation. UK is strict; other countries fall back
// to a generic length check. All are bounded by the E.164 15-digit maximum.
const PHONE_RULES = {
  GB: {
    test: (n) => /^7\d{9}$/.test(n) || /^[1235689]\d{8,9}$/.test(n),
    msg: 'Please enter a valid UK phone number, e.g. 07123 456789.',
  },
};
const isValidPhone = (raw, iso) => {
  const c = findCountry(iso);
  const dialLen = c.dial.replace(/\D/g, '').length;
  const nsn = phoneNsn(raw, iso);
  if (dialLen + nsn.length > 15) return false; // E.164 upper bound
  const rule = PHONE_RULES[iso];
  if (rule) return rule.test(nsn);
  return nsn.length >= 6 && nsn.length <= 14;
};
const phoneErrorMsg = (iso) => (PHONE_RULES[iso] && PHONE_RULES[iso].msg) || 'Please enter a valid phone number.';
const isValidEmail = (v) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(String(v || '').trim());

function PhoneField({ label, country, onCountry, value, onChange, error }) {
  const [open, setOpen] = useState(false);
  const [focused, setFocused] = useState(false);
  const ref = useRef(null);
  const c = findCountry(country);
  useEffect(() => {
    const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener('mousedown', onDoc);
    return () => document.removeEventListener('mousedown', onDoc);
  }, []);
  const active = focused || open;
  const borderColor = error ? 'var(--danger)' : active ? 'var(--mp-gold-dark)' : 'var(--border-strong)';
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 6, fontFamily: 'var(--font-body)' }} ref={ref}>
      {label && <label style={{ fontSize: 'var(--fs-sm)', fontWeight: 'var(--fw-bold)', color: 'var(--text-strong)' }}>{label}</label>}
      <div style={{ position: 'relative' }}>
        <div style={{ display: 'flex', alignItems: 'center', height: 46, border: '1.5px solid ' + borderColor, borderRadius: 'var(--radius-md)', background: 'var(--surface-card)', boxShadow: active && !error ? 'var(--focus-ring)' : 'none', transition: 'border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out)', overflow: 'hidden' }}>
          <button type="button" onClick={() => setOpen((o) => !o)} aria-label="Select country dialling code" style={{ display: 'inline-flex', alignItems: 'center', gap: 6, height: '100%', padding: '0 10px 0 12px', border: 'none', borderRight: '1.5px solid var(--border)', background: 'transparent', cursor: 'pointer', fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 'var(--fs-sm)', color: 'var(--text-strong)', flexShrink: 0 }}>
            <span style={{ fontSize: 17, lineHeight: 1 }}>{c.flag}</span>
            <span>{c.dial}</span>
            <Ic name="chevron-down" size={14} style={{ color: 'var(--text-muted)' }} />
          </button>
          <input type="tel" inputMode="tel" autoComplete="tel-national" value={value} placeholder="7700 900000" onChange={onChange} onFocus={() => setFocused(true)} onBlur={() => setFocused(false)} style={{ flex: 1, border: 'none', outline: 'none', background: 'transparent', fontFamily: 'var(--font-body)', fontSize: 'var(--fs-base)', color: 'var(--text-strong)', minWidth: 0, padding: '0 14px' }} />
        </div>
        {open && (
          <div style={{ position: 'absolute', zIndex: 20, top: 'calc(100% + 6px)', left: 0, right: 0, maxHeight: 240, overflowY: 'auto', background: 'var(--surface-card)', border: '1px solid var(--border-strong)', borderRadius: 'var(--radius-md)', boxShadow: 'var(--shadow-lg)', padding: 4 }}>
            {COUNTRIES.map((o) => (
              <button type="button" key={o.iso} onClick={() => { onCountry(o.iso); setOpen(false); }} style={{ display: 'flex', alignItems: 'center', gap: 10, width: '100%', textAlign: 'left', padding: '9px 10px', border: 'none', borderRadius: 'var(--radius-sm)', background: o.iso === country ? 'var(--accent-soft)' : 'transparent', cursor: 'pointer', fontFamily: 'var(--font-body)', fontSize: 'var(--fs-sm)', color: 'var(--text-body)' }}>
                <span style={{ fontSize: 17, lineHeight: 1 }}>{o.flag}</span>
                <span style={{ flex: 1 }}>{o.name}</span>
                <span style={{ color: 'var(--text-muted)', fontWeight: 700 }}>{o.dial}</span>
              </button>
            ))}
          </div>
        )}
      </div>
      {error && <span style={{ fontSize: 'var(--fs-xs)', color: 'var(--danger)' }}>{error}</span>}
    </div>
  );
}

/* ============================================================ REGISTER CARD */
function RegisterCard() {
  const [count, setCount] = useState(computeRegCount);
  const [done, setDone] = useState(false);
  const [stage, setStage] = useState(1);
  const [first, setFirst] = useState('');
  const [email, setEmail] = useState('');
  const [phone, setPhone] = useState('');
  const [country, setCountry] = useState('GB');
  const [phoneErr, setPhoneErr] = useState('');
  const [firstErr, setFirstErr] = useState('');
  const [emailErr, setEmailErr] = useState('');
  const [ownsErr, setOwnsErr] = useState('');
  const [owns, setOwns] = useState('');
  const [submitting, setSubmitting] = useState(false);
  const [tracking, setTracking] = useState(captureTracking);

  useEffect(() => {
    // _fbc/_fbp cookies are written asynchronously by the Meta Pixel; re-read shortly after mount.
    const id = setTimeout(() => setTracking(captureTracking()), 800);
    return () => clearTimeout(id);
  }, []);

  const OWN_OPTS = [
    { v: 'no', label: <React.Fragment>No, I do not own a business</React.Fragment> },
    { v: 'over', label: <React.Fragment>Yes, it makes over £100k per year</React.Fragment> },
    { v: 'under', label: <React.Fragment>Yes, it makes less than £100k per year</React.Fragment> },
  ];

  useEffect(() => {
    let alive = true;
    const tick = () => {
      if (!alive) return;
      setCount((c) => {
        const next = Math.max(c, computeRegCount());
        if (next > c) localStorage.setItem('mp_reg_count', String(next));
        return next;
      });
      t = setTimeout(tick, 60000);
    };
    let t = setTimeout(tick, 60000);
    return () => { alive = false; clearTimeout(t); };
  }, []);

  const next = (e) => {
    e.preventDefault();
    const fe = first.trim() ? '' : 'Please enter your first name.';
    const ee = !email.trim()
      ? 'Please enter your email address.'
      : (isValidEmail(email) ? '' : 'Please enter a valid email address.');
    setFirstErr(fe);
    setEmailErr(ee);
    if (fe || ee) return;
    setStage(2);
  };
  const submit = async (e) => {
    e.preventDefault();
    if (submitting) return;
    let ok = true;
    if (!phone.trim()) { setPhoneErr('Please enter your phone number.'); ok = false; }
    else if (!isValidPhone(phone, country)) { setPhoneErr(phoneErrorMsg(country)); ok = false; }
    if (!owns) { setOwnsErr('Please let us know if you own a business.'); ok = false; }
    if (!ok) return;
    setPhoneErr('');
    setOwnsErr('');
    setSubmitting(true);
    const c = findCountry(country);
    const fullPhone = c.dial + phoneNsn(phone, country);
    const t = captureTracking();
    await sendLeadToCrm({
      firstName: first.trim(),
      email: email.trim(),
      phone: fullPhone,
      ownsBusiness: OWN_LABELS[owns] || owns,
      source: '£100k Months registration page',
      ...t,
    });
    const name = first.trim().split(' ')[0];
    const qs = new URLSearchParams();
    if (name) qs.set('name', name);
    Object.entries(t).forEach(([k, v]) => { if (v) qs.set(k, v); });
    const q = qs.toString();
    window.location.href = 'thank-you.html' + (q ? '?' + q : '');
  };

  return (
    <Card elevation="xl" padding="none" style={{ overflow: 'hidden', boxShadow: 'var(--shadow-xl)' }}>
      <div style={{ background: 'var(--mp-gold-gradient)', padding: '14px 24px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <span style={{ fontWeight: 900, color: 'var(--mp-navy)', fontSize: 'var(--fs-base)', letterSpacing: '-0.01em' }}>Save my place to the free live event</span>
        <span style={{ fontWeight: 800, color: 'var(--mp-navy)', fontSize: 'var(--fs-xs)', textTransform: 'uppercase', letterSpacing: 'var(--ls-wide)' }}>Free</span>
      </div>

      <div style={{ padding: '24px' }}>
        {!done && (
          <p style={{ margin: '0 0 18px', color: 'var(--text-body)', fontSize: 'var(--fs-sm)', lineHeight: 1.55, fontWeight: 600 }}>
            Claim your free ticket to the live event and let us know where we should send your free workbook.
          </p>
        )}
        {!done && (
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 16 }}>
            {[1, 2].map((n) => (
              <span key={n} style={{ flex: 1, height: 4, borderRadius: 'var(--radius-pill)', background: stage >= n ? 'var(--mp-gold-dark)' : 'var(--border)' }} />
            ))}
            <span style={{ fontSize: 'var(--fs-xs)', fontWeight: 800, color: 'var(--text-muted)', whiteSpace: 'nowrap' }}>Step {stage} of 2</span>
          </div>
        )}

        {done ? (
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', gap: 12, padding: '12px 0 8px' }}>
            <span style={{ width: 56, height: 56, borderRadius: '50%', background: 'var(--success-bg)', color: 'var(--success)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}><Ic name="check" size={28} /></span>
            <div style={{ fontWeight: 900, color: 'var(--text-strong)', fontSize: 'var(--fs-h3)', fontFamily: 'var(--font-display)' }}>You're in, {first.trim().split(' ')[0]}.</div>
            <p style={{ margin: 0, color: 'var(--text-body)', fontSize: 'var(--fs-base)', lineHeight: 1.55 }}>
              Check your inbox for joining details. Add it to your calendar and show up live to ask Nigel your questions.
            </p>
          </div>
        ) : stage === 1 ? (
          <form onSubmit={next} style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            <TrackingFields data={tracking} />
            <Input label="First name" placeholder="Jane" value={first} onChange={(e) => { setFirst(e.target.value); if (firstErr) setFirstErr(''); }} error={firstErr} autoComplete="given-name" />
            <Input label="Email address" type="email" placeholder="jane@yourbusiness.co.uk" value={email} onChange={(e) => { setEmail(e.target.value); if (emailErr) setEmailErr(''); }} error={emailErr} autoComplete="email" />
            <Button type="submit" variant="gold" size="lg" fullWidth iconRight={<Ic name="arrow-right" size={18} />} style={{ marginTop: 4 }}>
              Register Free — Save My Place
            </Button>
            <p style={{ margin: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, textAlign: 'center', color: 'var(--text-muted)', fontSize: 'var(--fs-sm)', fontWeight: 600 }}>
              <Ic name="lock" size={13} style={{ color: 'var(--text-muted)' }} />
              It's completely free. Your details are 100% safe. We hate spam.
            </p>
          </form>
        ) : (
          <form onSubmit={submit} style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            <TrackingFields data={tracking} />
            <button type="button" onClick={() => setStage(1)} style={{ alignSelf: 'flex-start', display: 'inline-flex', alignItems: 'center', gap: 6, background: 'transparent', border: 'none', padding: 0, cursor: 'pointer', color: 'var(--text-muted)', fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 'var(--fs-sm)' }}>
              <Ic name="arrow-left" size={15} /> Back
            </button>
            <p style={{ margin: '-2px 0 2px', color: 'var(--text-body)', fontSize: 'var(--fs-sm)', fontWeight: 600 }}>
              Nearly there, {first.trim().split(' ')[0] || 'just'}. Two quick details and your place is saved.
            </p>
            <PhoneField label="Phone number" country={country} onCountry={(iso) => { setCountry(iso); if (phoneErr) setPhoneErr(''); }} value={phone} onChange={(e) => { setPhone(e.target.value); if (phoneErr) setPhoneErr(''); }} error={phoneErr} />
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              <span style={{ fontSize: 'var(--fs-sm)', fontWeight: 'var(--fw-bold)', color: 'var(--text-strong)' }}>Do you own a business?</span>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                {OWN_OPTS.map((o) => {
                  const sel = owns === o.v;
                  return (
                    <button type="button" key={o.v} onClick={() => { setOwns(o.v); if (ownsErr) setOwnsErr(''); }} style={{
                      display: 'flex', alignItems: 'center', gap: 10, textAlign: 'left',
                      padding: '11px 14px', borderRadius: 'var(--radius-md)', cursor: 'pointer',
                      background: sel ? 'var(--accent-soft)' : 'var(--surface-card)',
                      border: '1.5px solid ' + (sel ? 'var(--mp-gold-dark)' : 'var(--border-strong)'),
                      fontFamily: 'var(--font-body)',
                      transition: 'border-color .15s var(--ease-out), background .15s var(--ease-out)',
                    }}>
                      <span style={{ flexShrink: 0, width: 18, height: 18, borderRadius: '50%', border: '2px solid ' + (sel ? 'var(--mp-gold-dark)' : 'var(--border-strong)'), display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
                        {sel && <span style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--mp-gold-dark)' }} />}
                      </span>
                      <span style={{ fontSize: 'var(--fs-sm)', fontWeight: 600, color: 'var(--text-body)', lineHeight: 1.35 }}>{o.label}</span>
                    </button>
                  );
                })}
              </div>
              {ownsErr && <span style={{ color: 'var(--danger)', fontSize: 'var(--fs-sm)', fontWeight: 600 }}>{ownsErr}</span>}
            </div>
            <Button type="submit" variant="gold" size="lg" fullWidth disabled={submitting} iconRight={<Ic name="arrow-right" size={18} />} style={{ marginTop: 4 }}>
              {submitting ? 'Saving your place…' : 'Confirm My Place'}
            </Button>
          </form>
        )}

        <div style={{ marginTop: 18, paddingTop: 16, borderTop: '1px solid var(--border)', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8 }}>
          <span style={{ position: 'relative', width: 8, height: 8 }}>
            <span style={{ position: 'absolute', inset: 0, borderRadius: '50%', background: 'var(--success)' }} />
            <span style={{ position: 'absolute', inset: -3, borderRadius: '50%', border: '1px solid var(--success)', opacity: 0.4 }} />
          </span>
          <span style={{ fontSize: 'var(--fs-sm)', color: 'var(--text-body)', fontWeight: 600 }}>
            <strong style={{ color: 'var(--text-strong)', fontWeight: 800 }}>{count.toLocaleString('en-GB')}</strong> business owners have already registered
          </span>
        </div>
      </div>
    </Card>
  );
}

/* ============================================================ SOCIAL PROOF STRIP */
function SocialProof() {
  const Star = () => <span style={{ color: 'var(--mp-gold-dark)', display: 'inline-flex' }}><Ic name="star" size={15} style={{ fill: 'var(--mp-gold-dark)' }} /></span>;
  const StarHalf = () => (
    <span style={{ position: 'relative', display: 'inline-flex', width: 15, height: 15 }}>
      <span style={{ color: 'var(--border)', display: 'inline-flex' }}><Ic name="star" size={15} style={{ fill: 'var(--border)' }} /></span>
      <span style={{ position: 'absolute', inset: 0, width: '50%', overflow: 'hidden', color: 'var(--mp-gold-dark)', display: 'inline-flex' }}><Ic name="star" size={15} style={{ fill: 'var(--mp-gold-dark)' }} /></span>
    </span>
  );
  return (
    <section style={{ background: 'var(--surface-card)', borderBottom: '1px solid var(--border)' }}>
      <div className="wrap" style={{ padding: '18px 28px' }}>
        <div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'center', gap: '14px 40px' }}>
        <ProofItem icon={<Ic name="users" size={18} />} bold="50,000+" rest="Entrepreneurs Trust EC" />
        <Divider />
        <ProofItem icon={<Ic name="trending-up" size={18} />} bold="£100m+" rest="In Sales Generated" />
        <Divider />
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <strong style={{ color: 'var(--text-strong)', fontWeight: 800 }}>Google</strong>
          <span style={{ display: 'inline-flex', gap: 1 }}><Star /><Star /><Star /><Star /><Star /></span>
          <span style={{ color: 'var(--text-muted)', fontSize: 'var(--fs-sm)', fontWeight: 600 }}>4.9 · 911 reviews</span>
        </div>
        <Divider />
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <strong style={{ color: 'var(--text-strong)', fontWeight: 800 }}>Facebook</strong>
          <span style={{ display: 'inline-flex', gap: 1 }}><Star /><Star /><Star /><Star /><Star /></span>
          <span style={{ color: 'var(--text-muted)', fontSize: 'var(--fs-sm)', fontWeight: 600 }}>4.6 · 286 reviews</span>
        </div>
        <Divider />
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <strong style={{ color: 'var(--text-strong)', fontWeight: 800 }}>Trustpilot</strong>
          <span style={{ display: 'inline-flex', gap: 1 }}><Star /><Star /><Star /><Star /><StarHalf /></span>
          <span style={{ color: 'var(--text-muted)', fontSize: 'var(--fs-sm)', fontWeight: 600 }}>4.5 · 866 reviews</span>
        </div>
        </div>
        <div className="press-strip">
          <span className="press-label">As featured in</span>
          <img className="press-logo" src="assets/press-sunday-times.png" alt="The Sunday Times Best Places to Work 2026" />
          <img className="press-logo" src="assets/press-daily-mail.png" alt="Daily Mail" />
          <img className="press-logo press-logo--color" src="assets/press-sky-news.png" alt="Sky News" />
          <img className="press-logo" src="assets/press-cnbc.png" alt="CNBC" />
          <img className="press-logo" src="assets/press-channel-5.png" alt="Channel 5" />
          <img className="press-logo" src="assets/press-bbc-5-live.png" alt="BBC Radio 5 Live" />
        </div>
      </div>
    </section>
  );
}
const Divider = () => <span style={{ width: 1, height: 22, background: 'var(--border)', display: 'inline-block' }} />;
function ProofItem({ icon, bold, rest }) {
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 9, fontSize: 'var(--fs-sm)', color: 'var(--text-body)', fontWeight: 600 }}>
      <span style={{ color: 'var(--mp-gold-dark)', display: 'inline-flex' }}>{icon}</span>
      <strong style={{ color: 'var(--text-strong)', fontWeight: 800 }}>{bold}</strong> {rest}
    </span>
  );
}

/* ============================================================ SECTION SHELL */
function SectionLabel({ children, light }) {
  return (
    <div className="eyebrow reveal" style={{ color: light ? 'var(--mp-gold-light)' : 'var(--mp-gold-dark)', marginBottom: 18 }}>{children}</div>
  );
}

/* ============================================================ PROBLEM */
function Problem() {
  const ref = useReveal();
  return (
    <section ref={ref} style={{ padding: 'var(--section-y) 0', background: 'var(--surface-page)' }}>
      <div className="wrap split-grid split-left">
        <div className="reveal" style={{ position: 'relative' }}>
          <div style={{ position: 'absolute', inset: 0, transform: 'translate(-14px, 14px)', borderRadius: 'var(--radius-xl)', background: 'var(--mp-gold-gradient)', opacity: 0.9 }} />
          <img src="assets/nigel-100k-sign.png" alt="Nigel Botterill outside Entrepreneurs Circle HQ holding a How To Get Your Business To £100k Months sign" style={{ position: 'relative', display: 'block', width: '100%', height: 'auto', borderRadius: 'var(--radius-xl)', boxShadow: 'var(--shadow-lg)' }} />
        </div>
        <div>
          <h2 className="reveal" style={{ margin: 0, color: 'var(--text-strong)', fontWeight: 900, fontSize: 'clamp(1.9rem, 1.2rem + 2.4vw, 2.9rem)', lineHeight: 1.08, letterSpacing: '-0.02em', textWrap: 'balance' }}>
              Your Business Can't Run Without You. <span className="gold-text">That's the Problem.</span>
          </h2>
          <div className="reveal" style={{ marginTop: 26, display: 'flex', flexDirection: 'column', gap: 20, fontSize: 'var(--fs-lg)', lineHeight: 1.7, color: 'var(--text-body)' }}>
            <p style={{ margin: 0, fontWeight: 800, color: 'var(--text-strong)' }}>If you're the first one in and the last one out, if every decision routes through you and every problem lands on your desk, then this is you.</p>
            <p style={{ margin: 0 }}>Take a day off and things slip, so you stop taking days off. That's not a business. That's the hardest job you'll ever have, with you as the hardest-working employee in it.</p>
            <p style={{ margin: 0 }}>And the cause is simple. Nothing is systemised. There's no process that runs without you holding it together, so the business can only grow as far as your own hours and energy will stretch. If that sounds familiar, you've probably already found that ceiling.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================ SHIFT */
function Shift() {
  const ref = useReveal();
  return (
    <section ref={ref} className="panel-navy" style={{ padding: 'var(--section-y) 0' }}>
      <div className="wrap-narrow">
        <SectionLabel light>The way out</SectionLabel>
        <h2 className="reveal" style={{ margin: 0, color: 'var(--text-on-dark)', fontWeight: 900, fontSize: 'clamp(1.9rem, 1.2rem + 2.4vw, 2.9rem)', lineHeight: 1.08, letterSpacing: '-0.02em', textWrap: 'balance' }}>
          There's a way out, and the order you do it in is <span className="gold-text">everything.</span>
        </h2>
        <div className="reveal" style={{ marginTop: 26, display: 'flex', flexDirection: 'column', gap: 20, fontSize: 'var(--fs-lg)', lineHeight: 1.7, color: 'var(--text-on-dark)' }}>
          <p style={{ margin: 0 }}>The fix isn't working harder, and it isn't hiring one more person and hoping it sticks. It's systemising every part of the business so it runs without you.</p>
          <p style={{ margin: 0 }}>Here's why most owners never get there: they try to systemise, and it falls apart, because they do it in the wrong order. Build the systems in the right sequence and the business starts to carry itself.</p>
          <p style={{ margin: 0 }}>That sequence is the 9-step system Nigel takes you through on the day. We've used it to build 15 separate businesses past £100k months, and one past £1m a month.</p>
        </div>

        <figure className="reveal" style={{ margin: '36px 0 0' }}>
          <div style={{ padding: 'clamp(14px, 2.5vw, 28px)', borderRadius: 'var(--radius-xl)', background: 'rgba(255,255,255,0.04)', border: '1px solid var(--border-inverse)', boxShadow: 'var(--shadow-lg)' }}>
            <img src="assets/masterplan-9-steps.png" alt="The 9-step system mapped across three levels: Foundation, Execution and Optimisation" style={{ display: 'block', width: '100%', height: 'auto' }} />
          </div>
          <figcaption style={{ marginTop: 16, textAlign: 'center', color: 'var(--text-on-dark-muted)', fontSize: 'var(--fs-sm)', fontWeight: 600 }}>
            Nine steps, three levels, one order. The full picture is revealed live on the day.
          </figcaption>
        </figure>

        <div className="reveal" style={{ marginTop: 34, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12 }}>
          <Button variant="gold" size="lg" onClick={scrollToRegister} iconRight={<Ic name="arrow-right" size={18} />} style={{ height: 'auto', paddingTop: 11, paddingBottom: 11 }}>
            <span style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3, lineHeight: 1.1 }}>
              <span>Register Free — Save My Place</span>
              <span style={{ fontStyle: 'italic', fontWeight: 600, fontSize: '0.72em', opacity: 0.85 }}>(It's 100% free)</span>
            </span>
          </Button>
        </div>
      </div>
    </section>
  );
}

/* ============================================================ BENEFITS */
const BENEFITS = [
  { icon: 'list-ordered', title: 'The full 9-step system, in its entirety', body: 'The exact sequence we\u2019ve used to build 15 separate businesses past the £100k month mark. We go through all of it on the day, start to finish.' },
  { icon: 'flag', title: 'Which part of your business to systemise first', body: 'Get this right and everything after it gets easier. We show you exactly where to start.' },
  { icon: 'messages-square', title: 'A live Q&A with Nigel', body: 'Bring your situation and get specific, personalised advice on your business, live on the day.' },
  { icon: 'book-open', title: 'A free workbook when you sign up', body: 'Capture every lesson, learning and insight from the session, so you can take it away and actually implement it.' },
];
function Benefits() {
  const ref = useReveal();
  return (
    <section ref={ref} style={{ padding: 'var(--section-y) 0', background: 'var(--surface-card)' }}>
      <div className="wrap">
        <div style={{ textAlign: 'center', marginBottom: 48 }}>
          <SectionLabel>A value-packed live and interactive session</SectionLabel>
          <h2 className="reveal" style={{ margin: 0, color: 'var(--text-strong)', fontWeight: 900, fontSize: 'clamp(1.9rem, 1.2rem + 2.4vw, 2.9rem)', lineHeight: 1.08, letterSpacing: '-0.02em', textWrap: 'balance' }}>
            Here's exactly what you'll get in a 90-minute live event
          </h2>
        </div>
        <div className="benefit-grid">
          {BENEFITS.map((b, i) => (
            <div className="reveal" key={i}>
              <Card interactive elevation="sm" padding="lg" style={{ height: '100%' }}>
                <div style={{ width: 60, height: 60, borderRadius: 'var(--radius-lg)', background: 'var(--accent-soft)', color: 'var(--mp-gold-dark)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', marginBottom: 20 }}>
                  <Ic name={b.icon} size={28} />
                </div>
                <h3 style={{ margin: '0 0 10px', color: 'var(--text-strong)', fontWeight: 800, fontSize: 'var(--fs-h3)', lineHeight: 1.2 }}>{b.title}</h3>
                <p style={{ margin: 0, color: 'var(--text-muted)', fontSize: 'var(--fs-lg)', lineHeight: 1.6 }}>{b.body}</p>
              </Card>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================ PROOF BLOCK */
function ProofBlock() {
  const ref = useReveal();
  return (
    <section ref={ref} className="panel-navy" style={{ padding: 'var(--section-y) 0', position: 'relative', overflow: 'hidden' }}>
      {/* striking oversized watermark */}
      <div aria-hidden="true" style={{ position: 'absolute', top: '-4%', right: '-2%', fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 'clamp(12rem, 30vw, 28rem)', lineHeight: 0.8, color: 'rgba(238,210,124,0.05)', letterSpacing: '-0.04em', pointerEvents: 'none', userSelect: 'none' }}>15</div>

      <div className="wrap" style={{ position: 'relative' }}>
        <div className="reveal" style={{ textAlign: 'center', maxWidth: 880, margin: '0 auto' }}>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 9, padding: '7px 16px', borderRadius: 'var(--radius-pill)', border: '1px solid rgba(238,210,124,0.4)', background: 'rgba(238,210,124,0.08)', marginBottom: 22 }}>
            <Ic name="badge-check" size={15} style={{ color: 'var(--mp-gold-light)' }} />
            <span className="eyebrow gold-text" style={{ whiteSpace: 'nowrap' }}>Not another fake guru</span>
          </div>
          <h2 style={{ margin: 0, color: 'var(--text-on-dark)', fontWeight: 900, fontSize: 'clamp(2rem, 1.3rem + 2.6vw, 3.1rem)', lineHeight: 1.08, letterSpacing: '-0.02em', textWrap: 'balance' }}>
            Learn from the man who's <span className="gold-text">actually been there and done it 15 times.</span>
          </h2>
          <p style={{ marginTop: 18, color: 'var(--text-on-dark-muted)', fontSize: 'var(--fs-lg)', lineHeight: 1.6 }}>
            Two decades. Fifteen businesses built past £100k months from scratch. One past £1m a month. Not theory, not a side hustle, the exact system he hands you on the day.
          </p>
        </div>

        <div className="proof-stats reveal" style={{ marginTop: 'clamp(36px, 5vw, 56px)' }}>
          <ProofStat icon="building-2" value="15" label="businesses past £100k months" />
          <ProofStat icon="trending-up" value="£1m" label="a month, one business" />
          <ProofStat icon="calendar-check" value="20+" suffix="yrs" label="building real businesses" />
          <ProofStat icon="users" value="50k+" label="business owners helped" />
        </div>

        <div className="reveal" style={{ marginTop: 'clamp(26px, 3.5vw, 38px)', display: 'flex', alignItems: 'center', gap: 18, padding: '22px 26px', borderRadius: 'var(--radius-lg)', background: 'rgba(238,210,124,0.08)', border: '1px solid rgba(238,210,124,0.35)' }}>
          <span style={{ flexShrink: 0, width: 46, height: 46, borderRadius: 'var(--radius-md)', background: 'var(--mp-gold-gradient)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: 'var(--mp-navy)', boxShadow: 'var(--shadow-gold)' }}>
            <Ic name="award" size={22} />
          </span>
          <p style={{ margin: 0, color: 'var(--text-on-dark)', fontSize: 'var(--fs-lg)', lineHeight: 1.5 }}>
            <strong style={{ fontWeight: 900 }}>Same 9 steps. Same order. Every time.</strong> <span style={{ color: 'var(--text-on-dark-muted)' }}>Nigel takes you through all of it on the day.</span>
          </p>
        </div>
      </div>
    </section>
  );
}
function ProofStat({ icon, value, suffix, label }) {
  return (
    <div style={{ position: 'relative', padding: '26px 24px', borderRadius: 'var(--radius-lg)', background: 'rgba(255,255,255,0.04)', border: '1px solid var(--border-inverse)', overflow: 'hidden' }}>
      <span style={{ position: 'absolute', top: 0, left: 24, right: 24, height: 2, background: 'var(--mp-gold-gradient)', borderRadius: 'var(--radius-pill)' }} />
      <span style={{ display: 'inline-flex', color: 'var(--mp-gold-light)', marginBottom: 14 }}><Ic name={icon} size={22} /></span>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
        <span className="gold-text" style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 'clamp(2.6rem, 1.8rem + 3vw, 3.8rem)', lineHeight: 0.9, letterSpacing: '-0.03em' }}>{value}</span>
        {suffix && <span className="gold-text" style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: '1.4rem', letterSpacing: '-0.02em' }}>{suffix}</span>}
      </div>
      <div style={{ marginTop: 12, color: 'var(--text-on-dark-muted)', fontSize: 'var(--fs-sm)', fontWeight: 600, lineHeight: 1.4 }}>{label}</div>
    </div>
  );
}

/* ============================================================ HOST */
function Host() {
  const ref = useReveal();
  return (
    <section ref={ref} style={{ padding: 'var(--section-y) 0', background: 'var(--surface-card)' }}>
      <div className="wrap split-grid split-right">
        <div className="reveal host-photo-wrap" style={{ position: 'relative' }}>
          <div style={{ position: 'absolute', inset: 0, transform: 'translate(14px, 14px)', borderRadius: 'var(--radius-xl)', background: 'var(--mp-navy)', opacity: 0.12 }} />
          <div className="host-photo" style={{ position: 'relative', overflow: 'hidden', width: '100%', height: 'clamp(360px, 78vw, 560px)', borderRadius: 'var(--radius-xl)', background: 'var(--mp-gold-gradient)', boxShadow: 'var(--shadow-lg)' }}>
            <img src="assets/nigel-host.webp" alt="Nigel Botterill" style={{ position: 'absolute', bottom: 0, left: '50%', transform: 'translateX(-50%)', height: '100%', width: 'auto', maxWidth: 'none', objectFit: 'contain', display: 'block' }} />
          </div>
        </div>
        <div>
          <SectionLabel>Your host</SectionLabel>
          <h2 className="reveal" style={{ margin: 0, color: 'var(--text-strong)', fontWeight: 900, fontSize: 'clamp(1.9rem, 1.2rem + 2.2vw, 2.7rem)', lineHeight: 1.08, letterSpacing: '-0.02em' }}>
            Nigel Botterill
          </h2>
          <p className="reveal" style={{ marginTop: 20, marginBottom: 0, color: 'var(--text-body)', fontSize: 'var(--fs-lg)', lineHeight: 1.7 }}>
            Nigel is one of the UK's most successful entrepreneurs. He's built 15 separate businesses past £100k months from scratch, and taken one past £1m a month, working with tens of thousands of business owners over two decades. More to the point, he built them to run without him, using the exact system he'll show you. Expect straight talk, sharp Yorkshire humour, and a session that's 100% practical.
          </p>
          <div className="reveal" style={{ marginTop: 30, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12 }}>
            <Button variant="navy" size="lg" onClick={scrollToRegister} iconRight={<Ic name="arrow-right" size={18} />} style={{ height: 'auto', paddingTop: 11, paddingBottom: 11 }}>
              <span style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3, lineHeight: 1.1 }}>
                <span>Register Free — Save My Place</span>
                <span style={{ fontStyle: 'italic', fontWeight: 600, fontSize: '0.72em', opacity: 0.85 }}>(It's 100% free)</span>
              </span>
            </Button>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================ FAQ */
const FAQS = [
  { q: 'How much does a ticket cost?', a: 'Nothing. It\u2019s completely free.' },
  { q: 'Is it really live?', a: 'Yes. Nigel runs it live and takes questions in real time. It isn\u2019t a recording pretending to be live.' },
  { q: 'Do I need to be an Entrepreneurs Circle member?', a: 'No. It\u2019s open to any UK business owner.' },
  { q: 'What are you selling?', a: 'Nothing. You get the full 9-step system on the session. If you want to work with us afterwards that\u2019s your call, but you don\u2019t need to buy anything to get full value on the day.' },
  { q: 'Who is this session for?', a: 'Any owner whose business depends on them for everything, and who wants to build one that runs without them. It works across trades, service businesses, and most industries.' },
  { q: 'Is it recorded?', a: 'Register and we\u2019ll send you the details. Show up live to get the most out of it and to ask Nigel your questions directly.' },
];
function FAQ() {
  const ref = useReveal();
  const [open, setOpen] = useState(0);
  return (
    <section ref={ref} style={{ padding: 'var(--section-y) 0', background: 'var(--surface-page)' }}>
      <div className="wrap-narrow">
        <div style={{ textAlign: 'center', marginBottom: 40 }}>
          <SectionLabel>FAQ</SectionLabel>
          <h2 className="reveal" style={{ margin: 0, color: 'var(--text-strong)', fontWeight: 900, fontSize: 'clamp(1.9rem, 1.2rem + 2.4vw, 2.9rem)', lineHeight: 1.08, letterSpacing: '-0.02em' }}>
            Questions, answered
          </h2>
        </div>
        <div className="reveal" style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          {FAQS.map((f, i) => {
            const isOpen = open === i;
            return (
              <div key={i} style={{ background: 'var(--surface-card)', border: '1px solid ' + (isOpen ? 'var(--border-strong)' : 'var(--border)'), borderRadius: 'var(--radius-lg)', boxShadow: isOpen ? 'var(--shadow-sm)' : 'none', transition: 'border-color .2s var(--ease-out), box-shadow .2s var(--ease-out)' }}>
                <button onClick={() => setOpen(isOpen ? -1 : i)} style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, padding: '20px 22px', background: 'transparent', border: 'none', cursor: 'pointer', textAlign: 'left', fontFamily: 'var(--font-body)' }}>
                  <span style={{ fontWeight: 800, color: 'var(--text-strong)', fontSize: 'var(--fs-lg)' }}>{f.q}</span>
                  <span style={{ flexShrink: 0, color: 'var(--mp-gold-dark)', display: 'inline-flex', transform: isOpen ? 'rotate(180deg)' : 'none', transition: 'transform .25s var(--ease-out)' }}><Ic name="chevron-down" size={20} /></span>
                </button>
                <div style={{ display: 'grid', gridTemplateRows: isOpen ? '1fr' : '0fr', transition: 'grid-template-rows .28s var(--ease-out)' }}>
                  <div style={{ overflow: 'hidden' }}>
                    <p style={{ margin: 0, padding: '0 22px 22px', color: 'var(--text-body)', fontSize: 'var(--fs-base)', lineHeight: 1.65 }}>{f.a}</p>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* ============================================================ FINAL CTA */
function FinalCta() {
  const ref = useReveal();
  return (
    <section ref={ref} className="panel-navy" style={{ padding: 'clamp(56px, 7vw, 104px) 0' }}>
      <div className="wrap-narrow" style={{ textAlign: 'center' }}>
        <h2 className="reveal" style={{ margin: 0, color: 'var(--text-on-dark)', fontWeight: 900, fontSize: 'clamp(2rem, 1.3rem + 2.8vw, 3.2rem)', lineHeight: 1.05, letterSpacing: '-0.02em', textWrap: 'balance' }}>
          Stop being the bottleneck. <span className="gold-text">Save your place, it's free.</span>
        </h2>
        <div className="reveal" style={{ marginTop: 28, display: 'flex', justifyContent: 'center' }}>
          <div style={{ display: 'inline-flex', flexWrap: 'wrap', justifyContent: 'center', maxWidth: '100%', alignItems: 'center', gap: 16, padding: '16px 22px', borderRadius: 'var(--radius-lg)', background: 'rgba(255,255,255,0.06)', border: '1px solid var(--border-inverse)', boxShadow: 'var(--shadow-md)' }}>
            <span style={{ flexShrink: 0, width: 48, height: 48, borderRadius: 'var(--radius-md)', background: 'var(--mp-gold-gradient)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: 'var(--mp-navy)', boxShadow: 'var(--shadow-gold)' }}>
              <Ic name="calendar-days" size={24} />
            </span>
            <div style={{ textAlign: 'center' }}>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 'clamp(1.25rem, 1.02rem + 0.8vw, 1.65rem)', color: 'var(--text-on-dark)', lineHeight: 1.05, letterSpacing: '-0.01em' }}>
                Monday 13 July · <span className="gold-text">{EVENT.time}</span>
              </div>
              <div style={{ marginTop: 6, fontSize: 'var(--fs-base)', fontWeight: 700, color: 'rgba(255,255,255,0.82)' }}>
                Live online · Broadcast to your home or office
              </div>
            </div>
          </div>
        </div>
        <div className="reveal" style={{ marginTop: 34, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12 }}>
          <Button variant="gold" size="lg" onClick={scrollToRegister} iconRight={<Ic name="arrow-right" size={18} />} style={{ height: 'auto', paddingTop: 11, paddingBottom: 11 }}>
            <span style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3, lineHeight: 1.1 }}>
              <span>Register Free — Save My Place</span>
              <span style={{ fontStyle: 'italic', fontWeight: 600, fontSize: '0.72em', opacity: 0.85 }}>(It's 100% free)</span>
            </span>
          </Button>
        </div>
      </div>
    </section>
  );
}

/* ============================================================ FOOTER */
function Footer() {
  return (
    <footer style={{ background: 'var(--mp-navy-900)', padding: '48px 0', borderTop: '1px solid rgba(255,255,255,0.08)' }}>
      <div className="wrap" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 18, textAlign: 'center' }}>
        <img src="assets/ec-linear-white.svg?v=2" alt="Entrepreneurs Circle" style={{ height: 24, opacity: 0.95, filter: 'brightness(0) invert(1)' }} />
        <p style={{ margin: 0, color: 'var(--text-on-dark-muted)', fontSize: 'var(--fs-sm)', lineHeight: 1.7, maxWidth: 560 }}>
          Entrepreneurs Circle HQ, Nelson House, Central Boulevard, Blythe Valley Park, Solihull, England B90 8BG
        </p>
        <p style={{ margin: 0, color: 'var(--text-on-dark-muted)', fontSize: 'var(--fs-sm)', display: 'flex', flexWrap: 'wrap', gap: '4px 18px', justifyContent: 'center' }}>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7 }}><Ic name="mail" size={15} style={{ color: 'var(--mp-gold-light)' }} /> support@entrepreneurscircle.org</span>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7 }}><Ic name="phone" size={15} style={{ color: 'var(--mp-gold-light)' }} /> 0121 765 5551</span>
        </p>
        <p style={{ margin: '6px 0 0', color: 'rgba(255,255,255,0.4)', fontSize: 'var(--fs-xs)' }}>© 2026 Entrepreneurs Circle</p>
      </div>
    </footer>
  );
}

/* ============================================================ APP */
function App() {
  useEffect(() => {
    if (window.lucide) window.lucide.createIcons();
  });
  return (
    <React.Fragment>
      <Header />
      <main>
        <Hero />
        <SocialProof />
        <Problem />
        <Shift />
        <Benefits />
        <ProofBlock />
        <Host />
        <FAQ />
        <FinalCta />
      </main>
      <Footer />
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);