"use client";

import { HeroSlider } from "@/components/frontend/hero-slider";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import {
  Carousel,
  type CarouselApi,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel";
import type { ApiFixPackage } from "@/core/api/services/fix-packages/fix-packages.types";
import { getFixPackagesListAction } from "@/features/fixed-packages/actions/fix-packages-actions";
import { getFixPackageCategoryMeta } from "@/features/fixed-packages/utils/package-category";
import {
  getPublicVehicleRoutesAction,
  type RouteListItem,
  type RouteVehicle,
} from "@/features/routes/actions/routes-actions";
import { generateJsonLd } from "@/lib/seo/metadata";
import { getStorageUrl } from "@/lib/utils";
import { motion } from "framer-motion";
import {
  ArrowRight,
  Award,
  CalendarDays,
  Clock,
  CreditCard,
  Fuel,
  Headphones,
  Heart,
  MapPin,
  Route,
  Shield,
  Settings,
} from "lucide-react";
import Image from "next/image";
import Link from "next/link";
import { useEffect, useState } from "react";

const fadeIn = {
  initial: { opacity: 0, y: 30 },
  whileInView: { opacity: 1, y: 0 },
  viewport: { once: true, margin: "-100px" },
  transition: {
    duration: 0.6,
    ease: [0.22, 1, 0.36, 1] as [number, number, number, number],
  },
};

const staggerContainer = {
  initial: {},
  whileInView: { transition: { staggerChildren: 0.1 } },
  viewport: { once: true, margin: "-50px" },
};

interface HomeFleetVehicle {
  id: string;
  name: string;
  type: string;
  image: string | null;
  route: string;
  pickup: string;
  drop: string;
  transmission: string;
  fuel: string;
  priceUnit: string;
  routeType: string;
  routeName: string;
  seats: number;
  distance: string | null;
  duration: string | null;
  totalPrice: string | number | null;
  discountPrice: string | number | null;
}

function formatApiLabel(value: string | number | null | undefined) {
  if (value == null) return "";
  return String(value)
    .replace(/_/g, " ")
    .replace(/\b\w/g, (char) => char.toUpperCase());
}

function formatPriceUnit(value: string | null | undefined) {
  return value === "per_km"
    ? "per km"
    : value === "per_day"
      ? "per day"
      : formatApiLabel(value);
}

function toNumber(value: string | number | null | undefined) {
  if (value == null || value === "") return 0;
  const amount = Number(value);
  return Number.isFinite(amount) ? amount : 0;
}

function getRoutePricing(route: {
  totalPrice?: string | number | null;
  discountPrice?: string | number | null;
}) {
  const routePrice = toNumber(route.totalPrice);
  const discountedPrice = toNumber(route.discountPrice);
  const payableAmount =
    routePrice > 0 && discountedPrice > 0 && discountedPrice < routePrice
      ? discountedPrice
      : routePrice;
  const savings =
    routePrice > 0 && payableAmount > 0 && routePrice > payableAmount
      ? routePrice - payableAmount
      : 0;

  return {
    routePrice,
    discountPrice: discountedPrice,
    payableAmount,
    savings,
    hasRoutePrice: routePrice > 0,
    hasDiscount: savings > 0,
    discountPercent: savings > 0 ? Math.round((savings / routePrice) * 100) : 0,
  };
}

function formatCurrency(value: string | number | null | undefined) {
  return new Intl.NumberFormat("en-IN", {
    style: "currency",
    currency: "INR",
    maximumFractionDigits: 0,
  }).format(toNumber(value));
}

function mapRouteVehicleToHomeFleet(
  route: RouteListItem,
  vehicle: RouteVehicle
): HomeFleetVehicle {
  const pickup =
    route.start_point_city?.name ?? `City #${route.start_point_city_id}`;
  const drop = route.end_point_city?.name ?? `City #${route.end_point_city_id}`;

  return {
    id: `${route.id}-${vehicle.id}`,
    name: vehicle.name,
    type: vehicle.category?.name ?? "Vehicle",
    image: vehicle.image ?? null,
    route: route.name,
    pickup,
    drop,
    transmission: formatApiLabel(vehicle.transmission),
    fuel: formatApiLabel(vehicle.fuel_type),
    priceUnit: formatPriceUnit(vehicle.price_type),
    routeType: formatApiLabel(route.route_type),
    routeName: route.name,
    seats: vehicle.seating_capacity,
    distance: route.total_distance,
    duration: route.total_duration,
    totalPrice: route.total_price,
    discountPrice: route.discount_price,
  };
}

export default function HomePage() {
  const jsonLd = generateJsonLd({
    "@type": "WebSite",
    name: "Ameera Holidays",
    url: process.env.NEXT_PUBLIC_SITE_URL || "https://teertham.com",
    description:
      "Your trusted partner for travel bookings and spiritual journeys",
  });

  const [packages, setPackages] = useState<ApiFixPackage[]>([]);
  const [packagesLoading, setPackagesLoading] = useState(true);
  const [fleetVehicles, setFleetVehicles] = useState<HomeFleetVehicle[]>([]);
  const [fleetLoading, setFleetLoading] = useState(true);
  const [fleetCarouselApi, setFleetCarouselApi] = useState<CarouselApi | null>(
    null
  );

  useEffect(() => {
    let cancelled = false;
    (async () => {
      const result = await getFixPackagesListAction(undefined, 1);
      if (cancelled) return;
      setPackagesLoading(false);
      if (result.success && result.data?.data) {
        setPackages(result.data.data.slice(0, 5));
      }
    })();
    return () => {
      cancelled = true;
    };
  }, []);

  useEffect(() => {
    if (!fleetCarouselApi || fleetLoading || fleetVehicles.length <= 1) return;

    const intervalId = window.setInterval(() => {
      fleetCarouselApi.scrollNext();
    }, 2000);

    return () => window.clearInterval(intervalId);
  }, [fleetCarouselApi, fleetLoading, fleetVehicles.length]);

  useEffect(() => {
    let cancelled = false;
    (async () => {
      const result = await getPublicVehicleRoutesAction(1, 20, "active");
      if (cancelled) return;
      setFleetLoading(false);
      if (result.success && result.data?.data) {
        const latestFleet = result.data.data
          .flatMap((route) =>
            (route.assigned_vehicles ?? [])
              .filter((vehicle) => vehicle.status === "active")
              .map((vehicle) => mapRouteVehicleToHomeFleet(route, vehicle))
          )
          .slice(0, 5);
        setFleetVehicles(latestFleet);
      }
    })();
    return () => {
      cancelled = true;
    };
  }, []);

  const advantages = [
    {
      icon: Shield,
      title: "100% Secure Booking",
      description:
        "Your payments and personal information are always protected with bank-grade security.",
    },
    {
      icon: CreditCard,
      title: "Best Price Guarantee",
      description:
        "We offer the most competitive prices with no hidden charges. Best value for your money.",
    },
    {
      icon: Headphones,
      title: "24/7 Customer Support",
      description:
        "Our dedicated team is available round the clock to assist you with any queries.",
    },
    {
      icon: Clock,
      title: "Instant Confirmation",
      description:
        "Get immediate booking confirmation with all details sent directly to your email.",
    },
    {
      icon: Award,
      title: "Verified Partners",
      description:
        "All our hotels, vehicles, and service providers are thoroughly verified for quality.",
    },
    {
      icon: Heart,
      title: "Personalized Experience",
      description:
        "Customized travel packages designed to match your preferences and budget.",
    },
  ];

  const _destinationCategories = [
    {
      name: "Spiritual",
      image: "/golden-om-symbol-spiritual-icon.jpg",
      destinations: [
        {
          name: "Badrinath Temple",
          image: "/badrinath-temple-in-uttarakhand-with-snow-mountain.jpg",
          location: "Chamoli",
        },
        {
          name: "Kedarnath Temple",
          image: "/kedarnath-temple-stone-shrine-in-himalayan-mountai.jpg",
          location: "Rudraprayag",
        },
        {
          name: "Gangotri Temple",
          image: "/gangotri-temple-white-marble-with-himalayan-backdr.jpg",
          location: "Uttarkashi",
        },
        {
          name: "Yamunotri Temple",
          image: "/yamunotri-temple-mountain-shrine-with-hot-springs-.jpg",
          location: "Uttarkashi",
        },
        {
          name: "Rishikesh Ganga Aarti",
          image: "/rishikesh-ganga-aarti-evening-ceremony-with-fire-l.jpg",
          location: "Rishikesh",
        },
      ],
    },
    {
      name: "Adventure",
      image: "/mountain-adventure-hiking-icon-with-compass.jpg",
      destinations: [
        {
          name: "Valley of Flowers",
          image: "/valley-of-flowers-national-park-with-colorful-wild.jpg",
          location: "Chamoli",
        },
        {
          name: "Auli Skiing",
          image: "/auli-skiing-snow-slope-with-skiers-winter-sport-in.jpg",
          location: "Auli",
        },
        {
          name: "Rishikesh Rafting",
          image: "/rishikesh-white-water-rafting-on-ganga-river-adven.jpg",
          location: "Rishikesh",
        },
        {
          name: "Chopta Meadows",
          image: "/chopta-meadows-green-alpine-grassland-with-snow-pe.jpg",
          location: "Rudraprayag",
        },
        {
          name: "Mussoorie Cable Ride",
          image: "/mussoorie-cable-car-ropeway-with-mountain-valley-v.jpg",
          location: "Mussoorie",
        },
      ],
    },
    {
      name: "Trekking",
      image: "/trekking-boots-on-mountains-icon.jpg",
      destinations: [
        {
          name: "Roopkund Trek",
          image: "/roopkund-trek-skeleton-lake-with-himalayan-snow-pe.jpg",
          location: "Chamoli",
        },
        {
          name: "Har Ki Dun",
          image: "/har-ki-dun-valley-trek-with-green-meadows-and-snow.jpg",
          location: "Uttarkashi",
        },
        {
          name: "Kedarkantha",
          image: "/kedarkantha-winter-trek-snow-summit-with-tents.jpg",
          location: "Dehradun",
        },
        {
          name: "Nag Tibba",
          image: "/nag-tibba-trek-forest-path-with-mountain-views.jpg",
          location: "Mussoorie",
        },
        {
          name: "Chandrashila Peak",
          image: "/chandrashila-peak-summit-with-360-degree-view.jpg",
          location: "Chopta",
        },
      ],
    },
  ];

  return (
    <>
      <script type="application/ld+json" dangerouslySetInnerHTML={jsonLd} />
      <main className="min-h-screen">
        {/* Hero Slider Section - Full viewport height */}
        <HeroSlider />

        {(packagesLoading || packages.length > 0) && (
          <section className="py-12 md:py-20 bg-gradient-to-b from-muted/30 to-background">
            <div className="mx-auto max-w-7xl px-4 md:px-6 lg:px-8">
              <motion.header
                className="text-center space-y-4 mb-20"
                {...fadeIn}
              >
                <Badge
                  variant="outline"
                  className="inline-flex px-4 py-1 text-sm rounded-full border-primary/30 text-primary bg-primary/5"
                >
                  Explore Uttarakhand
                </Badge>
                <h2 className="text-4xl md:text-5xl lg:text-6xl font-bold text-balance tracking-tight">
                  Discover Your{" "}
                  <span className="frontend-text-gradient">Sacred Journey</span>
                </h2>
                <p className="text-muted-foreground text-lg max-w-2xl mx-auto leading-relaxed">
                  Experience the divine beauty of Dev Bhoomi through our curated
                  spiritual and adventure packages.
                </p>
              </motion.header>

              {/* {destinationCategories.map((category, categoryIndex) => (
              <motion.div
                key={categoryIndex}
                className="mb-16 last:mb-0"
                initial={{ opacity: 0, y: 40 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true, margin: "-100px" }}
                transition={{ duration: 0.8, delay: categoryIndex * 0.1 }}
              >
                <div className="flex items-center justify-between mb-8">
                  <div className="flex items-center gap-4">
                    <div className="relative h-14 w-14 rounded-2xl overflow-hidden shadow-xl ring-1 ring-black/5">
                      <Image
                        src={category.image || "/placeholder.png"}
                        alt={category.name}
                        fill
                        className="object-cover"
                        sizes="56px"
                      />
                    </div>
                    <div>
                      <h3 className="text-2xl font-bold tracking-tight">
                        {category.name}
                      </h3>
                      <p className="text-sm text-muted-foreground">
                        Handpicked destinations for your interest
                      </p>
                    </div>
                  </div>
                  <Button
                    asChild
                    className="frontend-btn h-11 px-6 rounded-xl group transition-all"
                  >
                    <Link href={`/${category.name.toLowerCase()}-packages`}>
                      View All
                      <ArrowRight className="ml-2 h-4 w-4 group-hover:translate-x-1 transition-transform" />
                    </Link>
                  </Button>
                </div>
                <motion.div
                  className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6"
                  variants={staggerContainer}
                  initial="initial"
                  whileInView="whileInView"
                  viewport={{ once: true }}
                >
                  {category.destinations.map((dest, destIndex) => (
                    <motion.div key={destIndex} variants={fadeIn}>
                      <Card className="group overflow-hidden border-0 shadow-xl hover:shadow-2xl transition-all duration-500 cursor-pointer rounded-2xl p-0 bg-transparent">
                        <div className="relative aspect-[3/4] overflow-hidden rounded-2xl">
                          <Image
                            src={dest.image || "/placeholder.png"}
                            alt={dest.name}
                            fill
                            className="object-cover group-hover:scale-110 transition-transform duration-700 ease-out"
                            sizes="(max-width: 640px) 50vw, (max-width: 768px) 33vw, (max-width: 1024px) 25vw, 20vw"
                          />
                          <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent opacity-80 group-hover:opacity-100 transition-opacity" />
                          <div className="absolute bottom-0 left-0 right-0 p-5">
                            <h4 className="text-white font-bold text-lg mb-1 drop-shadow-md">
                              {dest.name}
                            </h4>
                            <div className="flex items-center gap-1.5 text-white/90 text-xs font-medium bg-white/10 backdrop-blur-md w-fit px-2 py-1 rounded-full border border-white/20">
                              <MapPin className="h-3 w-3 text-primary-foreground" />
                              {dest.location}
                            </div>
                          </div>
                        </div>
                      </Card>
                    </motion.div>
                  ))}
                </motion.div>
              </motion.div>
            ))} */}

              <section className="py-0 bg-gradient-to-b from-muted/30 to-background">
                <div className="mx-auto max-w-7xl px-4 md:px-6 lg:px-8">
                  <motion.div
                    className="flex items-end justify-between mb-12"
                    {...fadeIn}
                  >
                    <div className="space-y-2">
                      <Badge className="bg-primary/10 text-primary border-none rounded-full px-4 py-1">
                        Latest Packages
                      </Badge>
                      <h2 className="text-3xl md:text-5xl font-bold tracking-tight">
                        Featured{" "}
                        <span className="frontend-text-gradient">Packages</span>
                      </h2>
                    </div>
                    <Button
                      asChild
                      variant="ghost"
                      className="hover:bg-primary/5 text-primary rounded-xl group"
                    >
                      <Link href="/fixed-packages">
                        Explore All Packages
                        <ArrowRight className="ml-2 h-4 w-4 group-hover:translate-x-1 transition-transform" />
                      </Link>
                    </Button>
                  </motion.div>

                  <motion.div
                    className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6 items-stretch"
                    variants={staggerContainer}
                    initial="initial"
                    whileInView="whileInView"
                    viewport={{ once: true }}
                  >
                    {packagesLoading
                      ? Array.from({ length: 5 }).map((_, index) => (
                          <motion.div
                            key={index}
                            variants={fadeIn}
                            className="h-full"
                          >
                            <Card className="h-full overflow-hidden border border-border/50 rounded-2xl p-0 gap-0 bg-card/50 animate-pulse flex flex-col">
                              <div className="aspect-[4/3] bg-muted shrink-0" />
                              <CardContent className="flex-1 flex flex-col px-4 pt-2 pb-4 gap-3 min-h-0">
                                <div className="flex-1 flex flex-col gap-2">
                                  <div className="h-4 bg-muted rounded w-3/4" />
                                  <div className="h-3 bg-muted rounded w-1/2" />
                                </div>
                                <div className="h-8 bg-muted rounded w-1/3 shrink-0" />
                              </CardContent>
                            </Card>
                          </motion.div>
                        ))
                      : packages.map((pkg, _index) => {
                          const displayPrice = pkg.discount_price ?? pkg.price;
                          const hasDiscount =
                            pkg.discount_price != null &&
                            pkg.discount_price < pkg.price;
                          const days = pkg.no_of_days ?? pkg.total_days ?? 0;
                          const nights =
                            pkg.no_of_nights ?? Math.max(0, days - 1);
                          const durationLabel =
                            nights > 0 ? `${days}D/${nights}N` : `${days}D`;
                          const categoryMeta = getFixPackageCategoryMeta(
                            pkg.package_category
                          );
                          return (
                            <motion.div
                              key={pkg.id}
                              variants={fadeIn}
                              className="h-full"
                            >
                              <Card className="h-full group overflow-hidden border border-border/50 shadow-xl hover:shadow-2xl transition-all duration-500 rounded-2xl p-0 gap-0 bg-card/50 backdrop-blur-sm flex flex-col">
                                <div className="relative aspect-[4/3] overflow-hidden shrink-0">
                                  <Image
                                    src={
                                      getStorageUrl(pkg.banner_image) ||
                                      "/placeholder.png"
                                    }
                                    alt={pkg.name}
                                    fill
                                    className="object-cover group-hover:scale-105 transition-transform duration-700 ease-out"
                                    sizes="(max-width: 640px) 50vw, (max-width: 768px) 33vw, (max-width: 1024px) 25vw, 20vw"
                                  />
                                  <div className="absolute top-3 right-3 flex flex-wrap justify-end gap-1.5">
                                    <Badge className="bg-white/90 backdrop-blur-md text-foreground text-xs font-bold shadow-xl border-none px-2 py-1 rounded-lg">
                                      <CalendarDays className="h-3 w-3 text-primary mr-0 mb-0.5" />
                                      {durationLabel}
                                    </Badge>
                                    {pkg.package_type === "premium" && (
                                      <Badge className="bg-amber-500/95 text-white border-none text-xs font-bold shadow-xl px-2 py-1 rounded-lg">
                                        Premium
                                      </Badge>
                                    )}
                                  </div>
                                  <Badge
                                    className={`${categoryMeta.className} absolute top-3 left-3 rounded-lg`}
                                  >
                                    {categoryMeta.label}
                                  </Badge>
                                </div>
                                <CardContent className="flex-1 flex flex-col px-2 pt-2 pb-4 gap-3 min-h-0">
                                  <div className="flex-1 min-h-0">
                                    <h4 className="font-bold text-base line-clamp-2 mb-0.5">
                                      {pkg.name}
                                    </h4>
                                    {pkg.location_detail && (
                                      <div className="flex items-start gap-1 text-xs text-muted-foreground font-medium">
                                        <MapPin className="h-3 w-3 text-primary shrink-0 mt-0.5" />
                                        <span className="line-clamp-2">
                                          {pkg.location_detail}
                                        </span>
                                      </div>
                                    )}
                                  </div>
                                  <div className="pt-2 border-t border-border/50 flex flex-row items-end justify-between gap-3 shrink-0">
                                    <div className="flex flex-col">
                                      <span className="text-xl font-bold text-primary">
                                        ₹{Number(displayPrice).toLocaleString()}
                                      </span>
                                      <span className="text-[10px] text-muted-foreground font-semibold">
                                        /per person
                                      </span>
                                    </div>
                                    {hasDiscount && (
                                      <div className="flex flex-col items-end">
                                        <span className="text-xs text-muted-foreground line-through">
                                          ₹{Number(pkg.price).toLocaleString()}
                                        </span>
                                        <span className="text-xs font-bold text-green-600">
                                          {Math.round(
                                            ((Number(pkg.price) -
                                              Number(pkg.discount_price)) /
                                              Number(pkg.price)) *
                                              100
                                          )}
                                          % OFF
                                        </span>
                                      </div>
                                    )}
                                  </div>
                                </CardContent>
                              </Card>
                            </motion.div>
                          );
                        })}
                  </motion.div>
                </div>
              </section>
            </div>
          </section>
        )}

        <section className="py-20 bg-gradient-to-b from-background to-muted/30">
          <div className="mx-auto max-w-7xl px-4 md:px-6 lg:px-8">
            <motion.div
              className="flex items-end justify-between mb-12"
              {...fadeIn}
            >
              <div className="space-y-2">
                <Badge className="bg-primary/10 text-primary border-none rounded-full px-4 py-1">
                  Latest Fleet
                </Badge>
                <h2 className="text-3xl md:text-5xl font-bold tracking-tight">
                  Book Your{" "}
                  <span className="frontend-text-gradient">Perfect Ride</span>
                </h2>
              </div>
              <Button
                asChild
                variant="ghost"
                className="hover:bg-primary/5 text-primary rounded-xl group"
              >
                <Link href="/vehicle-booking">
                  View All Fleet
                  <ArrowRight className="ml-2 h-4 w-4 group-hover:translate-x-1 transition-transform" />
                </Link>
              </Button>
            </motion.div>

            <motion.div variants={fadeIn}>
              {fleetLoading ? (
                <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
                  {Array.from({ length: 3 }).map((_, index) => (
                    <Card
                      key={index}
                      className="h-[430px] rounded-2xl border border-border/60 bg-card shadow-lg p-0 overflow-hidden animate-pulse"
                    >
                      <CardContent className="flex h-full flex-col gap-4 p-4">
                        <div className="h-6 w-2/3 rounded bg-muted" />
                        <div className="aspect-[16/9] rounded-sm bg-muted" />
                        <div className="h-4 w-3/4 rounded bg-muted" />
                        <div className="h-16 rounded-xl bg-muted" />
                        <div className="grid grid-cols-2 gap-3">
                          <div className="h-4 rounded bg-muted" />
                          <div className="h-4 rounded bg-muted" />
                          <div className="h-4 rounded bg-muted" />
                          <div className="h-4 rounded bg-muted" />
                        </div>
                      </CardContent>
                    </Card>
                  ))}
                </div>
              ) : fleetVehicles.length > 0 ? (
                <Carousel
                  opts={{ align: "start", loop: true, dragFree: true }}
                  setApi={setFleetCarouselApi}
                  className="relative"
                >
                  <CarouselContent className="-ml-6 cursor-grab active:cursor-grabbing">
                    {fleetVehicles.map((vehicle) => {
                      const pricing = getRoutePricing(vehicle);

                      return (
                        <CarouselItem
                          key={vehicle.id}
                          className="pl-6 basis-full md:basis-1/2 xl:basis-1/3"
                        >
                          <motion.div variants={fadeIn} className="h-full">
                            <Card className="group h-full rounded-2xl border border-border/60 bg-card shadow-lg hover:shadow-xl transition-all duration-300 p-0 overflow-hidden">
                              <CardContent className="flex h-full flex-col gap-4 p-4">
                                <div className="flex items-start justify-between gap-3">
                                  <div className="min-w-0">
                                    <h4 className="font-bold text-base leading-tight text-foreground line-clamp-1">
                                      {vehicle.name}
                                    </h4>
                                    <p className="mt-1 text-xs text-muted-foreground">
                                      {vehicle.routeType} {vehicle.type}
                                    </p>
                                  </div>
                                  <Badge className="shrink-0 rounded-full border-none bg-primary/10 px-3 py-1 text-[11px] font-bold text-primary">
                                    {vehicle.type}
                                  </Badge>
                                </div>

                                <div className="relative aspect-[16/9] overflow-hidden rounded-sm bg-muted">
                                  <Image
                                    src={
                                      getStorageUrl(vehicle.image) ||
                                      "/placeholder.png"
                                    }
                                    alt={vehicle.name}
                                    fill
                                    className="object-cover group-hover:scale-105 transition-transform duration-700 ease-out"
                                    sizes="(max-width: 768px) 100vw, (max-width: 1280px) 50vw, 33vw"
                                  />
                                  {pricing.hasDiscount ? (
                                    <div className="absolute bottom-2 left-2">
                                      <span className="rounded bg-[#68b90a] px-2 py-0.5 text-[11px] font-bold text-white">
                                        {pricing.discountPercent}% OFF
                                      </span>
                                    </div>
                                  ) : null}
                                </div>

                                <div className="flex items-center gap-2 text-xs font-semibold text-foreground">
                                  <MapPin className="h-4 w-4 shrink-0 text-muted-foreground" />
                                  <span className="truncate">
                                    {vehicle.pickup}
                                  </span>
                                  <ArrowRight className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
                                  <span className="truncate">
                                    {vehicle.drop}
                                  </span>
                                </div>

                                <div className="grid grid-cols-2 rounded-xl border border-border/50 bg-muted/40 text-xs">
                                  <div className="min-w-0 p-3">
                                    <p className="mb-1 text-[10px] font-medium text-muted-foreground">
                                      Pickup
                                    </p>
                                    <p className="truncate font-bold text-foreground">
                                      {vehicle.pickup}
                                    </p>
                                  </div>
                                  <div className="min-w-0 border-l border-border/50 p-3">
                                    <p className="mb-1 text-[10px] font-medium text-muted-foreground">
                                      Drop
                                    </p>
                                    <p className="truncate font-bold text-foreground">
                                      {vehicle.drop}
                                    </p>
                                  </div>
                                </div>

                                <div className="grid grid-cols-2 gap-x-4 gap-y-3 text-xs text-muted-foreground">
                                  <div className="flex items-center gap-2 min-w-0">
                                    <Settings className="h-4 w-4 shrink-0 text-muted-foreground" />
                                    <span className="truncate">
                                      {vehicle.transmission}
                                    </span>
                                  </div>
                                  <div className="flex items-center gap-2 min-w-0">
                                    <Fuel className="h-4 w-4 shrink-0 text-muted-foreground" />
                                    <span className="truncate">
                                      {vehicle.fuel}
                                    </span>
                                  </div>
                                  <div className="flex items-center gap-2 min-w-0">
                                    <Route className="h-4 w-4 shrink-0 text-muted-foreground" />
                                    <span className="truncate">
                                      {vehicle.routeType}
                                    </span>
                                  </div>
                                  <div className="flex items-center gap-2 min-w-0">
                                    <CalendarDays className="h-4 w-4 shrink-0 text-muted-foreground" />
                                    <span className="truncate">
                                      {vehicle.priceUnit}
                                    </span>
                                  </div>
                                  <div className="flex items-center gap-2 min-w-0">
                                    <Shield className="h-4 w-4 shrink-0 text-muted-foreground" />
                                    <span className="truncate">
                                      {vehicle.seats} seats
                                    </span>
                                  </div>
                                  <div className="flex items-center gap-2 min-w-0">
                                    <Clock className="h-4 w-4 shrink-0 text-muted-foreground" />
                                    <span className="truncate">
                                      {vehicle.duration || "Flexible"}
                                    </span>
                                  </div>
                                </div>

                                <div className="mt-auto flex items-end justify-between gap-3 border-t border-border/60 pt-4">
                                  <div className="min-w-0 text-xs text-muted-foreground">
                                    <div className="leading-snug">
                                      {pricing.hasRoutePrice ? (
                                        <>
                                          {pricing.hasDiscount ? (
                                            <>
                                              <span className="block text-gray-400 line-through">
                                                {formatCurrency(
                                                  pricing.routePrice
                                                )}
                                              </span>
                                              <span className="block truncate font-semibold text-[#68b90a]">
                                                Save{" "}
                                                {formatCurrency(
                                                  pricing.savings
                                                )}
                                              </span>
                                            </>
                                          ) : (
                                            <span>Best Price Guaranteed</span>
                                          )}
                                        </>
                                      ) : (
                                        <>
                                          <span className="block text-lg font-black leading-none text-foreground">
                                            {vehicle.routeName || ""}
                                          </span>
                                          <span className="text-xs text-muted-foreground">
                                            {vehicle.distance
                                              ? `${vehicle.distance} km`
                                              : vehicle.priceUnit}
                                          </span>
                                        </>
                                      )}
                                    </div>
                                    {pricing.hasRoutePrice ? (
                                      <div className="mt-2 text-2xl font-black leading-none text-[#023047]">
                                        {formatCurrency(pricing.payableAmount)}
                                      </div>
                                    ) : (
                                      <Badge className="mt-2 rounded bg-muted px-2 py-0.5 text-[10px] font-bold uppercase text-foreground shadow-none">
                                        {vehicle.routeType}
                                      </Badge>
                                    )}
                                  </div>
                                  <Button
                                    asChild
                                    size="sm"
                                    className="frontend-btn h-10 rounded-xl px-5 text-xs font-bold"
                                  >
                                    <Link href="/vehicle-booking">
                                      Book Now
                                    </Link>
                                  </Button>
                                </div>
                              </CardContent>
                            </Card>
                          </motion.div>
                        </CarouselItem>
                      );
                    })}
                  </CarouselContent>
                  <CarouselPrevious className="left-3 z-20 flex h-14 w-14 border border-white/20 bg-black/20 text-white opacity-30 shadow-xl backdrop-blur-md transition-all hover:scale-110 hover:bg-white/20 hover:text-white hover:opacity-100 active:scale-90 md:left-6 [&_svg]:h-8 [&_svg]:w-8" />
                  <CarouselNext className="right-3 z-20 flex h-14 w-14 border border-white/20 bg-black/20 text-white opacity-30 shadow-xl backdrop-blur-md transition-all hover:scale-110 hover:bg-white/20 hover:text-white hover:opacity-100 active:scale-90 md:right-6 [&_svg]:h-8 [&_svg]:w-8" />
                </Carousel>
              ) : (
                <Card className="rounded-2xl border border-border/60 bg-card shadow-lg">
                  <CardContent className="p-8 text-center">
                    <p className="font-semibold">
                      No active vehicles available
                    </p>
                    <p className="mt-1 text-sm text-muted-foreground">
                      Please check back soon for the latest fleet.
                    </p>
                  </CardContent>
                </Card>
              )}
            </motion.div>
          </div>
        </section>

        {/*    <section className="py-20 bg-gradient-to-b from-muted/30 to-background">
          <div className="mx-auto max-w-7xl px-4 md:px-6 lg:px-8">
            <motion.div
              className="flex items-end justify-between mb-12"
              {...fadeIn}
            >
              <div className="space-y-2">
                <Badge className="bg-primary/10 text-primary border-none rounded-full px-4 py-1">
                  Luxury Stays
                </Badge>
                <h2 className="text-3xl md:text-5xl font-bold tracking-tight">
                  Featured{" "}
                  <span className="frontend-text-gradient">
                    Hotels & Resorts
                  </span>
                </h2>
              </div>
              <Button
                asChild
                variant="ghost"
                className="hover:bg-primary/5 text-primary rounded-xl group"
              >
                <Link href="/hotel-booking">
                  Explore All Stays
                  <ArrowRight className="ml-2 h-4 w-4 group-hover:translate-x-1 transition-transform" />
                </Link>
              </Button>
            </motion.div>

            <motion.div
              className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6"
              variants={staggerContainer}
              initial="initial"
              whileInView="whileInView"
              viewport={{ once: true }}
            >
              {hotels.map((hotel, index) => (
                <motion.div key={index} variants={fadeIn}>
                  <Card className="group overflow-hidden border border-border/50 shadow-xl hover:shadow-2xl transition-all duration-500 rounded-2xl p-0 gap-0 bg-card/50 backdrop-blur-sm">
                    <div className="relative aspect-[4/3] overflow-hidden">
                      <Image
                        src={hotel.image || "/placeholder.png"}
                        alt={hotel.name}
                        fill
                        className="object-cover group-hover:scale-105 transition-transform duration-700 ease-out"
                        sizes="(max-width: 640px) 50vw, (max-width: 768px) 33vw, (max-width: 1024px) 25vw, 20vw"
                      />
                      <div className="absolute top-3 right-3">
                        <Badge className="bg-white/90 backdrop-blur-md text-foreground text-xs font-bold shadow-xl border-none px-2 py-1 rounded-lg">
                          <Star className="h-3 w-3 fill-yellow-500 text-yellow-500 mr-1" />
                          {hotel.rating}
                        </Badge>
                      </div>
                    </div>
                    <CardContent className="p-4 space-y-3">
                      <div>
                        <h4 className="font-bold text-base truncate mb-0.5">
                          {hotel.name}
                        </h4>
                        <div className="flex items-center gap-1 text-xs text-muted-foreground font-medium">
                          <MapPin className="h-3 w-3 text-primary" />
                          {hotel.location}
                        </div>
                      </div>
                      <div className="flex items-center gap-2">
                        {hotel.amenities.map((amenity, i) => (
                          <span
                            key={i}
                            className="flex items-center justify-center h-6 w-6 rounded-lg bg-muted text-muted-foreground transition-colors hover:bg-primary/10 hover:text-primary"
                            title={amenity}
                          >
                            {getAmenityIcon(amenity)}
                          </span>
                        ))}
                        <span className="text-[10px] text-muted-foreground font-semibold ml-auto">
                          {hotel.reviews} REVIEWS
                        </span>
                      </div>
                      <div className="pt-2 border-t border-border/50 flex items-center justify-between">
                        <div>
                          <span className="text-primary font-bold text-xl">
                            ₹{hotel.price.toLocaleString()}
                          </span>
                          <span className="text-[10px] text-muted-foreground font-semibold ml-1">
                            /NIGHT
                          </span>
                        </div>
                        <Button
                          size="sm"
                          className="frontend-btn h-9 px-4 rounded-xl text-xs active:scale-95 transition-transform"
                        >
                          Book
                        </Button>
                      </div>
                    </CardContent>
                  </Card>
                </motion.div>
              ))}
            </motion.div>
          </div>
        </section> */}

        <section className="py-24 bg-gradient-to-b from-background to-muted/30 overflow-hidden">
          <div className="mx-auto max-w-7xl px-4 md:px-6 lg:px-8">
            <motion.header className="text-center space-y-4 mb-16" {...fadeIn}>
              <h2 className="text-3xl md:text-5xl font-bold tracking-tight">
                Why choose{" "}
                <span className="frontend-text-gradient">Ameera Holidays</span>
              </h2>
              <p className="text-muted-foreground text-lg max-w-xl mx-auto">
                Committed to making your Indian travel experience seamless and
                divine.
              </p>
            </motion.header>
            <motion.div
              className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6"
              variants={staggerContainer}
              initial="initial"
              whileInView="whileInView"
              viewport={{ once: true }}
            >
              {advantages.map((advantage, index) => {
                const Icon = advantage.icon;
                return (
                  <motion.div key={index} variants={fadeIn}>
                    <Card className="border border-border/30 shadow-xl hover:shadow-2xl transition-all duration-300 rounded-2xl group h-full bg-card/10 backdrop-blur-sm">
                      <CardContent className="p-6 text-center space-y-4">
                        <div className="flex justify-center">
                          <div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-primary/10 text-primary group-hover:bg-primary group-hover:text-white transition-all duration-300 shadow-lg group-hover:shadow-primary/50">
                            <Icon className="h-7 w-7" />
                          </div>
                        </div>
                        <div className="space-y-2">
                          <h3 className="font-bold text-sm tracking-tight">
                            {advantage.title}
                          </h3>
                          <p className="text-[11px] text-muted-foreground leading-relaxed line-clamp-3 font-medium">
                            {advantage.description}
                          </p>
                        </div>
                      </CardContent>
                    </Card>
                  </motion.div>
                );
              })}
            </motion.div>
          </div>
        </section>

        <section className="py-12 bg-gradient-to-b from-muted/30 to-background">
          <div className="mx-auto max-w-7xl px-4 md:px-6 lg:px-8">
            <motion.div
              initial={{ opacity: 0, scale: 0.95 }}
              whileInView={{ opacity: 1, scale: 1 }}
              viewport={{ once: true }}
              transition={{ duration: 0.8 }}
            >
              <Card className="overflow-hidden border-0 shadow-2xl rounded-[2.5rem] relative group">
                <div className="absolute inset-0 frontend-gradient-secondary opacity-95 group-hover:opacity-100 transition-opacity" />
                <div className="absolute inset-0 bg-[url('/noise.svg')] opacity-20 pointer-events-none" />
                <CardContent className="relative px-8 md:px-16 py-16 md:py-24 text-center space-y-8">
                  <div className="space-y-4">
                    <h2 className="text-4xl md:text-6xl font-bold text-white tracking-tighter text-balance drop-shadow-lg">
                      Ready to Start Your{" "}
                      <span className="underline decoration-white/30 underline-offset-8">
                        Journey
                      </span>
                      ?
                    </h2>
                    <p className="text-white/80 max-w-2xl mx-auto text-lg md:text-xl font-light">
                      Join 50,000+ satisfied travelers. Plan your perfect
                      spiritual or adventure trip with ameera holidays today.
                    </p>
                  </div>
                  <div className="flex flex-col sm:flex-row gap-4 justify-center items-center pt-4">
                    <Button
                      asChild
                      size="lg"
                      className="bg-white text-primary hover:bg-white/90 h-14 px-10 rounded-2xl text-base font-bold shadow-2xl hover:scale-105 active:scale-95 transition-all border-none"
                    >
                      <Link href="/create-account">
                        Get Started Free
                        <ArrowRight className="ml-2 h-5 w-5" />
                      </Link>
                    </Button>
                    <Button
                      asChild
                      size="lg"
                      variant="outline"
                      className="border-white/40 text-white hover:bg-white/10 bg-white/5 backdrop-blur-md h-14 px-10 rounded-2xl text-base font-semibold active:scale-95"
                    >
                      <Link href="/fixed-packages">Explore Packages</Link>
                    </Button>
                  </div>
                </CardContent>
              </Card>
            </motion.div>
          </div>
        </section>
      </main>
    </>
  );
}