// landing.jsx — landing page

const Landing = ({ onSearch, onSelectCar }) => {
  const [openFaq, setOpenFaq] = React.useState(0);

  return (
    <div>
      <div className="hero">
        <div className="hero-bg"><HeroScene /></div>
        <div className="hero-vignette" />
        <Nav transparent onLogo={() => {}} onSelectCar={onSelectCar} />
        <div className="hero-inner">
          <div className="hero-eyebrow">St. Vincent &amp; the Grenadines · Since 2009</div>
          <h1 className="hero-title">Sweet rides<br/>for <em>sweet vibes.</em></h1>
          <p className="hero-sub">From Argyle Airport to the windward coast — pick up a car at any of our three branches and find your own corner of the Caribbean.</p>
          <BookingWidget onSearch={onSearch} />
          <div className="hero-stats">
            <div className="hero-stat"><div className="num">3</div><div className="label">Pickup locations</div></div>
            <div className="hero-stat"><div className="num">15+</div><div className="label">Years on island</div></div>
            <div className="hero-stat"><div className="num">4.9★</div><div className="label">Guest rating</div></div>
            <div className="hero-stat"><div className="num">24/7</div><div className="label">WhatsApp support</div></div>
          </div>
        </div>
      </div>

      {/* Why us + Map split */}
      <section className="why-map">
        <div className="why-map-inner">
          <div className="why-col">
            <div className="section-eyebrow">Why choose us</div>
            <h2 className="section-title">Built for <em>island travel.</em></h2>
            <p className="section-lead">Family-run since 2009. Honest rates, no surprises at the counter, and a real human on WhatsApp when you need one.</p>
            <div className="why-grid">
              <div className="why-tile"><div className="why-icon"><Icon name="car" size={20} color="white" /></div><div className="why-tile-text">Free vehicle delivery &amp; pickup</div></div>
              <div className="why-tile"><div className="why-icon"><Icon name="phone" size={20} color="white" /></div><div className="why-tile-text">24-hour emergency assistance</div></div>
              <div className="why-tile"><div className="why-icon"><Icon name="users" size={20} color="white" /></div><div className="why-tile-text">Superb customer service</div></div>
              <div className="why-tile"><div className="why-icon"><Icon name="play" size={20} color="white" /></div><div className="why-tile-text">Unlimited mileage</div></div>
              <div className="why-tile"><div className="why-icon"><Icon name="shield" size={20} color="white" /></div><div className="why-tile-text">Honest &amp; reliable</div></div>
              <div className="why-tile"><div className="why-icon"><Icon name="cash" size={20} color="white" /></div><div className="why-tile-text">Affordable rates</div></div>
              <div className="why-tile"><div className="why-icon"><Icon name="calendar" size={20} color="white" /></div><div className="why-tile-text">Daily, weekly &amp; monthly</div></div>
              <div className="why-tile"><div className="why-icon"><Icon name="clock" size={20} color="white" /></div><div className="why-tile-text">Short &amp; long-term rentals</div></div>
              <div className="why-tile"><div className="why-icon"><Icon name="send" size={20} color="white" /></div><div className="why-tile-text">SVG Tourism Authority approved</div></div>
            </div>
          </div>
          <div className="why-map-divider" aria-hidden="true"></div>
          <div className="map-col">
            <div className="section-eyebrow">Find us</div>
            <h2 className="section-title">Pickup &amp; drop-off <em>across the island.</em></h2>
            <p className="section-lead">We meet you at the airport, your hotel, your villa, or the ferry terminal — anywhere on St. Vincent.</p>
            <PickupMap />
          </div>
        </div>
      </section>

      {/* Destinations */}
      <section className="section">
        <div className="section-inner">
          <div className="section-eyebrow">Where the road takes you</div>
          <h2 className="section-title">Popular drives <em>from our branches.</em></h2>
          <p className="section-lead">Our compact 4x4s handle every road on the island — from black-sand beaches on the leeward coast to the foot of La Soufrière in the north.</p>

          <div className="dest-grid">
            <div className="dest-card">
              <DestSVG variant="a" />
              <div className="dest-tag"><Icon name="pin" size={11} className="pin" /> Leeward coast</div>
              <div className="dest-meta">
                <div className="name">Wallilabou Bay</div>
                <div className="desc">45 min from Kingstown · Pirates of the Caribbean filming location</div>
              </div>
            </div>
            <div className="dest-card">
              <DestSVG variant="b" />
              <div className="dest-tag"><Icon name="pin" size={11} className="pin" /> North</div>
              <div className="dest-meta">
                <div className="name">La Soufrière</div>
                <div className="desc">Volcano hike · Suzuki Jimny recommended</div>
              </div>
            </div>
            <div className="dest-card">
              <DestSVG variant="c" />
              <div className="dest-tag"><Icon name="pin" size={11} className="pin" /> Central</div>
              <div className="dest-meta">
                <div className="name">Vermont Trail</div>
                <div className="desc">Rainforest &amp; parrot reserve</div>
              </div>
            </div>
            <div className="dest-card">
              <DestSVG variant="d" />
              <div className="dest-tag"><Icon name="pin" size={11} className="pin" /> Windward</div>
              <div className="dest-meta">
                <div className="name">Owia Salt Pond &amp; Black Point Beach</div>
                <div className="desc">90 min from Arnos Vale · best with all-wheel drive · pack a picnic</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section className="faq">
        <div className="faq-grid">
          <div className="faq-side">
            <div className="section-eyebrow">Before you book</div>
            <h2 className="section-title">Things visitors <em>always ask.</em></h2>
            <p className="section-lead">If you don't see your question, message us on WhatsApp — we usually reply within an hour, even on Sundays.</p>
          </div>
          <div className="faq-list">
            {window.FAQ.map((f, i) => (
              <div key={i} className={`faq-item ${openFaq === i ? "is-open" : ""}`}>
                <button className="faq-q" onClick={() => setOpenFaq(openFaq === i ? -1 : i)}>
                  <span>{f.q}</span>
                  <span className="plus"><Icon name="plus" size={14} strokeWidth={2.2} /></span>
                </button>
                <div className="faq-a">{f.a}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <Footer />
    </div>
  );
};

window.Landing = Landing;