import { Link } from "react-router-dom";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Input } from "@/components/ui/input";
import {
  ArrowRight, MapPin, Star, Users, Globe, Clock, Shield, Headphones, Award, Quote, Search, CalendarDays
} from "lucide-react";
import Header from "@/components/Header";
import Footer from "@/components/Footer";

const destinations = [
  { name: "Bali", country: "Indonesia", price: "\$899", rating: "4.9", gradient: "from-blue-600/60 to-cyan-500/40" },
  { name: "Santorini", country: "Greece", price: "\$1,299", rating: "4.8", gradient: "from-amber-600/60 to-orange-400/40" },
  { name: "Machu Picchu", country: "Peru", price: "\$1,499", rating: "4.9", gradient: "from-emerald-600/60 to-teal-400/40" },
  { name: "Kyoto", country: "Japan", price: "\$1,199", rating: "4.7", gradient: "from-purple-600/60 to-violet-400/40" },
  { name: "Marrakech", country: "Morocco", price: "\$799", rating: "4.8", gradient: "from-rose-600/60 to-pink-400/40" },
  { name: "Queenstown", country: "New Zealand", price: "\$1,599", rating: "4.9", gradient: "from-sky-600/60 to-indigo-400/40" },
];

const packages = [
  { title: "Southeast Asia Explorer", duration: "14 Days", price: "\$2,499", highlights: ["Bangkok, Chiang Mai & Bali", "Luxury boutique hotels included", "Private guided temple tours"] },
  { title: "Mediterranean Cruise", duration: "10 Days", price: "\$3,299", highlights: ["Greece, Italy & Croatia", "All meals and drinks included", "Shore excursions at every port"] },
  { title: "African Safari Adventure", duration: "7 Days", price: "\$4,199", highlights: ["Serengeti & Ngorongoro Crater", "Luxury safari lodge accommodation", "Professional wildlife photographer guide"] },
];

const features = [
  { icon: Shield, title: "Secure Booking", desc: "Your payments and personal data are protected with enterprise-grade encryption and full refund guarantees." },
  { icon: Clock, title: "Flexible Plans", desc: "Free cancellation up to 48 hours before departure. Change dates anytime with no extra fees." },
  { icon: Headphones, title: "24/7 Support", desc: "Our multilingual travel experts are available around the clock to assist you anywhere in the world." },
  { icon: Award, title: "Award Winning", desc: "Recognized as a top travel agency by Conde Nast Traveler and Travel + Leisure four years running." },
];

const testimonials = [
  { name: "Sarah Mitchell", text: "The Bali trip was absolutely magical. Every detail was perfectly planned and the local guides were incredible.", trip: "Bali, Indonesia" },
  { name: "James Thornton", text: "Our Mediterranean cruise exceeded all expectations. The itinerary was perfect and the service was world-class.", trip: "Mediterranean Cruise" },
  { name: "Priya Sharma", text: "The safari adventure was a once-in-a-lifetime experience. We saw the Big Five on our very first game drive!", trip: "Tanzania Safari" },
];

export default function IndexPage() {
  return (
    <div className="min-h-screen bg-background text-foreground antialiased">
      <Header />

      {/* ── HERO ── */}
      <section className="relative min-h-screen flex items-center justify-center overflow-hidden bg-gradient-to-br from-slate-950 via-blue-950/40 to-cyan-950/30">
        <div className="absolute inset-0 pointer-events-none">
          <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[700px] h-[700px] rounded-full bg-blue-500 opacity-10 blur-[160px]" />
          <div className="absolute bottom-1/4 left-1/4 w-[400px] h-[400px] rounded-full bg-cyan-400 opacity-10 blur-[120px]" />
          <div className="absolute top-1/3 right-1/4 w-[350px] h-[350px] rounded-full bg-amber-500 opacity-8 blur-[120px]" />
        </div>
        <div className="relative z-10 mx-auto max-w-5xl px-6 text-center">
          <Badge variant="secondary" className="mb-6 px-4 py-1.5 text-xs tracking-widest uppercase bg-blue-900/30 text-cyan-300 border-blue-700/30 backdrop-blur">
            Award-Winning Travel Agency
          </Badge>
          <h1 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold tracking-tight text-white leading-[1.1] animate-fade-up">Discover Your Next Adventure</h1>
          <p className="mx-auto mt-6 max-w-2xl text-lg text-slate-400 leading-relaxed">From pristine beaches to majestic mountains, we craft personalized journeys that create lifelong memories. Let us handle the details while you enjoy the experience.</p>

          {/* Search bar */}
          <div className="mx-auto mt-10 max-w-3xl bg-white/10 backdrop-blur-lg rounded-2xl p-3 border border-white/10">
            <div className="grid sm:grid-cols-3 gap-3">
              <div className="flex items-center gap-2 bg-white/10 rounded-xl px-4 py-3">
                <MapPin className="h-4 w-4 text-cyan-400 shrink-0" />
                <input placeholder="Destination" className="bg-transparent text-sm text-white placeholder:text-slate-400 outline-none w-full" />
              </div>
              <div className="flex items-center gap-2 bg-white/10 rounded-xl px-4 py-3">
                <CalendarDays className="h-4 w-4 text-cyan-400 shrink-0" />
                <input placeholder="Travel dates" className="bg-transparent text-sm text-white placeholder:text-slate-400 outline-none w-full" />
              </div>
              <Button className="bg-blue-600 hover:bg-blue-500 text-white rounded-xl font-semibold active:scale-[0.98] shadow-lg shadow-blue-600/20">
                <Search className="mr-2 h-4 w-4" /> Search
              </Button>
            </div>
          </div>

          {/* Trust row */}
          <div className="mt-12 grid grid-cols-2 md:grid-cols-4 gap-6">
            {[
              { val: "10K+", label: "Happy Travelers" },
              { val: "50+", label: "Destinations" },
              { val: "4.9", label: "Average Rating" },
              { val: "24/7", label: "Support" },
            ].map((s) => (
              <div key={s.label} className="text-center">
                <div className="text-2xl font-bold text-white">{s.val}</div>
                <div className="text-xs text-slate-400 mt-1">{s.label}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── FEATURED DESTINATIONS ── */}
      <section className="py-24 bg-gradient-to-b from-slate-950 to-slate-900">
        <div className="mx-auto max-w-7xl px-6">
          <div className="text-center mb-16">
            <Badge variant="secondary" className="mb-4 px-3 py-1 text-xs tracking-widest uppercase bg-blue-900/30 text-cyan-300 border-blue-700/30">Popular</Badge>
            <h2 className="text-3xl md:text-4xl font-bold text-white animate-fade-up">Featured Destinations</h2>
            <p className="mt-3 text-slate-400 max-w-xl mx-auto">Handpicked destinations loved by travelers around the world.</p>
          </div>
          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6 stagger">
            {destinations.map((d, i) => (
              <Card key={i} className="group overflow-hidden border-slate-800 bg-slate-900/50 hover:border-blue-700/50 hover:-translate-y-1 hover:shadow-lg transition-all duration-300">
                <div className={`relative h-52 bg-gradient-to-br \${d.gradient} flex items-end p-5`}>
                  <div className="absolute inset-0 bg-black/20 group-hover:bg-black/10 transition-colors" />
                  <div className="relative z-10">
                    <Badge className="mb-2 bg-white/20 text-white border-0 backdrop-blur text-xs">{d.country}</Badge>
                    <h3 className="text-xl font-bold text-white">{d.name}</h3>
                  </div>
                </div>
                <CardContent className="p-5">
                  <div className="flex items-center justify-between">
                    <div className="flex items-center gap-1 text-amber-400">
                      <Star className="h-4 w-4 fill-current" />
                      <span className="text-sm font-medium text-white">{d.rating}</span>
                    </div>
                    <div className="text-sm text-slate-400">from <span className="text-lg font-bold text-white">{d.price}</span></div>
                  </div>
                  <Button asChild variant="outline" className="w-full mt-4 border-slate-700 text-slate-200 hover:bg-blue-600 hover:text-white hover:border-blue-600 rounded-full active:scale-[0.98] transition-all">
                    <Link to="/destinations">Explore <ArrowRight className="ml-2 h-4 w-4" /></Link>
                  </Button>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* ── POPULAR PACKAGES ── */}
      <section id="packages" className="py-24 bg-slate-900">
        <div className="mx-auto max-w-7xl px-6">
          <div className="text-center mb-16">
            <Badge variant="secondary" className="mb-4 px-3 py-1 text-xs tracking-widest uppercase bg-amber-900/30 text-amber-300 border-amber-700/30">Packages</Badge>
            <h2 className="text-3xl md:text-4xl font-bold text-white animate-fade-up">Popular Travel Packages</h2>
            <p className="mt-3 text-slate-400 max-w-xl mx-auto">All-inclusive packages designed for the perfect getaway.</p>
          </div>
          <div className="grid md:grid-cols-3 gap-8 stagger">
            {packages.map((p, i) => (
              <Card key={i} className="border-slate-800 bg-slate-950/50 hover:border-blue-700/50 hover:-translate-y-1 hover:shadow-lg transition-all duration-300">
                <CardContent className="p-6">
                  <Badge className="mb-4 bg-blue-600/20 text-blue-300 border-blue-700/30 text-xs">{p.duration}</Badge>
                  <h3 className="text-xl font-bold text-white mb-3">{p.title}</h3>
                  <ul className="space-y-2 mb-6">
                    {p.highlights.map((h, j) => (
                      <li key={j} className="flex items-center gap-2 text-sm text-slate-400">
                        <div className="h-1.5 w-1.5 rounded-full bg-cyan-400 shrink-0" />
                        {h}
                      </li>
                    ))}
                  </ul>
                  <div className="flex items-end justify-between">
                    <div>
                      <span className="text-xs text-slate-500">From</span>
                      <div className="text-2xl font-bold text-white">{p.price}</div>
                      <span className="text-xs text-slate-500">per person</span>
                    </div>
                    <Button asChild className="bg-blue-600 hover:bg-blue-500 text-white rounded-full px-6 text-sm active:scale-[0.98]">
                      <Link to="/contact">Book Now</Link>
                    </Button>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* ── WHY CHOOSE US ── */}
      <section id="about" className="py-24 bg-gradient-to-b from-slate-900 to-slate-950">
        <div className="mx-auto max-w-7xl px-6">
          <div className="text-center mb-16">
            <Badge variant="secondary" className="mb-4 px-3 py-1 text-xs tracking-widest uppercase bg-cyan-900/30 text-cyan-300 border-cyan-700/30">Why Us</Badge>
            <h2 className="text-3xl md:text-4xl font-bold text-white animate-fade-up">Why Choose Wanderlust Travels</h2>
          </div>
          <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-8 stagger">
            {features.map((f, i) => (
              <div key={i} className="text-center group hover:-translate-y-1 hover:shadow-lg transition-all duration-300">
                <div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-2xl bg-blue-600/10 border border-blue-700/20 group-hover:bg-blue-600/20 transition-colors">
                  <f.icon className="h-6 w-6 text-cyan-400" />
                </div>
                <h3 className="text-lg font-semibold text-white mb-2">{f.title}</h3>
                <p className="text-sm text-slate-400 leading-relaxed">{f.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── TESTIMONIALS ── */}
      <section className="py-24 bg-slate-950">
        <div className="mx-auto max-w-7xl px-6">
          <div className="text-center mb-16">
            <Badge variant="secondary" className="mb-4 px-3 py-1 text-xs tracking-widest uppercase bg-amber-900/30 text-amber-300 border-amber-700/30">Reviews</Badge>
            <h2 className="text-3xl md:text-4xl font-bold text-white animate-fade-up">What Travelers Say</h2>
          </div>
          <div className="grid md:grid-cols-3 gap-8 stagger">
            {testimonials.map((t, i) => (
              <Card key={i} className="border-slate-800 backdrop-blur-sm bg-card/80">
                <CardContent className="p-6">
                  <Quote className="h-8 w-8 text-blue-500/30 mb-4" />
                  <p className="text-slate-300 leading-relaxed mb-4">{t.text}</p>
                  <div className="flex items-center gap-1 text-amber-400 mb-3">
                    {[...Array(5)].map((_, j) => <Star key={j} className="h-3.5 w-3.5 fill-current" />)}
                  </div>
                  <div className="text-sm font-semibold text-white">{t.name}</div>
                  <div className="text-xs text-slate-500">{t.trip}</div>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* ── CTA ── */}
      <section className="py-24 bg-gradient-to-r from-blue-950 via-blue-900 to-cyan-900 relative overflow-hidden">
        <div className="absolute inset-0 pointer-events-none">
          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] rounded-full bg-cyan-400 opacity-10 blur-[150px]" />
        </div>
        <div className="relative z-10 mx-auto max-w-3xl px-6 text-center">
          <h2 className="text-3xl md:text-4xl font-bold text-white mb-4 animate-fade-up">Start Planning Your Dream Trip</h2>
          <p className="text-lg text-blue-200/70 mb-8">Let our travel experts craft the perfect itinerary for your next adventure. No commitment required.</p>
          <Button asChild size="lg" className="bg-white text-blue-900 hover:bg-blue-50 rounded-full px-10 font-semibold shadow-xl active:scale-[0.98]">
            <Link to="/contact">Start Planning <ArrowRight className="ml-2 h-4 w-4" /></Link>
          </Button>
        </div>
      </section>

      <Footer />
    </div>
  );
}