// RD Travels — Home page
const HomePage = ({ onNavigate }) => (
  <main>
    {/* HERO */}
    <section className="section">
      <div className="container">
        <span className="eyebrow">Ahmedabad · Since 2015</span>
        <h1 style={{ margin: "var(--space-5) 0 var(--space-5)", maxWidth: "18ch" }}>
          Cars, Tempo Travellers &amp; Buses, <span className="accent">with driver.</span>
        </h1>
        <p className="lead" style={{ maxWidth: "60ch", marginBottom: "var(--space-6)" }}>
          Ahmedabad's direct travels operator since 2015. Sedans for airport drops,
          Tempo Travellers for family tours, 56-seater Volvos for weddings — every
          vehicle comes with a trained, employed driver. GST-clear pricing on
          WhatsApp in fifteen minutes.
        </p>
        <div style={{ display: "flex", gap: "var(--space-3)", flexWrap: "wrap", marginBottom: "var(--space-6)" }}>
          <a href="#" className="btn btn-whatsapp"><WhatsAppIcon /> WhatsApp us your trip</a>
          <a href="#" className="btn btn-outline">Call +91 98765 43210</a>
        </div>
        <div style={{ display: "flex", gap: "var(--space-3)", flexWrap: "wrap" }}>
          <Chip>10+ years</Chip>
          <Chip>Tourist Permit + AITP</Chip>
          <Chip>Owned fleet · employed drivers</Chip>
          <Chip>24×7 support</Chip>
        </div>
      </div>
    </section>

    <hr className="divider" />

    {/* FLEET — all 8 vehicles per CONTENT.md §3 */}
    <section className="section section--alt">
      <div className="container">
        <span className="eyebrow">Our fleet</span>
        <h2 style={{ margin: "var(--space-4) 0 var(--space-3)" }}>
          Every vehicle class, <span className="accent">every group size.</span>
        </h2>
        <p className="lead" style={{ maxWidth: "60ch", marginBottom: "var(--space-7)" }}>
          From a four-seat sedan for an airport drop to a 56-seater Volvo for a
          wedding party — every vehicle below comes with a trained, employed
          driver. Same yard, same pricing logic, same WhatsApp number.
        </p>
        <div className="grid-auto-260">
          <VehicleCard image="public/images/fleet/fleet-sedan-dzire.webp"
            category="Car with driver" name="Sedan (Dzire / Etios)"
            capacity="Seats 4 + driver"
            desc="Comfortable for airport drops, business trips, small family outstation runs."
            perKm="₹11/km" package="₹2,400" ctaLabel="Book a sedan" />
          <VehicleCard image="public/images/fleet/fleet-mpv-ertiga.webp"
            category="Car with driver" name="Maruti Ertiga"
            capacity="Seats 6 + driver"
            desc="The family-friendly choice — extra space for luggage on multi-day Gujarat or Rajasthan trips."
            perKm="₹13/km" package="₹3,000" ctaLabel="Book an Ertiga" />
          <VehicleCard image="public/images/fleet/fleet-suv-innova.webp"
            category="Car with driver" name="Toyota Innova / Crysta"
            capacity="Seats 6–7 + driver"
            desc="Premium pick for long-distance comfort, executive transport, weddings, NRI family trips."
            perKm="₹16/km" package="₹3,800" ctaLabel="Book an Innova" />
          <VehicleCard image="public/images/fleet/fleet-tempo-12seater.webp"
            category="Tempo Traveller with driver" name="12-seater Tempo Traveller"
            capacity="Seats 12 + driver"
            desc="The workhorse for family tours, pilgrimage groups, school trips. AC, push-back seats, luggage space."
            perKm="₹24/km" package="₹6,500" ctaLabel="Book a 12-seater" />
          <VehicleCard image="public/images/fleet/fleet-tempo-17seater.webp"
            category="Tempo Traveller with driver" name="17-seater Tempo Traveller"
            capacity="Seats 17 + driver"
            desc="Extended families, mid-size corporate groups, college trips. Same comfort, more capacity."
            perKm="₹28/km" ctaLabel="Book a 17-seater" />
          <VehicleCard image="public/images/fleet/fleet-tempo-26seater-maharaja.webp"
            category="Tempo Traveller with driver" name="26-seater Maharaja Tempo"
            capacity="Seats 26 + driver"
            desc="Premium group travel — push-back recliners, AC, large luggage area. Wedding parties, premium tours."
            perKm="₹32/km" ctaLabel="Book a Maharaja" />
          <VehicleCard image="public/images/fleet/fleet-bus-32seater-mini.webp"
            category="Bus with driver" name="32-seater Mini Bus"
            capacity="Seats 32 + driver"
            desc="School trips, mid-size wedding parties, corporate offsites. AC and non-AC available."
            perKm="₹40/km" ctaLabel="Book a mini bus" />
          <VehicleCard image="public/images/fleet/fleet-bus-56seater-volvo.webp"
            category="Bus with driver" name="56-seater Volvo Multi-Axle"
            capacity="Seats 56 + driver(s)"
            desc="Premium long-distance group travel. Volvo and Bharat Benz options. Used for weddings, large pilgrimage groups, corporate events."
            perKm="₹70/km" ctaLabel="Book a Volvo" />
        </div>
        <p style={{ fontSize: "0.85rem", color: "var(--color-ink-mute)", marginTop: "var(--space-6)", maxWidth: "70ch" }}>
          Prices are starting rates. Final quote includes GST and accounts for season, route, vehicle availability, and night-halt requirements.
          Tolls, parking, and inter-state permits billed at actuals.
        </p>
      </div>
    </section>

    <hr className="divider" />

    {/* ROUTES — all 8 per CONTENT.md §5 */}
    <section className="section">
      <div className="container">
        <span className="eyebrow">Most-booked routes</span>
        <h2 style={{ margin: "var(--space-4) 0 var(--space-3)" }}>
          From Ahmedabad to <span className="accent">anywhere in India.</span>
        </h2>
        <p className="lead" style={{ maxWidth: "60ch", marginBottom: "var(--space-7)" }}>
          Eight routes that make up the bulk of our work. Distances, drive times,
          and starting fares are honest — your final WhatsApp quote adjusts for
          vehicle, season, and stops.
        </p>
        <div className="grid-auto-320">
          <RouteCard n="01" name="Mumbai International Airport"
            meta="525 km · 9–10 hrs · One-way / round"
            price="From ₹6,800 one-way (sedan)"
            desc="The original RD route — Ahmedabad to BOM Terminal 2, NH 48 via Vadodara. Departures plotted backwards from your boarding time. Late-night and 3am drops are routine." />
          <RouteCard n="02" name="Statue of Unity"
            meta="200 km · 4 hrs · Day trip"
            price="From ₹4,200 round-trip (sedan)"
            desc="Day-trip to Kevadia. We time the drive so you reach before the laser show and avoid the parking queue." />
          <RouteCard n="03" name="Somnath–Dwarka pilgrimage"
            meta="~900 km · 3–4 days · Pilgrimage"
            price="From ₹22,000 (Tempo, 4 days)"
            desc="The classic Saurashtra pilgrimage circuit. We handle hotel coordination, darshan timings, and the Bet Dwarka boat schedule." />
          <RouteCard n="04" name="Kutch & Rann Utsav"
            meta="~400 km · 2–3 days · Seasonal Nov–Feb"
            price="From ₹14,000 (Innova, 3 days)"
            desc="Bhuj, the white desert at full moon, the artisan villages around Hodka. Sunrise vs sunset — we'll tell you which is worth it." />
          <RouteCard n="05" name="Udaipur"
            meta="260 km · 5 hrs · Weekend / 3 days"
            price="From ₹9,500 round-trip (Innova)"
            desc="Up the NE-15, lake-side hotels we've run people to for ten years. Long weekend or full Mewar circuit — your call." />
          <RouteCard n="06" name="Ahmedabad city packages"
            meta="City · 8 / 12 / 24 hrs · Within municipal"
            price="₹2,400 / 8hr / 80km (sedan)"
            desc="Heritage tour, business meetings circuit, wedding-day hire. Driver bata, fuel and AC included; tolls billed at actual." />
          <RouteCard n="07" name="Jaipur"
            meta="660 km · 11 hrs · 2–4 days"
            price="From ₹18,000 (Innova, 3 days)"
            desc="Jaipur direct or as part of the Golden Triangle. Best done with a 2-day buffer to actually see Amer and Hawa Mahal without rushing." />
          <RouteCard n="08" name="Mount Abu & Ambaji"
            meta="220 km · 4.5 hrs · Weekend / pilgrimage"
            price="From ₹7,800 round-trip (sedan)"
            desc="Hill-station weekend or the Ambaji shaktipeeth pilgrimage. Combined trip works well — same drive, both temples covered." />
        </div>
      </div>
    </section>

    <hr className="divider" />

    {/* PILLARS — all 5 per CONTENT.md §4 */}
    <section className="section section--alt">
      <div className="container">
        <span className="eyebrow">Why direct</span>
        <h2 style={{ margin: "var(--space-4) 0 var(--space-3)" }}>
          Five reasons Ahmedabad <span className="accent">keeps coming back.</span>
        </h2>
        <div style={{ maxWidth: "820px", marginTop: "var(--space-6)" }}>
          <Pillar n="01" title="Direct from the operator. No brokers."
            body="You speak to us — the people who own the vehicles and employ the drivers. No three-way phone calls, no second markup, no &quot;the broker said something different&quot; on the day of your trip." />
          <Pillar n="02" title="Every vehicle class. One vendor."
            body="Sedan to 56-seater Volvo, all from the same yard. One number for a wedding's bridal car and the band's bus — the same person picks up. No coordinating four operators for one event." />
          <Pillar n="03" title="GST-compliant, transparent pricing."
            body="Every quote is itemised — vehicle, driver bata, fuel, GST. No &quot;convenience fee&quot; appearing at handover. You pay what we quoted. We provide a proper GST tax invoice for corporate billing." />
          <Pillar n="04" title="Real Gujarat & pan-India routing knowledge."
            body="Ten years of trips means we know the actual drive — which dhaba is open at 4am on NH 48, which border permit holds you up, which Saurashtra temple closes at noon. Not Google Maps. Drivers who've made the run a hundred times." />
          <Pillar n="05" title="Permit-verified vehicles, safety-first drivers."
            body="Tourist Permit, AITP, valid PUC and fitness on every vehicle. Drivers are police-verified, employed (not contracted), and trained on highway protocol. Comprehensive insurance covers you for the entire trip." />
        </div>
      </div>
    </section>

    <hr className="divider" />

    {/* FAQ — all 8 per CONTENT.md §7 */}
    <section className="section">
      <div className="container" style={{ maxWidth: "820px" }}>
        <span className="eyebrow">Frequently asked</span>
        <h2 style={{ margin: "var(--space-4) 0 var(--space-3)" }}>
          Honest answers, <span className="accent">upfront.</span>
        </h2>
        <div style={{ marginTop: "var(--space-6)" }}>
          <FaqItem defaultOpen q="Are you a broker or a direct operator?"
            a="A direct operator. Founded 2015 by Ronak Dineshbhai Barot. We own the vehicles, we employ the drivers, we handle dispatch from our Ahmedabad office. No three-way calls, no broker markup, no 'the operator said something else' on trip day. You can come visit the office before you book if you want — most repeat customers have." />
          <FaqItem q="Do I need to pay an advance to get a quote?"
            a="No. Quotes are free and non-binding. We send GST-itemised numbers on WhatsApp; you decide. For confirmed bookings, most one-day trips need no advance. Multi-day tours and bus bookings take a small confirmation amount (10–20% typical), balance settles after the trip." />
          <FaqItem q="Is the quote GST-inclusive?"
            a="We itemise GST separately so you can see what's vehicle, what's tax. We're GST-registered (GSTIN displayed on every invoice), so corporate customers can claim input credit. The total on the WhatsApp quote is what you pay — no convenience fee at handover." />
          <FaqItem q="What's the largest vehicle you operate?"
            a="56-seater Volvo Multi-Axle and 56-seater Bharat Benz coaches for premium long-distance. We also run 45-seater AC coaches, 40-seater AC mini coaches, and 32-seater non-AC mini buses. Below that, the full Tempo Traveller range (9, 12, 17, 20, 26-seater Maharaja). And cars from Sedan to Innova Crysta." />
          <FaqItem q="Do you handle airport drops and pickups for late-night flights?"
            a="Yes — Mumbai BOM Terminal 2 is our most-booked route, including 3am drops and 1am pickups. We work backwards from your boarding time, factor in toll and traffic, and pad realistically. Driver waits for delayed flights at no extra cost up to 90 minutes." />
          <FaqItem q="What permits and insurance cover the vehicles?"
            a="Every vehicle has a Tourist Vehicle Permit (TVP), All-India Tourist Permit (AITP) for inter-state travel, valid PUC and fitness, and comprehensive insurance covering passengers for the trip duration. Drivers are police-verified, employed (not contracted), and trained on highway protocol. Documentation available on request." />
          <FaqItem q="What languages do your drivers speak?"
            a="Gujarati, Hindi, and basic English on every driver. Specific drivers speak Marathi (Mumbai/Maharashtra routes), Rajasthani (Rajasthan circuits), or other regional languages — request when booking." />
          <FaqItem q="Do you do single one-way drops, or only round-trips?"
            a="Both. One-way pricing is per-km outstation rate. Round-trip pricing has a slight per-day discount on the daily kilometers. Mumbai airport drop is the most common one-way; family pilgrimage and tours are usually round-trip." />
        </div>
      </div>
    </section>

    {/* CTA BAND */}
    <section className="section section--saffron">
      <div className="container" style={{ textAlign: "center", maxWidth: "760px" }}>
        <span className="eyebrow" style={{ color: "rgba(255,255,255,0.85)" }}>Ready when you are</span>
        <h2 style={{ margin: "var(--space-4) 0 var(--space-4)", color: "var(--color-white)" }}>
          Ready to book? <span style={{ color: "rgba(255,255,255,0.78)" }}>Two ways</span> to start.
        </h2>
        <p className="lead" style={{ color: "rgba(255,255,255,0.92)", marginBottom: "var(--space-6)" }}>
          WhatsApp for an instant quote, call for complex itineraries.
          No advance to enquire — paperwork only after you've seen the GST-itemised number.
        </p>
        <div style={{ display: "flex", gap: "var(--space-3)", justifyContent: "center", flexWrap: "wrap" }}>
          <a href="#" className="btn btn-whatsapp"><WhatsAppIcon /> WhatsApp us</a>
          <a href="#" className="btn" style={{ background: "var(--color-white)", color: "var(--color-saffron-deep)" }}>
            Call +91 98765 43210
          </a>
        </div>
      </div>
    </section>
  </main>
);

Object.assign(window, { HomePage });