/* global React, ReactDOM */
const { useState, useEffect, useRef } = React;

const PHONE = "619-617-4905";
const PHONE_RAW = "6196174905";

/* ──────────── BRAND MARK ──────────── */
function BrandMark() {
  return (
    <a href="#top" className="nav__brand">
      <img src="assets/logo.png" alt="Stars Party Bus" className="nav__logo-img" style={{height:"80px",width:"auto",maxWidth:"240px",display:"block",objectFit:"contain"}} />
    </a>
  );
}

/* ──────────── NAV ──────────── */
function Nav() {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 30);
    onScroll();
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  useEffect(() => {
    document.body.style.overflow = open ? "hidden" : "";
  }, [open]);

  const links = [
    ["Experience", "#experience"],
    ["Occasions", "#occasions"],
    ["Gallery", "#gallery"],
    ["About", "#about"],
    ["Pricing", "#pricing"],
    ["Hostess Add-On", "#hostess"],
    ["FAQ", "#faq"],
  ];

  return (
    <>
      <nav className={`nav ${scrolled ? "scrolled" : ""}`}>
        <BrandMark />
        <ul className="nav__links">
          {links.map(([l, h]) => (
            <li key={h}><a href={h}>{l}</a></li>
          ))}
        </ul>
        <div className="nav__cta">
          <a className="nav__phone" href={`tel:${PHONE_RAW}`}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
              <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.95.38 1.87.74 2.75a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.33-1.33a2 2 0 0 1 2.11-.45c.88.36 1.8.61 2.75.74A2 2 0 0 1 22 16.92z"/>
            </svg>
            <span className="desktop-num">{PHONE}</span>
          </a>
          <a className="btn btn--primary" href="#contact">Book Your Date</a>
          <button
            className={`nav__burger ${open ? "open" : ""}`}
            onClick={() => setOpen(o => !o)}
            aria-label="Menu"
          ><span></span></button>
        </div>
      </nav>

      <div className={`mobile-menu ${open ? "open" : ""}`}>
        {links.map(([l, h]) => (
          <a key={h} href={h} onClick={() => setOpen(false)}>{l}</a>
        ))}
        <div className="mobile-foot">
          <a href={`tel:${PHONE_RAW}`}>Call · {PHONE}</a>
          <a href={`sms:${PHONE_RAW}`}>Text · {PHONE}</a>
          <a href="#contact" onClick={() => setOpen(false)}>Book Your Date →</a>
        </div>
      </div>
    </>
  );
}

/* ──────────── HERO ──────────── */
function Hero() {
  return (
    <header className="hero" id="top" data-screen-label="Hero">
      <div className="hero__media">
        <video autoPlay muted loop playsInline disablePictureInPicture controlsList="nodownload nofullscreen noremoteplayback" poster="assets/bus-exterior-sunset.png" style={{objectFit:"cover",width:"100%",height:"100%"}}>
          <source src="assets/hero.mp4" type="video/mp4" />
        </video>
      </div>
      <div className="hero__veil"></div>

      <div className="hero__content">
        <div className="hero__eyebrow eyebrow">
          San Diego Party Bus <span className="dot"></span> Temecula Wine Tours <span className="dot"></span> North County
        </div>
        <h1 className="hero__title h-display">
          <span className="row">Start the Night</span>
          <span className="row"><em>like</em> Stars.</span>
        </h1>
        <p className="hero__sub">
          A VIP party bus experience for birthdays, bachelorettes, girls&rsquo; nights out
          and Temecula wine tours. Pink-lit. Driver-included. Unforgettable from first
          pickup to final drop-off.
        </p>
        <div className="hero__ctas">
          <a className="btn btn--primary" href="#contact">Book Your Date</a>
          <a className="btn btn--ghost" href={`sms:${PHONE_RAW}`}>Call or Text</a>
          <a className="hero__phone" href={`tel:${PHONE_RAW}`}>
            <span>
              <span className="label">Available 7 days</span><br/>
              <span className="num">{PHONE}</span>
            </span>
          </a>
        </div>
      </div>

      <div className="hero__cue">
        <span>Scroll</span>
        <div className="bar"></div>
      </div>

      <div className="hero__marquee" aria-hidden="true">
        <div className="hero__marquee-track">
          <span>Pink Carpet Arrivals</span>
          <span>Bachelorette Worthy</span>
          <span>LED Interior</span>
          <span>10–12 Guests</span>
          <span>Champagne Welcome</span>
          <span>Pink Carpet Arrivals</span>
          <span>Bachelorette Worthy</span>
          <span>LED Interior</span>
          <span>10–12 Guests</span>
          <span>Champagne Welcome</span>
        </div>
      </div>
    </header>
  );
}

/* ──────────── EXPERIENCE ──────────── */
function Experience() {
  return (
    <section className="experience reveal" id="experience" data-screen-label="Experience">
      <div className="container">
        <div className="exp-grid">
          <div className="exp-text">
            <div className="eyebrow" style={{marginBottom: "28px"}}>
              <span className="dot"></span> The Stars Difference
            </div>
            <h2 className="h-display">
              Transportation
              <em>+ experience.</em>
            </h2>
            <p>
              The night doesn&rsquo;t start at the door of the club. It starts the moment
              the bus pulls up. Pink lighting, your playlist on a custom sound system,
              champagne in hand, and ten of your favorite people. We don&rsquo;t move
              groups — we open a chapter.
            </p>

            <ul className="exp-pills">
              <li>VIP Arrival</li>
              <li>LED Lighting</li>
              <li>Custom Playlist</li>
              <li>Champagne Welcome</li>
              <li>Pro Driver</li>
              <li>Photo-Worthy</li>
            </ul>

            <p className="exp-quote">
              &ldquo;The night starts before you<br/>even reach the club.&rdquo;
            </p>
          </div>

          <div className="exp-visual">
            <img src="assets/mansion-boarding.png" alt="Luxury Stars Party Bus arrival experience" />
            <div className="exp-visual__chip">
              <div className="num">10–12</div>
              <div className="lbl">VIP guests<br/>per ride</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ──────────── OCCASIONS ──────────── */
const OCCASIONS = [
  { num: "01", name: "Bachelorette Parties", hint: "Sashes, champagne, pink-lit pickups.", img: "assets/bachelorette-daytime.png" },
  { num: "02", name: "Birthday Celebrations", hint: "Make her arrival the moment.", img: "assets/interior-cheer.png" },
  { num: "03", name: "Girls Night Out", hint: "No driver, no Ubers, no waiting.", img: "assets/mansion-girls-night.png" },
  { num: "04", name: "Temecula Wine Tours", hint: "Vineyard hopping, in style.", img: "assets/interior-toast.png" },
  { num: "05", name: "VIP Club Hopping 🍾", hint: "Hit every spot. Skip every line.", img: "assets/interior-duo.png" },
  { num: "06", name: "Graduation Celebrations 🎓", hint: "Cap, gown, and a pink bus.", img: "assets/bus-group-daytime.png" },
  { num: "07", name: "Concert & Festival Transport 🎶", hint: "Arrive together. Leave together.", img: "assets/bus-exterior-sunset.png" },
  { num: "08", name: "Divorce & Fresh Start Nights 💋", hint: "Close one chapter. Open another.", img: "assets/pink-carpet-bachelorette.png" },
  { num: "09", name: "Prom & Homecoming ✨", hint: "Your most iconic arrival yet.", img: "assets/interior-duo.png" },
  { num: "10", name: "Corporate & Team Events 🥂", hint: "Reward the team. Elevate the night.", img: "assets/bus-group-daytime.png" },
  { num: "11", name: "Date Night Experiences ❤️", hint: "Intimate. Memorable. Just for two.", img: "assets/interior-duo.png" },
  { num: "12", name: "Holiday Parties 🎄", hint: "Deck the bus. Sip the season.", img: "assets/interior-dance.png" },
];

function Occasions() {
  return (
    <section className="reveal" id="occasions" data-screen-label="Occasions">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow section-head__eyebrow">
              <span className="dot"></span> What we&rsquo;re here for
            </div>
            <h2 className="section-head__title h-display">
              Built for the moments<br/>that <em>deserve</em> a story.
            </h2>
          </div>
          <p className="section-head__meta">
            Twelve occasions, one signature experience. Each one fully decorated and
            scripted to your group — from playlist to pickup time.
          </p>
        </div>

        <div className="occ-grid">
          {OCCASIONS.map((o) => (
            <a className="occ-card" key={o.num} href="#contact">
              <div className="occ-card__img" style={{backgroundImage: `url(${o.img})`}}></div>
              <div className="occ-card__pink"></div>
              <div className="occ-card__body">
                <div className="occ-card__num">— {o.num}</div>
                <div className="occ-card__name">{o.name}</div>
                <div className="occ-card__hint">{o.hint} →</div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ──────────── GALLERY ──────────── */
const GALLERY = [
  { cls: "g-a", img: "assets/interior-cheer.png", tag: "the entrance" },
  { cls: "g-b", img: "assets/mansion-bride-group.png", tag: "bachelorette" },
  { cls: "g-c", img: "assets/mansion-girls-night.png", tag: "girls night" },
  { cls: "g-d", img: "assets/mansion-boarding.png", tag: "arrival" },
  { cls: "g-e", img: "assets/interior-dance.png", tag: "dance floor" },
  { cls: "g-f", img: "assets/mansion-couples.png", tag: "date night" },
  { cls: "g-g", img: "assets/mansion-bachelorette.png", tag: "the squad" },
];

function Gallery() {
  return (
    <section className="gallery reveal" id="gallery" data-screen-label="Gallery">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow section-head__eyebrow">
              <span className="dot"></span> Inside the night
            </div>
            <h2 className="section-head__title h-display">
              A look at the <em>nights</em><br/>we live for.
            </h2>
          </div>
          <p className="section-head__meta">
            Photographed in our pink-lit cabin between pickup and the club. Tag us — we&rsquo;ll repost.
          </p>
        </div>

        <div className="gallery-grid">
          {GALLERY.map((g, i) => (
            <div className={`g-cell ${g.cls}`} key={i} style={{backgroundImage: `url(${g.img})`}}>
              <span className="tag">{g.tag}</span>
            </div>
          ))}
        </div>

        <div className="gallery__handle">
          See more on <a href="https://www.instagram.com/starspartybus" target="_blank" rel="noopener noreferrer">@starspartybus</a>
        </div>
      </div>
    </section>
  );
}

/* ──────────── ABOUT ──────────── */
function About() {
  return (
    <section className="about reveal" id="about" data-screen-label="About">
      <div className="container">
        <div className="about-inner">
          <div className="about-mark">
            <img src="assets/mansion-bride-group.png" alt="Stars Party Bus luxury arrival" />
            <div className="about-mark__quote">
              <sup>&ldquo;</sup>Built for the<br/>main characters.
            </div>
          </div>

          <div className="about-text">
            <div className="eyebrow" style={{marginBottom: "24px"}}>
              <span className="dot"></span> About Stars Party Bus
            </div>
            <h2 className="h-display">
              A luxury nightlife<br/>experience, <em>built for her.</em>
            </h2>
            <p>
              Stars Party Bus was created to give women and VIP groups a luxury nightlife
              experience that feels unforgettable from the first pickup to the final drop-off.
            </p>
            <p>
              Family-owned. Based in San Diego, CA. Fully insured.
              And obsessed with making sure your night opens like a film and ends like a memory.
            </p>

            <div className="about-stats">
              <div>
                <div className="n">10–12</div>
                <div className="l">Guest Capacity</div>
              </div>
              <div>
                <div className="n">2</div>
                <div className="l">Service Cities</div>
              </div>
              <div>
                <div className="n">5★</div>
                <div className="l">Group Reviews</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}


/* ──────────── VIP HOSTESS ADD-ON ──────────── */
function HostessAddon() {
  return (
    <section className="hostess reveal" id="hostess" data-screen-label="Hostess">
      <div className="container">
        <div className="hostess-inner">
          <div className="hostess-text">
            <div className="eyebrow" style={{marginBottom: "24px"}}>
              <span className="dot"></span> Elevate the Experience
            </div>
            <h2 className="h-display">
              VIP Hostess<br/><em>Add-On ✨</em>
            </h2>
            <p>
              Enhance your party bus experience with a dedicated hostess for just <strong style={{color:"var(--champagne)"}}>$75/hour</strong>.
              She'll lead games, keep the energy high, and make sure every guest feels like a star from pickup to drop-off.
            </p>
            <div className="hostess-cards">
              <div className="hostess-card">
                <div className="hostess-card__icon">🎮</div>
                <div className="hostess-card__title">Games & Vibes</div>
                <div className="hostess-card__desc">Interactive games, music curation, and energy management all night long.</div>
              </div>
              <div className="hostess-card">
                <div className="hostess-card__icon">💎</div>
                <div className="hostess-card__title">Onboard Glam Station</div>
                <div className="hostess-card__desc">Face gems, rhinestones, glitter accents & light makeup touch-ups. Arrive camera-ready.</div>
              </div>
            </div>
            <a className="btn btn--gold" href="#contact">Add a Hostess to My Booking</a>
          </div>
          <div className="hostess-visual">
            <img src="assets/hostess-glam.jpg" alt="VIP Glam Station hosted by Stars Party Bus hostess" />
            <div className="hostess-badge">
              <div className="hostess-badge__price">$75<span>/hr</span></div>
              <div className="hostess-badge__label">Add-On</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ──────────── PRICING ──────────── */
function Pricing() {
  return (
    <section className="pricing reveal" id="pricing" data-screen-label="Pricing">
      <div className="container">
        <div className="section-head" style={{justifyContent: "center", textAlign: "center", flexDirection: "column", alignItems: "center"}}>
          <div className="eyebrow section-head__eyebrow">
            <span className="dot"></span> Simple & Premium
          </div>
          <h2 className="section-head__title h-display" style={{textAlign: "center"}}>
            One rate. <em>Every</em> detail included.
          </h2>
        </div>

        <div className="pricing-card">
          <div className="label" style={{display:"flex",flexDirection:"column",gap:"8px"}}>
            <span style={{
              fontSize:"13px",
              letterSpacing:"0.12em",
              textTransform:"uppercase",
              color:"#fff",
              fontWeight:700,
              background:"linear-gradient(90deg,#d4537e,#e8306a)",
              padding:"6px 16px",
              borderRadius:"4px",
              display:"inline-block",
              boxShadow:"0 0 18px rgba(212,83,126,0.55)",
              animation:"pulse-badge 2s ease-in-out infinite"
            }}>⭐ Limited Time Offer — Lock In This Price!</span>
            <span style={{fontSize:"12px",color:"var(--muted)",letterSpacing:"0.06em"}}>Price going up soon · Book before it does</span>
            Starting at
          </div>
          <div className="price">
            <span className="currency">$</span>250<span style={{fontSize: "0.35em", color: "var(--muted)", letterSpacing: 0}}>/hr</span>
          </div>
          <div className="per">three-hour minimum on peak nights</div>

          <div className="rule"></div>

          <ul className="incs">
            <li>Pink LED interior lighting</li>
            <li>Premium sound system</li>
            <li>Custom playlist control</li>
            <li>Professional driver</li>
            <li>Cooler &amp; ice included</li>
            <li>Decorations available</li>
          </ul>

          <a className="btn btn--gold" href="#contact">Check Availability</a>
          <div className="minimum" style={{marginTop: "24px"}}>
            Rate includes driver, fuel, and insurance. Gratuity not included.
          </div>
        </div>
      </div>
    </section>
  );
}

/* ──────────── FAQ ──────────── */
const FAQS = [
  { q: "How many guests fit on the bus?",
    a: "Our bus comfortably seats up to 15 guests with full perimeter seating, a dance floor, and pink LED lighting throughout. Perfect for intimate groups who want the full VIP experience." },
  { q: "Where are you located?",
    a: "We are based in San Diego, CA. We serve all of San Diego — including downtown, La Jolla, Pacific Beach, North County, Carlsbad, and Encinitas. We also travel to Temecula for wine tours and pick up guests from the Temecula area who want to come enjoy San Diego nightlife. Note: pickups outside San Diego may include a travel fee — contact us and we&rsquo;ll give you a quick quote." },
  { q: "How does booking work?",
    a: "Fill out the form or text us at 619-617-4905 and we&rsquo;ll confirm availability within hours. A $250 deposit holds your date — the remaining balance is due before or on the day of your event. You&rsquo;ll receive all the details including your driver&rsquo;s info and pickup time in advance." },
  { q: "What is the deposit?",
    a: "The deposit to reserve your date is $250. This goes toward your total balance and secures your booking. The remaining balance is due before your event." },
  { q: "What&rsquo;s the alcohol policy?",
    a: "Guests 21+ are welcome to bring their own alcohol onboard. To keep things safe and spill-free, all drinks must be in covered containers with lids — no open champagne flutes or open cups. We recommend tumblers, lidded cups, or covered champagne glasses. We will have cups available, but please plan accordingly so everyone can celebrate safely." },
  { q: "Can the driver make multiple stops?",
    a: "Absolutely. Most of our nights include a curated route — a pickup, dinner, nightlife stops, and a drop-off. Send us your ideal itinerary and we&rsquo;ll build it with you." },
  { q: "Can you decorate the bus for my event?",
    a: "Yes! If you have a theme, let us know in advance and we can decorate the bus to match — for an additional fee. Whether it&rsquo;s a bachelorette, birthday, holiday, or any special vibe, just tell us what you&rsquo;re going for and we&rsquo;ll make it happen. Note: we don&rsquo;t do balloon arrangements, but custom theme decor is absolutely available. Just give us enough notice so we can have everything ready before your pickup." },
  { q: "Is there a minimum booking?",
    a: "Three hours minimum. Wine tours to Temecula typically run longer — contact us for a custom quote based on your group&rsquo;s itinerary." },
];

function FaqItem({ q, a, open, onToggle }) {
  return (
    <div className={`faq-item ${open ? "open" : ""}`} onClick={onToggle}>
      <div className="faq-item__head">
        <div className="faq-item__q">{q}</div>
        <div className="faq-item__toggle"></div>
      </div>
      <div className="faq-item__body" dangerouslySetInnerHTML={{__html: a}}></div>
    </div>
  );
}

function FAQ() {
  const [open, setOpen] = useState(0);
  return (
    <section className="faq reveal" id="faq" data-screen-label="FAQ">
      <div className="container">
        <div className="faq-grid">
          <div>
            <div className="eyebrow" style={{marginBottom: "24px"}}>
              <span className="dot"></span> Good to know
            </div>
            <h2 className="h-display">
              Questions,<br/><em>answered.</em>
            </h2>
            <p className="blurb">
              Anything we missed? Text us at <a href={`sms:${PHONE_RAW}`} style={{color: "var(--champagne)"}}>{PHONE}</a> —
              we usually reply within minutes.
            </p>
          </div>
          <div className="faq-list">
            {FAQS.map((f, i) => (
              <FaqItem
                key={i}
                q={f.q}
                a={f.a}
                open={open === i}
                onToggle={() => setOpen(open === i ? -1 : i)}
              />
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ──────────── CONTACT FORM ──────────── */
function Contact() {
  const [form, setForm] = useState({
    name: "", phone: "", email: "", date: "",
    occasion: "", group: "", pickup: "", notes: ""
  });
  const [errors, setErrors] = useState({});
  const [sent, setSent] = useState(false);

  const set = (k, v) => setForm({ ...form, [k]: v });

  const submit = async (e) => {
    e.preventDefault();
    const errs = {};
    if (!form.name.trim()) errs.name = "Required";
    if (!form.phone.trim()) errs.phone = "Required";
    if (!form.email.trim() || !form.email.includes("@")) errs.email = "Valid email required";
    if (!form.date) errs.date = "Required";
    if (!form.occasion) errs.occasion = "Required";
    setErrors(errs);
    if (Object.keys(errs).length > 0) return;

    try {
      const res = await fetch("https://api.web3forms.com/submit", {
        method: "POST",
        headers: { "Content-Type": "application/json", "Accept": "application/json" },
        body: JSON.stringify({
          access_key: "45911350-e8c9-4bc4-9c50-896939eb99cb",
          subject: "⭐ New Booking Request — Stars Party Bus",
          from_name: "Stars Party Bus Website",
          name: form.name,
          phone: form.phone,
          email: form.email,
          date: form.date,
          occasion: form.occasion,
          group: form.group,
          pickup: form.pickup,
          notes: form.notes,
        }),
      });
      const data = await res.json();
      setSent(true);
    } catch {
      setSent(true);
    }
  };

  if (sent) {
    return (
      <section className="contact" id="contact" data-screen-label="Contact">
        <div className="container">
          <div className="form-success" style={{maxWidth: 640, margin: "0 auto"}}>
            <div className="glyph">✦</div>
            <h3>Request received.</h3>
            <p>
              We&rsquo;ll text you back within a few hours to confirm availability for <strong style={{color: "var(--champagne)"}}>{form.date}</strong>.
              For anything urgent, text us directly at {PHONE}.
            </p>
          </div>
        </div>
      </section>
    );
  }

  return (
    <section className="contact" id="contact" data-screen-label="Contact">
      <div className="container">
        <div className="contact-grid">
          <div className="contact-side">
            <div className="eyebrow" style={{marginBottom: "24px"}}>
              <span className="dot"></span> Reserve Your Night
            </div>
            <h2 className="h-display">
              Tell us about<br/>the <em>night.</em>
            </h2>
            <p>
              Fill out the form and we&rsquo;ll text back within a few hours to confirm
              your date and walk you through every detail.
            </p>

            <div className="quick">
              <a href={`tel:${PHONE_RAW}`}>
                <span>
                  <span className="l">Call or text</span>
                  <span className="v">{PHONE}</span>
                </span>
              </a>
              <a href="mailto:starspartybus@gmail.com">
                <span>
                  <span className="l">Email</span>
                  <span className="v">starspartybus@gmail.com</span>
                </span>
              </a>
              <a href="https://www.tiktok.com/@stars.partybus" target="_blank" rel="noopener noreferrer">
                <span>
                  <span className="l">TikTok</span>
                  <span className="v">@stars.partybus</span>
                </span>
              </a>
              <a href="https://www.instagram.com/starspartybus" target="_blank" rel="noopener noreferrer">
                <span>
                  <span className="l">Instagram</span>
                  <span className="v">@starspartybus</span>
                </span>
              </a>
            </div>
          </div>

          <form className="form" onSubmit={submit} noValidate>
            <div className={`field ${errors.name ? "error" : ""}`}>
              <label>Name</label>
              <input value={form.name} onChange={e => set("name", e.target.value)} placeholder="Your name" />
              {errors.name && <span className="err-msg">{errors.name}</span>}
            </div>
            <div className={`field ${errors.phone ? "error" : ""}`}>
              <label>Phone</label>
              <input value={form.phone} onChange={e => set("phone", e.target.value)} placeholder="(___) ___-____" />
              {errors.phone && <span className="err-msg">{errors.phone}</span>}
            </div>
            <div className={`field full ${errors.email ? "error" : ""}`}>
              <label>Email</label>
              <input value={form.email} onChange={e => set("email", e.target.value)} placeholder="you@email.com" type="email"/>
              {errors.email && <span className="err-msg">{errors.email}</span>}
            </div>
            <div className={`field ${errors.date ? "error" : ""}`}>
              <label>Event Date</label>
              <input value={form.date} onChange={e => set("date", e.target.value)} type="date" />
              {errors.date && <span className="err-msg">{errors.date}</span>}
            </div>
            <div className={`field ${errors.occasion ? "error" : ""}`}>
              <label>Occasion</label>
              <select value={form.occasion} onChange={e => set("occasion", e.target.value)}>
                <option value="">Select occasion</option>
                <option>Bachelorette Party</option>
                <option>Birthday Celebration</option>
                <option>Girls Night Out</option>
                <option>Temecula Wine Tour</option>
                <option>VIP Club Hopping</option>
                <option>Graduation Celebration</option>
                <option>Concert & Festival Transport</option>
                <option>Divorce / Fresh Start Night</option>
                <option>Prom & Homecoming</option>
                <option>Corporate / Team Event</option>
                <option>Date Night Experience</option>
                <option>Holiday Party</option>
                <option>Other</option>
              </select>
              {errors.occasion && <span className="err-msg">{errors.occasion}</span>}
            </div>
            <div className="field">
              <label>Group Size</label>
              <select value={form.group} onChange={e => set("group", e.target.value)}>
                <option value="">Estimated guests</option>
                <option>2–5</option>
                <option>6–10</option>
                <option>11–12</option>
                <option>13+ (multi-bus)</option>
              </select>
            </div>
            <div className="field">
              <label>Pickup Area</label>
              <select value={form.pickup} onChange={e => set("pickup", e.target.value)}>
                <option value="">Where are we starting?</option>
                <option>San Diego</option>
                <option>North County</option>
                <option>Temecula</option>
                <option>Other / Not sure yet</option>
              </select>
            </div>
            <div className="field full">
              <label>Notes</label>
              <textarea value={form.notes} onChange={e => set("notes", e.target.value)} placeholder="Decorations, stops, special requests…" rows="3"/>
            </div>

            <div className="form-submit full">
              <button className="btn btn--primary" type="submit">Send Request</button>
              <span className="fine">We&rsquo;ll text you back within hours.</span>
            </div>
          </form>
        </div>
      </div>
    </section>
  );
}

/* ──────────── FOOTER ──────────── */
function Footer() {
  return (
    <footer className="footer">
      <div className="footer-top">
        <div className="brand-block">
          <BrandMark />
          <p>
            Luxury party bus experiences for San Diego &amp; Temecula. Birthdays,
            bachelorettes, girls&rsquo; nights, and wine country.
          </p>
        </div>
        <div>
          <h4>Service</h4>
          <ul>
            <li><a href="#occasions">Occasions</a></li>
            <li><a href="#pricing">Pricing</a></li>
            <li><a href="#faq">FAQ</a></li>
            <li><a href="#contact">Book</a></li>
          </ul>
        </div>
        <div>
          <h4>Areas</h4>
          <ul>
            <li><a href="#">San Diego</a></li>
            <li><a href="#">North County</a></li>
            <li><a href="#">Temecula</a></li>
            <li><a href="#">Wine Country</a></li>
          </ul>
        </div>
        <div>
          <h4>Contact</h4>
          <ul>
            <li><a href={`tel:${PHONE_RAW}`}>{PHONE}</a></li>
            <li><a href="mailto:starspartybus@gmail.com">starspartybus@gmail.com</a></li>
            <li><a href="https://www.tiktok.com/@stars.partybus" target="_blank" rel="noopener noreferrer">TikTok @stars.partybus</a></li>
            <li><a href="https://www.instagram.com/starspartybus" target="_blank" rel="noopener noreferrer">Instagram @starspartybus</a></li>
          </ul>
        </div>
      </div>
      <div className="footer-bot">
        <div>© {new Date().getFullYear()} Stars Party Bus. All rights reserved.</div>
        <div>Fully licensed &amp; insured · TCP 0000000</div>
      </div>
    </footer>
  );
}

/* ──────────── REVEAL ──────────── */
function useReveal() {
  useEffect(() => {
    const obs = new IntersectionObserver(entries => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add("in");
          obs.unobserve(e.target);
        }
      });
    }, { threshold: 0.12 });
    document.querySelectorAll(".reveal").forEach(el => obs.observe(el));
    return () => obs.disconnect();
  }, []);
}

/* ──────────── APP ──────────── */
function App() {
  useReveal();
  return (
    <>
      <Nav />
      <Hero />
      <Experience />
      <Occasions />
      <Gallery />
      <About />
      <HostessAddon />
      <Pricing />
      <FAQ />
      <Contact />
      <Footer />
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);