import React from 'react';
import { PageType } from '../../types';
import { DOCTOR_PROFILE, CORE_VALUES, PRACTICE_INFO } from '../../data/mockData';
import { IconRenderer } from '../IconRenderer';
import { Calendar, Award, ShieldCheck, CheckCircle2, ArrowRight, Heart, Users, Sparkles, Building2, UserCheck, Stethoscope } from 'lucide-react';

interface AboutPageProps {
  onNavigate: (page: PageType) => void;
  onOpenBooking: () => void;
}

export const AboutPage: React.FC<AboutPageProps> = ({
  onNavigate,
  onOpenBooking
}) => {
  return (
    <div className="space-y-16 sm:space-y-24 pb-16">
      
      {/* HERO BANNER */}
      <section className="relative bg-slate-900 text-white overflow-hidden">
        <div className="absolute inset-0 z-0 opacity-30">
          <img
            src="public/poster outside.jpg"
            alt="Medical clinic background"
            className="w-full h-full object-cover object-center"
          />
          <div className="absolute inset-0 bg-gradient-to-r from-slate-900 via-slate-900/90 to-transparent" />
        </div>

        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 sm:py-24 relative z-10">
          <div className="max-w-3xl space-y-4">
            <span className="inline-flex items-center space-x-2 px-3.5 py-1 bg-[#E8F4FF] text-[#0A6EB4] text-xs font-bold rounded-full uppercase tracking-widest">
              <Building2 className="w-4 h-4" />
              <span>Our Heritage & Philosophy</span>
            </span>
            <h1 className="text-4xl sm:text-5xl lg:text-6xl font-extrabold tracking-tight text-white leading-tight">
              About <span className="text-[#2FA8A1]">Dr. Matseke Surgery</span>
            </h1>
            <p className="text-lg sm:text-xl text-slate-300 font-normal leading-relaxed">
              We are a dedicated medical practice built on the timeless values of clinical rigor, compassion, and unwavering respect for patient dignity.
            </p>
          </div>
        </div>
      </section>

      {/* OUR STORY (TWO-COLUMN) */}
      <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-16 items-center">
          
          {/* Left: Professional Doctor Image */}
          <div className="lg:col-span-5 relative">
            <div className="rounded-3xl overflow-hidden shadow-md border-4 border-white aspect-[4/5] bg-slate-100">
              <img
                src={"public/Dr.22.51.jpeg"}
                alt={DOCTOR_PROFILE.name}
                className="w-full h-full object-cover object-top"
              />
            </div>
            
            <div className="absolute -bottom-6 -left-6 bg-white p-6 rounded-2xl shadow-xl border border-slate-100 max-w-xs hidden sm:block">
              <div className="flex items-center space-x-3 text-[#0A6EB4] mb-2">
                <Award className="w-6 h-6 stroke-[2]" />
                <span className="font-extrabold text-lg">16+ Years</span>
              </div>
              <p className="text-xs text-slate-600 font-medium">
                Dedicated postgraduate clinical training and family practice in Mafikeng.
              </p>
            </div>
          </div>

          {/* Right: Practice Story & Commitment */}
          <div className="lg:col-span-7 space-y-6">
            <span className="inline-block px-3 py-1 bg-[#E8F4FF] text-[#0A6EB4] text-xs font-bold rounded-full uppercase tracking-widest">
              Our Story
            </span>
            <h2 className="text-3xl sm:text-4xl font-extrabold text-slate-900 tracking-tight">
              A Legacy of Compassionate Healthcare in Mmabatho, Mafikeng
            </h2>
            
            <p className="text-slate-600 text-base sm:text-lg leading-relaxed">
              Founded by Dr. T. M. Matseke, our surgery was established with a singular vision: to create a healthcare sanctuary where modern evidence-based medicine meets unhurried human connection. In an era where healthcare can often feel impersonal and rushed, we intentionally structure our clinic to prioritize thorough listening and diagnostic depth.
            </p>
            
            <p className="text-slate-600 text-base sm:text-lg leading-relaxed">
              Our practice serves individuals and multi-generational families across Mmabatho and the broader Mafikeng community. From routine childhood vaccinations to the complex, ongoing management of chronic diabetes and hypertension, we stand by our patients as trusted advisors and advocates for lifelong wellness.
            </p>

            <div className="border-l-4 border-[#0A6EB4] pl-6 py-2 bg-[#F7F9FC] rounded-r-2xl my-6">
              <p className="text-slate-800 font-semibold italic text-base sm:text-lg">
                "{DOCTOR_PROFILE.quote}"
              </p>
              <span className="block text-xs font-bold text-[#0A6EB4] uppercase tracking-wider mt-2">
                — {DOCTOR_PROFILE.name}, Founder
              </span>
            </div>

            <div className="pt-2">
              <button
                onClick={() => onOpenBooking()}
                className="bg-[#0A6EB4] hover:bg-[#085891] text-white px-8 py-3.5 rounded-full font-bold shadow-md transition-all inline-flex items-center space-x-2"
              >
                <Calendar className="w-4 h-4" />
                <span>Schedule a Consultation With Us</span>
              </button>
            </div>
          </div>

        </div>
      </section>

      {/* MISSION & VISION */}
      <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
          
          {/* Mission Card */}
          <div className="bg-gradient-to-br from-white to-[#F7F9FC] p-8 sm:p-10 rounded-3xl border border-slate-200 shadow-sm relative overflow-hidden group hover:border-[#0A6EB4] transition-all duration-300">
            <div className="w-14 h-14 rounded-2xl bg-[#E8F4FF] text-[#0A6EB4] flex items-center justify-center mb-6 shadow-xs group-hover:scale-110 transition-transform">
              <Heart className="w-7 h-7 stroke-[2]" />
            </div>
            <span className="text-xs font-bold uppercase tracking-widest text-[#0A6EB4] block mb-2">Our Mission</span>
            <h3 className="text-2xl sm:text-3xl font-extrabold text-slate-900 mb-4">
              Accessible, Quality Care
            </h3>
            <p className="text-slate-600 text-base sm:text-lg leading-relaxed">
              To provide accessible, highest-quality primary healthcare with unyielding compassion, scientific precision, and professionalism. We treat every patient as family, ensuring clarity, comfort, and clinical excellence in every consultation.
            </p>
          </div>

          {/* Vision Card */}
          <div className="bg-gradient-to-br from-[#2FA8A1] to-[#23857e] p-8 sm:p-10 rounded-3xl text-white shadow-md relative overflow-hidden group transition-all duration-300">
            <div className="w-14 h-14 rounded-2xl bg-white/20 backdrop-blur-md text-white flex items-center justify-center mb-6 shadow-xs group-hover:scale-110 transition-transform">
              <Sparkles className="w-7 h-7 stroke-[2]" />
            </div>
            <span className="text-xs font-bold uppercase tracking-widest text-emerald-100 block mb-2">Our Vision</span>
            <h3 className="text-2xl sm:text-3xl font-extrabold text-white mb-4">
              Improving Community Wellbeing
            </h3>
            <p className="text-emerald-50 text-base sm:text-lg leading-relaxed font-normal">
              To become the most trusted healthcare benchmark in our region—empowering individuals and families through proactive preventative medicine, longevity education, and outstanding clinical outcomes.
            </p>
          </div>

        </div>
      </section>

      {/* OUR VALUES */}
      <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">
            Core Principles
          </span>
          <h2 className="text-3xl sm:text-4xl font-extrabold text-slate-900 tracking-tight">
            Our Guiding Values
          </h2>
          <p className="text-slate-600 text-base sm:text-lg">
            These six core tenets define our bedside manner, diagnostic rigor, and commitment to every patient who walks through our clinic doors.
          </p>
        </div>

        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
          {CORE_VALUES.map((val, idx) => (
            <div
              key={idx}
              className="bg-white p-6 sm:p-8 rounded-2xl border border-slate-200/80 shadow-sm hover:shadow-md hover:border-[#2FA8A1] transition-all duration-300 group flex flex-col justify-between"
            >
              <div>
                <div className="w-12 h-12 rounded-xl bg-[#F7F9FC] text-[#0A6EB4] flex items-center justify-center mb-5 group-hover:bg-[#0A6EB4] group-hover:text-white transition-colors">
                  <IconRenderer name={val.iconName} className="w-6 h-6 stroke-[2]" />
                </div>
                <h3 className="text-xl font-bold text-slate-900 mb-2 group-hover:text-[#0A6EB4] transition-colors">
                  {val.title}
                </h3>
                <p className="text-sm text-slate-600 leading-relaxed">
                  {val.description}
                </p>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* MEET THE DOCTOR (FULL PROFILE CARD) */}
      <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 overflow-hidden">
          <div className="grid grid-cols-1 lg:grid-cols-12">
            
            {/* Left Portrait */}
            <div className="lg:col-span-4 bg-slate-900 relative min-h-[380px]">
              <img
                src={DOCTOR_PROFILE.image}
                alt={DOCTOR_PROFILE.name}
                className="w-full h-full object-cover object-top opacity-90"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-slate-900 via-transparent to-transparent" />
              <div className="absolute bottom-6 left-6 right-6 text-white">
                <span className="inline-block px-2.5 py-0.5 rounded-full bg-[#2FA8A1] text-[10px] font-bold uppercase tracking-wider mb-2">
                  Principal Physician
                </span>
                <h3 className="text-2xl font-bold">{DOCTOR_PROFILE.name}</h3>
                <p className="text-xs text-slate-300 mt-0.5">{DOCTOR_PROFILE.title}</p>
              </div>
            </div>

            {/* Right Biography & Credentials */}
            <div className="lg:col-span-8 p-8 sm:p-12 space-y-8">
              <div>
                <span className="text-xs font-bold uppercase tracking-widest text-[#0A6EB4] block mb-1">
                  Meet Your Doctor
                </span>
                <h2 className="text-3xl font-extrabold text-slate-900 mb-4">
                  Dr. T. M. Matseke
                </h2>
                <p className="text-slate-600 text-base leading-relaxed">
                  {DOCTOR_PROFILE.bio}
                </p>
              </div>

              {/* Qualifications & Memberships Grid */}
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-6 pt-4 border-t border-slate-100">
                
                <div>
                  <h4 className="text-xs font-bold uppercase tracking-wider text-slate-400 mb-3 flex items-center space-x-1.5">
                    <Award className="w-4 h-4 text-[#0A6EB4]" />
                    <span>Academic Qualifications</span>
                  </h4>
                  <ul className="space-y-2 text-xs sm:text-sm text-slate-700">
                    {DOCTOR_PROFILE.qualifications.map((q, idx) => (
                      <li key={idx} className="flex items-start space-x-2">
                        <CheckCircle2 className="w-4 h-4 text-[#0A6EB4] flex-shrink-0 mt-0.5" />
                        <span className="font-medium">{q}</span>
                      </li>
                    ))}
                  </ul>
                </div>

                <div>
                  <h4 className="text-xs font-bold uppercase tracking-wider text-slate-400 mb-3 flex items-center space-x-1.5">
                    <ShieldCheck className="w-4 h-4 text-[#2FA8A1]" />
                    <span>Professional Memberships</span>
                  </h4>
                  <ul className="space-y-2 text-xs sm:text-sm text-slate-700">
                    {DOCTOR_PROFILE.memberships.map((m, idx) => (
                      <li key={idx} className="flex items-start space-x-2">
                        <CheckCircle2 className="w-4 h-4 text-[#2FA8A1] flex-shrink-0 mt-0.5" />
                        <span className="font-medium">{m}</span>
                      </li>
                    ))}
                  </ul>
                </div>

              </div>

              {/* Specialties tags */}
              <div className="pt-4 border-t border-slate-100">
                <span className="text-xs font-bold text-slate-500 uppercase tracking-wider block mb-3">
                  Clinical Focus & Specialties:
                </span>
                <div className="flex flex-wrap gap-2">
                  {DOCTOR_PROFILE.specialties.map((spec, idx) => (
                    <span
                      key={idx}
                      className="px-3 py-1.5 rounded-full bg-[#F7F9FC] border border-slate-200 text-xs font-bold text-slate-700"
                    >
                      {spec}
                    </span>
                  ))}
                </div>
              </div>

            </div>

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

      {/* WHY PATIENTS TRUST US (STATISTICS & IMPACT) */}
      <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="bg-[#2FA8A1] rounded-3xl p-8 sm:p-12 lg:p-16 text-white shadow-sm">
          <div className="text-center max-w-3xl mx-auto mb-10 space-y-2">
            <span className="text-xs font-bold uppercase tracking-widest text-emerald-100 block">
              Proven Track Record
            </span>
            <h2 className="text-3xl sm:text-4xl font-extrabold text-white">
              Why Patients Trust Us
            </h2>
            <p className="text-emerald-50 text-base sm:text-lg">
              Numbers that reflect our dedication to community healthcare and clinical consistency.
            </p>
          </div>

          <div className="grid grid-cols-2 md:grid-cols-4 gap-4 sm:gap-6">
            <div className="bg-white/10 backdrop-blur-md p-6 rounded-2xl border border-white/20 text-center">
              <span className="block text-3xl sm:text-4xl lg:text-5xl font-black mb-1">10+</span>
              <span className="text-xs sm:text-sm font-bold uppercase tracking-wider text-emerald-100">Years Experience</span>
            </div>
            
            <div className="bg-white/10 backdrop-blur-md p-6 rounded-2xl border border-white/20 text-center">
              <span className="block text-3xl sm:text-4xl lg:text-5xl font-black mb-1">1000+</span>
              <span className="text-xs sm:text-sm font-bold uppercase tracking-wider text-emerald-100">Happy Patients</span>
            </div>
            
            <div className="bg-white/10 backdrop-blur-md p-6 rounded-2xl border border-white/20 text-center">
              <span className="block text-3xl sm:text-4xl lg:text-5xl font-black mb-1">100%</span>
              <span className="text-xs sm:text-sm font-bold uppercase tracking-wider text-emerald-100">Professional Care</span>
            </div>
            
            <div className="bg-white/10 backdrop-blur-md p-6 rounded-2xl border border-white/20 text-center">
              <span className="block text-3xl sm:text-4xl lg:text-5xl font-black mb-1">4.9★</span>
              <span className="text-xs sm:text-sm font-bold uppercase tracking-wider text-emerald-100">Friendly Environment</span>
            </div>
          </div>

          <div className="mt-10 text-center">
            <button
              onClick={() => onOpenBooking()}
              className="bg-white text-[#2FA8A1] hover:bg-slate-100 px-8 py-3.5 rounded-full font-bold text-sm shadow-md transition-all active:scale-95"
            >
              Book Your Appointment With Dr. Matseke Today
            </button>
          </div>
        </div>
      </section>

      {/* FINAL CTA BANNER */}
      <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-14 border border-slate-200 text-center space-y-6">
          <span className="inline-block px-3 py-1 bg-[#E8F4FF] text-[#0A6EB4] text-xs font-bold rounded-full uppercase tracking-widest">
            We Are Here For You
          </span>
          <h2 className="text-3xl sm:text-4xl font-extrabold text-slate-900 max-w-xl mx-auto">
            Need Medical Advice or a General Consultation?
          </h2>
          <p className="text-slate-600 text-base sm:text-lg max-w-xl mx-auto">
            Our doors are open Monday through Saturday. Book online in under 60 seconds or contact our friendly reception team.
          </p>
          <div className="pt-2 flex flex-wrap justify-center gap-4">
            <button
              onClick={() => onOpenBooking()}
              className="bg-[#0A6EB4] hover:bg-[#085891] text-white px-8 py-4 rounded-full font-bold text-base shadow-lg transition-all flex items-center space-x-2"
            >
              <Calendar className="w-5 h-5" />
              <span>Book Your Consultation Today</span>
            </button>
            <button
              onClick={() => onNavigate('services')}
              className="bg-white hover:bg-slate-50 border border-slate-300 text-slate-800 px-8 py-4 rounded-full font-bold text-base transition-all"
            >
              Explore Our Medical Services
            </button>
          </div>
        </div>
      </section>

    </div>
  );
};