"use client";

import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { useRouter, useSearchParams } from "next/navigation";
import { useQuery } from "@tanstack/react-query";
import { useAuthStore } from "@/lib/auth-store";
import { apiClient } from "@/lib/api-client";
import { useBookingStore } from "@/lib/booking-store";
import { Station } from "@/types";
import {
  MapPin,
  ArrowRight,
  ArrowLeftRight,
  Plus,
  Minus,
  Search,
  Users,
  ChevronDown,
  Gift,
  Check,
  X,
  ChevronLeft,
  Clock,
  Zap,
} from "lucide-react";
import { useEffect, useRef, useState, useCallback } from "react";
import ModernDatePicker from "@/components/ModernDatePicker";

const searchSchema = z
  .object({
    tripType: z.enum(["ONE_WAY", "ROUND_TRIP"]),
    originStationId: z.string().min(1, "Please select your departure station"),
    destinationStationId: z
      .string()
      .min(1, "Please select your destination station"),
    departureDate: z.string().min(1, "Please select your departure date"),
    returnDate: z.string().optional(),
    adultCount: z.number().min(1).max(9),
    childCount: z.number().min(0).max(9),
    nationality: z.enum(["ETHIOPIAN", "DJIBOUTIAN", "OTHER"]),
    promoCode: z.string().optional(),
  })
  .refine(
    (d) => {
      if (d.tripType === "ROUND_TRIP" && !d.returnDate) {
        return false;
      }
      return true;
    },
    {
      message: "Please select return date",
      path: ["returnDate"],
    },
  )
  .refine(
    (d) => {
      if (d.tripType === "ROUND_TRIP" && d.returnDate && d.departureDate) {
        return d.returnDate >= d.departureDate;
      }
      return true;
    },
    {
      message: "Return date must be after departure date",
      path: ["returnDate"],
    },
  );

type SearchForm = z.infer<typeof searchSchema>;

const POPULAR_ROUTES = [
  { from: "Sebeta", to: "Nagad", duration: "12h", icon: "🌆" },
  { from: "Sebeta", to: "Diredawa", duration: "8h", icon: "🏔️" },
  { from: "Diredawa", to: "Nagad", duration: "4h", icon: "🌊" },
];

// ─── Station Modal ────────────────────────────────────────────────────────────
function StationModal({
  stations,
  title,
  excludeId,
  onSelect,
  onClose,
  recentIds,
}: {
  stations: Station[];
  title: string;
  excludeId?: string;
  onSelect: (s: Station) => void;
  onClose: () => void;
  recentIds: string[];
}) {
  const [query, setQuery] = useState("");
  const inputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    setTimeout(() => inputRef.current?.focus(), 100);
  }, []);

  const filtered = query.trim()
    ? stations.filter(
        (s) =>
          s.id !== excludeId &&
          (s.name.toLowerCase().includes(query.toLowerCase()) ||
            s.code?.toLowerCase().includes(query.toLowerCase())),
      )
    : stations.filter((s) => s.id !== excludeId);

  const recentStations = recentIds
    .map((id) => stations.find((s) => s.id === id))
    .filter(Boolean) as Station[];

  return (
    <div className="fixed inset-0 z-[100] bg-white dark:bg-gray-900 flex flex-col md:hidden animate-slide-up">
      {/* Header */}
      <div className="flex items-center gap-3 px-4 py-4 border-b border-gray-100 dark:border-gray-800 bg-white dark:bg-gray-900">
        <button
          type="button"
          onClick={onClose}
          className="w-10 h-10 flex items-center justify-center rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
        >
          <ChevronLeft className="w-5 h-5 text-gray-600 dark:text-gray-400" />
        </button>
        <h2 className="text-lg font-semibold text-gray-900 dark:text-white">
          {title}
        </h2>
      </div>

      {/* Search input */}
      <div className="px-4 py-3 bg-white dark:bg-gray-900">
        <div className="relative">
          <Search className="absolute left-3.5 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
          <input
            ref={inputRef}
            value={query}
            onChange={(e) => setQuery(e.target.value)}
            placeholder="Search stations..."
            className="w-full pl-10 pr-10 py-3 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-primary text-gray-900 dark:text-white placeholder-gray-400"
          />
          {query && (
            <button
              type="button"
              onClick={() => setQuery("")}
              className="absolute right-3 top-1/2 -translate-y-1/2"
            >
              <X className="w-4 h-4 text-gray-400" />
            </button>
          )}
        </div>
      </div>

      {/* Results */}
      <div className="flex-1 overflow-y-auto px-4 pb-6">
        {!query && recentStations.length > 0 && (
          <div className="mb-4">
            <p className="text-xs font-semibold text-gray-400 uppercase tracking-wide mb-2 mt-2">
              Recent
            </p>
            {recentStations.map((s) => (
              <button
                key={s.id}
                type="button"
                onClick={() => onSelect(s)}
                className="w-full flex items-center gap-3 py-3.5 px-3 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors text-left"
              >
                <div className="w-8 h-8 bg-primary/10 rounded-full flex items-center justify-center flex-shrink-0">
                  <Clock className="w-4 h-4 text-primary" />
                </div>
                <div>
                  <p className="font-medium text-gray-900 dark:text-white text-sm">
                    {s.name}
                  </p>
                  {s.code && <p className="text-xs text-gray-400">{s.code}</p>}
                </div>
              </button>
            ))}
          </div>
        )}

        <p className="text-xs font-semibold text-gray-400 uppercase tracking-wide mb-2 mt-2">
          {query ? "Results" : "All Stations"}
        </p>
        {filtered.length === 0 ? (
          <div className="text-center py-10 text-gray-400">
            <MapPin className="w-8 h-8 mx-auto mb-2 opacity-40" />
            <p className="text-sm">No stations found</p>
          </div>
        ) : (
          filtered.map((s) => (
            <button
              key={s.id}
              type="button"
              onClick={() => onSelect(s)}
              className="w-full flex items-center gap-3 py-3.5 px-3 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors text-left"
            >
              <div className="w-8 h-8 bg-gray-100 dark:bg-gray-800 rounded-full flex items-center justify-center flex-shrink-0">
                <MapPin className="w-4 h-4 text-primary" />
              </div>
              <div>
                <p className="font-medium text-gray-900 dark:text-white text-sm">
                  {s.name}
                </p>
                {s.code && (
                  <p className="text-xs text-gray-400">
                    {s.code} • {s.country}
                  </p>
                )}
              </div>
            </button>
          ))
        )}
      </div>
    </div>
  );
}

// ─── Passenger Modal (mobile bottom-sheet) ───────────────────────────────────
function PassengerModal({
  adultCount,
  childCount,
  nationality,
  onChangeAdult,
  onChangeChild,
  onChangeNationality,
  onClose,
}: {
  adultCount: number;
  childCount: number;
  nationality: string;
  onChangeAdult: (n: number) => void;
  onChangeChild: (n: number) => void;
  onChangeNationality: (v: string) => void;
  onClose: () => void;
}) {
  const rows = [
    {
      label: "Adults",
      sub: "≥ 5 years",
      val: adultCount,
      min: 1,
      max: 9,
      onChange: onChangeAdult,
    },
    {
      label: "Children",
      sub: "< 5 years • First child free",
      val: childCount,
      min: 0,
      max: 9,
      onChange: onChangeChild,
    },
  ];

  const natOptions = [
    { value: "ETHIOPIAN", label: "🇪🇹 Ethiopian" },
    { value: "DJIBOUTIAN", label: "🇩🇯 Djiboutian" },
    { value: "OTHER", label: "🌍 Other" },
  ];

  return (
    <>
      <div className="fixed inset-0 z-[99] bg-black/40" onClick={onClose} />
      <div
        className="fixed inset-x-0 bottom-0 sm:inset-auto sm:top-1/2 sm:left-1/2 sm:-translate-x-1/2 sm:-translate-y-1/2 z-[100] bg-white dark:bg-gray-900 rounded-t-2xl sm:rounded-2xl shadow-2xl w-full sm:w-96"
        style={{ animation: "pax-slide-up 0.25s cubic-bezier(0.32,0.72,0,1)" }}
      >
        <div className="flex justify-center pt-3 pb-1">
          <div className="w-10 h-1 rounded-full bg-gray-300 dark:bg-gray-600" />
        </div>
        <div className="flex items-center justify-between px-5 py-3 border-b border-gray-100 dark:border-gray-800">
          <div className="flex items-center gap-2">
            <Users className="w-4 h-4 text-primary" />
            <h2 className="text-base font-bold text-gray-900 dark:text-white">
              Passengers &amp; Nationality
            </h2>
          </div>
          <button
            type="button"
            onClick={onClose}
            className="w-9 h-9 flex items-center justify-center rounded-full hover:bg-gray-100 dark:hover:bg-gray-800"
          >
            <X className="w-5 h-5 text-gray-500" />
          </button>
        </div>
        <div className="px-5 py-4 space-y-5">
          {rows.map(({ label, sub, val, min, max, onChange }, i) => (
            <div key={label}>
              {i > 0 && (
                <div className="border-t border-gray-100 dark:border-gray-800 -mx-5 mb-5" />
              )}
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm font-semibold text-gray-900 dark:text-white">
                    {label}
                  </p>
                  <p className="text-xs text-gray-400 mt-0.5">{sub}</p>
                </div>
                <div className="flex items-center gap-4">
                  <button
                    type="button"
                    onClick={() => val > min && onChange(val - 1)}
                    disabled={val <= min}
                    className="w-10 h-10 rounded-full border-2 border-gray-200 dark:border-gray-700 flex items-center justify-center hover:border-primary hover:text-primary disabled:opacity-30"
                  >
                    <Minus className="w-4 h-4" />
                  </button>
                  <span className="w-6 text-center text-lg font-bold text-gray-900 dark:text-white tabular-nums">
                    {val}
                  </span>
                  <button
                    type="button"
                    onClick={() => val < max && onChange(val + 1)}
                    disabled={val >= max}
                    className="w-10 h-10 rounded-full border-2 border-gray-200 dark:border-gray-700 flex items-center justify-center hover:border-primary hover:text-primary disabled:opacity-30"
                  >
                    <Plus className="w-4 h-4" />
                  </button>
                </div>
              </div>
            </div>
          ))}
          <div className="border-t border-gray-100 dark:border-gray-800 -mx-5 pt-5 px-5">
            <p className="text-sm font-semibold text-gray-900 dark:text-white mb-3">
              Nationality
            </p>
            <div className="grid grid-cols-3 gap-2">
              {natOptions.map((opt) => (
                <button
                  key={opt.value}
                  type="button"
                  onClick={() => onChangeNationality(opt.value)}
                  className={`py-2.5 px-2 rounded-xl border-2 text-xs font-semibold transition-all ${
                    nationality === opt.value
                      ? "border-primary bg-primary/5 text-primary"
                      : "border-gray-200 dark:border-gray-700 text-gray-600 dark:text-gray-400 hover:border-gray-300"
                  }`}
                >
                  {opt.label}
                </button>
              ))}
            </div>
          </div>
        </div>
        <div className="px-5 pb-8 pt-2">
          <button
            type="button"
            onClick={onClose}
            className="w-full py-3.5 bg-[rgb(20,113,76)] text-white font-bold text-sm rounded-xl"
          >
            Done — {adultCount + childCount} Passenger
            {adultCount + childCount !== 1 ? "s" : ""}
          </button>
        </div>
        <style>{`@keyframes pax-slide-up{from{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}`}</style>
      </div>
    </>
  );
}

// ─── Station Autocomplete (Desktop dropdown) ──────────────────────────────────
function StationDropdown({
  stations,
  value,
  excludeId,
  placeholder,
  onSelect,
  error,
  recentIds,
  onOpen,
}: {
  stations: Station[];
  value: string;
  excludeId?: string;
  placeholder: string;
  onSelect: (s: Station) => void;
  error?: string;
  recentIds: string[];
  onOpen?: () => void;
}) {
  const [query, setQuery] = useState("");
  const [open, setOpen] = useState(false);
  const ref = useRef<HTMLDivElement>(null);
  const inputRef = useRef<HTMLInputElement>(null);
  const selectedStation = stations.find((s) => s.id === value);

  useEffect(() => {
    if (selectedStation && !open) setQuery("");
  }, [selectedStation, open]);

  useEffect(() => {
    const handler = (e: MouseEvent) => {
      if (ref.current && !ref.current.contains(e.target as Node))
        setOpen(false);
    };
    document.addEventListener("mousedown", handler);
    return () => document.removeEventListener("mousedown", handler);
  }, []);

  const filtered = query.trim()
    ? stations.filter(
        (s) =>
          s.id !== excludeId &&
          (s.name.toLowerCase().includes(query.toLowerCase()) ||
            s.code?.toLowerCase().includes(query.toLowerCase())),
      )
    : stations.filter((s) => s.id !== excludeId).slice(0, 8);

  const displayValue = open ? query : (selectedStation?.name ?? "");

  return (
    <div ref={ref} className="relative">
      <div
        className={`relative flex items-center border-2 rounded-xl transition-all duration-200 bg-white dark:bg-gray-800 ${
          error
            ? "border-red-400"
            : open
              ? "border-primary ring-2 ring-primary/20"
              : "border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600"
        }`}
      >
        <MapPin className="absolute left-3.5 w-4 h-4 text-primary flex-shrink-0" />
        <input
          ref={inputRef}
          value={displayValue}
          onChange={(e) => {
            setQuery(e.target.value);
            setOpen(true);
          }}
          onFocus={() => {
            setQuery("");
            setOpen(true);
            onOpen?.();
          }}
          placeholder={placeholder}
          className="w-full pl-10 pr-8 py-3.5 bg-transparent rounded-xl focus:outline-none text-sm text-gray-900 dark:text-white placeholder-gray-400"
        />
        {value && (
          <button
            type="button"
            onClick={() => {
              onSelect({ id: "", name: "", code: "", country: "" });
              setQuery("");
            }}
            className="absolute right-3 p-0.5"
          >
            <X className="w-3.5 h-3.5 text-gray-400 hover:text-gray-600" />
          </button>
        )}
      </div>

      {open && (
        <div className="absolute top-full left-0 right-0 mt-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl shadow-xl z-[200] max-h-56 overflow-y-auto overflow-x-hidden scrollbar-hide">
          {!query && recentIds.length > 0 && (
            <div className="px-3 pt-2 pb-1">
              <p className="text-[10px] font-semibold text-gray-400 uppercase tracking-wide mb-1">
                Recent
              </p>
              {recentIds
                .map((id) => stations.find((s) => s.id === id))
                .filter(Boolean)
                .map((s) => (
                  <button
                    key={s!.id}
                    type="button"
                    onMouseDown={() => {
                      onSelect(s!);
                      setOpen(false);
                      setQuery("");
                    }}
                    className="w-full flex items-center gap-2 px-2 py-2 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 text-left"
                  >
                    <Clock className="w-3.5 h-3.5 text-primary flex-shrink-0" />
                    <span className="text-sm text-gray-800 dark:text-gray-200">
                      {s!.name}
                    </span>
                  </button>
                ))}
              <div className="border-t border-gray-100 dark:border-gray-700 mt-1 mb-1" />
            </div>
          )}
          {filtered.length === 0 ? (
            <p className="text-sm text-gray-400 text-center py-4">
              No stations found
            </p>
          ) : (
            filtered.map((s) => (
              <button
                key={s.id}
                type="button"
                onMouseDown={() => {
                  onSelect(s);
                  setOpen(false);
                  setQuery("");
                }}
                className="w-full flex items-center gap-2 px-3 py-2.5 hover:bg-gray-50 dark:hover:bg-gray-700 text-left transition-colors"
              >
                <MapPin className="w-3.5 h-3.5 text-primary flex-shrink-0" />
                <div>
                  <span className="text-sm font-medium text-gray-900 dark:text-white">
                    {s.name}
                  </span>
                  {s.code && (
                    <span className="text-xs text-gray-400 ml-1.5">
                      {s.code}
                    </span>
                  )}
                </div>
              </button>
            ))
          )}
        </div>
      )}
    </div>
  );
}

// ─── Main Page ────────────────────────────────────────────────────────────────
export default function SearchPage() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const setSearchCriteria = useBookingStore((s) => s.setSearchCriteria);
  const { user, isAuthenticated } = useAuthStore();

  const [passengerModalOpen, setPassengerModalOpen] = useState(false);
  const [promoVisible, setPromoVisible] = useState(false);
  const [promoCode, setPromoCode] = useState("");
  const [promoValidation, setPromoValidation] = useState<{
    valid: boolean;
    message: string;
  } | null>(null);
  const [promoLoading, setPromoLoading] = useState(false);
  const [swapping, setSwapping] = useState(false);
  const [stationModal, setStationModal] = useState<
    "origin" | "destination" | null
  >(null);
  const [hasInteracted, setHasInteracted] = useState(false);
  const [recentStationIds, setRecentStationIds] = useState<string[]>(() => {
    try {
      return JSON.parse(localStorage.getItem("edr_recent_stations") || "[]");
    } catch {
      return [];
    }
  });
  const passengerRef = useRef<HTMLDivElement>(null);
  const widgetRef = useRef<HTMLDivElement>(null);

  const scrollWidgetIntoView = () => {
    const el = widgetRef.current;
    if (!el) return;
    const headerHeight = 64;
    const marginTop = 24;
    const top =
      el.getBoundingClientRect().top +
      window.scrollY -
      headerHeight -
      marginTop;
    window.scrollTo({ top, behavior: "smooth" });
  };

  const {
    data: stations = [],
    isLoading,
    error,
  } = useQuery<Station[]>({
    queryKey: ["stations"],
    queryFn: async () => (await apiClient.get("/stations")) as Station[],
  });

  const {
    handleSubmit,
    watch,
    setValue,
    trigger,
    clearErrors,
    formState: { errors },
  } = useForm<SearchForm>({
    resolver: zodResolver(searchSchema as any),
    mode: "onSubmit",
    reValidateMode: "onSubmit",
    defaultValues: {
      tripType: "ONE_WAY",
      adultCount: 1,
      childCount: 0,
      nationality: "ETHIOPIAN",
      departureDate: new Date().toISOString().split("T")[0],
      promoCode: "",
    },
  });

  useEffect(() => {
    if (isAuthenticated && user?.nationality) {
      const n = user.nationality.toUpperCase().trim();
      setValue(
        "nationality",
        n.includes("DJIBOUTIAN")
          ? "DJIBOUTIAN"
          : n.includes("ETHIOPIAN")
            ? "ETHIOPIAN"
            : "OTHER",
      );
    }
  }, [isAuthenticated, user?.nationality, setValue]);

  useEffect(() => {
    const o = searchParams.get("origin");
    const d = searchParams.get("destination");
    const date = searchParams.get("date");
    const adults = searchParams.get("adults");
    const children = searchParams.get("children");
    const nat = searchParams.get("nationality");
    if (o) setValue("originStationId", o);
    if (d) setValue("destinationStationId", d);
    if (date) setValue("departureDate", date);
    if (adults) setValue("adultCount", parseInt(adults));
    if (children) setValue("childCount", parseInt(children));
    if (nat)
      setValue("nationality", nat as "ETHIOPIAN" | "DJIBOUTIAN" | "OTHER");
  }, [searchParams, setValue]);

  useEffect(() => {
    const handler = (e: MouseEvent) => {
      if (
        passengerRef.current &&
        !passengerRef.current.contains(e.target as Node)
      ) {
        setPassengerModalOpen(false);
      }
    };
    document.addEventListener("mousedown", handler);
    return () => document.removeEventListener("mousedown", handler);
  }, []);

  const originId = watch("originStationId");
  const destId = watch("destinationStationId");
  const adultCount = watch("adultCount");
  const childCount = watch("childCount");
  const departureDate = watch("departureDate");
  const returnDate = watch("returnDate");
  const tripType = watch("tripType");
  const totalPassengers = (adultCount || 1) + (childCount || 0);

  const saveRecent = useCallback((id: string) => {
    setRecentStationIds((prev) => {
      const next = [id, ...prev.filter((x) => x !== id)].slice(0, 5);
      localStorage.setItem("edr_recent_stations", JSON.stringify(next));
      return next;
    });
  }, []);

  const handleSwap = () => {
    if (!originId || !destId) return;
    setSwapping(true);
    setTimeout(() => {
      setValue("originStationId", destId);
      setValue("destinationStationId", originId);
      setSwapping(false);
    }, 300);
  };

  const handleValidatePromo = async () => {
    if (!promoCode.trim()) return setPromoValidation(null);
    setPromoLoading(true);
    try {
      const res = (await apiClient.post("/promos/validate", {
        code: promoCode,
      })) as any;
      const valid = res.applicable || res.valid;
      setPromoValidation({
        valid,
        message:
          res.message || (valid ? "Promo applied!" : "Invalid promo code"),
      });
      if (valid) setValue("promoCode", promoCode);
      else setPromoCode("");
    } catch (err: any) {
      setPromoValidation({
        valid: false,
        message:
          err?.response?.data?.message || "Promo code is invalid or expired",
      });
      setPromoCode("");
    } finally {
      setPromoLoading(false);
    }
  };

  const onSubmit = (data: SearchForm) => {
    setHasInteracted(true);
    setSearchCriteria(data);
    if (data.originStationId) saveRecent(data.originStationId);
    if (data.destinationStationId) saveRecent(data.destinationStationId);
    const params = new URLSearchParams({
      tripType: data.tripType,
      origin: data.originStationId,
      destination: data.destinationStationId,
      date: data.departureDate,
      adults: data.adultCount.toString(),
      children: data.childCount.toString(),
      nationality: data.nationality,
      ...(data.tripType === "ROUND_TRIP" &&
        data.returnDate && { returnDate: data.returnDate }),
      ...(data.promoCode && { promoCode: data.promoCode }),
    });
    router.push(`/booking/results?${params}`);
  };

  const getStationById = (id: string) => stations.find((s) => s.id === id);
  const originStation = getStationById(originId);
  const destStation = getStationById(destId);

  const handlePopularRoute = (fromName: string, toName: string) => {
    const origin = stations.find((s) =>
      s.name.toLowerCase().includes(fromName.toLowerCase()),
    );
    const dest = stations.find((s) =>
      s.name.toLowerCase().includes(toName.toLowerCase()),
    );
    if (origin && dest) {
      setValue("originStationId", origin.id);
      setValue("destinationStationId", dest.id);
      window.scrollTo({ top: 0, behavior: "smooth" });
    }
  };

  return (
    <div className="bg-gray-50 dark:bg-gray-950">
      {/* Passenger modal (mobile) */}
      {passengerModalOpen && (
        <PassengerModal
          adultCount={adultCount || 1}
          childCount={childCount || 0}
          nationality={watch("nationality")}
          onChangeAdult={(n) => setValue("adultCount", n)}
          onChangeChild={(n) => setValue("childCount", n)}
          onChangeNationality={(v) => setValue("nationality", v as any)}
          onClose={() => setPassengerModalOpen(false)}
        />
      )}

      {/* Station modals (mobile) */}
      {stationModal === "origin" && (
        <StationModal
          stations={stations}
          title="From — Departure"
          excludeId={destId}
          recentIds={recentStationIds}
          onSelect={(s) => {
            if (s.id) {
              setValue("originStationId", s.id);
              saveRecent(s.id);
              clearErrors("originStationId");
              clearErrors("destinationStationId");
            }
            setStationModal(null);
          }}
          onClose={() => setStationModal(null)}
        />
      )}
      {stationModal === "destination" && (
        <StationModal
          stations={stations}
          title="To — Destination"
          excludeId={originId}
          recentIds={recentStationIds}
          onSelect={(s) => {
            if (s.id) {
              setValue("destinationStationId", s.id);
              saveRecent(s.id);
              clearErrors("destinationStationId");
            }
            setStationModal(null);
          }}
          onClose={() => setStationModal(null)}
        />
      )}

      {/* ── 90vh hero with banner image ── */}
      <section
        className="relative"
        style={{ height: "90vh", minHeight: "560px" }}
      >
        {/* Background image with zoom - fully isolated */}
        <div className="absolute inset-0 overflow-hidden">
          <div
            className="w-full h-full bg-cover bg-center animate-bg-zoom"
            style={{
              backgroundImage: "url(/edr-banner.jpg)",
              position: "absolute",
              top: 0,
              left: 0,
              right: 0,
              bottom: 0,
            }}
          />
        </div>
        {/* Gradient overlay */}
        <div className="absolute inset-0 bg-gradient-to-br from-black/70 via-black/40 to-transparent" />
        <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent" />

        {/* Hero headline — top area */}
        <div className="relative z-10 pt-16 md:pt-20 px-6 md:px-12 max-w-6xl mx-auto">
          <h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-white leading-tight drop-shadow-lg max-w-2xl animate-fade-in-up">
            Where are you
            <br className="hidden sm:block" /> headed today?
          </h1>
          <p className="text-white/90 text-sm md:text-base mt-3 drop-shadow-lg animate-fade-in-up-delay">
            Book your train journey across East Africa
          </p>
        </div>

        {/* ── Widget — absolutely positioned at bottom with margin ── */}
        <div
          className="absolute bottom-8 left-0 right-0 z-[50] px-4 md:px-6"
          ref={widgetRef}
        >
          <div className="max-w-6xl mx-auto">
            <form onSubmit={handleSubmit(onSubmit)}>
              <div className="bg-white dark:bg-gray-900 rounded-2xl shadow-2xl border border-white/20 overflow-visible">
                {error && (
                  <div className="flex items-center gap-2 px-5 py-3 bg-red-50 text-red-600 text-sm border-b border-red-100 rounded-t-2xl">
                    <span>⚠️</span>
                    <span>
                      Unable to load stations. Please check your connection.
                    </span>
                  </div>
                )}

                <div className="p-4 md:p-5">
                  {/* Trip Type Tabs */}
                  <div className="mb-4">
                    <div className="inline-flex rounded-xl bg-gray-100 dark:bg-gray-800 p-1 w-full md:w-auto">
                      <button
                        type="button"
                        onClick={() => setValue("tripType", "ONE_WAY")}
                        className={`flex-1 md:flex-none px-6 py-2.5 rounded-lg text-sm font-semibold transition-all ${
                          tripType === "ONE_WAY"
                            ? "bg-white dark:bg-gray-900 text-primary shadow-sm"
                            : "text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200"
                        }`}
                      >
                        One Way
                      </button>
                      <button
                        type="button"
                        onClick={() => setValue("tripType", "ROUND_TRIP")}
                        className={`flex-1 md:flex-none px-6 py-2.5 rounded-lg text-sm font-semibold transition-all ${
                          tripType === "ROUND_TRIP"
                            ? "bg-white dark:bg-gray-900 text-primary shadow-sm"
                            : "text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200"
                        }`}
                      >
                        Round Trip
                      </button>
                    </div>
                  </div>

                  {/* Mobile: stacked */}
                  <div className="flex flex-col gap-3 md:hidden">
                    <div className="space-y-1.5">
                      <label className="text-xs font-semibold text-gray-500 uppercase tracking-wide">
                        From
                      </label>
                      <button
                        type="button"
                        onClick={() => {
                          setHasInteracted(true);
                          window.scrollTo({
                            top: 0,
                            behavior: "instant" as ScrollBehavior,
                          });
                          setStationModal("origin");
                        }}
                        className="w-full"
                      >
                        <div
                          className={`flex items-center gap-2.5 px-3.5 py-3 border-2 rounded-xl transition-all ${
                            hasInteracted && errors.originStationId
                              ? "border-red-400"
                              : originId
                                ? "border-primary bg-primary/5"
                                : "border-gray-200"
                          }`}
                        >
                          <MapPin className="w-4 h-4 text-primary flex-shrink-0" />
                          <span
                            className={`text-sm ${originStation ? "font-semibold text-gray-900" : "text-gray-400"}`}
                          >
                            {originStation?.name ?? "Select departure"}
                          </span>
                        </div>
                      </button>
                    </div>
                    <div className="space-y-1.5">
                      <div className="flex items-center justify-between">
                        <label className="text-xs font-semibold text-gray-500 uppercase tracking-wide">
                          To
                        </label>
                        <button
                          type="button"
                          onClick={handleSwap}
                          disabled={!originId || !destId}
                          className="flex items-center gap-1 text-xs text-primary font-medium disabled:opacity-30"
                        >
                          <ArrowLeftRight
                            className={`w-3.5 h-3.5 transition-transform duration-300 ${swapping ? "rotate-180" : ""}`}
                          />
                          Swap
                        </button>
                      </div>
                      <button
                        type="button"
                        onClick={() => {
                          setHasInteracted(true);
                          window.scrollTo({
                            top: 0,
                            behavior: "instant" as ScrollBehavior,
                          });
                          setStationModal("destination");
                        }}
                        className="w-full"
                      >
                        <div
                          className={`flex items-center gap-2.5 px-3.5 py-3 border-2 rounded-xl transition-all ${
                            hasInteracted && errors.destinationStationId
                              ? "border-red-400"
                              : destId
                                ? "border-primary bg-primary/5"
                                : "border-gray-200"
                          }`}
                        >
                          <MapPin className="w-4 h-4 text-primary flex-shrink-0" />
                          <span
                            className={`text-sm ${destStation ? "font-semibold text-gray-900" : "text-gray-400"}`}
                          >
                            {destStation?.name ?? "Select destination"}
                          </span>
                        </div>
                      </button>
                    </div>
                    <div className="space-y-1.5">
                      <label className="text-xs font-semibold text-gray-500 uppercase tracking-wide">
                        Date
                      </label>
                      <div className="relative z-30">
                        <ModernDatePicker
                          value={
                            departureDate
                              ? new Date(departureDate + "T00:00:00")
                              : undefined
                          }
                          onChange={(date) => {
                            setValue(
                              "departureDate",
                              `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`,
                            );
                            trigger("departureDate");
                          }}
                          minDate={new Date()}
                          placeholder="Select date"
                        />
                      </div>
                    </div>
                    {tripType === "ROUND_TRIP" && (
                      <div className="space-y-1.5">
                        <label className="text-xs font-semibold text-gray-500 uppercase tracking-wide">
                          Return Date
                        </label>
                        <div className="relative z-20">
                          <ModernDatePicker
                            value={
                              returnDate
                                ? new Date(returnDate + "T00:00:00")
                                : undefined
                            }
                            onChange={(date) => {
                              setValue(
                                "returnDate",
                                `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`,
                              );
                              trigger("returnDate");
                            }}
                            minDate={
                              departureDate
                                ? new Date(departureDate + "T00:00:00")
                                : new Date()
                            }
                            placeholder="Select return date"
                          />
                        </div>
                        {errors.returnDate && (
                          <p className="text-xs text-red-500">
                            {errors.returnDate.message}
                          </p>
                        )}
                      </div>
                    )}
                    {/* Pax + Nationality combined trigger */}
                    <button
                      type="button"
                      onClick={() => setPassengerModalOpen(true)}
                      className="w-full flex items-center justify-between px-3.5 py-3 border-2 border-gray-200 rounded-xl bg-white"
                    >
                      <span className="flex items-center gap-2 text-sm font-medium text-gray-900">
                        <Users className="w-4 h-4 text-primary" />
                        {totalPassengers} Pax ·{" "}
                        {watch("nationality") === "ETHIOPIAN"
                          ? "🇪🇹"
                          : watch("nationality") === "DJIBOUTIAN"
                            ? "🇩🇯"
                            : "🌍"}
                      </span>
                      <ChevronDown className="w-4 h-4 text-primary" />
                    </button>
                    <button
                      type="submit"
                      disabled={isLoading}
                      className="w-full flex items-center justify-center gap-2 py-3.5 bg-[rgb(20,113,76)] hover:bg-[rgb(16,89,60)] text-white font-bold text-sm rounded-xl transition-all shadow-lg disabled:opacity-50"
                    >
                      <Search className="w-5 h-5" />
                      Search
                    </button>
                  </div>

                  {/* Desktop: dynamic layout based on trip type */}
                  <div className={`hidden md:block`}>
                    {tripType === "ONE_WAY" ? (
                      // ONE WAY: Single row layout
                      <div className="flex items-end gap-2">
                        {/* From */}
                        <div className="flex-1 min-w-0 space-y-1">
                          <label className="text-xs font-semibold text-gray-500 uppercase tracking-wide">
                            From
                          </label>
                          <StationDropdown
                            stations={stations}
                            value={originId}
                            excludeId={destId}
                            placeholder="Departure station"
                            recentIds={recentStationIds}
                            onSelect={(s) => {
                              setHasInteracted(true);
                              setValue("originStationId", s.id);
                              if (s.id) saveRecent(s.id);
                              clearErrors("originStationId");
                              clearErrors("destinationStationId");
                            }}
                            error={hasInteracted ? errors.originStationId?.message : undefined}
                            onOpen={scrollWidgetIntoView}
                          />
                          {hasInteracted && errors.originStationId && (
                            <p className="text-xs text-red-500">
                              {errors.originStationId.message}
                            </p>
                          )}
                        </div>
                        {/* Swap */}
                        <button
                          type="button"
                          onClick={handleSwap}
                          disabled={!originId || !destId}
                          className={`flex-shrink-0 mb-0.5 w-9 h-9 bg-gray-50 border-2 border-gray-200 rounded-full flex items-center justify-center hover:border-primary hover:bg-primary/5 transition-all disabled:opacity-30 ${swapping ? "rotate-180" : ""}`}
                        >
                          <ArrowLeftRight className="w-4 h-4 text-gray-500" />
                        </button>
                        {/* To */}
                        <div className="flex-1 min-w-0 space-y-1">
                          <label className="text-xs font-semibold text-gray-500 uppercase tracking-wide">
                            To
                          </label>
                          <StationDropdown
                            stations={stations}
                            value={destId}
                            excludeId={originId}
                            placeholder="Destination station"
                            recentIds={recentStationIds}
                            onSelect={(s) => {
                              setHasInteracted(true);
                              setValue("destinationStationId", s.id);
                              if (s.id) saveRecent(s.id);
                              clearErrors("destinationStationId");
                            }}
                            error={hasInteracted ? errors.destinationStationId?.message : undefined}
                            onOpen={scrollWidgetIntoView}
                          />
                          {hasInteracted && errors.destinationStationId && (
                            <p className="text-xs text-red-500">
                              {errors.destinationStationId.message}
                            </p>
                          )}
                        </div>
                        {/* Divider */}
                        <div className="w-px h-10 bg-gray-200 mb-0.5 flex-shrink-0" />
                        {/* Date */}
                        <div className="w-44 flex-shrink-0 space-y-1">
                          <label className="text-xs font-semibold text-gray-500 uppercase tracking-wide">
                            Date
                          </label>
                          <div className="relative z-30">
                            <ModernDatePicker
                              value={
                                departureDate
                                  ? new Date(departureDate + "T00:00:00")
                                  : undefined
                              }
                              onChange={(date) => {
                                setValue(
                                  "departureDate",
                                  `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`,
                                );
                                trigger("departureDate");
                              }}
                              minDate={new Date()}
                              placeholder="Departure"
                            />
                          </div>
                          {errors.departureDate && (
                            <p className="text-xs text-red-500">
                              {errors.departureDate.message}
                            </p>
                          )}
                        </div>
                        {/* Divider */}
                        <div className="w-px h-10 bg-gray-200 mb-0.5 flex-shrink-0" />
                        {/* Pax + Nationality */}
                        <div className="w-44 flex-shrink-0 space-y-1">
                          <label className="text-xs font-semibold text-gray-500 uppercase tracking-wide">
                            Passengers
                          </label>
                          <button
                            type="button"
                            onClick={() => setPassengerModalOpen(true)}
                            className="w-full flex items-center justify-between px-3 py-3.5 border-2 border-gray-200 rounded-xl bg-white hover:border-gray-300 transition-all"
                          >
                            <span className="flex items-center gap-1.5 text-sm font-medium text-gray-900 truncate">
                              <Users className="w-4 h-4 text-primary flex-shrink-0" />
                              {totalPassengers} Pax ·{" "}
                              {watch("nationality") === "ETHIOPIAN"
                                ? "🇪🇹"
                                : watch("nationality") === "DJIBOUTIAN"
                                  ? "🇩🇯"
                                  : "🌍"}
                            </span>
                            <ChevronDown className="w-4 h-4 text-primary flex-shrink-0" />
                          </button>
                        </div>
                        {/* Search */}
                        <button
                          type="submit"
                          disabled={isLoading}
                          className="flex-shrink-0 flex items-center justify-center gap-2 px-5 py-3.5 bg-[rgb(20,113,76)] hover:bg-[rgb(16,89,60)] text-white font-bold text-sm rounded-xl transition-all shadow-lg hover:shadow-xl disabled:opacity-50"
                        >
                          <Search className="w-5 h-5" />
                          Search
                        </button>
                      </div>
                    ) : (
                      // ROUND TRIP: Two row layout
                      <div className="space-y-3">
                        {/* Row 1: From, Swap, To, Departure Date, Return Date */}
                        <div className="flex items-end gap-2">
                          {/* From */}
                          <div className="flex-1 min-w-0 space-y-1">
                            <label className="text-xs font-semibold text-gray-500 uppercase tracking-wide">
                              From
                            </label>
                            <StationDropdown
                              stations={stations}
                              value={originId}
                              excludeId={destId}
                              placeholder="Departure station"
                              recentIds={recentStationIds}
                              onSelect={(s) => {
                                setHasInteracted(true);
                                setValue("originStationId", s.id);
                                if (s.id) saveRecent(s.id);
                                clearErrors("originStationId");
                                clearErrors("destinationStationId");
                              }}
                              error={hasInteracted ? errors.originStationId?.message : undefined}
                              onOpen={scrollWidgetIntoView}
                            />
                            {hasInteracted && errors.originStationId && (
                              <p className="text-xs text-red-500">
                                {errors.originStationId.message}
                              </p>
                            )}
                          </div>
                          {/* Swap */}
                          <button
                            type="button"
                            onClick={handleSwap}
                            disabled={!originId || !destId}
                            className={`flex-shrink-0 mb-0.5 w-9 h-9 bg-gray-50 border-2 border-gray-200 rounded-full flex items-center justify-center hover:border-primary hover:bg-primary/5 transition-all disabled:opacity-30 ${swapping ? "rotate-180" : ""}`}
                          >
                            <ArrowLeftRight className="w-4 h-4 text-gray-500" />
                          </button>
                          {/* To */}
                          <div className="flex-1 min-w-0 space-y-1">
                            <label className="text-xs font-semibold text-gray-500 uppercase tracking-wide">
                              To
                            </label>
                            <StationDropdown
                              stations={stations}
                              value={destId}
                              excludeId={originId}
                              placeholder="Destination station"
                              recentIds={recentStationIds}
                              onSelect={(s) => {
                                setHasInteracted(true);
                                setValue("destinationStationId", s.id);
                                if (s.id) saveRecent(s.id);
                                clearErrors("destinationStationId");
                              }}
                              error={hasInteracted ? errors.destinationStationId?.message : undefined}
                              onOpen={scrollWidgetIntoView}
                            />
                            {hasInteracted && errors.destinationStationId && (
                              <p className="text-xs text-red-500">
                                {errors.destinationStationId.message}
                              </p>
                            )}
                          </div>
                          {/* Divider */}
                          <div className="w-px h-10 bg-gray-200 mb-0.5 flex-shrink-0" />
                          {/* Departure Date */}
                          <div className="w-44 flex-shrink-0 space-y-1">
                            <label className="text-xs font-semibold text-gray-500 uppercase tracking-wide">
                              Departure
                            </label>
                            <div className="relative z-30">
                              <ModernDatePicker
                                value={
                                  departureDate
                                    ? new Date(departureDate + "T00:00:00")
                                    : undefined
                                }
                                onChange={(date) => {
                                  setValue(
                                    "departureDate",
                                    `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`,
                                  );
                                  trigger("departureDate");
                                  trigger("returnDate");
                                }}
                                minDate={new Date()}
                                placeholder="Select date"
                              />
                            </div>
                            {errors.departureDate && (
                              <p className="text-xs text-red-500">
                                {errors.departureDate.message}
                              </p>
                            )}
                          </div>
                          {/* Return Date */}
                          <div className="w-44 flex-shrink-0 space-y-1">
                            <label className="text-xs font-semibold text-gray-500 uppercase tracking-wide">
                              Return
                            </label>
                            <div className="relative z-20">
                              <ModernDatePicker
                                value={
                                  returnDate
                                    ? new Date(returnDate + "T00:00:00")
                                    : undefined
                                }
                                onChange={(date) => {
                                  setValue(
                                    "returnDate",
                                    `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`,
                                  );
                                  trigger("returnDate");
                                }}
                                minDate={
                                  departureDate
                                    ? new Date(departureDate + "T00:00:00")
                                    : new Date()
                                }
                                placeholder="Select date"
                              />
                            </div>
                            {errors.returnDate && (
                              <p className="text-xs text-red-500">
                                {errors.returnDate.message}
                              </p>
                            )}
                          </div>
                        </div>

                        {/* Row 2: Promo, Passengers, Search */}
                        <div className="flex items-end gap-2">
                          {/* Promo Code */}
                          <div className="flex-1 min-w-0 space-y-1">
                            <label className="text-xs font-semibold text-gray-500 uppercase tracking-wide">
                              {!promoVisible
                                ? "Promo Code (Optional)"
                                : "Promo Code"}
                            </label>
                            {!promoVisible ? (
                              <button
                                type="button"
                                onClick={() => setPromoVisible(true)}
                                className="w-full flex items-center gap-1.5 px-3.5 py-3.5 border-2 border-gray-200 dark:border-gray-700 rounded-xl hover:border-primary transition-all bg-white dark:bg-gray-800 text-left"
                              >
                                <Gift className="w-4 h-4 text-primary" />
                                <span className="text-sm text-gray-400">
                                  Click to add promo code
                                </span>
                              </button>
                            ) : (
                              <div className="space-y-1">
                                <div className="flex gap-2">
                                  <div className="flex-1 relative">
                                    <Gift className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-primary" />
                                    <input
                                      type="text"
                                      value={promoCode}
                                      onChange={(e) => {
                                        setPromoCode(
                                          e.target.value.toUpperCase(),
                                        );
                                        if (promoValidation)
                                          setPromoValidation(null);
                                      }}
                                      placeholder="Enter promo code"
                                      onKeyDown={(e) =>
                                        e.key === "Enter" &&
                                        (e.preventDefault(),
                                        handleValidatePromo())
                                      }
                                      className="w-full pl-9 pr-3 py-3.5 border-2 border-gray-200 dark:border-gray-700 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary/30 text-sm bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-400"
                                      autoFocus
                                    />
                                  </div>
                                  <button
                                    type="button"
                                    onClick={handleValidatePromo}
                                    disabled={!promoCode || promoLoading}
                                    className="px-4 py-3.5 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-200 rounded-xl hover:bg-gray-200 dark:hover:bg-gray-600 disabled:opacity-40 text-sm font-semibold transition-colors"
                                  >
                                    {promoLoading ? "..." : "Apply"}
                                  </button>
                                  <button
                                    type="button"
                                    onClick={() => {
                                      setPromoVisible(false);
                                      setPromoCode("");
                                      setPromoValidation(null);
                                    }}
                                    className="p-3.5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 rounded-xl hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
                                  >
                                    <X className="w-4 h-4" />
                                  </button>
                                </div>
                                {promoValidation && (
                                  <div
                                    className={`flex items-center gap-1.5 text-xs ${promoValidation.valid ? "text-green-600 dark:text-green-400" : "text-red-500 dark:text-red-400"}`}
                                  >
                                    {promoValidation.valid && (
                                      <Check className="w-3.5 h-3.5" />
                                    )}
                                    {promoValidation.message}
                                  </div>
                                )}
                              </div>
                            )}
                          </div>
                          {/* Divider */}
                          <div className="w-px h-10 bg-gray-200 dark:bg-gray-700 flex-shrink-0" />
                          {/* Pax + Nationality */}
                          <div className="w-44 flex-shrink-0 space-y-1">
                            <label className="text-xs font-semibold text-gray-500 uppercase tracking-wide">
                              Passengers
                            </label>
                            <button
                              type="button"
                              onClick={() => setPassengerModalOpen(true)}
                              className="w-full flex items-center justify-between px-3 py-3.5 border-2 border-gray-200 dark:border-gray-700 rounded-xl bg-white dark:bg-gray-800 hover:border-gray-300 dark:hover:border-gray-600 transition-all"
                            >
                              <span className="flex items-center gap-1.5 text-sm font-medium text-gray-900 dark:text-white truncate">
                                <Users className="w-4 h-4 text-primary flex-shrink-0" />
                                {totalPassengers} Pax ·{" "}
                                {watch("nationality") === "ETHIOPIAN"
                                  ? "🇪🇹"
                                  : watch("nationality") === "DJIBOUTIAN"
                                    ? "🇩🇯"
                                    : "🌍"}
                              </span>
                              <ChevronDown className="w-4 h-4 text-primary flex-shrink-0" />
                            </button>
                          </div>
                          {/* Search Button */}
                          <div className="flex-shrink-0 space-y-1">
                            <label className="text-xs font-semibold text-gray-500 uppercase tracking-wide opacity-0 pointer-events-none">
                              Search
                            </label>
                            <button
                              type="submit"
                              disabled={isLoading}
                              className="flex items-center justify-center gap-2 px-6 py-3.5 bg-[rgb(20,113,76)] hover:bg-[rgb(16,89,60)] text-white font-bold text-sm rounded-xl transition-all shadow-lg hover:shadow-xl disabled:opacity-50"
                            >
                              <Search className="w-5 h-5" />
                              Search
                            </button>
                          </div>
                        </div>
                      </div>
                    )}
                  </div>

                  {/* Promo - Only visible in ONE WAY mode on desktop */}
                  {tripType === "ONE_WAY" && (
                    <div className="mt-3">
                      {!promoVisible ? (
                        <button
                          type="button"
                          onClick={() => setPromoVisible(true)}
                          className="flex items-center gap-1.5 text-xs text-primary font-medium hover:underline"
                        >
                          <Gift className="w-3.5 h-3.5" />
                          Apply Promo Code
                        </button>
                      ) : (
                        <div className="flex flex-col gap-1.5">
                          <div className="flex gap-2">
                            <div className="flex-1 relative">
                              <Gift className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-primary" />
                              <input
                                type="text"
                                value={promoCode}
                                onChange={(e) => {
                                  setPromoCode(e.target.value.toUpperCase());
                                  if (promoValidation) setPromoValidation(null);
                                }}
                                placeholder="Enter promo code"
                                onKeyDown={(e) =>
                                  e.key === "Enter" &&
                                  (e.preventDefault(), handleValidatePromo())
                                }
                                className="w-full pl-9 pr-3 py-2.5 border-2 border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary/30 text-sm bg-white placeholder-gray-400"
                                autoFocus
                              />
                            </div>
                            <button
                              type="button"
                              onClick={handleValidatePromo}
                              disabled={!promoCode || promoLoading}
                              className="px-4 py-2.5 bg-gray-100 text-gray-700 rounded-xl hover:bg-gray-200 disabled:opacity-40 text-sm font-semibold"
                            >
                              {promoLoading ? "..." : "Apply"}
                            </button>
                            <button
                              type="button"
                              onClick={() => {
                                setPromoVisible(false);
                                setPromoCode("");
                                setPromoValidation(null);
                              }}
                              className="p-2.5 text-gray-400 hover:text-gray-600 rounded-xl hover:bg-gray-100"
                            >
                              <X className="w-4 h-4" />
                            </button>
                          </div>
                          {promoValidation && (
                            <div
                              className={`flex items-center gap-1.5 text-xs ${promoValidation.valid ? "text-green-600" : "text-red-500"}`}
                            >
                              {promoValidation.valid && (
                                <Check className="w-3.5 h-3.5" />
                              )}
                              {promoValidation.message}
                            </div>
                          )}
                        </div>
                      )}
                    </div>
                  )}
                </div>
              </div>
            </form>
          </div>
        </div>
      </section>

      {/* Popular Routes — below hero */}
      <div className="bg-gray-50 dark:bg-gray-950 py-10">
        <div className="container mx-auto px-4">
          <div className="max-w-6xl mx-auto">
            <div className="flex items-center gap-2 mb-4">
              <Zap className="w-4 h-4 text-primary" />
              <h2 className="text-base font-bold text-gray-900 dark:text-white">
                Popular Routes
              </h2>
            </div>
            <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
              {POPULAR_ROUTES.map((route, idx) => (
                <button
                  key={idx}
                  type="button"
                  onClick={() => handlePopularRoute(route.from, route.to)}
                  className="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-xl p-4 hover:border-primary hover:shadow-md transition-all text-left active:scale-95"
                >
                  <div className="text-xl mb-2">{route.icon}</div>
                  <div className="flex items-center gap-1.5 text-sm font-semibold text-gray-900 dark:text-white">
                    <span>{route.from}</span>
                    <ArrowRight className="w-3.5 h-3.5 text-primary flex-shrink-0" />
                    <span>{route.to}</span>
                  </div>
                  <div className="text-xs text-gray-400 mt-1 flex items-center gap-1">
                    <Clock className="w-3 h-3" />
                    {route.duration} journey
                  </div>
                </button>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* Promotions Section */}
      <div className="bg-white dark:bg-gray-900 py-12">
        <div className="container mx-auto px-4">
          <div className="max-w-6xl mx-auto">
            <div className="flex items-center gap-2 mb-6">
              <span className="text-lg">🎁</span>
              <h2 className="text-base font-bold text-gray-900 dark:text-white">
                Offers &amp; Promotions
              </h2>
            </div>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-5">
              {/* Wide promo card */}
              <div className="md:col-span-2 relative rounded-2xl overflow-hidden min-h-[220px] group cursor-pointer">
                <div className="absolute inset-0 bg-gradient-to-br from-[rgb(14,80,54)] to-[rgb(20,140,90)]" />
                <div
                  className="absolute inset-0 opacity-10"
                  style={{
                    backgroundImage:
                      "repeating-linear-gradient(45deg, transparent, transparent 20px, rgba(255,255,255,0.3) 20px, rgba(255,255,255,0.3) 21px)",
                  }}
                />
                <div className="absolute inset-0 bg-gradient-to-r from-black/30 to-transparent" />
                <div className="relative z-10 p-7 flex flex-col justify-between h-full min-h-[220px]">
                  <div>
                    <span className="inline-block px-3 py-1 bg-white/20 text-white text-xs font-semibold rounded-full mb-3 backdrop-blur-sm">
                      Limited Time
                    </span>
                    <h3 className="text-2xl font-extrabold text-white leading-tight mb-2">
                      20% Off Weekend
                      <br />
                      Travel
                    </h3>
                    <p className="text-white/70 text-sm max-w-xs">
                      Book any weekend journey and save 20%. Valid for all seat
                      classes.
                    </p>
                  </div>
                  <div className="flex items-center justify-between mt-4">
                    <span className="text-white/60 text-xs">
                      Valid until 31 Dec 2024
                    </span>
                    <span className="flex items-center gap-1.5 text-white text-sm font-semibold group-hover:gap-3 transition-all">
                      Book now <ArrowRight className="w-4 h-4" />
                    </span>
                  </div>
                </div>
              </div>

              {/* Narrow promo cards */}
              <div className="flex flex-col gap-5">
                <div className="relative rounded-2xl overflow-hidden min-h-[100px] group cursor-pointer">
                  <div className="absolute inset-0 bg-gradient-to-br from-amber-500 to-orange-600" />
                  <div className="absolute inset-0 bg-gradient-to-r from-black/20 to-transparent" />
                  <div className="relative z-10 p-5 flex flex-col justify-between h-full min-h-[100px]">
                    <div>
                      <span className="inline-block px-2.5 py-0.5 bg-white/25 text-white text-xs font-semibold rounded-full mb-2 backdrop-blur-sm">
                        New
                      </span>
                      <h3 className="text-lg font-bold text-white leading-tight">
                        Family Package
                      </h3>
                      <p className="text-white/75 text-xs mt-1">
                        4 tickets for the price of 3
                      </p>
                    </div>
                    <div className="flex items-center justify-end mt-3">
                      <span className="flex items-center gap-1 text-white text-xs font-semibold group-hover:gap-2 transition-all">
                        Learn more <ArrowRight className="w-3.5 h-3.5" />
                      </span>
                    </div>
                  </div>
                </div>

                <div className="relative rounded-2xl overflow-hidden min-h-[100px] group cursor-pointer">
                  <div className="absolute inset-0 bg-gradient-to-br from-blue-600 to-indigo-700" />
                  <div className="absolute inset-0 bg-gradient-to-r from-black/20 to-transparent" />
                  <div className="relative z-10 p-5 flex flex-col justify-between h-full min-h-[100px]">
                    <div>
                      <span className="inline-block px-2.5 py-0.5 bg-white/25 text-white text-xs font-semibold rounded-full mb-2 backdrop-blur-sm">
                        Student
                      </span>
                      <h3 className="text-lg font-bold text-white leading-tight">
                        Student Discount
                      </h3>
                      <p className="text-white/75 text-xs mt-1">
                        15% off with valid student ID
                      </p>
                    </div>
                    <div className="flex items-center justify-end mt-3">
                      <span className="flex items-center gap-1 text-white text-xs font-semibold group-hover:gap-2 transition-all">
                        Learn more <ArrowRight className="w-3.5 h-3.5" />
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <style jsx>{`
        @keyframes slide-up {
          from {
            transform: translateY(100%);
            opacity: 0;
          }
          to {
            transform: translateY(0);
            opacity: 1;
          }
        }
        .animate-slide-up {
          animation: slide-up 0.25s cubic-bezier(0.32, 0.72, 0, 1);
        }

        @keyframes fade-in-up {
          from {
            opacity: 0;
            transform: translateY(20px);
          }
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }
        .animate-fade-in-up {
          animation: fade-in-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }
        .animate-fade-in-up-delay {
          opacity: 0;
          animation: fade-in-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
        }

        @keyframes bg-zoom {
          0% {
            transform: scale(1.08);
          }
          100% {
            transform: scale(1);
          }
        }
        .animate-bg-zoom {
          animation: bg-zoom 3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
          will-change: transform;
        }
      `}</style>
    </div>
  );
}
