const { useState, useEffect, useRef } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "headline": "build",
  "showCountdown": true,
  "accent": "purple",
  "showSeats": true,
  "heroBg": "aurora"
}/*EDITMODE-END*/;

const ACCENTS = {
  purple: {
    hex: '#a855f7',
    soft: 'rgba(168,85,247,0.10)',
    ink: '#0a0014',
    gradient: 'linear-gradient(135deg, #7c3aed 0%, #a855f7 48%, #d946ef 100%)',
  },
  blue: {
    hex: '#3b82f6',
    soft: 'rgba(59,130,246,0.10)',
    ink: '#001029',
    gradient: 'linear-gradient(135deg, #2563eb 0%, #3b82f6 50%, #38bdf8 100%)',
  },
  green: {
    hex: '#10b981',
    soft: 'rgba(16,185,129,0.10)',
    ink: '#00271b',
    gradient: 'linear-gradient(135deg, #059669 0%, #10b981 50%, #34d399 100%)',
  },
};

// Subscribes to window.FeedEvent — returns the next upcoming webinar event (null until loaded).
function useFeedEvent() {
  const [event, setEvent] = useState(null);
  useEffect(() => {
    let cancelled = false;
    window.FeedEvent.load().then(ev => { if (!cancelled) setEvent(ev); });
    const unsub = window.FeedEvent.onChange(ev => { if (!cancelled) setEvent(ev); });
    return () => { cancelled = true; unsub && unsub(); };
  }, []);
  return event;
}

const REVIEWS = [
  { n: "Azul Wells", r: "#1 Retirement YouTube Channel in USA", d: "Feb 20, 2026", q: "I took Nathan's Accelerator program because I had tapped out organic growth. I needed to explore other avenues to grow my newsletter (partnerships, Meta ads, etc). Nathan made it easy for me to explore these avenues and actually pull the trigger and begin doing it. Thanks Nathan ... 🚀 Azul Wells" },
  { n: "Matthew Kee", r: "Founder and Manager", d: "Feb 20, 2026", q: "I truly felt cared for through this program. Nathan brings together a mosaic of amazing tactics and industry experts that helped me level up my acumen and implement. This program gave me hope again for what the potential of my newsletter could be." },
  { n: "David Samuel", r: "Founder", d: "Feb 19, 2026", q: "We wanted to scale with newsletter focused meta ads acquisition. The accelerator has launched us down the right path with loads of great templates and resources we've applied right away :)" },
  { n: "Jessica Brown", r: "Founder", d: "Feb 19, 2026", s: 4, q: "I was blocked on belief. I wasn't fully convinced my newsletter was a viable business, and that hesitation was keeping me stuck. The accelerator gave me structure, clarity, and real momentum. I saw a 71% increase in subscribers, but the bigger shift was internal. I moved from uncertainty to confidence and started treating my newsletter like the business it's meant to become." },
  { n: "Kate Wilson", r: "Newsletter Operator", d: "Feb 18, 2026", q: "It is easy enough to come up with an idea for a newsletter and hit publish, but knowing how to grow that newsletter into a business was something I didn't know how to do. I came into the program with no clue where to start first and was overwhelmed with things like paid ads and sponsorships. The Newsletter Accelerator has been crucial in showing me a clear path to growth, and fast growth at that." },
  { n: "Greg Digneo", r: "Founder", d: "Feb 18, 2026", q: "The number one thing that was blocking me was growth. Finding qualified prospects to get onto my newsletter was, and is, always the most challenging thing. Seeing how you use organic growth to grow your newsletter and Feed Media was hugely insightful." },
  { n: "Vernon T. Foster II", r: "Founder", d: "Feb 17, 2026", q: "Nathan's wisdom is unmatched. Finally got our local newsletter off the ground for our TOFU play to build premium community. You won't find anyone with the depth and passion he brings to the newsletter game period." },
  { n: "Daria Cupareanu", r: "Owner", d: "Nov 17, 2025", q: "My biggest challenge before joining was monetization. Right before the accelerator started, I turned on paid subscriptions and I'm already at around $6k ARR in about two months. It also helped me shift my mindset into treating my newsletter like a real business." },
  { n: "Michelle Salater", r: "Founder", d: "Nov 12, 2025", q: "I joined the Newsletter Accelerator because I'd hit a wall. For months, I'd been hovering around $1,000 a month in revenue, and I knew something had to change. The Accelerator gave me exactly what I needed...clarity. I learned what to track, how to track it properly, and how to actually use the numbers to make confident business decisions." },
  { n: "Polo Aguirre", r: "Founder", d: "Nov 10, 2025", q: "Before the accelerator, the #1 thing I wanted to improve was monetization. My newsletter was growing quickly with strong engagement, but I wasn't sure how to monetize it effectively. The accelerator changed that completely. It gave me the clarity, structure, and systems to run my newsletter like a real business." },
  { n: "Amara Nwaigwe", r: "Principal", d: "Nov 8, 2025", q: "I came into the accelerator with a newsletter concept but I feel like I'm leaving with a real plan for a newsletter business. The frameworks for monetization, growth, and positioning were exactly the structure I needed to stop second-guessing and start executing." },
  { n: "Neza L", r: "Technical Expert", d: "Feb 17, 2026", q: "Nathan and his guests enable me to see newsletter as business, not just a distribution source. With Nathan's insights, he helped me grow from 500 to 1300. For me it was a big growth since I was able to get project opportunities for 80k." },
];

// Ticks every second, returns the FeedEvent countdown for the given event.
function useEventCountdown(event) {
  const [, force] = useState(0);
  useEffect(() => {
    const i = setInterval(() => force(n => n + 1), 1000);
    return () => clearInterval(i);
  }, []);
  return window.FeedEvent.countdown(event);
}

function scrollToForm() {
  const el = document.querySelector('[data-register-form]');
  if (el) {
    const y = el.getBoundingClientRect().top + window.scrollY - 60;
    window.scrollTo({ top: y, behavior: 'smooth' });
    const inp = el.querySelector('input[type=email]');
    setTimeout(() => inp && inp.focus({ preventScroll: true }), 500);
  }
}

/* ------------ COUNTDOWN ------------ */
function Countdown({ accent, align = 'center', event }) {
  const c = useEventCountdown(event);
  return (
    <div className="countdown-wrap" style={{
      display: 'flex', flexDirection: 'column', alignItems: align === 'center' ? 'center' : 'flex-start', gap: 12
    }}>
      <span className="mono" style={{
        fontSize: 12, letterSpacing: '0.24em', color: '#8a8a8a', fontWeight: 600
      }}>
        REGISTRATION&nbsp;CLOSES&nbsp;IN
      </span>
      <div className="countdown-boxes" style={{ display: 'flex', gap: 8 }}>
        {[['D', c.d], ['H', c.h], ['M', c.m], ['S', c.s]].map(([l, v]) => (
          <div key={l} className="countdown-box" style={{
            display: 'inline-flex', alignItems: 'baseline', gap: 5,
            padding: '11px 16px',
            border: '1px solid #2a2a2a', borderRadius: 6, background: '#0d0d0d'
          }}>
            <span className="mono countdown-num" style={{
              fontSize: 22, fontWeight: 600, color: '#f5f5f5',
              fontVariantNumeric: 'tabular-nums', lineHeight: 1
            }}>
              {String(v).padStart(2, '0')}
            </span>
            <span className="mono" style={{
              fontSize: 11, color: accent.hex, letterSpacing: '0.14em', fontWeight: 600
            }}>{l}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ------------ MOBILE-ONLY HEADER (matches post-registration page header) ------------ */
function MobileHeader() {
  return (
    <div className="landing-mobile-header" style={{
      background: '#000',
      borderBottom: '1px solid #1a1a1a',
      position: 'relative', zIndex: 10
    }}>
      <div style={{
        maxWidth: 1380, margin: '0 auto', padding: '14px 32px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        gap: 24, flexWrap: 'wrap'
      }}>
        <span style={{
          fontFamily: "'Geist', system-ui, sans-serif",
          fontWeight: 800,
          fontSize: 20,
          color: '#f5f5f5',
          letterSpacing: '-0.035em',
          lineHeight: 1
        }}>
          The Feed Media
        </span>
      </div>
      <style>{`
        .landing-mobile-header { display: none; }
        @media (max-width: 940px) {
          .landing-mobile-header { display: block; }
        }
      `}</style>
    </div>
  );
}

/* ------------ TOP STATUS ------------ */
function TopBar({ accent, showCountdown }) {
  return (
    <div style={{
      background: '#000',
      borderBottom: '1px solid #1a1a1a',
      position: 'relative', zIndex: 10
    }}>
      <div style={{
        maxWidth: 1380, margin: '0 auto', padding: '14px 32px',
        display: 'flex', alignItems: 'center', justifyContent: 'flex-end',
        gap: 24, flexWrap: 'wrap'
      }}>
        <button
          onClick={scrollToForm}
          className="mono"
          style={{
            fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase',
            padding: '8px 14px', borderRadius: 3, background: accent.hex, color: '#fff',
            border: 'none', cursor: 'pointer', fontWeight: 700, fontFamily: "'Geist Mono', ui-monospace, monospace"
          }}
        >
          Save your free seat →
        </button>
      </div>
    </div>
  );
}

/* ------------ HERO BACKDROP ------------ */
function HeroBackdrop({ variant, accent }) {
  const hex = accent.hex;

  // shared fade mask so texture dissolves toward edges
  const fadeMask = 'radial-gradient(ellipse 90% 75% at 50% 28%, #000 35%, transparent 78%)';

  if (variant === 'grid') {
    return (
      <div style={{ position: 'absolute', inset: 0, zIndex: 0, pointerEvents: 'none' }}>
        <div style={{
          position: 'absolute', inset: 0, opacity: 0.4,
          backgroundImage: 'linear-gradient(#1a1a1a 1px, transparent 1px), linear-gradient(90deg, #1a1a1a 1px, transparent 1px)',
          backgroundSize: '64px 64px',
          maskImage: fadeMask, WebkitMaskImage: fadeMask
        }} />
        <div style={{
          position: 'absolute', top: '-10%', left: '50%', transform: 'translateX(-50%)',
          width: 900, height: 500,
          background: `radial-gradient(ellipse at center, ${hex}26 0%, transparent 70%)`,
          filter: 'blur(20px)'
        }} />
      </div>
    );
  }

  if (variant === 'rings') {
    return (
      <div style={{ position: 'absolute', inset: 0, zIndex: 0, pointerEvents: 'none', overflow: 'hidden' }}>
        <div style={{
          position: 'absolute', top: 230, left: '50%',
          transform: 'translate(-50%, -50%)',
          width: 1500, height: 1500,
          backgroundImage:
            `repeating-radial-gradient(circle at center, ${hex}1f 0px, ${hex}1f 1px, transparent 1px, transparent 110px)`,
          maskImage: 'radial-gradient(circle at center, #000 0%, transparent 62%)',
          WebkitMaskImage: 'radial-gradient(circle at center, #000 0%, transparent 62%)'
        }} />
        <div style={{
          position: 'absolute', top: '-8%', left: '50%', transform: 'translateX(-50%)',
          width: 800, height: 460,
          background: `radial-gradient(ellipse at center, ${hex}33 0%, transparent 70%)`,
          filter: 'blur(30px)'
        }} />
      </div>
    );
  }

  if (variant === 'mesh') {
    return (
      <div style={{ position: 'absolute', inset: 0, zIndex: 0, pointerEvents: 'none', overflow: 'hidden' }}>
        <div className="hero-mesh-a" style={{
          position: 'absolute', top: '-20%', left: '8%', width: 620, height: 620, borderRadius: '50%',
          background: `radial-gradient(circle, ${hex}55 0%, transparent 65%)`, filter: 'blur(80px)'
        }} />
        <div className="hero-mesh-b" style={{
          position: 'absolute', top: '-12%', right: '4%', width: 560, height: 560, borderRadius: '50%',
          background: 'radial-gradient(circle, #d946ef44 0%, transparent 65%)', filter: 'blur(90px)'
        }} />
        <div className="hero-mesh-c" style={{
          position: 'absolute', bottom: '-30%', left: '38%', width: 640, height: 640, borderRadius: '50%',
          background: `radial-gradient(circle, ${hex}3a 0%, transparent 65%)`, filter: 'blur(100px)'
        }} />
        <style>{`
          @keyframes meshFloatA { 0%,100% { transform: translate(0,0) } 50% { transform: translate(40px, 30px) } }
          @keyframes meshFloatB { 0%,100% { transform: translate(0,0) } 50% { transform: translate(-50px, 24px) } }
          @keyframes meshFloatC { 0%,100% { transform: translate(0,0) } 50% { transform: translate(20px, -36px) } }
          .hero-mesh-a { animation: meshFloatA 14s ease-in-out infinite; }
          .hero-mesh-b { animation: meshFloatB 18s ease-in-out infinite; }
          .hero-mesh-c { animation: meshFloatC 16s ease-in-out infinite; }
          @media (prefers-reduced-motion: reduce) {
            .hero-mesh-a, .hero-mesh-b, .hero-mesh-c { animation: none; }
          }
        `}</style>
      </div>
    );
  }

  // DEFAULT: 'aurora' — soft glow wash + fine dot matrix
  return (
    <div style={{ position: 'absolute', inset: 0, zIndex: 0, pointerEvents: 'none', overflow: 'hidden' }}>
      {/* dot matrix texture */}
      <div style={{
        position: 'absolute', inset: 0, opacity: 0.8,
        backgroundImage: 'radial-gradient(#2a2a2a 1.2px, transparent 1.2px)',
        backgroundSize: '26px 26px',
        maskImage: fadeMask, WebkitMaskImage: fadeMask
      }} />
      {/* primary glow, top-center */}
      <div style={{
        position: 'absolute', top: '-22%', left: '50%', transform: 'translateX(-50%)',
        width: 1200, height: 720,
        background: `radial-gradient(ellipse at center, ${hex}66 0%, ${hex}24 38%, transparent 72%)`,
        filter: 'blur(30px)'
      }} />
      {/* cool secondary glow, lower-left */}
      <div style={{
        position: 'absolute', bottom: '-26%', left: '-6%',
        width: 760, height: 580,
        background: 'radial-gradient(ellipse at center, #6d28d959 0%, transparent 70%)',
        filter: 'blur(50px)'
      }} />
      {/* warm magenta kiss, right */}
      <div style={{
        position: 'absolute', top: '4%', right: '-8%',
        width: 600, height: 520,
        background: 'radial-gradient(ellipse at center, #d946ef40 0%, transparent 70%)',
        filter: 'blur(60px)'
      }} />
    </div>
  );
}

/* ------------ HERO ------------ */
function Hero({ tweaks, accent, event, onSubmitEmail }) {
  const headlines = {
    build: <>Build a <span style={{
      background: accent.gradient || accent.hex,
      WebkitBackgroundClip: 'text', backgroundClip: 'text',
      WebkitTextFillColor: 'transparent', color: 'transparent'
    }}>$10K/month newsletter</span> in 90 days.</>,
    free: <>The free live workshop the biggest <span style={{ color: accent.hex }}>operators secretly attend.</span></>,
    revenue: <>Stop chasing subscribers.<br />Start <span style={{ color: accent.hex }}>stacking revenue.</span></>,
  };

  return (
    <section className="hero-screen" style={{
      position: 'relative',
      background: '#0a0a0a',
      overflow: 'hidden'
    }}>
      <HeroBackdrop variant={tweaks.heroBg} accent={accent} />
      <div style={{
        position: 'absolute', top: 0, left: 0, right: 0,
        height: 1, background: `linear-gradient(90deg, transparent 10%, ${accent.hex} 50%, transparent 90%)`,
        opacity: 0.5, zIndex: 1
      }} />

      <div className="hero-inner">
        <div className="hero-split">
          {/* hero-left wraps everything from eyebrow → countdown; on mobile it fills the viewport so speaker card falls below the fold */}
          {/* LEFT — pitch + Nathan credibility */}
          <div className="hero-left">
            <div className="hero-eyebrow-wrap" style={{ marginBottom: 26 }}>
              <span style={{
                display: 'inline-flex', alignItems: 'center', gap: 9,
                padding: '7px 14px', borderRadius: 999,
                border: `1px solid ${accent.hex}`,
                backgroundColor: accent.hex
              }}>
                <span style={{
                  width: 8, height: 8, borderRadius: '50%',
                  background: '#ff3b30', boxShadow: '0 0 8px rgba(255,59,48,0.9)',
                  animation: 'rcpulse 1.4s ease-in-out infinite'
                }} />
                <span className="mono" style={{
                  fontSize: 12, letterSpacing: '0.2em', textTransform: 'uppercase',
                  color: '#fff', fontWeight: 700
                }}>
                  {window.FeedEvent.fmt.monthFull(event)} {window.FeedEvent.fmt.dayNumberWithSuffix(event)}, {window.FeedEvent.fmt.year(event)} · Free Virtual Event
                </span>
              </span>
            </div>

            <h1 className="hero-headline">
              {headlines[tweaks.headline] || headlines.build}
            </h1>

            <p className="hero-lede" style={{ color: '#ffffff' }}>
              Learn the exact system that turned <strong style={{ color: '#ffffff', fontWeight: 800 }}>920 subscribers into $1,000,000+ ARR</strong>, taught live in 75 minutes.
            </p>

            {/* OPT-IN under the subheadline */}
            <div className="hero-opt-wrap" style={{ marginTop: 36 }}>
              <OptInForm tweaks={tweaks} accent={accent} event={event} onSubmitEmail={onSubmitEmail} />
            </div>
          </div>

          {/* RIGHT — speaker card */}
          <div className="hero-right">
            <SpeakerCard accent={accent} />
          </div>
        </div>
      </div>

      <style>{`
        @keyframes liveTabBlink {
          0%, 100% { background-color: ${accent.hex}; }
          50% { background-color: ${accent.hex}66; }
        }
        .live-tab {
          background-color: ${accent.hex};
          animation: liveTabBlink 1.4s ease-in-out infinite;
        }
        .hero-screen {
          flex: 1;
          min-height: 0;
          display: flex;
          align-items: center;
        }
        .hero-inner {
          position: relative; z-index: 2;
          width: 100%;
          max-width: 1360px;
          margin: 0 auto;
          padding: 48px 40px;
        }
        .hero-split {
          display: grid;
          grid-template-columns: minmax(0, 1.32fr) minmax(0, 0.78fr);
          gap: 64px;
          align-items: center;
        }

        .hero-eyebrow {
          display: flex; align-items: center; gap: 14px;
          font-family: 'Geist Mono', ui-monospace, monospace;
          font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
          font-weight: 600; margin-bottom: 26px;
        }        .hero-headline {
          font-family: 'Archivo', 'Geist', system-ui, sans-serif;
          font-size: clamp(46px, 5.6vw, 92px);
          line-height: 0.94;
          letter-spacing: -0.035em;
          margin: 0;
          font-weight: 800;
          text-wrap: balance;
          color: #ffffff;
        }
        .hero-lede {
          margin: 30px 0 0;
          font-size: 21px;
          line-height: 1.5;
          color: #a8a8a8;
          max-width: 620px;
          text-wrap: pretty;
        }
        .hero-lede strong { color: #f5f5f5; font-weight: 600; }

        .hero-bullets {
          margin: 26px 0 0;
          padding: 0;
          list-style: none;
          display: flex;
          flex-direction: column;
          gap: 13px;
        }
        .hero-bullets li {
          display: flex; align-items: flex-start; gap: 13px;
          font-size: 15px; line-height: 1.4; color: #e5e5e5;
        }
        .hero-bullets strong { color: #ffffff; font-weight: 600; letter-spacing: -0.005em; }
        .hero-bullet-mark {
          flex-shrink: 0;
          width: 24px; height: 24px;
          border: 1px solid; border-radius: 50%;
          display: inline-flex; align-items: center; justify-content: center;
          font-size: 12px; font-weight: 700;
          font-family: 'Geist Mono', ui-monospace, monospace;
          margin-top: 1px;
        }

        .hero-host {
          display: flex; align-items: center; gap: 16px;
          margin-top: 34px;
          padding: 16px 0;
          border-top: 1px solid #1a1a1a;
          border-bottom: 1px solid #1a1a1a;
        }
        .hero-host-avatar {
          position: relative;
          width: 52px; height: 52px;
          border-radius: 50%;
          overflow: hidden;
          border: 1px solid;
          flex-shrink: 0;
        }
        .hero-host-name {
          font-size: 17px; color: #d4d4d4; line-height: 1.2;
        }
        .hero-host-name strong { color: #ffffff; font-weight: 600; }
        .hero-host-cred {
          font-size: 10.5px; color: #8a8a8a; letter-spacing: 0.1em;
          text-transform: uppercase; margin-top: 5px; line-height: 1.4;
        }

        .hero-trust {
          display: flex;
          gap: 36px;
          flex-wrap: wrap;
          margin-top: 30px;
        }
        .hero-trust-item { display: flex; flex-direction: column; gap: 4px; }
        .hero-trust-num {
          font-size: 28px; font-weight: 700; color: #f5f5f5;
          letter-spacing: -0.025em; font-variant-numeric: tabular-nums; line-height: 1;
        }
        .hero-trust-label {
          font-size: 10px; color: #8a8a8a; letter-spacing: 0.16em; text-transform: uppercase;
        }

        .hero-finecard {
          text-align: center; margin-top: 18px;
          font-size: 10px; color: #525252; letter-spacing: 0.16em; text-transform: uppercase;
        }

        @media (max-width: 940px) {
          .hero-screen { min-height: 0; }
          .hero-split { grid-template-columns: 1fr; gap: 20px; }
          .hero-inner { padding: 16px 18px 16px; }
          .hero-lede { max-width: none; }
          /* Top-aligned, fit-to-content on mobile — no forced viewport-fill.
             Eliminates dead space below the countdown and tightens the gap
             before the speaker card. */
          .hero-left {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            padding-top: 12px;
          }
          .hero-eyebrow-wrap { margin-bottom: 22px !important; }
          .hero-headline { font-size: 46px !important; line-height: 0.98 !important; letter-spacing: -0.03em !important; }
          .hero-lede { font-size: 18px !important; margin-top: 16px !important; line-height: 1.4 !important; }
          .hero-opt-wrap { margin-top: 20px !important; }
          .hero-countdown-wrap { margin-top: 10px !important; padding: 0 4px; }
          /* Left-justify "Registration Closes In" + full-width countdown boxes on mobile */
          .countdown-wrap { align-items: flex-start !important; width: 100%; }
          .countdown-boxes { width: 100%; justify-content: space-between; }
          .countdown-box { flex: 1; justify-content: center; }
        }
        @media (max-width: 480px) {
          .countdown-boxes { gap: 6px; }
          .countdown-box { padding: 9px 11px !important; }
          .countdown-num { font-size: 18px !important; }
          .speaker-card { box-shadow: 0 30px 70px -30px rgba(0,0,0,0.6) !important; }
          .speaker-body { padding: 20px 20px 24px !important; }
        }
        @media (max-width: 360px) {
          .hero-headline { font-size: 40px !important; }
          .countdown-box { padding: 8px 8px !important; }
          .countdown-num { font-size: 16px !important; }
        }
      `}</style>
    </section>
  );
}

/* ------------ OPT-IN FORM (dark, compact) ------------ */
function OptInForm({ tweaks, accent, event, onSubmitEmail }) {
  const [email, setEmail] = useState('');
  const [name, setName] = useState('');
  const c = useEventCountdown(event);

  function handleSubmit(e) {
    e.preventDefault();
    if (!email) return;
    if (onSubmitEmail) onSubmitEmail(email.trim());
  }

  return (
    <div
      data-register-form
      style={{ position: 'relative' }}>
      <div style={{ position: 'relative', zIndex: 1 }}>

        <form onSubmit={handleSubmit} style={{ display: 'grid', gap: 12 }}>
            <div className="rc-row" style={{ maxWidth: 700 }}>
              <input
                type="email"
                required
                placeholder="Your Email Address"
                value={email}
                onChange={e => setEmail(e.target.value)}
                style={{ ...inputStyle(accent), flex: 1, minWidth: 0 }}
                onFocus={e => { e.currentTarget.style.borderColor = accent.hex; e.currentTarget.style.boxShadow = `0 0 0 3px ${accent.hex}1f`; }}
                onBlur={e => {
                  e.currentTarget.style.borderColor = '#3a3a42';
                  e.currentTarget.style.boxShadow = 'none';
                  // Partial capture: user typed an email and moved focus away.
                  // Deduped per (email, step) inside FeedPartial — safe to call repeatedly.
                  window.FeedPartial && window.FeedPartial.fire({
                    email: e.currentTarget.value,
                    dropoffStep: 'email_entered',
                    eventId: event ? event.id : null
                  });
                }}
              />

              <button
                type="submit"
                style={{
                  padding: '18px 30px',
                  background: accent.gradient || accent.hex,
                  color: '#fff',
                  border: 'none',
                  borderRadius: 14,
                  fontSize: 15,
                  fontWeight: 700,
                  letterSpacing: '0.14em',
                  textTransform: 'uppercase',
                  cursor: 'pointer',
                  fontFamily: 'inherit',
                  display: 'inline-flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  gap: 12,
                  whiteSpace: 'nowrap',
                  flexShrink: 0,
                  boxShadow: `0 14px 36px -10px ${accent.hex}88, 0 0 0 1px ${accent.hex}55, inset 0 1px 0 rgba(255,255,255,0.2)`,
                  transition: 'transform 200ms, box-shadow 200ms'
                }}
                onMouseEnter={e => {
                  e.currentTarget.style.transform = 'translateY(-2px)';
                  e.currentTarget.style.boxShadow = `0 22px 48px -8px ${accent.hex}aa, 0 0 0 1px ${accent.hex}88, inset 0 1px 0 rgba(255,255,255,0.25)`;
                }}
                onMouseLeave={e => {
                  e.currentTarget.style.transform = 'translateY(0)';
                  e.currentTarget.style.boxShadow = `0 14px 36px -10px ${accent.hex}88, 0 0 0 1px ${accent.hex}55, inset 0 1px 0 rgba(255,255,255,0.2)`;
                }}
              >
                Save your free seat →
              </button>
            </div>

            <div style={{
              display: 'flex', alignItems: 'center', gap: 8, marginTop: 4
            }}>
              <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke={accent.hex} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0 }}>
                <rect x="2" y="5" width="14" height="14" rx="2.5" />
                <path d="M16 9.5l6-3.5v12l-6-3.5" />
              </svg>
              <span className="mono" style={{
                fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase',
                color: '#b5b5b5', fontWeight: 600
              }}>
                Event recordings included
              </span>
            </div>

            {tweaks.showCountdown && (
              <div className="hero-countdown-wrap" style={{ marginTop: 16 }}>
                <Countdown accent={accent} align="center" event={event} />
              </div>
            )}

            <div className="mono hero-form-meta" style={{
              fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase',
              color: '#9ca3af', textAlign: 'center', marginTop: 14
            }}>
              {window.FeedEvent.fmt.shortHeader(event)} · 75 min · Live with Q&amp;A
            </div>
            <style>{`
              @media (max-width: 940px) {
                .hero-form-meta { display: none !important; }
              }
            `}</style>
          </form>
      </div>

      <style>{`
        @keyframes rcpulse { 0%,100% { opacity: 1 } 50% { opacity: 0.3 } }
        .rc-fields {
          display: grid;
          grid-template-columns: 1fr;
          gap: 10px;
        }
        .rc-row {
          display: flex;
          align-items: stretch;
          gap: 10px;
        }
        @media (max-width: 600px) {
          .rc-fields { grid-template-columns: 1fr; }
          .rc-row { flex-direction: column; }
        }
      `}</style>
    </div>
  );
}

function inputStyle(accent) {
  return {
    padding: '18px 20px',
    background: '#26262b',
    border: '1px solid #3a3a42',
    borderRadius: 14,
    color: '#f5f5f5',
    fontSize: 16.5,
    fontFamily: 'inherit',
    outline: 'none',
    transition: 'border-color 160ms, box-shadow 160ms, background 160ms'
  };
}

/* ------------ SPEAKER CARD (white, all about Nathan) ------------ */
function SpeakerCard({ accent }) {
  const creds = [
    'How a newsletter with fewer than 1,000 subscribers hit $1M ARR, and what that means for yours',
    'The monetization math behind turning a small list into $10K/month',
    "How to land your first sponsor deal, even if you've never pitched a brand before",
    'The lead magnet strategy that added 600 subscribers from a single LinkedIn post',
    'How to train Claude to write like you in under 90 minutes',
  ];

  return (
    <div className="speaker-card" style={{
      position: 'relative',
      borderRadius: 17,
      padding: 2,
      background: accent.gradient || accent.hex,
      boxShadow: `0 60px 140px -40px rgba(0,0,0,0.6), 0 0 90px -10px ${accent.hex}44`
    }}>
    <div style={{
      position: 'relative',
      borderRadius: 15,
      background: '#ffffff',
      border: 'none',
      overflow: 'hidden'
    }}>
      {/* PHOTO */}
      <div style={{
        position: 'relative', aspectRatio: '16 / 10', background: '#0d0d0d', overflow: 'hidden',
        width: '100%'
      }}>
        <img
          src="uploads/Picture of Nathan.webp"
          alt="Nathan May"
          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 22%' }}
        />
        {/* gradient floor for legibility of overlaid name */}
        <div style={{
          position: 'absolute', left: 0, right: 0, bottom: 0, height: '55%',
          background: 'linear-gradient(180deg, transparent, rgba(0,0,0,0.78))'
        }} />
        <div style={{ position: 'absolute', left: 24, bottom: 18, right: 24 }}>
          <div className="mono" style={{
            fontSize: 10, letterSpacing: '0.24em', textTransform: 'uppercase',
            color: '#fff', opacity: 0.7, marginBottom: 8, fontWeight: 600
          }}>Your host</div>
          <div style={{ fontSize: 38, fontWeight: 700, color: '#fff', letterSpacing: '-0.03em', lineHeight: 1 }}>
            Nathan May
          </div>
        </div>
      </div>

      <div className="speaker-body" style={{ padding: '24px 30px 28px' }}>
        <div className="mono" style={{
          fontSize: 13, letterSpacing: '0.1em', textTransform: 'uppercase',
          color: accent.hex, fontWeight: 800, marginBottom: 14
        }}>
          Founder, The Feed Media
        </div>

        <p style={{ margin: '0 0 20px', fontSize: 15, color: '#4b5563', lineHeight: 1.6 }}>
          Nathan has built the growth engines, ad programs, and offers behind some of the most profitable
          newsletters in the world, including The Rundown, The Neuron, beehiiv, Arnold's Pump Club, and hundreds more.
          Now he's taking everything he built and teaching it to you live.
        </p>

        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)',
          border: '1px solid #eceef1', borderRadius: 10, overflow: 'hidden',
          marginBottom: 22, background: '#fafafa'
        }}>
          {[
            { n: '2,300+', l: 'operators trained' },
            { n: '$80M+', l: 'subscriber revenue' },
          ].map((s, i) => (
            <div key={i} style={{
              padding: '14px 12px', textAlign: 'center',
              borderRight: i < 1 ? '1px solid #eceef1' : 'none'
            }}>
              <div style={{
                fontSize: 22, fontWeight: 700, color: '#0f172a',
                letterSpacing: '-0.025em', fontVariantNumeric: 'tabular-nums', lineHeight: 1
              }}>{s.n}</div>
              <div className="mono" style={{
                fontSize: 9, color: '#6b7280', letterSpacing: '0.1em',
                textTransform: 'uppercase', marginTop: 7, lineHeight: 1.3
              }}>{s.l}</div>
            </div>
          ))}
        </div>

        <div style={{
          fontSize: 17, fontWeight: 700, color: '#0f172a',
          letterSpacing: '-0.015em', marginBottom: 14
        }}>
          Here's what you'll learn during the live training
        </div>

        <ul style={{ margin: '0', padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 11 }}>
          {creds.map((c, i) => (
            <li key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 11, fontSize: 14, color: '#374151', lineHeight: 1.4 }}>
              <svg width="17" height="17" viewBox="0 0 20 20" fill="none" style={{ flexShrink: 0, marginTop: 1 }}>
                <circle cx="10" cy="10" r="9" fill={`${accent.hex}1a`} />
                <path d="M6 10.2l2.6 2.6L14 7.4" stroke={accent.hex} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
              {c}
            </li>
          ))}
        </ul>
      </div>
    </div>
    </div>
  );
}

/* ------------ TICKER ------------ */
function StatTicker({ accent }) {
  const items = [
    "$6M+ AD SPEND MANAGED",
    "4M+ SUBSCRIBERS ACQUIRED",
    "$1M ARR / 920 SUBS / 10.5 MONTHS",
    "$270K LAUNCH ON A 15K LIST",
    "SOLD TO MILK ROAD",
    "GREW THE NEURON TO 500K+",
    "FEATURED ON MY FIRST MILLION",
    "WORKED WITH THE RUNDOWN ($10M/YR)",
    "50+ NEWSLETTERS / $1M–$50M/YR",
  ];
  return (
    <div style={{
      background: '#000', borderBottom: '1px solid #1a1a1a',
      padding: '20px 0', overflow: 'hidden', position: 'relative'
    }}>
      <div style={{
        display: 'flex', gap: 56, whiteSpace: 'nowrap',
        animation: 'tickerSlide 60s linear infinite'
      }}>
        {[...items, ...items, ...items].map((it, i) => (
          <span key={i} className="mono" style={{
            fontSize: 12, letterSpacing: '0.14em', color: '#f5f5f5', fontWeight: 500,
            display: 'inline-flex', alignItems: 'center', gap: 56
          }}>
            <span style={{ color: accent.hex }}>▲</span>
            {it}
          </span>
        ))}
      </div>
      <style>{`@keyframes tickerSlide { 0% { transform: translateX(0) } 100% { transform: translateX(-33.333%) } }`}</style>
    </div>
  );
}

function Eyebrow({ idx, label, accent }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 24 }}>
      <span className="mono" style={{
        fontSize: 11, letterSpacing: '0.22em', color: accent.hex, textTransform: 'uppercase', fontWeight: 600
      }}>
        {idx} / {label}
      </span>
      <span style={{ flex: 1, height: 1, background: '#1a1a1a' }} />
    </div>
  );
}

/* ------------ ROOM / LOGOS ------------ */
function ProofRoom({ accent }) {
  const brands = [
    { name: 'The Rundown', sub: '1.4M readers · $10M/yr' },
    { name: 'The Neuron', sub: '500K+ readers · acquired' },
    { name: 'beehiiv', sub: 'Tyler Denk, founder' },
    { name: 'TLDR', sub: '5M readers' },
    { name: 'Industry Dive', sub: '3.3M · $525M sale' },
    { name: 'Superhuman', sub: '1M+ readers' },
    { name: 'Ben\'s Bites', sub: '120K readers' },
    { name: 'Flyover', sub: '$400K/mo' },
    { name: 'Alts', sub: '180K readers' },
  ];
  return (
    <section style={{ background: '#0a0a0a', padding: '120px 32px 90px', position: 'relative' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <Eyebrow idx="01" label="Why this workshop is different" accent={accent} />
        <div style={{
          display: 'grid', gridTemplateColumns: 'minmax(0, 2.1fr) minmax(0, 1fr)',
          gap: 80, alignItems: 'end', marginBottom: 60
        }} className="pr-headgrid">
          <h2 style={{
            fontSize: 'clamp(40px, 5.6vw, 88px)', lineHeight: 0.98, margin: 0,
            letterSpacing: '-0.035em', textWrap: 'balance', fontWeight: 600, color: '#ffffff'
          }}>
            This isn't another guru webinar.<br />
            <span style={{ color: '#525252' }}>It's the playbook running inside the rooms where</span><br />
            <span style={{ fontWeight: 600, color: accent.hex }}>the biggest newsletters get built.</span>
          </h2>
          <p style={{ fontSize: 16, color: '#a0a0a0', lineHeight: 1.6, maxWidth: 360, margin: 0 }}>
            Nathan's run growth, ads, or product for most of the newsletters you've heard of. The frameworks
            you'll see Wednesday are the ones being used inside these companies <em style={{ color: '#f5f5f5' }}>right now.</em>
          </p>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
          border: '1px solid #1a1a1a', background: '#0d0d0d', borderRadius: 6
        }}>
          {brands.map((b, i) => (
            <div key={b.name} style={{
              padding: '28px 24px',
              borderRight: (i + 1) % 4 === 0 ? 'none' : '1px solid #1a1a1a',
              borderBottom: i < 8 ? '1px solid #1a1a1a' : 'none',
              minHeight: 130, display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
              transition: 'background 200ms'
            }}
            onMouseEnter={e => e.currentTarget.style.background = '#111'}
            onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
            >
              <div style={{ fontSize: 26, lineHeight: 1.05, letterSpacing: '-0.02em', fontWeight: 600, color: '#f5f5f5' }}>{b.name}</div>
              <div className="mono" style={{ fontSize: 11, color: '#525252', letterSpacing: '0.04em', marginTop: 14 }}>
                {b.sub}
              </div>
            </div>
          ))}
        </div>

        <p className="mono" style={{
          marginTop: 18, fontSize: 11, color: '#525252', letterSpacing: '0.14em', textTransform: 'uppercase'
        }}>
          + Arnold Schwarzenegger · Jay Shetty · Sean Curry · Sam Parr · Justin Welsh · Matt Paulson — and 50+ more
        </p>
      </div>
      <style>{`
        @media (max-width: 820px) {
          .pr-headgrid { grid-template-columns: 1fr !important; gap: 32px !important; }
        }
      `}</style>
    </section>
  );
}

/* ------------ WHO IT'S FOR / NOT FOR ------------ */
function WhoFor({ accent }) {
  const yes = [
    "You run (or are starting) a newsletter with serious revenue potential",
    "You're past 'hit publish' and need a real business behind it",
    "You'd rather earn $10K/mo from 2,500 readers than $1K/mo from 25,000",
    "You're allergic to fluff and ready to take notes",
  ];
  const no = [
    "You want a 'side hustle' that pays in coffee money",
    "You're hunting for a free e-book and won't show up live",
    "You believe followers > email",
    "You're not willing to write or hire someone who will",
  ];
  return (
    <section style={{ background: '#0a0a0a', padding: '110px 32px', borderTop: '1px solid #1a1a1a' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <Eyebrow idx="02" label="Is this for you?" accent={accent} />
        <h2 style={{
          fontSize: 'clamp(36px, 5vw, 76px)', lineHeight: 1.0, margin: '0 0 64px',
          fontWeight: 600, maxWidth: 1100, letterSpacing: '-0.035em', color: '#ffffff', textWrap: 'balance'
        }}>
          Built for serious operators.<br />
          <span style={{ color: accent.hex, fontWeight: 400 }}>Not for everybody.</span>
        </h2>

        <div className="wf-grid">
          <div className="wf-col wf-yes">
            <div className="wf-label" style={{ color: accent.hex }}>You should be here if —</div>
            <ul className="wf-list">
              {yes.map((y, i) => (
                <li key={i}>
                  <span className="wf-mark wf-mark-yes" style={{ color: accent.hex, borderColor: accent.hex }}>+</span>
                  <span>{y}</span>
                </li>
              ))}
            </ul>
          </div>
          <div className="wf-col wf-no">
            <div className="wf-label" style={{ color: '#8a8a8a' }}>Skip this one if —</div>
            <ul className="wf-list">
              {no.map((y, i) => (
                <li key={i}>
                  <span className="wf-mark wf-mark-no">−</span>
                  <span style={{ color: '#8a8a8a' }}>{y}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
      <style>{`
        .wf-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 0;
          border: 1px solid #1a1a1a;
          background: #0d0d0d;
          border-radius: 6px;
          overflow: hidden;
        }
        .wf-col {
          padding: 48px 44px;
        }
        .wf-yes { border-right: 1px solid #1a1a1a; }
        .wf-label {
          font-family: 'Geist Mono', ui-monospace, monospace;
          font-size: 11px;
          letter-spacing: 0.22em;
          text-transform: uppercase;
          font-weight: 700;
          margin-bottom: 28px;
        }
        .wf-list {
          margin: 0; padding: 0; list-style: none;
          display: flex; flex-direction: column; gap: 18px;
        }
        .wf-list li {
          display: flex; align-items: flex-start; gap: 16px;
          font-size: 20px; line-height: 1.4; color: #f5f5f5;
          letter-spacing: -0.012em;
          text-wrap: pretty;
        }
        .wf-mark {
          width: 24px; height: 24px; border-radius: 50%;
          display: inline-flex; align-items: center; justify-content: center;
          font-size: 16px; font-weight: 700;
          border: 1px solid; flex-shrink: 0; margin-top: 2px;
          font-family: 'Geist Mono', ui-monospace, monospace;
        }
        .wf-mark-no { color: #525252; border-color: #2a2a2a; }
        @media (max-width: 820px) {
          .wf-grid { grid-template-columns: 1fr; }
          .wf-yes { border-right: none; border-bottom: 1px solid #1a1a1a; }
          .wf-col { padding: 36px 28px; }
          .wf-list li { font-size: 17px; }
        }
      `}</style>
    </section>
  );
}

/* ------------ STATS ------------ */
function ResultsStrip({ accent }) {
  const stats = [
    { num: "$1M", unit: 'ARR', sub: 'Built in 10.5 months on 920 subscribers' },
    { num: "$270K", unit: 'launch', sub: '90 days · 15,000-person newsletter' },
    { num: "$6M+", unit: 'ad spend', sub: 'Across 4M+ subs acquired' },
    { num: "$50M+", unit: 'sponsor sales', sub: 'Driven by media kits Nathan studied' },
    { num: "920", unit: 'subscribers', sub: 'When the agency hit $1M ARR' },
    { num: "50+", unit: 'newsletters', sub: '$1M–$50M/yr in the network' },
  ];
  return (
    <section style={{ background: '#0d0d0d', padding: '100px 32px', borderTop: '1px solid #1a1a1a', borderBottom: '1px solid #1a1a1a' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <Eyebrow idx="03" label="Receipts, not theory" accent={accent} />
        <h2 style={{
          fontSize: 'clamp(36px, 5vw, 76px)', lineHeight: 1.0, margin: '0 0 64px',
          fontWeight: 600, maxWidth: 1100, letterSpacing: '-0.035em', color: '#ffffff'
        }}>
          Most newsletter coaches are still trying to hit their first $10K month.<br />
          <span style={{ color: accent.hex, fontWeight: 400 }}>Nathan helped invent that month for the people you're learning from.</span>
        </h2>

        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
          gap: 0, border: '1px solid #1a1a1a'
        }}>
          {stats.map((s, i) => (
            <div key={i} style={{
              padding: '40px 32px',
              borderRight: (i + 1) % 3 === 0 ? 'none' : '1px solid #1a1a1a',
              borderBottom: i < 3 ? '1px solid #1a1a1a' : 'none',
              background: '#0a0a0a'
            }}>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginBottom: 12 }}>
                <span style={{
                  fontSize: 88, lineHeight: 0.85, letterSpacing: '-0.045em',
                  fontWeight: 600, color: '#ffffff', fontVariantNumeric: 'tabular-nums'
                }}>
                  {s.num}
                </span>
                <span className="mono" style={{ fontSize: 11, color: accent.hex, letterSpacing: '0.16em', textTransform: 'uppercase', fontWeight: 600 }}>
                  {s.unit}
                </span>
              </div>
              <div style={{ fontSize: 14, color: '#8a8a8a', lineHeight: 1.5 }}>{s.sub}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ------------ PILLARS ------------ */
function WhatYoullLearn({ accent }) {
  const pillars = [
    {
      tag: "Pillar I",
      title: "Why newsletters in 2026 are the most undervalued business on the internet.",
      body: "Google's AI Overviews crushed SEO. Followers became worthless after platforms went feed-based. HubSpot paid $27M for The Hustle and Robinhood bought Chartr — both for the audience, not the content.",
    },
    {
      tag: "Pillar II",
      title: "AI-assisted writing that doesn't sound like AI.",
      body: "Claude interviews you with 25–100 questions about your voice, opinions, and writing style. Then it drafts in your voice — not AI slop.",
    },
    {
      tag: "Pillar III",
      title: "The exact niches, formats, and offers that hit $10K/mo in under 90 days.",
      body: "The fastest-growing newsletters serve high-income readers around their jobs, hobbies, investments, or transformations. Each maps to a different monetization path — sponsors, services, products, or subscriptions.",
    },
  ];
  return (
    <section style={{ background: '#0a0a0a', padding: '120px 32px' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <Eyebrow idx="04" label="What you'll walk away with" accent={accent} />
        <h2 style={{
          fontSize: 'clamp(40px, 5.6vw, 88px)', lineHeight: 0.98, margin: '0 0 60px',
          letterSpacing: '-0.035em', fontWeight: 600, textWrap: 'balance', color: '#ffffff',
          maxWidth: 1180
        }}>
          <span style={{ fontWeight: 600, color: accent.hex }}>Three things</span> over 75 minutes that will permanently
          change how you think about email.
        </h2>

        <div className="pillars-stack">
          {pillars.map((p, i) => (
            <div key={i} className="pillar-card">
              <div className="pillar-glow" style={{ background: accent.hex }} />
              <div className="pillar-topline" style={{
                background: `linear-gradient(90deg, ${accent.hex} 0%, ${accent.hex}44 35%, transparent 80%)`
              }} />

              <div className="pillar-grid">
                <div className="pillar-marker">
                  <div className="pillar-tag mono" style={{ color: accent.hex }}>{p.tag}</div>
                </div>

                <div className="pillar-body">
                  <h3 className="pillar-title">{p.title}</h3>
                  <p className="pillar-text">{p.body}</p>
                </div>
              </div>
            </div>
          ))}
        </div>

        <style>{`
          .pillars-stack { display: flex; flex-direction: column; gap: 24px; }
          .pillar-card {
            position: relative;
            background:
              radial-gradient(ellipse at 100% 0%, ${accent.hex}22 0%, transparent 55%),
              linear-gradient(180deg, #15101c 0%, #0d0d0d 100%);
            border: 1px solid #2a1f3a;
            border-radius: 14px;
            padding: 52px 56px;
            overflow: hidden;
            transition: border-color 240ms, transform 240ms;
          }
          .pillar-card:hover { border-color: ${accent.hex}66; transform: translateY(-2px); }
          .pillar-glow {
            position: absolute; top: -40%; right: -10%;
            width: 50%; aspect-ratio: 1; border-radius: 50%;
            filter: blur(100px); opacity: 0.22; pointer-events: none; z-index: 0;
          }
          .pillar-topline {
            position: absolute; top: 0; left: 0; right: 0; height: 1px; pointer-events: none;
          }
          .pillar-grid {
            position: relative; z-index: 1;
            display: grid; grid-template-columns: 140px minmax(0, 1fr);
            gap: 48px; align-items: start;
          }
          .pillar-marker { padding-top: 24px; }
          .pillar-tag {
            font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700;
          }
          .pillar-body { padding-top: 18px; }
          .pillar-title {
            font-size: clamp(26px, 2.6vw, 40px);
            line-height: 1.14; letter-spacing: -0.025em; font-weight: 600;
            color: #ffffff; margin: 0 0 18px; text-wrap: balance;
          }
          .pillar-text { font-size: 17px; line-height: 1.6; color: #b5b5b5; margin: 0; max-width: 720px; }
          @media (max-width: 820px) {
            .pillar-card { padding: 36px 32px; }
            .pillar-grid { grid-template-columns: 1fr; gap: 16px; }
            .pillar-marker { padding-top: 0; }
            .pillar-body { padding-top: 0; }
            .pillar-title { font-size: 24px; }
            .pillar-text { font-size: 16px; }
          }
        `}</style>
      </div>
    </section>
  );
}

/* ------------ BONUSES ------------ */
function BonusVault({ accent }) {
  const bonuses = [
    { tag: 'BONUS 01', title: 'The Black Book of Million-Dollar Products', sub: 'Service, software, digital, and ad offers from the best newsletters on the internet — broken down by reader and price.', tier: 'Stay til min 70' },
    { tag: 'BONUS 02', title: "Sam Parr's first $500K of Hustle ad emails", sub: 'The actual cold outbound that closed The Hustle\'s first half-million in sponsorship revenue. Steal verbatim.', tier: 'Stay til min 70' },
    { tag: 'BONUS 03', title: 'The $500K/mo funnel breakdown', sub: 'Every page, email, ad, and trigger powering a high-eight-figure newsletter funnel. Annotated.', tier: 'Stay til min 75' },
    { tag: 'BONUS 04', title: '173 active sponsor database', sub: 'Companies that paid newsletters in the last 30 days. Names, products, contact patterns. Send 5, close 1.', tier: 'Stay til min 75' },
    { tag: 'BONUS 05', title: '20 media kits that sold $50M+ in ads', sub: 'Industry Dive, The Neuron, TLDR and 17 more. Swipe the structure.', tier: 'Stay til min 75' },
    { tag: 'BONUS 06', title: 'The Claude voice training prompt', sub: 'The 25–100 question voice interview that turns Claude into a writer that sounds exactly like you.', tier: 'Stay til min 75' },
  ];
  return (
    <section style={{
      background: '#0d0d0d', padding: '120px 32px',
      borderTop: '1px solid #1a1a1a', borderBottom: '1px solid #1a1a1a',
      position: 'relative', overflow: 'hidden'
    }}>
      <div style={{
        position: 'absolute', top: '-200px', right: '-200px', width: 700, height: 700,
        background: `radial-gradient(circle, ${accent.hex}11 0%, transparent 60%)`, pointerEvents: 'none'
      }} />
      <div style={{ maxWidth: 1280, margin: '0 auto', position: 'relative' }}>
        <Eyebrow idx="05" label="Stay until the end. We don't bluff." accent={accent} />
        <div style={{
          display: 'grid', gridTemplateColumns: 'minmax(0, 1.6fr) minmax(0, 1fr)',
          gap: 60, alignItems: 'end', marginBottom: 50
        }} className="bv-headgrid">
          <h2 style={{
            fontSize: 'clamp(40px, 5.6vw, 88px)', lineHeight: 0.98, margin: 0,
            letterSpacing: '-0.035em', fontWeight: 600, textWrap: 'balance', color: '#ffffff'
          }}>
            Six bonuses worth more than most paid courses,<br />
            <span style={{ color: accent.hex, fontWeight: 400 }}>released live in the last 5 minutes.</span>
          </h2>
          <p style={{ fontSize: 15, color: '#8a8a8a', maxWidth: 380, margin: 0, lineHeight: 1.6 }}>
            We could put them on a sales page. We don't. The people who get them are the people in the room
            at minute 75. Block your calendar.
          </p>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(360px, 1fr))', gap: 1,
          background: '#1a1a1a', border: '1px solid #1a1a1a'
        }}>
          {bonuses.map((b, i) => (
            <div key={i} style={{
              background: '#0a0a0a', padding: '32px 28px', minHeight: 220,
              display: 'flex', flexDirection: 'column', justifyContent: 'space-between'
            }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 18 }}>
                <span className="mono" style={{
                  fontSize: 11, letterSpacing: '0.2em', color: accent.hex, fontWeight: 600
                }}>{b.tag}</span>
                <span className="mono" style={{
                  fontSize: 10, letterSpacing: '0.14em', color: '#8a8a8a',
                  border: '1px solid #2a2a2a', padding: '3px 8px', borderRadius: 3
                }}>{b.tier}</span>
              </div>
              <h3 style={{
                fontSize: 26, lineHeight: 1.15, margin: '0 0 12px',
                letterSpacing: '-0.025em', fontWeight: 600, color: '#f5f5f5'
              }}>{b.title}</h3>
              <p style={{ fontSize: 14, color: '#8a8a8a', margin: 0, lineHeight: 1.55 }}>{b.sub}</p>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 820px) {
          .bv-headgrid { grid-template-columns: 1fr !important; gap: 24px !important; }
        }
      `}</style>
    </section>
  );
}

/* ------------ HOST (NATHAN) ------------ */
function HostCard({ accent }) {
  const credentials = [
    "Operator behind The Rundown, The Neuron and beehiiv growth",
    "Sold his own newsletter",
    "Built a $1M ARR business on 920 subscribers in 10.5 months",
    "Managed $6M+ in newsletter ad spend across 4M+ subscribers",
    "Featured on My First Million; on stage at beehiiv & The Newsletter Conference",
  ];
  return (
    <section style={{
      background: '#0a0a0a', padding: '120px 32px',
      borderTop: '1px solid #1a1a1a', position: 'relative', overflow: 'hidden'
    }}>
      <div style={{
        position: 'absolute', inset: 0, opacity: 0.5,
        background: `radial-gradient(ellipse at 80% 20%, ${accent.hex}14 0%, transparent 55%)`,
        pointerEvents: 'none'
      }} />
      <div style={{ position: 'relative', maxWidth: 1280, margin: '0 auto' }}>
        <Eyebrow idx="02" label="Who's running the room" accent={accent} />

        <div className="host-grid">
          <div className="host-img">
            <div className="host-img-inner">
              {/* placeholder portrait — striped */}
              <div style={{
                position: 'absolute', inset: 0,
                background:
                  `linear-gradient(135deg, ${accent.hex}22 0%, transparent 40%),` +
                  'repeating-linear-gradient(45deg, #161616 0px, #161616 6px, #1c1c1c 6px, #1c1c1c 12px)'
              }} />
              <div className="mono" style={{
                position: 'absolute', bottom: 14, left: 16,
                fontSize: 10, color: '#525252', letterSpacing: '0.18em', textTransform: 'uppercase'
              }}>nathan_may_portrait.jpg</div>
              <div className="mono" style={{
                position: 'absolute', top: 14, right: 16,
                fontSize: 10, color: accent.hex, letterSpacing: '0.18em', textTransform: 'uppercase'
              }}>4:5 · placeholder</div>
            </div>
          </div>

          <div className="host-body">
            <h2 className="host-name">Nathan May</h2>
            <div className="mono host-role" style={{ color: accent.hex }}>
              Founder, The Feed Media · Operator, advisor, sold-to-Milk-Road
            </div>
            <p className="host-bio">
              Nathan has spent the last decade inside the newsletters you read every morning — building the
              growth engines, ads, and offers behind the most recognizable names in the space. He doesn't
              teach theory. He runs the playbook live, every Monday, for 2,300+ operators who've come through.
            </p>
            <ul className="host-list">
              {credentials.map((c, i) => (
                <li key={i}>
                  <span className="host-dot" style={{ background: accent.hex }} />
                  {c}
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
      <style>{`
        .host-grid {
          display: grid;
          grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr);
          gap: 72px;
          align-items: center;
        }
        .host-img {
          position: relative;
          aspect-ratio: 4/5;
          border-radius: 12px;
          overflow: hidden;
          border: 1px solid #2a2a2a;
          background: #0d0d0d;
        }
        .host-img-inner { position: absolute; inset: 0; }
        .host-name {
          font-size: clamp(48px, 6.5vw, 96px);
          line-height: 0.95;
          letter-spacing: -0.035em;
          font-weight: 600;
          color: #ffffff;
          margin: 0 0 12px;
        }
        .host-role {
          font-size: 12px;
          letter-spacing: 0.18em;
          text-transform: uppercase;
          font-weight: 600;
          margin-bottom: 28px;
        }
        .host-bio {
          font-size: 19px;
          line-height: 1.55;
          color: #c5c5c5;
          margin: 0 0 32px;
          max-width: 640px;
          text-wrap: pretty;
        }
        .host-list {
          margin: 0; padding: 0; list-style: none;
          display: flex; flex-direction: column; gap: 14px;
        }
        .host-list li {
          display: flex; align-items: flex-start; gap: 14px;
          font-size: 16px; line-height: 1.5; color: #d4d4d4;
        }
        .host-dot {
          width: 6px; height: 6px; border-radius: 50%;
          margin-top: 11px; flex-shrink: 0;
        }
        @media (max-width: 900px) {
          .host-grid { grid-template-columns: 1fr; gap: 36px; }
          .host-img { max-width: 380px; }
        }
      `}</style>
    </section>
  );
}

/* ------------ REVIEW WALL ------------ */
function ReviewWall({ accent }) {
  const reviews = REVIEWS;

  const tones = [
    ['#fde2c4','#7a4d12'], ['#dbeafe','#1e40af'], ['#dcfce7','#166534'],
    ['#fce7f3','#9d174d'], ['#e0e7ff','#3730a3'], ['#fef3c7','#854d0e'],
    ['#ccfbf1','#115e59'], ['#fee2e2','#991b1b'], ['#ede9fe','#5b21b6'],
    ['#fff7ed','#9a3412'], ['#f0fdf4','#14532d'], ['#fef2f2','#7f1d1d'],
  ];
  function avatar(name) {
    let h = 0; for (let i = 0; i < name.length; i++) h = (h * 31 + name.charCodeAt(i)) >>> 0;
    return tones[h % tones.length];
  }
  function initials(n) {
    return n.replace(/[^a-zA-Z\s]/g, '').split(/\s+/).filter(Boolean).slice(0, 2).map(p => p[0].toUpperCase()).join('');
  }

  function Stars({ count = 5 }) {
    return (
      <div style={{ display: 'flex', gap: 4, marginBottom: 20 }}>
        {[0, 1, 2, 3, 4].map(i => (
          <svg key={i} width="22" height="22" viewBox="0 0 20 20" fill={i < count ? '#f5b500' : '#e5e7eb'}>
            <path d="M10 1.5l2.6 5.6 6.1.6-4.6 4.2 1.3 6L10 14.8l-5.4 3.1 1.3-6L1.3 7.7l6.1-.6L10 1.5z" />
          </svg>
        ))}
      </div>
    );
  }

  function Card({ rv }) {
    const [bg, fg] = avatar(rv.n);
    return (
      <div style={{
        background: '#ffffff',
        border: '1px solid #e5e7eb',
        borderRadius: 12,
        padding: '36px 36px 32px',
        boxShadow: '0 1px 2px rgba(15,23,42,0.04), 0 12px 32px -14px rgba(15,23,42,0.1)',
        breakInside: 'avoid',
        marginBottom: 28,
        color: '#111827'
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 20 }}>
          <div style={{
            width: 56, height: 56, borderRadius: '50%',
            background: bg, color: fg,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontWeight: 700, fontSize: 19, fontFamily: 'inherit', flexShrink: 0
          }}>{initials(rv.n)}</div>
          <div style={{ minWidth: 0 }}>
            <div style={{ fontSize: 20, fontWeight: 600, color: '#0f172a', lineHeight: 1.2 }}>{rv.n}</div>
            <div style={{ fontSize: 14, color: '#6b7280', marginTop: 3 }}>{rv.r}</div>
          </div>
        </div>
        <Stars count={rv.s ?? 5} />
        <div style={{
          fontSize: 19, lineHeight: 1.55, color: '#1f2937', whiteSpace: 'pre-line', letterSpacing: '-0.005em'
        }}>{rv.q}</div>
        <div style={{ marginTop: 24, fontSize: 12, color: '#9ca3af', letterSpacing: '0.04em' }}>{rv.d}</div>
      </div>
    );
  }

  return (
    <section style={{
      background: '#f4f4f5',
      padding: '120px 32px 130px',
      borderTop: '1px solid #1a1a1a',
      borderBottom: '1px solid #1a1a1a',
      position: 'relative'
    }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ marginBottom: 72 }}>
          <h2 style={{
            fontSize: 'clamp(40px, 5.6vw, 84px)', lineHeight: 0.98, margin: 0,
            letterSpacing: '-0.035em', fontWeight: 600, textWrap: 'balance', color: '#000',
            maxWidth: 1000
          }}>
            2,300+ newsletter operators went through<br />
            this exact training.<br />
            <span style={{ color: accent.hex, fontWeight: 600 }}>Here's what they actually said.</span>
          </h2>
        </div>

        <div className="rw-grid" style={{ columnCount: 2, columnGap: 22 }}>
          {reviews.map((rv, i) => <Card key={i} rv={rv} />)}
        </div>

        <style>{`
          @media (max-width: 820px) { .rw-grid { column-count: 1 !important; } }
        `}</style>
      </div>
    </section>
  );
}

/* ------------ PRESS ------------ */
function PressStrip({ accent }) {
  const press = ["NEW YORK POST", "MY FIRST MILLION", "BEEHIIV STAGE", "THE NEWSLETTER CONFERENCE", "THE DISPATCH", "PERSONAL IPO"];
  return (
    <section style={{ background: '#000', borderTop: '1px solid #1a1a1a', borderBottom: '1px solid #1a1a1a', padding: '48px 32px' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', display: 'flex', alignItems: 'center', gap: 48, flexWrap: 'wrap' }}>
        <div className="mono" style={{
          fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: accent.hex, fontWeight: 600
        }}>
          On stage / featured
        </div>
        <div style={{ flex: 1, display: 'flex', gap: 40, flexWrap: 'wrap', alignItems: 'center' }}>
          {press.map(p => (
            <span key={p} className="mono" style={{
              fontSize: 13, color: '#f5f5f5', letterSpacing: '0.18em', whiteSpace: 'nowrap', fontWeight: 500
            }}>{p}</span>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ------------ FAQ ------------ */
function FAQ({ accent }) {
  const faqs = [
    {
      q: "Is it really free?",
      a: "Yes. No card, no upsell on the call. We make our money from the people who later raise their hand for the Accelerator. This is the trailer."
    },
    {
      q: "Will there be a replay?",
      a: "No. We promise a sharp 75 minutes live with chat and a Q&A; we don't promise a recording. Roughly 1 in 6 people who 'plan to watch the replay' ever do."
    },
    {
      q: "I'm pre-launch. Is this still useful?",
      a: "Especially. The biggest mistakes are made in the first 1,000 subscribers — niche, format, offer. The workshop is built to prevent them, not patch them."
    },
    {
      q: "I already do $5K–$10K/mo. Will I learn anything?",
      a: "If you're stuck on a plateau, yes. The pillars on AI-assisted writing and the $10K niche map are designed for operators with traction who can't figure out the next compounding loop."
    },
    {
      q: "Why is Nathan giving this away?",
      a: "Because most newsletter content online is taught by people without a track record. The fastest way to fix that is to put the real playbook on a stage and let the work speak."
    },
    {
      q: "What happens after I register?",
      a: "You'll get a confirmation, a calendar invite, and a single primer video to watch beforehand. That's it until showtime."
    },
  ];
  return (
    <section style={{ background: '#0a0a0a', padding: '120px 32px', borderTop: '1px solid #1a1a1a' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <Eyebrow idx="07" label="Common questions" accent={accent} />
        <h2 style={{
          fontSize: 'clamp(40px, 5.6vw, 84px)', lineHeight: 0.98, margin: '0 0 56px',
          letterSpacing: '-0.035em', fontWeight: 600, textWrap: 'balance', color: '#ffffff', maxWidth: 1000
        }}>
          The things people ask <span style={{ color: accent.hex, fontWeight: 400 }}>before they say yes.</span>
        </h2>

        <div style={{ borderTop: '1px solid #1a1a1a' }}>
          {faqs.map((f, i) => <FAQRow key={i} f={f} accent={accent} defaultOpen={i === 0} />)}
        </div>
      </div>
    </section>
  );
}

function FAQRow({ f, accent, defaultOpen }) {
  const [open, setOpen] = useState(!!defaultOpen);
  return (
    <div style={{ borderBottom: '1px solid #1a1a1a' }}>
      <button
        onClick={() => setOpen(o => !o)}
        style={{
          width: '100%', textAlign: 'left',
          padding: '28px 0',
          background: 'transparent', border: 'none', color: '#f5f5f5',
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          gap: 28, cursor: 'pointer', fontFamily: 'inherit'
        }}
      >
        <span style={{
          fontSize: 'clamp(20px, 2vw, 26px)', fontWeight: 600,
          letterSpacing: '-0.02em', color: '#f5f5f5', lineHeight: 1.3,
          textWrap: 'balance'
        }}>{f.q}</span>
        <span style={{
          width: 36, height: 36, borderRadius: '50%',
          border: `1px solid ${open ? accent.hex : '#2a2a2a'}`,
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          color: open ? accent.hex : '#8a8a8a',
          fontSize: 18, fontWeight: 400, flexShrink: 0,
          transition: 'all 200ms',
          transform: open ? 'rotate(45deg)' : 'rotate(0deg)'
        }}>+</span>
      </button>
      {open && (
        <div style={{
          paddingBottom: 28, paddingRight: 80,
          fontSize: 17, lineHeight: 1.6, color: '#a0a0a0',
          textWrap: 'pretty'
        }}>{f.a}</div>
      )}
    </div>
  );
}

/* ------------ FINAL ------------ */
function FinalRegister({ tweaks, accent, event }) {
  return (
    <section style={{
      background: '#0a0a0a', padding: '140px 32px 120px', position: 'relative', overflow: 'hidden'
    }}>
      <div style={{
        position: 'absolute', inset: 0,
        background: `radial-gradient(ellipse at 50% 100%, ${accent.hex}1a 0%, transparent 60%)`
      }} />
      <div style={{
        maxWidth: 1100, margin: '0 auto', position: 'relative',
        textAlign: 'center'
      }}>
        <h2 style={{
          fontSize: 'clamp(48px, 7vw, 116px)', lineHeight: 0.94, margin: '0 0 24px',
          letterSpacing: '-0.04em', fontWeight: 600, textWrap: 'balance', color: '#ffffff'
        }}>
          The room fills up.<br />
          <span style={{ color: accent.hex, fontWeight: 400 }}>Save your seat now.</span>
        </h2>

        <p style={{
          fontSize: 18, color: '#a0a0a0', lineHeight: 1.5, margin: '0 auto 56px',
          maxWidth: 640
        }}>
          75 minutes, live with chat. No replay. The single biggest predictor of whether you walk away
          with a $10K newsletter blueprint is whether you actually show up.
        </p>

        <div style={{ display: 'inline-flex', flexDirection: 'column', alignItems: 'center', gap: 36 }}>
          {/* CALENDAR-STYLE EVENT CARD */}
          <div style={{
            background: '#0d0d0d',
            border: '1px solid #2a1f3a',
            borderRadius: 14,
            overflow: 'hidden',
            minWidth: 360,
            boxShadow: `0 30px 80px -20px ${accent.hex}33`,
            position: 'relative'
          }}>
            <div style={{
              background: accent.gradient || accent.hex,
              color: '#fff',
              padding: '18px 32px 16px',
              borderBottom: '1px dashed rgba(255,255,255,0.25)'
            }}>
              <div className="mono" style={{
                fontSize: 12, letterSpacing: '0.24em', fontWeight: 700, opacity: 0.9
              }}>{window.FeedEvent.fmt.cardDateTopLine(event)}</div>
              <div style={{
                fontSize: 44, fontWeight: 700, letterSpacing: '-0.02em', lineHeight: 1, marginTop: 6,
                fontVariantNumeric: 'tabular-nums'
              }}>{window.FeedEvent.fmt.timeFormatted(event)}</div>
            </div>
            <div style={{ padding: '20px 32px 22px', textAlign: 'left' }}>
              <div className="mono" style={{
                fontSize: 11, letterSpacing: '0.16em', color: '#8a8a8a',
                textTransform: 'uppercase'
              }}>
                With Nathan May · Live, with chat · 75 min
              </div>
            </div>
          </div>

          <button
            onClick={scrollToForm}
            style={{
              padding: '22px 44px',
              background: accent.gradient || accent.hex,
              color: '#fff',
              border: 'none',
              borderRadius: 10,
              fontSize: 16,
              fontWeight: 700,
              letterSpacing: '0.14em',
              textTransform: 'uppercase',
              cursor: 'pointer',
              fontFamily: 'inherit',
              display: 'inline-flex',
              alignItems: 'center',
              gap: 14,
              boxShadow: `0 20px 50px -10px ${accent.hex}88, 0 0 0 1px ${accent.hex}55, inset 0 1px 0 rgba(255,255,255,0.2)`,
              transition: 'transform 200ms, box-shadow 200ms'
            }}
            onMouseEnter={e => {
              e.currentTarget.style.transform = 'translateY(-2px)';
              e.currentTarget.style.boxShadow = `0 26px 60px -8px ${accent.hex}aa, 0 0 0 1px ${accent.hex}88, inset 0 1px 0 rgba(255,255,255,0.25)`;
            }}
            onMouseLeave={e => {
              e.currentTarget.style.transform = 'translateY(0)';
              e.currentTarget.style.boxShadow = `0 20px 50px -10px ${accent.hex}88, 0 0 0 1px ${accent.hex}55, inset 0 1px 0 rgba(255,255,255,0.2)`;
            }}
          >
            Save your free seat →
          </button>

          {tweaks.showSeats && (
            <div className="mono" style={{
              fontSize: 11, letterSpacing: '0.18em', color: '#8a8a8a',
              textTransform: 'uppercase'
            }}>
              <span style={{ color: '#f5f5f5', fontWeight: 700 }}>247</span>
              {' '}/ 500 seats remaining
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

function FooterContent() {
  return (
    <div style={{
      display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
      gap: 16, flexWrap: 'wrap', fontSize: 13
    }}>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
        <span className="mono" style={{ letterSpacing: '0.18em', textTransform: 'uppercase', color: '#8a8a8a' }}>Hosted by</span>
        <span style={{
          fontFamily: "'Geist', system-ui, sans-serif",
          fontWeight: 800, fontSize: 24, color: '#f5f5f5',
          letterSpacing: '-0.035em', lineHeight: 1
        }}>The Feed Media</span>
      </div>
      <div className="mono" style={{ fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: '#525252' }}>
        © 2026 · Privacy · Terms
      </div>
    </div>
  );
}

function Footer() {
  return (
    <footer style={{ background: '#000', color: '#525252', padding: '24px 32px', borderTop: '1px solid #1a1a1a' }}>
      <style>{`@media (max-width: 940px) { footer { display: none; } }`}</style>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <FooterContent />
      </div>
    </footer>
  );
}

/* ------------ TWEAKS ------------ */
function TweaksPanel({ open, tweaks, setTweak, onClose }) {
  if (!open) return null;
  return (
    <div style={{
      position: 'fixed', bottom: 24, right: 24, zIndex: 9999,
      background: '#0d0d0d', color: '#f5f5f5',
      borderRadius: 6, border: '1px solid #2a2a2a',
      width: 320, padding: 22,
      boxShadow: '0 30px 80px rgba(0,0,0,0.6)', fontSize: 13
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
        <strong className="mono" style={{ letterSpacing: '0.16em', fontSize: 11 }}>TWEAKS</strong>
        <button onClick={onClose} style={{
          background: 'transparent', color: '#888', border: 'none', cursor: 'pointer', fontSize: 16
        }}>×</button>
      </div>

      <div style={{ marginBottom: 18 }}>
        <div className="mono" style={{ marginBottom: 8, color: '#888', fontSize: 10, letterSpacing: '0.14em' }}>HEADLINE</div>
        {[
          ['build', '$10K newsletter in 90 days'],
          ['free', 'Workshop operators attend'],
          ['revenue', 'Stop chasing subscribers']
        ].map(([k, l]) => (
          <button key={k} onClick={() => setTweak('headline', k)}
            style={{
              display: 'block', width: '100%', textAlign: 'left',
              padding: '8px 12px', marginBottom: 6,
              background: tweaks.headline === k ? ACCENTS[tweaks.accent].hex : 'transparent',
              color: tweaks.headline === k ? '#000' : '#f5f5f5',
              border: '1px solid #2a2a2a', borderRadius: 4, fontSize: 12, cursor: 'pointer', fontFamily: 'inherit'
            }}>
            {l}
          </button>
        ))}
      </div>

      <div style={{ marginBottom: 18 }}>
        <div className="mono" style={{ marginBottom: 8, color: '#888', fontSize: 10, letterSpacing: '0.14em' }}>ACCENT</div>
        <div style={{ display: 'flex', gap: 6 }}>
          {Object.entries(ACCENTS).map(([k, v]) => (
            <button key={k} onClick={() => setTweak('accent', k)} style={{
              flex: 1, padding: '10px 8px',
              background: tweaks.accent === k ? (v.gradient || v.hex) : '#0a0a0a',
              color: tweaks.accent === k ? '#fff' : '#f5f5f5',
              border: `1px solid ${tweaks.accent === k ? v.hex : '#2a2a2a'}`,
              borderRadius: 4, fontSize: 11, cursor: 'pointer', fontFamily: 'inherit',
              textTransform: 'capitalize', fontWeight: 600,
              textShadow: tweaks.accent === k ? '0 1px 2px rgba(0,0,0,0.4)' : 'none'
            }}>{k}</button>
          ))}
        </div>
      </div>

      <div style={{ marginBottom: 18 }}>
        <div className="mono" style={{ marginBottom: 8, color: '#888', fontSize: 10, letterSpacing: '0.14em' }}>HERO BACKGROUND</div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6 }}>
          {[
            ['aurora', 'Aurora + dots'],
            ['mesh', 'Animated mesh'],
            ['rings', 'Radar rings'],
            ['grid', 'Grid + glow'],
          ].map(([k, l]) => (
            <button key={k} onClick={() => setTweak('heroBg', k)}
              style={{
                padding: '9px 10px',
                background: tweaks.heroBg === k ? ACCENTS[tweaks.accent].hex : 'transparent',
                color: tweaks.heroBg === k ? '#000' : '#f5f5f5',
                border: '1px solid #2a2a2a', borderRadius: 4, fontSize: 11, cursor: 'pointer',
                fontFamily: 'inherit', fontWeight: 600
              }}>
              {l}
            </button>
          ))}
        </div>
      </div>

      <label style={{ display: 'flex', alignItems: 'center', gap: 10, cursor: 'pointer', marginBottom: 10 }}>
        <input type="checkbox" checked={tweaks.showCountdown}
          onChange={e => setTweak('showCountdown', e.target.checked)} />
        Show countdown
      </label>
      <label style={{ display: 'flex', alignItems: 'center', gap: 10, cursor: 'pointer' }}>
        <input type="checkbox" checked={tweaks.showSeats}
          onChange={e => setTweak('showSeats', e.target.checked)} />
        Show seats-remaining
      </label>
    </div>
  );
}

/* ------------ STICKY OPT-IN (mobile inline form) ------------ */
function StickyOptIn({ accent, onSubmitEmail }) {
  const [email, setEmail] = useState('');

  function handleSubmit(e) {
    e.preventDefault();
    if (!email) return;
    if (onSubmitEmail) onSubmitEmail(email.trim());
  }

  return (
    <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
      <input
        type="email"
        required
        placeholder="Your Email Address"
        value={email}
        onChange={e => setEmail(e.target.value)}
        style={{
          flex: 1, minWidth: 0,
          padding: '14px 16px',
          background: '#26262b',
          border: '1px solid #3a3a42',
          borderRadius: 12,
          color: '#f5f5f5',
          fontSize: 15,
          fontFamily: 'inherit',
          outline: 'none',
        }}
        onFocus={e => { e.currentTarget.style.borderColor = accent.hex; }}
        onBlur={e => {
          e.currentTarget.style.borderColor = '#3a3a42';
          window.FeedPartial && window.FeedPartial.fire({
            email: e.currentTarget.value,
            dropoffStep: 'email_entered'
          });
        }}
      />
      <button
        type="submit"
        style={{
          padding: '14px 18px',
          background: accent.gradient || accent.hex,
          color: '#fff',
          border: 'none',
          borderRadius: 12,
          fontSize: 13,
          fontWeight: 700,
          letterSpacing: '0.1em',
          textTransform: 'uppercase',
          cursor: 'pointer',
          fontFamily: 'inherit',
          whiteSpace: 'nowrap',
          flexShrink: 0,
          boxShadow: `0 8px 24px -8px ${accent.hex}99`,
        }}
      >
        Save your free seat →
      </button>
    </form>
  );
}

/* ────────────────────────────────────────────────────────────
 * QUALIFYING FLOW (Typeform-style full-screen overlay)
 * Opens after email submission. Two steps: qualifying question + phone.
 * On completion: writes a row to `registrants` and redirects to post-reg page.
 * ──────────────────────────────────────────────────────────── */

// Fallback placeholder if Supabase fails. Real questions come from window.FeedQuestions.
const FALLBACK_QUESTIONS = [{
  id: 'fallback',
  prompt: 'What stage is your newsletter at?',
  options: [
    { value: 'none', label: "I don't have one yet", sublabel: 'Idea or pre-launch' },
    { value: '0-500', label: '0–500 subscribers', sublabel: 'Early days' },
    { value: '500-5k', label: '500–5,000 subscribers', sublabel: 'Building traction' },
    { value: '5k-25k', label: '5,000–25,000 subscribers', sublabel: 'Scaling up' },
    { value: '25k+', label: '25,000+ subscribers', sublabel: 'Established' },
  ]
}];

// Live-subscribed qualifying form for THIS page's funnel.
// Resolves the funnel (by landing variant) -> assigned form -> its questions.
function useFormQuestions() {
  const [questions, setQuestions] = useState(null);
  const [formId, setFormId] = useState(null);
  const [ready, setReady] = useState(false);
  useEffect(() => {
    let cancelled = false;
    function resolve() {
      const id = window.FeedTracking && window.FeedTracking.getIdentity
        ? window.FeedTracking.getIdentity()
        : { page_type: 'landing', page_variant: 'default' };
      window.FeedQuestions.loadForPage(id.page_type, id.page_variant).then(res => {
        if (cancelled) return;
        setQuestions(res.questions && res.questions.length ? res.questions : FALLBACK_QUESTIONS);
        setFormId(res.form_id || null);
        setReady(true);
      });
    }
    resolve();
    const unsub = window.FeedQuestions.onChange(() => resolve());
    return () => { cancelled = true; unsub && unsub(); };
  }, []);
  return { questions: questions || FALLBACK_QUESTIONS, formId, ready };
}

// Submits the registration through the `register-submit` Edge Function.
// The function captures the real client IP server-side and (later) handles
// GHL contact push + Meta CAPI events.
async function insertRegistrant(payload) {
  const url = window.FEED_CONFIG.supabaseUrl + '/functions/v1/register-submit';
  const res = await fetch(url, {
    method: 'POST',
    headers: {
      apikey: window.FEED_CONFIG.supabaseAnonKey,
      Authorization: 'Bearer ' + window.FEED_CONFIG.supabaseAnonKey,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(payload)
  });
  const text = await res.text();
  let body = null;
  try { body = text ? JSON.parse(text) : null; } catch (e) {}
  if (!res.ok) {
    throw new Error((body && body.error) || text || ('HTTP ' + res.status));
  }
  return body && body.registrant;
}

// US phone formatter: takes digits, returns "(xxx) xxx-xxxx" progressively
function formatPhone(input) {
  const digits = (input || '').replace(/\D/g, '').slice(0, 10);
  if (digits.length === 0) return '';
  if (digits.length < 4) return '(' + digits;
  if (digits.length < 7) return '(' + digits.slice(0, 3) + ') ' + digits.slice(3);
  return '(' + digits.slice(0, 3) + ') ' + digits.slice(3, 6) + '-' + digits.slice(6);
}

function QualifyingFlow({ email, event, accent, onClose }) {
  const { questions, formId, ready } = useFormQuestions();
  const phoneStepIdx = questions.length;     // phone always comes after all questions
  const submittingStepIdx = phoneStepIdx + 1; // and then the submitting state
  const totalSteps = phoneStepIdx + 1;       // user-facing total: questions + phone

  const [step, setStep] = useState(0);
  // answers: { [questionId]: value }
  const [answers, setAnswers] = useState({});
  const [phone, setPhone] = useState('');
  const [error, setError] = useState(null);
  // Only auto-advance when the user actively picks an option — not when navigating back
  const autoAdvanceArmed = React.useRef(false);
  const formStartedRef = React.useRef(false);
  const formViewedRef = React.useRef(false);
  const formMountMs = React.useRef(Date.now());

  function setAnswer(questionId, value) {
    autoAdvanceArmed.current = true;
    if (!formStartedRef.current) {
      formStartedRef.current = true;
      window.FeedTracking && window.FeedTracking.trackEvent('form_start', { form_id: formId });
    }
    const next = Object.assign({}, answers, { [questionId]: value });
    setAnswers(next);
    // Progressive enrichment: push the answer-so-far into GHL via the partial.
    // FeedPartial dedups on answered-count, so each new pick fires exactly once.
    const snapshot = questions.map(q => {
      const v = next[q.id] != null ? next[q.id] : null;
      const opt = (q.options || []).find(o => o.value === v);
      return { question_id: q.id, prompt: q.prompt, value: v, label: opt ? opt.label : v };
    });
    window.FeedPartial && window.FeedPartial.fire({
      email: email,
      dropoffStep: 'qualifying_in_progress',
      answers: snapshot,
      eventId: event ? event.id : null
    });
  }

  // Lock body scroll while open + fire a "qualifying_in_progress" partial
  useEffect(() => {
    const prev = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    // The user just opened the qualifying overlay — upgrade their partial state
    window.FeedPartial && window.FeedPartial.fire({
      email: email,
      dropoffStep: 'qualifying_in_progress',
      eventId: event ? event.id : null
    });
    return () => { document.body.style.overflow = prev; };
  }, []);

  // Fire form_view once the funnel's form has resolved (so it carries form_id)
  useEffect(() => {
    if (ready && !formViewedRef.current) {
      formViewedRef.current = true;
      window.FeedTracking && window.FeedTracking.trackEvent('form_view', { form_id: formId });
    }
  }, [ready, formId]);

  // Fire a question_view event each time a qualifying question step is shown
  useEffect(() => {
    if (step < phoneStepIdx) {
      const q = questions[step];
      if (q) window.FeedTracking && window.FeedTracking.trackEvent('form_question_view', { question_id: q.id, position: step, form_id: formId });
    }
  }, [step, phoneStepIdx, questions]);

  // When the user reaches the phone step, upgrade the partial to phone_in_progress
  useEffect(() => {
    if (step === phoneStepIdx) {
      window.FeedPartial && window.FeedPartial.fire({
        email: email,
        dropoffStep: 'phone_in_progress',
        eventId: event ? event.id : null
      });
    }
  }, [step, phoneStepIdx]);

  // Auto-advance from any qualifying step the moment a fresh pick happens.
  // Phone step never auto-advances.
  useEffect(() => {
    if (step < phoneStepIdx && autoAdvanceArmed.current) {
      const currentQ = questions[step];
      if (currentQ && answers[currentQ.id]) {
        autoAdvanceArmed.current = false;
        const timer = setTimeout(() => setStep(step + 1), 240);
        return () => clearTimeout(timer);
      }
    }
  }, [step, answers, phoneStepIdx, questions]);

  function canAdvance() {
    if (step < phoneStepIdx) {
      const q = questions[step];
      return !!(q && answers[q.id]);
    }
    if (step === phoneStepIdx) return phone.replace(/\D/g, '').length === 10;
    return false;
  }

  function handleAdvance() {
    if (!canAdvance()) return;
    if (step < phoneStepIdx) setStep(step + 1);
    else if (step === phoneStepIdx) submit();
  }

  function handleBack() {
    if (step === 0) onClose();
    else setStep(step - 1);
  }

  async function submit() {
    setStep(submittingStepIdx);
    setError(null);
    try {
      const primaryAnswer = questions.length > 0 ? answers[questions[0].id] : null;
      // Full snapshot of every answer, captured at submit time so it stays
      // readable even if the questions are later edited.
      const answerSnapshot = questions.map(q => {
        const value = answers[q.id] != null ? answers[q.id] : null;
        const opt = (q.options || []).find(o => o.value === value);
        return { question_id: q.id, prompt: q.prompt, value, label: opt ? opt.label : value };
      });
      const attribution = window.FeedAttribution ? window.FeedAttribution.get() : {};
      const sessionId = window.FeedTracking ? window.FeedTracking.getSessionId() : null;
      const identity = window.FeedTracking && window.FeedTracking.getIdentity
        ? window.FeedTracking.getIdentity()
        : { page_type: 'landing', page_variant: 'default' };
      await insertRegistrant({
        event_id: event ? event.id : null,
        email: email,
        phone: '+1' + phone.replace(/\D/g, ''),
        qualifying_answer: primaryAnswer,
        answers: answerSnapshot,
        form_id: formId,
        session_id: sessionId,
        // First-touch attribution captured on landing
        utm_source:   attribution.utm_source   || null,
        utm_medium:   attribution.utm_medium   || null,
        utm_campaign: attribution.utm_campaign || null,
        utm_content:  attribution.utm_content  || null,
        utm_term:     attribution.utm_term     || null,
        fbclid:       attribution.fbclid       || null,
        gclid:        attribution.gclid        || null,
        referrer:     attribution.referrer     || null,
        // Variant attribution — which landing this registrant entered through
        entry_page_type:    identity.page_type    || 'landing',
        entry_page_variant: identity.page_variant || 'default'
        // TODO: GHL contact push will be added with the Edge Function next.
      });
      window.FeedTracking && window.FeedTracking.trackEvent('form_submit', { ms_to_complete: Date.now() - formMountMs.current, form_id: formId });
      setTimeout(() => { window.location.href = '/post-registration.html'; }, 600);
    } catch (e) {
      setError(e.message || 'Something went wrong. Please try again.');
      setStep(phoneStepIdx);
    }
  }

  // Enter to advance (desktop)
  useEffect(() => {
    function onKey(e) {
      if (e.key === 'Enter' && canAdvance() && step !== submittingStepIdx) {
        e.preventDefault();
        handleAdvance();
      }
    }
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [step, answers, phone]);

  const progress = step >= totalSteps ? 100 : ((step + (canAdvance() ? 0.5 : 0)) / totalSteps) * 100;

  return (
    <div className="qual-overlay" style={{
      position: 'fixed', inset: 0, zIndex: 10000,
      background: '#0a0a0a',
      display: 'flex', flexDirection: 'column',
      animation: 'qualFadeIn 200ms ease-out'
    }}>
      {/* Backdrop glow */}
      <div style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        background: `radial-gradient(ellipse 90% 60% at 50% 0%, ${accent.hex}1a 0%, transparent 60%)`
      }} />

      {/* Top bar: back button + step indicator + progress */}
      <div style={{
        position: 'relative', zIndex: 2,
        padding: '20px 24px 0',
        display: 'flex', flexDirection: 'column', gap: 14
      }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <button onClick={handleBack} className="qual-back" style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            padding: '8px 12px', borderRadius: 8,
            background: 'transparent', border: '1px solid #2a2a2a',
            color: '#a8a8a8', cursor: 'pointer', fontSize: 13, fontFamily: 'inherit'
          }}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M19 12H5M12 19l-7-7 7-7" />
            </svg>
            {step === 0 ? 'Cancel' : 'Back'}
          </button>
          <span className="mono" style={{
            fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase',
            color: '#8a8a8a', fontWeight: 600
          }}>
            Step {Math.min(step + 1, totalSteps)} of {totalSteps}
          </span>
        </div>
        <div style={{ height: 2, background: '#1a1a1a', borderRadius: 2, overflow: 'hidden' }}>
          <div style={{
            height: '100%', width: progress + '%',
            background: accent.gradient || accent.hex,
            transition: 'width 360ms cubic-bezier(.2,.8,.2,1)'
          }} />
        </div>
      </div>

      {/* Content area */}
      <div style={{
        position: 'relative', zIndex: 2,
        flex: 1, overflowY: 'auto',
        padding: '0 24px',
        display: 'flex', alignItems: 'center', justifyContent: 'center'
      }}>
        <div key={step} style={{
          width: '100%', maxWidth: 720,
          animation: 'qualSlideIn 320ms cubic-bezier(.2,.8,.2,1)'
        }}>
          {step < phoneStepIdx && questions[step] && (
            <QualStepQuestion
              accent={accent}
              question={questions[step]}
              value={answers[questions[step].id]}
              onChange={(value) => setAnswer(questions[step].id, value)}
            />
          )}
          {step === phoneStepIdx && (
            <QualStepPhone
              accent={accent}
              value={phone}
              onChange={setPhone}
              error={error}
            />
          )}
          {step === submittingStepIdx && (
            <QualStepSubmitting accent={accent} />
          )}
        </div>
      </div>

      {/* Sticky bottom CTA */}
      {step !== submittingStepIdx && (
        <div style={{
          position: 'relative', zIndex: 2,
          padding: '16px 24px calc(16px + env(safe-area-inset-bottom))',
          borderTop: '1px solid #1a1a1a',
          background: 'rgba(10,10,10,0.95)',
          backdropFilter: 'blur(8px)'
        }}>
          <div style={{ maxWidth: 720, margin: '0 auto' }}>
            <button
              onClick={handleAdvance}
              disabled={!canAdvance()}
              style={{
                width: '100%',
                padding: '18px 24px',
                background: canAdvance() ? (accent.gradient || accent.hex) : '#1a1a1a',
                color: canAdvance() ? '#fff' : '#525252',
                border: 'none', borderRadius: 14,
                fontSize: 15, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase',
                cursor: canAdvance() ? 'pointer' : 'not-allowed',
                fontFamily: 'inherit',
                transition: 'background 200ms, transform 200ms',
                boxShadow: canAdvance() ? `0 14px 36px -10px ${accent.hex}88` : 'none'
              }}
            >
              {step === phoneStepIdx ? 'Confirm registration →' : 'Continue →'}
            </button>
            <div className="mono" style={{
              fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase',
              color: '#525252', textAlign: 'center', marginTop: 10
            }}>
              {step === phoneStepIdx ? 'We only use this to send your seat reminder' : 'Press Enter to continue'}
            </div>
          </div>
        </div>
      )}

      <style>{`
        @keyframes qualFadeIn { from { opacity: 0; } to { opacity: 1; } }
        @keyframes qualSlideIn {
          from { opacity: 0; transform: translateY(16px); }
          to { opacity: 1; transform: translateY(0); }
        }
        .qual-back:hover { border-color: #404040 !important; color: #f5f5f5 !important; }
      `}</style>
    </div>
  );
}

function QualStepQuestion({ accent, question, value, onChange }) {
  const options = (question && question.options) || [];
  return (
    <div>
      <h2 style={{
        fontFamily: "'Archivo', 'Geist', system-ui, sans-serif",
        fontSize: 'clamp(28px, 4.5vw, 48px)',
        fontWeight: 800, letterSpacing: '-0.025em',
        lineHeight: 1.05, margin: '0 0 12px',
        color: '#fff', textWrap: 'balance'
      }}>{question && question.prompt}</h2>
      {question && question.subheadline ? (
        <p style={{
          fontSize: 16, lineHeight: 1.5, fontWeight: 400,
          color: '#b5b5b5', margin: '0 0 20px', maxWidth: 560
        }}>{question.subheadline}</p>
      ) : null}
      <p className="mono" style={{
        fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase',
        color: '#8a8a8a', margin: '0 0 28px', fontWeight: 600
      }}>Pick one</p>

      <div style={{ display: 'grid', gap: 10 }}>
        {options.map((opt, i) => {
          const selected = value === opt.value;
          return (
            <button
              key={opt.value}
              onClick={() => onChange(opt.value)}
              className="qual-card"
              style={{
                display: 'flex', alignItems: 'center', gap: 14,
                padding: '18px 20px',
                background: selected ? 'rgba(168,85,247,0.10)' : '#111',
                border: selected ? `2px solid ${accent.hex}` : '2px solid #1f1f1f',
                borderRadius: 12,
                color: '#f5f5f5',
                cursor: 'pointer',
                textAlign: 'left',
                fontFamily: 'inherit',
                transition: 'all 160ms'
              }}
            >
              <span className="mono" style={{
                width: 28, height: 28, borderRadius: 6,
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                background: selected ? accent.hex : '#1a1a1a',
                color: selected ? '#fff' : '#666',
                fontSize: 12, fontWeight: 700, letterSpacing: '0.04em',
                flexShrink: 0
              }}>{String.fromCharCode(65 + i)}</span>
              <span style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 16, fontWeight: 600, lineHeight: 1.2 }}>{opt.label}</div>
                {opt.sublabel && (
                  <div style={{ fontSize: 12, color: '#8a8a8a', marginTop: 3 }}>{opt.sublabel}</div>
                )}
              </span>
              {selected && (
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke={accent.hex} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M20 6L9 17l-5-5" />
                </svg>
              )}
            </button>
          );
        })}
      </div>

      <style>{`
        .qual-card:hover { border-color: #2a2a2a !important; }
      `}</style>
    </div>
  );
}

function QualStepPhone({ accent, value, onChange, error }) {
  const inputRef = React.useRef(null);
  useEffect(() => { inputRef.current && inputRef.current.focus(); }, []);
  return (
    <div>
      <h2 style={{
        fontFamily: "'Archivo', 'Geist', system-ui, sans-serif",
        fontSize: 'clamp(28px, 4.5vw, 48px)',
        fontWeight: 800, letterSpacing: '-0.025em',
        lineHeight: 1.05, margin: '0 0 12px',
        color: '#fff', textWrap: 'balance'
      }}>What's your phone number?</h2>
      <p style={{
        fontSize: 16, color: '#a8a8a8', margin: '0 0 28px', maxWidth: 540
      }}>
        We'll text you a reminder before the workshop starts so you don't miss it.
      </p>

      <div style={{
        display: 'flex', alignItems: 'stretch', gap: 0,
        background: '#111', border: '2px solid #1f1f1f', borderRadius: 12,
        overflow: 'hidden',
        transition: 'border-color 160ms'
      }}>
        <div className="mono" style={{
          display: 'inline-flex', alignItems: 'center',
          padding: '0 18px',
          background: '#0a0a0a',
          color: '#8a8a8a',
          fontSize: 16, fontWeight: 600,
          borderRight: '1px solid #1f1f1f'
        }}>+1</div>
        <input
          ref={inputRef}
          type="tel"
          inputMode="numeric"
          autoComplete="tel-national"
          placeholder="(555) 123-4567"
          value={formatPhone(value)}
          onChange={e => onChange(e.target.value.replace(/\D/g, '').slice(0, 10))}
          style={{
            flex: 1, minWidth: 0,
            padding: '18px 16px',
            background: 'transparent', border: 'none', outline: 'none',
            color: '#f5f5f5',
            fontSize: 20, fontFamily: 'inherit',
            letterSpacing: '0.01em'
          }}
          onFocus={e => { e.currentTarget.parentElement.style.borderColor = accent.hex; }}
          onBlur={e => { e.currentTarget.parentElement.style.borderColor = '#1f1f1f'; }}
        />
      </div>

      {error && (
        <div style={{
          marginTop: 16, padding: '10px 14px',
          background: 'rgba(239,68,68,0.08)', border: '1px solid rgba(239,68,68,0.3)',
          borderRadius: 8, fontSize: 13, color: '#fca5a5'
        }}>{error}</div>
      )}
    </div>
  );
}

function QualStepSubmitting({ accent }) {
  return (
    <div style={{ textAlign: 'center', padding: '40px 0' }}>
      <div style={{
        width: 56, height: 56, margin: '0 auto 24px',
        border: '3px solid #1f1f1f',
        borderTopColor: accent.hex,
        borderRadius: '50%',
        animation: 'qualSpin 800ms linear infinite'
      }} />
      <div style={{ fontSize: 18, color: '#f5f5f5', fontWeight: 600, marginBottom: 6 }}>
        Confirming your seat…
      </div>
      <div className="mono" style={{
        fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase',
        color: '#525252', fontWeight: 600
      }}>You're almost in</div>
      <style>{`
        @keyframes qualSpin { to { transform: rotate(360deg); } }
      `}</style>
    </div>
  );
}

/* ------------ APP ------------ */
function App() {
  const [tweaks, setTweaks] = useState(TWEAK_DEFAULTS);
  const [editOpen, setEditOpen] = useState(false);
  const [formVisible, setFormVisible] = useState(true);
  const [qualifyingEmail, setQualifyingEmail] = useState(null);
  const event = useFeedEvent();
  const accent = ACCENTS[tweaks.accent] || ACCENTS.purple;

  function handleSubmitEmail(email) {
    setQualifyingEmail(email);
  }

  // Fire page_view exactly once when the App mounts.
  // identify() declares this page's identity so every subsequent
  // trackEvent / trackPageView / partial / submit call inherits page_type + page_variant.
  useEffect(() => {
    if (!window.FeedTracking) return;
    window.FeedTracking.identify({ pageType: 'landing', pageVariant: 'default' });
    window.FeedTracking.trackPageView();
  }, []);

  function setTweak(k, v) {
    const next = { ...tweaks, [k]: v };
    setTweaks(next);
    try { window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { [k]: v } }, '*'); } catch (e) {}
  }

  useEffect(() => {
    function onMsg(e) {
      const d = e.data;
      if (!d || !d.type) return;
      if (d.type === '__activate_edit_mode') setEditOpen(true);
      if (d.type === '__deactivate_edit_mode') setEditOpen(false);
    }
    window.addEventListener('message', onMsg);
    try { window.parent.postMessage({ type: '__edit_mode_available' }, '*'); } catch (e) {}
    return () => window.removeEventListener('message', onMsg);
  }, []);

  useEffect(() => {
    const form = document.querySelector('[data-register-form]');
    if (!form) return;
    const observer = new IntersectionObserver(
      ([entry]) => setFormVisible(entry.isIntersecting),
      { threshold: 0.1 }
    );
    observer.observe(form);
    return () => observer.disconnect();
  }, []);

  return (
    <div style={{ display: 'flex', flexDirection: 'column', minHeight: '100svh' }}>
      <MobileHeader />
      <Hero tweaks={tweaks} accent={accent} event={event} onSubmitEmail={handleSubmitEmail} />
      <Footer />
      <TweaksPanel open={editOpen} tweaks={tweaks} setTweak={setTweak}
        onClose={() => {
          setEditOpen(false);
          try { window.parent.postMessage({ type: '__edit_mode_dismissed' }, '*'); } catch (e) {}
        }} />

      {/* Mobile-only sticky bar — inline opt-in + footer, hidden while main form is on screen */}
      <div className={`mobile-sticky-cta${formVisible ? ' form-in-view' : ''}`}>
        <StickyOptIn accent={accent} onSubmitEmail={handleSubmitEmail} />
        <div style={{ marginTop: 14, color: '#525252' }}>
          <FooterContent />
        </div>
      </div>

      {/* Typeform-style qualifying flow — opens after email submit */}
      {qualifyingEmail && (
        <QualifyingFlow
          email={qualifyingEmail}
          event={event}
          accent={accent}
          onClose={() => setQualifyingEmail(null)}
        />
      )}
      <style>{`
        .mobile-sticky-cta {
          display: none;
          position: fixed;
          bottom: 0; left: 0; right: 0;
          padding: 12px 16px 16px;
          background: rgba(10,10,10,0.97);
          border-top: 1px solid #1a1a1a;
          z-index: 900;
          transition: opacity 250ms, transform 250ms;
          opacity: 1;
          transform: translateY(0);
        }
        .mobile-sticky-cta.form-in-view {
          opacity: 0;
          transform: translateY(12px);
          pointer-events: none;
        }
        @media (max-width: 940px) {
          .mobile-sticky-cta { display: block; }
          body { padding-bottom: 230px; }
        }
      `}</style>
    </div>
  );
}

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