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 {
  ArrowRight, Heart, Brain, Bone, Eye, Stethoscope, Baby,
  ShieldCheck, Clock, Award, Users, Star, Quote, CheckCircle
} from "lucide-react";
import Header from "@/components/Header";
import Footer from "@/components/Footer";

const services = [
  { icon: Heart, title: "Cardiology", desc: "Advanced heart and cardiovascular care with state-of-the-art diagnostics and treatment.", gradient: "from-rose-500/20 to-pink-500/20" },
  { icon: Brain, title: "Neurology", desc: "Expert neurological care for conditions affecting the brain, spine, and nervous system.", gradient: "from-purple-500/20 to-indigo-500/20" },
  { icon: Bone, title: "Orthopedics", desc: "Comprehensive bone, joint, and musculoskeletal treatment for optimal mobility.", gradient: "from-amber-500/20 to-orange-500/20" },
  { icon: Eye, title: "Ophthalmology", desc: "Complete eye care from routine exams to advanced surgical procedures.", gradient: "from-sky-500/20 to-cyan-500/20" },
  { icon: Stethoscope, title: "Primary Care", desc: "Your first point of contact for preventive care, wellness, and general health needs.", gradient: "from-teal-500/20 to-emerald-500/20" },
  { icon: Baby, title: "Pediatrics", desc: "Specialized healthcare for infants, children, and adolescents in a warm environment.", gradient: "from-pink-500/20 to-rose-500/20" },
];

const doctors = [
  { name: "Dr. Sarah Chen", specialty: "Cardiology", exp: "15+ years experience", rating: 4.9, gradient: "from-sky-400 to-teal-400" },
  { name: "Dr. James Okafor", specialty: "Neurology", exp: "20+ years experience", rating: 4.8, gradient: "from-teal-400 to-emerald-400" },
  { name: "Dr. Emily Rivera", specialty: "Orthopedics", exp: "12+ years experience", rating: 4.9, gradient: "from-indigo-400 to-sky-400" },
  { name: "Dr. Michael Patel", specialty: "Pediatrics", exp: "18+ years experience", rating: 4.7, gradient: "from-violet-400 to-indigo-400" },
];

const testimonials = [
  { initials: "JM", name: "Jennifer M.", text: "The care I received was exceptional. Dr. Chen took the time to explain everything and made me feel completely at ease throughout my treatment.", rating: 5 },
  { initials: "SK", name: "Steven K.", text: "After years of chronic pain, the orthopedics team gave me my life back. The facility is world-class and the staff genuinely cares.", rating: 5 },
  { initials: "RL", name: "Rachel L.", text: "As a parent, finding a pediatrician I trust was crucial. Dr. Patel is wonderful with my children and always goes above and beyond.", rating: 5 },
];

const insuranceProviders = ["BlueCross BlueShield", "Aetna", "UnitedHealthcare", "Cigna", "Kaiser Permanente", "Humana"];

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-sky-950 via-teal-950/40 to-slate-950">
        <div className="absolute inset-0 pointer-events-none">
          <div className="absolute top-1/3 left-1/2 -translate-x-1/2 w-[600px] h-[600px] rounded-full bg-sky-500 opacity-10 blur-[150px]" />
          <div className="absolute top-1/4 left-1/4 w-[400px] h-[400px] rounded-full bg-teal-400 opacity-10 blur-[120px]" />
          <div className="absolute bottom-1/4 right-1/4 w-[350px] h-[350px] rounded-full bg-sky-600 opacity-8 blur-[120px]" />
        </div>
        <div className="relative z-10 mx-auto max-w-4xl px-6 text-center">
          <Badge variant="secondary" className="mb-6 px-4 py-1.5 text-xs tracking-widest uppercase bg-sky-900/40 text-sky-300 border-sky-700/30 backdrop-blur animate-fade-up">
            Trusted Healthcare Since 2009
          </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">Your Health, Our Priority</h1>
          <p className="mx-auto mt-6 max-w-xl text-lg text-slate-300 leading-relaxed animate-fade-up">Comprehensive, compassionate healthcare for the whole family. Board-certified specialists delivering exceptional care with the latest medical technology.</p>
          <div className="mt-10 flex flex-col sm:flex-row items-center justify-center gap-4 animate-fade-up">
            <Button asChild size="lg" className="rounded-full px-10 text-sm bg-sky-500 hover:bg-sky-600 text-white shadow-lg shadow-sky-500/30 active:scale-[0.97] transition-all">
              <Link to="/contact">Book Appointment <ArrowRight className="ml-2 h-4 w-4" /></Link>
            </Button>
            <Button asChild variant="outline" size="lg" className="rounded-full px-10 text-sm border-slate-600 text-slate-200 hover:bg-slate-800 active:scale-[0.97] transition-all">
              <Link to="/services">Our Services</Link>
            </Button>
          </div>
          <div className="mt-16 grid grid-cols-2 sm:grid-cols-4 gap-6 animate-fade-up">
            {[
              { icon: ShieldCheck, label: "Board Certified" },
              { icon: Clock, label: "24/7 Care" },
              { icon: Award, label: "15+ Years" },
              { icon: Users, label: "50K+ Patients" },
            ].map((b, i) => (
              <div key={i} className="flex flex-col items-center gap-2 p-4 rounded-xl bg-white/5 backdrop-blur-sm border border-white/10">
                <b.icon className="h-6 w-6 text-sky-400" />
                <span className="text-sm font-medium text-slate-300">{b.label}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── SERVICES OVERVIEW ── */}
      <section className="py-24 bg-slate-50 dark:bg-slate-950">
        <div className="mx-auto max-w-6xl px-6">
          <div className="text-center mb-16 animate-fade-up">
            <Badge variant="outline" className="mb-4 text-sky-600 border-sky-300 dark:border-sky-700 dark:text-sky-400">Our Services</Badge>
            <h2 className="text-3xl sm:text-4xl font-bold tracking-tight">Comprehensive Medical Services</h2>
            <p className="mt-3 text-muted-foreground max-w-2xl mx-auto">From preventive care to specialized treatments, we offer a full spectrum of medical services under one roof.</p>
          </div>
          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6 stagger">
            {services.map((s, i) => (
              <Card key={i} className="group bg-white/60 dark:bg-slate-900/60 backdrop-blur-sm border-slate-200/60 dark:border-slate-800/60 hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
                <CardContent className="p-6">
                  <div className={`inline-flex p-3 rounded-xl bg-gradient-to-br \${s.gradient} mb-4`}>
                    <s.icon className="h-6 w-6 text-slate-900 dark:text-white" />
                  </div>
                  <h3 className="text-lg font-semibold mb-2">{s.title}</h3>
                  <p className="text-sm text-muted-foreground mb-4">{s.desc}</p>
                  <Link to="/services" className="inline-flex items-center text-sm font-medium text-sky-600 dark:text-sky-400 hover:text-sky-700 transition-colors">
                    Learn More <ArrowRight className="ml-1 h-3 w-3" />
                  </Link>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* ── FEATURED DOCTORS ── */}
      <section className="py-24 bg-white dark:bg-slate-900">
        <div className="mx-auto max-w-6xl px-6">
          <div className="text-center mb-16 animate-fade-up">
            <Badge variant="outline" className="mb-4 text-teal-600 border-teal-300 dark:border-teal-700 dark:text-teal-400">Expert Team</Badge>
            <h2 className="text-3xl sm:text-4xl font-bold tracking-tight">Meet Our Specialists</h2>
            <p className="mt-3 text-muted-foreground">Experienced, compassionate physicians dedicated to your well-being.</p>
          </div>
          <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6 stagger">
            {doctors.map((d, i) => (
              <Card key={i} className="group bg-white/60 dark:bg-slate-900/60 backdrop-blur-sm border-slate-200/60 dark:border-slate-800/60 hover:shadow-xl hover:-translate-y-1 transition-all duration-300 text-center">
                <CardContent className="p-6">
                  <div className={`mx-auto w-20 h-20 rounded-full bg-gradient-to-br \${d.gradient} flex items-center justify-center text-white text-2xl font-bold mb-4 group-hover:ring-4 group-hover:ring-sky-300/30 transition-all`}>
                    {d.name.split(" ").map(n => n[0]).join("")}
                  </div>
                  <h3 className="text-lg font-semibold">{d.name}</h3>
                  <Badge className="mt-2 bg-sky-100 text-sky-700 dark:bg-sky-900/40 dark:text-sky-300 border-0">{d.specialty}</Badge>
                  <p className="text-xs text-muted-foreground mt-2">{d.exp}</p>
                  <div className="flex items-center justify-center gap-1 mt-3">
                    {Array.from({ length: 5 }).map((_, si) => (
                      <Star key={si} className="h-3.5 w-3.5 fill-amber-400 text-amber-400" />
                    ))}
                    <span className="text-xs text-muted-foreground ml-1">{d.rating}</span>
                  </div>
                  <Button asChild size="sm" className="mt-4 w-full bg-sky-500 hover:bg-sky-600 text-white rounded-full active:scale-[0.97] transition-all">
                    <Link to="/contact">Book Now</Link>
                  </Button>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* ── TESTIMONIALS ── */}
      <section className="py-24 bg-slate-50 dark:bg-slate-950">
        <div className="mx-auto max-w-6xl px-6">
          <div className="text-center mb-16 animate-fade-up">
            <Badge variant="outline" className="mb-4 text-sky-600 border-sky-300 dark:border-sky-700 dark:text-sky-400">Patient Stories</Badge>
            <h2 className="text-3xl sm:text-4xl font-bold tracking-tight">What Our Patients Say</h2>
          </div>
          <div className="grid md:grid-cols-3 gap-6 stagger">
            {testimonials.map((t, i) => (
              <Card key={i} className="bg-white/60 dark:bg-slate-900/60 backdrop-blur-sm border-slate-200/60 dark:border-slate-800/60 hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
                <CardContent className="p-6">
                  <div className="flex items-center gap-1 mb-4">
                    {Array.from({ length: t.rating }).map((_, si) => (
                      <Star key={si} className="h-4 w-4 fill-amber-400 text-amber-400" />
                    ))}
                  </div>
                  <Quote className="h-8 w-8 text-sky-200 dark:text-sky-800 mb-3" />
                  <p className="text-sm text-muted-foreground italic leading-relaxed mb-4">{t.text}</p>
                  <div className="flex items-center gap-3">
                    <div className="w-10 h-10 rounded-full bg-gradient-to-br from-sky-400 to-teal-400 flex items-center justify-center text-white text-sm font-bold">{t.initials}</div>
                    <span className="font-medium text-sm">{t.name}</span>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* ── STATS ── */}
      <section className="py-20 bg-gradient-to-r from-sky-950 via-slate-900 to-teal-950">
        <div className="mx-auto max-w-6xl px-6">
          <div className="grid grid-cols-2 md:grid-cols-4 gap-8 stagger">
            {[
              { value: "50,000+", label: "Patients Treated" },
              { value: "15+", label: "Years of Excellence" },
              { value: "45+", label: "Specialists" },
              { value: "98%", label: "Satisfaction Rate" },
            ].map((s, i) => (
              <div key={i} className="text-center animate-fade-up">
                <div className="text-3xl sm:text-4xl font-bold text-white">{s.value}</div>
                <div className="text-sm text-slate-400 mt-1">{s.label}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── INSURANCE ── */}
      <section className="py-16 bg-white dark:bg-slate-900">
        <div className="mx-auto max-w-6xl px-6 text-center animate-fade-up">
          <h3 className="text-lg font-semibold text-muted-foreground mb-8">We Accept Major Insurance Providers</h3>
          <div className="flex flex-wrap justify-center gap-6">
            {insuranceProviders.map((name, i) => (
              <div key={i} className="px-6 py-3 rounded-full bg-slate-100 dark:bg-slate-800 text-sm font-medium text-slate-600 dark:text-slate-300 border border-slate-200 dark:border-slate-700">
                {name}
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── CTA ── */}
      <section className="py-24 bg-gradient-to-r from-sky-500 to-teal-500">
        <div className="mx-auto max-w-3xl px-6 text-center animate-fade-up">
          <h2 className="text-3xl sm:text-4xl font-bold text-white">Schedule Your Visit Today</h2>
          <p className="mt-4 text-sky-100 text-lg">Experience compassionate, world-class healthcare. Our team is ready to serve you.</p>
          <Button asChild size="lg" className="mt-8 rounded-full px-12 bg-white text-sky-600 hover:bg-sky-50 shadow-xl shadow-sky-700/30 active:scale-[0.97] transition-all font-semibold">
            <Link to="/contact">Book Appointment <ArrowRight className="ml-2 h-4 w-4" /></Link>
          </Button>
        </div>
      </section>

      <Footer />
    </div>
  );
}