const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "headline": "million",
  "showCountdown": true,
  "accent": "purple"
}/*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%)',
  },
  plum: {
    hex: '#12051f',
    soft: 'rgba(18,5,31,0.55)',
    ink: '#f5f5f5',
    gradient: 'linear-gradient(135deg, #1a0830 0%, #12051f 60%, #050010 100%)',
  },
  white: {
    hex: '#f5f5f5',
    soft: 'rgba(245,245,245,0.08)',
    ink: '#000',
    gradient: 'linear-gradient(135deg, #f5f5f5 0%, #d4d4d4 100%)',
  },
};

const ALL_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: "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.\n\nI don't need a huge newsletter. If I get 2500 SaaS founders/CMOs/CEOs on my newsletter, I have a VERY healthy business.\n\nSeeing how you use organic growth to grow your newsletter and Feed Media was hugely insightful." },
    { 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. Generously detailed content and feedback, along with a schedule that got me moving to set up things inside the program. It would have taken me months and a lot of wasted time and second guessing if I had to do this work myself. Nathan knows what he's talking about and shares a lot of inside information about the business of newsletters." },
    { 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. And it was wonderful to become part of a community with a bunch of other newsletter enthusiasts!" },
    { n: "Joe Bayfield", r: "Founder", d: "Feb 17, 2026", q: "I was struggling with my funnel and how to imrpove it. Specifically my sign up flow and how it turned leads into clients. After a few sessions in the accelerator, everything was much clearer and now I know exactly what I need to do. The knowledge provided was so valuable and I'm ready to take my business to the next level." },
    { 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. My blockage was over-complicating and not knowing how to grow newsletter through paid ads.\n\nWith Nathan's insights, he helped me grow from 500 to 1300. I know that it is not much, but for me it was a big growth since I was able to get project opportunities for 80k. Lets see how many project I will be alble to close.\n\nAnd one more thank you to Nathan for looms and feedback he gave me to all my questions and HWs." },
    { 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: "Alexandre Bocquet", r: "Founder", d: "Nov 17, 2025", q: "The accelerator helped me unlock the B2B monetization part of my newsletter that I truly didn't have before the start of the 5-week program. The investment in the accelerator also helped me stay accountable throughout the 5-week to ensure an ROI which is expected in the coming weeks!" },
    { n: "Farooq Zafar", r: "Founder", d: "Nov 17, 2025", q: "The #1 thing I was blocked on and looking to improve in my newsletter business was scaling with paid ad campaigns. The accelerator helped with 3 dedicated sessions covering metrics (CTR, LTV, ROAS, etc.), copywriting, winning ads, creative stretegy, campaign architecture, testing process, cohorting, and AI. For those uncertain about taking their newsletter to the next level, you'll it pays for itself with just the first session on market category and business model. Nathan was empathetic, helpful, and knowledgeable, and provided a world-class experience. I strongly recommend his Newsletter Accelerator without any reservation. Cheers!" },
    { n: "Daria Cupareanu", r: "Owner", d: "Nov 17, 2025", q: "I've been following Nathan for a couple of months already and every time I get one of his emails or LinkedIn posts, I set time aside to read it properly. The accelerator felt like everything he teaches, but on steroids. The sessions were packed with so much useful stuff and that's not even counting the bonuses (!!!) It's such a relief to have examples, frameworks, and best practices to follow instead of doing everything blindly.\n\nMy 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. I also started doing more outreach for AI automation projects and in the last three weeks since I began, I've already landed 4 new clients. Pretty wild." },
    { n: "Jorian Hoover", r: "Founder", d: "Nov 14, 2025", q: "I came into the accelerator with a 1.7K member newsletter, but unsure how to make it a key part of my coaching business. Nathan's accelerator not only taught me how to grow the newsletter, but also how to help it drive the rest of my business. I cannot recommend his accelerator highly enough - Nathan is so highly skilled when it comes to newsletters." },
    { n: "Michelle Salater", r: "Founder", d: "Nov 12, 2025", q: "I joined the Newsletter Accelerator because I'd hit a wall. I had plenty of data from my newsletter — open rates, lead sources, etc — but I didn't really know what to do with it. I knew I was doing well, but I couldn't tell which efforts were really moving the needle, or how to make smart decisions about things like sponsorship pricing or which lead sources to double down on. Honestly, I was stuck in analysis paralysis.\n\nFor 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. The frameworks and examples were incredibly helpful, and the guest speakers were amazing — they showed exactly how they applied these systems in their own businesses." },
    { 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: "Simona", r: "Founder", d: "Nov 9, 2025", q: "This accelerator gives you all the knowledge you need, all the resources you need to start your own newsletter, and successfully monetise this! I'd recommend to take it while at the same time applying things in practice since you will get a lot of info!" },
    { 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: "Jason Yeh", r: "Co-Founder", d: "Aug 8, 2025", q: "This has been so helpful for our team to launch our Newsletter with all the best practice learned from EXPERTS. Thanks!!" },
    { n: "Aseeyah Shahid", r: "Marketing Strategist & Creator", d: "Jul 31, 2025", q: "I wanted to start my newsletter, but I kept wondering how to properly do it. Having the resources provided and knowing that as a growing creator I can start a newsletter and get paid from the start is amazing. I have loved learning and have gained so much in this one-month cohort." },
    { n: "Michelle Lohrli", r: "Owner / Founder", d: "Jul 31, 2025", q: "I'm starting from the ground up. My agency serves local small businesses to adopt AI systems, and I'm looking to add a local newsletter to build credibility and community.\n\nNathan is delivering a masterclass for newbies like me to get this engine set up the right way. With all the noise from so-called \"gurus\" in this space, it can be overwhelming. This Acccelerator lays it out in a well-structured system that novices like me can easily implement but also manages to deliver more advanced tactics for the experienced ones. And the best part? It's FREE! I still cannot believe that Nathan did not charge a single penny for the valuable information he's sharing. I would gladly pay for this kind of intel in a heartbeat!" },
    { n: "Nkiru Asika", r: "Consultant & Trainer", d: "Jul 31, 2025", q: "I entered the Accelerator pre-launch and was stuck tryimg to figure out how to get started. Nathan has given me a clear roadmap that's allowed me to gain traction. I'm currently working on my sign-up flow and will launch within the next two weeks. Beyond the launch stage, the Accelerator has given me the knowledge and tools to grow a sustainable newsletter. It's been an amazing learning experience and I'm grateful to Nathan for his time and generosity." },
    { n: "Nathan Kochera", r: "Founder", d: "Jul 30, 2025", q: "Going into the newsletter accelerator, I had doubts as to whether or not I had selected the right niche and how to know when I had content market fit. The Newsletter Accelerator gave me the tools to confidently answer these questions. What I have learned through the newsletter accelerator has been invaluable for the future of my newsletter." },
    { n: "Andrew Harwood", r: "Managing Director", d: "Jul 29, 2025", q: "I have always thought about writing a newsletter as a engagement tool, but always thought it was going to be too difficult or time consuming. The accelerator has completely changed my thinking and I am not only looking at the newsletter helping my business, but actually becoming a business. Total shift in focus. Can't thank Nathan enough for opening my eyes to the possibilities. He should be considered a Jedi Master." },
    { n: "Dario Chincha", r: "Creator", d: "Jul 29, 2025", q: "I was struggling with positioning for my newsletter, being one of many in the AI niche. The Accelerator sessions helped me reason through what makes my content different from everyone else and how to really lean into it. Massive value here." },
    { n: "Samy", r: "GM", d: "Aug 3, 2025", q: "My biggest challenge before the Accelerator was clarifying my newsletter's positioning and understanding its business model.\n\nThe program was incredibly helpful in addressing this. I gained crucial insights, especially from the sessions on scaling with paid ads, closing sponsorship deals, and launching products/services. These practical strategies were exactly what I needed.\n\nThe Accelerator has given me a much clearer vision and a solid foundation for building a profitable newsletter business. It's been an invaluable experience!" },
    { n: "Reese Oxner", r: "Product Manager", d: "Jul 31, 2025", q: "Creating the right niche and finding our audience. The accelerator gave us a complete bootcamp on how to create a newsletter, reach an audience, niche our content and monetize." },
    { n: "Larry Herrin", r: "Daylight Studios", d: "Jul 29, 2025", q: "Since I'm just starting out on my newsletter business, my most important missing piece was how to begin: how to get from zero subscribers to 1,000+ subs.\nI felt that the accelerator has been extremely helpful in providing useful, actionable steps to do that very thing. Thanks to Nathan and the team for giving me a clear path to success." },
    { n: "Gina", r: "Attorney", d: "Jul 28, 2025", q: "The Newsletter Accelerator is the real deal.\n\nAs someone just starting to write online, I found the early weeks of this program packed with exactly what I needed—how to set up a newsletter, structure a compelling signup flow, and build the foundation for growth.\n\nThe session on organic growth gave me a clear, actionable roadmap. The paid acquisition strategies were a goldmine—especially for understanding how to attract subscribers with real intent. The insights on newsletter design, category selection, and positioning were also top-tier.\n\nI'm especially impressed with Nathan May's leadership. He's not just teaching theory—he's built and scaled newsletters across major brands and brings that hands-on experience into every session.\n\nIf you're serious about building a newsletter business, this accelerator gives you both the strategy and tools to move fast. Highly recommend it." },
    { n: "Felicia Lekan-Salami", r: "Founder", d: "Jul 28, 2025", q: "Early this year I was looking to start a newsletter and I had no clue how to beyond registering on beehiiv, I attended the summit, met Nathan and what is possible opened up to me in dimensions I could have never imagined before. The last few weeks on the Newsletter accelerator has been amazing, I have learnt a lot of valuable content relevant and impactful to building out our leadership and executive insight news letter on beehiiv - thanks for the opportunity 💎 and I know we are building something great and of value with ExecEdge ✅" },
    { n: "William Cory", r: "Owner, Writer, Editor, etc., etc.", d: "Jul 28, 2025", q: "Nowhere else have I ever found such a great education about publishing a newsletter! (I've looked.) I've lost time and money trying to do a newsletter in the past, and now I know exactly why: I didn't know basic methods and didn't have a good Email service Provider. The Accelerator course is absolutely essential with critical information, insight and experience from a man (Nathan May) who totally knows the business and provides detailed analysis and information. Linking his expertise with Beehiiv.com's services just might make publishing a newsletter a foolproof enterprise. I am highly confident, now have a workable plan, and know what to avoid. Thanks Nathan and Beehiiv.com." },
    { n: "Kerrie", r: "Founder", d: "Jul 27, 2025", q: "I'm starting from scratch with my newsletter and getting very clear metrics about what success in the newsletter world looks like. This experience has changed how I think about building." },
    { n: "Kaitlyn Arford", r: "Writer and Founder", d: "Jul 27, 2025", q: "This accelerator was a crash course in thinking strategically about how to deliver value to your audience while creating a sustainable business. Being surrounded by so many professionals in the newsletter space was super encouraging. I recommend this accelerator to anyone looking to level up!" },
    { n: "Juanma from Creating Lightly", r: "Founder", d: "Jul 27, 2025", q: "The main thing I wanted to improve from my newsletter was focus. I felt it was a bit all over the place, and I was right. The accelerator helped me get more clarity on what's relevant to focus on, and what are things that don't really move the needle, so I spend time in what's important." },
    { n: "Lena Dal Santo", r: "Public affairs consultant", d: "Jul 27, 2025", q: "I was still trying to figure out the right niche and whether the focus I was thinking of pursuing was possible. And through questions with Nathan at one of the office hours, plus some of the examples he's given, plus the presentations on content, organic growth, community building to an extent, choosing a niche, I realized that it's okay to have a specialized, very B2B niche, and I learned about tactics like how DMing people directly on LinkedIn might be a great way to build a quality subscriber base and readership. Also, Nathan I think it's awesome how much free content you are giving out and just your general disposition and character on the webinar. Hard to find both high quality and just nice people out there nowadays! Keep being you and doing you! - Lena" },
    { n: "Ahnaf Mafi", r: "Newsletter creator", d: "Jul 27, 2025", q: "I am a beginner so my main problem was choosing a niche. I had some ideas for my niche but they were all saturated or low demand. The accelerator helped me niche down or go horizontal and also analyze the demand for niches. Also, really grateful for breaking down other successful newsletter operators strategies." },
  ];
const HALF = Math.ceil(ALL_REVIEWS.length / 2);
const FIRST_HALF = ALL_REVIEWS.slice(0, HALF);
const SECOND_HALF = ALL_REVIEWS.slice(HALF);

// 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;
}

// 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);
}

/* ------------ TOP STATUS ------------ */
function TopBar({ accent, showCountdown, event }) {
  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: '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>
        {showCountdown && (
          <div className="topbar-countdown" style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <span className="live-tab" style={{
              display: 'inline-flex', alignItems: 'center', gap: 7,
              padding: '5px 11px', borderRadius: 999,
              border: `1px solid ${accent.hex}`
            }}>
              <span style={{
                width: 7, height: 7, borderRadius: '50%',
                background: '#fff', boxShadow: '0 0 8px rgba(255,255,255,0.8)'
              }} />
              <span className="mono" style={{
                fontSize: 10, letterSpacing: '0.2em', color: '#fff', fontWeight: 700
              }}>
                LIVE&nbsp;EVENT
              </span>
            </span>
            <span style={{
              fontFamily: "'Geist', system-ui, sans-serif",
              fontSize: 14, color: '#f5f5f5', fontWeight: 600, letterSpacing: '-0.01em'
            }}>
              {window.FeedEvent.fmt.shortHeader(event)}
            </span>
          </div>
        )}
      </div>
      <style>{`
        @keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: 0.3 } }
        @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;
        }
        @media (max-width: 720px) {
          .topbar-countdown { display: none !important; }
        }
      `}</style>
    </div>
  );
}

/* ------------ HERO ------------ */
function Hero({ tweaks, accent, event }) {
  const c = useEventCountdown(event);
  const headlines = {
    million: <>Now watch the video below <span style={{
      background: accent.gradient || accent.hex,
      WebkitBackgroundClip: 'text', backgroundClip: 'text',
      WebkitTextFillColor: 'transparent', color: 'transparent'
    }}>to claim your gift.</span></>,
    decision: <>You just made a <span style={{ color: accent.hex }}>$10K/month</span> decision.</>,
    revenue: <>Stop chasing subscribers.<br />Start <span style={{ color: accent.hex }}>stacking revenue.</span></>,
  };

  return (
    <section className="hero-section" style={{
      position: 'relative',
      background: '#0a0a0a',
      minHeight: '100svh',
      display: 'flex',
      flexDirection: 'column',
      justifyContent: 'center',
      paddingTop: 48, paddingBottom: 48,
      overflow: 'hidden',
      borderBottom: '1px solid #1a1a1a'
    }}>
      {/* LIGHT-BEHIND-VIDEO backdrop */}
      <div className="hero-backdrop" style={{ position: 'absolute', inset: 0, overflow: 'hidden', pointerEvents: 'none' }}>
        {/* 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: 'radial-gradient(ellipse 90% 80% at 50% 50%, #000 35%, transparent 80%)',
          WebkitMaskImage: 'radial-gradient(ellipse 90% 80% at 50% 50%, #000 35%, transparent 80%)'
        }} />
        {/* large soft halo blooming out from behind the video */}
        <div style={{
          position: 'absolute', top: '60%', left: '50%', transform: 'translate(-50%, -50%)',
          width: 1700, height: 1200,
          background: `radial-gradient(ellipse at center, ${accent.hex}aa 0%, ${accent.hex}55 30%, ${accent.hex}1f 54%, transparent 76%)`,
          filter: 'blur(80px)'
        }} />
        {/* tighter, brighter core glow right behind the frame */}
        <div style={{
          position: 'absolute', top: '58%', left: '50%', transform: 'translate(-50%, -50%)',
          width: 1100, height: 720,
          background: `radial-gradient(ellipse at center, ${accent.hex}aa 0%, ${accent.hex}3a 45%, transparent 70%)`,
          filter: 'blur(46px)'
        }} />
        {/* hot center kiss for extra punch */}
        <div style={{
          position: 'absolute', top: '52%', left: '50%', transform: 'translate(-50%, -50%)',
          width: 680, height: 400,
          background: `radial-gradient(ellipse at center, ${accent.hex}cc 0%, transparent 70%)`,
          filter: 'blur(60px)'
        }} />
        {/* edge vignette to deepen the corners */}
        <div style={{
          position: 'absolute', inset: 0,
          background: 'radial-gradient(ellipse 80% 84% at 50% 58%, transparent 44%, rgba(0,0,0,0.5) 82%, #000 100%)'
        }} />
        <style>{`
          @media (max-width: 720px) {
            .hero-backdrop { opacity: 0.35; }
          }
        `}</style>
      </div>
      <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
      }} />

      <div style={{
        position: 'relative', zIndex: 2,
        maxWidth: 1280, margin: '0 auto', padding: '0 32px'
      }}>

        {/* MOBILE-ONLY LIVE EVENT INFO */}
        <div className="hero-mobile-event-info" style={{ display: 'none', justifyContent: 'center', alignItems: 'center', gap: 12, marginBottom: 20 }}>
          <span className="live-tab" style={{
            display: 'inline-flex', alignItems: 'center', gap: 7,
            padding: '5px 11px', borderRadius: 999,
            border: `1px solid ${accent.hex}`
          }}>
            <span style={{ width: 7, height: 7, borderRadius: '50%', background: '#fff', boxShadow: '0 0 8px rgba(255,255,255,0.8)' }} />
            <span className="mono" style={{ fontSize: 10, letterSpacing: '0.2em', color: '#fff', fontWeight: 700 }}>LIVE&nbsp;EVENT</span>
          </span>
          <span style={{ fontFamily: "'Geist', system-ui, sans-serif", fontSize: 14, color: '#f5f5f5', fontWeight: 600, letterSpacing: '-0.01em' }}>
            {window.FeedEvent.fmt.shortHeader(event)}
          </span>
        </div>
        <style>{`
          @media (max-width: 720px) {
            .hero-mobile-event-info { display: flex !important; margin-bottom: 80px !important; }
            .hero-section { justify-content: flex-start !important; padding-top: 16px !important; }
          }
        `}</style>

        {/* SUB-HEADLINE */}
        <div style={{
          textAlign: 'center', marginBottom: 28,
          display: 'flex', alignItems: 'center', justifyContent: 'center'
        }}>
          <span className="hero-subhead" style={{
            fontSize: 'clamp(20px, 2.2vw, 30px)', letterSpacing: '-0.01em',
            fontWeight: 800, lineHeight: 1.1,
            background: 'linear-gradient(135deg, #7c3aed 0%, #a855f7 48%, #d946ef 100%)',
            WebkitBackgroundClip: 'text', backgroundClip: 'text',
            WebkitTextFillColor: 'transparent', color: 'transparent'
          }}>
            You're registered for the LIVE newsletter training
          </span>
        </div>

        {/* HEADLINE */}
        <style>{`
          @media (max-width: 720px) {
            .hero-h1 { font-size: 46px !important; line-height: 0.98 !important; letter-spacing: -0.03em !important; }
            .hero-subhead { font-size: 22px !important; }
          }
        `}</style>
        <h1 className="hero-h1" style={{
          fontSize: 'clamp(48px, 7vw, 110px)',
          lineHeight: 0.94,
          letterSpacing: '-0.035em',
          margin: '0 auto',
          maxWidth: 1240,
          fontFamily: "'Archivo', 'Geist', system-ui, sans-serif",
          fontWeight: 800,
          textWrap: 'balance',
          color: '#ffffff',
          textAlign: 'center'
        }}>
          {headlines[tweaks.headline] || headlines.million}
        </h1>

        <div style={{ height: 32 }} />

        <VideoFrame accent={accent} />

        {/* CTA */}
        <div style={{ marginTop: 28, display: 'flex', justifyContent: 'center' }}>
          <button
            data-cal-button
            onClick={() => {
              window.FeedTracking && window.FeedTracking.trackEvent('calendar_click', { source: 'hero' }, 'post_reg');
              const el = document.querySelector('[data-cal-cta]');
              if (el) el.scrollIntoView({ behavior: 'smooth', block: 'center' });
            }}
            style={{
              position: 'relative',
              padding: '20px 36px',
              background: accent.gradient || accent.hex,
              color: '#fff',
              border: 'none',
              borderRadius: 8,
              fontSize: 15,
              fontWeight: 700,
              letterSpacing: '0.14em',
              textTransform: 'uppercase',
              cursor: 'pointer',
              fontFamily: 'inherit',
              display: 'inline-flex',
              alignItems: 'center',
              gap: 12,
              boxShadow: `0 18px 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 24px 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 18px 50px -10px ${accent.hex}88, 0 0 0 1px ${accent.hex}55, inset 0 1px 0 rgba(255,255,255,0.2)`;
            }}
          >
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4">
              <rect x="3" y="5" width="18" height="16" rx="2" />
              <path d="M3 9h18" />
              <path d="M8 3v4M16 3v4" />
              <path d="M12 13v4M10 15h4" />
            </svg>
            Add Live Training to Calendar
          </button>
        </div>
      </div>
    </section>
  );
}

// Hook: loads the active post-reg video from Supabase, refreshes live via Realtime
function useActiveVideo(placement) {
  const [video, setVideo] = useState(null);
  useEffect(() => {
    let cancelled = false;
    window.FeedVideo.loadActive(placement).then(v => { if (!cancelled) setVideo(v); });
    const unsub = window.FeedVideo.onChange(placement, v => { if (!cancelled) setVideo(v); });
    return () => { cancelled = true; unsub && unsub(); };
  }, [placement]);
  return video;
}

function VideoFrame({ accent }) {
  const videoRef = React.useRef(null);
  // Reset milestone state when video source changes (admin swap)
  const firedMilestones = React.useRef(new Set());
  const hasFiredPlay = React.useRef(false);
  const [hasStarted, setHasStarted] = useState(false);

  // The active post-reg video record from Supabase
  const active = useActiveVideo('post_reg');
  // Fall back to bundled file if Supabase is unreachable
  const srcUrl = (active && active.src_url) || 'post-reg-video.mp4';
  const videoMeta = active
    ? { video_id: active.id, video_placement: active.placement, video_title: active.title }
    : { video_id: null, video_placement: 'post_reg', video_title: null };

  // Reset state if the video record swaps (admin set a new active one mid-session)
  useEffect(() => {
    firedMilestones.current = new Set();
    hasFiredPlay.current = false;
    setHasStarted(false);
  }, [active && active.id]);

  function onPlay() {
    setHasStarted(true);
    if (hasFiredPlay.current) return;
    hasFiredPlay.current = true;
    window.FeedTracking && window.FeedTracking.trackEvent('video_play', {
      duration_seconds: videoRef.current ? videoRef.current.duration : null,
      ...videoMeta,
    }, 'post_reg');
  }

  function handleOverlayClick() {
    const v = videoRef.current;
    if (!v) return;
    const p = v.play();
    if (p && typeof p.catch === 'function') p.catch(() => {});
  }

  function onTimeUpdate() {
    const v = videoRef.current;
    if (!v || !v.duration || isNaN(v.duration)) return;
    const pct = (v.currentTime / v.duration) * 100;
    const milestone = Math.floor(pct / 5) * 5;
    if (milestone < 5) return;
    if (firedMilestones.current.has(milestone)) return;
    for (let m = 5; m <= milestone; m += 5) {
      if (!firedMilestones.current.has(m)) {
        firedMilestones.current.add(m);
        window.FeedTracking && window.FeedTracking.trackEvent('video_progress', {
          percent: m,
          current_seconds: Math.round(v.currentTime),
          total_seconds: Math.round(v.duration),
          ...videoMeta,
        }, 'post_reg');
      }
    }
  }

  function onEnded() {
    const v = videoRef.current;
    const totalSec = v ? Math.round(v.duration) : null;
    for (let m = 5; m <= 100; m += 5) {
      if (!firedMilestones.current.has(m)) {
        firedMilestones.current.add(m);
        window.FeedTracking && window.FeedTracking.trackEvent('video_progress', {
          percent: m,
          current_seconds: totalSec,
          total_seconds: totalSec,
          ...videoMeta,
        }, 'post_reg');
      }
    }
    window.FeedTracking && window.FeedTracking.trackEvent('video_complete', videoMeta, 'post_reg');
  }

  return (
    <div style={{
      borderRadius: 6,
      overflow: 'hidden',
      boxShadow: `0 60px 140px -40px rgba(0,0,0,0.9), 0 0 0 1px #2a2a2a, 0 0 80px -10px ${accent.hex}22`,
      background: '#000',
      maxWidth: 960,
      margin: '0 auto',
      position: 'relative'
    }}>
      <video
        // Key on the URL so swapping the src cleanly remounts the element
        key={srcUrl}
        ref={videoRef}
        controls={hasStarted}
        playsInline
        onPlay={onPlay}
        onTimeUpdate={onTimeUpdate}
        onEnded={onEnded}
        style={{ display: 'block', width: '100%', height: 'auto' }}
      >
        <source src={srcUrl} type="video/mp4" />
      </video>
      {!hasStarted && (
        <button
          type="button"
          onClick={handleOverlayClick}
          aria-label="Play video"
          style={{
            position: 'absolute',
            inset: 0,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            background: 'radial-gradient(ellipse at center, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.6) 100%)',
            border: 'none',
            padding: 0,
            cursor: 'pointer',
            outline: 'none',
            zIndex: 2,
          }}
        >
          <span style={{
            width: 'clamp(64px, 14vw, 168px)',
            height: 'clamp(64px, 14vw, 168px)',
            borderRadius: '50%',
            background: 'linear-gradient(135deg, #7c3aed 0%, #a855f7 48%, #d946ef 100%)',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            boxShadow: `0 30px 80px -10px rgba(168,85,247,0.6), 0 0 0 6px rgba(168,85,247,0.18), 0 0 0 14px rgba(168,85,247,0.08)`,
            transition: 'transform 160ms ease, box-shadow 160ms ease',
          }}
          onMouseEnter={e => { e.currentTarget.style.transform = 'scale(1.06)'; }}
          onMouseLeave={e => { e.currentTarget.style.transform = 'scale(1)'; }}
          >
            <svg width="40%" height="40%" viewBox="0 0 24 24" fill="#fff" aria-hidden="true" style={{ marginLeft: '8%' }}>
              <path d="M6 4.5v15a1 1 0 0 0 1.55.83l11-7.5a1 1 0 0 0 0-1.66l-11-7.5A1 1 0 0 0 6 4.5z" />
            </svg>
          </span>
        </button>
      )}
    </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>
  );
}

/* ------------ NATHAN'S CONTRIBUTIONS (minimal, bold) ------------ */
function FeaturedCaseStudies({ accent }) {
  const rows = [
    {
      brand: 'beehiiv',
      person: 'Tyler Denk',
      role: 'Co-Founder & CEO',
      location: 'New York, NY',
      stats: '50,000+ newsletters · $250M valuation',
      contribution: 'Co-hosts the Personal IPO podcast with beehiiv. Advises on the operator-side of platform growth.',
      quote: [
        { t: '' },
        { t: 'Cleanest growth diagnostician in the newsletter space', hi: true },
        { t: ". We trust him with the things we don't trust anyone else with." },
      ],
    },
    {
      brand: 'The Rundown',
      person: 'Rowan Cheung',
      role: 'Founder',
      location: 'Vancouver, BC',
      stats: '2M+ subscribers · $7M projected ARR',
      contribution: "Inside the founder conversations as The Rundown scaled past 2M subscribers.",
      quote: [
        { t: 'Almost everything I know about ' },
        { t: 'scaling a newsletter', hi: true },
        { t: ", I've sharpened in conversations with Nathan." },
      ],
    },
    {
      brand: 'The Neuron',
      person: 'Pete Huang & Noah Edelman',
      role: 'Co-Founders',
      location: 'New York, NY',
      stats: '500K+ subs · Acquired by TechnologyAdvice',
      contribution: "Ran point on paid acquisition during The Neuron's first 18 months.",
      quote: [
        { t: "We grew The Neuron with Nathan's playbook. " },
        { t: 'Half a million subscribers, a successful acquisition', hi: true },
        { t: ' — all under eighteen months.' },
      ],
    },
    {
      brand: 'Justin Welsh',
      person: 'Justin Welsh',
      role: 'Solo Operator',
      location: 'New York, NY',
      stats: '700K+ audience · $10M+ solo',
      contribution: 'Mutual influence on solo-operator audience monetization.',
      quote: [
        { t: "He doesn't sell email tactics. He sells " },
        { t: 'a different business model with the email layer attached', hi: true },
        { t: '.' },
      ],
    },
  ];

  return (
    <section style={{
      background: '#0a0a0a',
      padding: '110px 32px 130px',
      position: 'relative',
      borderTop: '1px solid #1a1a1a',
    }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <h2 style={{
          fontSize: 'clamp(32px, 4.4vw, 64px)', lineHeight: 1.08, margin: '0 0 90px',
          letterSpacing: '-0.03em', fontWeight: 600, textWrap: 'balance', color: '#ffffff',
          maxWidth: 1180
        }}>
          Here are four huge operators Nathan has personally advised, scaled, or sold alongside,
          together representing{' '}
          <span style={{ color: accent.hex, fontWeight: 600 }}>millions in newsletter revenue.</span>
        </h2>

        <div className="nc-rows">
          {rows.map((r, i) => (
            <article key={i} className="nc-row">
              <div className="nc-head">
                <h3 className="nc-brand">{r.brand}</h3>
                <div className="nc-stats">{r.stats}</div>
              </div>

              <div className="nc-body">
                <div className="nc-contrib">
                  <div className="nc-label" style={{ color: accent.hex }}>Nathan's contribution</div>
                  <p className="nc-contrib-text">{r.contribution}</p>
                </div>
                <blockquote className="nc-quote" style={{ borderLeftColor: accent.hex }}>
                  <p className="nc-quote-text">
                    &ldquo;
                    {r.quote.map((p, idx) => (
                      p.hi
                        ? <span key={idx} className="nc-hi" style={{ color: accent.hex }}>{p.t}</span>
                        : <span key={idx}>{p.t}</span>
                    ))}
                    &rdquo;
                  </p>
                  <div className="nc-cite">
                    <span className="nc-cite-name">{r.person}</span>
                    <span className="nc-cite-sep">·</span>
                    <span className="nc-cite-role">{r.role}, {r.brand}</span>
                  </div>
                </blockquote>
              </div>
            </article>
          ))}
        </div>
      </div>

      <style>{`
        .nc-rows {
          display: flex;
          flex-direction: column;
          border-top: 1px solid #2a2a2a;
        }
        .nc-row {
          padding: 44px 0 48px;
          border-bottom: 1px solid #2a2a2a;
        }

        .nc-meta {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 22px;
          font-family: 'Geist Mono', ui-monospace, monospace;
          font-size: 11px;
          letter-spacing: 0.22em;
          text-transform: uppercase;
        }
        .nc-idx { color: #525252; }
        .nc-loc { color: #525252; }

        .nc-head {
          display: flex;
          align-items: baseline;
          justify-content: space-between;
          gap: 32px;
          flex-wrap: wrap;
          margin-bottom: 38px;
        }
        .nc-brand {
          margin: 0;
          font-size: clamp(56px, 9vw, 132px);
          line-height: 0.9;
          letter-spacing: -0.045em;
          font-weight: 700;
          color: #ffffff;
        }
        .nc-stats {
          font-family: 'Geist Mono', ui-monospace, monospace;
          font-size: 13px;
          letter-spacing: 0.14em;
          color: #8a8a8a;
          text-transform: uppercase;
          white-space: nowrap;
          padding-bottom: 14px;
        }

        .nc-body {
          display: grid;
          grid-template-columns: minmax(0, 1fr);
          gap: 24px;
          align-items: start;
        }

        .nc-label {
          font-family: 'Geist Mono', ui-monospace, monospace;
          font-size: 11px;
          letter-spacing: 0.22em;
          text-transform: uppercase;
          font-weight: 600;
          margin-bottom: 14px;
        }
        .nc-contrib-text {
          margin: 0;
          font-size: clamp(22px, 2.2vw, 30px);
          line-height: 1.32;
          letter-spacing: -0.018em;
          color: #f5f5f5;
          font-weight: 500;
          text-wrap: balance;
        }

        .nc-quote {
          margin: 0;
          padding-left: 28px;
          border-left: 2px solid currentColor;
        }
        .nc-quote-text {
          margin: 0 0 16px;
          font-family: 'Geist', system-ui, sans-serif;
          font-size: clamp(22px, 1.9vw, 28px);
          line-height: 1.32;
          letter-spacing: -0.018em;
          color: #ffffff;
          font-style: normal;
          font-weight: 700;
        }
        .nc-quote-text .nc-hi { font-weight: 700; }
        .nc-cite {
          font-family: 'Geist Mono', ui-monospace, monospace;
          font-size: 11px;
          letter-spacing: 0.14em;
          text-transform: uppercase;
        }
        .nc-cite-name { color: #f5f5f5; font-weight: 700; }
        .nc-cite-sep  { color: #444; margin: 0 8px; }
        .nc-cite-role { color: #8a8a8a; }

        @media (max-width: 840px) {
          .nc-row { padding: 36px 0 38px; }
          .nc-head { margin-bottom: 28px; }
          .nc-stats { padding-bottom: 0; }
          .nc-body {
            grid-template-columns: 1fr;
            gap: 32px;
          }
        }
      `}</style>
    </section>
  );
}

/* ------------ BIG REVIEW WALL (light, masonry) ------------ */
function ReviewWall({ accent }) {
  const reviews = FIRST_HALF;

  // pleasant pastel palette for letter avatars (deterministic per name)
  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>

        {/* masonry */}
        <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>
  );
}
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: '2M+ readers · $7M projected' },
    { name: 'The Neuron', sub: '500K+ readers · acquired by TechnologyAdvice' },
    { name: 'beehiiv', sub: 'Tyler Denk, founder' },
    { name: 'TLDR', sub: '5M readers' },
    { name: 'Industry Dive', sub: '3.3M · $525M sale' },
    { 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 room is different" accent={accent} />
        <div style={{
          display: 'grid', gridTemplateColumns: 'minmax(0, 2.1fr) minmax(0, 1fr)',
          gap: 80, alignItems: 'end', marginBottom: 60
        }}>
          <h2 style={{
            fontSize: 'clamp(40px, 5.6vw, 88px)', lineHeight: 0.98, margin: 0,
            letterSpacing: '-0.035em', textWrap: 'balance', fontWeight: 600, color: '#ffffff'
          }}>
            You didn't sign up for a guru's webinar.<br />
            <span style={{ color: '#525252' }}>You signed up for the room where</span><br />
            <span className="" style={{ fontWeight: 600, color: accent.hex }}>the operators actually live.</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>
    </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="02" 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 className="" 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", roman: "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", roman: "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", roman: "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 personal 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' }}>
        <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">
              {/* Purple radial glow */}
              <div className="pillar-glow" style={{ background: accent.hex }} />
              {/* Top accent line */}
              <div className="pillar-topline" style={{
                background: `linear-gradient(90deg, ${accent.hex} 0%, ${accent.hex}44 35%, transparent 80%)`
              }} />

              <div className="pillar-grid">
                {/* Body column */}
                <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: minmax(0, 1fr);
            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="04" 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
        }}>
          <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 className="" 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>
    </section>
  );
}

/* ------------ MORE TESTIMONIALS (bento, hero-styled) ------------ */
// Every card uses the hero treatment: dark base, purple radial glow, big purple
// quote mark, bold sans-serif copy, mono attribution. Each quote carries one or
// two phrases highlighted in purple bold for at-a-glance impact.
function Letters({ accent }) {
  const cards = [
    // HERO (2x2)
    {
      kind: 'quote', w: 2, h: 2, hero: true,
      parts: [
        { t: "I came into the accelerator with a newsletter concept but I feel like I'm leaving with a " },
        { t: 'real plan for a newsletter business', hi: true },
        { t: '.' },
      ],
      name: 'Amara Nwaigwe', role: 'Principal',
    },
    // STAT-AS-QUOTE
    {
      kind: 'quote', w: 2, h: 1,
      parts: [
        { t: 'I saw a ' },
        { t: '71% increase in subscribers', hi: true },
        { t: ', but the bigger shift was internal.' },
      ],
      name: 'Jessica Brown', role: 'Founder',
    },
    // STAT-AS-QUOTE
    {
      kind: 'quote', w: 2, h: 1,
      parts: [
        { t: "I turned on paid subscriptions and I'm already at around " },
        { t: '$6K ARR in about two months', hi: true },
        { t: '.' },
      ],
      name: 'Daria Cupareanu', role: 'Owner',
    },
    // SHORT PUNCH
    {
      kind: 'quote', w: 2, h: 1,
      parts: [
        { t: 'He should be considered a ' },
        { t: 'Jedi Master', hi: true },
        { t: '.' },
      ],
      name: 'Andrew Harwood', role: 'Managing Director',
    },
    // STAT-AS-QUOTE
    {
      kind: 'quote', w: 2, h: 1,
      parts: [
        { t: 'He helped me grow from ' },
        { t: '500 to 1,300 subscribers', hi: true },
        { t: ' and opened up ' },
        { t: '$80K in project opportunities', hi: true },
        { t: '.' },
      ],
      name: 'Neza L.', role: 'Technical Expert',
    },
    // STORY (2x2)
    {
      kind: 'story', w: 2, h: 2,
      label: 'The plateau-breaker',
      parts: [
        { t: "For months, I'd been hovering around " },
        { t: '$1,000 a month in revenue', hi: true },
        { t: ', and I knew something had to change. The Accelerator gave me exactly what I needed — ' },
        { t: 'clarity', hi: true },
        { t: '. I learned what to track, how to track it properly, and how to use the numbers to make ' },
        { t: 'confident business decisions', hi: true },
        { t: '.' },
      ],
      name: 'Michelle Salater', role: 'Founder',
    },
    // PUNCH
    {
      kind: 'quote', w: 2, h: 1,
      parts: [
        { t: "Nathan's " },
        { t: 'wisdom is unmatched', hi: true },
        { t: ". You won't find anyone with the depth and passion he brings to the newsletter game." },
      ],
      name: 'Vernon T. Foster II', role: 'Founder',
    },
    // PUNCH
    {
      kind: 'quote', w: 2, h: 1,
      parts: [
        { t: 'The Newsletter Accelerator is the ' },
        { t: 'real deal', hi: true },
        { t: '.' },
      ],
      name: 'Gina', role: 'Attorney',
    },
    // STAT-AS-QUOTE
    {
      kind: 'quote', w: 2, h: 1,
      parts: [
        { t: 'In the last three weeks since I began, I\'ve already ' },
        { t: 'landed 4 new clients', hi: true },
        { t: '.' },
      ],
      name: 'Daria Cupareanu', role: 'Owner',
    },
    // PUNCH
    {
      kind: 'quote', w: 2, h: 1,
      parts: [
        { t: 'The accelerator gave me the clarity, structure, and systems to ' },
        { t: 'run my newsletter like a real business', hi: true },
        { t: '.' },
      ],
      name: 'Polo Aguirre', role: 'Founder',
    },
  ];

  return (
    <section style={{
      background: '#0a0a0a', padding: '120px 32px 130px',
      position: 'relative', overflow: 'hidden',
      borderTop: '1px solid #1a1a1a'
    }}>
      <div style={{
        position: 'absolute', top: 0, left: 0, right: 0,
        height: 1,
        background: `linear-gradient(90deg, transparent 5%, ${accent.hex}55 50%, transparent 95%)`
      }} />
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <h2 style={{
          fontSize: 'clamp(40px, 5.6vw, 84px)', lineHeight: 0.98, margin: '0 0 72px',
          letterSpacing: '-0.035em', fontWeight: 600, textWrap: 'balance', color: '#ffffff',
          maxWidth: 1180
        }}>
          More people like you that{' '}
          <span style={{ color: accent.hex, fontWeight: 400 }}>found newsletter success.</span>
        </h2>

        <div className="bento-grid">
          {cards.map((c, i) => (
            <BentoCard key={i} c={c} accent={accent} />
          ))}
        </div>
      </div>

      <style>{`
        .bento-grid {
          display: grid;
          grid-template-columns: repeat(4, minmax(0, 1fr));
          grid-auto-rows: 280px;
          grid-auto-flow: dense;
          gap: 20px;
        }

        .bento-card {
          position: relative;
          background: #0d0d0d;
          border: 1px solid #1f1f1f;
          border-radius: 12px;
          padding: 44px 44px 36px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          gap: 28px;
          overflow: hidden;
          transition: border-color 220ms, transform 220ms;
        }
        .bento-card:hover { border-color: #2a2a2a; transform: translateY(-2px); }

        /* Purple radial glow in upper-right of every card */
        .bento-card::before {
          content: '';
          position: absolute;
          top: -40%; right: -15%;
          width: 75%; aspect-ratio: 1;
          border-radius: 50%;
          filter: blur(70px);
          opacity: 0.30;
          pointer-events: none;
          z-index: 0;
        }
        .bento-card > * { position: relative; z-index: 1; }

        /* Quote mark */
        .bento-mark {
          font-family: 'Instrument Serif', Georgia, serif;
          font-size: 104px;
          line-height: 0.5;
          font-weight: 400;
          display: block;
          height: 42px;
        }

        /* Quote text — bold sans, sized by card */
        .bento-q {
          font-family: 'Geist', system-ui, sans-serif;
          font-weight: 500;
          color: #ffffff;
          letter-spacing: -0.015em;
          margin: 0;
          text-wrap: balance;
        }
        .bento-q .hi {
          font-weight: 700;
          letter-spacing: -0.018em;
        }

        /* Sizes by card span */
        .bento-card.size-hero .bento-q {
          font-size: clamp(32px, 3vw, 48px);
          line-height: 1.14;
        }
        .bento-card.size-hero .bento-mark { font-size: 124px; height: 50px; }
        .bento-card.size-hero { padding: 56px 56px 44px; }

        .bento-card.size-md .bento-q {
          font-size: clamp(24px, 1.9vw, 32px);
          line-height: 1.22;
        }

        .bento-card.size-story .bento-q {
          font-size: clamp(20px, 1.55vw, 26px);
          line-height: 1.42;
          font-weight: 400;
          color: #d4d4d4;
          text-wrap: pretty;
        }
        .bento-card.size-story { padding: 52px; }

        .bento-story-label {
          font-family: 'Geist Mono', ui-monospace, monospace;
          font-size: 12px;
          letter-spacing: 0.22em;
          text-transform: uppercase;
          font-weight: 600;
          margin-bottom: 22px;
          display: inline-block;
        }

        /* Attribution */
        .bento-cite {
          display: flex; align-items: center; gap: 12px;
          font-family: 'Geist Mono', ui-monospace, monospace;
          font-size: 11px;
          letter-spacing: 0.18em;
          text-transform: uppercase;
          color: #8a8a8a;
          margin-top: auto;
          padding-top: 20px;
        }
        .bento-cite-dash { font-weight: 700; }
        .bento-cite-name { color: #f5f5f5; font-weight: 700; }
        .bento-cite-sep  { color: #333; }

        /* Spans */
        .span-w-2 { grid-column: span 2; }
        .span-h-2 { grid-row: span 2; }

        @media (max-width: 920px) {
          .bento-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 240px; gap: 16px; }
          .bento-card { padding: 32px; }
          .bento-card.size-hero { padding: 36px; }
          .bento-card.size-hero .bento-q { font-size: 28px; }
          .bento-card.size-md  .bento-q { font-size: 22px; }
          .bento-card.size-story { padding: 36px; }
          .bento-card.size-story .bento-q { font-size: 19px; }
        }
        @media (max-width: 540px) {
          .bento-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
          .span-w-2, .span-h-2 { grid-column: auto; grid-row: auto; }
          .bento-card { padding: 24px; min-height: 200px; }
        }
      `}</style>
    </section>
  );
}

function BentoCard({ c, accent }) {
  const sizeClass = c.hero ? 'size-hero' : (c.kind === 'story' ? 'size-story' : 'size-md');
  const spans = [c.w === 2 ? 'span-w-2' : '', c.h === 2 ? 'span-h-2' : ''].filter(Boolean).join(' ');

  const renderParts = (parts) => parts.map((p, idx) => (
    p.hi
      ? <span key={idx} className="hi" style={{ color: accent.hex }}>{p.t}</span>
      : <span key={idx}>{p.t}</span>
  ));

  return (
    <div className={`bento-card ${sizeClass} ${spans}`}>
      <div className="bento-card-glow" style={{
        position: 'absolute', top: '-40%', right: '-15%',
        width: '75%', aspectRatio: '1', borderRadius: '50%',
        filter: 'blur(70px)', opacity: 0.30, pointerEvents: 'none', zIndex: 0,
        background: accent.hex
      }} />
      {c.kind === 'story' ? (
        <div>
          <span className="bento-story-label" style={{ color: accent.hex }}>{c.label}</span>
          <p className="bento-q">{renderParts(c.parts)}</p>
        </div>
      ) : (
        <>
          <span className="bento-mark" style={{ color: accent.hex }}>&ldquo;</span>
          <p className="bento-q">{renderParts(c.parts)}</p>
        </>
      )}
      <div className="bento-cite">
        <span className="bento-cite-dash" style={{ color: accent.hex }}>—</span>
        <span className="bento-cite-name">{c.name}</span>
        <span className="bento-cite-sep">·</span>
        <span>{c.role}</span>
      </div>
    </div>
  );
}

/* ------------ 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>
  );
}

/* ------------ FINAL ------------ */
function FinalReminder({ accent, event }) {
  return (
    <section data-cal-cta 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}40 0%, ${accent.hex}14 32%, transparent 62%)`
      }} />
      {/* dot matrix grid near the bottom light */}
      <div style={{
        position: 'absolute', inset: 0, opacity: 0.8, pointerEvents: 'none',
        backgroundImage: 'radial-gradient(#2a2a2a 1.2px, transparent 1.2px)',
        backgroundSize: '26px 26px',
        maskImage: 'radial-gradient(ellipse 80% 75% at 50% 100%, #000 20%, transparent 70%)',
        WebkitMaskImage: 'radial-gradient(ellipse 80% 75% at 50% 100%, #000 20%, transparent 70%)'
      }} />
      <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'
        }}>
          Don't miss it.<br />
          <span style={{ color: accent.hex, fontWeight: 400 }}>Add it to your calendar.</span>
        </h2>

        <p style={{
          fontSize: 18, color: '#a0a0a0', lineHeight: 1.5, margin: '0 auto 56px',
          maxWidth: 600
        }}>
          The single biggest predictor of whether you walk away with a $10K newsletter blueprint
          is whether this event is on your calendar.
        </p>

        {/* CALENDAR-STYLE EVENT CARD */}
        <div className="final-cal-card" style={{
          display: 'inline-block',
          background: '#0d0d0d',
          border: '1px solid #2a1f3a',
          borderRadius: 14,
          overflow: 'hidden',
          marginBottom: 40,
          minWidth: 360,
          boxShadow: `0 30px 80px -20px ${accent.hex}33`,
          position: 'relative'
        }}>
          {/* tear-off date strip */}
          <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 className="final-cal-detail" 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 Q&amp;A Session
            </div>
          </div>
        </div>

        {/* MAIN CTA */}
        <div style={{ marginBottom: 0 }}>
          <button
            data-cal-button
            onClick={() => {
              window.FeedTracking && window.FeedTracking.trackEvent('calendar_click', { source: 'final_cta' }, 'post_reg');
              const url = window.FeedEvent.googleCalUrl(event);
              if (url && url !== '#') window.open(url, '_blank', 'noopener');
            }}
            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)`;
            }}
          >
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4">
              <rect x="3" y="5" width="18" height="16" rx="2" />
              <path d="M3 9h18" />
              <path d="M8 3v4M16 3v4" />
              <path d="M12 13v4M10 15h4" />
            </svg>
            <span className="cal-cta-desktop">Add to Calendar</span>
            <span className="cal-cta-mobile">Add Live Training To Calendar</span>
          </button>
        </div>
      </div>
      <style>{`
        .cal-cta-mobile { display: none; }
        @media (max-width: 720px) {
          .cal-cta-desktop { display: none; }
          .cal-cta-mobile { display: inline; }
        }
      `}</style>
    </section>
  );
}

function Footer() {
  return (
    <footer className="feed-footer" style={{ background: '#000', color: '#525252', padding: '24px 32px', borderTop: '1px solid #1a1a1a' }}>
      <div className="feed-footer-inner" style={{
        maxWidth: 1280, margin: '0 auto',
        display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 16, flexWrap: 'wrap', fontSize: 13
      }}>
        <div className="feed-footer-host" 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 feed-footer-legal" style={{ fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: '#525252' }}>
          © 2026 · Privacy · Terms
        </div>
      </div>
      <style>{`
        @media (max-width: 720px) {
          /* Center footer content on mobile */
          .feed-footer-inner {
            flex-direction: column;
            align-items: center !important;
            text-align: center;
            gap: 12px !important;
          }
          .feed-footer-host { justify-content: center; flex-wrap: wrap; }
          .feed-footer-legal { text-align: center; }

          /* Final CTA calendar card — center on mobile, drop the desktop minWidth */
          .final-cal-card {
            min-width: 0 !important;
            display: block !important;
            margin-left: auto !important;
            margin-right: auto !important;
            max-width: 360px;
            width: 100%;
          }
          .final-cal-detail { text-align: center !important; }
        }
      `}</style>
    </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>
        {[
          ['million', 'Million dollar gift'],
          ['decision', '$10K/month decision'],
          ['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>

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

/* ------------ APP ------------ */
function StickyCalCTA({ accent, hidden, event }) {
  return (
    <div className={`mobile-sticky-cal${hidden ? ' cal-in-view' : ''}`}>
      <button
        onClick={() => {
          window.FeedTracking && window.FeedTracking.trackEvent('calendar_click', { source: 'sticky' }, 'post_reg');
          const url = window.FeedEvent.googleCalUrl(event);
          if (url && url !== '#') window.open(url, '_blank', 'noopener');
        }}
        style={{
          width: '100%',
          maxWidth: 480,
          margin: '0 auto',
          padding: '16px 20px',
          background: accent.gradient || accent.hex,
          color: '#fff',
          border: 'none',
          borderRadius: 12,
          fontSize: 14,
          fontWeight: 700,
          letterSpacing: '0.14em',
          textTransform: 'uppercase',
          cursor: 'pointer',
          fontFamily: 'inherit',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          gap: 10,
          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)`
        }}
      >
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4">
          <rect x="3" y="5" width="18" height="16" rx="2" />
          <path d="M3 9h18" />
          <path d="M8 3v4M16 3v4" />
          <path d="M12 13v4M10 15h4" />
        </svg>
        Add Live Training To Calendar
      </button>
      <style>{`
        .mobile-sticky-cal {
          display: block;
          position: fixed;
          bottom: 0; left: 0; right: 0;
          padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
          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-cal.cal-in-view {
          opacity: 0;
          transform: translateY(12px);
          pointer-events: none;
        }
        @media (max-width: 720px) {
          body { padding-bottom: 90px; }
        }
        @media (min-width: 721px) {
          body { padding-bottom: 96px; }
        }
      `}</style>
    </div>
  );
}

function App() {
  const [tweaks, setTweaks] = useState(TWEAK_DEFAULTS);
  const [editOpen, setEditOpen] = useState(false);
  const [calButtonVisible, setCalButtonVisible] = useState(true);
  const event = useFeedEvent();
  const accent = ACCENTS[tweaks.accent] || ACCENTS.purple;

  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);
  }, []);

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

  // Watch BOTH inline calendar buttons — hide sticky bar whenever either is on screen
  useEffect(() => {
    const buttons = document.querySelectorAll('[data-cal-button]');
    if (!buttons.length) return;
    const visibleSet = new Set();
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) visibleSet.add(entry.target);
          else visibleSet.delete(entry.target);
        });
        setCalButtonVisible(visibleSet.size > 0);
      },
      { threshold: 0.2 }
    );
    buttons.forEach(b => observer.observe(b));
    return () => observer.disconnect();
  }, []);

  return (
    <div>
      <TopBar accent={accent} showCountdown={tweaks.showCountdown} event={event} />
      <Hero tweaks={tweaks} accent={accent} event={event} />
      <ReviewWall accent={accent} />
      <FeaturedCaseStudies accent={accent} />
      <Letters accent={accent} />
      <WhatYoullLearn accent={accent} />
      <FinalReminder accent={accent} event={event} />
      <Footer />
      <StickyCalCTA accent={accent} hidden={calButtonVisible} event={event} />
      <TweaksPanel open={editOpen} tweaks={tweaks} setTweak={setTweak}
        onClose={() => {
          setEditOpen(false);
          try { window.parent.postMessage({ type: '__edit_mode_dismissed' }, '*'); } catch (e) {}
        }} />
    </div>
  );
}

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