import { createFileRoute } from "@tanstack/react-router";
import { useEffect, useRef, useState } from "react";

import heroFleet from "@/assets/hero-fleet.jpg";
import localTaxi from "@/assets/local-taxi.jpg";
import goaTaxis from "@/assets/goa-taxis.jpg";
import logoAsset from "@/assets/shahnoor-logo.jpg.asset.json";
import ertiga from "@/assets/ertiga.jpg";
import innovaCrysta from "@/assets/innova-crysta.jpg";
import swiftDzire from "@/assets/swift-dzire.jpg";
import airportTransfer from "@/assets/airport-transfer.jpg";
import sightseeing from "@/assets/sightseeing.jpg";
import bagaBeach from "@/assets/baga-beach.jpg";
import oldGoa from "@/assets/old-goa.jpg";
import dudhsagar from "@/assets/dudhsagar.jpg";
import nightClub from "@/assets/night-club.jpg";
import fortAguada from "@/assets/fort-aguada.jpg";
import casino from "@/assets/casino.jpg";
import whyUs from "@/assets/why-us.jpg";

const PHONE_DISPLAY = "+91 98239 52928";
const PHONE_TEL = "+919823952928";
const WHATSAPP = "919823952928";
const EMAIL = "rahilshaikh445@gmail.com";
const ADDRESS = "KTC Bus Stand, Margao, Goa";

export const Route = createFileRoute("/")({
  component: ShahnoorTaxi,
  head: () => ({
    meta: [
      { title: "Shahnoor Taxi Service — Reliable Taxi Service Across Goa" },
      {
        name: "description",
        content:
          "Shahnoor Taxi Service offers reliable taxi rides, airport transfers and sightseeing tours across Goa. Based at KTC Bus Stand, Margao. Book your ride 24x7.",
      },
      {
        property: "og:title",
        content: "Shahnoor Taxi Service — Reliable Taxi Service Across Goa",
      },
      {
        property: "og:description",
        content:
          "Reliable taxi rides, airport transfers and Goa sightseeing tours. Based at KTC Bus Stand, Margao. Book 24x7 — call +91 98239 52928.",
      },
      { property: "og:type", content: "website" },
      { property: "og:url", content: "/" },
      { name: "twitter:card", content: "summary_large_image" },
    ],
    links: [{ rel: "canonical", href: "/" }],
    scripts: [
      {
        type: "application/ld+json",
        children: JSON.stringify({
          "@context": "https://schema.org",
          "@type": "TaxiService",
          name: "Shahnoor Taxi Service",
          telephone: PHONE_TEL,
          email: EMAIL,
          address: {
            "@type": "PostalAddress",
            streetAddress: "KTC Bus Stand",
            addressLocality: "Margao",
            addressRegion: "Goa",
            addressCountry: "IN",
          },
          areaServed: "Goa",
          openingHours: "Mo-Su 00:00-23:59",
          priceRange: "₹₹",
        }),
      },
    ],
  }),
});

function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll(".reveal");
    if (!("IntersectionObserver" in window)) {
      els.forEach((e) => e.classList.add("is-visible"));
      return;
    }
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            entry.target.classList.add("is-visible");
            io.unobserve(entry.target);
          }
        });
      },
      { threshold: 0.12, rootMargin: "0px 0px -40px 0px" }
    );
    els.forEach((e) => io.observe(e));
    return () => io.disconnect();
  }, []);
}

function CountUp({ to, suffix }: { to: number; suffix?: string }) {
  const [val, setVal] = useState(0);
  const ref = useRef<HTMLSpanElement>(null);
  const started = useRef(false);

  useEffect(() => {
    const node = ref.current;
    if (!node) return;
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting && !started.current) {
            started.current = true;
            const duration = 1400;
            const start = performance.now();
            const step = (now: number) => {
              const p = Math.min((now - start) / duration, 1);
              const eased = 1 - Math.pow(1 - p, 3);
              setVal(Math.round(eased * to));
              if (p < 1) requestAnimationFrame(step);
            };
            requestAnimationFrame(step);
          }
        });
      },
      { threshold: 0.4 }
    );
    io.observe(node);
    return () => io.disconnect();
  }, [to]);

  return (
    <span ref={ref}>
      {val}
      {suffix}
    </span>
  );
}

const NAV = [
  { href: "#top", label: "Home" },
  { href: "#services", label: "Services" },
  { href: "#tours", label: "Tours" },
  { href: "#why-us", label: "Why Us" },
  { href: "#fleet", label: "Our Fleet" },
  { href: "#reviews", label: "Reviews" },
  { href: "#book", label: "Book Now" },
];

function Header() {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);

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

  return (
    <header
      className={`fixed inset-x-0 top-0 z-50 transition-all duration-300 ${
        scrolled
          ? "bg-card/95 shadow-[0_8px_30px_-12px_rgba(14,124,123,0.25)] backdrop-blur"
          : "bg-transparent"
      }`}
    >
      <div className="mx-auto flex max-w-7xl items-center justify-between px-4 py-3 sm:px-6">
        <a href="#top" className="flex items-center gap-3 no-underline">
          <img
            src={logoAsset.url}
            alt="Shahnoor Taxi Service Goa logo"
            className="h-11 w-11 rounded-full object-cover shadow-md ring-2 ring-primary/30"
          />
          <span className="flex flex-col leading-none">
            <strong
              className={`font-display text-base font-bold tracking-tight transition-colors ${
                scrolled ? "text-foreground" : "text-white"
              }`}
            >
              SHAHNOOR
            </strong>
            <small className="text-[11px] font-semibold uppercase tracking-[0.18em] text-accent">
              Taxi Service
            </small>
          </span>
        </a>

        <nav className="hidden items-center gap-7 lg:flex">
          {NAV.map((n) => (
            <a key={n.href} href={n.href} className="nav-link">
              {n.label}
            </a>
          ))}
        </nav>

        <div className="hidden items-center gap-2 md:flex">
          <a
            href={`https://wa.me/${WHATSAPP}`}
            target="_blank"
            rel="noopener"
            className="btn btn-whatsapp"
          >
            <WhatsappIcon className="h-4 w-4" /> WhatsApp
          </a>
          <a href={`tel:${PHONE_TEL}`} className="btn btn-primary">
            <PhoneIcon className="h-4 w-4" /> Call
          </a>
        </div>

        <button
          className="flex flex-col gap-1.5 p-2 md:hidden"
          onClick={() => setOpen((v) => !v)}
          aria-label="Toggle navigation"
        >
          <span
            className={`block h-0.5 w-6 bg-foreground transition-transform ${
              open ? "translate-y-2 rotate-45" : ""
            }`}
          />
          <span
            className={`block h-0.5 w-6 bg-foreground transition-opacity ${
              open ? "opacity-0" : ""
            }`}
          />
          <span
            className={`block h-0.5 w-6 bg-foreground transition-transform ${
              open ? "-translate-y-2 -rotate-45" : ""
            }`}
          />
        </button>
      </div>

      {open && (
        <div className="border-t border-border bg-card md:hidden">
          <nav className="mx-auto flex max-w-7xl flex-col gap-1 px-4 py-3">
            {NAV.map((n) => (
              <a
                key={n.href}
                href={n.href}
                onClick={() => setOpen(false)}
                className="rounded-lg px-3 py-2.5 text-sm font-medium text-foreground hover:bg-muted"
              >
                {n.label}
              </a>
            ))}
            <div className="mt-2 flex gap-2">
              <a
                href={`https://wa.me/${WHATSAPP}`}
                target="_blank"
                rel="noopener"
                className="btn btn-whatsapp flex-1"
              >
                WhatsApp
              </a>
              <a href={`tel:${PHONE_TEL}`} className="btn btn-primary flex-1">
                Call
              </a>
            </div>
          </nav>
        </div>
      )}
    </header>
  );
}

function Hero() {
  return (
    <section id="top" className="relative min-h-[100svh] overflow-hidden">
      <div className="absolute inset-0">
        <img
          src={heroFleet}
          alt="Shahnoor Taxi Service fleet — Maruti Suzuki Ertiga and Toyota Innova Crysta at a Goan coastal road"
          width={1600}
          height={1000}
          className="h-full w-full object-cover"
        />
        <div className="hero-overlay" />
      </div>

      <div className="relative mx-auto flex min-h-[100svh] max-w-7xl flex-col justify-center px-4 pt-28 pb-20 sm:px-6">
        <span className="eyebrow eyebrow-light reveal mb-5 max-w-max">
          Your Trusted Goa Travel Partner
        </span>
        <h1 className="reveal max-w-3xl font-display text-4xl font-bold leading-[1.08] text-white sm:text-5xl md:text-6xl">
          Explore Goa with{" "}
          <span className="text-accent">Shahnoor Taxi Service</span>
        </h1>
        <p className="reveal mt-6 max-w-2xl text-lg leading-relaxed text-white/90">
          Reliable taxi service across Goa — local rides, airport transfers and
          guided sightseeing tours. Ride in comfort with friendly local drivers
          who know every beach, church and waterfall.
        </p>

        <div className="reveal mt-8 flex flex-wrap gap-3">
          <a href="#book" className="btn btn-primary">
            Book Your Taxi
          </a>
          <a href={`tel:${PHONE_TEL}`} className="btn btn-ghost-light">
            <PhoneIcon className="h-4 w-4" /> {PHONE_DISPLAY}
          </a>
          <a
            href={`https://wa.me/${WHATSAPP}`}
            target="_blank"
            rel="noopener"
            className="btn btn-whatsapp"
          >
            <WhatsappIcon className="h-4 w-4" /> WhatsApp Us
          </a>
        </div>

        <div className="reveal mt-8 flex flex-wrap items-center gap-x-3 gap-y-1 text-sm text-white/85">
          <span className="text-accent">★★★★★</span>
          <span>Trusted by travellers across Goa</span>
          <span className="opacity-50">•</span>
          <span>24x7 airport pickup available</span>
        </div>
      </div>

      <svg
        className="absolute bottom-0 left-0 w-full"
        viewBox="0 0 1440 90"
        preserveAspectRatio="none"
        aria-hidden="true"
      >
        <path
          d="M0,32 C240,90 480,90 720,55 C960,20 1200,20 1440,50 L1440,100 L0,100 Z"
          fill="var(--goa-cream)"
        />
      </svg>
    </section>
  );
}

const SERVICES = [
  {
    img: goaTaxis,
    alt: "Goa taxis — Swift Dzire, Ertiga and Innova Crysta at Shahnoor Taxi Service",
    title: "Local Taxi Service",
    desc: "Comfortable rides anywhere in Goa — North to South. Clean cars, courteous drivers, on-time pickups.",
    points: [
      "Sedan, SUV & Tempo Traveller",
      "Hourly & full-day rentals",
      "Outstation trips available",
    ],
  },
  {
    img: ertiga,
    alt: "Maruti Suzuki Ertiga taxi for airport transfers in Goa",
    title: "Airport Transfers",
    desc: "Hassle-free pickup and drop at Goa (Dabolim) Airport and Mopa (Manohar) Airport with flight tracking.",
    points: [
      "Meet & greet on arrivals",
      "Fixed transparent fares",
      "24x7 day & night service",
    ],
  },
  {
    img: innovaCrysta,
    alt: "Toyota Innova Crysta taxi for Goa sightseeing tours",
    title: "Goa Sightseeing Tours",
    desc: "Curated day tours covering beaches, churches, forts, waterfalls and spice plantations with local guides.",
    points: [
      "North Goa & South Goa tours",
      "Dudhsagar waterfall trip",
      "Custom itineraries welcome",
    ],
  },
  {
    img: swiftDzire,
    alt: "Outstation taxi service from Goa",
    title: "Outstation Taxi",
    desc: "Outstation taxi service from Goa to Mumbai, Pune, Bengaluru, Karnataka and beyond — one-way or round-trip with safe, experienced drivers.",
    points: [
      "Goa to Mumbai, Pune & Bengaluru",
      "One-way & round-trip options",
      "Safe overnight highway travel",
    ],
  },
];

function Services() {
  return (
    <section id="services" className="bg-background py-20 sm:py-28">
      <div className="mx-auto max-w-7xl px-4 sm:px-6">
        <div className="mx-auto max-w-2xl text-center">
          <span className="eyebrow">What We Offer</span>
          <h2 className="mt-3 font-display text-3xl font-bold leading-tight text-foreground sm:text-4xl">
            Taxi & tour services crafted for every Goan journey
          </h2>
          <p className="mt-4 text-muted-foreground">
            From quick local rides to full-day coastal adventures, Shahnoor Taxi
            Service covers every mile of your Goa trip with comfort and
            reliability.
          </p>
        </div>

        <div className="mt-14 grid gap-6 md:grid-cols-2 lg:grid-cols-4">
          {SERVICES.map((s) => (
            <article
              key={s.title}
              className="reveal group flex flex-col overflow-hidden rounded-2xl border border-border bg-card shadow-sm transition-all duration-300 hover:-translate-y-1.5 hover:shadow-xl"
            >
              <div className="relative h-52 overflow-hidden">
                <img
                  src={s.img}
                  alt={s.alt}
                  loading="lazy"
                  className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"
                />
                <span className="absolute left-4 top-4 flex h-10 w-10 items-center justify-center rounded-full bg-card shadow-md">
                  <TaxiIcon className="h-5 w-5 text-teal" />
                </span>
              </div>
              <div className="flex flex-1 flex-col p-6">
                <h3 className="font-display text-xl font-bold text-foreground">
                  {s.title}
                </h3>
                <p className="mt-2 text-sm text-muted-foreground">{s.desc}</p>
                <ul className="mt-4 space-y-2">
                  {s.points.map((p) => (
                    <li
                      key={p}
                      className="flex items-center gap-2 text-sm text-foreground"
                    >
                      <CheckIcon className="h-4 w-4 text-teal" /> {p}
                    </li>
                  ))}
                </ul>
                <a href="#book" className="card-link mt-5">
                  Book this service →
                </a>
              </div>
            </article>
          ))}
        </div>

        <div className="mt-10 grid gap-4 sm:grid-cols-3">
          {[
            { t: "24x7 Availability", d: "Day or night, we are just a call away." },
            { t: "Safe & Verified", d: "Licensed drivers, well-maintained cars." },
            { t: "Best Prices", d: "Honest fares with no hidden charges." },
          ].map((f) => (
            <div
              key={f.t}
              className="reveal flex items-center gap-3 rounded-xl border border-border bg-card p-4"
            >
              <span className="flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-teal/10">
                <ClockIcon className="h-5 w-5 text-teal" />
              </span>
              <div>
                <h4 className="font-display text-sm font-bold text-foreground">
                  {f.t}
                </h4>
                <p className="text-xs text-muted-foreground">{f.d}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

const DESTINATIONS = [
  { img: bagaBeach, alt: "Baga and Calangute Beach", tag: "North Goa", title: "Baga & Calangute Beach", desc: "Lively shacks, water sports and golden sunsets on Goa's most popular stretch." },
  { img: oldGoa, alt: "Old Goa Churches", tag: "Heritage", title: "Old Goa Churches", desc: "Basilica of Bom Jesus, Sé Cathedral and centuries of Portuguese history." },
  { img: dudhsagar, alt: "Dudhsagar Waterfall", tag: "Adventure", title: "Dudhsagar Waterfall", desc: "A four-tiered jungle waterfall — one of India's most spectacular sights." },
  { img: nightClub, alt: "Goa night club", tag: "Goa Nights", title: "Night Clubs", desc: "Experience Goa nightlife with music, energetic vibes and unforgettable nights." },
  { img: fortAguada, alt: "Fort Aguada", tag: "History", title: "Fort Aguada", desc: "17th-century Portuguese fort and lighthouse overlooking the Arabian Sea." },
  { img: casino, alt: "Casino in Goa", tag: "Relax", title: "Casino Goa", desc: "Luxurious casinos, exciting gaming tables and an energetic atmosphere." },
];

function Destinations() {
  return (
    <section id="tours" className="bg-sand/60 py-20 sm:py-28">
      <div className="mx-auto max-w-7xl px-4 sm:px-6">
        <div className="mx-auto max-w-2xl text-center">
          <span className="eyebrow">Popular Destinations</span>
          <h2 className="mt-3 font-display text-3xl font-bold leading-tight text-foreground sm:text-4xl">
            Top Goa tours & getaways
          </h2>
          <p className="mt-4 text-muted-foreground">
            Handpicked spots loved by our travellers. Mix and match to build your
            own perfect day-trip — we handle the rest.
          </p>
        </div>

        <div className="mt-14 grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
          {DESTINATIONS.map((d) => (
            <article
              key={d.title}
              className="reveal group relative overflow-hidden rounded-2xl shadow-sm"
            >
              <img
                src={d.img}
                alt={d.alt}
                loading="lazy"
                className="h-72 w-full object-cover transition-transform duration-500 group-hover:scale-110"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-black/85 via-black/25 to-transparent" />
              <span className="absolute left-4 top-4 rounded-full bg-accent px-3 py-1 text-xs font-semibold text-accent-foreground">
                {d.tag}
              </span>
              <span className="absolute right-4 top-4 text-sm text-white">
                ★★★★★
              </span>
              <div className="absolute inset-x-0 bottom-0 p-5">
                <h3 className="font-display text-lg font-bold text-white">
                  {d.title}
                </h3>
                <p className="mt-1 text-sm text-white/85">{d.desc}</p>
              </div>
            </article>
          ))}
        </div>

        <div className="mt-12 text-center">
          <a href="#book" className="btn btn-primary">
            Plan your custom tour
          </a>
        </div>
      </div>
    </section>
  );
}

const FLEET = [
  {
    img: ertiga,
    alt: "Maruti Suzuki Ertiga taxi for hire in Goa",
    title: "Maruti Suzuki Ertiga",
    desc: "Spacious 7-seater — perfect for families and small groups travelling across Goa.",
  },
  {
    img: innovaCrysta,
    alt: "Toyota Innova Crysta taxi for hire in Goa",
    title: "Toyota Innova Crysta",
    desc: "Premium SUV comfort for long drives, outstation trips and airport transfers.",
  },
  {
    img: swiftDzire,
    alt: "Maruti Suzuki Swift Dzire taxi for hire in Goa",
    title: "Maruti Suzuki Swift Dzire",
    desc: "Compact and fuel-efficient sedan — ideal for city rides and local sightseeing.",
  },
];

function Fleet() {
  return (
    <section id="fleet" className="bg-sand/60 py-20 sm:py-28">
      <div className="mx-auto max-w-7xl px-4 sm:px-6">
        <div className="mx-auto max-w-2xl text-center">
          <span className="eyebrow">Our Fleet</span>
          <h2 className="mt-3 font-display text-3xl font-bold leading-tight text-foreground sm:text-4xl">
            Real cars, real service
          </h2>
          <p className="mt-4 text-muted-foreground">
            Clean, well-maintained and fully permitted cabs — the very cars that
            will pick you up.
          </p>
        </div>

        <div className="mt-14 grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
          {FLEET.map((f) => (
            <article
              key={f.title}
              className="reveal group relative overflow-hidden rounded-2xl shadow-sm"
            >
              <img
                src={f.img}
                alt={f.alt}
                loading="lazy"
                className="h-80 w-full object-cover transition-transform duration-500 group-hover:scale-110"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-black/85 via-black/20 to-transparent" />
              <div className="absolute inset-x-0 bottom-0 p-5">
                <h3 className="font-display text-lg font-bold text-white">
                  {f.title}
                </h3>
                <p className="mt-1 text-sm text-white/85">{f.desc}</p>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

const WHY = [
  { t: "Licensed & trusted drivers", d: "Every driver is background-verified, polite and knows Goa inside-out — your safety comes first." },
  { t: "Transparent, honest pricing", d: "No surge, no hidden charges. You see the fare before you ride and pay exactly what is shown." },
  { t: "Punctual every time", d: "We track your flight and traffic so your taxi is waiting when you land or step out of your hotel." },
  { t: "Vehicles for every group", d: "From compact sedans for couples to Tempo Travellers for large families — comfortably." },
  { t: "Custom itineraries", d: "Tell us what you love — beaches, churches, waterfalls or food — and we craft the perfect Goan route." },
  { t: "Friendly local experience", d: "More than a ride — our drivers double as local guides sharing hidden gems only Goans know." },
];

function WhyUs() {
  return (
    <section id="why-us" className="bg-background py-20 sm:py-28">
      <div className="mx-auto grid max-w-7xl items-center gap-12 px-4 sm:px-6 lg:grid-cols-2">
        <div className="reveal relative">
          <span className="absolute -left-3 -top-3 z-10 rounded-full bg-accent px-4 py-1.5 text-xs font-bold text-accent-foreground shadow-lg">
            Trusted in Margao
          </span>
          <img
            src={ertiga}
            alt="Maruti Suzuki Ertiga taxi at Shahnoor Taxi Service"
            loading="lazy"
            className="aspect-[4/5] w-full rounded-3xl object-cover shadow-xl"
          />
          <div className="absolute -bottom-6 -right-2 flex items-center gap-3 rounded-2xl bg-card p-4 shadow-xl sm:right-6">
            <strong className="font-display text-3xl font-bold text-teal">
              4.9★
            </strong>
            <span className="text-xs text-muted-foreground">
              Rated by travellers
              <br />
              across Goa
            </span>
          </div>
        </div>

        <div className="reveal">
          <span className="eyebrow">Why Travel With Us</span>
          <h2 className="mt-3 font-display text-3xl font-bold leading-tight text-foreground sm:text-4xl">
            The most dependable way to explore Goa
          </h2>
          <p className="mt-4 text-muted-foreground">
            We are a local Goan team based at KTC Bus Stand, Margao. Clean cars,
            fair prices and genuine Goan hospitality on every journey.
          </p>

          <div className="mt-8 grid gap-5 sm:grid-cols-2">
            {WHY.map((w) => (
              <div key={w.t} className="flex gap-3">
                <span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-teal/10">
                  <ShieldIcon className="h-5 w-5 text-teal" />
                </span>
                <div>
                  <h4 className="font-display text-sm font-bold text-foreground">
                    {w.t}
                  </h4>
                  <p className="mt-1 text-sm text-muted-foreground">{w.d}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div className="stats-bar-bg mt-16">
        <div className="mx-auto grid max-w-7xl grid-cols-2 gap-6 px-4 py-10 text-center sm:px-6 md:grid-cols-4">
          <div className="text-white">
            <strong className="font-display text-4xl font-bold">
              <CountUp to={500} suffix="+" />
            </strong>
            <span className="mt-1 block text-sm text-white/80">
              Happy travellers
            </span>
          </div>
          <div className="text-white">
            <strong className="font-display text-4xl font-bold">
              <CountUp to={8} suffix="+" />
            </strong>
            <span className="mt-1 block text-sm text-white/80">
              Years in Goa
            </span>
          </div>
          <div className="text-white">
            <strong className="font-display text-4xl font-bold">
              <CountUp to={24} suffix="x7" />
            </strong>
            <span className="mt-1 block text-sm text-white/80">
              Always available
            </span>
          </div>
          <div className="text-white">
            <strong className="font-display text-4xl font-bold">
              <CountUp to={100} suffix="%" />
            </strong>
            <span className="mt-1 block text-sm text-white/80">
              On-time pickups
            </span>
          </div>
        </div>
      </div>
    </section>
  );
}

function Booking() {
  const [sent, setSent] = useState(false);

  return (
    <section id="book" className="relative overflow-hidden py-20 sm:py-28">
      <div className="absolute inset-0">
        <img src={heroFleet} alt="" className="h-full w-full object-cover" />
        <div className="booking-overlay" />
      </div>

      <div className="relative mx-auto max-w-3xl px-4 sm:px-6">
        <div className="text-center">
          <span className="eyebrow eyebrow-light">Book in 30 Seconds</span>
          <h2 className="mt-3 font-display text-3xl font-bold text-white sm:text-4xl">
            Book your Goa taxi or tour
          </h2>
          <p className="mt-4 text-white/85">
            Fill in the details below and we will confirm your ride on WhatsApp or
            by call shortly.
          </p>
        </div>

        <form
          className="reveal mt-10 rounded-3xl bg-card p-6 shadow-2xl sm:p-8"
          onSubmit={(e) => {
            e.preventDefault();
            const form = e.currentTarget;
            const data = new FormData(form);
            const name = data.get("fullName");
            const phone = data.get("phone");
            const service = data.get("service");
            const pickup = data.get("pickup");
            const drop = data.get("drop");
            const date = data.get("date");
            const passengers = data.get("passengers");
            const message = data.get("message");
            const text =
              `*New Booking Request — Shahnoor Taxi Service*%0A` +
              `Name: ${name}%0A` +
              `Phone: ${phone}%0A` +
              `Service: ${service}%0A` +
              `Pickup: ${pickup}%0A` +
              `Drop: ${drop || "—"}%0A` +
              `Date: ${date}%0A` +
              `Passengers: ${passengers}%0A` +
              `Message: ${message || "—"}`;
            const link = document.createElement("a");
            link.href = `https://wa.me/${WHATSAPP}?text=${text}`;
            link.target = "_blank";
            link.rel = "noopener";
            document.body.appendChild(link);
            link.click();
            link.remove();
            setSent(true);
            form.reset();
            setTimeout(() => setSent(false), 6000);
          }}
          noValidate
        >
          <div className="grid gap-4 sm:grid-cols-2">
            <Field label="Full name *">
              <input
                name="fullName"
                required
                placeholder="e.g. Rahul Sharma"
                className="input"
              />
            </Field>
            <Field label="Phone number *">
              <input
                name="phone"
                type="tel"
                required
                placeholder="e.g. +91 90000 00000"
                className="input"
              />
            </Field>
            <Field label="Email (optional)">
              <input
                name="email"
                type="email"
                placeholder="you@example.com"
                className="input"
              />
            </Field>
            <Field label="Service *">
              <select name="service" required className="input" defaultValue="">
                <option value="" disabled>
                  Select a service
                </option>
                <option value="local-taxi">Local Taxi Service</option>
                <option value="airport-transfer">Airport Transfer</option>
                <option value="sightseeing">Goa Sightseeing Tour</option>
                <option value="outstation">Outstation Taxi</option>
                <option value="custom">Custom Itinerary</option>
              </select>
            </Field>
            <Field label="Pickup location *">
              <input
                name="pickup"
                required
                placeholder="e.g. Dabolim Airport / Margao"
                className="input"
              />
            </Field>
            <Field label="Drop location (optional)">
              <input
                name="drop"
                placeholder="e.g. Palolem Beach"
                className="input"
              />
            </Field>
            <Field label="Travel date *">
              <input name="date" type="date" required className="input" />
            </Field>
            <Field label="Passengers">
              <input
                name="passengers"
                type="number"
                min="1"
                defaultValue="1"
                className="input"
              />
            </Field>
          </div>
          <Field label="Message (optional)" className="mt-4">
            <textarea
              name="message"
              rows={3}
              placeholder="Any special requests — child seat, luggage, stops along the way..."
              className="input resize-none"
            />
          </Field>

          <button type="submit" className="btn btn-primary btn-block mt-5">
            <SendIcon className="h-4 w-4" /> Send booking request
          </button>
          <p className="mt-3 text-center text-xs text-muted-foreground">
            By submitting, you agree to be contacted about your booking. We never
            share your details.
          </p>

          {sent && (
            <div
              role="status"
              aria-live="polite"
              className="mt-4 flex items-center gap-3 rounded-xl border border-teal/30 bg-teal/10 p-4 text-sm text-foreground"
            >
              <CheckIcon className="h-5 w-5 text-teal" />
              <span>
                Thanks! Your booking request has opened in WhatsApp — we'll
                confirm your ride shortly.
              </span>
            </div>
          )}
        </form>
      </div>
    </section>
  );
}

function Field({
  label,
  children,
  className = "",
}: {
  label: string;
  children: React.ReactNode;
  className?: string;
}) {
  return (
    <label className={`flex flex-col gap-1.5 ${className}`}>
      <span className="text-xs font-semibold text-foreground">{label}</span>
      {children}
    </label>
  );
}

const TESTIMONIALS = [
  {
    text: "Picked us up from Margao right on time. The driver knew every hidden beach in South Goa. Best decision of our trip!",
    name: "Aarav Mehta",
    place: "Mumbai",
    initials: "AM",
    color: "var(--goa-sunset)",
  },
  {
    text: "Booked a full-day North Goa tour. Clean car, friendly English-speaking driver and a perfectly planned itinerary. Highly recommend.",
    name: "Sarah Johnson",
    place: "United Kingdom",
    initials: "SJ",
    color: "var(--goa-sunset-soft)",
  },
  {
    text: "Used Shahnoor for our honeymoon airport transfers and Dudhsagar trip. So punctual and courteous — felt completely safe.",
    name: "Priya & Karthik",
    place: "Bengaluru",
    initials: "PK",
    color: "var(--goa-teal)",
  },
];

function Testimonials() {
  return (
    <section id="reviews" className="bg-background py-20 sm:py-28">
      <div className="mx-auto max-w-7xl px-4 sm:px-6">
        <div className="mx-auto max-w-2xl text-center">
          <span className="eyebrow">Traveller Stories</span>
          <h2 className="mt-3 font-display text-3xl font-bold text-foreground sm:text-4xl">
            Loved by visitors from around the world
          </h2>
          <p className="mt-4 text-muted-foreground">
            We have proudly served travellers exploring Goa. Here is what a few of
            them had to say.
          </p>
        </div>

        <div className="mt-14 grid gap-6 md:grid-cols-3">
          {TESTIMONIALS.map((t) => (
            <article
              key={t.name}
              className="reveal relative flex flex-col rounded-2xl border border-border bg-card p-6 shadow-sm"
            >
              <span className="absolute right-5 top-2 font-display text-5xl text-teal/15">
                &ldquo;
              </span>
              <span className="text-accent">★★★★★</span>
              <p className="mt-3 flex-1 text-sm leading-relaxed text-foreground">
                {t.text}
              </p>
              <div className="mt-5 flex items-center gap-3">
                <span
                  className="flex h-10 w-10 items-center justify-center rounded-full font-display text-sm font-bold text-white"
                  style={{ background: t.color }}
                >
                  {t.initials}
                </span>
                <div>
                  <strong className="block text-sm font-bold text-foreground">
                    {t.name}
                  </strong>
                  <small className="text-xs text-muted-foreground">
                    {t.place}
                  </small>
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="bg-foreground text-background">
      <div className="mx-auto grid max-w-7xl gap-10 px-4 py-14 sm:px-6 md:grid-cols-4">
        <div className="md:col-span-1">
          <a href="#top" className="flex items-center gap-3 no-underline">
            <img
              src={logoAsset.url}
              alt="Shahnoor Taxi Service Goa logo"
              className="h-11 w-11 rounded-full object-cover ring-2 ring-primary/40"
            />
            <span className="flex flex-col leading-none">
              <strong className="font-display text-base font-bold tracking-tight text-background">
                SHAHNOOR
              </strong>
              <small className="text-[11px] font-semibold uppercase tracking-[0.18em] text-accent">
                Taxi Service
              </small>
            </span>
          </a>
          <p className="mt-4 text-sm text-background/70">
            Your trusted local taxi and tour service across Goa. Reliable rides,
            airport transfers and unforgettable Goan experiences.
          </p>
        </div>

        <div>
          <h4 className="font-display text-sm font-bold uppercase tracking-wide text-background">
            Quick Links
          </h4>
          <div className="mt-4 flex flex-col gap-2.5">
            {NAV.map((n) => (
              <a key={n.href} href={n.href} className="footer-link">
                {n.label}
              </a>
            ))}
          </div>
        </div>

        <div>
          <h4 className="font-display text-sm font-bold uppercase tracking-wide text-background">
            Our Services
          </h4>
          <div className="mt-4 flex flex-col gap-2.5">
            <a href="#services" className="footer-link">Local Taxi Service</a>
            <a href="#services" className="footer-link">Airport Transfers</a>
            <a href="#services" className="footer-link">Outstation Taxi</a>
            <a href="#tours" className="footer-link">North & South Goa Tours</a>
            <a href="#tours" className="footer-link">Dudhsagar Waterfall Trip</a>
            <a href="#book" className="footer-link">Custom Itineraries</a>
          </div>
        </div>

        <div>
          <h4 className="font-display text-sm font-bold uppercase tracking-wide text-background">
            Get In Touch
          </h4>
          <div className="mt-4 flex flex-col gap-2.5 text-sm text-background/80">
            <a href={`tel:${PHONE_TEL}`} className="footer-link">
              {PHONE_DISPLAY}
            </a>
            <a
              href={`https://wa.me/${WHATSAPP}`}
              target="_blank"
              rel="noopener"
              className="footer-link"
            >
              WhatsApp Chat
            </a>
            <a href={`mailto:${EMAIL}`} className="footer-link">
              {EMAIL}
            </a>
            <span>{ADDRESS}</span>
            <span>Available 24x7</span>
          </div>
          <div className="mt-5 flex gap-2">
            <a
              href={`https://wa.me/${WHATSAPP}`}
              target="_blank"
              rel="noopener"
              className="flex h-10 w-10 items-center justify-center rounded-full bg-white/10 transition-colors hover:bg-whatsapp"
              aria-label="WhatsApp"
            >
              <WhatsappIcon className="h-4 w-4 text-background" />
            </a>
            <a
              href={`tel:${PHONE_TEL}`}
              className="flex h-10 w-10 items-center justify-center rounded-full bg-white/10 transition-colors hover:bg-primary"
              aria-label="Call"
            >
              <PhoneIcon className="h-4 w-4 text-background" />
            </a>
            <a
              href={`mailto:${EMAIL}`}
              className="flex h-10 w-10 items-center justify-center rounded-full bg-white/10 transition-colors hover:bg-accent"
              aria-label="Email"
            >
              <MailIcon className="h-4 w-4 text-background" />
            </a>
          </div>
        </div>
      </div>

      <div className="border-t border-white/10">
        <div className="mx-auto flex max-w-7xl flex-col items-center justify-between gap-2 px-4 py-5 text-xs text-background/60 sm:flex-row sm:px-6">
          <span>© {new Date().getFullYear()} Shahnoor Taxi Service. All rights reserved.</span>
          <a href="https://www.infotechmantra.in" target="_blank" rel="noopener noreferrer" className="font-bold text-background/80 transition-colors hover:text-background">Design & Developed by - Infotech Mantra</a>
        </div>
      </div>
    </footer>
  );
}

function FloatingWhatsApp() {
  return (
    <a
      href={`https://wa.me/${WHATSAPP}`}
      target="_blank"
      rel="noopener"
      className="fixed bottom-5 right-5 z-50 flex h-14 w-14 items-center justify-center rounded-full bg-whatsapp text-white shadow-lg shadow-whatsapp/40 transition-transform hover:scale-110"
      aria-label="Chat on WhatsApp"
    >
      <WhatsappIcon className="h-7 w-7" />
    </a>
  );
}

function ShahnoorTaxi() {
  useReveal();
  return (
    <>
      <Header />
      <main>
        <Hero />
        <Services />
        <Destinations />
        <WhyUs />
        <Fleet />
        <Booking />
        <Testimonials />
      </main>
      <Footer />
      <FloatingWhatsApp />
    </>
  );
}

/* ---------- Icons ---------- */
type IconProps = { className?: string };

function WhatsappIcon({ className }: IconProps) {
  return (
    <svg className={className} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
      <path d="M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.72.45 3.4 1.3 4.87L2 22l5.35-1.4a9.9 9.9 0 004.7 1.2h.01c5.46 0 9.9-4.45 9.9-9.9C21.96 6.45 17.5 2 12.04 2zm0 18.1c-1.48 0-2.93-.4-4.2-1.15l-.3-.18-3.18.83.85-3.1-.2-.32a8.1 8.1 0 01-1.24-4.27c0-4.5 3.66-8.16 8.17-8.16 4.5 0 8.16 3.66 8.16 8.16 0 4.5-3.66 8.19-8.16 8.19zm4.6-5.95c-.25-.13-1.48-.73-1.71-.81-.23-.08-.4-.13-.56.13-.17.25-.64.81-.79.98-.14.17-.29.19-.54.06-.25-.13-1.06-.39-2.02-1.25-.75-.67-1.25-1.49-1.4-1.74-.14-.25-.01-.39.11-.51.11-.11.25-.29.37-.43.13-.14.17-.25.25-.41.08-.17.04-.31-.02-.43-.06-.13-.56-1.36-.77-1.86-.2-.48-.41-.42-.56-.43h-.48c-.17 0-.43.06-.66.31-.23.25-.86.85-.86 2.07 0 1.22.89 2.4 1.01 2.57.13.17 1.75 2.67 4.24 3.74.59.26 1.05.41 1.41.52.59.19 1.13.16 1.56.1.48-.07 1.48-.6 1.69-1.18.21-.58.21-1.08.14-1.18-.06-.1-.22-.16-.47-.29z" />
    </svg>
  );
}

function PhoneIcon({ className }: IconProps) {
  return (
    <svg className={className} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
      <path d="M6.6 10.8c1.4 2.8 3.7 5.1 6.5 6.5l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.4 21 3 13.6 3 4.5c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .8-.2 1L6.6 10.8z" />
    </svg>
  );
}

function MailIcon({ className }: IconProps) {
  return (
    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" aria-hidden="true">
      <rect x="3" y="5" width="18" height="14" rx="2" />
      <path d="M3 7l9 6 9-6" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function CheckIcon({ className }: IconProps) {
  return (
    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <path d="M5 13l4 4L19 7" />
    </svg>
  );
}

function TaxiIcon({ className }: IconProps) {
  return (
    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" aria-hidden="true">
      <path d="M4 17h16M6 17V9a2 2 0 012-2h8a2 2 0 012 2v8" />
      <circle cx="8" cy="19" r="1.4" fill="currentColor" />
      <circle cx="16" cy="19" r="1.4" fill="currentColor" />
    </svg>
  );
}

function ClockIcon({ className }: IconProps) {
  return (
    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" aria-hidden="true">
      <circle cx="12" cy="12" r="9" />
      <path d="M12 8v4l3 2" />
    </svg>
  );
}

function ShieldIcon({ className }: IconProps) {
  return (
    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <path d="M12 2l8 3v6c0 5-3.4 8.6-8 10-4.6-1.4-8-5-8-10V5l8-3z" />
      <path d="M9 12l2 2 4-4" />
    </svg>
  );
}

function SendIcon({ className }: IconProps) {
  return (
    <svg className={className} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
      <path d="M3 11l18-8-8 18-2.5-6.5L3 11z" />
    </svg>
  );
}