import Link from 'next/link';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import {
  Stethoscope,
  Users,
  CalendarCheck,
  ShieldCheck,
  Clock,
  Heart,
  Activity,
  Phone,
} from 'lucide-react';

export default function HomePage() {
  return (
    <div className="flex flex-col">
      {/* Hero Section */}
      <section className="relative bg-gradient-to-br from-hospital-600 to-hospital-800 text-white py-24 lg:py-32">
        <div className="absolute inset-0 bg-[url('/pattern.svg')] opacity-10" />
        <div className="container mx-auto px-4 relative">
          <div className="max-w-3xl">
            <h1 className="text-4xl md:text-6xl font-bold mb-6 leading-tight">
              Excellence in Healthcare Management
            </h1>
            <p className="text-lg md:text-xl text-hospital-100 mb-8 leading-relaxed">
              Comprehensive hospital management system connecting patients, doctors, 
              and staff for seamless healthcare delivery.
            </p>
            <div className="flex flex-wrap gap-4">
              <Link href="/doctors">
                <Button size="lg" className="bg-white text-hospital-700 hover:bg-hospital-50">
                  <Stethoscope className="mr-2 h-5 w-5" />
                  Find a Doctor
                </Button>
              </Link>
              <Link href="/appointments/book">
                <Button size="lg" variant="outline" className="border-white text-white hover:bg-white/10">
                  <CalendarCheck className="mr-2 h-5 w-5" />
                  Book Appointment
                </Button>
              </Link>
            </div>
          </div>
        </div>
      </section>

      {/* Stats Section */}
      <section className="py-16 bg-muted/50">
        <div className="container mx-auto px-4">
          <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
            {[
              { icon: Users, label: 'Expert Doctors', value: '50+' },
              { icon: Heart, label: 'Patients Served', value: '10K+' },
              { icon: Activity, label: 'Departments', value: '15+' },
              { icon: Clock, label: 'Years of Service', value: '25+' },
            ].map((stat) => (
              <Card key={stat.label} className="text-center">
                <CardContent className="pt-6">
                  <stat.icon className="mx-auto h-8 w-8 text-hospital-600 mb-3" />
                  <div className="text-3xl font-bold text-foreground">{stat.value}</div>
                  <div className="text-sm text-muted-foreground">{stat.label}</div>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* Services Section */}
      <section className="py-20">
        <div className="container mx-auto px-4">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold mb-4">Our Services</h2>
            <p className="text-muted-foreground max-w-2xl mx-auto">
              We offer a comprehensive range of medical services with state-of-the-art facilities 
              and experienced healthcare professionals.
            </p>
          </div>
          <div className="grid md:grid-cols-3 gap-8">
            {[
              {
                icon: Stethoscope,
                title: 'Expert Consultation',
                description: 'Access to specialists across multiple disciplines with personalized care plans.',
              },
              {
                icon: ShieldCheck,
                title: 'Secure Records',
                description: 'HIPAA-compliant electronic health records with secure access controls.',
              },
              {
                icon: CalendarCheck,
                title: 'Easy Scheduling',
                description: 'Online appointment booking with real-time availability and reminders.',
              },
            ].map((service) => (
              <Card key={service.title} className="hover:shadow-lg transition-shadow">
                <CardContent className="pt-6">
                  <service.icon className="h-10 w-10 text-hospital-600 mb-4" />
                  <h3 className="text-xl font-semibold mb-2">{service.title}</h3>
                  <p className="text-muted-foreground">{service.description}</p>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-20 bg-medical-50 dark:bg-medical-950/20">
        <div className="container mx-auto px-4 text-center">
          <h2 className="text-3xl font-bold mb-4">Need Emergency Care?</h2>
          <p className="text-muted-foreground mb-8 max-w-xl mx-auto">
            Our emergency department is open 24/7 with experienced trauma specialists 
            ready to provide immediate care.
          </p>
          <div className="flex items-center justify-center gap-2 text-2xl font-bold text-medical-600">
            <Phone className="h-8 w-8" />
            <span>+1-555-EMERGENCY</span>
          </div>
        </div>
      </section>
    </div>
  );
}