"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 type { ApiFixPackage } from "@/core/api/services/fix-packages/fix-packages.types";
import { getFixPackagesListAction } from "@/features/fixed-packages/actions/fix-packages-actions";
import { generateJsonLd } from "@/lib/seo/metadata";
import { getStorageUrl } from "@/lib/utils";
import { motion } from "framer-motion";
import {
  ArrowRight,
  Award,
  CalendarDays,
  Clock,
  Coffee,
  CreditCard,
  Headphones,
  Heart,
  MapPin,
  ParkingCircle,
  Shield,
  Wifi,
} 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" },
};

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);

  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;
    };
  }, []);

  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",
        },
      ],
    },
  ];

  const vehicles = [
    {
      name: "Swift Dzire",
      type: "Sedan",
      image: "/swift-dzire-white-sedan-car-side-view.jpg",
      seats: 4,
      fuel: "Petrol/CNG",
      price: 2500,
      rating: 4.8,
    },
    {
      name: "Toyota Innova",
      type: "SUV",
      image: "/toyota-innova-crysta-gray-suv-side-view.jpg",
      seats: 7,
      fuel: "Diesel",
      price: 4500,
      rating: 4.9,
    },
    {
      name: "Maruti Ertiga",
      type: "MPV",
      image: "/maruti-ertiga-blue-mpv-side-view.jpg",
      seats: 7,
      fuel: "Petrol/CNG",
      price: 3500,
      rating: 4.7,
    },
    {
      name: "Force Traveller",
      type: "Tempo",
      image: "/force-traveller-white-tempo-van-side-view.jpg",
      seats: 12,
      fuel: "Diesel",
      price: 6500,
      rating: 4.6,
    },
    {
      name: "Luxury Coach",
      type: "Bus",
      image: "/luxury-coach-bus-white-with-graphics-side-view.jpg",
      seats: 25,
      fuel: "Diesel",
      price: 12000,
      rating: 4.8,
    },
  ];

  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`;
                          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>
                                </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">
                  Premium 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
              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 }}
            >
              {vehicles.map((vehicle, 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={vehicle.image || "/placeholder.png"}
                        alt={vehicle.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" />
                          {vehicle.rating}
                        </Badge>
                      </div>
                    </div>
                    <CardContent className="p-4 space-y-3">
                      <div>
                        <h4 className="font-bold text-base truncate mb-0.5">
                          {vehicle.name}
                        </h4>
                        <p className="text-xs text-muted-foreground font-medium uppercase tracking-wider">
                          {vehicle.type}
                        </p>
                      </div>
                      <div className="flex items-center justify-between text-xs text-muted-foreground bg-muted/50 p-2 rounded-xl">
                        <span className="flex items-center gap-1.5 font-medium">
                          <Users className="h-3.5 w-3.5" /> {vehicle.seats}{" "}
                          Seats
                        </span>
                        <span className="flex items-center gap-1.5 font-medium">
                          <Fuel className="h-3.5 w-3.5" /> {vehicle.fuel}
                        </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">
                            ₹{vehicle.price.toLocaleString()}
                          </span>
                          <span className="text-[10px] text-muted-foreground font-semibold ml-1">
                            /DAY
                          </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-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>
    </>
  );
}