const { useState, useEffect } = React;

/* ---------------- icons ---------------- */
const ICONS = {
  Sedan: (
    <svg viewBox="0 0 64 32" fill="none"><path d="M4 22l4-11a4 4 0 013.7-2.5h32.6A4 4 0 0148 11l4 11" stroke="currentColor" strokeWidth="2.2"/><rect x="2" y="22" width="60" height="6" rx="3" stroke="currentColor" strokeWidth="2.2"/><circle cx="14" cy="28" r="3.4" fill="currentColor"/><circle cx="50" cy="28" r="3.4" fill="currentColor"/></svg>
  ),
  SUV: (
    <svg viewBox="0 0 64 34" fill="none"><path d="M3 23l3-13a4 4 0 013.9-3h37a5 5 0 014.6 3l5 13" stroke="currentColor" strokeWidth="2.2"/><rect x="1" y="23" width="62" height="7" rx="3.2" stroke="currentColor" strokeWidth="2.2"/><circle cx="15" cy="30" r="3.6" fill="currentColor"/><circle cx="49" cy="30" r="3.6" fill="currentColor"/></svg>
  ),
  Van: (
    <svg viewBox="0 0 64 34" fill="none"><path d="M2 24V10a3 3 0 013-3h40l14 9v8" stroke="currentColor" strokeWidth="2.2" strokeLinejoin="round"/><rect x="1" y="24" width="62" height="6.4" rx="3" stroke="currentColor" strokeWidth="2.2"/><circle cx="15" cy="30.4" r="3.4" fill="currentColor"/><circle cx="49" cy="30.4" r="3.4" fill="currentColor"/><path d="M45 7v13" stroke="currentColor" strokeWidth="2.2"/></svg>
  ),
  Luxury: (
    <svg viewBox="0 0 64 30" fill="none"><path d="M3 20l5-10a4 4 0 013.6-2.2h33a5 5 0 014.3 2.4L54 20" stroke="currentColor" strokeWidth="2.2"/><rect x="1" y="20" width="62" height="6.2" rx="3" stroke="currentColor" strokeWidth="2.2"/><circle cx="15" cy="26.2" r="3.4" fill="currentColor"/><circle cx="49" cy="26.2" r="3.4" fill="currentColor"/><path d="M20 8h24" stroke="currentColor" strokeWidth="2.2"/></svg>
  ),
};

const WA_NUMBER = "94771234567";
function waLink(text) {
  return `https://wa.me/${WA_NUMBER}?text=${encodeURIComponent(text)}`;
}
function money(n) {
  return "Rs " + n.toLocaleString("en-LK");
}

/* ---------------- toast ---------------- */
let toastFn = () => {};
function Toast() {
  const [msg, setMsg] = useState("");
  const [show, setShow] = useState(false);
  useEffect(() => {
    toastFn = (m) => {
      setMsg(m);
      setShow(true);
      clearTimeout(window.__ldToastTimer);
      window.__ldToastTimer = setTimeout(() => setShow(false), 2600);
    };
  }, []);
  return <div className={"toast" + (show ? " show" : "")}>{msg}</div>;
}
function toast(msg) { toastFn(msg); }

/* ---------------- image carousel ---------------- */
// Reusable header carousel: pass `images` (array of URLs or local paths) and
// optional `children` to overlay text on top. Autoplays, pauses on hover,
// has dot navigation and swipe/arrow support.
function Carousel({ images, height, children }) {
  const [i, setI] = useState(0);
  const [paused, setPaused] = useState(false);
  useEffect(() => {
    if (paused || images.length < 2) return;
    const t = setInterval(() => setI((n) => (n + 1) % images.length), 4500);
    return () => clearInterval(t);
  }, [paused, images.length]);
  const go = (n) => setI(((n % images.length) + images.length) % images.length);
  return (
    <div
      className="carousel"
      style={height ? { height } : undefined}
      onMouseEnter={() => setPaused(true)}
      onMouseLeave={() => setPaused(false)}
    >
      {images.map((src, idx) => (
        <img key={src} src={src} alt="" className={"carousel-slide" + (idx === i ? " active" : "")} />
      ))}
      <div className="carousel-scrim" />
      {children && <div className="carousel-content">{children}</div>}
      {images.length > 1 && (
        <React.Fragment>
          <button type="button" className="carousel-arrow left" onClick={() => go(i - 1)} aria-label="Previous image">‹</button>
          <button type="button" className="carousel-arrow right" onClick={() => go(i + 1)} aria-label="Next image">›</button>
          <div className="carousel-dots">
            {images.map((_, idx) => (
              <button type="button" key={idx} className={"carousel-dot" + (idx === i ? " active" : "")} onClick={() => go(idx)} aria-label={`Go to image ${idx + 1}`} />
            ))}
          </div>
        </React.Fragment>
      )}
    </div>
  );
}


/* ---------------- nav / footer ---------------- */
function Nav({ route }) {
  const link = (href, label) => (
    <a href={href} className={route === href ? "active" : ""}>{label}</a>
  );
  return (
    <div className="nav">
      <div className="nav-inner">
        <a href="#/" className="brand">
          <span className="mark">
            <svg viewBox="0 0 24 24" fill="none"><path d="M3 13l1.6-4.8A2 2 0 016.5 7h11a2 2 0 011.9 1.2L21 13" stroke="#fff" strokeWidth="1.8" strokeLinecap="round"/><rect x="2.5" y="13" width="19" height="5.2" rx="1.6" stroke="#fff" strokeWidth="1.8"/><circle cx="7" cy="18.2" r="1.6" fill="#fff"/><circle cx="17" cy="18.2" r="1.6" fill="#fff"/></svg>
          </span>
          LankaDrive
        </a>
        <div className="nav-links">
          {link("#/", "Home")}
          {link("#/fleet", "Fleet")}
          {link("#/destinations", "Destinations")}
          {link("#/about", "About")}
          {link("#/contact", "Contact")}
        </div>
        <a href={waLink("Hi! I'd like to ask about hiring a vehicle.")} target="_blank" rel="noreferrer" className="nav-cta">WhatsApp us</a>
      </div>
    </div>
  );
}

function Footer() {
  return (
    <footer>
      <div className="wrap foot-inner">
        <div><strong style={{ fontFamily: "'Fraunces',serif" }}>LankaDrive</strong> — island-wide vehicle hire.</div>
        <div>Built by B-Codex · demo data for review</div>
      </div>
    </footer>
  );
}

/* ---------------- vehicle card ---------------- */
function VehicleCard({ v }) {
  return (
    <a href={`#/vehicle/${v.id}`} className="vcard">
      <div className="thumb">
        <img src={v.image} alt={v.name} loading="lazy" />
        <span className="avail">Available</span>
      </div>
      <div className="body">
        <h3>{v.name}</h3>
        <div className="meta">
          <span>{v.seats} seats</span><span>·</span><span>{v.transmission}</span><span>·</span><span>★ {v.rating}</span>
        </div>
        <div className="tags">
          {v.tags.slice(0, 3).map((t) => <span className="tag" key={t}>{t}</span>)}
        </div>
        <div className="price">
          <div><b>{money(v.rate)}</b><br /><span>per day</span></div>
          <span className="btn btn-ghost btn-sm">View</span>
        </div>
      </div>
    </a>
  );
}

/* ---------------- home ---------------- */
function Home() {
  return (
    <div>
      <div className="hero">
        <div className="hero-inner">
          <div>
            <span className="eyebrow">● Self-drive &amp; chauffeur hire — island-wide</span>
            <h1>Hire the right vehicle, <em>without the back-and-forth</em>.</h1>
            <p className="lead">Browse the live fleet, lock a date on the calendar and get a WhatsApp confirmation in minutes — cars, vans and SUVs for airport transfers, tours and events across Sri Lanka.</p>
            <div className="hero-stats">
              <div><b>{VEHICLES.length}</b><span>vehicles in fleet</span></div>
              <div><b>4.8★</b><span>average rating</span></div>
              <div><b>&lt;10 min</b><span>WhatsApp response</span></div>
            </div>
          </div>
          <div className="hero-visual">
            <svg viewBox="0 0 400 320" preserveAspectRatio="xMidYMid slice">
              <defs><linearGradient id="g1" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stopColor="#ffffff" stopOpacity=".14" /><stop offset="1" stopColor="#ffffff" stopOpacity="0" /></linearGradient></defs>
              <circle cx="330" cy="60" r="120" fill="url(#g1)" />
              <path d="M0 250 Q100 210 200 245 T400 235 V320 H0 Z" fill="#ffffff" opacity=".08" />
              <g transform="translate(60,150)">
                <rect x="0" y="34" width="230" height="46" rx="12" fill="#ffffff" opacity=".92" />
                <path d="M18 34 L44 2 H176 L208 34 Z" fill="#ffffff" opacity=".92" />
                <circle cx="52" cy="82" r="17" fill="#16241f" /><circle cx="52" cy="82" r="7" fill="#ffffff" />
                <circle cx="182" cy="82" r="17" fill="#16241f" /><circle cx="182" cy="82" r="7" fill="#ffffff" />
                <rect x="58" y="12" width="42" height="22" rx="4" fill="#0f6e5c" />
                <rect x="106" y="12" width="42" height="22" rx="4" fill="#0f6e5c" />
              </g>
            </svg>
            <div className="badge"><span className="dot"></span> Live availability synced</div>
          </div>
        </div>

        <div className="wrap">
          <form className="search-card" onSubmit={(e) => { e.preventDefault(); toast("Sample search — connects to live inventory at launch."); window.location.hash = "#/fleet"; }}>
            <div className="field"><label>Pick-up location</label>
              <select><option>Bandaranaike Intl. Airport (CMB)</option><option>Colombo Fort</option><option>Kandy</option><option>Galle</option></select>
            </div>
            <div className="field"><label>Pick-up date</label><input type="date" defaultValue="2026-10-02" /></div>
            <div className="field"><label>Return date</label><input type="date" defaultValue="2026-10-05" /></div>
            <div className="field"><label>Vehicle type</label>
              <select><option>Any type</option><option>Sedan</option><option>SUV</option><option>Van</option><option>Luxury</option></select>
            </div>
            <button className="btn btn-primary" type="submit">Search fleet</button>
          </form>
        </div>
      </div>

      <section className="wrap">
        <div className="section-head">
          <div><span className="kicker">The fleet</span><h2>Popular this week</h2></div>
          <a href="#/fleet" className="btn btn-ghost btn-sm">View full fleet →</a>
        </div>
        <div className="fleet-grid">
          {VEHICLES.slice(0, 6).map((v) => <VehicleCard v={v} key={v.id} />)}
        </div>
      </section>

      <section className="wrap">
        <div className="section-head">
          <div><span className="kicker">How it works</span><h2>Booking takes three steps</h2></div>
        </div>
        <div className="steps">
          <div className="step"><div className="num">01</div><h3>Pick dates &amp; vehicle</h3><p>Search real availability instead of calling around — the calendar only shows what's actually free.</p></div>
          <div className="step"><div className="num">02</div><h3>Confirm on WhatsApp</h3><p>Your request lands with the office instantly; they confirm price and pickup details in chat.</p></div>
          <div className="step"><div className="num">03</div><h3>Meet your driver</h3><p>Get a reminder the day before, with the driver's name, plate number and live location on pickup day.</p></div>
        </div>
      </section>

      <section className="wrap">
        <div className="section-head">
          <div><span className="kicker">What travellers say</span><h2>Recent trips</h2></div>
        </div>
        <div className="testi-grid">
          {TESTIMONIALS.map((t) => (
            <div className="testi" key={t.name}>
              <div className="stars">★★★★★</div>
              <p className="quote">"{t.quote}"</p>
              <div className="who">{t.name} · {t.trip}</div>
            </div>
          ))}
        </div>
      </section>

      <section className="wrap">
        <div className="whatsapp-band">
          <div>
            <span className="kicker">Talk to a human</span>
            <h2 style={{ marginTop: 8 }}>Every booking ends in a WhatsApp thread.</h2>
            <p className="lead" style={{ marginTop: 10 }}>No app to install, no account to create. The moment a request comes in, the office replies from the number below.</p>
            <div style={{ marginTop: 16, display: "flex", gap: 10, flexWrap: "wrap", alignItems: "center" }}>
              <a className="btn btn-accent" href={waLink("Hi! I'd like to ask about hiring a vehicle.")} target="_blank" rel="noreferrer">Chat on WhatsApp</a>
              <span className="mono" style={{ fontSize: ".85rem", color: "var(--muted)" }}>+94 77 123 4567</span>
            </div>
          </div>
          <div className="chat-mock">
            <div className="bubble in">Hi! Is the KDH van free Oct 2–5 for an airport run?</div>
            <div className="bubble out">Yes 👍 Rs 32,000 total incl. driver. Shall I hold it?</div>
            <div className="bubble in">Yes please, hold it.</div>
            <div className="bubble out">Booked ✅ Ref #LK-2291. Driver details land here on Oct 1.</div>
          </div>
        </div>
      </section>
    </div>
  );
}

/* ---------------- fleet ---------------- */
function Fleet() {
  const [type, setType] = useState("All");
  const types = ["All", "Sedan", "SUV", "Van", "Luxury"];
  const shown = type === "All" ? VEHICLES : VEHICLES.filter((v) => v.type === type);
  return (
    <div>
      <div className="page-hero wrap">
        <div className="breadcrumb"><a href="#/">Home</a> / Fleet</div>
        <h1>The full fleet</h1>
        <p>{VEHICLES.length} vehicles, all insured and inspected before every trip. Prices are per day, driver optional unless noted.</p>
      </div>
      <section className="wrap" style={{ paddingTop: 24 }}>
        <div className="filter-bar">
          {types.map((t) => (
            <button key={t} className={"filter-chip" + (type === t ? " active" : "")} onClick={() => setType(t)}>{t}</button>
          ))}
        </div>
        <div className="fleet-grid">
          {shown.map((v) => <VehicleCard v={v} key={v.id} />)}
        </div>
        {shown.length === 0 && <p style={{ color: "var(--muted)", padding: "30px 0" }}>No vehicles in this category right now.</p>}
      </section>
    </div>
  );
}

/* ---------------- vehicle detail ---------------- */
function VehicleDetail({ id }) {
  const v = VEHICLES.find((x) => x.id === id) || VEHICLES[0];
  const [pickup, setPickup] = useState("2026-10-02");
  const [ret, setRet] = useState("2026-10-05");
  const days = Math.max(1, Math.round((new Date(ret) - new Date(pickup)) / 86400000) || 1);
  const total = days * v.rate;

  function submitEnquiry(e) {
    e.preventDefault();
    const text = `Hi! I'd like to book the ${v.name} from ${pickup} to ${ret} (${days} day${days > 1 ? "s" : ""}, ~${money(total)}).`;
    window.open(waLink(text), "_blank");
    toast("Opens WhatsApp with your dates pre-filled.");
  }

  return (
    <div className="wrap" style={{ paddingTop: 28, paddingBottom: 56 }}>
      <div className="breadcrumb"><a href="#/">Home</a> / <a href="#/fleet">Fleet</a> / {v.name}</div>
      <div className="detail-grid">
        <div>
          <div className="detail-hero"><img src={v.image} alt={v.name} /></div>
          <h1 style={{ marginTop: 20, fontSize: "1.8rem" }}>{v.name}</h1>
          <p style={{ color: "var(--muted)", marginTop: 8 }}>★ {v.rating} · {v.trips} trips completed · {v.type}</p>
          <p style={{ marginTop: 14, lineHeight: 1.6 }}>{v.blurb}</p>

          <div className="spec-grid">
            <div className="spec"><span>Seats</span><b>{v.seats}</b></div>
            <div className="spec"><span>Transmission</span><b>{v.transmission}</b></div>
            <div className="spec"><span>Fuel</span><b>{v.fuel}</b></div>
            <div className="spec"><span>Type</span><b>{v.type}</b></div>
          </div>

          <h3 style={{ marginTop: 26, fontSize: "1.05rem" }}>What's included</h3>
          <ul className="feature-list">
            {v.features.map((f) => <li key={f}>{f}</li>)}
          </ul>
        </div>

        <div className="book-card">
          <div className="rate"><b>{money(v.rate)}</b><span>/ day</span></div>
          <form className="form-grid" onSubmit={submitEnquiry}>
            <div className="two">
              <div><label>Pick-up</label><input type="date" value={pickup} onChange={(e) => setPickup(e.target.value)} /></div>
              <div><label>Return</label><input type="date" value={ret} onChange={(e) => setRet(e.target.value)} /></div>
            </div>
            <div><label>Your name</label><input placeholder="e.g. S. Perera" /></div>
            <div><label>Phone (WhatsApp)</label><input className="mono" placeholder="+94 7X XXX XXXX" /></div>
            <div style={{ display: "flex", justifyContent: "space-between", fontSize: ".85rem", padding: "6px 0" }}>
              <span style={{ color: "var(--muted)" }}>{days} day{days > 1 ? "s" : ""} estimated</span>
              <strong>{money(total)}</strong>
            </div>
            <button className="btn btn-primary btn-block" type="submit">Enquire on WhatsApp</button>
          </form>
          <p className="book-note">No payment now — the office confirms final price and pickup details over WhatsApp.</p>
        </div>
      </div>
    </div>
  );
}

/* ---------------- about ---------------- */
function About() {
  return (
    <div className="wrap" style={{ paddingTop: 28, paddingBottom: 56 }}>
      <div className="breadcrumb"><a href="#/">Home</a> / About</div>
      <h1 style={{ fontSize: "1.9rem" }}>Built by drivers, for travellers</h1>
      <p style={{ color: "var(--muted)", marginTop: 8, maxWidth: "62ch" }}>
        LankaDrive started as a family fleet of three cars doing airport runs for friends of friends.
        Six years on it's a full self-drive and chauffeur operation covering the whole island — same
        WhatsApp-first way of booking, just with a lot more vehicles.
      </p>

      <div className="about-banner">
        <img src="https://images.unsplash.com/photo-1718210142145-91d159d05815?auto=format&fit=crop&w=1400&q=80" alt="Colombo, Sri Lanka" />
        <div className="cap"><h2>Based in Colombo, driving the whole island</h2></div>
      </div>

      <div className="about-stats">
        <div className="about-stat"><b>6 yrs</b><span>in business</span></div>
        <div className="about-stat"><b>{VEHICLES.length}</b><span>vehicles in fleet</span></div>
        <div className="about-stat"><b>4,200+</b><span>trips completed</span></div>
        <div className="about-stat"><b>4.8★</b><span>average rating</span></div>
      </div>

      <section style={{ paddingTop: 8, paddingBottom: 0 }}>
        <div className="section-head">
          <div><span className="kicker">Where our clients go</span><h2>Popular destinations to hire for</h2></div>
          <a href="#/destinations" className="btn btn-ghost btn-sm">See all destinations →</a>
        </div>
        <div className="places-grid">
          {PLACES.slice(0, 3).map((p) => (
            <a className="place-card" key={p.id} href={`#/place/${p.id}`}>
              <div className="pimg"><img src={p.images[0]} alt={p.name} loading="lazy" /></div>
              <div className="pbody">
                <div className="region">{p.region}</div>
                <h3>{p.name}</h3>
                <p>{p.description}</p>
              </div>
            </a>
          ))}
        </div>
      </section>
    </div>
  );
}

/* ---------------- destinations (list) ---------------- */
function Destinations() {
  return (
    <div>
      <div className="wrap page-hero">
        <div className="breadcrumb"><a href="#/">Home</a> / Destinations</div>
      </div>
      <div className="wrap">
        <Carousel images={PLACES.slice(0, 4).map((p) => p.images[0])} height="360px">
          <span className="eyebrow" style={{ background: "rgba(255,255,255,.18)", color: "#fff" }}>● Island-wide destinations</span>
          <h1 style={{ color: "#fff", fontSize: "clamp(1.7rem,3.6vw,2.6rem)" }}>Where to take the vehicle</h1>
          <p style={{ color: "rgba(255,255,255,.88)", marginTop: 8, maxWidth: "56ch" }}>Six places our clients book for most, with the driving distance, best season and the vehicle that suits each trip.</p>
        </Carousel>
      </div>

      <section className="wrap">
        <div className="places-grid">
          {PLACES.map((p) => (
            <a className="place-card" key={p.id} href={`#/place/${p.id}`}>
              <div className="pimg"><img src={p.images[0]} alt={p.name} loading="lazy" /></div>
              <div className="pbody">
                <div className="region">{p.region}</div>
                <h3>{p.name}</h3>
                <p>{p.distance} · {p.idealVehicle}</p>
              </div>
            </a>
          ))}
        </div>
      </section>
    </div>
  );
}

/* ---------------- destination detail ---------------- */
function PlaceDetail({ id }) {
  const p = PLACES.find((x) => x.id === id) || PLACES[0];
  return (
    <div>
      <div className="wrap" style={{ paddingTop: 20 }}>
        <div className="breadcrumb"><a href="#/">Home</a> / <a href="#/destinations">Destinations</a> / {p.name}</div>
      </div>
      <div className="wrap">
        <Carousel images={p.images} height="420px">
          <span className="eyebrow" style={{ background: "rgba(255,255,255,.18)", color: "#fff" }}>{p.region}</span>
          <h1 style={{ color: "#fff", fontSize: "clamp(1.7rem,3.6vw,2.6rem)" }}>{p.name}</h1>
        </Carousel>
      </div>

      <div className="wrap" style={{ paddingTop: 30, paddingBottom: 56 }}>
        <div className="detail-grid">
          <div>
            <p style={{ lineHeight: 1.6, fontSize: "1rem" }}>{p.description}</p>

            <h3 style={{ marginTop: 26, fontSize: "1.05rem" }}>Highlights</h3>
            <ul className="feature-list">
              {p.highlights.map((h) => <li key={h}>{h}</li>)}
            </ul>

            <h3 style={{ marginTop: 26, fontSize: "1.05rem" }}>Suggested trips</h3>
            <div style={{ display: "flex", flexDirection: "column", gap: 12, marginTop: 12 }}>
              {p.trips.map((t) => (
                <div className="trip-card" key={t.title}>
                  <div className="trip-card-head">
                    <h4>{t.title}</h4>
                    <span className="tag">{t.duration}</span>
                  </div>
                  <p>{t.summary}</p>
                </div>
              ))}
            </div>
          </div>

          <div className="book-card" style={{ position: "sticky", top: 80 }}>
            <h3 style={{ fontSize: "1.05rem", marginBottom: 14 }}>Trip facts</h3>
            <div className="spec-grid" style={{ gridTemplateColumns: "1fr" }}>
              <div className="spec"><span>Distance from Colombo</span><b>{p.distance}</b></div>
              <div className="spec"><span>Best time to visit</span><b>{p.bestTime}</b></div>
              <div className="spec"><span>Suggested duration</span><b>{p.duration}</b></div>
              <div className="spec"><span>Ideal vehicle</span><b>{p.idealVehicle}</b></div>
            </div>
            <a
              className="btn btn-accent btn-block"
              style={{ marginTop: 16 }}
              href={waLink(`Hi! I'd like to plan a trip to ${p.name}. Could you suggest a vehicle and price?`)}
              target="_blank" rel="noreferrer"
            >
              Ask about this trip
            </a>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ---------------- contact ---------------- */
function Contact() {
  function submit(e) {
    e.preventDefault();
    toast("Sample form — wires to the real enquiry inbox at launch.");
    e.target.reset();
  }
  return (
    <div className="wrap" style={{ paddingTop: 28, paddingBottom: 56 }}>
      <div className="breadcrumb"><a href="#/">Home</a> / Contact</div>
      <h1 style={{ fontSize: "1.9rem" }}>Get in touch</h1>
      <p style={{ color: "var(--muted)", marginTop: 8, maxWidth: "56ch" }}>Fastest way to reach us is WhatsApp — most requests get a reply in under ten minutes during business hours.</p>

      <div className="contact-banner">
        <img src="https://images.unsplash.com/photo-1664256608032-3007263ab0d6?auto=format&fit=crop&w=1400&q=80" alt="Colombo streets" />
      </div>

      <div className="contact-grid" style={{ marginTop: 28 }}>
        <div>
          <div className="info-card">
            <div className="ic">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M12 3a9 9 0 00-7.7 13.6L3 21l4.5-1.2A9 9 0 1012 3z" stroke="currentColor" strokeWidth="1.7" /></svg>
            </div>
            <div><strong>WhatsApp</strong><br /><span className="mono" style={{ color: "var(--muted)" }}>+94 77 123 4567</span></div>
          </div>
          <div className="info-card">
            <div className="ic">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><rect x="3" y="5" width="18" height="14" rx="2" stroke="currentColor" strokeWidth="1.7" /><path d="M3 7l9 6 9-6" stroke="currentColor" strokeWidth="1.7" /></svg>
            </div>
            <div><strong>Email</strong><br /><span style={{ color: "var(--muted)" }}>bookings@lankadrive.lk</span></div>
          </div>
          <div className="info-card">
            <div className="ic">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M12 21s-7-6.2-7-11a7 7 0 0114 0c0 4.8-7 11-7 11z" stroke="currentColor" strokeWidth="1.7" /><circle cx="12" cy="10" r="2.4" stroke="currentColor" strokeWidth="1.7" /></svg>
            </div>
            <div><strong>Office</strong><br /><span style={{ color: "var(--muted)" }}>Colombo 05, Sri Lanka · open 8am–8pm daily</span></div>
          </div>
        </div>

        <form className="form-grid" onSubmit={submit} style={{ background: "var(--paper-raised)", border: "1px solid var(--line)", borderRadius: "var(--radius)", padding: 20 }}>
          <div><label>Name</label><input required placeholder="Your name" /></div>
          <div><label>Phone or email</label><input required placeholder="+94 7X XXX XXXX" /></div>
          <div><label>Message</label>
            <textarea required rows="4" placeholder="Tell us what you need — dates, vehicle, number of passengers..." style={{ width: "100%", border: "1px solid var(--line)", background: "var(--paper)", borderRadius: 9, padding: "9px 10px", fontFamily: "inherit", fontSize: ".86rem" }}></textarea>
          </div>
          <button className="btn btn-primary btn-block" type="submit">Send message</button>
        </form>
      </div>
    </div>
  );
}

/* ---------------- router ---------------- */
function useHashRoute() {
  const [hash, setHash] = useState(window.location.hash || "#/");
  useEffect(() => {
    const onChange = () => { setHash(window.location.hash || "#/"); window.scrollTo(0, 0); };
    window.addEventListener("hashchange", onChange);
    return () => window.removeEventListener("hashchange", onChange);
  }, []);
  return hash;
}

function App() {
  const hash = useHashRoute();
  let page;
  if (hash.startsWith("#/vehicle/")) {
    page = <VehicleDetail id={hash.replace("#/vehicle/", "")} />;
  } else if (hash.startsWith("#/place/")) {
    page = <PlaceDetail id={hash.replace("#/place/", "")} />;
  } else if (hash === "#/fleet") {
    page = <Fleet />;
  } else if (hash === "#/destinations") {
    page = <Destinations />;
  } else if (hash === "#/about") {
    page = <About />;
  } else if (hash === "#/contact") {
    page = <Contact />;
  } else {
    page = <Home />;
  }
  return (
    <React.Fragment>
      <Nav route={hash === "" ? "#/" : hash} />
      {page}
      <Footer />
      <Toast />
    </React.Fragment>
  );
}

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