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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import {
  Search, ArrowRight, Home, Bed, Bath, Maximize, Star, MapPin,
  Building2, Users, Award, TrendingUp, Eye, Handshake, Key
} from "lucide-react";
import Header from "@/components/Header";
import Footer from "@/components/Footer";

const featured = [
  { name: "Modern Loft Penthouse", price: "$1,850,000", beds: "3", baths: "2", sqft: "2,400", addr: "88 Park Ave, Manhattan", status: "For Sale", gradient: "from-emerald-800/40 to-stone-700/40" },
  { name: "Lakeside Villa", price: "$3,200/mo", beds: "4", baths: "3", sqft: "3,100", addr: "12 Lakeshore Dr, Austin", status: "For Rent", gradient: "from-stone-700/40 to-amber-800/40" },
  { name: "Hillcrest Estate", price: "$4,750,000", beds: "6", baths: "5", sqft: "6,800", addr: "9 Hillcrest Rd, Beverly Hills", status: "For Sale", gradient: "from-amber-800/40 to-emerald-900/40" },
  { name: "Downtown Condo", price: "$675,000", beds: "2", baths: "2", sqft: "1,200", addr: "300 Main St, Chicago", status: "For Sale", gradient: "from-emerald-900/40 to-stone-800/40" },
  { name: "Beachfront Apartment", price: "$4,500/mo", beds: "3", baths: "2", sqft: "1,800", addr: "55 Ocean Blvd, Miami", status: "For Rent", gradient: "from-stone-800/40 to-emerald-800/40" },
  { name: "Country Ranch Home", price: "$925,000", beds: "5", baths: "3", sqft: "4,500", addr: "44 Ranch Rd, Scottsdale", status: "For Sale", gradient: "from-emerald-700/40 to-amber-900/40" },
];

const stats = [
  { icon: Building2, val: "2,500+", label: "Properties Sold" },
  { icon: Users, val: "4,800+", label: "Happy Clients" },
  { icon: Award, val: "20+", label: "Years Experience" },
  { icon: TrendingUp, val: "35", label: "Cities Covered" },
];

const steps = [
  { icon: Search, title: "Search", desc: "Browse our curated collection of premium properties with advanced filters." },
  { icon: Eye, title: "Visit", desc: "Schedule private viewings and explore every detail in person or virtually." },
  { icon: Key, title: "Close", desc: "Our agents guide you through negotiations to a seamless closing." },
];

const testimonials = [
  { name: "Sarah Mitchell", text: "Prestige Realty made our home buying journey incredibly smooth. Our agent was knowledgeable, patient, and truly cared about finding us the perfect fit.", role: "Homeowner, Manhattan" },
  { name: "James Chen", text: "Sold our property in under two weeks at above asking price. The marketing strategy and negotiation skills were exceptional.", role: "Property Seller, Austin" },
  { name: "Maria Gonzalez", text: "As first-time buyers, we were nervous. The team walked us through every step with patience and expertise. Could not recommend them more.", role: "First-time Buyer, Chicago" },
];

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 overflow-hidden bg-gradient-to-br from-stone-950 via-emerald-950/30 to-stone-950">
        <div className="absolute inset-0 pointer-events-none">
          <div className="absolute top-1/4 left-1/3 w-[600px] h-[600px] rounded-full bg-emerald-600 opacity-10 blur-[180px]" />
          <div className="absolute bottom-1/4 right-1/4 w-[400px] h-[400px] rounded-full bg-amber-500 opacity-[0.07] blur-[120px]" />
        </div>
        <div className="relative mx-auto max-w-7xl px-6 py-32 grid lg:grid-cols-2 gap-16 items-center">
          <div className="animate-fade-up">
            <Badge className="bg-emerald-600/20 text-emerald-400 border-emerald-600/30 mb-6">#1 Luxury Real Estate Platform</Badge>
            <h1 className="text-5xl sm:text-6xl lg:text-7xl font-bold text-white leading-[1.1] mb-6">Find Your Dream Home</h1>
            <p className="text-lg text-stone-400 max-w-md mb-8">Discover exceptional properties in the most sought-after neighborhoods. Your perfect home is just a search away.</p>

            {/* Search Bar */}
            <div className="bg-white/10 backdrop-blur-xl rounded-2xl p-4 border border-white/10 shadow-2xl">
              <div className="grid sm:grid-cols-4 gap-3">
                <Input placeholder="Location..." className="bg-white/10 border-white/10 text-white placeholder:text-stone-400 rounded-xl" />
                <Select>
                  <SelectTrigger className="bg-white/10 border-white/10 text-white rounded-xl"><SelectValue placeholder="Type" /></SelectTrigger>
                  <SelectContent>
                    {["House", "Apartment", "Condo", "Villa"].map((t) => <SelectItem key={t} value={t.toLowerCase()}>{t}</SelectItem>)}
                  </SelectContent>
                </Select>
                <Select>
                  <SelectTrigger className="bg-white/10 border-white/10 text-white rounded-xl"><SelectValue placeholder="Price Range" /></SelectTrigger>
                  <SelectContent>
                    {["$0-$250K", "$250K-$500K", "$500K-$1M", "$1M+"].map((t) => <SelectItem key={t} value={t}>{t}</SelectItem>)}
                  </SelectContent>
                </Select>
                <Button className="bg-emerald-600 hover:bg-emerald-700 text-white rounded-xl shadow-lg shadow-emerald-600/20 active:scale-[0.97] transition-all">
                  <Search className="h-4 w-4 mr-2" />Search
                </Button>
              </div>
            </div>
          </div>

          {/* Floating Property Card */}
          <div className="hidden lg:flex justify-center animate-fade-up" style={{ animationDelay: "200ms" }}>
            <Card className="w-80 bg-white/10 backdrop-blur-xl border-white/10 rounded-2xl overflow-hidden hover:scale-[1.02] transition-transform duration-300 shadow-2xl">
              <div className="h-48 bg-gradient-to-br from-emerald-700/40 to-amber-800/30 flex items-center justify-center">
                <Home className="h-16 w-16 text-white/30" />
              </div>
              <CardContent className="p-5">
                <Badge className="bg-emerald-600/20 text-emerald-400 border-emerald-600/30 mb-2">Featured</Badge>
                <div className="text-2xl font-bold text-white">$2,450,000</div>
                <div className="text-sm text-stone-400 mt-1">1240 Ocean Drive, Malibu, CA</div>
                <div className="flex items-center gap-4 mt-3 text-xs text-stone-400">
                  <span className="flex items-center gap-1"><Bed className="h-3 w-3" /> 5 Beds</span>
                  <span className="flex items-center gap-1"><Bath className="h-3 w-3" /> 4 Baths</span>
                  <span className="flex items-center gap-1"><Maximize className="h-3 w-3" /> 4,200 sqft</span>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      {/* ── FEATURED PROPERTIES ── */}
      <section className="py-24 bg-stone-50 dark:bg-stone-950">
        <div className="mx-auto max-w-7xl px-6">
          <div className="text-center mb-16 animate-fade-up">
            <Badge className="bg-emerald-100 text-emerald-700 dark:bg-emerald-600/20 dark:text-emerald-400 mb-4">Featured Listings</Badge>
            <h2 className="text-4xl font-bold text-stone-900 dark:text-white">Handpicked Properties</h2>
            <p className="mt-3 text-stone-500 dark:text-stone-400 max-w-lg mx-auto">Discover premium homes curated by our expert agents.</p>
          </div>
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            {featured.map((p, i) => (
              <Link key={i} to="/properties/1" className="group animate-fade-up" style={{ animationDelay: `${i * 80}ms` }}>
                <Card className="overflow-hidden border-stone-200 dark:border-stone-800 bg-white dark:bg-stone-900/50 backdrop-blur rounded-2xl shadow-md hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
                  <div className={`h-52 bg-gradient-to-br ${p.gradient} flex items-center justify-center relative`}>
                    <Home className="h-12 w-12 text-white/20" />
                    <Badge className="absolute top-4 left-4 bg-emerald-600 text-white border-0">{p.status}</Badge>
                  </div>
                  <CardContent className="p-5">
                    <div className="text-2xl font-bold text-emerald-600">{p.price}</div>
                    <div className="text-base font-semibold text-stone-800 dark:text-white mt-1">{p.name}</div>
                    <div className="flex items-center gap-1 text-sm text-stone-500 dark:text-stone-400 mt-1"><MapPin className="h-3 w-3" />{p.addr}</div>
                    <div className="flex items-center gap-4 mt-3 pt-3 border-t border-stone-100 dark:border-stone-800 text-sm text-stone-500 dark:text-stone-400">
                      <span className="flex items-center gap-1"><Bed className="h-4 w-4" />{p.beds}</span>
                      <span className="flex items-center gap-1"><Bath className="h-4 w-4" />{p.baths}</span>
                      <span className="flex items-center gap-1"><Maximize className="h-4 w-4" />{p.sqft} sqft</span>
                    </div>
                  </CardContent>
                </Card>
              </Link>
            ))}
          </div>
          <div className="text-center mt-12">
            <Button asChild variant="outline" className="rounded-full px-8 border-emerald-600 text-emerald-600 hover:bg-emerald-600 hover:text-white transition-all">
              <Link to="/properties">View All Properties <ArrowRight className="h-4 w-4 ml-2" /></Link>
            </Button>
          </div>
        </div>
      </section>

      {/* ── STATS ── */}
      <section className="py-20 bg-stone-900 dark:bg-stone-950">
        <div className="mx-auto max-w-7xl px-6">
          <div className="grid grid-cols-2 lg:grid-cols-4 gap-8">
            {stats.map((s, i) => (
              <div key={i} className="text-center animate-fade-up" style={{ animationDelay: `${i * 100}ms` }}>
                <s.icon className="h-8 w-8 text-emerald-500 mx-auto mb-3" />
                <div className="text-4xl font-bold text-white">{s.val}</div>
                <div className="text-sm text-stone-400 mt-1">{s.label}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── HOW IT WORKS ── */}
      <section className="py-24 bg-white dark:bg-stone-950">
        <div className="mx-auto max-w-7xl px-6">
          <div className="text-center mb-16 animate-fade-up">
            <Badge className="bg-amber-100 text-amber-700 dark:bg-amber-600/20 dark:text-amber-400 mb-4">Simple Process</Badge>
            <h2 className="text-4xl font-bold text-stone-900 dark:text-white">How It Works</h2>
          </div>
          <div className="grid md:grid-cols-3 gap-8">
            {steps.map((s, i) => (
              <div key={i} className="text-center animate-fade-up" style={{ animationDelay: `${i * 120}ms` }}>
                <div className="w-16 h-16 rounded-2xl bg-emerald-100 dark:bg-emerald-600/20 flex items-center justify-center mx-auto mb-5">
                  <s.icon className="h-7 w-7 text-emerald-600" />
                </div>
                <div className="text-sm font-bold text-emerald-600 mb-1">Step {i + 1}</div>
                <h3 className="text-xl font-bold text-stone-900 dark:text-white mb-2">{s.title}</h3>
                <p className="text-stone-500 dark:text-stone-400 text-sm">{s.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── TESTIMONIALS ── */}
      <section className="py-24 bg-stone-50 dark:bg-stone-900/50">
        <div className="mx-auto max-w-7xl px-6">
          <div className="text-center mb-16 animate-fade-up">
            <Badge className="bg-emerald-100 text-emerald-700 dark:bg-emerald-600/20 dark:text-emerald-400 mb-4">Testimonials</Badge>
            <h2 className="text-4xl font-bold text-stone-900 dark:text-white">What Our Clients Say</h2>
          </div>
          <div className="grid md:grid-cols-3 gap-8">
            {testimonials.map((t, i) => (
              <Card key={i} className="bg-white/70 dark:bg-white/5 backdrop-blur-xl border-stone-200 dark:border-white/10 rounded-2xl hover:-translate-y-1 transition-transform duration-300 animate-fade-up" style={{ animationDelay: `${i * 100}ms` }}>
                <CardContent className="p-6">
                  <div className="flex gap-1 mb-4">{Array.from({ length: 5 }).map((_, j) => <Star key={j} className="h-4 w-4 fill-amber-400 text-amber-400" />)}</div>
                  <p className="text-stone-600 dark:text-stone-300 text-sm mb-4 italic">&ldquo;{t.text}&rdquo;</p>
                  <div className="flex items-center gap-3">
                    <div className="w-10 h-10 rounded-full bg-gradient-to-br from-emerald-400 to-emerald-700 flex items-center justify-center text-white font-bold text-sm">{t.name.charAt(0)}</div>
                    <div>
                      <div className="font-semibold text-stone-900 dark:text-white text-sm">{t.name}</div>
                      <div className="text-xs text-stone-500 dark:text-stone-400">{t.role}</div>
                    </div>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* ── CTA ── */}
      <section className="py-24 bg-gradient-to-br from-emerald-700 via-emerald-800 to-stone-900 relative overflow-hidden">
        <div className="absolute inset-0 pointer-events-none">
          <div className="absolute top-0 right-0 w-[500px] h-[500px] rounded-full bg-amber-400 opacity-[0.07] blur-[150px]" />
        </div>
        <div className="relative mx-auto max-w-3xl px-6 text-center animate-fade-up">
          <h2 className="text-4xl sm:text-5xl font-bold text-white mb-4">Ready to Find Your Dream Home?</h2>
          <p className="text-emerald-100/80 text-lg mb-8">Let our expert agents guide you to the perfect property. Start your journey today.</p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Button asChild size="lg" className="bg-white text-emerald-700 hover:bg-stone-100 rounded-full px-8 shadow-xl active:scale-[0.97] transition-all">
              <Link to="/properties">Browse Properties</Link>
            </Button>
            <Button asChild size="lg" variant="outline" className="border-white/30 text-white hover:bg-white/10 rounded-full px-8 active:scale-[0.97] transition-all">
              <Link to="/contact">Schedule Viewing</Link>
            </Button>
          </div>
        </div>
      </section>

      <Footer />
    </div>
  );
}