const { useState, useEffect, useMemo } = React;

// ---------- NAV ----------
function Nav() {
  const [open, setOpen] = useState(false);
  const [collapsed, setCollapsed] = useState(false);
  const isMobile = typeof window !== 'undefined' && window.innerWidth <= 720;
  const close = () => setOpen(false);

  useEffect(() => {
    if (isMobile) return;
    let lastY = window.scrollY;
    setCollapsed(lastY > 2);
    function onScroll() {
      const y = window.scrollY;
      if (y <= 2) setCollapsed(false);
      else if (y > lastY) setCollapsed(true);
      else if (y < lastY) setCollapsed(false);
      lastY = y;
    }
    function onWheel(e) {
      if (e.deltaY > 0) setCollapsed(true);
      else if (e.deltaY < 0) setCollapsed(false);
    }
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('wheel', onWheel, { passive: true });
    return () => {
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('wheel', onWheel);
    };
  }, [isMobile]);

  return (
    <>
      <nav className={`nav ${collapsed && !open && !isMobile ? 'nav-collapsed' : ''}`}>
        <a className="brand" href="Vexa Landing.html"><img src="assets/logo.png" alt="logo" className="brand-logo" /></a>
        <div className="nav-links">
          <a href="Vexa Landing.html#operators">Operators</a>
          <a href="pricing.html">Pricing</a>
          <a href="Vexa Landing.html#faq">FAQ</a>
        </div>
        <div className="nav-actions">
          <a href="#" className="btn btn-ghost btn-signin">Sign in</a>
          <a href="#plans" className="btn btn-primary btn-buy">Buy now</a>
          <button
            type="button"
            className={`hamburger ${open ? 'open' : ''}`}
            aria-label="Menu"
            onClick={() => setOpen(o => !o)}
          >
            <span></span><span></span><span></span>
          </button>
        </div>
      </nav>
      <div className={`mobile-menu ${open ? 'open' : ''}`} role="dialog" aria-hidden={!open}>
        <div className="mobile-menu-inner">
          <a href="Vexa Landing.html#operators" onClick={close}>Operators<span className="arrow">→</span></a>
          <a href="Vexa Landing.html#how" onClick={close}>How it works<span className="arrow">→</span></a>
          <a href="pricing.html" onClick={close}>Pricing<span className="arrow">→</span></a>
          <a href="Vexa Landing.html#faq" onClick={close}>FAQ<span className="arrow">→</span></a>
          <div className="mobile-menu-actions">
            <a href="#" className="btn btn-ghost" onClick={close}>Sign in</a>
            <a href="#plans" className="btn btn-primary" onClick={close}>Buy now <span className="mono">→</span></a>
          </div>
          <p className="mobile-menu-foot">Two operators. One flat price.</p>
        </div>
      </div>
    </>
  );
}

// ---------- COUNTDOWN ----------
function useCountdown(targetMs) {
  const [now, setNow] = useState(Date.now());
  useEffect(() => {
    const id = setInterval(() => setNow(Date.now()), 1000);
    return () => clearInterval(id);
  }, []);
  const diff = Math.max(0, targetMs - now);
  const d = Math.floor(diff / 86400000);
  const h = Math.floor(diff / 3600000) % 24;
  const m = Math.floor(diff / 60000) % 60;
  const s = Math.floor(diff / 1000) % 60;
  return { d, h, m, s };
}

// ---------- HERO BAR ----------
function PromoBar() {
  // 72-hour countdown anchored to the start of this session, persisted in localStorage
  const target = useMemo(() => {
    const stored = localStorage.getItem('vexaPromoEnd');
    if (stored) return parseInt(stored, 10);
    const t = Date.now() + 72 * 3600 * 1000;
    localStorage.setItem('vexaPromoEnd', String(t));
    return t;
  }, []);
  const { d, h, m, s } = useCountdown(target);
  const pad = n => String(n).padStart(2, '0');
  return (
    <div className="promo-bar">
      <div className="promo-inner">
        <span className="promo-pill mono"><span className="dot"></span> Founder pricing</span>
        <span className="promo-text">Lock 40% off for life. Ends in</span>
        <span className="promo-time mono">{pad(d)}d {pad(h)}h {pad(m)}m {pad(s)}s</span>
        <a href="#plans" className="promo-cta">Claim →</a>
      </div>
    </div>
  );
}

// ---------- HERO CARD ----------
function HeroCard({ onOpen }) {
  const [agent, setAgent] = useState('cato');
  const features = {
    cato: [
      { icon: '◎', title: 'Done-for-you ad creatives',     desc: 'Static, video briefs, and copy. Shipped daily across Meta, Google, and TikTok.' },
      { icon: '✦', title: 'Done-for-you growth strategy',  desc: 'Funnel analysis, competitor scans, and Slack updates that read like a CMO wrote them.' },
      { icon: '⚡', title: 'Done-for-you ad optimization',  desc: 'Kill rules, scaling rules, fatigue detection. 24/7 optimization on every dollar.' },
    ],
    nara: [
      { icon: '✉', title: 'Done-for-you email campaigns',  desc: 'Welcome, abandon, post-purchase, and winback flows shipped weekly in your voice.' },
      { icon: '✦', title: 'Done-for-you brand voice',      desc: 'Trained on your past sends, top performers, and competitor scans before anything ships.' },
      { icon: '⚡', title: 'Done-for-you list growth',      desc: 'Segment analysis, send-time recommendations, and A/B drafts on every send.' },
    ],
  };
  const items = features[agent];
  const avatarSrc = agent === 'cato' ? 'assets/cato.png' : 'assets/nara.png';
  return (
    <section className="pricing-herocard-section wrap">
      <div className="pricing-herocard">
        <div className="pricing-herocard-left">
          <div className="pricing-herocard-logo">
            <img src="assets/logo.png" alt="Vexa" />
            <span className="pricing-herocard-brand">Vexa</span>
          </div>
          <ul className="pricing-herocard-features" key={agent}>
            {items.map((f, i) => (
              <li key={i}>
                <span className="pricing-herocard-feature-icon" aria-hidden="true">{f.icon}</span>
                <div>
                  <h3 className="pricing-herocard-feature-title">{f.title}</h3>
                  <p className="pricing-herocard-feature-desc">{f.desc}</p>
                </div>
              </li>
            ))}
          </ul>
          <button type="button" className="pricing-herocard-cta" onClick={onOpen}>
            <span className="pricing-herocard-cta-icon" aria-hidden="true">🎁</span>
            Redeem 40% OFF
          </button>
          <div className="pricing-herocard-chips">
            <span className="pricing-herocard-chip"><span className="pricing-herocard-chip-icon">🌐</span>Any Language</span>
            <span className="pricing-herocard-chip"><span className="pricing-herocard-chip-icon">💱</span>Any Currency</span>
            <span className="pricing-herocard-chip"><span className="pricing-herocard-chip-icon">🛡</span>14-Day Guarantee</span>
          </div>
        </div>
        <div className={`pricing-herocard-right is-${agent}`}>
          <div className="pricing-herocard-avatar-bg"></div>
          <button
            type="button"
            className={`pricing-herocard-switch is-${agent}`}
            onClick={() => setAgent(agent === 'cato' ? 'nara' : 'cato')}
            aria-label="Switch operator"
          >
            <span className="pricing-herocard-switch-thumb" aria-hidden="true"></span>
          </button>
          <img className="pricing-herocard-avatar" key={agent} src={avatarSrc} alt="" />
          <div className="pricing-herocard-sticker">
            <div className="pricing-herocard-sticker-amt">$120</div>
            <div className="pricing-herocard-sticker-per">per month</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- PRICING MODAL ----------
function PricingModal({ open, onClose, plan, setPlan }) {
  useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    document.body.style.overflow = 'hidden';
    window.addEventListener('keydown', onKey);
    return () => {
      document.body.style.overflow = '';
      window.removeEventListener('keydown', onKey);
    };
  }, [open, onClose]);

  if (!open) return null;

  const options = [
    { key: 'annual',    price: 120, was: 200, off: '40% OFF', label: 'Pay yearly',    badge: 'Best Value' },
    { key: 'quarterly', price: 160, was: 200, off: '20% OFF', label: 'Pay quarterly', badge: null },
    { key: 'monthly',   price: 200, was: null, off: null,     label: 'Pay monthly',   badge: 'Most Popular' },
  ];

  return (
    <div className="pricing-modal-backdrop" onClick={onClose}>
      <div className="pricing-modal" onClick={(e) => e.stopPropagation()} role="dialog" aria-modal="true">
        <button type="button" className="pricing-modal-close" aria-label="Close" onClick={onClose}>×</button>
        <h2 className="pricing-modal-title">Choose Your Plan</h2>
        <p className="pricing-modal-sub">Start scaling your growth with AI</p>

        <div className="pricing-modal-options">
          {options.map((o) => (
            <button
              key={o.key}
              type="button"
              className={`pricing-modal-option ${plan === o.key ? 'active' : ''}`}
              onClick={() => setPlan(o.key)}
            >
              <span className="pricing-modal-radio" aria-hidden="true">
                <span className="pricing-modal-radio-dot"></span>
              </span>
              <div className="pricing-modal-price">
                <span className="pricing-modal-price-amt">${o.price}</span>
                <span className="pricing-modal-price-mo">/mo</span>
                {o.was && <span className="pricing-modal-price-was">${o.was}</span>}
                {o.off && <span className="pricing-modal-price-off">{o.off}</span>}
              </div>
              <div className="pricing-modal-cycle">{o.label}</div>
              {o.badge && <span className={`pricing-modal-badge ${o.badge === 'Most Popular' ? 'is-pop' : 'is-best'}`}>{o.badge}</span>}
            </button>
          ))}
        </div>

        <div className="pricing-modal-promo">
          <span className="pricing-modal-promo-icon">✨</span>
          Run your entire growth strategy for less than $4/day
        </div>

        <button type="button" className="pricing-modal-continue">Continue</button>

        <div className="pricing-modal-guarantee">
          <span className="pricing-modal-guarantee-icon">🛡</span>
          14-day money-back guarantee
        </div>

        <p className="pricing-modal-fine">
          You are enrolling in a recurring subscription. By continuing, you agree to be billed at the price shown
          per month until cancelled. You can cancel in account settings or by emailing <a href="mailto:hello@vexa.ai">hello@vexa.ai</a>.
        </p>
      </div>
    </div>
  );
}

// ---------- PRICING CARDS ----------
const PLANS = {
  monthly:   { mult: 1,    label: 'Monthly',   note: 'Billed monthly',         save: null      },
  quarterly: { mult: 0.80, label: 'Quarterly', note: 'Billed every 3 months', save: '20% OFF' },
  annual:    { mult: 0.60, label: 'Annual',    note: 'Billed yearly',          save: '40% OFF' }
};
const BASE = 200;

const SINGLE_BASE = 129;

function Plans({ plan, setPlan }) {
  const mo = Math.round(BASE * PLANS[plan].mult);
  const singleMo = Math.round(SINGLE_BASE * PLANS[plan].mult);
  const [singleAgent, setSingleAgent] = useState('nara');
  const singleAgentLabel = singleAgent === 'nara' ? 'Nara' : 'Cato';
  const singleAgentRole = singleAgent === 'nara' ? 'Email marketer' : 'CMO';
  return (
    <section id="plans" className="wrap pricing-plans">
      <h2 className="pricing-h2"><span className="gradient-text">Get 40% OFF on annual plan</span></h2>
      <p className="pricing-sub">Switch any time. Pay less the longer you commit. Same product, same operators, no feature gates.</p>

      <div className="plan-switch plan-switch-3" data-plan={plan}>
        <div className="plan-switch-thumb" aria-hidden="true"></div>
        {Object.entries(PLANS).map(([key, p]) => (
          <button
            key={key}
            type="button"
            className={`plan-switch-opt ${plan === key ? 'active' : ''}`}
            onClick={() => setPlan(key)}
          >
            <span className="plan-switch-label">{p.label}</span>
            {p.save && <span className="plan-switch-save">{p.save}</span>}
          </button>
        ))}
      </div>

      <div className="pricing-grid pricing-grid-3">
        {/* Single operator · pick Nara or Cato */}
        <div className="price-card price-card-single">
          <div className="name">Single operator</div>
          <div className="single-toggle">
            <button
              type="button"
              className={`single-toggle-opt ${singleAgent === 'nara' ? 'active' : ''}`}
              onClick={() => setSingleAgent('nara')}
            >
              Nara
            </button>
            <button
              type="button"
              className={`single-toggle-opt ${singleAgent === 'cato' ? 'active' : ''}`}
              onClick={() => setSingleAgent('cato')}
            >
              Cato
            </button>
          </div>
          <div className="price" key={`single-price-${plan}-${singleAgent}`}>
            ${singleMo}<small> /mo</small>
          </div>
          <p className="plan-note" key={`single-note-${plan}-${singleAgent}`}>
            {PLANS[plan].note}
            {plan !== 'monthly' && <> · was <span className="plan-strike">${SINGLE_BASE}/mo</span></>}
          </p>
          <ul>
            <li>{singleAgentLabel} · {singleAgentRole}</li>
            <li>Unlimited {singleAgent === 'nara' ? 'campaigns + flows' : 'ads + creative'}</li>
            <li>Brand-voice training</li>
            <li>{singleAgent === 'nara' ? 'Competitor scanning · email' : 'Competitor scanning · ads'}</li>
            <li>Founder support</li>
            <li>Add the other operator anytime</li>
          </ul>
          <a href="#" className="btn btn-ghost" style={{ width: '100%', justifyContent: 'center' }}>Start with {singleAgentLabel}</a>
          <p className="plan-fineprint">14-day money-back. Cancel any time.</p>
        </div>

        {/* Both operators · featured */}
        <div className="price-card featured price-card-subscription">
          <span className="ribbon ribbon-lifetime">Most chosen</span>
          <div className="name">Both operators</div>
          <div className="price" key={`price-${plan}`}>${mo}<small> /mo</small></div>
          <p className="plan-note" key={`note-${plan}`}>
            {PLANS[plan].note}
            {plan !== 'monthly' && <> · was <span className="plan-strike">${BASE}/mo</span></>}
          </p>
          <ul>
            <li>Nara · email marketer</li>
            <li>Cato · paid-growth CMO</li>
            <li>Unlimited campaigns, flows, ad creative</li>
            <li>Brand-voice training on day one</li>
            <li>Competitor scanning · email + ads</li>
            <li>Cross-channel funnel analysis</li>
            <li>Founder priority support</li>
          </ul>
          <a href="#" className="btn btn-primary" style={{ width: '100%', justifyContent: 'center' }}>Start with both <span className="mono">→</span></a>
          <p className="plan-fineprint">14-day money-back. Cancel any time.</p>
        </div>

        {/* Custom · Enterprise */}
        <div className="price-card">
          <div className="name">Custom · Enterprise</div>
          <div className="price price-custom">Custom</div>
          <p className="plan-note">For multi-brand and high-spend teams. White-glove onboarding.</p>
          <ul>
            <li>Dedicated CMO operator</li>
            <li>Dedicated marketing operator</li>
            <li>Custom training on your data</li>
            <li>Direct Slack with founders</li>
            <li>SOC 2 / SSO + security review</li>
            <li>Multi-brand workspace</li>
          </ul>
          <a href="#" className="btn btn-ghost" style={{ width: '100%', justifyContent: 'center' }}>Talk to founders</a>
          <p className="plan-fineprint">Average response time: under 4 hours.</p>
        </div>
      </div>
    </section>
  );
}

// ---------- VALUE STATS ----------
function ValueStats() {
  const stats = [
    ['$25M+', 'Email revenue Nara was trained on'],
    ['$100M+', 'Profitable ad spend behind Cato'],
    ['<60s', 'Brief in, first draft out'],
    ['24/7', 'Operators never sleep, never invoice'],
  ];
  return (
    <section className="wrap value-stats">
      <h2 className="pricing-h2"><span className="gradient-text">A senior team costs $20k/mo. Vexa costs $120.</span></h2>
      <p className="pricing-sub">A senior CMO and a lifecycle marketer would run you a six-figure quarter. Vexa ships their work for the price of a tank of gas.</p>
      <div className="value-stats-grid">
        {stats.map(([n, l]) => (
          <div key={n} className="value-stat">
            <div className="value-stat-num gradient-text">{n}</div>
            <div className="value-stat-lbl">{l}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ---------- INCLUDED ----------
function WhatsIncluded() {
  const blocks = [
    {
      title: 'Done-for-you email',
      icon: '✉',
      items: [
        'Lifecycle flows · welcome, abandon, post-purchase, winback',
        'Weekly campaigns drafted in your voice',
        'Segment reports + send-time recommendations',
        'A/B drafts on every send',
      ],
    },
    {
      title: 'Done-for-you paid',
      icon: '◎',
      items: [
        'Creative concepting + copy + static / video briefs',
        'Audience and budget recommendations',
        'Fatigue detection, kill rules, scaling rules',
        'Weekly ad-spend report with next moves',
      ],
    },
    {
      title: 'Strategy + judgment',
      icon: '✦',
      items: [
        'Brand-voice training before anything ships',
        'Competitor scan refreshed weekly',
        'Funnel + cohort analysis across channels',
        'Slack updates that read like a CMO wrote them',
      ],
    },
  ];
  return (
    <section className="wrap whats-included">
      <h2 className="pricing-h2"><span className="gradient-text">Everything a senior team would do, on Day 1.</span></h2>
      <p className="pricing-sub">No tier-locked features. No usage caps. No surprise overages on ad spend or sends.</p>
      <div className="included-grid">
        {blocks.map(b => (
          <div key={b.title} className="included-card">
            <div className="included-icon mono">{b.icon}</div>
            <h3 className="included-title">{b.title}</h3>
            <ul>{b.items.map(i => <li key={i}>{i}</li>)}</ul>
          </div>
        ))}
      </div>
    </section>
  );
}

// ---------- TRUST ----------
function Trust() {
  return (
    <section className="wrap trust-section">
      <div className="trust-row">
        <div className="trust-item">
          <div className="trust-icon">⚡</div>
          <div>
            <div className="trust-title">Live in under an hour</div>
            <div className="trust-sub">Connect your stack, approve voice, ship campaign one.</div>
          </div>
        </div>
        <div className="trust-item">
          <div className="trust-icon">🔒</div>
          <div>
            <div className="trust-title">Private by default</div>
            <div className="trust-sub">Your data never trains a model another customer sees.</div>
          </div>
        </div>
        <div className="trust-item">
          <div className="trust-icon">🛡</div>
          <div>
            <div className="trust-title">Stripe checkout</div>
            <div className="trust-sub">256-bit secure. PCI-DSS Level 1.</div>
          </div>
        </div>
        <div className="trust-item">
          <div className="trust-icon">↺</div>
          <div>
            <div className="trust-title">Cancel any time</div>
            <div className="trust-sub">14-day money-back. No hidden fees, no exit calls.</div>
          </div>
        </div>
      </div>
      <div className="integrations-row">
        <div className="integrations-label mono">Plays nice with</div>
        <div className="integrations-list">
          {['Klaviyo','Mailchimp','Customer.io','Postmark','Meta Ads','Google Ads','TikTok','Reddit','Shopify','Stripe','Segment','Mixpanel'].map(n => (
            <span key={n} className="integration-chip">{n}</span>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- COMPARE ----------
function Compare() {
  const rows = [
    ['Senior CMO', '$18,000+', '$20,000+', 'Included'],
    ['Senior email marketer', '$8,000+', '$10,000+', 'Included'],
    ['Creative ops', '$4,000+', '$6,000+', 'Included'],
    ['Tooling (Klaviyo, ads QA, reporting)', '$1,500+', '$2,000+', 'Included'],
    ['Total monthly cost', '$31,500+', '$38,000+', '$120/mo'],
  ];
  return (
    <section className="wrap compare-section">
      <h2 className="pricing-h2"><span className="gradient-text">What founders pay for the same output.</span></h2>
      <p className="pricing-sub">In-house and agency benchmarks based on 200+ DTC and SaaS founders we've talked to in the last year.</p>
      <div className="compare-table">
        <div className="compare-head">
          <div></div>
          <div>Hiring in-house</div>
          <div>Boutique agency</div>
          <div className="compare-vexa">Vexa</div>
        </div>
        {rows.map((r, i) => (
          <div key={i} className={`compare-row ${i === rows.length - 1 ? 'compare-row-total' : ''}`}>
            <div>{r[0]}</div>
            <div>{r[1]}</div>
            <div>{r[2]}</div>
            <div className="compare-vexa">{r[3]}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ---------- TESTIMONIALS ----------
function Testimonials() {
  const items = [
    ['"Replaced our $8k/mo agency in two weeks. Cato\'s Slack updates are sharper than anything humans wrote."', 'Marcus T.', 'Founder · Halcyon Goods'],
    ['"Best $/hour I have spent on this business. Nara has paid for the year three times over in winback alone."', 'Hassan A.', 'Owner · Junction Tea'],
    ['"It is unreal that Nara can write a 6-email post-purchase flow that actually sounds like us."', 'Wes O.', 'Founder · Atlas Provisions'],
  ];
  return (
    <section className="wrap pricing-testimonials">
      <h2 className="pricing-h2"><span className="gradient-text">Founders who locked in early.</span></h2>
      <div className="pricing-tm-grid">
        {items.map(([q, n, t], i) => (
          <div key={i} className="pricing-tm">
            <blockquote>{q}</blockquote>
            <div className="pricing-tm-foot">
              <div className="pricing-tm-name">{n}</div>
              <div className="pricing-tm-title">{t}</div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ---------- GUARANTEE ----------
function Guarantee() {
  return (
    <section className="wrap guarantee-section">
      <div className="guarantee-card">
        <div className="guarantee-badge">14-DAY GUARANTEE</div>
        <h2><span className="gradient-text">If Vexa doesn't pull weight, we refund.</span></h2>
        <p>
          You have two full weeks of campaigns and ad runs to decide. If Nara and Cato are not earning their seat,
          email us and you get every dollar back. No questions, no exit interview, no clawbacks.
        </p>
        <div className="guarantee-meta">
          <span><strong>$0</strong> setup</span>
          <span><strong>0%</strong> spend tax</span>
          <span><strong>1-click</strong> cancel</span>
        </div>
        <a href="#plans" className="btn btn-primary btn-xl">Start risk-free <span className="mono">→</span></a>
      </div>
    </section>
  );
}

// ---------- FAQ ----------
function FAQ() {
  const [open, setOpen] = useState(0);
  const items = [
    ['Why is it so cheap?', 'Because the work runs on inference, not headcount. We charge a flat fee, not a percentage of spend, so the price stays low even when you scale.'],
    ['Do you charge per send or per ad spend?', 'No. Unlimited email volume, unlimited ad creative, unlimited ad accounts. Your only cost is the flat subscription.'],
    ['What if I only want one operator?', 'Single-operator plans are $129/mo monthly, $103/mo quarterly, $77/mo annual. Most teams add the second operator within the first month.'],
    ['Is there a free trial?', '14-day money-back on every plan. If Vexa is not a fit, full refund and we part friends.'],
    ['Can I switch plans?', 'Yes. Upgrade and the difference is prorated. Downgrade and the change applies next billing cycle.'],
    ['Are there hidden fees or overages?', 'No. No setup, no spend percentage, no sends cap, no creative cap.'],
    ['What happens to my data if I cancel?', 'You can export everything (campaigns, briefs, learnings, brand voice) before you leave. We delete on request.'],
    ['Do you offer annual invoicing or PO?', 'Yes for annual and custom plans. Reach out and we will handle billing your way.'],
    ['Is there a discount for non-profits or early-stage founders?', 'Yes - 30% off any plan for verified non-profits and pre-seed founders. Email us with proof.'],
  ];
  return (
    <section id="faq" className="wrap faq-section pricing-faq" style={{ padding: '120px 24px' }}>
      <h2 className="pricing-h2 center"><span className="gradient-text">Money questions, answered.</span></h2>
      <div className="faq-list">
        {items.map(([q, a], i) => (
          <div key={i} className={`faq-item ${open === i ? 'open' : ''}`} onClick={() => setOpen(open === i ? -1 : i)}>
            <div className="faq-q"><span>{q}</span><span className="icon">+</span></div>
            <div className="faq-a">{a}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ---------- FINAL CTA ----------
function FinalCTA() {
  return (
    <section className="final-cta wrap">
      <h2 style={{ fontSize: 'clamp(48px, 7vw, 96px)' }}><span className="gradient-text">Lock in founder pricing.</span></h2>
      <p style={{ color: 'var(--soft)', fontSize: 19, maxWidth: 580, margin: '24px auto 36px', lineHeight: 1.5 }}>
        40% off, billed annually, locked for life. Two operators ship campaigns this week.
      </p>
      <div style={{ display: 'flex', gap: 12, justifyContent: 'center' }}>
        <a href="#plans" className="btn btn-primary">Claim 40% off <span className="mono">→</span></a>
        <a href="#" className="btn btn-ghost">Talk to founders</a>
      </div>
    </section>
  );
}

// ---------- FOOTER ----------
function Footer() {
  return (
    <footer>
      <div className="wrap">
        <div className="footer-grid">
          <div>
            <div className="brand"><img src="assets/logo.png" alt="logo" className="brand-logo" /></div>
            <p style={{ color: 'var(--soft)', marginTop: 18, maxWidth: 340 }}>
              Two operators trained like a senior growth team. Email revenue and paid growth, on autopilot.
            </p>
          </div>
          <div>
            <h4>Operators</h4>
            <ul><li><a href="Vexa Landing.html#operators">Nara</a></li><li><a href="Vexa Landing.html#operators">Cato</a></li></ul>
          </div>
          <div>
            <h4>Pricing</h4>
            <ul><li><a href="#plans">Plans</a></li><li><a href="#faq">FAQ</a></li></ul>
          </div>
          <div>
            <h4>Company</h4>
            <ul><li><a href="#">Careers</a></li><li><a href="#">Privacy</a></li><li><a href="#">Terms</a></li></ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© Vexa, Inc.</span>
          <span>Built for founders who ship.</span>
        </div>
      </div>
    </footer>
  );
}

// ---------- STICKY CTA ----------
function StickyCta({ plan }) {
  const planMo = Math.round(BASE * (PLANS[plan]?.mult ?? 0.60));
  const [show, setShow] = useState(false);
  useEffect(() => {
    function onS() {
      const final = document.querySelector('.final-cta');
      const footer = document.querySelector('footer');
      const y = window.scrollY;
      const past = y > window.innerHeight * 0.6;
      let nearEnd = false;
      if (final) {
        const r = final.getBoundingClientRect();
        if (r.top < window.innerHeight * 0.9) nearEnd = true;
      }
      if (footer) {
        const r = footer.getBoundingClientRect();
        if (r.top < window.innerHeight) nearEnd = true;
      }
      setShow(past && !nearEnd);
    }
    onS();
    window.addEventListener('scroll', onS, { passive: true });
    return () => window.removeEventListener('scroll', onS);
  }, []);
  return (
    <div className={`sticky-cta ${show ? 'show' : ''}`} aria-hidden={!show}>
      <div className="sticky-cta-inner">
        <div className="sticky-cta-meta">
          <div className="sticky-cta-pill mono"><span className="dot"></span> Two operators</div>
          <div className="sticky-cta-price">From <strong>${planMo}/mo</strong></div>
        </div>
        <a href="#plans" className="btn btn-primary btn-sticky">Buy now <span className="mono">→</span></a>
      </div>
    </div>
  );
}

// ---------- APP ----------
function App() {
  const [plan, setPlan] = useState('annual');
  const [modalOpen, setModalOpen] = useState(false);
  return (
    <>
      <div className="bg-aurora"></div>
      <div className="bg-grid"></div>
      <PromoBar />
      <Nav />
      <main>
        <HeroCard onOpen={() => setModalOpen(true)} />
        <Plans plan={plan} setPlan={setPlan} />
        <ValueStats />
        <WhatsIncluded />
        <Compare />
        <Trust />
        <Testimonials />
        <Guarantee />
        <FAQ />
        <FinalCTA />
      </main>
      <Footer />
      <StickyCta plan={plan} />
      <PricingModal open={modalOpen} onClose={() => setModalOpen(false)} plan={plan} setPlan={setPlan} />
    </>
  );
}

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