/* global React, Icon, useReveal, Logo, EmailCapture, CountUp */
const { useState: useS, useEffect: useE, useRef: useR } = React;

/* ─── Navbar ─────────────────────────────────────────────────── */
function Navbar() {
  const [scrolled, setScrolled] = useS(false);
  const [menuOpen, setMenuOpen] = useS(false);

  useE(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const closeMenu = () => setMenuOpen(false);

  return (
    <>
      <nav className={'navbar' + (scrolled ? ' scrolled' : '')} role="navigation" aria-label="Main navigation">
        <div className="container">
          <Logo />
          <ul className="nav-links" role="list">
            <li><a href="#how">How it works</a></li>
            <li><a href="#features">Features</a></li>
            <li><a href="#demo">Live demo</a></li>
            <li><a href="#faq">FAQ</a></li>
          </ul>
          <div className="nav-cta">
            <a href="#waitlist" className="btn btn-primary btn-sm">
              Get Early Access <Icon name="arrow-right" size={14} />
            </a>
          </div>
          <button
            className={'hamburger' + (menuOpen ? ' open' : '')}
            aria-label={menuOpen ? 'Close menu' : 'Open menu'}
            aria-expanded={menuOpen}
            aria-controls="mobile-nav"
            onClick={() => setMenuOpen(!menuOpen)}
          >
            <span aria-hidden="true" />
            <span aria-hidden="true" />
            <span aria-hidden="true" />
          </button>
        </div>
      </nav>

      {/* Mobile menu */}
      <nav
        id="mobile-nav"
        className={'mobile-menu' + (menuOpen ? ' open' : '')}
        aria-label="Mobile navigation"
        aria-hidden={!menuOpen}
      >
        <a href="#how"      onClick={closeMenu}>How it works</a>
        <a href="#features" onClick={closeMenu}>Features</a>
        <a href="#demo"     onClick={closeMenu}>Live demo</a>
        <a href="#faq"      onClick={closeMenu}>FAQ</a>
        <a href="#waitlist" className="btn btn-primary mobile-cta" onClick={closeMenu}>
          Get Early Access <Icon name="arrow-right" size={16} />
        </a>
      </nav>
    </>
  );
}

/* ─── Sticky mobile CTA bar ──────────────────────────────────── */
function StickyCTA() {
  const [visible, setVisible] = useS(false);
  useE(() => {
    const onScroll = () => setVisible(window.scrollY > 500);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const scrollToWaitlist = () => {
    const el = document.getElementById('waitlist');
    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'center' });
  };

  return (
    <div className={'sticky-cta' + (visible ? ' visible' : '')} aria-hidden={!visible} role="complementary">
      <div className="sticky-cta-text">
        <strong>Join 238 on the waitlist</strong>
        Early access · First 90 days free
      </div>
      <button className="btn btn-primary" onClick={scrollToWaitlist}>
        Get Early Access
      </button>
    </div>
  );
}

/* ─── Hero ───────────────────────────────────────────────────── */
function Hero() {
  const ref = useReveal();
  return (
    <header className="hero" ref={ref}>
      <div className="hero-bg" aria-hidden="true">
        <div className="blob blob-1" />
        <div className="blob blob-2" />
        <div className="grid-overlay" />
        <div className="noise" />
      </div>
      <div className="container">
        <div className="hero-content">
          <div className="hero-copy">
            <span className="eyebrow reveal">Cold? Callable.</span>
            <h1 className="display-xl reveal reveal-delay-1">
              Make your first 100<br />
              cold calls.<br />
              <span className="accent-word">This week.</span>
            </h1>
            <p className="lede reveal reveal-delay-2">
              Practice cold calling with AI prospects that talk back, push back, and hang up.
              Build real cold calling skills before you ever pick up the real phone.
            </p>
            <div className="cta-row reveal reveal-delay-3" id="waitlist">
              <EmailCapture dark cta="Get Early Access" placeholder="you@work.com" />
            </div>
            <div className="hero-trust reveal reveal-delay-4">
              <div className="avatars" aria-hidden="true">
                <span style={{ '--c1': '#4DA8FF', '--c2': '#2B7FD9' }}>M</span>
                <span style={{ '--c1': '#FF7A3C', '--c2': '#E35E1F' }}>S</span>
                <span style={{ '--c1': '#3ECF8E', '--c2': '#2B9D6A' }}>K</span>
                <span style={{ '--c1': '#FFB547', '--c2': '#E89515' }}>J</span>
              </div>
              <span>
                <strong style={{ color: 'rgba(246,249,252,0.85)' }}>
                  <CountUp to={238} />
                </strong>{' '}already on the waitlist · No spam, ever
              </span>
            </div>
          </div>

          <div className="hero-visual reveal reveal-delay-2" aria-hidden="true">
            <PhoneMock />
            <div className="float-card score">
              <div className="label">Call score</div>
              <div className="big">88<span className="unit">/ 100</span></div>
              <div className="meter"><div /></div>
              <div style={{ marginTop: 8, fontSize: 12, color: 'rgba(246,249,252,0.6)' }}>+14 vs last attempt</div>
            </div>
            <div className="float-card streak">
              <div className="label"><span style={{ color: '#FF7A3C' }}>●</span> Streak</div>
              <div className="big">7<span className="unit">days</span></div>
              <div style={{ marginTop: 8, fontSize: 12, color: 'rgba(246,249,252,0.6)' }}>Keep it warm 🔥</div>
            </div>
          </div>
        </div>
      </div>
    </header>
  );
}

function PhoneMock() {
  return (
    <div className="phone">
      <div className="phone-screen">
        <div className="phone-notch" />
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <div className="call-status"><span className="dot" />Live · Practice mode</div>
          <span className="call-timer mono">02:14</span>
        </div>
        <div className="call-prospect">
          <div className="av">SR</div>
          <div className="info">
            <span className="name">Sarah Reyes</span>
            <span className="meta">VP Ops · LogiCore</span>
          </div>
        </div>
        <div className="transcript">
          <div className="bubble bubble-prospect" style={{ animationDelay: '0.2s' }}>Look, I've got two minutes. What's this about?</div>
          <div className="bubble bubble-user"     style={{ animationDelay: '0.7s' }}>Totally fair — I'll be quick. We help ops teams cut routing time by ~30%. Worth a 15-min look?</div>
          <div className="bubble bubble-prospect" style={{ animationDelay: '1.4s' }}>We already use Lattix for that. Why would I switch?</div>
          <div className="bubble bubble-user"     style={{ animationDelay: '2.1s' }}>Honest answer — most teams don't. But the ones on Lattix tell us…</div>
        </div>
        <div className="live-coach">
          <div className="coach-icon">✨</div>
          <div className="coach-copy">
            <span className="label">Live coach</span>
            <span className="text">Nice acknowledge. Now anchor the value — quantify "30%."</span>
          </div>
        </div>
        <div className="call-controls">
          <button aria-label="Mute"><Icon name="mic" size={18} /></button>
          <button className="hangup" aria-label="End call"><Icon name="phone-off" size={22} stroke="white" /></button>
          <button aria-label="Speaker"><Icon name="volume" size={18} /></button>
        </div>
      </div>
    </div>
  );
}

/* ─── Logo strip ─────────────────────────────────────────────── */
function LogoStrip() {
  return (
    <section className="logo-strip" aria-label="Where beta users practice">
      <div className="container">
        <div className="label">Where our beta users practice before pitching</div>
        <div className="row" aria-hidden="true">
          <span>NORTHWIND</span>
          <span>LOGICORE</span>
          <span>BRIGHTLOOP</span>
          <span>ATLAS &amp; CO</span>
          <span>VERA HEALTH</span>
          <span>KILOWATT</span>
        </div>
      </div>
    </section>
  );
}

/* ─── Features ───────────────────────────────────────────────── */
function Features() {
  const ref = useReveal();
  const items = [
    { icon: 'brain',    tone: '',     t: 'Prospects that push back',    d: "Not a chatbot. Real objections, gatekeepers, awkward silences, the occasional hang-up. Your reps get reps." },
    { icon: 'sparkle',  tone: 'warm', t: 'Live AI coach',               d: "A whisper in your ear — anchoring value, calling out filler words, suggesting better questions. Without judgement." },
    { icon: 'target',   tone: 'mint', t: 'Score every call',            d: "Confidence, clarity, listening ratio, objection handling. See exactly where you tighten up — and where you shine." },
    { icon: 'phone',    tone: '',     t: 'Industry-tuned scripts',      d: "Cold calling scripts for SaaS, real estate, financial advisors, B2B sales, recruiting, and agencies. Pre-loaded ICPs and openers, fully editable." },
    { icon: 'trending', tone: 'warm', t: 'Progress that compounds',     d: "Daily streak, weekly recap, monthly improvement curve. The graph goes up — because you do." },
    { icon: 'shield',   tone: 'mint', t: 'Practice in private',         d: "Nobody hears your worst attempts. Tank a call, tank ten — only you see the replay. Then you go again." },
  ];
  return (
    <section className="section features" id="features" ref={ref} aria-labelledby="features-heading">
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">Why ColdCallable</span>
          <h2 className="display-lg" id="features-heading">Reps build skill.<br />Books don't.</h2>
          <p>Read every script in the world. The only way to get good at calling is to call. So we built a way to call — without burning a single real lead.</p>
        </div>
        <div className="feature-grid">
          {items.map((it, i) => (
            <article key={i} className={'feature-card reveal ' + it.tone} style={{ transitionDelay: (i * 60) + 'ms' }}>
              <div className="glyph" aria-hidden="true"><Icon name={it.icon} size={22} /></div>
              <h3>{it.t}</h3>
              <p>{it.d}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─── How it works ───────────────────────────────────────────── */
function HowItWorks() {
  const ref = useReveal();
  return (
    <section className="section how" id="how" ref={ref} aria-labelledby="how-heading">
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">How it works</span>
          <h2 className="display-lg" id="how-heading">Three steps. One real skill.</h2>
        </div>
        <div className="how-grid">
          <article className="step reveal">
            <span className="step-no mono">STEP 01</span>
            <h3>Pick your prospect</h3>
            <p>Choose an industry, persona, and difficulty. Get a real-feeling ICP with goals, objections, and a name.</p>
            <div className="step-visual" aria-hidden="true">
              <div className="line"><span className="tag them">PERSONA</span><span>VP Ops · LogiCore</span></div>
              <div className="line"><span className="tag them">MOOD</span><span>Skeptical, time-poor</span></div>
              <div className="line"><span className="tag them">GOAL</span><span>Cut routing cost 30%</span></div>
            </div>
          </article>
          <article className="step reveal reveal-delay-1">
            <span className="step-no mono">STEP 02</span>
            <h3>Make the call</h3>
            <p>Pick up. They answer. Talk out loud, in real time, with no script to hide behind — just like a real call.</p>
            <div className="step-visual" aria-hidden="true">
              <div className="line"><span className="tag them">THEM</span><span>"What's this about?"</span></div>
              <div className="line"><span className="tag you">YOU</span><span>"Quick — 30 sec…"</span></div>
              <div className="line"><span className="tag ai">COACH</span><span>Pace down 10%</span></div>
            </div>
          </article>
          <article className="step reveal reveal-delay-2">
            <span className="step-no mono">STEP 03</span>
            <h3>Review &amp; rerun</h3>
            <p>Get a scored replay with line-by-line feedback. Rerun the call, adjust one thing, watch the score climb.</p>
            <div className="step-visual" aria-hidden="true">
              <div className="line"><span className="tag them">CLARITY</span><span className="bar" style={{ width: '78%' }} /></div>
              <div className="line"><span className="tag them">LISTEN</span><span className="bar" style={{ width: '64%' }} /></div>
              <div className="line"><span className="tag them">CLOSE</span><span className="bar" style={{ width: '52%' }} /></div>
            </div>
          </article>
        </div>
      </div>
    </section>
  );
}

/* ─── Live demo ──────────────────────────────────────────────── */
const PERSONAS = [
  { id: 'sarah', name: 'Sarah Reyes', role: 'VP Ops · LogiCore', diff: 3, color: ['#4DA8FF','#2B7FD9'], initials: 'SR',
    lines: [
      { who: 'prospect', t: "Look, I've got 90 seconds. What is this?" },
      { who: 'you', t: "Fair — quick: we cut routing latency ~30% for ops teams your size. Worth a 15-min look next week?" },
      { who: 'prospect', t: "We use Lattix. Why would I rip and replace?" },
    ],
    chips: [{ k: 'good', t: 'Strong opener' }, { k: 'warn', t: 'Quantify the 30%' }, { k: 'good', t: 'Asked for time' }],
  },
  { id: 'marcus', name: 'Marcus Hale', role: 'CTO · Brightloop', diff: 4, color: ['#FF7A3C','#E35E1F'], initials: 'MH',
    lines: [
      { who: 'prospect', t: "How'd you get this number?" },
      { who: 'you', t: "Cold, honestly. I'll be quick — saw you ship the v3 release, congrats. Two-minute reason I'm calling?" },
      { who: 'prospect', t: "Go." },
    ],
    chips: [{ k: 'good', t: 'Disarmed gatekeep' }, { k: 'good', t: 'Specific compliment' }, { k: 'warn', t: 'Lead with value next' }],
  },
  { id: 'priya', name: 'Priya Shah', role: 'Founder · Vera Health', diff: 2, color: ['#3ECF8E','#2B9D6A'], initials: 'PS',
    lines: [
      { who: 'prospect', t: "Sure, who is this?" },
      { who: 'you', t: "Hi Priya — Alex from ColdCallable. We help founder-led teams book 3x more discovery calls. Bad time?" },
      { who: 'prospect', t: "Always. But go ahead — what do you actually do?" },
    ],
    chips: [{ k: 'good', t: 'Named the prospect' }, { k: 'good', t: 'Permission framing' }, { k: 'warn', t: 'Skip company name' }],
  },
];

function LiveDemo() {
  const ref = useReveal();
  const [active, setActive] = useS('sarah');
  const p = PERSONAS.find((x) => x.id === active);
  return (
    <section className="section demo" id="demo" ref={ref} aria-labelledby="demo-heading">
      <div className="container">
        <div className="demo-grid">
          <div className="reveal">
            <span className="eyebrow" style={{ color: '#4DA8FF' }}>Live preview</span>
            <h2 className="display-lg" id="demo-heading" style={{ marginTop: 16 }}>
              Pick a prospect.<br />Get on the phone.
            </h2>
            <p className="lede">Six industries. Forty-plus personas. Each one trained on real call data so the silences feel real — and so do the wins.</p>
            <div className="persona-picker" role="radiogroup" aria-label="Choose a prospect">
              {PERSONAS.map((pp) => (
                <button
                  key={pp.id}
                  className={'persona-row' + (pp.id === active ? ' active' : '')}
                  onClick={() => setActive(pp.id)}
                  role="radio"
                  aria-checked={pp.id === active}
                >
                  <div className="av" style={{ background: `linear-gradient(135deg, ${pp.color[0]}, ${pp.color[1]})` }} aria-hidden="true">{pp.initials}</div>
                  <div className="info">
                    <div className="name">{pp.name}</div>
                    <div className="role">{pp.role}</div>
                  </div>
                  <div className="difficulty" aria-label={`Difficulty ${pp.diff} of 5`}>
                    <span>Difficulty</span>
                    <span className="bars" aria-hidden="true">
                      {[1,2,3,4,5].map((n) => <span key={n} className={n <= pp.diff ? 'on' : ''} />)}
                    </span>
                  </div>
                </button>
              ))}
            </div>
          </div>

          <div className="reveal reveal-delay-1">
            <div className="demo-screen" key={p.id} aria-label={`Demo call with ${p.name}`}>
              <div className="top">
                <div className="who">
                  <div className="av" style={{ background: `linear-gradient(135deg, ${p.color[0]}, ${p.color[1]})` }} aria-hidden="true">{p.initials}</div>
                  <div>
                    <div className="name">{p.name}</div>
                    <div className="role">{p.role}</div>
                  </div>
                </div>
                <span className="timer mono" aria-label="Call duration: 1 minute 42 seconds">
                  <span className="dot" aria-hidden="true" />01:42
                </span>
              </div>
              <div className="stream" role="log" aria-live="polite" aria-label="Call transcript">
                {p.lines.map((l, i) => (
                  <div key={i} className={'line ' + l.who} style={{ animationDelay: (i * 0.25) + 's' }}>
                    <span className="speaker">{l.who === 'you' ? 'You' : p.name.split(' ')[0]}</span>
                    <div className="bubble">{l.t}</div>
                  </div>
                ))}
                <div className="typing" aria-label="Prospect is typing" style={{ animationDelay: '1s' }}>
                  <span /><span /><span />
                </div>
              </div>
              <div className="footer-row" aria-label="AI feedback">
                {p.chips.map((c, i) => (
                  <span key={i} className={'chip ' + c.k}>
                    <Icon name={c.k === 'good' ? 'check' : 'sparkle'} size={12} />
                    {c.t}
                  </span>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ─── Stats ──────────────────────────────────────────────────── */
function Stats() {
  const ref = useReveal();
  return (
    <section className="section stats" id="stats" ref={ref} aria-labelledby="stats-heading">
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">By the numbers</span>
          <h2 className="display-lg" id="stats-heading">The reps add up.</h2>
        </div>
        <div className="stats-grid">
          {[
            { v: 18423,  s: '+',  l: 'AI calls completed by beta users' },
            { v: 3,      s: '.2x',l: 'More booked meetings (closed beta)' },
            { v: 92,     s: '%',  l: 'Say they feel ready for their first real call' },
            { v: 41,     s: '',   l: 'Countries our waitlist spans' },
          ].map((s, i) => (
            <div key={i} className="stat reveal" style={{ transitionDelay: (i * 60) + 'ms' }}>
              <div className="big">
                <CountUp to={s.v} suffix={s.s} />
              </div>
              <div className="label">{s.l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─── Testimonials ───────────────────────────────────────────── */
const TESTI = [
  { q: "Booked five meetings my first week back. The AI prospect that hangs up on me — that's the one that fixed my opener.", n: 'Maya Okafor',     r: 'AE · Boston',       c: ['#4DA8FF','#2B7FD9'], i: 'MO' },
  { q: "I'm 23 and terrified of the phone. This took me from 'I literally can't' to making 40 calls a day without sweating.", n: 'Jordan Reyes',    r: 'SDR · Toronto',     c: ['#FF7A3C','#E35E1F'], i: 'JR' },
  { q: "The replay is brutal in the best way. I had no idea I said 'basically' 17 times in a four-minute call.",             n: 'Kenji Tanaka',    r: 'Founder · Tokyo',   c: ['#3ECF8E','#2B9D6A'], i: 'KT' },
  { q: "Cheaper than a coach. Better than a script. Available at 11pm when I actually have time to practice.",               n: 'Priya Menon',     r: 'Recruiter · Bangalore', c: ['#FFB547','#E89515'], i: 'PM' },
  { q: "Did 80 practice calls before my onboarding even started. Showed up day one already past the awkward phase.",         n: 'Lena Schroeder',  r: 'BDR · Berlin',      c: ['#4DA8FF','#3ECF8E'], i: 'LS' },
  { q: "My manager asked why my conversion suddenly doubled. Truthfully? I stopped being afraid of the call.",               n: 'Diego Alvarez',   r: 'AE · Mexico City',  c: ['#FF5A5A','#FF7A3C'], i: 'DA' },
];

function Testimonials() {
  const ref = useReveal();
  const list = [...TESTI, ...TESTI];
  return (
    <section className="section testimonials" id="testimonials" ref={ref} aria-labelledby="testi-heading">
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">From the beta</span>
          <h2 className="display-lg" id="testi-heading">They were terrified.<br />Now they pick up first.</h2>
        </div>
      </div>
      <div className="marquee reveal" aria-label="Testimonials" role="list">
        <div className="marquee-track">
          {list.map((t, i) => (
            <article key={i} className="testimonial" role="listitem">
              <div className="stars" aria-label="5 out of 5 stars">
                {[0,1,2,3,4].map((n) => <Icon key={n} name="star" size={14} />)}
              </div>
              <blockquote className="quote">"{t.q}"</blockquote>
              <div className="author">
                <div className="av" style={{ background: `linear-gradient(135deg, ${t.c[0]}, ${t.c[1]})` }} aria-hidden="true">{t.i}</div>
                <div className="meta">
                  <div className="name">{t.n}</div>
                  <div className="role">{t.r}</div>
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─── FAQ ────────────────────────────────────────────────────── */
const FAQS = [
  { q: "Do I actually have to talk out loud?",      a: "Yes — and that's the point. You can type during onboarding, but practice calls use your voice. The whole reason real cold calls are scary is because you're speaking. We rebuild that muscle." },
  { q: "What cold calling strategies does ColdCallable teach?", a: "We focus on proven B2B cold calling strategies: pattern interrupt openers, objection handling, permission-based framing, and value-anchoring. Each call is scored on clarity, listening ratio, and close — so you see which cold calling strategies actually work for you." },
  { q: "Does it work for real estate cold calling or financial advisor prospecting?", a: "Yes. ColdCallable ships with personas and scripts tuned for real estate cold calling, financial advisor prospecting, and B2B lead generation. Pick your industry, choose a prospect, and practice the exact sales calls you'll actually make." },
  { q: "Is this just ChatGPT in a phone skin?",     a: "No. We use voice-first models trained on real B2B and B2C call transcripts, paired with persona logic — moods, time pressure, gatekeeper layers, hang-up triggers. It feels like a call because it sounds like one." },
  { q: "When does it launch?",                      a: "Closed beta is live. Public launch mid-2026. Join the waitlist and we'll let you in by cohort — beginners first." },
  { q: "How much will it cost?",                    a: "Beta is free. Launch pricing starts at the cost of a couple of coffees a month — and waitlist members get the first 90 days on us." },
  { q: "Will I sound like a robot reading a script?", a: "Opposite. We score you down for sounding scripted. The goal is natural, listening, present. Boring is the death of a cold call." },
  { q: "Is my voice data private?",                 a: "Yes. Calls are stored only for your own replay, encrypted, and deleted on request. We never train shared models on individual voice recordings." },
];

function FAQ() {
  const [open, setOpen] = useS(0);
  const ref = useReveal();
  return (
    <section className="section faq" id="faq" ref={ref} aria-labelledby="faq-heading">
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">Common questions</span>
          <h2 className="display-lg" id="faq-heading">The stuff you'd ask<br />if we picked up.</h2>
        </div>
        <div className="faq-list reveal">
          {FAQS.map((f, i) => (
            <div key={i} className={'faq-item' + (open === i ? ' open' : '')}>
              <button
                className="faq-q"
                onClick={() => setOpen(open === i ? -1 : i)}
                aria-expanded={open === i}
                aria-controls={`faq-answer-${i}`}
              >
                <span>{f.q}</span>
                <span className="icon" aria-hidden="true" />
              </button>
              <div className="faq-a" id={`faq-answer-${i}`} role="region">
                <div className="faq-a-inner">{f.a}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─── Final CTA ──────────────────────────────────────────────── */
function FinalCTA() {
  const ref = useReveal();
  return (
    <section className="section final-cta" ref={ref} aria-labelledby="final-cta-heading">
      <div className="container">
        <div className="reveal">
          <span className="eyebrow" style={{ color: '#FF7A3C' }}>Last thing</span>
          <h2 className="display-xl" id="final-cta-heading" style={{ marginTop: 16 }}>
            Stop reading about<br />cold calling.<br />
            <span style={{ background: 'linear-gradient(135deg, #FF7A3C 0%, #FFB547 100%)', WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent' }}>
              Make the call.
            </span>
          </h2>
          <p>Get early access, weekly playbooks, and the cold-call breakdowns nobody else publishes.</p>
          <EmailCapture dark cta="Secure My Spot" placeholder="you@work.com" />
          <p className="footnote">One email a week. Unsubscribe in one click. We never sell your data.</p>
        </div>
      </div>
    </section>
  );
}

/* ─── Footer ─────────────────────────────────────────────────── */
function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-brand">
            <Logo />
            <p>The cold-call practice app for people who'd rather be doing literally anything else.</p>
          </div>
          <div className="footer-col">
            <h5>Product</h5>
            <ul>
              <li><a href="#features">Features</a></li>
              <li><a href="#how">How it works</a></li>
              <li><a href="#demo">Live demo</a></li>
              <li><a href="#faq">FAQ</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h5>Company</h5>
            <ul>
              <li><a href="#">About</a></li>
              <li><a href="#">Careers</a></li>
              <li><a href="#">Press kit</a></li>
              <li><a href="#">Contact</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h5>Legal</h5>
            <ul>
              <li><a href="#">Privacy</a></li>
              <li><a href="#">Terms</a></li>
              <li><a href="#">Security</a></li>
              <li><a href="facts.html" className="footer-grounding">Facts / Grounding Page</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 ColdCallable. Cold? Callable.</span>
          <nav className="socials" aria-label="Social links">
            <a href="#" aria-label="Instagram"><Icon name="instagram" size={16} /></a>
            <a href="#" aria-label="X / Twitter"><Icon name="x" size={16} /></a>
            <a href="#" aria-label="LinkedIn"><Icon name="linkedin" size={16} /></a>
          </nav>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Navbar, StickyCTA, Hero, LogoStrip, Features, HowItWorks, LiveDemo, Stats, Testimonials, FAQ, FinalCTA, Footer });