// Geez landing — hero section with the live phone preview.

function Nav() {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const on = () => setScrolled(window.scrollY > 12);
    on();
    window.addEventListener('scroll', on, { passive: true });
    return () => window.removeEventListener('scroll', on);
  }, []);
  return (
    <nav className={`geez-nav ${scrolled ? 'scrolled' : ''}`}>
      <div className="geez-nav-inner">
        <a href="#" className="geez-nav-lock" aria-label="Geez home">
          <span className="geez-nav-wordmark">Geez</span>
          <Mark size={26} />
        </a>
        <div className="geez-nav-links">
          <a href="#how">How it works</a>
          <a href="#hosts">For hosts</a>
          <a href="#why">Why Geez</a>
          <a href="#support">Support</a>
        </div>
        <div className="geez-nav-actions">
          <a href="#" className="btn btn-ghost btn-sm" style={{ display: 'inline-flex' }}>Sign in</a>
          <a href="#waitlist" className="btn btn-accent btn-sm">Join the waitlist</a>
        </div>
      </div>
    </nav>
  );
}

// ─── The animated phone, with map + pins + live booking pings ──────
const HERO_SPOTS = [
  { id: 'a', x: 28, y: 30, price: '$4',  name: '147 Powell — Garage',  walk: '3 min walk' },
  { id: 'b', x: 65, y: 24, price: '$6',  name: 'Union Sq — Underground', walk: '5 min walk' },
  { id: 'c', x: 22, y: 60, price: '$3',  name: 'Mason & Geary — Lot',  walk: '6 min walk' },
  { id: 'd', x: 72, y: 56, price: '$5',  name: '480 Sutter — Driveway', walk: '4 min walk' },
  { id: 'e', x: 45, y: 42, price: '$4',  name: 'Geary — Side spot',    walk: '2 min walk', dark: true },
];

function LivePhone() {
  const [activeIdx, setActiveIdx] = useState(0);
  const [bookedCount, setBookedCount] = useState(143);

  // Auto-cycle the selected pin every few seconds, increment booking counter
  useEffect(() => {
    const t = setInterval(() => setActiveIdx(i => (i + 1) % HERO_SPOTS.length), 3200);
    return () => clearInterval(t);
  }, []);
  useEffect(() => {
    const t = setInterval(() => setBookedCount(c => c + 1 + Math.floor(Math.random()*2)), 5400);
    return () => clearInterval(t);
  }, []);

  const active = HERO_SPOTS[activeIdx];

  return (
    <div className="phone-stage">
      {/* Floating card — live status (top-left) */}
      <div className="float-card fc-1">
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <span className="live-dot" />
          <span className="lbl">Live now</span>
        </div>
        <div className="val" style={{ fontSize: 22, marginTop: 6 }}>
          {bookedCount.toLocaleString()}<span style={{ fontSize: 13, color: 'var(--fg-muted)', fontWeight: 600, marginLeft: 6 }}>parked today</span>
        </div>
      </div>

      {/* Floating card — price (top-right) */}
      <div className="float-card fc-2" style={{ padding: '12px 14px' }}>
        <div className="lbl" style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
          <Icon name="bolt" size={11} color="var(--fg-muted)" /> Held in 3 sec
        </div>
        <div className="val" style={{ fontSize: 17, marginTop: 4, display: 'flex', alignItems: 'center', gap: 6 }}>
          {active.name.split('—')[0]}
          <span style={{ background: 'var(--geez-yellow)', color: 'var(--geez-black)', borderRadius: 999, padding: '2px 8px', fontSize: 12 }}>{active.price}/hr</span>
        </div>
      </div>

      {/* Floating card — timer (bottom-left) */}
      <div className="float-card fc-3">
        <div className="lbl">Session</div>
        <div className="val" style={{ fontSize: 22, marginTop: 4, fontVariantNumeric: 'tabular-nums' }}>
          1h 12m 14s
        </div>
        <div style={{ marginTop: 8, height: 4, background: 'var(--geez-ink-100)', borderRadius: 999, overflow: 'hidden', width: 110 }}>
          <div style={{ width: '46%', height: '100%', background: 'var(--geez-yellow)' }} />
        </div>
      </div>

      {/* The phone */}
      <div className="phone">
        <div className="phone-notch" />
        <div className="phone-screen">
          {/* Map */}
          <div className="fake-map" />

          {/* Top search bar */}
          <div className="phone-topbar">
            <div className="glass-pill square"><Icon name="menu" size={18} /></div>
            <div className="glass-pill search"><Icon name="search" size={16} color="var(--fg-muted)" /><span>Find parking near you</span></div>
            <div className="glass-pill square"><Icon name="user" size={18} /></div>
          </div>

          {/* Pins */}
          {HERO_SPOTS.map((s, i) => (
            <div key={s.id}
              className={`map-pin ${s.dark || i === activeIdx ? 'dark' : ''}`}
              style={{ left: `${s.x}%`, top: `${s.y}%`, transform: i === activeIdx ? 'scale(1.08)' : '' }}
              onMouseEnter={() => setActiveIdx(i)}>
              {i === activeIdx && <span className="ping" />}
              {s.price}
            </div>
          ))}

          {/* You-are-here */}
          <div className="you-puck" style={{ left: '48%', top: '74%' }} />

          {/* Bottom sheet preview */}
          <div className="phone-sheet">
            <div className="grabber" />
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', padding: '0 4px 8px' }}>
              <div>
                <div style={{ fontWeight: 800, fontSize: 16, letterSpacing: '-0.02em', color: 'var(--geez-black)' }}>
                  {active.name}
                </div>
                <div style={{ fontSize: 12, color: 'var(--fg-muted)', marginTop: 2 }}>
                  {active.walk} · Open until 11pm
                </div>
              </div>
              <span className="price-chip">{active.price}/hr</span>
            </div>
            <div className="spot-row">
              <div className="ico"><Icon name="car" size={20} color="var(--geez-yellow)" /></div>
              <div className="info">
                <div className="nm">{HERO_SPOTS[(activeIdx+1) % HERO_SPOTS.length].name}</div>
                <div className="sub">Covered · EV · Step-free</div>
              </div>
              <span className="price-chip" style={{ background: 'var(--geez-ink-100)' }}>{HERO_SPOTS[(activeIdx+1) % HERO_SPOTS.length].price}/hr</span>
            </div>
            <button style={{
              width: '100%', height: 46, marginTop: 4,
              background: 'var(--geez-yellow)', color: 'var(--geez-black)',
              border: 0, borderRadius: 999,
              fontWeight: 700, fontSize: 14.5, letterSpacing: '-0.01em',
              cursor: 'pointer',
            }}>Hold this spot</button>
          </div>
        </div>
      </div>
    </div>
  );
}

function Hero() {
  const ref = useReveal();
  return (
    <section className="hero" id="top">
      <div className="hero-bg" />
      <img src="assets/logos/geez_mark_color.svg" className="hero-watermark" alt="" />
      <div className="wrap">
        <div className="hero-grid">
          <div ref={ref} className="reveal">
            <div className="eyebrow"><span className="dot" />Mobile parking marketplace · launching 2026</div>
            <h1 className="display" style={{ marginTop: 18 }}>
              Park before<br/>you <span className="yellow-bar">say it.</span>
            </h1>
            <p className="subhead-xl" style={{ marginTop: 24 }}>
              Geez connects you to driveways, garages, and side yards near where you're going — so you can find and book a spot in seconds, not 25 minutes of circling.
            </p>
            <div className="hero-cta-row">
              <a href="#waitlist" className="btn btn-accent btn-lg">
                Join the waitlist <Icon name="arrowR" size={18} />
              </a>
              <a href="#waitlist" className="btn btn-ghost btn-lg">
                I have a space
              </a>
            </div>
            <div className="hero-quiet-row">
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
                <Stars />
                <strong style={{ color: 'var(--fg)' }}>4.8</strong> from 2,400 early testers
              </span>
              <span className="divider-dot" />
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
                <Icon name="bolt" size={16} color="var(--fg-muted)" />
                Be first in line when we launch
              </span>
              <span className="divider-dot" />
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
                <Icon name="shield" size={16} color="var(--fg-muted)" />
                Free, no spam, one email
              </span>
            </div>
          </div>

          <LivePhone />
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Nav, Hero });