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 {
  Heart, Brain, Bone, Eye, Stethoscope, Baby, Activity, Pill, Check
} from "lucide-react";
import Header from "@/components/Header";
import Footer from "@/components/Footer";

const services = [
  { icon: Heart, title: "Cardiology", desc: "Complete heart and cardiovascular care including diagnostics, interventional procedures, and ongoing management.", features: ["ECG & Echocardiography", "Cardiac Catheterization", "Heart Failure Management"], gradient: "from-rose-500/20 to-pink-500/20" },
  { icon: Brain, title: "Neurology", desc: "Expert diagnosis and treatment of neurological conditions including stroke, epilepsy, and neurodegenerative diseases.", features: ["EEG & Brain Mapping", "Stroke Prevention", "Migraine Treatment"], gradient: "from-purple-500/20 to-indigo-500/20" },
  { icon: Bone, title: "Orthopedics", desc: "Advanced musculoskeletal care from sports injuries to joint replacement with cutting-edge surgical techniques.", features: ["Joint Replacement Surgery", "Sports Medicine", "Physical Rehabilitation"], gradient: "from-amber-500/20 to-orange-500/20" },
  { icon: Eye, title: "Ophthalmology", desc: "Comprehensive eye care from routine vision exams to complex surgical procedures using advanced laser technology.", features: ["LASIK & Refractive Surgery", "Cataract Treatment", "Glaucoma Management"], gradient: "from-sky-500/20 to-cyan-500/20" },
  { icon: Stethoscope, title: "Primary Care", desc: "Your healthcare home for preventive care, chronic disease management, and general wellness needs.", features: ["Annual Wellness Exams", "Chronic Disease Management", "Vaccinations & Screenings"], gradient: "from-teal-500/20 to-emerald-500/20" },
  { icon: Baby, title: "Pediatrics", desc: "Compassionate, specialized care for children from newborn through adolescence in a family-friendly setting.", features: ["Well-Child Visits", "Developmental Assessments", "Childhood Immunizations"], gradient: "from-pink-500/20 to-rose-500/20" },
  { icon: Activity, title: "Diagnostic Imaging", desc: "State-of-the-art imaging services including MRI, CT, X-ray, and ultrasound with rapid results.", features: ["MRI & CT Scans", "Digital X-Ray", "Ultrasound Imaging"], gradient: "from-emerald-500/20 to-teal-500/20" },
  { icon: Pill, title: "Pharmacy Services", desc: "On-site pharmacy with personalized medication management and convenient prescription services.", features: ["Medication Consultation", "Prescription Management", "Home Delivery Available"], gradient: "from-indigo-500/20 to-violet-500/20" },
];

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

      {/* ── HERO ── */}
      <section className="pt-32 pb-16 bg-gradient-to-b from-sky-950 via-slate-900 to-background">
        <div className="mx-auto max-w-4xl px-6 text-center animate-fade-up">
          <Badge variant="secondary" className="mb-4 bg-sky-900/40 text-sky-300 border-sky-700/30 backdrop-blur">Medical Services</Badge>
          <h1 className="text-4xl sm:text-5xl font-bold text-white tracking-tight">Our Medical Services</h1>
          <p className="mt-4 text-slate-300 max-w-2xl mx-auto">We provide comprehensive healthcare services using the latest medical technology and evidence-based practices.</p>
        </div>
      </section>

      {/* ── SERVICES GRID ── */}
      <section className="py-20">
        <div className="mx-auto max-w-6xl px-6">
          <div className="grid md:grid-cols-2 gap-6 stagger">
            {services.map((s, i) => (
              <Card key={i} className="group relative 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 overflow-hidden">
                <div className="absolute top-4 right-4 text-5xl font-bold text-slate-100 dark:text-slate-800/50 select-none">{String(i + 1).padStart(2, "0")}</div>
                <CardContent className="p-6 relative">
                  <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-xl font-semibold mb-2">{s.title}</h3>
                  <p className="text-sm text-muted-foreground mb-4">{s.desc}</p>
                  <div className="space-y-2 mb-6">
                    {s.features.map((f, fi) => (
                      <div key={fi} className="flex items-center gap-2 text-sm">
                        <Check className="h-4 w-4 text-teal-500 flex-shrink-0" />
                        <span>{f}</span>
                      </div>
                    ))}
                  </div>
                  <Button asChild size="sm" className="bg-sky-500 hover:bg-sky-600 text-white rounded-full active:scale-[0.97] transition-all">
                    <Link to="/contact">Book Consultation</Link>
                  </Button>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      <Footer />
    </div>
  );
}