// Geez landing — body sections: ticker, two-sided, how-it-works, stats,
// earnings calculator, trust, quotes, final CTA, footer.

// ─── Live ticker ───────────────────────────────────────────────────
function Ticker() {
  const items = [
  'Driveway booked in Brookline',
  'Garage hold in SoMa',
  'Side yard at Plum Island',
  '4 spots near Fenway right now',
  'Driveway listed in Cambridge',
  'Underground bay near Union Sq',
  'Beachfront spot in Hampton',
  'Office garage open weekends',
  'Spot rented for 3 hours',
  '12 hosts joined this week'];

  const row = [...items, ...items]; // duplicate for seamless loop
  return (
    <div className="ticker" aria-hidden="true">
      <div className="ticker-track">
        {row.map((t, i) =>
        <span key={i} className="ticker-item">
            <span className="mark">!</span>
            {t}
          </span>
        )}
      </div>
    </div>);

}

// ─── Two-sided marketplace ─────────────────────────────────────────
const SIDES = {
  driver: {
    eyebrow: 'For drivers',
    title: 'Park before you say it.',
    sub: 'Find a guaranteed spot near where you\'re going — and pay before you leave the house. No circling. No "no overnight." No tickets.',
    cta: 'Join the waitlist',
    bullets: [
    { t: 'See real spots, real prices.', d: 'Every listing has a photo, an address, and a price you can trust — no bait-and-switch.' },
    { t: 'Reserve in 90 seconds.', d: 'Pick a spot, pick a time, pay. We text you the gate code and walking directions.' },
    { t: 'Extend without panic.', d: 'Tap once to add 30 minutes from your seat. We\'ll text you when your meter\'s almost up.' }],

    spec: {
      label: 'A typical ride',
      rows: [
      { l: 'Spot', v: '147 Powell St · Garage' },
      { l: 'When', v: 'Today, 3:00 – 4:30 PM' },
      { l: 'Walk', v: '3 min from your seat' },
      { l: 'Total', v: '$6.75', emphasize: true }]

    }
  },
  host: {
    eyebrow: 'For hosts',
    title: 'Your driveway, working while you are.',
    sub: 'List a single space or a thousand. Set your hours, your price, your rules. We handle bookings, payments, and the awkward "are you the parking guy?" texts.',
    cta: 'Join the host waitlist',
    bullets: [
    { t: 'Five-minute listing.', d: 'Snap a photo, drop a pin, set your hours. We help you price it from comparable spots nearby.' },
    { t: 'Guests are vetted.', d: 'Every driver is ID-verified, has a registered vehicle, and a rating you can see before they arrive.' },
    { t: 'Payouts every week.', d: 'Geez holds the charge at booking and pays you out automatically — no chasing, no cash.' }],

    spec: {
      label: 'A typical month',
      rows: [
      { l: 'Listings', v: '1 driveway' },
      { l: 'Hours / week', v: '24 (weekends only)' },
      { l: 'Avg rate', v: '$4.50 / hr' },
      { l: 'You earn', v: '$430', emphasize: true }]

    }
  }
};

function TwoSided() {
  const [side, setSide] = useState('driver');
  const data = SIDES[side];
  const ref = useReveal();
  return (
    <section className="section two-sided" id="why">
      <div className="wrap">
        <div className="section-head">
          <div className="left">
            <div className="eyebrow"><span className="dot" />One app · two sides</div>
            <h2 className="section-h">A marketplace where everybody wins. Even the driveway.</h2>
            <p className="section-sub">Geez is two products in one app: a fast way for drivers to lock in a spot, and a fast way for anybody with parking to make it pay.</p>
          </div>
          <div className="right">
            <div className="tabs" role="tablist">
              <button className={`tab ${side === 'driver' ? 'active' : ''}`} onClick={() => setSide('driver')}>I'm driving</button>
              <button className={`tab ${side === 'host' ? 'active' : ''}`} onClick={() => setSide('host')}>I have a spot</button>
            </div>
          </div>
        </div>

        <div className="two-grid" ref={ref}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 12 }}><span className="dot" />{data.eyebrow}</div>
            <h3 className="section-h" style={{ fontSize: 'clamp(32px, 3.6vw, 48px)', marginTop: 0 }}>{data.title}</h3>
            <p className="section-sub" style={{ marginTop: 8 }}>{data.sub}</p>
            <ul className="two-bullets">
              {data.bullets.map((b, i) =>
              <li key={i} className="two-bullet">
                  <div className="num">{i + 1}</div>
                  <div>
                    <div className="title">{b.t}</div>
                    <div className="desc">{b.d}</div>
                  </div>
                </li>
              )}
            </ul>
            <div style={{ marginTop: 32 }}>
              <a href="#waitlist" className="btn btn-primary btn-lg">{data.cta} <Icon name="arrowR" size={18} /></a>
            </div>
          </div>

          {/* Right: spec card */}
          <div>
            <div style={{
              background: '#fff', border: '1px solid var(--border)',
              borderRadius: 'var(--radius-2xl)', padding: 28,
              boxShadow: 'var(--shadow-md)',
              position: 'relative', overflow: 'hidden'
            }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 18 }}>
                <div className="eyebrow"><span className="dot" />{data.spec.label}</div>
                <Mark size={28} reversed={side === 'host'} />
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
                {data.spec.rows.map((r, i) =>
                <div key={i} style={{
                  display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
                  paddingBottom: i === data.spec.rows.length - 1 ? 0 : 12,
                  borderBottom: i === data.spec.rows.length - 1 ? 0 : '1px solid var(--border)'
                }}>
                    <span style={{ fontSize: 14, color: 'var(--fg-muted)', fontWeight: 500 }}>{r.l}</span>
                    <span style={{
                    fontWeight: r.emphasize ? 800 : 600,
                    fontSize: r.emphasize ? 32 : 16,
                    letterSpacing: r.emphasize ? '-0.03em' : '-0.01em',
                    color: r.emphasize ? 'var(--fg)' : 'var(--fg)',
                    fontVariantNumeric: 'tabular-nums'
                  }}>{r.v}</span>
                  </div>
                )}
              </div>
              {/* Faux mini-receipt foot */}
              <div style={{
                marginTop: 22, paddingTop: 18, borderTop: '1px dashed var(--border)',
                display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, color: 'var(--fg-muted)'
              }}>
                <Icon name="check" size={14} color="var(--geez-success)" strokeWidth={2.5} />
                {side === 'driver' ? 'Charged to •••• 4824 at booking' : 'Paid out weekly to •••• 9112'}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

// ─── How it works ──────────────────────────────────────────────────
const HOW_STEPS = [
{ t: 'Search', d: 'Type where you\'re going. We show every nearby spot with photos, walking time, and the price out the door.', icon: 'search' },
{ t: 'Hold the spot', d: 'Pick a time and tap. We charge your card, send you the access code, and reserve the spot so it\'s there when you arrive.', icon: 'pin' },
{ t: 'Park, then live', d: 'Roll up, follow the directions, park. We\'ll buzz you before your time\'s up. Tap once to extend.', icon: 'car' }];


function How() {
  const [step, setStep] = useState(0);
  const ref = useReveal();

  // Auto-advance
  useEffect(() => {
    const t = setInterval(() => setStep((s) => (s + 1) % HOW_STEPS.length), 4200);
    return () => clearInterval(t);
  }, []);

  // Right-side preview content per step
  const previews = [
  // Search
  <div key="s" style={{ padding: 18 }}>
      <div className="glass-pill search" style={{ marginBottom: 12 }}>
        <Icon name="search" size={16} color="var(--fg-muted)" /><span>1 Beacon St, Boston</span>
      </div>
      {[
    { n: '147 Powell — Garage', p: '$4.50', s: '3 min walk · Covered' },
    { n: 'Union Sq — Underground', p: '$6.00', s: '5 min walk · 24/7' },
    { n: 'Mason & Geary — Lot', p: '$5.00', s: '6 min walk · EV' }].
    map((r, i) =>
    <div key={i} className="spot-row" style={{ marginBottom: 8 }}>
          <div className="ico"><Icon name="car" size={20} color="var(--geez-yellow)" /></div>
          <div className="info">
            <div className="nm">{r.n}</div>
            <div className="sub">{r.s}</div>
          </div>
          <span className="price-chip">{r.p}/hr</span>
        </div>
    )}
    </div>,
  // Hold
  <div key="h" style={{ padding: 18 }}>
      <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--fg-muted)' }}>
        Pick a time
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 6, marginTop: 10 }}>
        {['Now', '30 min', '1 hr', '90 min', '2 hr', '4 hr'].map((s, i) =>
      <div key={i} style={{
        padding: '10px 0', textAlign: 'center',
        background: i === 3 ? 'var(--geez-black)' : '#fff',
        color: i === 3 ? '#fff' : 'var(--fg)',
        border: `1.5px solid ${i === 3 ? 'var(--geez-black)' : 'var(--border)'}`,
        borderRadius: 10, fontWeight: 600, fontSize: 12.5
      }}>{s}</div>
      )}
      </div>
      <div style={{
      marginTop: 16, padding: 14, background: 'var(--geez-ink-50)',
      borderRadius: 14, display: 'flex', justifyContent: 'space-between', alignItems: 'center'
    }}>
        <div>
          <div style={{ fontSize: 10.5, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--fg-muted)' }}>Total · 90 min</div>
          <div style={{ fontWeight: 800, fontSize: 22, letterSpacing: '-0.025em', marginTop: 2 }}>$6.75</div>
        </div>
        <span className="price-chip" style={{ padding: '8px 14px', fontSize: 13 }}>Hold spot</span>
      </div>
      <div style={{ marginTop: 12, fontSize: 12, color: 'var(--fg-muted)', display: 'flex', gap: 8, alignItems: 'center' }}>
        <Icon name="shield" size={14} color="var(--fg-muted)" /> Cancel free up to 30 min before.
      </div>
    </div>,
  // Park
  <div key="p" style={{ padding: 18 }}>
      <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, marginBottom: 8 }}>
        <span className="live-dot" />
        <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--geez-success)' }}>Parked</span>
      </div>
      <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 36, letterSpacing: '-0.03em', lineHeight: 1, fontVariantNumeric: 'tabular-nums' }}>
        1h 12m 14s
      </div>
      <div style={{ fontSize: 13, color: 'var(--fg-muted)', marginTop: 4 }}>147 Powell · Level B1</div>
      <div style={{ marginTop: 14, height: 6, background: 'var(--geez-ink-100)', borderRadius: 999, overflow: 'hidden' }}>
        <div style={{ width: '46%', height: '100%', background: 'var(--geez-yellow)' }} />
      </div>
      <div style={{ marginTop: 14, display: 'flex', gap: 8 }}>
        <div style={{ flex: 1, height: 40, borderRadius: 999, background: '#fff', border: '1.5px solid var(--border)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 13, fontWeight: 600 }}>+ Extend</div>
        <div style={{ flex: 1, height: 40, borderRadius: 999, background: 'var(--geez-black)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 13, fontWeight: 600 }}>End early</div>
      </div>
    </div>];


  return (
    <section className="section how" id="how">
      <div className="wrap">
        <div className="section-head">
          <div className="left">
            <div className="eyebrow"><span className="dot" />How it works</div>
            <h2 className="section-h">Three taps to a parked car.</h2>
            <p className="section-sub">No quarters, no apps inside apps, no "create an account to see prices." Just the spot, the time, and the door.</p>
          </div>
        </div>

        <div className="how-grid" ref={ref}>
          <div>
            {HOW_STEPS.map((s, i) =>
            <div key={i} className={`how-step ${i === step ? 'active' : ''}`} onClick={() => setStep(i)}>
                <div className="num">{i + 1}</div>
                <div>
                  <div className="title">{s.t}</div>
                  <div className="desc">{s.d}</div>
                </div>
              </div>
            )}
          </div>

          {/* Mini phone showing the active step */}
          <div style={{ display: 'flex', justifyContent: 'center' }}>
            <div className="phone" style={{ width: 280, height: 540, transform: 'rotate(2deg)' }}>
              <div className="phone-notch" />
              <div className="phone-screen" style={{ background: '#fff' }}>
                <div style={{
                  position: 'absolute', top: 56, left: 14, right: 14, zIndex: 5,
                  display: 'flex', alignItems: 'center', justifyContent: 'space-between'
                }}>
                  <Mark size={28} />
                  <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '-0.01em', color: 'var(--fg)' }}>Step {step + 1} of 3</div>
                </div>
                <div style={{ position: 'absolute', top: 110, left: 0, right: 0, bottom: 0 }}>
                  {previews[step]}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

// ─── Stats band ────────────────────────────────────────────────────
function StatNum({ value, suffix = '', duration = 1400 }) {
  const ref = useRef(null);
  const [n, setN] = useState(0);
  useEffect(() => {
    if (!ref.current) return;
    let raf, start;
    const io = new IntersectionObserver(([e]) => {
      if (!e.isIntersecting) return;
      io.disconnect();
      const animate = (t) => {
        if (!start) start = t;
        const p = Math.min(1, (t - start) / duration);
        const eased = 1 - Math.pow(1 - p, 3);
        setN(value * eased);
        if (p < 1) raf = requestAnimationFrame(animate);
      };
      raf = requestAnimationFrame(animate);
    }, { threshold: 0.4 });
    io.observe(ref.current);
    return () => {io.disconnect();cancelAnimationFrame(raf);};
  }, [value, duration]);

  const display = Number.isInteger(value) ?
  Math.round(n).toLocaleString() :
  n.toFixed(1);
  return <span ref={ref}>{display}{suffix}</span>;
}

function Stats() {
  return (
    <section className="section stats">
      <img src="assets/logos/geez_mark_reversed.svg" className="stats-watermark" alt="" />
      <div className="wrap">
        <div className="eyebrow" style={{ color: 'rgba(255,255,255,0.6)' }}><span className="dot" />Why this, why now</div>
        <h2 className="stats-head" style={{ marginTop: 14, color: '#fff' }}>
          Parking is a $141B mess. We're the cheat code.
        </h2>
        <div className="stats-grid">
          <div className="stat">
            <div className="num">$<StatNum value={141} />B</div>
            <div className="lbl">U.S. parking industry — and almost none of it goes to the people sitting on the spots.</div>
          </div>
          <div className="stat">
            <div className="num"><StatNum value={30} />%</div>
            <div className="lbl">Of urban traffic is cars hunting for a place to park. That's you, an hour late.</div>
          </div>
          <div className="stat">
            <div className="num"><StatNum value={25} />min</div>
            <div className="lbl">Average time spent circling in dense U.S. cities. Multiply by a week.</div>
          </div>
          <div className="stat">
            <div className="num"><StatNum value={0} />min</div>
            <div className="lbl">Time spent circling once you book on Geez. The spot is yours before you leave.</div>
          </div>
        </div>
      </div>
    </section>);

}

// ─── Earnings calculator ───────────────────────────────────────────
function Earnings() {
  const [spots, setSpots] = useState(1);
  const [hours, setHours] = useState(24); // hours per week available
  const [rate, setRate] = useState(4.5); // $/hr

  // Conservative: ~62% utilization × spots × hours × rate × 4.33 weeks × 0.85 (after fees)
  const monthly = Math.round(spots * hours * rate * 4.33 * 0.62 * 0.85);
  const yearly = Math.round(monthly * 12);
  const ref = useReveal();

  return (
    <section className="section earnings" id="hosts">
      <div className="wrap">
        <div className="section-head">
          <div className="left">
            <div className="eyebrow"><span className="dot" />For hosts</div>
            <h2 className="section-h">A driveway that pays the mortgage. Sort of.</h2>
            <p className="section-sub">Drag the sliders. We use real bookings near you to estimate what your space could earn — minus fees, no fine print.</p>
          </div>
        </div>

        <div className="earn-card" ref={ref}>
          <div>
            <div className="earn-row">
              <div className="lbl-row">
                <span>Spaces you'd list</span>
                <span className="val">{spots}</span>
              </div>
              <input type="range" min="1" max="20" value={spots} onChange={(e) => setSpots(+e.target.value)} className="earn-slider" />
            </div>
            <div className="earn-row">
              <div className="lbl-row">
                <span>Hours per week available</span>
                <span className="val">{hours} hrs</span>
              </div>
              <input type="range" min="4" max="168" step="2" value={hours} onChange={(e) => setHours(+e.target.value)} className="earn-slider" />
            </div>
            <div className="earn-row" style={{ marginBottom: 8 }}>
              <div className="lbl-row">
                <span>Your hourly rate</span>
                <span className="val">${rate.toFixed(2)}</span>
              </div>
              <input type="range" min="1.5" max="12" step="0.25" value={rate} onChange={(e) => setRate(+e.target.value)} className="earn-slider" />
            </div>
            <div style={{ fontSize: 13, color: 'var(--fg-muted)', lineHeight: 1.5, marginTop: 18 }}>
              Estimate assumes ~62% utilization based on early-tester markets and accounts for the 15% Geez service fee.
            </div>
          </div>

          <div className="earn-result">
            <img src="assets/logos/geez_mark_reversed.svg" className="mark-wm" alt="" />
            <div className="lbl">You could earn</div>
            <div className="big">
              ${monthly.toLocaleString()}<span className="unit">/mo</span>
            </div>
            <div style={{ fontSize: 14, color: 'rgba(255,255,255,0.7)', marginTop: 6 }}>
              ≈ ${yearly.toLocaleString()} a year
            </div>
            <div className="fine">
              Paid out weekly. Free to list. No long-term contract. Cancel a booking, cancel your account — your call.
            </div>
            <div style={{ marginTop: 18 }}>
              <a href="#waitlist" className="btn btn-accent">Get on the host waitlist <Icon name="arrowR" size={16} /></a>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

// ─── Trust strip ───────────────────────────────────────────────────
function Trust() {
  const items = [
  { i: 'shield', t: 'Verified hosts', d: 'Every host is ID-checked and their listing is reviewed before it goes live.' },
  { i: 'wallet', t: 'Held until you park', d: 'We don\'t pay the host until your session starts. No spot, full refund — automatic.' },
  { i: 'timer', t: 'Real-time support', d: 'Locked out of a garage at 11 PM? We\'re one tap away, on call seven days.' },
  { i: 'star', t: 'Two-way ratings', d: 'Drivers rate hosts, hosts rate drivers. Bad actors don\'t last on either side.' }];

  const ref = useReveal();
  return (
    <section className="section-tight" id="support">
      <div className="wrap">
        <div className="section-head" style={{ marginBottom: 32 }}>
          <div className="left">
            <div className="eyebrow"><span className="dot" />Trust &amp; safety</div>
            <h2 className="section-h" style={{ fontSize: 'clamp(28px, 3vw, 40px)' }}>Both sides covered, neither side gouged.</h2>
          </div>
        </div>
        <div className="trust-strip reveal" ref={ref}>
          {items.map((it, i) =>
          <div key={i} className="trust-item">
              <div className="ico"><Icon name={it.i} size={20} color="var(--geez-black)" strokeWidth={2} /></div>
              <div className="ttl">{it.t}</div>
              <div className="desc">{it.d}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ─── Quotes / testimonials ─────────────────────────────────────────
function Quotes() {
  const qs = [
  { q: 'I used to budget twenty minutes of cursing into every trip to the North End. Now I just pay six bucks and go eat.', n: 'Chris M.', r: 'Driver · Boston', i: 'CM' },
  { q: 'My driveway is empty Monday through Friday while I\'m at work. It just paid for my kid\'s soccer registration.', n: 'Helen P.', r: 'Host · Cambridge', i: 'HP' },
  { q: 'Booked a side yard four blocks from Fenway for twenty-five bucks. The Green Monster has nothing on this app.', n: 'Erin K.', r: 'Driver · Brookline', i: 'EK' }];

  const ref = useReveal();
  return (
    <section className="section-tight" style={{ background: 'var(--geez-ink-50)' }}>
      <div className="wrap">
        <div className="section-head">
          <div className="left">
            <div className="eyebrow"><span className="dot" />Real early testers</div>
            <h2 className="section-h">"Seriously, parking doesn't have to be this hard."</h2>
            <p className="section-sub">2,400 drivers and 320 hosts in our pilot markets. Here's what they said.</p>
          </div>
        </div>
        <div className="quotes-grid reveal" ref={ref}>
          {qs.map((q, i) =>
          <div key={i} className="quote-card">
              <Mark size={28} reversed={i === 1} rotate={false} />
              <div className="body">"{q.q}"</div>
              <div className="who">
                <div className="av">{q.i}</div>
                <div>
                  <div className="nm">{q.n}</div>
                  <div className="role">{q.r}</div>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ─── Final CTA ─────────────────────────────────────────────────────
function FinalCTA() {
  const [side, setSide] = useState('driver');
  const [email, setEmail] = useState('');
  const [city, setCity] = useState('');
  const [submitted, setSubmitted] = useState(false);
  const [error, setError] = useState('');
  const warmedRef = useRef(false);
  const sectionRef = useRef(null);

  // Persist join state across reloads.
  useEffect(() => {
    try {
      const saved = localStorage.getItem('geez_waitlist');
      if (saved) {
        const j = JSON.parse(saved);
        setSubmitted(true);
        setSide(j.side || 'driver');
        setEmail(j.email || '');
      }
    } catch (e) {}
  }, []);

  // Apps Script cold starts cost 1–3s on the first request. Firing a GET when
  // the user scrolls to the waitlist (or focuses the email field) wakes the
  // isolate so the real POST returns in a few hundred ms.
  const warm = () => {
    if (warmedRef.current) return;
    const endpoint = (window.GEEZ_CONFIG || {}).waitlistEndpoint || '';
    if (!endpoint || endpoint.includes('REPLACE_WITH_DEPLOYMENT_ID')) return;
    warmedRef.current = true;
    fetch(endpoint, { method: 'GET', mode: 'no-cors', cache: 'no-store' }).catch(() => {});
  };

  useEffect(() => {
    if (!sectionRef.current || !('IntersectionObserver' in window)) return;
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { warm(); io.disconnect(); }
    }, { threshold: 0.15 });
    io.observe(sectionRef.current);
    return () => io.disconnect();
  }, []);

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(email)) {
      setError('Please enter a valid email.');
      return;
    }
    setError('');

    const endpoint = (window.GEEZ_CONFIG || {}).waitlistEndpoint || '';
    const payload = { side, email, city };

    // Optimistic: flip to success immediately so the click feels instant.
    setSubmitted(true);

    // Background-confirm. Only persist to localStorage on success so a refresh
    // after a failed submit returns the user to the form, not a fake success.
    (async () => {
      try {
        if (endpoint && !endpoint.includes('REPLACE_WITH_DEPLOYMENT_ID')) {
          const res = await fetch(endpoint, {
            method: 'POST',
            mode: 'cors',
            headers: { 'Content-Type': 'text/plain;charset=utf-8' },
            body: JSON.stringify(payload),
            redirect: 'follow'
          });
          const data = await res.json().catch(() => ({}));
          if (!res.ok || data.ok === false) throw new Error(data.error || 'submit_failed');
        }
        try { localStorage.setItem('geez_waitlist', JSON.stringify({ ...payload, at: Date.now() })); } catch (e) {}
      } catch (err) {
        setSubmitted(false);
        setError("Couldn't reach the waitlist. Mind trying again?");
      }
    })();
  };

  const reset = () => {
    try {localStorage.removeItem('geez_waitlist');} catch (e) {}
    setSubmitted(false);
    setError('');
  };

  return (
    <section className="final" id="waitlist" ref={sectionRef}>
      <img src="assets/logos/geez_mark_reversed.svg" className="final-mark" alt="" />
      <div className="wrap">
        <div className="waitlist-grid">
          <div>
            <div className="eyebrow" style={{ color: 'rgba(255,255,255,0.55)' }}>
              <span className="dot" />Join the waitlist
            </div>
            <h2 style={{ marginTop: 14 }}>The last time<br />you'll say it.</h2>
            <p>We're rolling Geez out city by city in 2026. Drop your email and we'll text you the day we light up your block — no spam, no marketing avalanche.</p>
          </div>

          <div className="waitlist-card">
            {!submitted ?
            <form onSubmit={handleSubmit}>
                <div className="waitlist-toggle">
                  <button type="button"
                className={`waitlist-toggle-opt ${side === 'driver' ? 'active' : ''}`}
                onClick={() => setSide('driver')}>
                    <Icon name="car" size={16} />
                    I want to park
                  </button>
                  <button type="button"
                className={`waitlist-toggle-opt ${side === 'host' ? 'active' : ''}`}
                onClick={() => setSide('host')}>
                    <Icon name="house" size={16} />
                    I have a space
                  </button>
                </div>

                <label className="waitlist-field">
                  <span className="waitlist-label">Email</span>
                  <input type="email" required value={email} onChange={(e) => setEmail(e.target.value)}
                onFocus={warm}
                placeholder="you@example.com" autoComplete="email" />
                </label>
                <label className="waitlist-field">
                  <span className="waitlist-label">City</span>
                  <input type="text" value={city} onChange={(e) => setCity(e.target.value)}
                placeholder={side === 'driver' ? 'Where do you park?' : 'Where\'s the space?'} autoComplete="address-level2" />
                </label>

                {error && (
                  <div role="alert" style={{
                    marginBottom: 10, padding: '10px 14px',
                    background: 'rgba(200, 52, 31, 0.08)',
                    color: 'var(--geez-danger)',
                    border: '1px solid rgba(200, 52, 31, 0.18)',
                    borderRadius: 'var(--radius-md)',
                    fontSize: 13.5, fontWeight: 600,
                    lineHeight: 1.4
                  }}>{error}</div>
                )}

                <button type="submit" className="btn btn-accent btn-lg waitlist-submit">
                  {side === 'driver' ? 'Join the waitlist' : 'Join as a host'}
                  <Icon name="arrowR" size={18} />
                </button>
                <div className="waitlist-fine">
                  Free, no spam. We'll only email when Geez goes live in your city.
                </div>
              </form> :

            <div className="waitlist-done">
                <div className="waitlist-check">
                  <Icon name="check" size={32} color="var(--geez-black)" strokeWidth={3} />
                </div>
                <div className="waitlist-done-h">You're in.</div>
                <p className="waitlist-done-sub" style={{ color: "rgb(0, 0, 0)" }}>
                  We'll email <strong style={{ color: 'var(--fg)' }}>{email || 'you'}</strong> the second {side === 'driver' ? 'parking opens' : 'hosts can list'} in {city || 'your city'}. In the meantime, tell a circling friend.
                </p>
                <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
                  <a className="btn btn-primary" href="https://twitter.com/intent/tweet?text=Joined%20the%20Geez%20waitlist.%20The%20last%20time%20you%27ll%20say%20it.%20https%3A%2F%2Fgeez.app" target="_blank" rel="noreferrer">Share on X</a>
                  <button className="btn btn-ghost" onClick={reset} style={{ color: 'var(--fg)', background: '#fff' }}>Edit details</button>
                </div>
              </div>
            }
          </div>
        </div>
      </div>
    </section>);

}

// ─── Footer ────────────────────────────────────────────────────────
function Footer() {
  return (
    <footer>
      <div className="wrap">
        <div className="foot-grid">
          <div className="foot-brand">
            <div className="foot-lock">
              <span className="foot-wordmark">Geez</span>
              <Mark size={28} />
            </div>
            <p>The last time you'll say it. A mobile marketplace for parking — built for circling cities, beach towns, and event nights.</p>
          </div>
          <div className="foot-col">
            <h4>Drivers</h4>
            <a href="#">Find parking</a>
            <a href="#">How it works</a>
            <a href="#">Cities</a>
            <a href="#">Pricing</a>
          </div>
          <div className="foot-col">
            <h4>Hosts</h4>
            <a href="#">List your space</a>
            <a href="#">Earnings calculator</a>
            <a href="#">Host insurance</a>
            <a href="#">For operators</a>
          </div>
          <div className="foot-col">
            <h4>Company</h4>
            <a href="#">About</a>
            <a href="#">Press</a>
            <a href="#">Careers</a>
            <a href="#">Brand kit</a>
          </div>
          <div className="foot-col">
            <h4>Help</h4>
            <a href="#">Support</a>
            <a href="#">Trust &amp; safety</a>
            <a href="#">Terms</a>
            <a href="#">Privacy</a>
          </div>
        </div>
        <div className="foot-fine">
          <div>© 2026 Geez Founding Team. · Built so you stop circling.</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <Mark size={18} rotate={false} />
            <span>v1.0

</span>
          </div>
        </div>
      </div>
    </footer>);}

Object.assign(window, { Ticker, TwoSided, How, Stats, Earnings, Trust, Quotes, FinalCTA, Footer });