import React from 'react';
import { PageType, ServiceItem } from '../../types';
import { SERVICES_LIST, WHY_CHOOSE_US_CARDS, TESTIMONIALS_LIST, DOCTOR_PROFILE, PRACTICE_INFO } from '../../data/mockData';
import { IconRenderer } from '../IconRenderer';
import { Calendar, ArrowRight, ShieldCheck, Award, Users, Heart, Star, CheckCircle2, Phone, Clock, MapPin, Sparkles } from 'lucide-react';
import heroImage from '../../assets/images/regenerated_image_1783332343251.png';
import welcomeImage from '../../assets/images/regenerated_image_1783412961690.png';

interface HomePageProps {
  onNavigate: (page: PageType) => void;
  onOpenBooking: (serviceId?: string) => void;
  onSelectService: (service: ServiceItem) => void;
}

export const HomePage: React.FC<HomePageProps> = ({
  onNavigate,
  onOpenBooking,
  onSelectService
}) => {
  // Take first 6 services for preview
  const previewServices = SERVICES_LIST.slice(0, 6);

  return (
    <div className="space-y-16 sm:space-y-24 pb-16">
      
      {/* HERO SECTION */}
      <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-6 sm:pt-8">
        <div className="bg-white rounded-2xl sm:rounded-3xl shadow-sm border border-slate-100 overflow-hidden relative grid grid-cols-1 lg:grid-cols-12 min-h-[520px]">
          
          {/* Left Content Area */}
          <div className="lg:col-span-7 p-8 sm:p-12 lg:p-16 flex flex-col justify-center z-10 relative bg-gradient-to-r from-white via-white/95 to-transparent">
            <div className="flex flex-wrap items-center gap-2.5 mb-6">
              <div className="inline-flex items-center space-x-2 px-3.5 py-1.5 bg-[#E8F4FF] text-[#0A6EB4] text-xs font-bold rounded-full w-fit uppercase tracking-widest shadow-2xs">
                <ShieldCheck className="w-4 h-4 text-[#0A6EB4]" />
                <span>Trusted Medical Practice</span>
              </div>
              <div className="inline-flex items-center space-x-1.5 px-3.5 py-1.5 bg-[#FFF0F1] text-[#E63946] border border-[#E63946]/25 text-xs font-bold rounded-full w-fit uppercase tracking-widest shadow-2xs">
                <span className="w-2 h-2 rounded-full bg-[#E63946] animate-pulse"></span>
                <span>Urgent & Walk-In Care Available</span>
              </div>
            </div>
            
            <h1 className="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-slate-900 leading-[1.1] tracking-tight mb-6">
              Your Health,<br />
              <span className="text-[#0A6EB4] bg-gradient-to-r from-[#0A6EB4] to-[#2FA8A1] bg-clip-text text-transparent">
                Our Priority
              </span>
            </h1>
            
            <p className="text-slate-600 text-lg sm:text-xl max-w-xl mb-8 leading-relaxed font-normal">
              Compassionate, professional, and patient-centred medical care delivered with clinical excellence in a warm, modern environment.
            </p>
            
            <div className="flex flex-wrap items-center gap-4">
              <button
                onClick={() => onOpenBooking()}
                className="bg-[#0A6EB4] hover:bg-[#085891] text-white px-8 py-4 rounded-full font-bold shadow-lg shadow-blue-200 hover:shadow-blue-300 transition-all flex items-center space-x-2 text-base active:scale-95 group"
              >
                <Calendar className="w-5 h-5" />
                <span>Book Appointment</span>
                <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
              </button>
              
              <button
                onClick={() => onNavigate('services')}
                className="border-2 border-[#0A6EB4] hover:bg-[#E8F4FF]/50 text-[#0A6EB4] px-8 py-3.5 rounded-full font-bold transition-all text-base"
              >
                View Services
              </button>
            </div>

            {/* Quick trust badges under buttons */}
            <div className="mt-10 pt-8 border-t border-slate-100 grid grid-cols-3 gap-4 text-left">
              <div>
                <span className="block text-2xl font-extrabold text-slate-900">16+</span>
                <span className="text-xs text-slate-500 font-medium uppercase tracking-wider">Years Experience</span>
              </div>
              <div>
                <span className="block text-2xl font-extrabold text-[#2FA8A1]">100%</span>
                <span className="text-xs text-slate-500 font-medium uppercase tracking-wider">Medical Aids Accepted</span>
              </div>
              <div>
                <span className="block text-2xl font-extrabold text-[#E63946] flex items-center space-x-1">
                  <span>4.9★</span>
                  <Heart className="w-4 h-4 fill-[#E63946] text-[#E63946] inline" />
                </span>
                <span className="text-xs text-slate-500 font-medium uppercase tracking-wider">Patient Rating</span>
              </div>
            </div>
          </div>

          {/* Right Hero Visual Area */}
          <div className="lg:col-span-5 relative bg-[#E8F4FF] min-h-[320px] lg:min-h-full overflow-hidden flex items-end justify-center">
            <img
              src={heroImage}
              alt="Doctor consultation and welcoming medical environment"
              className="w-full h-full object-cover object-center transform hover:scale-105 transition-transform duration-700"
              loading="eager"
            />
            <div className="absolute inset-0 bg-gradient-to-t from-slate-900/60 via-transparent to-transparent lg:hidden" />
            
            {/* Floating Info Pill on Hero Image */}
            <div className="absolute bottom-6 left-6 right-6 lg:left-8 lg:right-8 bg-white/95 backdrop-blur-md p-4 rounded-2xl shadow-xl border border-white/50 flex items-center space-x-3.5">
              <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-[#0A6EB4] to-[#2FA8A1] flex items-center justify-center text-white font-bold text-lg flex-shrink-0 shadow-md">
                Dr
              </div>
              <div className="text-left overflow-hidden">
                <span className="block text-xs font-bold text-[#0A6EB4] uppercase tracking-wider">Lead Physician</span>
                <span className="block text-sm font-extrabold text-slate-900 truncate">{DOCTOR_PROFILE.name}</span>
                <span className="block text-[11px] text-slate-500 truncate">Family Medicine & Chronic Care Specialist</span>
              </div>
            </div>
          </div>

        </div>
      </section>

      {/* WELCOME SECTION */}
      <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="bg-[#F7F9FC] rounded-3xl p-8 sm:p-12 lg:p-16 border border-slate-200/80 shadow-xs">
          <div className="grid grid-cols-1 lg:grid-cols-12 gap-10 lg:gap-16 items-center">
            
            {/* Left Image & Badge */}
            <div className="lg:col-span-5 relative">
              <div className="relative z-10 rounded-2xl overflow-hidden shadow-lg border-4 border-white aspect-[4/3] sm:aspect-[3/2] lg:aspect-[4/5]">
                <img
                  src={welcomeImage}
                  alt="Dr. T. M. Matseke - Lead Family Physician at Dr. Matseke Surgery"
                  className="w-full h-full object-cover"
                  referrerPolicy="no-referrer"
                />
              </div>
              
              {/* Accent backdrop graphic */}
              <div className="absolute -bottom-4 -right-4 w-full h-full rounded-2xl bg-[#2FA8A1]/15 -z-0" />
            </div>

            {/* Right Text */}
            <div className="lg:col-span-7 space-y-6">
              <div className="inline-block px-3 py-1 bg-[#E8F4FF] text-[#0A6EB4] text-xs font-bold rounded-full uppercase tracking-widest">
                Welcome To Our Practice
              </div>
              
              <h2 className="text-3xl sm:text-4xl font-extrabold text-slate-900 tracking-tight">
                Welcome to <span className="text-[#0A6EB4]">Dr. Matseke Surgery</span>
              </h2>
              
              <p className="text-slate-600 text-base sm:text-lg leading-relaxed">
                At Dr. Matseke Surgery, we believe that true healthcare goes beyond treating symptoms—it requires understanding the whole person. Our modern surgery combines thorough, evidence-based medical science with personalized, unhurried treatment in a calm and comfortable environment.
              </p>
              
              <p className="text-slate-600 text-base sm:text-lg leading-relaxed">
                Whether you require acute care for sudden illness, structured management for chronic conditions like diabetes or hypertension, or comprehensive wellness checkups for your family, Dr. Matseke and our dedicated staff are here to listen and support you at every step.
              </p>

              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 pt-2">
                <div className="flex items-start space-x-3 bg-white p-4 rounded-xl border border-slate-200/80 shadow-2xs">
                  <CheckCircle2 className="w-5 h-5 text-[#2FA8A1] flex-shrink-0 mt-0.5" />
                  <div>
                    <strong className="block text-sm font-bold text-slate-900">Unhurried Consultations</strong>
                    <span className="text-xs text-slate-500">We take the time to explain diagnoses clearly without rushing you.</span>
                  </div>
                </div>
                <div className="flex items-start space-x-3 bg-white p-4 rounded-xl border border-slate-200/80 shadow-2xs">
                  <CheckCircle2 className="w-5 h-5 text-[#0A6EB4] flex-shrink-0 mt-0.5" />
                  <div>
                    <strong className="block text-sm font-bold text-slate-900">Direct Medical Aid Claims</strong>
                    <span className="text-xs text-slate-500">Contracted with all major South African schemes at standard rates.</span>
                  </div>
                </div>
              </div>

              <div className="pt-4 flex flex-wrap items-center gap-4">
                <button
                  onClick={() => onNavigate('about')}
                  className="bg-slate-900 hover:bg-slate-800 text-white px-7 py-3 rounded-full font-bold text-sm shadow-sm transition-all flex items-center space-x-2"
                >
                  <span>Learn About Our Story</span>
                  <ArrowRight className="w-4 h-4" />
                </button>
                
                <div className="flex items-center space-x-2 text-sm font-semibold text-[#0A6EB4]">
                  <Phone className="w-4 h-4" />
                  <span>Call Reception: {PRACTICE_INFO.phone}</span>
                </div>
              </div>
            </div>

          </div>
        </div>
      </section>

      {/* WHY CHOOSE US */}
      <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center max-w-3xl mx-auto mb-12 space-y-3">
          <span className="inline-block px-3 py-1 bg-[#E8F4FF] text-[#0A6EB4] text-xs font-bold rounded-full uppercase tracking-widest">
            The Dr. Matseke Difference
          </span>
          <h2 className="text-3xl sm:text-4xl font-extrabold text-slate-900 tracking-tight">
            Why Choose Our Medical Practice?
          </h2>
          <p className="text-slate-600 text-base sm:text-lg">
            We are dedicated to providing ethical, transparent, and patient-focused healthcare that puts your peace of mind first.
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
          {WHY_CHOOSE_US_CARDS.map((card, index) => {
            const isHeart = card.iconName === 'Heart';
            return (
              <div
                key={index}
                className={`bg-white rounded-2xl p-6 sm:p-8 border shadow-sm hover:shadow-md transition-all duration-300 group flex flex-col justify-between ${
                  isHeart ? 'border-slate-200/80 hover:border-[#E63946]' : 'border-slate-200/80 hover:border-[#2FA8A1]'
                }`}
              >
                <div>
                  <div className={`w-14 h-14 rounded-2xl border flex items-center justify-center mb-6 transition-colors duration-300 shadow-xs ${
                    isHeart
                      ? 'bg-[#FFF0F1] border-[#E63946]/20 text-[#E63946] group-hover:bg-[#E63946] group-hover:text-white'
                      : 'bg-[#F7F9FC] border-slate-100 text-[#0A6EB4] group-hover:bg-[#0A6EB4] group-hover:text-white'
                  }`}>
                    <IconRenderer name={card.iconName} className="w-7 h-7 stroke-[2]" />
                  </div>
                  <h3 className={`text-lg font-bold text-slate-900 mb-3 transition-colors ${
                    isHeart ? 'group-hover:text-[#E63946]' : 'group-hover:text-[#0A6EB4]'
                  }`}>
                    {card.title}
                  </h3>
                  <p className="text-sm text-slate-600 leading-relaxed">
                    {card.description}
                  </p>
                </div>
                <div className={`pt-6 mt-6 border-t border-slate-100 flex items-center text-xs font-bold group-hover:translate-x-1 transition-transform ${
                  isHeart ? 'text-[#E63946]' : 'text-[#2FA8A1]'
                }`}>
                  <span>{isHeart ? 'Patient-First Care' : 'Committed to Excellence'}</span>
                  <ArrowRight className="w-3.5 h-3.5 ml-1" />
                </div>
              </div>
            );
          })}
        </div>
      </section>

      {/* SERVICES PREVIEW */}
      <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="bg-white rounded-3xl shadow-sm border border-slate-200 p-8 sm:p-12 lg:p-14">
          
          <div className="flex flex-col sm:flex-row sm:items-end justify-between mb-10 gap-4">
            <div>
              <span className="inline-block px-3 py-1 bg-[#E8F4FF] text-[#0A6EB4] text-xs font-bold rounded-full uppercase tracking-widest mb-2">
                What We Provide
              </span>
              <h2 className="text-3xl font-extrabold text-slate-900 tracking-tight">
                Our Medical Services
              </h2>
              <p className="text-slate-500 text-base mt-1">
                Comprehensive primary healthcare and specialized diagnostics for individuals and families
              </p>
            </div>
            
            <button
              onClick={() => onNavigate('services')}
              className="inline-flex items-center space-x-2 text-[#0A6EB4] hover:text-[#085891] font-bold text-sm bg-[#E8F4FF]/60 hover:bg-[#E8F4FF] px-5 py-2.5 rounded-full transition-all self-start sm:self-auto"
            >
              <span>See all 10 services</span>
              <ArrowRight className="w-4 h-4" />
            </button>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {previewServices.map((srv) => {
              const isRedAccent = srv.iconName === 'HeartPulse' || srv.id === 'womens-health';
              return (
                <div
                  key={srv.id}
                  onClick={() => onSelectService(srv)}
                  className={`p-6 rounded-2xl bg-[#F7F9FC] border hover:bg-white hover:shadow-md transition-all duration-300 cursor-pointer group flex flex-col justify-between ${
                    isRedAccent ? 'border-slate-200/80 hover:border-[#E63946]' : 'border-slate-200/80 hover:border-[#2FA8A1]'
                  }`}
                >
                  <div>
                    <div className="flex items-center justify-between mb-4">
                      <div className={`w-12 h-12 rounded-xl bg-white shadow-xs border flex items-center justify-center transition-colors duration-300 ${
                        isRedAccent
                          ? 'border-[#E63946]/30 text-[#E63946] group-hover:bg-[#E63946] group-hover:text-white'
                          : 'border-slate-100 text-[#2FA8A1] group-hover:bg-[#2FA8A1] group-hover:text-white'
                      }`}>
                        <IconRenderer name={srv.iconName} className="w-6 h-6 stroke-[2]" />
                      </div>
                      <span className="text-[11px] font-bold uppercase tracking-wider px-2.5 py-1 rounded-full bg-white text-slate-600 border border-slate-200/80">
                        ⏱ {srv.duration}
                      </span>
                    </div>

                    <h3 className={`font-bold text-slate-900 text-lg mb-2 transition-colors ${
                      isRedAccent ? 'group-hover:text-[#E63946]' : 'group-hover:text-[#0A6EB4]'
                    }`}>
                      {srv.title}
                    </h3>
                    
                    <p className="text-xs sm:text-sm text-slate-600 leading-relaxed mb-4 line-clamp-3">
                      {srv.shortDescription}
                    </p>
                  </div>

                  <div className="pt-4 border-t border-slate-200/60 flex items-center justify-between">
                    <span className="text-xs font-semibold text-slate-700">
                      {srv.priceRange.split('/')[0]}
                    </span>
                    <span className={`text-xs font-bold uppercase tracking-wider flex items-center space-x-1 ${
                      isRedAccent ? 'text-[#E63946] group-hover:text-[#C92A37]' : 'text-[#0A6EB4] group-hover:text-[#2FA8A1]'
                    }`}>
                      <span>Learn More</span>
                      <ArrowRight className="w-3.5 h-3.5 group-hover:translate-x-1 transition-transform" />
                    </span>
                  </div>
                </div>
              );
            })}
          </div>

          <div className="mt-10 pt-8 border-t border-slate-100 flex flex-col sm:flex-row items-center justify-between gap-4 bg-slate-50 p-6 rounded-2xl">
            <div className="flex items-center space-x-3 text-sm font-medium text-slate-700">
              <span className="w-3 h-3 rounded-full bg-emerald-500 animate-pulse" />
              <span>Looking for Minor Procedures, Executive Checkups, or Medical Certificates?</span>
            </div>
            <button
              onClick={() => onNavigate('services')}
              className="bg-slate-900 hover:bg-slate-800 text-white px-6 py-2 rounded-full text-xs font-bold uppercase tracking-wider transition-all"
            >
              Explore Full Catalog
            </button>
          </div>

        </div>
      </section>

      {/* TESTIMONIALS */}
      <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center max-w-3xl mx-auto mb-12 space-y-3">
          <span className="inline-block px-3 py-1 bg-[#E8F4FF] text-[#0A6EB4] text-xs font-bold rounded-full uppercase tracking-widest">
            Patient Stories
          </span>
          <h2 className="text-3xl sm:text-4xl font-extrabold text-slate-900 tracking-tight">
            What Our Patients Say
          </h2>
          <p className="text-slate-600 text-base sm:text-lg">
            Real feedback from individuals and families who trust Dr. Matseke Surgery with their ongoing health and wellness.
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 sm:gap-8">
          {TESTIMONIALS_LIST.map((t) => (
            <div
              key={t.id}
              className="bg-white rounded-3xl p-6 sm:p-8 border border-slate-200 shadow-sm hover:shadow-md transition-all flex flex-col justify-between"
            >
              <div className="space-y-4">
                <div className="flex items-center space-x-1 text-amber-400">
                  {Array.from({ length: t.rating }).map((_, i) => (
                    <Star key={i} className="w-4 h-4 fill-amber-400" />
                  ))}
                </div>
                
                <p className="text-sm sm:text-base text-slate-700 italic leading-relaxed">
                  "{t.comment}"
                </p>
              </div>

              <div className="pt-6 mt-6 border-t border-slate-100 flex items-center justify-between">
                <div className="flex items-center space-x-3">
                  <img
                    src={t.avatar}
                    alt={t.name}
                    className="w-11 h-11 rounded-full object-cover border-2 border-[#E8F4FF]"
                  />
                  <div>
                    <span className="block text-sm font-bold text-slate-900">{t.name}</span>
                    <span className="block text-xs text-slate-500">{t.role}</span>
                  </div>
                </div>

                {t.verified && (
                  <span className="text-[10px] bg-emerald-50 text-emerald-700 px-2 py-0.5 rounded-full font-bold uppercase tracking-wider border border-emerald-200">
                    Verified
                  </span>
                )}
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* CALL TO ACTION BANNER */}
      <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="bg-gradient-to-r from-[#0A6EB4] via-[#0A6EB4] to-[#2FA8A1] rounded-3xl p-8 sm:p-14 lg:p-16 text-white shadow-xl relative overflow-hidden text-center sm:text-left">
          
          {/* Subtle background circles */}
          <div className="absolute -right-20 -top-20 w-80 h-80 rounded-full bg-white/10 blur-2xl pointer-events-none" />
          <div className="absolute -left-20 -bottom-20 w-80 h-80 rounded-full bg-white/10 blur-2xl pointer-events-none" />
          
          <div className="relative z-10 grid grid-cols-1 lg:grid-cols-12 gap-8 items-center">
            <div className="lg:col-span-8 space-y-4">
              <span className="inline-block px-3.5 py-1 bg-white/20 backdrop-blur-md text-white text-xs font-bold rounded-full uppercase tracking-widest border border-white/30">
                Priority Patient Care
              </span>
              <h2 className="text-3xl sm:text-4xl lg:text-5xl font-extrabold tracking-tight">
                Ready to Take Charge of Your Health?
              </h2>
              <p className="text-blue-100 text-base sm:text-lg max-w-2xl leading-relaxed">
                Whether you need a routine examination, chronic disease evaluation, or urgent medical advice, our team is ready to welcome you with unhurried attention.
              </p>
            </div>

            <div className="lg:col-span-4 flex flex-col sm:flex-row lg:flex-col justify-center gap-3.5">
              <button
                onClick={() => onOpenBooking()}
                className="bg-white text-[#0A6EB4] hover:bg-slate-100 px-8 py-4 rounded-full font-extrabold text-base shadow-lg hover:shadow-xl transition-all flex items-center justify-center space-x-2.5 active:scale-95"
              >
                <Calendar className="w-5 h-5 text-[#2FA8A1]" />
                <span>Book Your Appointment</span>
              </button>
              
              <a
                href={`tel:${PRACTICE_INFO.phone.replace(/\s+/g, '')}`}
                className="bg-black/20 hover:bg-black/30 backdrop-blur-md text-white border border-white/30 px-8 py-3.5 rounded-full font-bold text-sm transition-all flex items-center justify-center space-x-2"
              >
                <Phone className="w-4 h-4" />
                <span>Call {PRACTICE_INFO.phone}</span>
              </a>
            </div>
          </div>
        </div>
      </section>

    </div>
  );
};