import React, { useState, useEffect, useMemo } from 'react';
import {
  Calendar as CalendarIcon,
  Clock,
  Video,
  ShieldCheck,
  Star,
  Search,
  Filter,
  User,
  Heart,
  AlertCircle,
  CheckCircle2,
  PhoneCall,
  CalendarCheck,
  ChevronRight,
  ArrowRight,
  PawPrint,
  Stethoscope,
  Activity,
  FileText,
  MessageSquare,
  Mic,
  MicOff,
  VideoOff,
  X,
  Plus,
  Download,
  Info,
  Sparkles,
  ChevronLeft,
  CalendarClock,
  Lock,
  Share2,
  HelpCircle,
  Award
} from 'lucide-react';

const INITIAL_DOCTORS = [
  {
    id: 'vet-1',
    name: 'Dr. Sarah Jenkins, DVM',
    title: 'Canine Specialist & Behavioral Medicine',
    experience: '12+ years exp.',
    rating: 4.96,
    reviewsCount: 342,
    fee: 45,
    avatar: 'https://images.unsplash.com/photo-1559839734-2b71ea197ec2?auto=format&fit=crop&q=80&w=400',
    specialties: ['Dogs', 'Behavior', 'Preventive Care'],
    bio: 'Dedicated canine practitioner focusing on stress-free consultations, behavioral therapies, and diet management.',
    education: 'Cornell University College of Vet Medicine',
    nextAvailable: 'Today, 2:30 PM',
    availableSlots: [
      { id: 's1', time: '10:00 AM', status: 'available' },
      { id: 's2', time: '11:30 AM', status: 'booked' },
      { id: 's3', time: '02:30 PM', status: 'available' },
      { id: 's4', time: '04:00 PM', status: 'available' },
      { id: 's5', time: '05:30 PM', status: 'booked' },
    ]
  },
  {
    id: 'vet-2',
    name: 'Dr. Aris Thorne, MVSc',
    title: 'Feline Internal Medicine & Senior Pet Vitality',
    experience: '9 years exp.',
    rating: 4.92,
    reviewsCount: 218,
    fee: 50,
    avatar: 'https://images.unsplash.com/photo-1622253692010-333f2da6031d?auto=format&fit=crop&q=80&w=400',
    specialties: ['Cats', 'Kidney Health', 'Nutrition'],
    bio: 'Board-certified feline medicine practitioner with deep clinical focus on renal wellness, gentle handling, and chronic care.',
    education: 'Royal Veterinary College (London)',
    nextAvailable: 'Today, 4:15 PM',
    availableSlots: [
      { id: 's6', time: '09:30 AM', status: 'booked' },
      { id: 's7', time: '12:00 PM', status: 'available' },
      { id: 's8', time: '04:15 PM', status: 'available' },
      { id: 's9', time: '06:00 PM', status: 'available' }
    ]
  },
  {
    id: 'vet-3',
    name: 'Dr. Maya Patel, DVM, DABVP',
    title: 'Avian & Exotic Pet Health Specialist',
    experience: '14 years exp.',
    rating: 4.98,
    reviewsCount: 412,
    fee: 60,
    avatar: 'https://images.unsplash.com/photo-1594824813689-0824b067a9e1?auto=format&fit=crop&q=80&w=400',
    specialties: ['Birds', 'Exotics', 'Reptiles'],
    bio: 'Pioneering gentle telemedicine evaluations for parrots, raptors, rabbits, reptiles, and atypical household companions.',
    education: 'UC Davis School of Veterinary Medicine',
    nextAvailable: 'Tomorrow, 10:00 AM',
    availableSlots: [
      { id: 's10', time: '10:00 AM', status: 'available' },
      { id: 's11', time: '11:00 AM', status: 'available' },
      { id: 's12', time: '03:00 PM', status: 'booked' },
      { id: 's13', time: '05:00 PM', status: 'available' }
    ]
  },
  {
    id: 'vet-4',
    name: 'Dr. Marcus Lin, BVSc',
    title: 'Emergency Triage & Acute Trauma Consultant',
    experience: '8 years exp.',
    rating: 4.89,
    reviewsCount: 185,
    fee: 55,
    avatar: 'https://images.unsplash.com/photo-1537368910025-700350fe46c7?auto=format&fit=crop&q=80&w=400',
    specialties: ['Dogs', 'Cats', 'Emergency SOS', 'Trauma'],
    bio: 'Rapid tele-triage specialist helping parents determine immediate hospital transport needs versus home stabilization.',
    education: 'University of Sydney Vet Science',
    nextAvailable: 'Instant (Under 15m)',
    availableSlots: [
      { id: 's14', time: '01:15 PM', status: 'available' },
      { id: 's15', time: '02:00 PM', status: 'available' },
      { id: 's16', time: '03:30 PM', status: 'available' }
    ]
  },
  {
    id: 'vet-5',
    name: 'Dr. Elena Rostova, DVM',
    title: 'Veterinary Dermatology & Allergy Care',
    experience: '11 years exp.',
    rating: 4.95,
    reviewsCount: 290,
    fee: 48,
    avatar: 'https://images.unsplash.com/photo-1551836022-d5d88e9218df?auto=format&fit=crop&q=80&w=400',
    specialties: ['Dogs', 'Cats', 'Skin & Coat', 'Allergies'],
    bio: 'Resolving severe itching, recurring otitis, food hypersensitivities, and environmental allergens through guided telemetry.',
    education: 'University of Florida CVM',
    nextAvailable: 'Tomorrow, 1:30 PM',
    availableSlots: [
      { id: 's17', time: '11:15 AM', status: 'available' },
      { id: 's18', time: '01:30 PM', status: 'available' },
      { id: 's19', time: '04:45 PM', status: 'booked' }
    ]
  }
];

const INITIAL_PETS = [
  { id: 'pet-1', name: 'Milo', species: 'Dog', breed: 'Golden Retriever', age: '3 yrs', weight: '29 kg', icon: '🐕' },
  { id: 'pet-2', name: 'Luna', species: 'Cat', breed: 'British Shorthair', age: '2 yrs', weight: '4.2 kg', icon: '🐈' },
  { id: 'pet-3', name: 'Pip', species: 'Bird', breed: 'Cockatiel', age: '1 yr', weight: '95 g', icon: '🦜' },
];

export default function App() {
  const [activeTab, setActiveTab] = useState('home'); // 'home' | 'doctors' | 'bookings' | 'telehealth-room'
  const [selectedDoctor, setSelectedDoctor] = useState(null);
  const [isBookingOpen, setIsBookingOpen] = useState(false);
  const [bookingStep, setBookingStep] = useState(1); // 1: Pet, 2: Slot & Calendar, 3: Dual-Sync Blocking, 4: Confirmed
  
  // Filtering & Search
  const [selectedSpeciesFilter, setSelectedSpeciesFilter] = useState('All');
  const [searchQuery, setSearchQuery] = useState('');
  const [specialtyFilter, setSpecialtyFilter] = useState('All');

  // Booking Form
  const [selectedPet, setSelectedPet] = useState(INITIAL_PETS[0]);
  const [bookingDate, setBookingDate] = useState(() => {
    const today = new Date();
    return today.toISOString().split('T')[0];
  });
  const [selectedSlot, setSelectedSlot] = useState(null);
  const [petConcern, setPetConcern] = useState('');
  const [consultationType, setConsultationType] = useState('video'); // 'video' | 'audio'
  const [syncProgress, setSyncProgress] = useState(0);

  // Confirmed Bookings Store
  const [bookings, setBookings] = useState([
    {
      id: 'EV-8842',
      doctor: INITIAL_DOCTORS[0],
      pet: INITIAL_PETS[0],
      date: '2026-09-22',
      time: '02:30 PM',
      duration: '30 mins',
      concern: 'Post-walk paw limping and dietary sensitivity check',
      status: 'Confirmed',
      meetingUrl: '#',
      createdAt: 'Just now'
    }
  ]);

  // Video Consultation Room
  const [activeCallSession, setActiveCallSession] = useState(null);
  const [callMuted, setCallMuted] = useState(false);
  const [callVideoOff, setCallVideoOff] = useState(false);
  const [chatMessages, setChatMessages] = useState([
    { sender: 'vet', text: 'Good day! I have Milo’s records open. Could you show me the affected paw on camera?', time: '02:31 PM' }
  ]);
  const [inputMsg, setInputMsg] = useState('');

  // Toast
  const [toastMessage, setToastMessage] = useState(null);

  const showToast = (msg) => {
    setToastMessage(msg);
    setTimeout(() => {
      setToastMessage(null);
    }, 4500);
  };

  const filteredDoctors = useMemo(() => {
    return INITIAL_DOCTORS.filter((doc) => {
      const matchesSearch =
        doc.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
        doc.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
        doc.specialties.some(s => s.toLowerCase().includes(searchQuery.toLowerCase()));

      const matchesSpecies =
        selectedSpeciesFilter === 'All' ||
        doc.specialties.some(s => s.toLowerCase() === selectedSpeciesFilter.toLowerCase());

      const matchesSpecialty =
        specialtyFilter === 'All' ||
        doc.specialties.includes(specialtyFilter);

      return matchesSearch && matchesSpecies && matchesSpecialty;
    });
  }, [searchQuery, selectedSpeciesFilter, specialtyFilter]);

  const startBooking = (doctor) => {
    setSelectedDoctor(doctor);
    const firstAvailable = doctor.availableSlots.find(s => s.status === 'available');
    setSelectedSlot(firstAvailable ? firstAvailable.time : '02:30 PM');
    setBookingStep(1);
    setIsBookingOpen(true);
  };

  const handleConfirmAndSyncCalendar = () => {
    setBookingStep(3);
    setSyncProgress(15);

    const timer = setInterval(() => {
      setSyncProgress((prev) => {
        if (prev >= 100) {
          clearInterval(timer);
          const newBooking = {
            id: `EV-${Math.floor(1000 + Math.random() * 9000)}`,
            doctor: selectedDoctor,
            pet: selectedPet,
            date: bookingDate,
            time: selectedSlot,
            duration: '30 mins',
            concern: petConcern || 'Comprehensive Telehealth Wellness Check',
            status: 'Confirmed',
            createdAt: 'Just now'
          };
          setBookings(prevList => [newBooking, ...prevList]);
          setBookingStep(4);
          showToast(`Dual-Calendar locked! Reserved with ${selectedDoctor.name}.`);
          return 100;
        }
        return prev + 25;
      });
    }, 420);
  };

  const launchConsultationRoom = (booking) => {
    setActiveCallSession(booking);
    setActiveTab('telehealth-room');
    setIsBookingOpen(false);
  };

  const handleSendMessage = (e) => {
    e.preventDefault();
    if (!inputMsg.trim()) return;
    const newMsg = { sender: 'parent', text: inputMsg, time: 'Just now' };
    setChatMessages(prev => [...prev, newMsg]);
    setInputMsg('');

    setTimeout(() => {
      setChatMessages(prev => [
        ...prev,
        {
          sender: 'vet',
          text: 'Understood. The joint swelling appears mild. I will log a gentle antiseptic compress regimen into the Rx notes.',
          time: 'Just now'
        }
      ]);
    }, 1400);
  };

  return (
    <div className="min-h-screen bg-slate-50 text-slate-900 flex flex-col font-sans selection:bg-blue-100 selection:text-blue-900">
      
      {/* Dynamic Toast Message */}
      {toastMessage && (
        <div className="fixed top-20 right-5 z-50 bg-slate-900 text-white px-5 py-3.5 rounded-2xl shadow-2xl border border-blue-400/40 flex items-center gap-3 animate-fade-in">
          <div className="w-6 h-6 rounded-full bg-emerald-500/20 text-emerald-400 flex items-center justify-center">
            <CheckCircle2 className="w-4 h-4" />
          </div>
          <span className="text-sm font-medium">{toastMessage}</span>
          <button onClick={() => setToastMessage(null)} className="ml-2 text-slate-400 hover:text-white">
            <X className="w-4 h-4" />
          </button>
        </div>
      )}

      {}
      <header className="sticky top-0 z-40 bg-white/95 backdrop-blur-md border-b border-blue-100 shadow-sm">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-20 flex items-center justify-between gap-4">
          
          {/* Logo & Brand */}
          <div 
            onClick={() => setActiveTab('home')}
            className="flex items-center gap-3 cursor-pointer select-none group"
          >
            <div className="w-11 h-11 rounded-2xl bg-gradient-to-tr from-blue-700 via-blue-600 to-emerald-500 flex items-center justify-center text-white shadow-lg shadow-blue-600/20 group-hover:scale-105 transition-transform">
              <PawPrint className="w-6 h-6 text-white" />
            </div>
            <div>
              <div className="flex items-center gap-1">
                <span className="text-2xl font-black tracking-tight text-blue-950">Ether</span>
                <span className="text-2xl font-black tracking-tight text-emerald-600">Vets</span>
                <span className="ml-1.5 px-2 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider bg-emerald-50 text-emerald-700 border border-emerald-200">
                  Clinical Dual-Sync
                </span>
              </div>
              <p className="text-xs text-slate-500 hidden sm:block">Certified veterinary telehealth & time-blocking</p>
            </div>
          </div>

          {/* Navigation Pill */}
          <nav className="hidden md:flex items-center gap-1 bg-slate-100/90 p-1.5 rounded-2xl border border-slate-200/80">
            <button
              onClick={() => setActiveTab('home')}
              className={`px-4 py-2 rounded-xl text-sm font-semibold transition-all ${
                activeTab === 'home'
                  ? 'bg-white text-blue-700 shadow-sm'
                  : 'text-slate-600 hover:text-blue-900'
              }`}
            >
              Home
            </button>
            <button
              onClick={() => setActiveTab('doctors')}
              className={`px-4 py-2 rounded-xl text-sm font-semibold transition-all flex items-center gap-1.5 ${
                activeTab === 'doctors'
                  ? 'bg-white text-blue-700 shadow-sm'
                  : 'text-slate-600 hover:text-blue-900'
              }`}
            >
              <Stethoscope className="w-4 h-4 text-emerald-600" />
              Find Veterinarians
            </button>
            <button
              onClick={() => setActiveTab('bookings')}
              className={`px-4 py-2 rounded-xl text-sm font-semibold transition-all flex items-center gap-1.5 ${
                activeTab === 'bookings'
                  ? 'bg-white text-blue-700 shadow-sm'
                  : 'text-slate-600 hover:text-blue-900'
              }`}
            >
              <CalendarCheck className="w-4 h-4 text-blue-600" />
              My Consultations
              {bookings.length > 0 && (
                <span className="w-5 h-5 bg-emerald-500 text-white rounded-full text-[11px] flex items-center justify-center font-bold">
                  {bookings.length}
                </span>
              )}
            </button>
          </nav>

          {/* Right Action buttons */}
          <div className="flex items-center gap-3">
            <button
              onClick={() => {
                const emergencyDoctor = INITIAL_DOCTORS.find(d => d.specialties.includes('Emergency SOS')) || INITIAL_DOCTORS[0];
                startBooking(emergencyDoctor);
              }}
              className="hidden lg:flex items-center gap-2 bg-blue-50 hover:bg-blue-100 text-blue-800 border border-blue-200 text-xs font-bold px-3.5 py-2 rounded-xl transition"
            >
              <span className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span>
              Emergency Triage
            </button>

            <button
              onClick={() => setActiveTab('doctors')}
              className="bg-gradient-to-r from-blue-700 to-emerald-600 hover:from-blue-800 hover:to-emerald-700 text-white text-sm font-bold px-5 py-2.5 rounded-xl shadow-md shadow-blue-600/20 transition flex items-center gap-2"
            >
              <span>Consult Now</span>
              <ChevronRight className="w-4 h-4" />
            </button>
          </div>
        </div>
      </header>

      {}
      <main className="flex-1">
        
        {/* HOMEPAGE VIEW */}
        {activeTab === 'home' && (
          <div>
            {/* Hero Section with Blue & Green Gradient */}
            <section className="relative overflow-hidden bg-gradient-to-b from-blue-50/80 via-emerald-50/30 to-white pt-16 pb-20 border-b border-blue-100/80">
              <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative">
                <div className="grid lg:grid-cols-12 gap-12 items-center">
                  
                  {/* Left Column: Hero Content */}
                  <div className="lg:col-span-7 space-y-6 text-left">
                    <div className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-white border border-blue-200 text-blue-900 text-xs font-semibold shadow-xs">
                      <Sparkles className="w-3.5 h-3.5 text-emerald-600" />
                      <span>Smart Automated Calendar Synchronization for Pet Parent & Clinic</span>
                    </div>
                    
                    <h1 className="text-4xl sm:text-5xl lg:text-6xl font-extrabold tracking-tight text-blue-950 leading-[1.15]">
                      Veterinary Care Locked into Your{' '}
                      <span className="bg-gradient-to-r from-blue-700 via-teal-600 to-emerald-600 bg-clip-text text-transparent">
                        Calendar in Real-Time.
                      </span>
                    </h1>

                    <p className="text-base sm:text-lg text-slate-600 max-w-xl leading-relaxed">
                      Connect your pet directly with board-certified veterinary doctors. When you click consult, our engine reserves both your digital calendar and the veterinarian’s schedule simultaneously.
                    </p>

                    {/* CTA Actions */}
                    <div className="flex flex-wrap items-center gap-4 pt-2">
                      <button
                        onClick={() => setActiveTab('doctors')}
                        className="bg-blue-700 hover:bg-blue-800 text-white font-bold text-base px-6 py-3.5 rounded-xl shadow-lg shadow-blue-700/25 transition flex items-center gap-2"
                      >
                        <Stethoscope className="w-5 h-5 text-emerald-300" />
                        Book a Consultation
                      </button>

                      <button
                        onClick={() => {
                          setActiveTab('doctors');
                          setSelectedSpeciesFilter('Dogs');
                        }}
                        className="bg-white hover:bg-slate-50 text-blue-900 border border-blue-200 font-bold text-base px-6 py-3.5 rounded-xl shadow-xs transition flex items-center gap-2"
                      >
                        <PawPrint className="w-5 h-5 text-emerald-600" />
                        Explore Doctors
                      </button>
                    </div>

                    {/* Blue & Green Clinical Metrics */}
                    <div className="grid grid-cols-3 gap-4 pt-6 border-t border-blue-100">
                      <div className="bg-white p-3.5 rounded-2xl border border-blue-100 shadow-xs">
                        <div className="text-2xl sm:text-3xl font-black text-blue-950">500+</div>
                        <div className="text-xs text-slate-500 font-medium">Licensed Vets</div>
                      </div>
                      <div className="bg-white p-3.5 rounded-2xl border border-emerald-100 shadow-xs">
                        <div className="text-2xl sm:text-3xl font-black text-emerald-600">&lt; 15 min</div>
                        <div className="text-xs text-slate-500 font-medium">Average Response</div>
                      </div>
                      <div className="bg-white p-3.5 rounded-2xl border border-blue-100 shadow-xs">
                        <div className="text-2xl sm:text-3xl font-black text-blue-700">100%</div>
                        <div className="text-xs text-slate-500 font-medium">Dual-Blocked Time</div>
                      </div>
                    </div>
                  </div>

                  {/* Right Column: Hero Visual Card */}
                  <div className="lg:col-span-5 relative">
                    <div className="relative mx-auto max-w-md bg-white rounded-3xl p-6 shadow-2xl border border-blue-100 ring-1 ring-blue-500/10">
                      
                      {/* Doctor Profile Banner */}
                      <div className="flex items-center justify-between pb-4 border-b border-slate-100">
                        <div className="flex items-center gap-3">
                          <img
                            src={INITIAL_DOCTORS[0].avatar}
                            alt="Vet"
                            className="w-13 h-13 rounded-2xl object-cover ring-2 ring-emerald-500/30"
                          />
                          <div>
                            <div className="font-bold text-blue-950 text-sm flex items-center gap-1">
                              {INITIAL_DOCTORS[0].name}
                              <ShieldCheck className="w-4 h-4 text-emerald-500" />
                            </div>
                            <div className="text-xs text-slate-500">Cornell Veterinary Specialist</div>
                          </div>
                        </div>
                        <span className="px-2.5 py-1 bg-emerald-50 text-emerald-700 border border-emerald-200 text-xs font-bold rounded-lg flex items-center gap-1">
                          <span className="w-2 h-2 rounded-full bg-emerald-500"></span> Online
                        </span>
                      </div>

                      {/* Interactive Dual-Block Visual Simulation */}
                      <div className="my-5 bg-gradient-to-br from-blue-50/70 to-emerald-50/50 rounded-2xl p-4 border border-blue-100">
                        <div className="flex items-center justify-between text-xs font-bold text-blue-950 mb-3">
                          <span className="flex items-center gap-1.5">
                            <CalendarClock className="w-4 h-4 text-blue-700" />
                            Simultaneous Slot Blocking
                          </span>
                          <span className="text-emerald-700 font-bold bg-white px-2 py-0.5 rounded-md border border-emerald-200 text-[11px]">
                            Live Lock
                          </span>
                        </div>

                        <div className="grid grid-cols-3 gap-2">
                          <div className="p-2.5 rounded-xl bg-blue-700 text-white text-center text-xs font-bold shadow-md shadow-blue-700/20">
                            <div className="text-[10px] text-blue-200 uppercase font-semibold">Today</div>
                            <div className="text-xs font-extrabold">2:30 PM</div>
                            <div className="text-[9px] bg-blue-600 text-blue-100 mt-1 py-0.5 rounded">Selected</div>
                          </div>
                          <div className="p-2.5 rounded-xl bg-white border border-slate-200 text-slate-700 text-center text-xs">
                            <div className="text-[10px] text-slate-400">Today</div>
                            <div className="font-bold text-slate-800">4:00 PM</div>
                            <div className="text-[9px] text-emerald-600 mt-1 font-semibold">Available</div>
                          </div>
                          <div className="p-2.5 rounded-xl bg-slate-100 text-slate-400 line-through text-center text-xs">
                            <div className="text-[10px]">Today</div>
                            <div className="font-bold">5:30 PM</div>
                            <div className="text-[9px] text-slate-400 mt-1">Booked</div>
                          </div>
                        </div>

                        {/* Dual Lock Card Component */}
                        <div className="mt-4 p-3 bg-white rounded-xl border border-blue-100 shadow-xs flex items-center gap-3">
                          <div className="w-9 h-9 rounded-xl bg-emerald-600 text-white flex items-center justify-center shrink-0">
                            <CalendarCheck className="w-5 h-5" />
                          </div>
                          <div className="text-left text-xs">
                            <span className="font-bold text-blue-950 block">Both Agendas Reserved</span>
                            <span className="text-slate-500 text-[11px]">Locks parent device calendar & clinical doctor schedule.</span>
                          </div>
                        </div>
                      </div>

                      {/* Quick Consult Trigger */}
                      <button
                        onClick={() => startBooking(INITIAL_DOCTORS[0])}
                        className="w-full bg-blue-900 hover:bg-blue-950 text-white font-bold py-3.5 rounded-xl text-xs flex items-center justify-center gap-2 transition shadow-md shadow-blue-950/20"
                      >
                        <Video className="w-4 h-4 text-emerald-400" />
                        Schedule Consultation with Dr. Jenkins
                      </button>
                    </div>
                  </div>

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

            {/* 3-Step Clean Flow Section */}
            <section className="py-16 bg-white border-b border-slate-200">
              <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
                <div className="max-w-2xl mx-auto mb-12">
                  <span className="text-blue-700 font-bold uppercase tracking-wider text-xs bg-blue-50 border border-blue-200 px-3 py-1 rounded-full">
                    Transparent Workflow
                  </span>
                  <h2 className="text-3xl font-extrabold text-blue-950 mt-3">How EtherVets Connects You</h2>
                  <p className="text-slate-600 mt-2 text-sm">
                    High quality veterinary care with instant, clash-free calendar slot confirmation.
                  </p>
                </div>

                <div className="grid md:grid-cols-3 gap-8 text-left">
                  <div className="bg-slate-50/80 p-6 rounded-3xl border border-blue-100 hover:border-blue-300 hover:shadow-lg transition">
                    <div className="w-12 h-12 bg-blue-700 text-white rounded-2xl flex items-center justify-center font-black text-lg mb-4 shadow-md shadow-blue-700/20">
                      1
                    </div>
                    <h3 className="font-bold text-lg text-blue-950 mb-2">Select Your Pet & Doctor</h3>
                    <p className="text-sm text-slate-600 leading-relaxed">
                      Choose which pet needs attention and browse verified specialists in canine behavioral health, feline medicine, avian, and exotic species.
                    </p>
                  </div>

                  <div className="bg-slate-50/80 p-6 rounded-3xl border border-emerald-100 hover:border-emerald-300 hover:shadow-lg transition">
                    <div className="w-12 h-12 bg-emerald-600 text-white rounded-2xl flex items-center justify-center font-black text-lg mb-4 shadow-md shadow-emerald-600/20">
                      2
                    </div>
                    <h3 className="font-bold text-lg text-blue-950 mb-2">Block Dual Calendars</h3>
                    <p className="text-sm text-slate-600 leading-relaxed">
                      Select an active time slot. The system automatically locks the time window on both the veterinary doctor's clinical diary and your personal calendar.
                    </p>
                  </div>

                  <div className="bg-slate-50/80 p-6 rounded-3xl border border-teal-100 hover:border-teal-300 hover:shadow-lg transition">
                    <div className="w-12 h-12 bg-teal-600 text-white rounded-2xl flex items-center justify-center font-black text-lg mb-4 shadow-md shadow-teal-600/20">
                      3
                    </div>
                    <h3 className="font-bold text-lg text-blue-950 mb-2">Live Encrypted Telehealth</h3>
                    <p className="text-sm text-slate-600 leading-relaxed">
                      Join the consultation room directly inside EtherVets with HD video, interactive chat, symptom review, and instant treatment recommendations.
                    </p>
                  </div>
                </div>
              </div>
            </section>

            {/* Species Browsing Categories */}
            <section className="py-14 bg-gradient-to-b from-slate-50 to-white">
              <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-8">
                  <div>
                    <h3 className="text-2xl font-bold text-blue-950">Specialized Care by Animal</h3>
                    <p className="text-sm text-slate-500">Every companion animal deserves expert attention tailored to their biology</p>
                  </div>
                  <button
                    onClick={() => setActiveTab('doctors')}
                    className="text-blue-700 hover:text-blue-900 font-bold text-sm flex items-center gap-1"
                  >
                    View entire medical team <ChevronRight className="w-4 h-4" />
                  </button>
                </div>

                <div className="grid grid-cols-2 sm:grid-cols-5 gap-4">
                  {[
                    { label: 'Dogs', icon: '🐕', count: '140+ Vets' },
                    { label: 'Cats', icon: '🐈', count: '115+ Vets' },
                    { label: 'Birds', icon: '🦜', count: '45+ Vets' },
                    { label: 'Exotics', icon: '🦎', count: '30+ Vets' },
                    { label: 'Small Pets', icon: '🐇', count: '60+ Vets' }
                  ].map((cat) => (
                    <button
                      key={cat.label}
                      onClick={() => {
                        setSelectedSpeciesFilter(cat.label === 'Small Pets' ? 'All' : cat.label);
                        setActiveTab('doctors');
                      }}
                      className="bg-white p-5 rounded-2xl border border-blue-100 text-center hover:border-emerald-500 hover:shadow-md transition group"
                    >
                      <div className="text-4xl mb-2 group-hover:scale-110 transition-transform">{cat.icon}</div>
                      <div className="font-bold text-blue-950 text-base">{cat.label}</div>
                      <div className="text-xs text-emerald-600 font-semibold mt-1">{cat.count}</div>
                    </button>
                  ))}
                </div>
              </div>
            </section>
          </div>
        )}

        {}
        {activeTab === 'doctors' && (
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
            
            {/* Header & Emergency Notice */}
            <div className="mb-8">
              <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
                <div>
                  <h1 className="text-3xl font-extrabold text-blue-950">Verified Veterinary Specialists</h1>
                  <p className="text-slate-600 text-sm mt-1">
                    Book an online consultation. Time slots automatically sync with both your calendar and the clinic.
                  </p>
                </div>

                {/* Emergency banner */}
                <div className="bg-white border border-blue-200 rounded-2xl p-3 shadow-xs flex items-center gap-3">
                  <div className="w-8 h-8 rounded-xl bg-blue-100 text-blue-700 flex items-center justify-center shrink-0">
                    <AlertCircle className="w-4 h-4" />
                  </div>
                  <div className="text-xs text-slate-700">
                    <span className="font-bold text-blue-950">Critical Poison / Hemorrhage?</span> Immediate ER hospital admission advised.
                  </div>
                </div>
              </div>

              {/* Blue, Green & White Filter Controls */}
              <div className="mt-6 bg-white p-4 rounded-2xl shadow-sm border border-blue-100 grid sm:grid-cols-12 gap-3 items-center">
                
                {/* Search Bar */}
                <div className="sm:col-span-5 relative">
                  <Search className="w-4 h-4 text-slate-400 absolute left-3.5 top-1/2 -translate-y-1/2" />
                  <input
                    type="text"
                    placeholder="Search doctor name, symptoms, or specialty..."
                    value={searchQuery}
                    onChange={(e) => setSearchQuery(e.target.value)}
                    className="w-full pl-10 pr-4 py-2.5 rounded-xl text-sm bg-slate-50 border border-slate-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:bg-white"
                  />
                </div>

                {/* Pet Species Selectors */}
                <div className="sm:col-span-4 flex items-center gap-1.5 overflow-x-auto pb-1 sm:pb-0">
                  {['All', 'Dogs', 'Cats', 'Birds', 'Exotics'].map((species) => (
                    <button
                      key={species}
                      onClick={() => setSelectedSpeciesFilter(species)}
                      className={`px-3 py-2 rounded-xl text-xs font-bold whitespace-nowrap transition ${
                        selectedSpeciesFilter === species
                          ? 'bg-blue-700 text-white shadow-xs'
                          : 'bg-slate-100 text-slate-600 hover:bg-slate-200'
                      }`}
                    >
                      {species}
                    </button>
                  ))}
                </div>

                {/* Specialty Dropdown */}
                <div className="sm:col-span-3">
                  <select
                    value={specialtyFilter}
                    onChange={(e) => setSpecialtyFilter(e.target.value)}
                    className="w-full py-2.5 px-3 rounded-xl text-sm bg-slate-50 border border-slate-200 text-slate-700 focus:outline-none focus:ring-2 focus:ring-blue-500 font-medium"
                  >
                    <option value="All">All Disciplines</option>
                    <option value="Behavior">Behavior & Training</option>
                    <option value="Nutrition">Nutrition & Diet</option>
                    <option value="Preventive Care">Preventive Care</option>
                    <option value="Emergency SOS">Emergency SOS</option>
                    <option value="Skin & Coat">Skin & Coat</option>
                  </select>
                </div>
              </div>
            </div>

            {/* Doctors Grid with Blue & Green Cards */}
            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
              {filteredDoctors.map((doctor) => (
                <div
                  key={doctor.id}
                  className="bg-white rounded-3xl border border-blue-100 overflow-hidden shadow-xs hover:shadow-xl transition-all duration-300 flex flex-col justify-between group"
                >
                  <div className="p-6">
                    {/* Top Doctor Row */}
                    <div className="flex items-start gap-4">
                      <div className="relative shrink-0">
                        <img
                          src={doctor.avatar}
                          alt={doctor.name}
                          className="w-16 h-16 rounded-2xl object-cover ring-2 ring-emerald-500/20 group-hover:scale-105 transition-transform"
                        />
                        <span className="absolute -bottom-1 -right-1 bg-emerald-600 text-white rounded-full p-0.5" title="Verified License">
                          <ShieldCheck className="w-4 h-4" />
                        </span>
                      </div>

                      <div className="flex-1 min-w-0">
                        <h3 className="font-bold text-blue-950 text-base truncate">{doctor.name}</h3>
                        <p className="text-xs text-blue-700 font-semibold truncate">{doctor.title}</p>
                        
                        <div className="flex items-center gap-2 mt-1.5 text-xs text-slate-500">
                          <span className="flex items-center gap-1 font-bold text-amber-500">
                            <Star className="w-3.5 h-3.5 fill-amber-400 text-amber-400" />
                            {doctor.rating}
                          </span>
                          <span>•</span>
                          <span>{doctor.reviewsCount} reviews</span>
                          <span>•</span>
                          <span>{doctor.experience}</span>
                        </div>
                      </div>
                    </div>

                    {/* Bio */}
                    <p className="mt-4 text-xs text-slate-600 line-clamp-2 leading-relaxed">
                      {doctor.bio}
                    </p>

                    {/* Specialty Badges */}
                    <div className="mt-3 flex flex-wrap gap-1.5">
                      {doctor.specialties.map((spec) => (
                        <span
                          key={spec}
                          className="px-2.5 py-0.5 rounded-lg bg-blue-50 text-blue-800 text-[11px] font-semibold border border-blue-100"
                        >
                          {spec}
                        </span>
                      ))}
                    </div>

                    {/* Slot Availability preview */}
                    <div className="mt-4 pt-4 border-t border-slate-100">
                      <div className="flex items-center justify-between text-xs mb-2">
                        <span className="text-slate-500 flex items-center gap-1 font-medium">
                          <Clock className="w-3.5 h-3.5 text-blue-600" /> Next Opening:
                        </span>
                        <span className="font-bold text-emerald-700 bg-emerald-50 px-2 py-0.5 rounded-md border border-emerald-200">
                          {doctor.nextAvailable}
                        </span>
                      </div>

                      <div className="flex gap-1.5 overflow-x-auto pb-1">
                        {doctor.availableSlots.slice(0, 4).map((slot) => (
                          <span
                            key={slot.id}
                            className={`text-[10px] font-bold px-2 py-1 rounded-md shrink-0 ${
                              slot.status === 'available'
                                ? 'bg-emerald-50 text-emerald-800 border border-emerald-200'
                                : 'bg-slate-100 text-slate-400 line-through'
                            }`}
                          >
                            {slot.time}
                          </span>
                        ))}
                      </div>
                    </div>
                  </div>

                  {/* Card Bottom CTA */}
                  <div className="bg-slate-50 px-6 py-4 border-t border-blue-50 flex items-center justify-between">
                    <div>
                      <div className="text-[10px] text-slate-500 uppercase font-bold tracking-wider">Fee / Session</div>
                      <div className="text-lg font-black text-blue-950">
                        ${doctor.fee}
                        <span className="text-xs text-slate-500 font-normal"> / 30m</span>
                      </div>
                    </div>

                    <button
                      onClick={() => startBooking(doctor)}
                      className="bg-emerald-600 hover:bg-emerald-700 text-white font-bold text-xs px-4 py-2.5 rounded-xl shadow-md shadow-emerald-600/20 transition flex items-center gap-1.5"
                    >
                      <CalendarIcon className="w-3.5 h-3.5" />
                      Consult Now
                    </button>
                  </div>
                </div>
              ))}
            </div>

            {filteredDoctors.length === 0 && (
              <div className="text-center py-16 bg-white rounded-3xl border border-blue-100 p-8 shadow-xs">
                <PawPrint className="w-12 h-12 text-blue-200 mx-auto mb-3" />
                <h4 className="text-lg font-bold text-blue-950">No veterinary doctors found</h4>
                <p className="text-sm text-slate-500 mt-1">Try relaxing your search terms or filter selection.</p>
                <button
                  onClick={() => {
                    setSearchQuery('');
                    setSelectedSpeciesFilter('All');
                    setSpecialtyFilter('All');
                  }}
                  className="mt-4 text-xs font-bold text-blue-700 bg-blue-50 px-4 py-2 rounded-xl border border-blue-200"
                >
                  Reset all filters
                </button>
              </div>
            )}
          </div>
        )}

        {}
        {activeTab === 'bookings' && (
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
            <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-8">
              <div>
                <h1 className="text-3xl font-extrabold text-blue-950">My Consultation Schedule</h1>
                <p className="text-slate-600 text-sm mt-1">
                  Active time blocks registered across both your personal agenda and the veterinary clinic.
                </p>
              </div>

              <button
                onClick={() => setActiveTab('doctors')}
                className="bg-blue-700 hover:bg-blue-800 text-white text-xs font-bold px-4 py-2.5 rounded-xl transition flex items-center gap-1.5 shadow-md shadow-blue-700/20"
              >
                <Plus className="w-4 h-4" /> Book Another Consultation
              </button>
            </div>

            {bookings.length === 0 ? (
              <div className="bg-white rounded-3xl border border-blue-100 p-12 text-center max-w-lg mx-auto shadow-sm">
                <CalendarIcon className="w-14 h-14 text-blue-300 mx-auto mb-4" />
                <h3 className="text-lg font-bold text-blue-950">No consultations scheduled yet</h3>
                <p className="text-sm text-slate-500 mt-2">
                  When you book a doctor, both the clinical calendar and your personal schedule will lock simultaneously.
                </p>
                <button
                  onClick={() => setActiveTab('doctors')}
                  className="mt-6 bg-emerald-600 hover:bg-emerald-700 text-white font-bold px-5 py-2.5 rounded-xl text-sm transition shadow-md shadow-emerald-600/20"
                >
                  Find a Doctor
                </button>
              </div>
            ) : (
              <div className="grid lg:grid-cols-12 gap-8">
                
                {/* Bookings List */}
                <div className="lg:col-span-8 space-y-4">
                  {bookings.map((booking) => (
                    <div
                      key={booking.id}
                      className="bg-white rounded-3xl border border-blue-100 p-6 shadow-xs hover:shadow-md transition flex flex-col md:flex-row items-start md:items-center justify-between gap-6"
                    >
                      <div className="flex items-start gap-4">
                        <img
                          src={booking.doctor.avatar}
                          alt={booking.doctor.name}
                          className="w-14 h-14 rounded-2xl object-cover ring-2 ring-emerald-500/20"
                        />
                        <div>
                          <div className="flex items-center gap-2">
                            <span className="text-xs font-bold px-2.5 py-0.5 rounded-full bg-emerald-50 text-emerald-800 border border-emerald-200">
                              {booking.status}
                            </span>
                            <span className="text-xs text-slate-400 font-mono">ID: {booking.id}</span>
                          </div>

                          <h4 className="text-base font-bold text-blue-950 mt-1">{booking.doctor.name}</h4>
                          <div className="text-xs text-slate-500 flex items-center gap-1 mt-0.5">
                            <PawPrint className="w-3.5 h-3.5 text-emerald-600" /> Patient: <span className="font-bold text-slate-800">{booking.pet.name} ({booking.pet.breed})</span>
                          </div>

                          <div className="mt-3 flex flex-wrap items-center gap-4 text-xs text-slate-600">
                            <div className="flex items-center gap-1.5 font-bold text-blue-900">
                              <CalendarIcon className="w-3.5 h-3.5 text-blue-600" />
                              {booking.date}
                            </div>
                            <div className="flex items-center gap-1.5 font-bold text-emerald-700">
                              <Clock className="w-3.5 h-3.5 text-emerald-600" />
                              {booking.time} ({booking.duration})
                            </div>
                          </div>

                          <p className="text-xs text-slate-600 mt-2 bg-slate-50 p-2.5 rounded-xl border border-slate-100">
                            <strong>Reason:</strong> {booking.concern}
                          </p>
                        </div>
                      </div>

                      {/* Right Action Block */}
                      <div className="flex flex-row md:flex-col items-center gap-2 w-full md:w-auto shrink-0">
                        <button
                          onClick={() => launchConsultationRoom(booking)}
                          className="flex-1 md:flex-none w-full bg-blue-700 hover:bg-blue-800 text-white text-xs font-bold px-4 py-2.5 rounded-xl shadow-md shadow-blue-700/20 transition flex items-center justify-center gap-1.5"
                        >
                          <Video className="w-4 h-4 text-emerald-300" />
                          Enter Telehealth Room
                        </button>

                        <button
                          onClick={() => showToast("Calendar sync file (.ics) downloaded")}
                          className="flex-1 md:flex-none w-full bg-white hover:bg-slate-50 border border-blue-200 text-blue-900 text-xs font-bold px-4 py-2.5 rounded-xl transition flex items-center justify-center gap-1.5"
                        >
                          <Download className="w-3.5 h-3.5 text-blue-600" />
                          Add to Google / iCal
                        </button>
                      </div>
                    </div>
                  ))}
                </div>

                {/* Right Calendar Sync Status Card */}
                <div className="lg:col-span-4">
                  <div className="bg-white rounded-3xl border border-blue-100 p-6 shadow-xs">
                    <div className="flex items-center justify-between mb-4">
                      <h3 className="font-bold text-blue-950 text-base flex items-center gap-2">
                        <CalendarCheck className="w-4 h-4 text-emerald-600" />
                        Dual-Calendar Synchronizer
                      </h3>
                    </div>

                    <div className="space-y-3 text-xs text-slate-600">
                      <div className="p-3 bg-emerald-50/80 border border-emerald-200 rounded-2xl">
                        <span className="font-bold text-emerald-950 block mb-1">Active Lock Protection</span>
                        <div className="flex items-center gap-2 text-emerald-900 font-medium">
                          <CheckCircle2 className="w-4 h-4 text-emerald-600 shrink-0" />
                          <span>Clinic Agenda: Locked (No Double Booking)</span>
                        </div>
                        <div className="flex items-center gap-2 text-emerald-900 font-medium mt-1">
                          <CheckCircle2 className="w-4 h-4 text-emerald-600 shrink-0" />
                          <span>Pet Parent Agenda: Synced & Alerted</span>
                        </div>
                      </div>

                      <div className="border-t border-slate-100 pt-3">
                        <div className="font-bold text-blue-950 mb-2">Registered Household Pets</div>
                        <div className="space-y-2">
                          {INITIAL_PETS.map(pet => (
                            <div key={pet.id} className="flex items-center justify-between p-2.5 rounded-xl bg-slate-50 border border-slate-100">
                              <div className="flex items-center gap-2">
                                <span className="text-xl">{pet.icon}</span>
                                <div>
                                  <div className="font-bold text-slate-900">{pet.name}</div>
                                  <div className="text-[10px] text-slate-400">{pet.breed} • {pet.age}</div>
                                </div>
                              </div>
                              <span className="text-[10px] bg-blue-50 text-blue-800 border border-blue-200 px-2 py-0.5 rounded-md font-bold">
                                {pet.species}
                              </span>
                            </div>
                          ))}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

              </div>
            )}
          </div>
        )}

        {}
        {activeTab === 'telehealth-room' && activeCallSession && (
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
            <div className="mb-4 flex items-center justify-between">
              <div className="flex items-center gap-2">
                <button
                  onClick={() => setActiveTab('bookings')}
                  className="p-2 rounded-xl bg-white border border-blue-200 hover:bg-slate-50 text-blue-900"
                >
                  <ChevronLeft className="w-5 h-5" />
                </button>
                <div>
                  <h2 className="text-xl font-black text-blue-950 flex items-center gap-2">
                    Consultation Room #{activeCallSession.id}
                    <span className="w-2.5 h-2.5 rounded-full bg-emerald-500 animate-pulse"></span>
                  </h2>
                  <p className="text-xs text-slate-500">
                    Active stream with {activeCallSession.doctor.name} for {activeCallSession.pet.name}
                  </p>
                </div>
              </div>

              <div className="flex items-center gap-2">
                <div className="bg-blue-950 text-emerald-400 px-3 py-1.5 rounded-xl font-mono text-xs font-bold flex items-center gap-1.5">
                  <Clock className="w-3.5 h-3.5" />
                  <span>25:40 remaining</span>
                </div>
                <button
                  onClick={() => {
                    setActiveTab('bookings');
                    showToast('Consultation session concluded safely.');
                  }}
                  className="bg-rose-600 hover:bg-rose-700 text-white text-xs font-bold px-3.5 py-2 rounded-xl"
                >
                  End Call
                </button>
              </div>
            </div>

            <div className="grid lg:grid-cols-12 gap-6 h-[640px]">
              
              {/* Doctor Video Canvas */}
              <div className="lg:col-span-8 bg-blue-950 rounded-3xl overflow-hidden relative flex flex-col justify-between p-6 shadow-2xl border border-blue-900">
                
                {/* Doctor Feed */}
                <div className="absolute inset-0 flex items-center justify-center">
                  <img
                    src={activeCallSession.doctor.avatar}
                    alt="Vet in session"
                    className="w-full h-full object-cover opacity-85 filter brightness-95"
                  />
                  <div className="absolute inset-0 bg-gradient-to-t from-blue-950/90 via-transparent to-blue-950/40"></div>
                </div>

                {/* Top overlay */}
                <div className="relative z-10 flex items-center justify-between">
                  <div className="bg-blue-950/70 backdrop-blur-md px-3.5 py-1.5 rounded-xl text-white text-xs font-bold flex items-center gap-2 border border-white/10">
                    <ShieldCheck className="w-4 h-4 text-emerald-400" />
                    <span>{activeCallSession.doctor.name}</span>
                    <span className="bg-emerald-600 px-1.5 py-0.5 text-[10px] rounded">Verified MD</span>
                  </div>

                  <div className="bg-blue-950/70 backdrop-blur-md px-3 py-1 rounded-lg text-emerald-400 text-xs font-mono border border-white/10">
                    Encrypted • 1080p
                  </div>
                </div>

                {/* Pet Parent PiP */}
                <div className="relative z-10 self-end w-44 h-32 rounded-2xl bg-slate-800 border-2 border-emerald-400 shadow-2xl overflow-hidden">
                  {!callVideoOff ? (
                    <div className="w-full h-full bg-slate-700 flex items-center justify-center relative">
                      <div className="text-3xl">{activeCallSession.pet.icon}</div>
                      <div className="absolute bottom-1 left-2 text-[10px] text-white/90 font-bold bg-blue-950/80 px-1.5 py-0.5 rounded">
                        You & {activeCallSession.pet.name}
                      </div>
                    </div>
                  ) : (
                    <div className="w-full h-full bg-slate-900 flex items-center justify-center text-slate-400 text-xs font-semibold">
                      Camera Disabled
                    </div>
                  )}
                </div>

                {/* Bottom Control Bar */}
                <div className="relative z-10 flex items-center justify-center gap-3 bg-blue-950/80 backdrop-blur-md p-3 rounded-2xl max-w-fit mx-auto border border-white/15">
                  <button
                    onClick={() => setCallMuted(!callMuted)}
                    className={`p-3 rounded-xl transition ${
                      callMuted ? 'bg-rose-600 text-white' : 'bg-white/15 text-white hover:bg-white/25'
                    }`}
                  >
                    {callMuted ? <MicOff className="w-5 h-5" /> : <Mic className="w-5 h-5" />}
                  </button>

                  <button
                    onClick={() => setCallVideoOff(!callVideoOff)}
                    className={`p-3 rounded-xl transition ${
                      callVideoOff ? 'bg-rose-600 text-white' : 'bg-white/15 text-white hover:bg-white/25'
                    }`}
                  >
                    {callVideoOff ? <VideoOff className="w-5 h-5" /> : <Video className="w-5 h-5" />}
                  </button>

                  <button
                    onClick={() => showToast("Clinical symptom screenshot saved to record")}
                    className="px-4 py-3 rounded-xl bg-emerald-600 hover:bg-emerald-500 text-white text-xs font-bold transition flex items-center gap-1.5"
                  >
                    <FileText className="w-4 h-4" /> Share Photo
                  </button>
                </div>
              </div>

              {/* Chat & Clinical Notes */}
              <div className="lg:col-span-4 bg-white rounded-3xl border border-blue-100 shadow-xs flex flex-col overflow-hidden">
                
                {/* Header */}
                <div className="p-4 border-b border-blue-50 bg-slate-50 flex items-center justify-between">
                  <div className="flex items-center gap-2">
                    <MessageSquare className="w-4 h-4 text-blue-700" />
                    <span className="font-bold text-blue-950 text-sm">Consultation Chat & Notes</span>
                  </div>
                  <span className="text-[11px] text-emerald-700 font-bold bg-emerald-50 px-2 py-0.5 rounded-full">
                    Active
                  </span>
                </div>

                {/* Messages */}
                <div className="flex-1 p-4 overflow-y-auto space-y-3">
                  {chatMessages.map((msg, idx) => (
                    <div
                      key={idx}
                      className={`flex flex-col ${msg.sender === 'parent' ? 'items-end' : 'items-start'}`}
                    >
                      <div
                        className={`max-w-[85%] p-3 rounded-2xl text-xs leading-relaxed font-medium ${
                          msg.sender === 'parent'
                            ? 'bg-blue-700 text-white rounded-br-none'
                            : 'bg-slate-100 text-slate-800 rounded-bl-none'
                        }`}
                      >
                        {msg.text}
                      </div>
                      <span className="text-[10px] text-slate-400 mt-1 px-1">{msg.time}</span>
                    </div>
                  ))}
                </div>

                {/* Message Input */}
                <form onSubmit={handleSendMessage} className="p-3 border-t border-slate-100 flex gap-2 bg-white">
                  <input
                    type="text"
                    placeholder="Describe symptoms or reply to Dr..."
                    value={inputMsg}
                    onChange={(e) => setInputMsg(e.target.value)}
                    className="flex-1 px-3 py-2 text-xs bg-slate-50 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 font-medium"
                  />
                  <button
                    type="submit"
                    className="bg-blue-700 hover:bg-blue-800 text-white text-xs font-bold px-4 py-2 rounded-xl transition"
                  >
                    Send
                  </button>
                </form>
              </div>

            </div>
          </div>
        )}
      </main>

      {}
      {isBookingOpen && selectedDoctor && (
        <div className="fixed inset-0 z-50 overflow-y-auto bg-blue-950/60 backdrop-blur-xs flex items-center justify-center p-4">
          <div className="bg-white rounded-3xl max-w-2xl w-full overflow-hidden shadow-2xl border border-blue-100">
            
            {/* Modal Blue & Green Header */}
            <div className="bg-gradient-to-r from-blue-900 via-blue-800 to-emerald-700 text-white p-6 flex items-center justify-between">
              <div className="flex items-center gap-3">
                <img
                  src={selectedDoctor.avatar}
                  alt={selectedDoctor.name}
                  className="w-12 h-12 rounded-full object-cover border-2 border-emerald-400"
                />
                <div>
                  <h3 className="font-black text-lg leading-tight">{selectedDoctor.name}</h3>
                  <p className="text-xs text-blue-100">{selectedDoctor.title} • ${selectedDoctor.fee} per 30m</p>
                </div>
              </div>

              <button
                onClick={() => setIsBookingOpen(false)}
                className="w-8 h-8 rounded-full bg-white/15 hover:bg-white/25 flex items-center justify-center text-white transition"
              >
                <X className="w-5 h-5" />
              </button>
            </div>

            {/* Stepper Header */}
            <div className="bg-slate-50 px-6 py-3 border-b border-slate-200 flex items-center justify-between text-xs font-semibold text-slate-500">
              <div className={`flex items-center gap-1.5 ${bookingStep >= 1 ? 'text-blue-900 font-bold' : ''}`}>
                <span className="w-5 h-5 rounded-full bg-blue-700 text-white text-[11px] flex items-center justify-center">1</span>
                <span>Pet Details</span>
              </div>
              <ChevronRight className="w-4 h-4 text-slate-300" />
              <div className={`flex items-center gap-1.5 ${bookingStep >= 2 ? 'text-blue-900 font-bold' : ''}`}>
                <span className="w-5 h-5 rounded-full bg-blue-700 text-white text-[11px] flex items-center justify-center">2</span>
                <span>Slot Picker</span>
              </div>
              <ChevronRight className="w-4 h-4 text-slate-300" />
              <div className={`flex items-center gap-1.5 ${bookingStep >= 3 ? 'text-emerald-700 font-bold' : ''}`}>
                <span className="w-5 h-5 rounded-full bg-emerald-600 text-white text-[11px] flex items-center justify-center">3</span>
                <span>Calendar Lock</span>
              </div>
            </div>

            {/* Step 1: Pet Details */}
            {bookingStep === 1 && (
              <div className="p-6 space-y-6">
                <div>
                  <label className="block text-xs font-extrabold uppercase tracking-wider text-blue-950 mb-2">
                    Select Household Pet
                  </label>
                  <div className="grid grid-cols-3 gap-3">
                    {INITIAL_PETS.map((pet) => (
                      <div
                        key={pet.id}
                        onClick={() => setSelectedPet(pet)}
                        className={`p-3.5 rounded-2xl border-2 cursor-pointer transition text-center ${
                          selectedPet.id === pet.id
                            ? 'border-blue-700 bg-blue-50/70 shadow-xs'
                            : 'border-slate-200 hover:border-slate-300 bg-white'
                        }`}
                      >
                        <span className="text-2xl block mb-1">{pet.icon}</span>
                        <div className="font-bold text-blue-950 text-sm">{pet.name}</div>
                        <div className="text-[11px] text-slate-500 font-medium">{pet.breed}</div>
                      </div>
                    ))}
                  </div>
                </div>

                {/* Consultation Mode */}
                <div>
                  <label className="block text-xs font-extrabold uppercase tracking-wider text-blue-950 mb-2">
                    Consultation Method
                  </label>
                  <div className="grid grid-cols-2 gap-3">
                    <button
                      type="button"
                      onClick={() => setConsultationType('video')}
                      className={`p-3.5 rounded-2xl border-2 flex items-center gap-3 text-left transition ${
                        consultationType === 'video'
                          ? 'border-emerald-600 bg-emerald-50 text-emerald-950 font-bold shadow-xs'
                          : 'border-slate-200 text-slate-600'
                      }`}
                    >
                      <Video className="w-5 h-5 text-emerald-600 shrink-0" />
                      <div>
                        <div className="text-xs font-bold">HD Video Room</div>
                        <div className="text-[11px] text-slate-500">Visual exam & symptom review</div>
                      </div>
                    </button>

                    <button
                      type="button"
                      onClick={() => setConsultationType('audio')}
                      className={`p-3.5 rounded-2xl border-2 flex items-center gap-3 text-left transition ${
                        consultationType === 'audio'
                          ? 'border-blue-700 bg-blue-50 text-blue-950 font-bold shadow-xs'
                          : 'border-slate-200 text-slate-600'
                      }`}
                    >
                      <PhoneCall className="w-5 h-5 text-blue-700 shrink-0" />
                      <div>
                        <div className="text-xs font-bold">Voice Call Consultation</div>
                        <div className="text-[11px] text-slate-500">Direct phone tele-consult</div>
                      </div>
                    </button>
                  </div>
                </div>

                {/* Symptoms Description */}
                <div>
                  <label className="block text-xs font-extrabold uppercase tracking-wider text-blue-950 mb-1">
                    Describe Chief Symptoms or Changes
                  </label>
                  <textarea
                    rows={3}
                    placeholder="E.g. Lack of energy, altered appetite, itching paws, limping..."
                    value={petConcern}
                    onChange={(e) => setPetConcern(e.target.value)}
                    className="w-full p-3 text-xs bg-slate-50 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-600 focus:bg-white font-medium"
                  ></textarea>
                </div>

                <div className="flex justify-end pt-2">
                  <button
                    onClick={() => setBookingStep(2)}
                    className="bg-blue-700 hover:bg-blue-800 text-white text-xs font-bold px-6 py-3 rounded-xl transition flex items-center gap-2 shadow-md shadow-blue-700/20"
                  >
                    <span>Proceed to Slot Selector</span>
                    <ArrowRight className="w-4 h-4" />
                  </button>
                </div>
              </div>
            )}

            {/* Step 2: Date & Slot Pick with Calendar Blocking Preview */}
            {bookingStep === 2 && (
              <div className="p-6 space-y-6">
                <div>
                  <div className="flex items-center justify-between mb-2">
                    <label className="text-xs font-extrabold uppercase tracking-wider text-blue-950">
                      Choose Consultation Date
                    </label>
                    <span className="text-xs text-blue-700 font-bold bg-blue-50 px-2 py-0.5 rounded-md">
                      Duration: 30 Minutes
                    </span>
                  </div>

                  <input
                    type="date"
                    value={bookingDate}
                    onChange={(e) => setBookingDate(e.target.value)}
                    className="w-full p-3 rounded-xl border border-slate-200 bg-slate-50 text-xs font-bold text-blue-950 focus:ring-2 focus:ring-blue-600 focus:outline-none"
                  />
                </div>

                {/* Real-time Slots */}
                <div>
                  <div className="flex items-center justify-between mb-2">
                    <label className="text-xs font-extrabold uppercase tracking-wider text-blue-950">
                      Select Clinic Time Slot
                    </label>
                    <div className="flex items-center gap-3 text-[11px] font-semibold">
                      <span className="flex items-center gap-1 text-emerald-700">
                        <span className="w-2.5 h-2.5 rounded-full bg-emerald-500"></span> Available
                      </span>
                      <span className="flex items-center gap-1 text-slate-400">
                        <span className="w-2.5 h-2.5 rounded-full bg-slate-300"></span> Locked
                      </span>
                    </div>
                  </div>

                  <div className="grid grid-cols-3 sm:grid-cols-4 gap-2.5">
                    {selectedDoctor.availableSlots.map((slot) => {
                      const isSelected = selectedSlot === slot.time;
                      const isBooked = slot.status === 'booked';

                      return (
                        <button
                          key={slot.id}
                          type="button"
                          disabled={isBooked}
                          onClick={() => setSelectedSlot(slot.time)}
                          className={`p-3 rounded-xl text-xs font-bold flex flex-col items-center justify-center transition border ${
                            isBooked
                              ? 'bg-slate-100 text-slate-400 border-slate-200 cursor-not-allowed line-through'
                              : isSelected
                              ? 'bg-emerald-600 text-white border-emerald-600 shadow-md shadow-emerald-600/25'
                              : 'bg-white text-blue-950 border-slate-200 hover:border-blue-500'
                          }`}
                        >
                          <span>{slot.time}</span>
                          <span className="text-[10px] opacity-80 font-normal">
                            {isBooked ? 'Reserved' : 'Available'}
                          </span>
                        </button>
                      );
                    })}
                  </div>
                </div>

                {/* Calendar Blocking Visual Badge */}
                <div className="p-4 bg-gradient-to-r from-blue-50 to-emerald-50 border border-blue-200 rounded-2xl flex items-start gap-3">
                  <div className="w-8 h-8 rounded-xl bg-blue-700 text-white flex items-center justify-center shrink-0">
                    <Lock className="w-4 h-4" />
                  </div>
                  <div className="text-xs text-blue-950">
                    <div className="font-extrabold">Instant Dual-Calendar Lock Guarantee</div>
                    <div className="text-slate-600 text-[11px] mt-0.5">
                      Confirming will immediately reserve <strong>{selectedSlot}</strong> on {selectedDoctor.name}'s schedule and simultaneously create an event block in your calendar.
                    </div>
                  </div>
                </div>

                <div className="flex items-center justify-between pt-2">
                  <button
                    onClick={() => setBookingStep(1)}
                    className="text-slate-600 hover:text-blue-950 text-xs font-bold px-4 py-2.5"
                  >
                    Back to Pet Info
                  </button>

                  <button
                    onClick={handleConfirmAndSyncCalendar}
                    className="bg-emerald-600 hover:bg-emerald-700 text-white text-xs font-bold px-6 py-3 rounded-xl transition shadow-md shadow-emerald-600/20 flex items-center gap-2"
                  >
                    <span>Lock Calendar & Confirm</span>
                    <ArrowRight className="w-4 h-4" />
                  </button>
                </div>
              </div>
            )}

            {/* Step 3: Dual Calendar Syncing Engine Simulation */}
            {bookingStep === 3 && (
              <div className="p-10 text-center space-y-6">
                <div className="w-16 h-16 rounded-2xl bg-blue-50 text-blue-700 flex items-center justify-center mx-auto border border-blue-200 animate-spin">
                  <Activity className="w-8 h-8" />
                </div>

                <div>
                  <h4 className="text-xl font-extrabold text-blue-950">Locking Dual Calendars...</h4>
                  <p className="text-xs text-slate-500 mt-1">
                    Simultaneously reserving the veterinary clinic and pet parent schedules.
                  </p>
                </div>

                {/* Progress bar */}
                <div className="w-full bg-slate-100 rounded-full h-3 overflow-hidden">
                  <div
                    className="bg-gradient-to-r from-blue-600 to-emerald-500 h-full transition-all duration-300 rounded-full"
                    style={{ width: `${syncProgress}%` }}
                  ></div>
                </div>

                <div className="grid grid-cols-2 gap-4 text-xs text-left max-w-md mx-auto">
                  <div className="p-3 bg-blue-50 rounded-2xl border border-blue-200">
                    <div className="font-bold text-blue-950">1. Doctor's Calendar</div>
                    <div className="text-blue-700 font-bold mt-1 flex items-center gap-1 text-[11px]">
                      <CheckCircle2 className="w-3.5 h-3.5" /> Slot Locked ({selectedSlot})
                    </div>
                  </div>

                  <div className="p-3 bg-emerald-50 rounded-2xl border border-emerald-200">
                    <div className="font-bold text-emerald-950">2. Pet Parent Calendar</div>
                    <div className="text-emerald-700 font-bold mt-1 flex items-center gap-1 text-[11px]">
                      <CheckCircle2 className="w-3.5 h-3.5" /> Event Blocked ({selectedPet.name})
                    </div>
                  </div>
                </div>
              </div>
            )}

            {/* Step 4: Booking Confirmation with Receipt */}
            {bookingStep === 4 && (
              <div className="p-8 text-center space-y-6">
                <div className="w-16 h-16 rounded-2xl bg-emerald-50 text-emerald-600 flex items-center justify-center mx-auto border border-emerald-200">
                  <CheckCircle2 className="w-10 h-10" />
                </div>

                <div>
                  <span className="text-emerald-600 font-extrabold uppercase tracking-wider text-xs bg-emerald-50 px-3 py-1 rounded-full border border-emerald-200">
                    Time Block Confirmed
                  </span>
                  <h3 className="text-2xl font-black text-blue-950 mt-2">Both Calendars Successfully Synced!</h3>
                  <p className="text-xs text-slate-500 mt-1">
                    Your appointment with {selectedDoctor.name} has been locked into both agendas.
                  </p>
                </div>

                {/* Receipt */}
                <div className="bg-slate-50 p-4 rounded-2xl border border-blue-100 text-left text-xs space-y-2 max-w-md mx-auto">
                  <div className="flex justify-between pb-2 border-b border-slate-200">
                    <span className="text-slate-500">Patient:</span>
                    <span className="font-bold text-blue-950">{selectedPet.name} ({selectedPet.species})</span>
                  </div>
                  <div className="flex justify-between pb-2 border-b border-slate-200">
                    <span className="text-slate-500">Scheduled Time Block:</span>
                    <span className="font-bold text-emerald-700">{bookingDate} at {selectedSlot}</span>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-slate-500">Consulting Doctor:</span>
                    <span className="font-bold text-blue-950">{selectedDoctor.name}</span>
                  </div>
                </div>

                {/* Next actions */}
                <div className="flex flex-col sm:flex-row items-center justify-center gap-3 pt-2">
                  <button
                    onClick={() => {
                      setIsBookingOpen(false);
                      setActiveTab('bookings');
                    }}
                    className="w-full sm:w-auto bg-blue-900 hover:bg-blue-950 text-white font-bold text-xs px-6 py-3 rounded-xl transition"
                  >
                    View My Consultations
                  </button>

                  <button
                    onClick={() => {
                      const currentBooking = bookings[0];
                      if (currentBooking) {
                        launchConsultationRoom(currentBooking);
                      }
                    }}
                    className="w-full sm:w-auto bg-emerald-600 hover:bg-emerald-700 text-white font-bold text-xs px-6 py-3 rounded-xl transition flex items-center justify-center gap-2 shadow-lg shadow-emerald-600/20"
                  >
                    <Video className="w-4 h-4" />
                    Enter Telehealth Room
                  </button>
                </div>
              </div>
            )}

          </div>
        </div>
      )}

      {}
      <footer className="bg-white border-t border-blue-100 py-12 mt-auto">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
            <div className="space-y-3">
              <div className="flex items-center gap-2">
                <div className="w-8 h-8 rounded-xl bg-blue-700 flex items-center justify-center text-white font-bold">
                  <PawPrint className="w-5 h-5" />
                </div>
                <span className="font-black text-xl text-blue-950">EtherVets</span>
              </div>
              <p className="text-xs text-slate-500 leading-relaxed">
                Licensed veterinary telehealth linking dedicated pet owners to verified specialists with simultaneous dual-calendar slot booking.
              </p>
            </div>

            <div>
              <h5 className="font-bold text-xs uppercase tracking-wider text-blue-950 mb-3">Navigation</h5>
              <ul className="space-y-2 text-xs text-slate-600 font-medium">
                <li><button onClick={() => setActiveTab('home')} className="hover:text-blue-700">Home</button></li>
                <li><button onClick={() => setActiveTab('doctors')} className="hover:text-blue-700">Find Veterinarians</button></li>
                <li><button onClick={() => setActiveTab('bookings')} className="hover:text-blue-700">My Consultations</button></li>
                <li><button onClick={() => { setActiveTab('doctors'); setSelectedSpeciesFilter('Dogs'); }} className="hover:text-blue-700">Canine Health</button></li>
              </ul>
            </div>

            <div>
              <h5 className="font-bold text-xs uppercase tracking-wider text-blue-950 mb-3">Specialties</h5>
              <ul className="space-y-2 text-xs text-slate-600 font-medium">
                <li>Canine Behavior & Training</li>
                <li>Feline Internal Medicine</li>
                <li>Avian & Exotic Wildcare</li>
                <li>Veterinary Dermatology</li>
              </ul>
            </div>

            <div>
              <h5 className="font-bold text-xs uppercase tracking-wider text-blue-950 mb-3">Emergency Guidance</h5>
              <p className="text-xs text-slate-500 leading-relaxed">
                EtherVets provides non-surgical tele-consultations, prescription advice, and behavioral diagnostics. For immediate life-threatening events, transport your animal companion to the nearest emergency hospital.
              </p>
            </div>
          </div>

          <div className="mt-8 pt-6 border-t border-slate-100 flex flex-col sm:flex-row items-center justify-between text-xs text-slate-400">
            <div>© 2026 EtherVets Telehealth Inc. All rights reserved.</div>
            <div className="flex gap-4 mt-2 sm:mt-0 font-medium">
              <span className="hover:text-blue-700 cursor-pointer">Privacy Policy</span>
              <span className="hover:text-blue-700 cursor-pointer">Terms of Telehealth</span>
              <span className="hover:text-blue-700 cursor-pointer">Clinical Standards</span>
            </div>
          </div>
        </div>
      </footer>

    </div>
  );
}