// sections.jsx — Rally landing page sections
// Hero (variant A + B), Trust, Categories, How it works,
// Value prop, Featured, Vendor, Local launch, Final CTA, Footer

// ── Brand SVG mark + wordmark ───────────────────────────────────────────────
function RallyMark({ size = 28, color = 'var(--coral)' }) {
  // A simple "burst / spark / confetti" mark — five rounded rays from a center.
  return (
    <svg width={size} height={size} viewBox="0 0 32 32" fill="none" aria-hidden="true">
      <g stroke={color} strokeWidth="3.2" strokeLinecap="round">
        <path d="M16 4 V11" />
        <path d="M16 21 V28" />
        <path d="M4 16 H11" />
        <path d="M21 16 H28" />
        <path d="M7.5 7.5 L12.3 12.3" />
        <path d="M19.7 19.7 L24.5 24.5" />
        <path d="M24.5 7.5 L19.7 12.3" />
        <path d="M12.3 19.7 L7.5 24.5" />
      </g>
      <circle cx="16" cy="16" r="3.2" fill={color} />
    </svg>
  );
}

function RallyLogo({ light = false }) {
  return (
    <a href="#top" className="rally-logo">
      <RallyMark size={26} color={light ? 'var(--cream)' : 'var(--coral)'} />
      <span style={{ color: light ? 'var(--cream)' : 'var(--ink)' }}>Rally</span>
    </a>
  );
}

// ── Top nav ─────────────────────────────────────────────────────────────────
function Nav({ scrolled }) {
  return (
    <header className={'nav ' + (scrolled ? 'nav--scrolled' : '')}>
      <div className="nav__inner">
        <RallyLogo />
        <nav className="nav__links">
          <a href="#categories">Browse</a>
          <a href="#how">How it works</a>
          <a href="#vendor">For vendors</a>
          <a href="#help">Help</a>
        </nav>
        <div className="nav__actions">
          <button className="btn btn--ghost">Sign in</button>
          <button className="btn btn--primary">Find rentals</button>
        </div>
      </div>
    </header>
  );
}

// ── Search bar (the hero search component) ──────────────────────────────────
function SearchBar({ compact = false }) {
  const [zip, setZip] = React.useState('92614');
  const [date, setDate] = React.useState('Sat, Jun 14');
  const [cat, setCat] = React.useState('Bounce houses');
  return (
    <div className={'search ' + (compact ? 'search--compact' : '')}>
      <label className="search__field">
        <span className="search__label">Where</span>
        <input className="search__input" value={zip} onChange={(e) => setZip(e.target.value)}
               placeholder="ZIP code" />
      </label>
      <span className="search__divider" />
      <label className="search__field">
        <span className="search__label">When</span>
        <input className="search__input" value={date} onChange={(e) => setDate(e.target.value)}
               placeholder="Add a date" />
      </label>
      <span className="search__divider" />
      <label className="search__field">
        <span className="search__label">What</span>
        <input className="search__input" value={cat} onChange={(e) => setCat(e.target.value)}
               placeholder="Anything" />
      </label>
      <button className="search__btn" aria-label="Search rentals">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
          <circle cx="11" cy="11" r="7" stroke="currentColor" strokeWidth="2.4" />
          <path d="m20 20-3.5-3.5" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" />
        </svg>
        <span>Search</span>
      </button>
    </div>
  );
}

// ── HERO A: centered search-first ───────────────────────────────────────────
function HeroCentered() {
  return (
    <section className="hero hero--centered" data-screen-label="Hero (centered)">
      <div className="hero__bg">
        <img alt=""
          src="https://images.unsplash.com/photo-1530103862676-de8c9debad1d?auto=format&fit=crop&w=2400&q=80" />
        <div className="hero__bg-veil" />
      </div>
      <div className="hero__inner">
        <div className="hero__eyebrow">
          <span className="dot" /> Now booking summer 2026
        </div>
        <h1 className="hero__h1">
          Stress-free party rentals from<br />
          <em>trusted local vendors.</em>
        </h1>
        <p className="hero__sub">
          Bounce houses, water slides, tables, tents and more — booked in minutes,
          delivered to your backyard.
        </p>
        <SearchBar />
        <div className="hero__chips">
          <span className="chip-label">Popular:</span>
          <button className="chip">Bounce houses</button>
          <button className="chip">Water slides</button>
          <button className="chip">Foam parties</button>
          <button className="chip">Tables &amp; chairs</button>
        </div>
      </div>
    </section>
  );
}

// ── HERO B: split layout ────────────────────────────────────────────────────
function HeroSplit() {
  return (
    <section className="hero hero--split" data-screen-label="Hero (split)">
      <div className="hero__inner hero__inner--split">
        <div className="hero__copy">
          <div className="hero__eyebrow">
            <span className="dot" /> Now booking summer 2026
          </div>
          <h1 className="hero__h1">
            Book the<br />
            backyard party<br />
            <em>in minutes.</em>
          </h1>
          <p className="hero__sub">
            Find bounce houses, water slides, tables, chairs and more — all in
            one place. Real availability. Transparent pricing. No phone tag.
          </p>
          <div className="hero__cta">
            <button className="btn btn--primary btn--lg">Find rentals near me</button>
            <button className="btn btn--ghost btn--lg">For vendors →</button>
          </div>
          <div className="hero__meta">
            <div className="avatars">
              <span style={{ backgroundImage: 'url(https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=80&q=80)' }} />
              <span style={{ backgroundImage: 'url(https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=80&q=80)' }} />
              <span style={{ backgroundImage: 'url(https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=80&q=80)' }} />
              <span style={{ backgroundImage: 'url(https://images.unsplash.com/photo-1531123897727-8f129e1688ce?w=80&q=80)' }} />
            </div>
            <div>
              <div className="hero__meta-stars">
                {'★★★★★'.split('').map((s, i) => <span key={i}>{s}</span>)}
                <strong>4.9</strong>
              </div>
              <div className="hero__meta-sub">From 2,400+ Southern California families</div>
            </div>
          </div>
        </div>

        <div className="hero__collage">
          <div className="collage collage--main">
            <img alt="" src="https://images.unsplash.com/photo-1530103862676-de8c9debad1d?auto=format&fit=crop&w=1200&q=80" />
          </div>
          <div className="collage collage--top">
            <img alt="" src="https://images.unsplash.com/photo-1464347744102-11db6282f854?auto=format&fit=crop&w=600&q=80" />
            <div className="collage__tag">
              <span className="dot dot--green" /> 14 vendors near you
            </div>
          </div>
          <div className="collage collage--bot">
            <img alt="" src="https://images.unsplash.com/photo-1602631985686-1bb0e6a8696e?auto=format&fit=crop&w=600&q=80" />
            <div className="collage__price">
              <strong>$219</strong> <small>/ Saturday</small>
            </div>
          </div>
          <div className="collage__sticker">
            <RallyMark size={18} color="var(--coral)" />
            <div>
              <div className="collage__sticker-t">Same-day quotes</div>
              <div className="collage__sticker-s">Avg. response: 12 min</div>
            </div>
          </div>
        </div>

        <div className="hero__searchpanel">
          <SearchBar compact />
        </div>
      </div>
    </section>
  );
}

// ── Trust bar ───────────────────────────────────────────────────────────────
function TrustBar() {
  const items = [
    { t: 'Trusted local vendors', s: 'Background-checked, insured, reviewed' },
    { t: 'Transparent pricing', s: 'No surprise fees, ever' },
    { t: 'Easy booking', s: 'Book online — no phone calls' },
    { t: 'Stress-free planning', s: 'We handle the coordination' },
  ];
  const Icon = ({ i }) => {
    const paths = [
      <g key="0"><path d="M12 3 4 7v5c0 5 3.5 8.5 8 9 4.5-.5 8-4 8-9V7l-8-4z" stroke="currentColor" strokeWidth="1.8" fill="none" strokeLinejoin="round" /><path d="m9 12 2 2 4-4" stroke="currentColor" strokeWidth="1.8" fill="none" strokeLinecap="round" strokeLinejoin="round" /></g>,
      <g key="1"><circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="1.8" fill="none" /><path d="M12 7v5l3 2" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" /><path d="M12 17v.01" stroke="currentColor" strokeWidth="2" strokeLinecap="round" /></g>,
      <g key="2"><rect x="3.5" y="5.5" width="17" height="14" rx="2.5" stroke="currentColor" strokeWidth="1.8" fill="none" /><path d="M3.5 10h17M8 3v4M16 3v4" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" /></g>,
      <g key="3"><path d="M12 21s-7-4.5-7-10a7 7 0 0 1 14 0c0 5.5-7 10-7 10z" stroke="currentColor" strokeWidth="1.8" fill="none" strokeLinejoin="round" /><circle cx="12" cy="11" r="2.5" stroke="currentColor" strokeWidth="1.8" fill="none" /></g>,
    ];
    return <svg width="22" height="22" viewBox="0 0 24 24">{paths[i]}</svg>;
  };
  return (
    <section className="trust" data-screen-label="Trust bar">
      <div className="trust__inner">
        {items.map((it, i) => (
          <div key={i} className="trust__item">
            <div className="trust__icon"><Icon i={i} /></div>
            <div>
              <div className="trust__t">{it.t}</div>
              <div className="trust__s">{it.s}</div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ── Categories grid ─────────────────────────────────────────────────────────
function Categories() {
  const cats = [
    { t: 'Bounce houses', n: '120+ rentals',
      img: 'https://images.unsplash.com/photo-1530103862676-de8c9debad1d?auto=format&fit=crop&w=900&q=80' },
    { t: 'Water slides', n: '64 rentals',
      img: 'https://images.unsplash.com/photo-1502086223501-7ea6ecd79368?auto=format&fit=crop&w=900&q=80' },
    { t: 'Obstacle courses', n: '38 rentals',
      img: 'https://images.unsplash.com/photo-1602631985686-1bb0e6a8696e?auto=format&fit=crop&w=900&q=80' },
    { t: 'Tables & chairs', n: '210+ setups',
      img: 'https://images.unsplash.com/photo-1464366400600-7168b8af9bc3?auto=format&fit=crop&w=900&q=80' },
    { t: 'Tents & canopies', n: '75 setups',
      img: 'https://images.unsplash.com/photo-1519741497674-611481863552?auto=format&fit=crop&w=900&q=80' },
    { t: 'Foam parties', n: '12 vendors',
      img: 'https://images.unsplash.com/photo-1533294455009-a77b7557d2d1?auto=format&fit=crop&w=900&q=80' },
  ];
  return (
    <section id="categories" className="cats" data-screen-label="Categories">
      <div className="section__head">
        <div>
          <div className="eyebrow">Browse</div>
          <h2 className="section__h2">Everything for the perfect backyard.</h2>
        </div>
        <a className="section__link" href="#">See all categories →</a>
      </div>
      <div className="cats__grid">
        {cats.map((c, i) => (
          <a key={i} className="cat" href="#">
            <div className="cat__img"><img alt={c.t} src={c.img} /></div>
            <div className="cat__meta">
              <div className="cat__t">{c.t}</div>
              <div className="cat__n">{c.n}</div>
            </div>
          </a>
        ))}
      </div>
    </section>
  );
}

// ── How it works ────────────────────────────────────────────────────────────
function HowItWorks() {
  const steps = [
    { n: '01', t: 'Search', s: 'Tell us your ZIP, your date, and what you need. We show real availability from local vendors near you.',
      ic: <g><circle cx="11" cy="11" r="6.5" stroke="currentColor" strokeWidth="1.8" fill="none" /><path d="m20 20-4-4" stroke="currentColor" strokeWidth="2" strokeLinecap="round" /></g> },
    { n: '02', t: 'Compare', s: 'Browse photos, dimensions and reviews. Compare price and availability side-by-side — no phone tag.',
      ic: <g><rect x="3.5" y="4.5" width="7.5" height="15" rx="2" stroke="currentColor" strokeWidth="1.8" fill="none" /><rect x="13" y="4.5" width="7.5" height="9" rx="2" stroke="currentColor" strokeWidth="1.8" fill="none" /></g> },
    { n: '03', t: 'Book', s: 'Pay securely online. Vendor handles delivery, setup and pickup — you handle the cake.',
      ic: <g><path d="M5 7h14l-1.5 11a2 2 0 0 1-2 1.7H8.5A2 2 0 0 1 6.5 18L5 7z" stroke="currentColor" strokeWidth="1.8" fill="none" strokeLinejoin="round" /><path d="M9 7V5a3 3 0 0 1 6 0v2" stroke="currentColor" strokeWidth="1.8" fill="none" strokeLinecap="round" /></g> },
  ];
  return (
    <section id="how" className="how" data-screen-label="How it works">
      <div className="section__head section__head--center">
        <div className="eyebrow">How it works</div>
        <h2 className="section__h2">Three steps to a fully-booked backyard.</h2>
      </div>
      <div className="how__grid">
        {steps.map((s, i) => (
          <div key={i} className="how__card">
            <div className="how__top">
              <div className="how__ic">
                <svg width="28" height="28" viewBox="0 0 24 24">{s.ic}</svg>
              </div>
              <span className="how__n">{s.n}</span>
            </div>
            <div className="how__t">{s.t}</div>
            <div className="how__s">{s.s}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ── Value prop ──────────────────────────────────────────────────────────────
function ValueProp() {
  const points = [
    { t: 'Fewer phone calls', s: 'Quote, compare and book — all online.' },
    { t: 'Real availability', s: 'See exactly what is free on your date.' },
    { t: 'Trusted vendors', s: 'Insured, reviewed, and rally-vetted.' },
    { t: 'Simple booking', s: 'One checkout, one receipt, no surprises.' },
  ];
  return (
    <section className="value" data-screen-label="Value prop">
      <div className="value__inner">
        <div className="value__copy">
          <div className="eyebrow">Why Rally</div>
          <h2 className="section__h2">
            The easiest way to plan<br />backyard celebrations.
          </h2>
          <p className="section__lede">
            Stop juggling 8 vendor websites and unanswered voicemails. Rally
            brings every local rental — and every available date — into one
            calm, beautiful place.
          </p>
          <ul className="value__list">
            {points.map((p, i) => (
              <li key={i}>
                <span className="value__check">
                  <svg width="14" height="14" viewBox="0 0 14 14"><path d="m3 7.5 3 3 5-6" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round" /></svg>
                </span>
                <div>
                  <strong>{p.t}</strong>
                  <span> — {p.s}</span>
                </div>
              </li>
            ))}
          </ul>
          <button className="btn btn--primary btn--lg" style={{ marginTop: 28 }}>Browse rentals</button>
        </div>
        <div className="value__visual">
          <div className="value__big">
            <img alt="" src="https://images.unsplash.com/photo-1558981852-426c6c22a060?auto=format&fit=crop&w=1100&q=80" />
          </div>
          <div className="value__floater value__floater--a">
            <div className="floater__row">
              <div className="floater__icn" style={{ background: 'var(--coral-tint)' }}>
                <svg width="16" height="16" viewBox="0 0 24 24"><path d="m4 12 5 5L20 6" stroke="var(--coral)" strokeWidth="2.2" fill="none" strokeLinecap="round" strokeLinejoin="round" /></svg>
              </div>
              <div>
                <div className="floater__t">Booking confirmed</div>
                <div className="floater__s">Sat, Jun 14 • Carlos &amp; Co.</div>
              </div>
            </div>
          </div>
          <div className="value__floater value__floater--b">
            <div className="floater__price">$219</div>
            <div className="floater__row" style={{ marginTop: 6 }}>
              <span className="floater__star">★ 4.96</span>
              <span className="floater__sub">218 bookings</span>
            </div>
            <div className="floater__bar"><span /></div>
            <div className="floater__sub">Saturday • 9 of 12 hours available</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── Featured rentals (horizontal scroll cards) ──────────────────────────────
function Featured() {
  const items = [
    { t: 'Castle Bounce — Princess', v: 'Bella Bounce Co.', loc: 'Irvine', dim: '13 × 13 × 14 ft',
      p: 219, r: 4.96, n: 218,
      img: 'https://images.unsplash.com/photo-1530103862676-de8c9debad1d?auto=format&fit=crop&w=900&q=80' },
    { t: 'Tropical Water Slide 18ft', v: 'Splash Bros Rentals', loc: 'Riverside', dim: '24 × 10 × 18 ft',
      p: 285, r: 4.91, n: 142,
      img: 'https://images.unsplash.com/photo-1502086223501-7ea6ecd79368?auto=format&fit=crop&w=900&q=80' },
    { t: 'Farmhouse Tables & Chairs (Set of 8)', v: 'Long Beach Events', loc: 'Long Beach', dim: 'Seats 64',
      p: 168, r: 4.99, n: 96,
      img: 'https://images.unsplash.com/photo-1464366400600-7168b8af9bc3?auto=format&fit=crop&w=900&q=80' },
    { t: 'Foam Party Cannon + Operator', v: 'Foamtastic SoCal', loc: 'Anaheim', dim: '2 hr session',
      p: 349, r: 4.88, n: 51,
      img: 'https://images.unsplash.com/photo-1533294455009-a77b7557d2d1?auto=format&fit=crop&w=900&q=80' },
    { t: 'Obstacle Course — Tropical', v: 'Jumpers OC', loc: 'Tustin', dim: '40 × 12 × 14 ft',
      p: 459, r: 4.94, n: 73,
      img: 'https://images.unsplash.com/photo-1602631985686-1bb0e6a8696e?auto=format&fit=crop&w=900&q=80' },
    { t: '20×20 Backyard Tent', v: 'Inland Tent Co.', loc: 'Rancho Cucamonga', dim: '20 × 20 ft',
      p: 320, r: 4.92, n: 38,
      img: 'https://images.unsplash.com/photo-1519741497674-611481863552?auto=format&fit=crop&w=900&q=80' },
  ];
  const railRef = React.useRef(null);
  const scroll = (dir) => {
    const el = railRef.current;
    if (!el) return;
    el.scrollBy({ left: dir * (el.clientWidth * 0.85), behavior: 'smooth' });
  };
  return (
    <section className="feat" data-screen-label="Featured rentals">
      <div className="section__head">
        <div>
          <div className="eyebrow">Featured this week</div>
          <h2 className="section__h2">Loved by Southern California families.</h2>
        </div>
        <div className="feat__nav">
          <button className="iconbtn" onClick={() => scroll(-1)} aria-label="Previous">
            <svg width="18" height="18" viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round" /></svg>
          </button>
          <button className="iconbtn" onClick={() => scroll(1)} aria-label="Next">
            <svg width="18" height="18" viewBox="0 0 24 24"><path d="m9 6 6 6-6 6" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round" /></svg>
          </button>
        </div>
      </div>
      <div className="feat__rail" ref={railRef}>
        {items.map((it, i) => (
          <a key={i} className="card" href="#">
            <div className="card__img">
              <img alt={it.t} src={it.img} />
              <button className="card__heart" aria-label="Save">
                <svg width="18" height="18" viewBox="0 0 24 24"><path d="M12 20s-7-4.5-7-10a4.5 4.5 0 0 1 8-2.8A4.5 4.5 0 0 1 19 10c0 5.5-7 10-7 10z" stroke="white" strokeWidth="2" fill="rgba(0,0,0,.18)" strokeLinejoin="round" /></svg>
              </button>
              <div className="card__badge">Available {' '}<span>Sat, Jun 14</span></div>
            </div>
            <div className="card__body">
              <div className="card__row">
                <div className="card__t">{it.t}</div>
                <div className="card__r">★ {it.r}</div>
              </div>
              <div className="card__sub">{it.v} · {it.loc}</div>
              <div className="card__sub">{it.dim}</div>
              <div className="card__price"><strong>${it.p}</strong> <span>/ day</span></div>
            </div>
          </a>
        ))}
      </div>
    </section>
  );
}

// ── Vendor section ──────────────────────────────────────────────────────────
function Vendor() {
  const features = [
    { t: 'Booking management', s: 'A real calendar your team can rely on.', ic: <g><rect x="3.5" y="5.5" width="17" height="14" rx="2.5" stroke="currentColor" strokeWidth="1.8" fill="none"/><path d="M3.5 10h17M8 3v4M16 3v4" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/></g> },
    { t: 'Lead generation', s: 'Local families ready to book — not browse.', ic: <g><path d="M3 21v-7l9-9 9 9v7" stroke="currentColor" strokeWidth="1.8" fill="none" strokeLinejoin="round"/></g> },
    { t: 'Payments built in', s: 'Deposits, balances, refunds — handled.', ic: <g><rect x="3" y="6" width="18" height="13" rx="2" stroke="currentColor" strokeWidth="1.8" fill="none"/><path d="M3 11h18" stroke="currentColor" strokeWidth="1.8"/></g> },
    { t: 'Messaging', s: 'One inbox for every party on your route.', ic: <g><path d="M4 6h16v10H8l-4 4V6z" stroke="currentColor" strokeWidth="1.8" fill="none" strokeLinejoin="round"/></g> },
  ];
  return (
    <section id="vendor" className="vendor" data-screen-label="Vendor">
      <div className="vendor__inner">
        <div className="vendor__visual">
          <div className="vdash">
            <div className="vdash__hd">
              <div className="vdash__hd-l">
                <div className="vdash__avatar" />
                <div>
                  <div className="vdash__name">Carlos &amp; Co. Rentals</div>
                  <div className="vdash__sub">Riverside, CA · Pro vendor</div>
                </div>
              </div>
              <div className="vdash__pill">This week · +$4,820</div>
            </div>
            <div className="vdash__row">
              <div className="vdash__stat"><span>Bookings</span><strong>17</strong><i>+3</i></div>
              <div className="vdash__stat"><span>Open dates</span><strong>9</strong><i>this mo.</i></div>
              <div className="vdash__stat"><span>Rating</span><strong>4.96</strong><i>218 reviews</i></div>
            </div>
            <div className="vdash__cal">
              <div className="vdash__cal-hd">June 2026</div>
              <div className="vdash__cal-grid">
                {Array.from({ length: 30 }).map((_, i) => {
                  const d = i + 1;
                  const booked = [3, 7, 8, 14, 15, 21, 22, 28].includes(d);
                  const hold = [10, 17].includes(d);
                  return (
                    <div key={d} className={'vc ' + (booked ? 'vc--b' : hold ? 'vc--h' : '')}>{d}</div>
                  );
                })}
              </div>
            </div>
          </div>
          <div className="vdash__ping">
            <span className="dot dot--green" />
            <div>
              <div className="floater__t">New booking</div>
              <div className="floater__s">Tropical slide · Sat, Jun 14 · $285</div>
            </div>
          </div>
        </div>
        <div className="vendor__copy">
          <div className="eyebrow eyebrow--light">For vendors</div>
          <h2 className="section__h2 section__h2--light">
            Grow your rental business with Rally.
          </h2>
          <p className="section__lede section__lede--light">
            We handle bookings, payments and customer support so you can spend
            your weekends setting up — not chasing leads.
          </p>
          <div className="vendor__features">
            {features.map((f, i) => (
              <div key={i} className="vfeat">
                <div className="vfeat__ic"><svg width="22" height="22" viewBox="0 0 24 24">{f.ic}</svg></div>
                <div>
                  <div className="vfeat__t">{f.t}</div>
                  <div className="vfeat__s">{f.s}</div>
                </div>
              </div>
            ))}
          </div>
          <div className="vendor__cta">
            <button className="btn btn--cream btn--lg">Become a partner</button>
            <button className="btn btn--ghostlight btn--lg">See vendor pricing →</button>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── Local launch section ────────────────────────────────────────────────────
function LocalLaunch() {
  const hoods = [
    'Inland Empire', 'San Gabriel Valley', 'Orange County',
    'South Bay', 'Riverside', 'Long Beach', 'Anaheim',
    'Pasadena', 'Irvine', 'Rancho Cucamonga',
  ];
  return (
    <section className="local" data-screen-label="Local launch">
      <div className="local__inner">
        <div className="local__copy">
          <div className="eyebrow">Now serving</div>
          <h2 className="section__h2">Launching first across<br />Southern California.</h2>
          <p className="section__lede">
            We're starting close to home. Pick your neighborhood — or join the
            list and we'll tell you the moment we land in yours.
          </p>
          <div className="hoods">
            {hoods.map((h, i) => <button key={i} className="hood">{h}</button>)}
            <button className="hood hood--more">+ 14 more</button>
          </div>
        </div>
        <div className="local__map">
          <div className="map">
            <svg viewBox="0 0 320 280" className="map__svg" aria-hidden="true">
              <defs>
                <radialGradient id="rg" cx="50%" cy="50%" r="60%">
                  <stop offset="0%" stopColor="var(--coral)" stopOpacity="0.18" />
                  <stop offset="100%" stopColor="var(--coral)" stopOpacity="0" />
                </radialGradient>
              </defs>
              {/* coastline-ish outline */}
              <path d="M30 200 Q40 130 90 100 Q140 75 200 80 Q260 85 290 130 L300 200 Q260 240 200 245 Q120 255 60 240 Z"
                    fill="var(--cream)" stroke="var(--neutral-300)" strokeWidth="1" />
              <path d="M30 200 Q40 130 90 100 Q140 75 200 80 Q260 85 290 130"
                    fill="none" stroke="var(--sage)" strokeWidth="2.5" strokeOpacity="0.5" strokeDasharray="4 6" />
              <circle cx="170" cy="160" r="80" fill="url(#rg)" />
            </svg>
            {[
              { x: '32%', y: '38%', l: 'Pasadena' },
              { x: '52%', y: '52%', l: 'Riverside' },
              { x: '40%', y: '68%', l: 'Long Beach' },
              { x: '58%', y: '70%', l: 'Irvine' },
              { x: '70%', y: '58%', l: 'Rancho' },
              { x: '46%', y: '46%', l: 'Pomona' },
            ].map((p, i) => (
              <div key={i} className="pin" style={{ left: p.x, top: p.y }}>
                <span className="pin__d" />
                <span className="pin__l">{p.l}</span>
              </div>
            ))}
            <div className="map__sticker">
              <RallyMark size={18} color="var(--coral)" />
              <div>
                <div className="floater__t">120+ vendors live</div>
                <div className="floater__s">Across 38 ZIP codes</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── Final CTA ───────────────────────────────────────────────────────────────
function FinalCTA() {
  return (
    <section className="final" data-screen-label="Final CTA">
      <div className="final__inner">
        <div className="eyebrow">Ready when you are</div>
        <h2 className="final__h">
          Make party planning<br />
          <em>easier.</em>
        </h2>
        <p className="final__sub">
          Find local rentals, see real availability and book in minutes —
          all in one place.
        </p>
        <div className="final__searchwrap">
          <SearchBar />
        </div>
        <div className="final__sub final__sub--small">
          Or <a href="#">join the waitlist</a> if Rally isn't in your zip yet.
        </div>
      </div>
    </section>
  );
}

// ── Footer ──────────────────────────────────────────────────────────────────
function Footer() {
  const cols = [
    { h: 'Discover', l: ['Bounce houses', 'Water slides', 'Tents & canopies', 'Foam parties', 'Tables & chairs', 'All categories'] },
    { h: 'Rally', l: ['About', 'How it works', 'Trust & safety', 'Press', 'Careers'] },
    { h: 'Vendors', l: ['Become a partner', 'Vendor pricing', 'Vendor app', 'Resources', 'Sign in'] },
    { h: 'Help', l: ['Contact', 'FAQs', 'Cancellations', 'Insurance', 'Community guidelines'] },
  ];
  return (
    <footer className="ft" data-screen-label="Footer">
      <div className="ft__inner">
        <div className="ft__brand">
          <RallyLogo />
          <p>The modern way to plan backyard celebrations. Trusted local rentals, all in one place.</p>
          <div className="ft__sub">Now serving Southern California — coming soon to a backyard near you.</div>
        </div>
        {cols.map((c, i) => (
          <div key={i} className="ft__col">
            <div className="ft__h">{c.h}</div>
            <ul>{c.l.map((l, j) => <li key={j}><a href="#">{l}</a></li>)}</ul>
          </div>
        ))}
      </div>
      <div className="ft__base">
        <div>© 2026 Rally, Inc. · Made for families in Southern California.</div>
        <div className="ft__legal">
          <a href="#">Privacy</a><a href="#">Terms</a><a href="#">Accessibility</a><a href="#">Sitemap</a>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  RallyMark, RallyLogo, Nav, SearchBar,
  HeroCentered, HeroSplit,
  TrustBar, Categories, HowItWorks, ValueProp,
  Featured, Vendor, LocalLaunch, FinalCTA, Footer,
});