'use client';
import React, { useState } from 'react';
import { HeartPulse, Droplet, AlertCircle, Phone, Lock, UserPlus, Tag, Camera, CalendarDays, Clock, LogIn, ShieldAlert, Building2, X, Map, MessageSquare, ThumbsUp, ShieldCheck, Stethoscope, Briefcase, FileText, Info, GraduationCap, Menu, Award, TrendingUp, Search, Mic, Loader2, MicOff, Activity, SlidersHorizontal, RotateCcw, ChevronRight, Calendar, MapPin, BadgeCheck, Star, Grid } from 'lucide-react';

// =====================================================================
// Interfaces
// =====================================================================
interface Review { user: string; rating: number; text: string; date: string; }
interface DoctorProfile {
  name: string; title: string; degree: string; specialty: string; experience: string;
  bmdc: string; hospital: string; chamber: string; time: string; fee: string;
  rating: string; phone: string; successRate: number; patients: string;
  diseases: string[]; reviews: Review[];
}

// =====================================================================
// Helper UI Components (For Code Optimization)
// =====================================================================
const ModalWrap = ({ isOpen, onClose, children, mw="max-w-2xl" }: any) => {
  if (!isOpen) return null;
  return (
    <div className="fixed inset-0 z-[150] flex items-center justify-center p-2 sm:p-4 opacity-100 transition-opacity duration-300">
      <div className="absolute inset-0 bg-[#02112A]/90 backdrop-blur-sm" onClick={onClose}></div>
      <div className={`relative w-full ${mw} max-h-[95vh] bg-[#06142E] border border-cyan-500/30 rounded-[32px] shadow-[0_0_50px_rgba(34,211,238,0.15)] overflow-y-auto custom-scrollbar flex flex-col z-10 animate-in zoom-in-95`}>
        <button onClick={onClose} className="absolute top-4 right-4 w-9 h-9 bg-white/5 hover:bg-red-500/20 text-gray-400 hover:text-red-400 rounded-full flex items-center justify-center z-20 transition-colors"><X className="w-5 h-5" /></button>
        {children}
      </div>
    </div>
  );
};

const inputCls = "w-full mt-1.5 bg-[#02112A]/50 border border-white/10 rounded-xl px-4 py-3.5 text-white focus:border-cyan-500 focus:bg-[#02112A] outline-none transition-all shadow-inner";
const lblCls = "text-[12px] font-bold text-gray-400 ml-1 flex items-center gap-1.5";

export default function Home() {
  // =====================================================================
  // Databases & Lists
  // =====================================================================
  const allHospitalsList = [
    'প্রাইম মেডিকেল কলেজ হাসপাতাল', 'গুড হেলথ হাসপাতাল', 'রংপুর কমিউনিটি হাসপাতাল', 'ডিপ আই কেয়ার ফাউন্ডেশন', 'কছির উদ্দিন মেমোরিয়াল', 
    'রংপুর সেন্ট্রাল হাসপাতাল', 'সিটি হাসপাতাল', 'ইসলামী ব্যাংক হাসপাতাল', 'মা ও শিশু হাসপাতাল', 'পপুলার জেনারেল হাসপাতাল',
    'মাজেদা আই হাসপাতাল', 'ডাঃ ইমার উদ্দিন কমিউনিটি হাসপাতাল', 'গ্রামীণ আই এন্ড হেলথ কেয়ার', 'হাজী ক্লিনিক', 'মডার্ন হেলথ কেয়ার', 
    'নিউ মডার্ন ক্লিনিক এন্ড ডায়াগনস্টিক', 'পপুলার ডায়াবেটিক সেন্টার', 'রাইয়ান হেলথ কেয়ার', 'সেভেন ডে নার্সিং হোম', 'সুপ্রিয় হাসপাতাল', 
    'সুর্যের হাসি নেটওয়ার্ক', 'সুরক্ষা হাসপাতাল', 'সুশ্রী নার্সিং হোম', 'ঠাকুরগাঁও বেবি এন্ড মেডিসিন ক্লিনিক', 'ঠাকুরগাঁও কমিউনিটি হাসপাতাল'
  ];
  const topHospitals = allHospitalsList.slice(0, 10);

  const allDiagnosticsList = [
    'পপুলার ডায়াগনস্টিক সেন্টার', 'ল্যাবএইড লিমিটেড', 'আপডেট ডায়াগনস্টিক', 'মেট্রো ল্যাব ইমেজিং', 'এ্যাপোলো ডায়াগনস্টিক', 
    'গ্রীন ডায়াগনস্টিক', 'ডক্টরস ডায়াগনস্টিক', 'চেক আপ ডায়াগনস্টিক (Check Up)', 'ডেল্টা ডায়াগনস্টিক', 'লাইফ কেয়ার ডায়াগনস্টিক', 
    'ধাপ বায়োল্যাব (Dhap Biolab)', 'নর্দান প্রাইভেট মেডিকেল', 'সান ডায়াগনস্টিক সেন্টার ইউনিট-২', 'হেলথ কেয়ার ল্যাব', 'ভিশন ডিজিটাল ডায়াগনস্টিক', 
    'আদর্শ ডায়াগনস্টিক সেন্টার', 'ওয়েলকাম ডায়াগনস্টিক সেন্টার', 'উইশ ডায়াগনস্টিক সেন্টার', 'এক্সপার্ট ডায়াগনস্টিক (Xpart)', 'ইয়া রব ডায়াগনস্টিক'
  ];
  const topDiagnostics = allDiagnosticsList.slice(0, 10);

  const allSpecializedList = [
    { name: 'ডিপ আই কেয়ার ফাউন্ডেশন', category: 'চক্ষু চিকিৎসাকেন্দ্র', location: 'দর্শন, রংপুর', highlight: 'ফ্যাকো সার্জারি ও গ্লুকোমা', color: 'cyan', phone: '01700000000' },
    { name: 'রংপুর ডায়াবেটিক সমিতি', category: 'ডায়াবেটিস ও হরমোন', location: 'রাধাভল্লভ, রংপুর', highlight: 'ইনসুলিন ও ডায়েট প্ল্যান', color: 'rose', phone: '01700000001' },
    { name: 'পক্ষাঘাত ও রিহ্যাবিলিটেশন', category: 'ফিজিওথেরাপি সেন্টার', location: 'নয়নপুর, দিনাজপুর', highlight: 'প্যারালাইসিস রিকভারি', color: 'blue', phone: '01700000002' },
    { name: 'মানসিক রোগ নিরাময় কেন্দ্র', category: 'সাইকিয়াট্রি ও রিহ্যাব', location: 'উপশহর, রংপুর', highlight: 'ডিপ্রেশন ও মাদকাসক্তি', color: 'purple', phone: '01700000003' },
    { name: 'কিডনি ফাউন্ডেশন', category: 'নেফ্রোলজি ও ডায়ালাইসিস', location: 'ধাপ, রংপুর', highlight: 'উন্নত ডায়ালাইসিস', color: 'emerald', phone: '01700000004' },
    { name: 'ক্যান্সার কেয়ার সেন্টার', category: 'অনকোলজি', location: 'মেডিকেল মোড়, রংপুর', highlight: 'কেমোথেরাপি ও কাউন্সেলিং', color: 'rose', phone: '01700000005' }
  ];
  const specializedCentersList = allSpecializedList.slice(0, 4);

  const bloodBanksList = [
    { id: 1, name: 'ADARSHA DEAGNOSTIC & BLOOD BANK', location: 'Mithapukur, Panchagarh', phone: '01700000000', type: 'Blood Bank', available: ['A+', 'B+', 'O+', 'AB+'] },
    { id: 2, name: 'Blood Transfusion Dept, Prime Medical', location: 'Badargonj Road, Rangpur', phone: '01700000003', type: 'Blood Bank', available: ['A-', 'O+', 'B+'] },
    { id: 3, name: 'IDEAL HEALTH CITY & BLOOD BANK', location: 'DHAP, JAIL ROAD, RANGPUR', phone: '01700000005', type: 'Blood Bank', available: ['A+', 'B+', 'O+', 'AB+'] },
    { id: 4, name: 'Kasir Uddin Memorial Medical College', location: 'Dhap Engineer Para, Rangpur', phone: '01700000007', type: 'Blood Bank', available: ['A+', 'O+', 'B+'] },
    { id: 5, name: 'Pure Blood Bank', location: 'Dinajpur Medical College Mor', phone: '01700000012', type: 'Blood Bank', available: ['A+', 'B+', 'O+'] },
    { id: 6, name: 'SONDHANI BLOOD BANK', location: 'Hazipara, Thakurgaon', phone: '01700000015', type: 'Blood Bank', available: ['A+', 'B+', 'O+', 'AB+'] },
  ];

  const ambulanceDB = [
    { id: 1, name: "রংপুর লাইফ কেয়ার অ্যাম্বুলেন্স", type: "ICU (লাইফ সাপোর্ট)", stand: "মেডিকেল মোড়", phone: "01700000000", rating: 4.8, reviews: 124, tags: ["অক্সিজেন সাপোর্ট", "ভেন্টিলেটর", "প্যারামেডিক", "ইসিজি"] },
    { id: 2, name: "মীম ফ্রিজিং সার্ভিস", type: "ফ্রিজিং (মরদেহ বহন)", stand: "ধাপ", phone: "01900000000", rating: 4.9, reviews: 45, tags: ["মাইনাস টেম্পারেচার কফিন", "এসি কেবিন", "লং ড্রাইভ"] },
    { id: 3, name: "সেবা এসি অ্যাম্বুলেন্স", type: "AC / Non-AC", stand: "শাপলা চত্বর", phone: "01800000000", rating: 4.5, reviews: 89, tags: ["এসি কন্ডিশনড", "স্ট্রেচার", "ফার্স্ট এইড"] },
    { id: 4, name: "মায়ের দোয়া NICU সার্ভিস", type: "NICU (নবজাতক)", stand: "মেডিকেল মোড়", phone: "01700000000", rating: 4.9, reviews: 210, tags: ["ইনকিউবেটর", "বেবি ওয়ার্মার", "অক্সিজেন", "নার্স"] },
    { id: 5, name: "হলি ফ্যামিলি আইসিইউ", type: "ICU (লাইফ সাপোর্ট)", stand: "টার্মিনাল", phone: "01500000000", rating: 4.7, reviews: 156, tags: ["লাইফ সাপোর্ট", "অক্সিজেন", "প্যারামেডিক"] },
    { id: 6, name: "জনসেবা অ্যাম্বুলেন্স", type: "AC / Non-AC", stand: "মেডিকেল মোড়", phone: "01700000000", rating: 4.6, reviews: 112, tags: ["স্ট্রেচার", "ফার্স্ট এইড", "অক্সিজেন"] }
  ];

  const categorizedDoctorDepts = [
    { name: 'মেডিসিন ও কার্ডিওলজি', docs: ['আরিফ মাহমুদ', 'সাদিয়া আফরিন', 'তারেক রহমান'] },
    { name: 'গাইনি, প্রসূতি ও শিশু', docs: ['নাদিয়া সুলতানা', 'সাইদুর রহমান'] },
    { name: 'সার্জারি ও অর্থোপেডিক্স', docs: ['ফাহিম ফয়সাল', 'আহমেদ জামান', 'রফিকুল ইসলাম'] },
    { name: 'নাক-কান-গলা ও অন্যান্য', docs: ['মেহজাবিন আক্তার', 'শাহরিয়ার হোসেন'] }
  ];

  const allCategoriesList = ['মেডিসিন', 'কার্ডিওলজি', 'গাইনি ও প্রসূতি', 'শিশু রোগ', 'অর্থোপেডিক্স', 'নাক-কান-গলা', 'চক্ষু', 'চর্ম ও যৌন', 'নিউরো মেডিসিন', 'গ্যাস্ট্রোএন্টারোলজি', 'ইউরোলজি', 'সাইকিয়াট্রি', 'অনকোলজি', 'ডেন্টিস্ট্রি', 'পালমোনোলজি', 'ফিজিওথেরাপি'];
  const districtsList = ['রংপুর', 'দিনাজপুর', 'কুড়িগ্রাম', 'গাইবান্ধা', 'লালমনিরহাট', 'নীলফামারী', 'ঠাকুরগাঁও', 'পঞ্চগড়'];
  const bloodGroups = ['সকল', 'A+', 'A-', 'B+', 'B-', 'O+', 'O-', 'AB+', 'AB-'];
  const ambulanceCategories = ['সকল', 'ICU (লাইফ সাপোর্ট)', 'ফ্রিজিং (মরদেহ বহন)', 'AC / Non-AC', 'NICU (নবজাতক)'];

  // =====================================================================
  // States
  // =====================================================================
  const [globalAlert, setGlobalAlert] = useState<{isOpen: boolean, type: 'success'|'error'|'info', title: string, message: string}>({isOpen: false, type: 'info', title: '', message: ''});
  
  const [activeTopHosp, setActiveTopHosp] = useState(topHospitals[0]);
  const [activeTopDiag, setActiveTopDiag] = useState(topDiagnostics[0]);
  const [activeSpecialCenter, setActiveSpecialCenter] = useState(specializedCentersList[0].name);
  const [activeCategory, setActiveCategory] = useState('মেডিসিন');
  const [visibleDocs, setVisibleDocs] = useState(5);
  
  const [activeDistDoc, setActiveDistDoc] = useState('রংপুর');
  const [activeDistHosp, setActiveDistHosp] = useState('রংপুর');
  const [activeDistDiag, setActiveDistDiag] = useState('রংপুর');

  const [activeBloodGroup, setActiveBloodGroup] = useState('সকল');
  const [activeAmbulance, setActiveAmbulance] = useState('সকল');
  const [activeAmbulanceArea, setActiveAmbulanceArea] = useState('');

  const [searchQuery, setSearchQuery] = useState('');
  const [isSearching, setIsSearching] = useState(false);
  const [isRecording, setIsRecording] = useState(false);
  const [isFiltering, setIsFiltering] = useState(false);
  const [filters, setFilters] = useState({ name: '', department: '', area: '', hospital: '', fee: '', rating: '', availability: '', gender: '' });

  // Modals & Selections
  const [selectedDoc, setSelectedDoc] = useState<DoctorProfile | null>(null);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [selectedAmbulance, setSelectedAmbulance] = useState<any>(null);
  const [selectedBloodBank, setSelectedBloodBank] = useState<any>(null);
  const [isBloodModalOpen, setIsBloodModalOpen] = useState(false);
  
  // Unified "View All" Modal State
  const [viewAllConfig, setViewAllConfig] = useState<{isOpen: boolean, title: string, subtitle: string, items: any[], icon: any, onSelect: (val: any) => void}>({isOpen: false, title: '', subtitle: '', items: [], icon: null, onSelect: () => {}});

  // Forms Modals
  const [isLoginOpen, setIsLoginOpen] = useState(false);
  const [isLoggingIn, setIsLoggingIn] = useState(false);
  const [isForgotPassOpen, setIsForgotPassOpen] = useState(false);
  const [isReportOpen, setIsReportOpen] = useState(false);
  const [isGuestReviewOpen, setIsGuestReviewOpen] = useState(false);
  const [guestReviewSubmitting, setGuestReviewSubmitting] = useState(false);
  const [guestRating, setGuestRating] = useState(5);
  
  // Registration Modals
  const [isDocRegOpen, setIsDocRegOpen] = useState(false);
  const [docRegStep, setDocRegStep] = useState(1);
  const [isHospRegOpen, setIsHospRegOpen] = useState(false);
  const [hospRegStep, setHospRegStep] = useState(1);
  const [isDiagRegOpen, setIsDiagRegOpen] = useState(false);
  const [diagRegStep, setDiagRegStep] = useState(1);
  const [isSubmitting, setIsSubmitting] = useState(false);

  const [profilePic, setProfilePic] = useState<string | null>(null);
  const [locationText, setLocationText] = useState('');
  const [isLocating, setIsLocating] = useState(false);

  const [hospLogo, setHospLogo] = useState<string | null>(null);
  const [hospLocationText, setHospLocationText] = useState('');
  const [isHospLocating, setIsHospLocating] = useState(false);

  const [diagLogo, setDiagLogo] = useState<string | null>(null);
  const [diagLocationText, setDiagLocationText] = useState('');
  const [isDiagLocating, setIsDiagLocating] = useState(false);
  
  const filteredBloodBanks = activeBloodGroup === 'সকল' ? bloodBanksList : bloodBanksList.filter(bank => bank.available.includes(activeBloodGroup));
  const filteredAmbulances = ambulanceDB.filter(amb => {
      const matchCategory = activeAmbulance === 'সকল' || amb.type === activeAmbulance;
      const matchArea = activeAmbulanceArea === '' || amb.stand.includes(activeAmbulanceArea);
      return matchCategory && matchArea;
  });

  // =====================================================================
  // Functions
  // =====================================================================
  const showAlert = (title: string, message: string, type: 'success'|'error'|'info' = 'info') => setGlobalAlert({isOpen: true, title, message, type});
  const getInitial = (name: string) => name.replace(/^(অধ্যাপক ডাঃ |ডাঃ |Dr. )/, '').charAt(0);

  const openDoctorProfile = (docName: string, dept: string = activeCategory) => {
    setIsModalOpen(false);
    setTimeout(() => {
      setSelectedDoc({
        name: docName, title: 'সিনিয়র কনসালটেন্ট ও বিভাগীয় প্রধান', degree: 'MBBS, FCPS, MD, FRCP (UK)',
        specialty: `${dept} বিশেষজ্ঞ`, experience: '১৮+ বছরের অভিজ্ঞতা', bmdc: 'A-28491', hospital: activeTopHosp,
        chamber: 'রুম নং- ৩০৫ (৩য় তলা), রংপুর', time: 'প্রতিদিন বিকেল ৪টা - রাত ৮টা (শুক্রবার বন্ধ)',
        fee: '১০০০', rating: '৪.৯', phone: '01700000000', successRate: 96, patients: '৮.৫k+',
        diseases: ['রোগ নির্ণয়', 'পরামর্শ', 'সার্জারি', 'ফলোআপ', 'মেডিকেল বোর্ড'],
        reviews: [
          { user: 'শফিকুল ইসলাম', rating: 5, date: '২ দিন আগে', text: 'খুব ভালো ডাক্তার। আমার বাবার সমস্যার জন্য দেখিয়েছিলাম, এখন সুস্থ।' },
          { user: 'মাহমুদ হাসান', rating: 4, date: '৩ সপ্তাহ আগে', text: 'সিরিয়াল পাওয়া একটু কঠিন, তবে চিকিৎসা খুবই উন্নত মানের।' }
        ]
      });
      setIsModalOpen(true);
    }, 100);
  };

  const handleAISearch = (e?: React.FormEvent, voiceQuery?: string) => {
    if (e) e.preventDefault();
    const query = voiceQuery !== undefined ? voiceQuery : searchQuery;
    if (!query.trim()) return;
    setIsSearching(true);
    setTimeout(() => {
      setIsSearching(false);
      setActiveCategory("কার্ডিওলজি");
      showAlert('AI Analysis Results', `🗣️ আপনার সমস্যা: "${query}"\n\n🧠 AI অ্যানালাইসিস: আপনার লক্ষণের ওপর ভিত্তি করে একজন "কার্ডিওলজি বিশেষজ্ঞ" সবচেয়ে উপযুক্ত।`, 'success');
      document.getElementById('directory-section')?.scrollIntoView({behavior: 'smooth'});
    }, 1500);
  };

  const startVoiceSearch = () => {
    setIsRecording(true);
    setTimeout(() => {
      const q = "আমার মায়ের বয়স ৫০। ওনার মাজা ব্যথা, দুই হাঁটুতে প্রচণ্ড ব্যথা। একজন ভালো ডাক্তার লাগবে।";
      setSearchQuery(q); setIsRecording(false); handleAISearch(undefined, q);
    }, 4000);
  };

  const openViewAll = (type: string) => {
    let config: any = { isOpen: true };
    if(type === 'depts') {
      config = { ...config, title: 'সকল বিভাগ', subtitle: 'আপনার প্রয়োজনীয় বিভাগ নির্বাচন করুন', items: allCategoriesList, icon: Stethoscope, onSelect: (v:any) => { setActiveCategory(v); setVisibleDocs(5); setViewAllConfig(prev => ({...prev, isOpen:false})); document.getElementById('directory-section')?.scrollIntoView(); }};
    } else if(type === 'hosps') {
      config = { ...config, title: 'সকল হাসপাতাল ও ক্লিনিক', subtitle: 'রংপুর বিভাগের সকল রেজিস্টার্ড হাসপাতাল', items: allHospitalsList, icon: Building2, onSelect: (v:any) => { setActiveTopHosp(v); setViewAllConfig(prev => ({...prev, isOpen:false})); document.getElementById('hospital-section')?.scrollIntoView(); }};
    } else if(type === 'diags') {
      config = { ...config, title: 'সকল ডায়াগনস্টিক সেন্টার', subtitle: 'রংপুর বিভাগের সকল রেজিস্টার্ড সেন্টার', items: allDiagnosticsList, icon: Activity, onSelect: (v:any) => { setActiveTopDiag(v); setViewAllConfig(prev => ({...prev, isOpen:false})); document.getElementById('diagnostic-section')?.scrollIntoView(); }};
    } else if(type === 'spec') {
      config = { ...config, title: 'সকল বিশেষায়িত সেন্টার', subtitle: 'রংপুর বিভাগের সকল স্পেশালাইজড রিহ্যাব', items: allSpecializedList, icon: Building2, onSelect: (v:any) => { setActiveSpecialCenter(v.name); setViewAllConfig(prev => ({...prev, isOpen:false})); document.getElementById('specialized-section')?.scrollIntoView(); }};
    } else if(type === 'distDoc') {
      config = { ...config, title: `${activeDistDoc} জেলার সকল ডাক্তার`, subtitle: 'সব রেজিস্টার্ড বিশেষজ্ঞ চিকিৎসকদের তালিকা', items: Array.from({length: 30}).map((_, i) => `ডাঃ স্পেশালিস্ট ${i+1}`), icon: Stethoscope, onSelect: (v:any) => { openDoctorProfile(v, 'মেডিসিন'); setViewAllConfig(prev => ({...prev, isOpen:false})); }};
    } else if(type === 'distHosp') {
      config = { ...config, title: `${activeDistHosp} জেলার সকল হাসপাতাল`, subtitle: 'সব রেজিস্টার্ড হাসপাতালের তালিকা', items: allHospitalsList, icon: Building2, onSelect: (v:any) => { setActiveTopHosp(v); setViewAllConfig(prev => ({...prev, isOpen:false})); document.getElementById('hospital-section')?.scrollIntoView(); }};
    } else if(type === 'distDiag') {
      config = { ...config, title: `${activeDistDiag} জেলার সকল ডায়াগনস্টিক`, subtitle: 'সব রেজিস্টার্ড ডায়াগনস্টিক সেন্টারের তালিকা', items: allDiagnosticsList, icon: Activity, onSelect: (v:any) => { setActiveTopDiag(v); setViewAllConfig(prev => ({...prev, isOpen:false})); document.getElementById('diagnostic-section')?.scrollIntoView(); }};
    }
    setViewAllConfig(config);
  };

  const handleGuestReviewSubmit = (e: any) => {
    e.preventDefault();
    setGuestReviewSubmitting(true);
    setTimeout(() => {
      setGuestReviewSubmitting(false);
      setIsGuestReviewOpen(false);
      showAlert('ধন্যবাদ!', 'আপনার রিভিউটি সফলভাবে জমা হয়েছে।', 'success');
    }, 1500);
  };

  const handleImageUpload = (e: any) => {
    const file = e.target.files?.[0];
    if (file) {
      const reader = new FileReader();
      reader.onloadend = () => setProfilePic(reader.result as string);
      reader.readAsDataURL(file);
    }
  };
  
  const handleHospLogoUpload = (e: any) => {
    const file = e.target.files?.[0];
    if (file) {
      const reader = new FileReader();
      reader.onloadend = () => setHospLogo(reader.result as string);
      reader.readAsDataURL(file);
    }
  };
  
  const handleDiagLogoUpload = (e: any) => {
    const file = e.target.files?.[0];
    if (file) {
      const reader = new FileReader();
      reader.onloadend = () => setDiagLogo(reader.result as string);
      reader.readAsDataURL(file);
    }
  };

  const handleLiveLocation = () => {
    setIsLocating(true);
    setTimeout(() => { setLocationText('অক্ষাংশ: 25.7439, দ্রাঘিমাংশ: 89.2752'); setIsLocating(false); }, 1500);
  };
  
  const handleHospLiveLocation = () => {
    setIsHospLocating(true);
    setTimeout(() => { setHospLocationText('অক্ষাংশ: 25.7439, দ্রাঘিমাংশ: 89.2752'); setIsHospLocating(false); }, 1500);
  };
  
  const handleDiagLiveLocation = () => {
    setIsDiagLocating(true);
    setTimeout(() => { setDiagLocationText('অক্ষাংশ: 25.7439, দ্রাঘিমাংশ: 89.2752'); setIsDiagLocating(false); }, 1500);
  };

  const renderStepper = (currentStep: number) => (
    <div className="flex justify-between items-center mb-10 relative px-4">
      <div className="absolute left-4 right-4 top-1/2 -translate-y-1/2 h-[3px] bg-white/5 -z-10 rounded-full"></div>
      <div className={`absolute left-4 top-1/2 -translate-y-1/2 h-[3px] bg-cyan-500 transition-all duration-500 -z-10 rounded-full ${currentStep === 1 ? 'w-0' : currentStep === 2 ? 'w-1/3' : currentStep === 3 ? 'w-2/3' : 'w-[calc(100%-32px)]'} shadow-[0_0_10px_rgba(34,211,238,0.5)]`}></div>
      {[1, 2, 3, 4].map((step) => (
        <div key={step} className={`w-8 h-8 rounded-full flex items-center justify-center font-bold text-[13px] transition-all duration-300 border-2 ${currentStep >= step ? 'bg-[#06142E] text-cyan-400 border-cyan-500 shadow-[0_0_15px_rgba(34,211,238,0.4)] scale-110' : 'bg-[#06142E] text-gray-600 border-white/10'}`}>{step}</div>
      ))}
    </div>
  );

  const renderRegFooter = (step: number, setStep: any, onSubmit: any) => (
    <div className="flex justify-between items-center mt-8 pt-6 border-t border-white/5">
      {step > 1 ? <button onClick={() => setStep(step - 1)} className="px-6 py-3 bg-white/5 hover:bg-white/10 text-gray-300 hover:text-white rounded-xl font-bold transition-all text-[13px]">পেছনে যান</button> : <div/>}
      {step < 4 ? <button onClick={() => setStep(step + 1)} className="px-8 py-3 bg-cyan-500 hover:bg-cyan-400 text-[#02112A] rounded-xl font-extrabold transition-all shadow-[0_0_20px_rgba(34,211,238,0.3)] flex items-center gap-2 text-[13px]">পরবর্তী ধাপ <ChevronRight className="w-4 h-4" /></button>
      : <button onClick={onSubmit} disabled={isSubmitting} className="px-8 py-3 bg-gradient-to-r from-blue-600 to-cyan-500 text-white rounded-xl font-extrabold transition-all shadow-[0_10px_20px_rgba(34,211,238,0.3)] flex items-center gap-2 text-[13px] disabled:opacity-70 disabled:cursor-not-allowed">
          {isSubmitting ? <><Loader2 className="w-4 h-4 animate-spin"/> সাবমিট হচ্ছে...</> : 'সম্পন্ন করুন ও সাবমিট দিন'}
        </button>}
    </div>
  );

  return (
    <main className="min-h-screen bg-[#02112A] text-white selection:bg-blue-500 pb-20 font-sans overflow-x-hidden">
      {/* ================= ১. হেডার সেকশন ================= */}
      <header className="fixed top-0 w-full z-[100] bg-[#02112A]/60 backdrop-blur-md border-b border-white/10 transition-all duration-300">
        <div className="max-w-7xl mx-auto px-4 h-20 flex items-center justify-between">
          <div className="flex items-center gap-2">
            <HeartPulse className="text-blue-400 w-8 h-8" />
            <h1 className="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-cyan-300">হামার ডাক্তার</h1>
          </div>
          <nav className="hidden md:flex gap-8 text-sm font-medium text-gray-300">
            <a href="#" className="hover:text-blue-400 transition-colors">হোম</a>
            <a href="#district-doctors" className="hover:text-blue-400 transition-colors">জেলার ডাক্তার</a>
            <a href="#hospital-section" className="hover:text-blue-400 transition-colors">হাসপাতাল</a>
            <a href="#ambulance-section" className="hover:text-blue-400 transition-colors">অ্যাম্বুলেন্স</a>
          </nav>
          <div className="flex items-center gap-4">
            <a href="tel:16263" className="hidden md:flex items-center gap-2 bg-white/10 hover:bg-white/20 px-5 py-2.5 rounded-full transition-all border border-white/10 text-sm font-bold">
              <Phone className="w-4 h-4" /> <span>জরুরী কল</span>
            </a>
            {/* Login Button In Header */}
            <button onClick={() => setIsLoginOpen(true)} className="flex items-center gap-2 bg-gradient-to-r from-blue-600 to-cyan-500 hover:from-blue-500 px-5 py-2.5 rounded-full transition-all shadow-lg text-sm font-extrabold">
              <LogIn className="w-4 h-4" /> লগইন
            </button>
            <button className="md:hidden p-2 text-gray-300 hover:text-white transition-colors"><Menu className="w-6 h-6" /></button>
          </div>
        </div>
      </header>

      {/* ================= ২. হিরো সেকশন ================= */}
      <section className="relative pt-40 pb-20 flex flex-col items-center text-center min-h-[80vh] justify-center">
        <div className="absolute inset-0 z-0">
          <div className="absolute inset-0 bg-[#02112A]/80 z-10"></div>
          <img src="https://images.unsplash.com/photo-1551076805-e18690c5e53b?q=80&w=2070&auto=format&fit=crop" alt="Bg" className="w-full h-full object-cover opacity-30 mix-blend-luminosity" />
          <div className="absolute bottom-0 w-full h-40 bg-gradient-to-t from-[#02112A] to-transparent z-20"></div>
        </div>
        <div className="relative z-30 px-4 max-w-4xl mx-auto w-full">
          <h1 className="text-5xl md:text-6xl font-extrabold mb-6 tracking-tight leading-tight">সমস্যা লিখুন, <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-cyan-300">ডাক্টার খুজুন</span></h1>
          <p className="text-lg md:text-xl text-gray-300 mb-12 max-w-2xl mx-auto drop-shadow-lg">১০০% দালালমুক্ত রংপুরের ১ নাম্বার ডাক্টার খোজার পাবলিক পোর্টাল। AI দিয়ে আপনার রোগের জন্য সেরা ডাক্তার খুঁজে বের করুন。</p>
          <form onSubmit={handleAISearch} className={`w-full flex flex-col md:flex-row items-center bg-[#0A1930]/60 backdrop-blur-xl border ${isRecording ? 'border-red-500/50 shadow-[0_0_50px_rgba(239,68,68,0.3)]' : 'border-white/20 shadow-[0_0_40px_rgba(59,130,246,0.2)]'} rounded-[28px] p-2 transition-all`}>
            <div className="pl-4 pr-2 hidden md:block">{isRecording ? <Activity className="text-red-500 w-6 h-6 animate-pulse" /> : <Search className="text-blue-400 w-6 h-6" />}</div>
            <input type="text" value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)} placeholder={isRecording ? "আপনার কথা শোনা হচ্ছে... 🎤" : "প্যারাগ্রাফ আকারে সমস্যার কথা বিস্তারিত লিখুন..."} disabled={isRecording} className="flex-1 w-full bg-transparent border-none outline-none text-white placeholder:text-gray-400 px-4 py-3 md:py-4 text-base md:text-lg disabled:opacity-80" />
            <div className="flex w-full md:w-auto mt-2 md:mt-0 justify-end">
              <button type="button" onClick={startVoiceSearch} disabled={isSearching || isRecording} className={`p-3 rounded-full mr-2 flex items-center justify-center ${isRecording ? 'bg-red-500/20 text-red-500 animate-pulse' : 'bg-white/5 hover:bg-white/10 text-blue-400'}`}>
                {isRecording ? <MicOff className="w-6 h-6" /> : <Mic className="w-6 h-6" />}
              </button>
              <button type="submit" disabled={isSearching || isRecording} className="bg-gradient-to-r w-full md:w-auto from-blue-600 to-cyan-500 text-white px-8 py-3 md:py-4 rounded-[24px] font-semibold transition-all shadow-lg flex items-center justify-center gap-2">
                {isSearching ? <><Loader2 className="w-5 h-5 animate-spin" /> খুঁজছে...</> : 'খুঁজুন'}
              </button>
            </div>
          </form>
          {isRecording && <p className="text-red-400 mt-4 text-sm font-medium animate-pulse">🎤 আপনার সমস্যাটি বিস্তারিত বলুন, AI রেকর্ড করছে...</p>}
        </div>
      </section>

      {/* ================= ৩. অ্যাডভান্সড ডিরেক্টরি ফিল্টার ================= */}
      <section className="relative px-4 max-w-7xl mx-auto -mt-8 z-40 mb-24">
        <div className="bg-[#0A1930]/90 backdrop-blur-2xl border border-white/10 rounded-[32px] p-6 md:p-10 shadow-[0_20px_50px_rgba(0,0,0,0.5)]">
          <div className="flex items-center gap-3 mb-8">
             <div className="bg-blue-500/20 p-2.5 rounded-xl text-blue-400"><SlidersHorizontal className="w-6 h-6" /></div>
             <div><h3 className="text-2xl font-extrabold text-white flex items-center gap-2">অ্যাডভান্সড ফাইন্ডার <span className="bg-blue-600 text-white text-[10px] px-2 py-0.5 rounded-full">Pro</span></h3><p className="text-sm text-gray-400">কাস্টমাইজড ফিল্টার দিয়ে আপনার কাঙ্ক্ষিত ডাক্তার খুঁজুন</p></div>
          </div>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 gap-5">
            <div className="xl:col-span-2 relative"><input type="text" placeholder="ডাক্তারের নাম বা পদবী..." className="w-full bg-[#02112A]/80 border border-white/10 rounded-2xl pl-12 pr-4 py-4 text-white font-medium outline-none focus:border-blue-500" /><Search className="absolute left-4 top-4 w-5 h-5 text-gray-500" /></div>
            <select className="bg-[#02112A]/80 border border-white/10 rounded-2xl px-4 py-4 text-gray-300 font-medium outline-none focus:border-blue-500 w-full appearance-none cursor-pointer"><option>সকল বিভাগ</option><option>মেডিসিন</option><option>কার্ডিওলজি</option></select>
            <select className="bg-[#02112A]/80 border border-white/10 rounded-2xl px-4 py-4 text-gray-300 font-medium outline-none focus:border-blue-500 w-full appearance-none cursor-pointer"><option>যেকোনো এলাকা</option><option>ধাপ</option><option>মেডিকেল মোড়</option></select>
            <select className="bg-[#02112A]/80 border border-white/10 rounded-2xl px-4 py-4 text-gray-300 font-medium outline-none focus:border-blue-500 w-full appearance-none cursor-pointer"><option>যেকোনো ফি</option><option>৫০০৳ এর নিচে</option><option>৫০০৳ - ৮০০৳</option></select>
            <select className="bg-[#02112A]/80 border border-white/10 rounded-2xl px-4 py-4 text-gray-300 font-medium outline-none focus:border-blue-500 w-full appearance-none cursor-pointer"><option>এভেইলেবিলিটি</option><option>আজকে অ্যাভেইলেবল</option></select>
          </div>
          <div className="mt-8 flex justify-end gap-4 border-t border-white/10 pt-6">
             <button onClick={() => setFilters({ name: '', department: '', area: '', hospital: '', fee: '', rating: '', availability: '', gender: '' })} className="px-6 py-3.5 rounded-2xl text-gray-400 hover:text-white hover:bg-white/10 font-bold flex items-center gap-2"><RotateCcw className="w-4 h-4" /> রিসেট</button>
             <button onClick={() => { setIsFiltering(true); setTimeout(() => {setIsFiltering(false); showAlert("ফিল্টার প্রয়োগ সম্পন্ন!", "(ডাটাবেস কানেক্ট হলে এখানে ফিল্টার করা লিস্ট চলে আসবে।)", "success"); document.getElementById('directory-section')?.scrollIntoView();}, 1000); }} className="bg-blue-600 hover:bg-blue-500 text-white px-10 py-3.5 rounded-2xl font-bold flex items-center gap-2 shadow-lg">{isFiltering ? <Loader2 className="w-5 h-5 animate-spin" /> : <Search className="w-5 h-5" />} ফিল্টার প্রয়োগ করুন</button>
          </div>
        </div>
      </section>

      {/* ================= [NEW] আপনার জেলার সেরা ডাক্তার ================= */}
      <section id="district-doctors" className="relative px-4 max-w-7xl mx-auto z-20 mb-24">
        <div className="flex flex-col md:flex-row justify-between items-end mb-8 border-b border-white/5 pb-4">
          <div className="flex items-center gap-3">
             <div className="bg-blue-500/20 p-2.5 rounded-xl border border-blue-500/30 text-blue-400 shadow-lg"><Stethoscope className="w-7 h-7" /></div>
             <div><h2 className="text-2xl md:text-3xl font-extrabold text-white">আপনার জেলার সেরা ডাক্তার</h2><p className="text-[13px] text-gray-400 mt-1">জেলা অনুযায়ী শীর্ষ স্পন্সরড ও ভেরিফাইড বিশেষজ্ঞগণ</p></div>
          </div>
          <button onClick={() => openViewAll('distDoc')} className="mt-4 md:mt-0 flex items-center gap-2 px-6 py-2.5 bg-blue-600/10 hover:bg-blue-500 text-blue-400 hover:text-white border border-blue-500/30 hover:border-transparent rounded-full font-extrabold shadow-lg"><Grid className="w-4 h-4" /> জেলার সকল ডাক্তার <ChevronRight className="w-4 h-4" /></button>
        </div>
        <div className="flex overflow-x-auto gap-2 pb-6 mb-4 custom-scrollbar">
          {districtsList.map((dist, idx) => (
             <button key={idx} onClick={() => setActiveDistDoc(dist)} className={`whitespace-nowrap px-6 py-2.5 rounded-xl text-[13px] font-extrabold transition-all duration-300 ${activeDistDoc === dist ? 'bg-gradient-to-r from-blue-600 to-cyan-500 text-white' : 'bg-[#0A1930] text-gray-400 border border-white/5'}`}>{dist}</button>
          ))}
        </div>
        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-5">
          {Array.from({length: 10}).map((_, i) => (
            <div key={i} onClick={() => openDoctorProfile(`ডাঃ স্পেশালিস্ট ${i+1}`)} className="bg-gradient-to-b from-[#0A1930]/90 to-[#02112A] border border-blue-500/30 rounded-2xl p-5 shadow-lg hover:-translate-y-1 transition-all group relative cursor-pointer">
              <div className="absolute top-0 right-0 bg-blue-600 text-[9px] text-white px-3 py-1 rounded-bl-xl font-bold uppercase">Top 10</div>
              <div className="w-12 h-12 bg-blue-500/20 rounded-full flex items-center justify-center text-blue-400 font-extrabold text-lg mb-4 shadow-inner group-hover:bg-blue-500 group-hover:text-white transition-all">ডা</div>
              <h4 className="text-[15px] font-bold text-white mb-1 leading-tight">{activeDistDoc} স্পেশালিস্ট {i+1}</h4>
              <p className="text-[11px] text-cyan-300 mb-3 font-medium bg-cyan-900/30 w-max px-2 py-0.5 rounded">{['মেডিসিন', 'কার্ডিওলজি', 'গাইনি', 'শিশু', 'সার্জারি'][i%5]} বিশেষজ্ঞ</p>
              <p className="text-[10px] text-gray-400 mb-4 flex items-center gap-1"><MapPin className="w-3 h-3"/> {activeDistDoc} সদর</p>
              <div className="flex justify-between items-center text-xs border-t border-white/10 pt-3">
                <span className="text-yellow-400 font-bold flex items-center gap-1"><Star className="w-3 h-3 fill-yellow-400" /> {(4.5 + (i%5)*0.1).toFixed(1)}</span>
                <span className="text-white font-extrabold">৳ {600 + (i*100)}</span>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* ================= [NEW] আপনার জেলার সেরা হাসপাতাল ================= */}
      <section id="district-hospitals" className="relative px-4 max-w-7xl mx-auto z-20 mb-24">
        <div className="flex flex-col md:flex-row justify-between items-end mb-8 border-b border-white/5 pb-4">
          <div className="flex items-center gap-3">
             <div className="bg-emerald-500/20 p-2.5 rounded-xl border border-emerald-500/30 text-emerald-400 shadow-lg"><Building2 className="w-7 h-7" /></div>
             <div><h2 className="text-2xl md:text-3xl font-extrabold text-white">আপনার জেলার সেরা হাসপাতাল</h2><p className="text-[13px] text-gray-400 mt-1">জেলা অনুযায়ী শীর্ষ স্পন্সরড হাসপাতাল ও ক্লিনিক</p></div>
          </div>
          <button onClick={() => openViewAll('distHosp')} className="mt-4 md:mt-0 flex items-center gap-2 px-6 py-2.5 bg-emerald-600/10 hover:bg-emerald-500 text-emerald-400 hover:text-[#02112A] border border-emerald-500/30 hover:border-transparent rounded-full text-sm font-extrabold shadow-lg"><Grid className="w-4 h-4" /> জেলার সকল হাসপাতাল <ChevronRight className="w-4 h-4" /></button>
        </div>
        <div className="flex overflow-x-auto gap-2 pb-6 mb-4 custom-scrollbar">
          {districtsList.map((dist, idx) => (
             <button key={idx} onClick={() => setActiveDistHosp(dist)} className={`whitespace-nowrap px-6 py-2.5 rounded-xl text-[13px] font-extrabold transition-all duration-300 ${activeDistHosp === dist ? 'bg-gradient-to-r from-emerald-600 to-teal-500 text-white' : 'bg-[#0A1930] text-gray-400 border border-white/5'}`}>{dist}</button>
          ))}
        </div>
        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-5">
          {Array.from({length: 10}).map((_, i) => (
            <div key={i} className="bg-gradient-to-b from-[#0A1930]/90 to-[#02112A] border border-emerald-500/30 rounded-2xl p-5 shadow-lg hover:-translate-y-1 transition-all cursor-pointer">
              <div className="absolute top-0 right-0 bg-emerald-600 text-[9px] text-white px-3 py-1 rounded-bl-xl font-bold uppercase">Featured</div>
              <div className="w-12 h-12 bg-emerald-500/20 rounded-xl flex items-center justify-center text-emerald-400 font-extrabold mb-4 shadow-inner"><Building2 className="w-6 h-6"/></div>
              <h4 className="text-[15px] font-bold text-white mb-2">{activeDistHosp} স্পেশালাইজড হাসপাতাল {i+1}</h4>
              <p className="text-[10px] text-gray-400 mb-4 flex items-center gap-1"><MapPin className="w-3 h-3 text-emerald-500"/> {activeDistHosp} সদর এলাকা</p>
              <div className="flex gap-2 text-[9px] font-bold text-emerald-300 mb-4 flex-wrap">
                 <span className="bg-emerald-900/30 px-2 py-1 rounded">24/7 ইমার্জেন্সি</span>
                 <span className="bg-emerald-900/30 px-2 py-1 rounded">ICU সুবিধা</span>
              </div>
              <button className="w-full bg-[#02112A] hover:bg-emerald-500 hover:text-white text-emerald-400 py-2.5 rounded-lg text-xs font-bold transition-all border border-emerald-500/30 flex items-center justify-center gap-2"><Phone className="w-3.5 h-3.5"/> হেল্পলাইন</button>
            </div>
          ))}
        </div>
      </section>

      {/* ================= [NEW] আপনার জেলার সেরা ডায়াগনস্টিক সেন্টার ================= */}
      <section id="district-diagnostics" className="relative px-4 max-w-7xl mx-auto z-20 mb-24">
        <div className="flex flex-col md:flex-row justify-between items-end mb-8 border-b border-white/5 pb-4">
          <div className="flex items-center gap-3">
             <div className="bg-purple-500/20 p-2.5 rounded-xl border border-purple-500/30 text-purple-400 shadow-lg"><Activity className="w-7 h-7" /></div>
             <div><h2 className="text-2xl md:text-3xl font-extrabold text-white">আপনার জেলার সেরা ডায়াগনস্টিক</h2><p className="text-[13px] text-gray-400 mt-1">জেলা অনুযায়ী শীর্ষ প্যাথলজি ও ইমেজিং সেন্টার</p></div>
          </div>
          <button onClick={() => openViewAll('distDiag')} className="mt-4 md:mt-0 flex items-center gap-2 px-6 py-2.5 bg-purple-600/10 hover:bg-purple-500 text-purple-400 hover:text-white border border-purple-500/30 hover:border-transparent rounded-full text-sm font-extrabold shadow-lg"><Grid className="w-4 h-4" /> জেলার সকল ডায়াগনস্টিক <ChevronRight className="w-4 h-4" /></button>
        </div>
        <div className="flex overflow-x-auto gap-2 pb-6 mb-4 custom-scrollbar">
          {districtsList.map((dist, idx) => (
             <button key={idx} onClick={() => setActiveDistDiag(dist)} className={`whitespace-nowrap px-6 py-2.5 rounded-xl text-[13px] font-extrabold transition-all duration-300 ${activeDistDiag === dist ? 'bg-gradient-to-r from-purple-600 to-fuchsia-500 text-white' : 'bg-[#0A1930] text-gray-400 border border-white/5'}`}>{dist}</button>
          ))}
        </div>
        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-5">
          {Array.from({length: 10}).map((_, i) => (
            <div key={i} className="bg-gradient-to-b from-[#0A1930]/90 to-[#02112A] border border-purple-500/30 rounded-2xl p-5 shadow-lg hover:-translate-y-1 transition-all cursor-pointer">
              <div className="absolute top-0 right-0 bg-purple-600 text-[9px] text-white px-3 py-1 rounded-bl-xl font-bold uppercase">Top Lab</div>
              <div className="w-12 h-12 bg-purple-500/20 rounded-xl flex items-center justify-center text-purple-400 font-extrabold mb-4 shadow-inner"><Activity className="w-6 h-6"/></div>
              <h4 className="text-[15px] font-bold text-white mb-2">{activeDistDiag} ডিজিটাল ল্যাব {i+1}</h4>
              <p className="text-[10px] text-gray-400 mb-4 flex items-center gap-1"><MapPin className="w-3 h-3 text-purple-500"/> {activeDistDiag} মেইন রোড</p>
              <div className="flex gap-2 text-[9px] font-bold text-purple-300 mb-4 flex-wrap">
                 <span className="bg-purple-900/30 px-2 py-1 rounded border border-purple-500/20">MRI / CT Scan</span>
                 <span className="bg-purple-900/30 px-2 py-1 rounded border border-purple-500/20">Blood Test</span>
              </div>
              <button className="w-full bg-[#02112A] hover:bg-purple-500 hover:text-white text-purple-400 py-2.5 rounded-lg text-xs font-bold transition-all border border-purple-500/30 flex items-center justify-center gap-2"><Phone className="w-3.5 h-3.5"/> সিরিয়াল নিন</button>
            </div>
          ))}
        </div>
      </section>

      {/* ================= ৫. ক্যাটাগরি এবং ডিরেক্টরি ট্যাব (Dynamic Data) ================= */}
      <section id="directory-section" className="relative px-4 max-w-7xl mx-auto z-20 mb-24 border-t border-white/5 pt-16">
        <div className="absolute top-1/4 left-0 w-96 h-96 bg-blue-600/10 rounded-full blur-[120px] -z-10 pointer-events-none"></div>
        <div className="flex flex-col md:flex-row justify-between items-end mb-10 border-b border-white/5 pb-6">
          <div><h2 className="text-3xl md:text-4xl font-extrabold text-white mb-2 tracking-tight">বিভাগ অনুযায়ী বিশেষজ্ঞ</h2><p className="text-gray-400 text-sm md:text-base">আপনার প্রয়োজনীয় বিভাগ নির্বাচন করুন</p></div>
          <div className="flex items-center gap-3 mt-6 md:mt-0">
            <button onClick={() => openViewAll('depts')} className="text-white bg-white/5 hover:bg-white/10 font-bold flex items-center gap-1.5 px-5 py-2.5 rounded-full border border-white/10"><Grid className="w-4 h-4" /> সকল বিভাগ দেখুন</button>
            <button onClick={() => document.getElementById('regular-docs-list')?.scrollIntoView({behavior: 'smooth'})} className="text-cyan-400 hover:text-white font-bold flex items-center gap-1.5 bg-cyan-500/10 hover:bg-cyan-500/20 px-5 py-2.5 rounded-full border border-cyan-500/20">এই বিভাগের সকল ডাক্তার <ChevronRight className="w-4 h-4" /></button>
          </div>
        </div>

        <div className="flex overflow-x-auto gap-3 pb-6 mb-8 custom-scrollbar scroll-smooth">
          {allCategoriesList.slice(0, 8).map((tab, idx) => (
            <button key={idx} onClick={() => {setActiveCategory(tab); setVisibleDocs(5);}} className={`whitespace-nowrap px-7 py-3.5 rounded-[20px] font-extrabold transition-all duration-300 ${activeCategory === tab ? 'bg-blue-600 text-white shadow-[0_10px_20px_rgba(37,99,235,0.4)] scale-105' : 'bg-[#0A1930] text-gray-400 hover:bg-white/10 border border-white/5'}`}>{tab}</button>
          ))}
        </div>

        <div className="mb-14 bg-white/5 p-6 rounded-[32px] border border-white/5">
          <h3 className="text-xl font-extrabold text-white mb-6 flex items-center gap-2.5"><BadgeCheck className="text-blue-400 w-6 h-6" /> {activeCategory} বিভাগের ফিচারড বিশেষজ্ঞ <span className="text-[10px] bg-blue-500/20 text-blue-300 px-2 py-1 rounded-md ml-2">Sponsored</span></h3>
          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-5">
            {Array.from({length: 5}).map((_, i) => (
              <div key={i} onClick={() => openDoctorProfile(`ডাঃ স্পেশালিস্ট ${i+1}`, activeCategory)} className="bg-gradient-to-br from-blue-900/30 to-[#02112A] border border-blue-500/30 rounded-2xl p-5 hover:-translate-y-1 transition-all cursor-pointer shadow-lg relative">
                <div className="absolute top-0 right-0 bg-blue-600 text-[9px] text-white px-3 py-1 rounded-bl-xl font-bold uppercase">Featured</div>
                <div className="w-14 h-14 bg-blue-500/10 rounded-full flex items-center justify-center text-blue-400 font-extrabold text-xl mb-4 border border-blue-500/20">ডা</div>
                <h4 className="text-[16px] font-bold text-white mb-1.5 leading-tight">ডাঃ স্পেশালিস্ট {i+1}</h4>
                <p className="text-[12px] text-cyan-300 mb-3 font-medium bg-cyan-900/30 inline-block px-2 py-0.5 rounded">{activeCategory} বিশেষজ্ঞ</p>
                <div className="flex justify-between items-center text-xs border-t border-white/10 pt-4"><span className="text-yellow-400 font-bold flex items-center gap-1"><Star className="w-3.5 h-3.5 fill-yellow-400" /> 4.9</span><span className="text-white font-extrabold bg-white/10 px-2 py-1 rounded-lg">৳ ৮০০</span></div>
              </div>
            ))}
          </div>
        </div>

        <h3 id="regular-docs-list" className="text-xl font-extrabold text-white mb-6 flex items-center gap-2.5 scroll-mt-20"><Menu className="text-gray-400 w-5 h-5" /> {activeCategory} বিভাগের অন্যান্য বিশেষজ্ঞ</h3>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-4">
          {Array.from({length: visibleDocs}).map((_, i) => (
            <div key={i} onClick={() => openDoctorProfile(`ডাঃ রেগুলার ${i+1}`, activeCategory)} className="flex items-center gap-3.5 bg-[#0A1930]/40 border border-white/5 p-3.5 rounded-[20px] hover:bg-white/10 transition-all cursor-pointer">
              <div className="w-12 h-12 rounded-full bg-gray-800 flex items-center justify-center text-gray-300 font-bold border border-white/10">ডা</div>
              <div className="flex-1"><h4 className="text-[13px] font-extrabold text-white leading-tight mb-1">ডাঃ রেগুলার {i+1}</h4><p className="text-[10px] text-gray-400">{activeCategory} বিশেষজ্ঞ</p><div className="flex items-center gap-2 mt-1.5 text-[10px] font-bold"><span className="text-yellow-500 flex items-center gap-0.5"><Star className="w-2.5 h-2.5 fill-yellow-500" /> 4.5</span><span className="text-gray-300">৳ ৫০০</span></div></div>
            </div>
          ))}
        </div>
        {visibleDocs < 15 && (
          <div className="mt-8 text-center"><button onClick={() => setVisibleDocs(prev => prev + 5)} className="text-sm font-medium text-gray-400 hover:text-white border border-gray-600 hover:border-white px-6 py-2.5 rounded-full transition-all">আরও দেখুন (Load More)</button></div>
        )}
      </section>

      {/* ================= ৬. সেরা ১০ হাসপাতাল এবং ক্লিনিক ================= */}
      <section id="hospital-section" className="relative px-4 max-w-7xl mx-auto z-20 mb-24 pt-8">
        <div className="flex flex-col md:flex-row justify-between items-end md:items-center mb-8 pb-4 border-b border-white/5">
          <div className="flex items-center gap-3"><div className="bg-cyan-500/20 p-2.5 rounded-xl border border-cyan-500/30 text-cyan-400"><Building2 className="w-7 h-7" /></div><div><h2 className="text-2xl md:text-3xl font-extrabold text-white tracking-tight">সেরা ১০ হাসপাতাল ও ক্লিনিক</h2><p className="text-[13px] text-gray-400 mt-1">হাসপাতালের প্রোফাইল এবং বিভাগ অনুযায়ী বিশেষজ্ঞ ডাক্তারগণ</p></div></div>
          <button onClick={() => openViewAll('hosps')} className="mt-4 md:mt-0 flex items-center gap-2 px-6 py-2.5 bg-blue-600/10 hover:bg-cyan-500 text-cyan-400 hover:text-[#02112A] border border-cyan-500/30 hover:border-transparent rounded-full text-sm font-extrabold"><Grid className="w-4 h-4" /> সকল হাসপাতাল দেখুন <ChevronRight className="w-4 h-4" /></button>
        </div>

        <div className="bg-[#0A1930]/60 backdrop-blur-md border border-white/5 p-2 rounded-2xl mb-8 flex overflow-x-auto gap-2 custom-scrollbar">
          {topHospitals.map((hosp: string, idx: number) => (
             <button key={idx} onClick={() => setActiveTopHosp(hosp)} className={`whitespace-nowrap px-6 py-2.5 rounded-xl text-[13px] font-extrabold transition-all duration-300 ${activeTopHosp === hosp ? 'bg-gradient-to-r from-cyan-500 to-blue-600 text-white shadow-lg' : 'bg-transparent text-gray-400 hover:bg-white/5'}`}>{hosp}</button>
          ))}
        </div>

        <div className="bg-gradient-to-r from-[#06142E] to-[#0A1930] border border-cyan-500/20 p-6 md:p-8 rounded-[32px] mb-10 shadow-lg flex flex-col md:flex-row justify-between items-center gap-6">
            <div className="flex flex-col md:flex-row items-center md:items-start text-center md:text-left gap-5">
                <div className="w-20 h-20 bg-cyan-900/30 rounded-2xl flex items-center justify-center text-cyan-400 border border-cyan-500/30 shrink-0"><Building2 className="w-10 h-10" /></div>
                <div>
                    <h3 className="text-2xl md:text-3xl font-extrabold text-white mb-2">{activeTopHosp}</h3>
                    <p className="text-gray-400 text-sm flex items-center justify-center md:justify-start gap-1.5"><MapPin className="w-4 h-4 text-cyan-500" /> রংপুর সিটি কর্পোরেশন এলাকা</p>
                    <div className="flex flex-wrap justify-center md:justify-start gap-2 mt-3"><span className="bg-white/5 text-gray-300 text-[11px] px-2.5 py-1 rounded-md flex items-center gap-1 border border-white/10"><ShieldCheck className="w-3 h-3 text-green-400"/> ২৪/৭ ইমার্জেন্সি</span><span className="bg-white/5 text-gray-300 text-[11px] px-2.5 py-1 rounded-md flex items-center gap-1 border border-white/10"><ShieldCheck className="w-3 h-3 text-green-400"/> আইসিইউ (ICU)</span><span className="bg-white/5 text-gray-300 text-[11px] px-2.5 py-1 rounded-md flex items-center gap-1 border border-white/10"><ShieldCheck className="w-3 h-3 text-green-400"/> নিজস্ব ব্লাড ব্যাংক</span></div>
                </div>
            </div>
            <a href="tel:01700000000" className="w-full md:w-auto px-8 py-3.5 bg-cyan-500 hover:bg-cyan-400 text-[#02112A] font-extrabold rounded-xl transition-all shadow-lg flex justify-center items-center gap-2"><Phone className="w-5 h-5" /> রিসেপশনে কল করুন</a>
        </div>

        <div>
          <h3 className="text-xl font-bold text-white mb-6 border-b border-white/10 pb-3">এই হাসপাতালের বিশেষজ্ঞ চিকিৎসকগণ:</h3>
          {categorizedDoctorDepts.map((dept, index) => (
            <div key={index} className="mb-8">
              <div className="flex items-center gap-2 mb-4"><Stethoscope className="w-5 h-5 text-cyan-400" /><h4 className="text-lg font-extrabold text-gray-200">{dept.name}</h4></div>
              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
                {dept.docs.map((docName, idx) => (
                  <div key={idx} onClick={() => openDoctorProfile(`ডাঃ ${docName}`, dept.name.split(' ')[0])} className="bg-gradient-to-br from-[#0A1930] to-[#02112A] border border-white/5 hover:border-cyan-500/30 p-4 rounded-2xl group transition-all duration-300 hover:-translate-y-1 cursor-pointer flex items-center gap-4 relative shadow-sm hover:shadow-lg">
                    <div className="w-12 h-12 rounded-full bg-cyan-900/20 text-cyan-400 flex items-center justify-center font-extrabold text-lg border border-cyan-500/20 group-hover:bg-cyan-500 group-hover:text-[#02112A]">ডা</div>
                    <div className="flex-1"><h4 className="text-[14px] font-extrabold text-white leading-tight mb-1">ডাঃ {docName}</h4><p className="text-[10px] text-gray-400 mb-1.5">{dept.name.split(' ')[0]} বিশেষজ্ঞ</p><div className="flex justify-between items-center"><span className="text-yellow-400 text-[10px] font-bold flex items-center gap-1"><Star className="w-3 h-3 fill-yellow-400" /> 4.{(8 + (idx%2))}</span><span className="bg-white/5 text-white text-[10px] font-bold px-2 py-0.5 rounded border border-white/10">৳ ۸০০</span></div></div>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* ================= ৭. সেরা ১০ ডায়াগনস্টিক সেন্টার ================= */}
      <section className="relative px-4 max-w-7xl mx-auto z-20 mb-24">
        <div className="flex flex-col md:flex-row justify-between items-end md:items-center mb-8 pb-4 border-b border-white/5">
          <div className="flex items-center gap-3"><div className="bg-cyan-500/20 p-2.5 rounded-xl border border-cyan-500/30 text-cyan-400"><Activity className="w-7 h-7" /></div><div><h2 className="text-2xl md:text-3xl font-extrabold text-white">সেরা ১০ ডায়াগনস্টিক সেন্টার</h2><p className="text-[13px] text-gray-400 mt-1">সেন্টারের প্রোফাইল এবং বিভাগ অনুযায়ী কনসালটেন্ট</p></div></div>
          <button onClick={() => openViewAll('diags')} className="mt-4 md:mt-0 flex items-center gap-2 px-6 py-2.5 bg-cyan-600/10 hover:bg-cyan-500 text-cyan-400 hover:text-[#02112A] border border-cyan-500/30 hover:border-transparent rounded-full text-sm font-extrabold shadow-lg"><Grid className="w-4 h-4" /> সকল ডায়াগনস্টিক দেখুন <ChevronRight className="w-4 h-4" /></button>
        </div>

        <div className="bg-[#0A1930]/60 backdrop-blur-md border border-white/5 p-2 rounded-2xl mb-8 flex overflow-x-auto gap-2 custom-scrollbar">
          {topDiagnostics.map((diag, idx) => (
             <button key={idx} onClick={() => setActiveTopDiag(diag)} className={`whitespace-nowrap px-6 py-2.5 rounded-xl text-[13px] font-extrabold transition-all duration-300 ${activeTopDiag === diag ? 'bg-gradient-to-r from-cyan-500 to-blue-600 text-white shadow-lg' : 'bg-transparent text-gray-400 hover:bg-white/5'}`}>{diag}</button>
          ))}
        </div>

        <div className="bg-gradient-to-r from-[#06142E] to-[#0A1930] border border-cyan-500/20 p-6 md:p-8 rounded-[32px] mb-10 shadow-lg flex flex-col md:flex-row justify-between items-center gap-6">
            <div className="flex flex-col md:flex-row items-center md:items-start text-center md:text-left gap-5">
                <div className="w-20 h-20 bg-cyan-900/30 rounded-2xl flex items-center justify-center text-cyan-400 border border-cyan-500/30 shrink-0"><Activity className="w-10 h-10" /></div>
                <div>
                    <h3 className="text-2xl md:text-3xl font-extrabold text-white mb-2">{activeTopDiag}</h3>
                    <p className="text-gray-400 text-sm flex items-center justify-center md:justify-start gap-1.5"><MapPin className="w-4 h-4 text-cyan-500" /> রংপুর সিটি কর্পোরেশন এলাকা</p>
                    <div className="flex flex-wrap justify-center md:justify-start gap-2 mt-3"><span className="bg-white/5 text-gray-300 text-[11px] px-2.5 py-1 rounded-md border border-white/10">অ্যাডভান্সড এমআরআই (MRI)</span><span className="bg-white/5 text-gray-300 text-[11px] px-2.5 py-1 rounded-md border border-white/10">ডিজিটাল এক্স-রে</span></div>
                </div>
            </div>
            <a href="tel:01700000000" className="w-full md:w-auto px-8 py-3.5 bg-cyan-500 hover:bg-cyan-400 text-[#02112A] font-extrabold rounded-xl transition-all shadow-lg flex justify-center items-center gap-2"><Phone className="w-5 h-5" /> টেস্টের সিরিয়াল নিন</a>
        </div>

        <div>
          <h3 className="text-xl font-bold text-white mb-6 border-b border-white/10 pb-3">এই সেন্টারের কনসালটেন্টগণ:</h3>
          {categorizedDoctorDepts.map((dept, index) => (
            <div key={index} className="mb-8">
              <div className="flex items-center gap-2 mb-4"><Stethoscope className="w-5 h-5 text-cyan-400" /><h4 className="text-lg font-extrabold text-gray-200">{dept.name}</h4></div>
              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
                {dept.docs.map((docName, idx) => (
                  <div key={idx} onClick={() => openDoctorProfile(`ডাঃ ${docName}`, dept.name.split(' ')[0])} className="bg-gradient-to-br from-[#0A1930] to-[#02112A] border border-white/5 hover:border-cyan-500/30 p-4 rounded-2xl group transition-all duration-300 hover:-translate-y-1 cursor-pointer flex items-center gap-4 relative shadow-sm">
                    <div className="w-12 h-12 rounded-full bg-cyan-900/20 text-cyan-400 flex items-center justify-center font-extrabold text-lg border border-cyan-500/20 group-hover:bg-cyan-500 group-hover:text-[#02112A]">ডা</div>
                    <div className="flex-1"><h4 className="text-[14px] font-extrabold text-white leading-tight mb-1">ডাঃ {docName}</h4><p className="text-[10px] text-gray-400 mb-1.5">{dept.name.split(' ')[0]} বিশেষজ্ঞ</p><div className="flex justify-between items-center"><span className="text-yellow-400 text-[10px] font-bold flex items-center gap-1"><Star className="w-3 h-3 fill-yellow-400" /> 4.{(5 + (idx%3))}</span><span className="bg-white/5 text-white text-[10px] font-bold px-2 py-0.5 rounded border border-white/10">৳ ৬০০</span></div></div>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* ================= ৮. বিশেষায়িত চিকিৎসা কেন্দ্র ================= */}
      <section id="specialized-section" className="relative px-4 max-w-7xl mx-auto z-20 mb-24">
        <div className="flex flex-col md:flex-row justify-between items-end md:items-center mb-10 pb-4 border-b border-white/5">
          <div className="flex items-center gap-3"><div className="bg-purple-500/20 p-2.5 rounded-xl border border-purple-500/30 text-purple-400"><Activity className="w-7 h-7" /></div><div><h2 className="text-2xl md:text-3xl font-extrabold text-white tracking-tight">বিশেষায়িত চিকিৎসা কেন্দ্র</h2><p className="text-[13px] text-gray-400 mt-1">নির্দিষ্ট রোগের জন্য স্পেশালাইজড হাসপাতাল ও রিহ্যাব সেন্টার</p></div></div>
          <button onClick={() => openViewAll('spec')} className="mt-4 md:mt-0 flex items-center gap-2 px-6 py-2.5 bg-purple-600/10 hover:bg-purple-500 text-purple-300 hover:text-white border border-purple-500/30 rounded-full font-extrabold shadow-lg"><Grid className="w-4 h-4" /> সকল সেন্টার দেখুন <ChevronRight className="w-4 h-4" /></button>
        </div>

        <div className="bg-[#0A1930]/60 backdrop-blur-md border border-white/5 p-2 rounded-2xl mb-8 flex overflow-x-auto gap-2 custom-scrollbar">
          {specializedCentersList.map((center, idx) => (
             <button key={idx} onClick={() => setActiveSpecialCenter(center.name)} className={`whitespace-nowrap px-6 py-2.5 rounded-xl text-[13px] font-extrabold transition-all duration-300 ${activeSpecialCenter === center.name ? `bg-gradient-to-r from-${center.color}-500 to-${center.color}-600 text-white shadow-lg` : 'bg-transparent text-gray-400 hover:bg-white/5'}`}>{center.name}</button>
          ))}
        </div>

        {(() => {
          const activeData = specializedCentersList.find(c => c.name === activeSpecialCenter) || specializedCentersList[0];
          return (
            <>
              <div className={`bg-gradient-to-r from-[#06142E] to-[#0A1930] border border-${activeData.color}-500/20 p-6 md:p-8 rounded-[32px] mb-10 shadow-lg flex flex-col md:flex-row justify-between items-center gap-6`}>
                  <div className="flex flex-col md:flex-row items-center md:items-start text-center md:text-left gap-5">
                      <div className={`w-20 h-20 bg-${activeData.color}-900/30 rounded-2xl flex items-center justify-center text-${activeData.color}-400 border border-${activeData.color}-500/30 shrink-0 shadow-inner`}><Building2 className="w-10 h-10" /></div>
                      <div>
                          <h3 className="text-2xl md:text-3xl font-extrabold text-white mb-2">{activeData.name}</h3>
                          <p className="text-gray-400 text-sm flex items-center justify-center md:justify-start gap-1.5"><MapPin className={`w-4 h-4 text-${activeData.color}-500`} /> {activeData.location}</p>
                          <div className="flex flex-wrap justify-center md:justify-start gap-2 mt-3"><span className="bg-white/5 text-gray-300 text-[11px] px-2.5 py-1 rounded-md flex items-center gap-1 border border-white/10"><ShieldCheck className="w-3 h-3 text-green-400"/> {activeData.category}</span><span className="bg-white/5 text-gray-300 text-[11px] px-2.5 py-1 rounded-md flex items-center gap-1 border border-white/10"><ShieldCheck className="w-3 h-3 text-green-400"/> {activeData.highlight}</span></div>
                      </div>
                  </div>
                  <a href={`tel:${activeData.phone}`} className={`w-full md:w-auto px-8 py-3.5 bg-${activeData.color}-500 hover:bg-${activeData.color}-400 text-[#02112A] font-extrabold rounded-xl transition-all shadow-lg flex justify-center items-center gap-2`}><Phone className="w-5 h-5" /> যোগাযোগ করুন</a>
              </div>

              <div>
                <h3 className="text-xl font-bold text-white mb-6 border-b border-white/10 pb-3">এই সেন্টারের বিশেষজ্ঞগণ:</h3>
                <div className="mb-8">
                  <div className="flex items-center gap-2 mb-4">
                    <Stethoscope className={`w-5 h-5 text-${activeData.color}-400`} />
                    <h4 className="text-lg font-extrabold text-gray-200">{activeData.category} বিভাগ</h4>
                  </div>
                  <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
                    {[1, 2, 3, 4].map((idx) => (
                      <div key={idx} onClick={() => openDoctorProfile(`ডাঃ স্পেশালিস্ট ${idx}`, activeData.category)} className={`bg-[#0A1930] border border-white/5 hover:border-${activeData.color}-500/30 p-4 rounded-2xl group transition-all duration-300 hover:-translate-y-1 cursor-pointer flex items-center gap-4 relative shadow-sm`}>
                        <div className={`w-12 h-12 rounded-full bg-${activeData.color}-900/20 text-${activeData.color}-400 flex items-center justify-center font-extrabold text-lg border border-${activeData.color}-500/20 group-hover:bg-${activeData.color}-500 group-hover:text-[#02112A] transition-colors shrink-0`}>স্পে</div>
                        <div className="flex-1"><h4 className={`text-[14px] font-extrabold text-white group-hover:text-${activeData.color}-300 transition-colors leading-tight mb-1`}>ডাঃ স্পেশালিস্ট {idx}</h4><p className="text-[10px] text-gray-400 mb-1.5">{activeData.highlight} বিশেষজ্ঞ</p><div className="flex justify-between items-center"><span className="text-yellow-400 text-[10px] font-bold flex items-center gap-1"><Star className="w-3 h-3 fill-yellow-400" /> 4.{(8 + (idx%2))}</span><span className="bg-white/5 text-white text-[10px] font-bold px-2 py-0.5 rounded border border-white/10">৳ ৬০০</span></div></div>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            </>
          );
        })()}
      </section>

      {/* ================= ৯. রিয়েল-টাইম রোগীর মতামত ================= */}
      <section className="relative px-4 max-w-7xl mx-auto z-20 mb-24">
         <div className="flex flex-col md:flex-row justify-between items-end md:items-center mb-10 pb-4 border-b border-white/5">
            <div className="flex items-center gap-3"><div className="bg-yellow-500/20 p-2.5 rounded-xl border border-yellow-500/30 text-yellow-400"><MessageSquare className="w-7 h-7" /></div><div><h2 className="text-2xl md:text-3xl font-extrabold text-white">রোগীদের সাম্প্রতিক অভিজ্ঞতা</h2><p className="text-[13px] text-gray-400 mt-1">চিকিৎসা নেওয়া রোগীদের ভেরিফাইড মতামত ও রেটিং</p></div></div>
            <button onClick={() => setIsGuestReviewOpen(true)} className="mt-4 md:mt-0 flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-yellow-600 to-yellow-500 text-black hover:scale-105 rounded-xl transition-all text-sm font-extrabold shadow-lg"><MessageSquare className="w-4 h-4" /> আপনার মতামত দিন</button>
         </div>

         <div className="flex gap-6 overflow-x-auto custom-scrollbar pb-8 pt-2">
            {[
              { name: "শফিকুল ইসলাম", doctor: "ডাঃ আব্দুল্লাহ আল মামুন", text: "খুব ভালো ডাক্তার। আমার বাবার হার্টের সমস্যার জন্য দেখিয়েছিলাম, এখন আলহামদুলিল্লাহ অনেক সুস্থ।", rating: 5, date: "২ দিন আগে" },
              { name: "নাসরিন আক্তার", doctor: "ডাঃ শারমিন আক্তার", text: "উনার ব্যবহার খুব ভালো। রোগীকে অনেক সময় নিয়ে দেখেন এবং সুন্দর করে বুঝিয়ে বলেন। আমি খুবই সন্তুষ্ট।", rating: 5, date: "১ সপ্তাহ আগে" },
              { name: "মাহমুদ হাসান", doctor: "ডাঃ কামরুল হাসান", text: "সিরিয়াল পাওয়া একটু কঠিন, তবে চিকিৎসা খুবই উন্নত মানের। চেম্বারের পরিবেশও ভালো।", rating: 4, date: "৩ সপ্তাহ আগে" },
              { name: "তৌহিদুল ইসলাম", doctor: "ডাঃ শাহরিয়ার হোসেন", text: "উনার ডায়াগনোসিস একদম নিখুঁত। অযথাই টেস্ট দেন না। ঔষধ খাওয়ার পর থেকে আমার মাইগ্রেনের ব্যথা অনেক কম।", rating: 5, date: "১ মাস আগে" },
            ].map((review, idx) => (
               <div key={idx} className="bg-[#0A1930]/60 backdrop-blur-md border border-white/10 p-6 rounded-[24px] min-w-[320px] md:min-w-[380px] shadow-lg">
                  <div className="flex justify-between items-start mb-4">
                     <div className="flex items-center gap-3"><div className="w-11 h-11 rounded-full bg-yellow-500/20 text-yellow-400 flex items-center justify-center font-extrabold text-lg border border-yellow-500/30 shadow-inner">{review.name.charAt(0)}</div><div><h4 className="text-[15px] font-bold text-white leading-tight mb-0.5">{review.name}</h4><p className="text-[11px] text-gray-500 font-medium">{review.date}</p></div></div>
                     <div className="flex gap-0.5 bg-white/5 px-2 py-1 rounded-lg border border-white/10">{[...Array(review.rating)].map((_, i) => (<Star key={i} className="w-3.5 h-3.5 fill-yellow-400 text-yellow-400" />))}</div>
                  </div>
                  <div className="bg-[#02112A]/60 p-3.5 rounded-xl border border-white/5 mb-4"><p className="text-[11px] text-gray-400 font-medium mb-1">যাকে দেখিয়েছেন:</p><p className="text-[13px] text-cyan-300 font-bold flex items-center gap-1.5"><Stethoscope className="w-3.5 h-3.5" /> {review.doctor}</p></div>
                  <p className="text-[13px] text-gray-300 font-medium leading-relaxed italic line-clamp-4 relative"><span className="text-2xl text-yellow-500/20 absolute -top-2 -left-2">"</span>{review.text}<span className="text-2xl text-yellow-500/20 absolute -bottom-4 ml-1">"</span></p>
               </div>
            ))}
         </div>
      </section>

      {/* ================= ১০. ব্লাড ব্যাংক ও রক্তদাতা সেকশন ================= */}
      <section id="blood-bank" className="relative py-16 px-4 max-w-[1400px] mx-auto w-full z-10 pt-8 scroll-mt-10">
        <div className="bg-[#06142E]/60 backdrop-blur-3xl border border-white/5 p-6 md:p-10 rounded-[32px] shadow-[0_20px_50px_rgba(0,0,0,0.3)]">
          <div className="flex flex-col items-center text-center mb-10"><div className="inline-flex items-center justify-center p-3 bg-[#0A1930] rounded-2xl mb-5 border border-white/10 shadow-inner"><Droplet className="w-7 h-7 text-cyan-400" /></div><h2 className="text-3xl md:text-4xl font-extrabold text-white tracking-tight mb-3">ব্লাড ব্যাংক ডিরেক্টরি</h2><p className="text-[14px] text-gray-400 max-w-lg font-medium">জরুরী রক্তের প্রয়োজনে রংপুরের বিশ্বস্ত ব্লাড ব্যাংক ও ডোনারদের তালিকা। আপনার কাঙ্ক্ষিত রক্তের গ্রুপ নির্বাচন করুন।</p></div>
          <div className="flex flex-wrap justify-center gap-2.5 mb-10">
            {bloodGroups.map((bg, idx) => (
              <button key={idx} onClick={() => setActiveBloodGroup(bg)} className={`px-6 py-2.5 rounded-full text-[13px] font-extrabold transition-all duration-300 ${activeBloodGroup === bg ? 'bg-cyan-400 text-[#02112A] shadow-[0_0_20px_rgba(34,211,238,0.4)] scale-105' : 'bg-[#0A1930] text-gray-400 hover:bg-white/10 hover:text-white border border-white/5'}`}>{bg} {bg !== 'সকল' && 'রক্ত'}</button>
            ))}
          </div>
          {filteredBloodBanks.length > 0 ? (
            <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4">
              {filteredBloodBanks.map((bank) => (
                <div key={bank.id} onClick={() => openBloodBankProfile(bank)} className="bg-gradient-to-b from-[#0A1930]/80 to-transparent border border-white/5 hover:border-cyan-500/40 p-5 rounded-[24px] group transition-all duration-500 hover:-translate-y-2 hover:shadow-[0_15px_30px_rgba(34,211,238,0.15)] flex flex-col items-center text-center cursor-pointer relative overflow-hidden">
                  <div className="w-12 h-12 rounded-full bg-[#02112A] text-cyan-400 flex items-center justify-center font-extrabold border border-white/5 group-hover:bg-cyan-400 group-hover:text-[#02112A] transition-all duration-300 mb-3 z-10 shadow-inner"><Droplet className="w-5 h-5" /></div>
                  <span className="text-[9px] font-bold text-gray-400 bg-white/5 px-2.5 py-0.5 rounded-full mb-3 uppercase tracking-wider z-10 border border-white/5">{bank.type}</span>
                  <h4 className="text-[13px] font-extrabold text-white mb-2 leading-snug group-hover:text-cyan-300 transition-colors line-clamp-2 z-10 h-10 flex items-center justify-center">{bank.name}</h4>
                  <p className="text-[10px] text-gray-500 flex items-center justify-center gap-1.5 mb-4 z-10 w-full"><MapPin className="w-3.5 h-3.5 text-cyan-500/50 shrink-0" /> <span className="truncate">{bank.location}</span></p>
                  <div className="mt-auto w-full pt-3 border-t border-white/5 z-10">
                     <div className="flex flex-wrap justify-center gap-1.5">
                       {bank.available.slice(0, 3).map((grp: string, i: number) => (<span key={i} className={`text-[10px] font-extrabold px-1.5 py-0.5 rounded border shadow-inner ${activeBloodGroup === grp ? 'bg-cyan-400 text-[#02112A] border-cyan-400' : 'bg-[#02112A] text-cyan-300 border-cyan-500/20'}`}>{grp}</span>))}
                       {bank.available.length > 3 && <span className="text-[10px] font-bold text-gray-500 bg-white/5 px-1.5 py-0.5 rounded border border-white/5">+{bank.available.length - 3}</span>}
                     </div>
                  </div>
                </div>
              ))}
            </div>
          ) : (
            <div className="text-center py-16 bg-[#0A1930]/50 rounded-[24px] border border-white/5"><AlertCircle className="w-12 h-12 text-cyan-500/30 mx-auto mb-4" /><h3 className="text-xl font-bold text-white mb-2">দুঃখিত, স্টকে নেই</h3><p className="text-gray-400 text-sm">অনুগ্রহ করে কিছুক্ষণ পর আবার চেষ্টা করুন।</p></div>
          )}
        </div>
      </section>
      
      {/* ================= ১১. ২৪/৭ ইমার্জেন্সি জোন ================= */}
      <section className="relative px-4 max-w-7xl mx-auto z-20 mb-24">
         <div className="flex flex-col md:flex-row justify-between items-end md:items-center mb-8 pb-4 border-b border-white/5">
            <div className="flex items-center gap-3"><div className="bg-red-500/20 p-2.5 rounded-xl border border-red-500/30 text-red-400 animate-pulse"><Activity className="w-7 h-7" /></div><div><h2 className="text-2xl md:text-3xl font-extrabold text-white">২৪/৭ ইমার্জেন্সি জোন</h2><p className="text-[13px] text-gray-400 mt-1">জরুরী মুহূর্তে আইসিইউ, অ্যাম্বুলেন্স ও সার্বক্ষণিক খোলা হাসপাতাল</p></div></div>
         </div>
         <div className="grid grid-cols-1 md:grid-cols-2 gap-5 mb-8">
            <div className="bg-gradient-to-r from-red-600/10 to-red-900/20 border border-red-500/30 p-6 rounded-[24px] flex items-center justify-between group shadow-lg">
              <div><h3 className="text-xl font-extrabold text-white mb-1.5">জরুরী হটলাইন</h3><p className="text-sm text-red-200/70 mb-5 font-medium">যেকোনো মেডিকেল ইমার্জেন্সিতে সরাসরি কল করুন</p><a href="tel:16263" className="inline-flex bg-red-600 hover:bg-red-500 text-white px-6 py-3 rounded-xl font-bold items-center gap-2 shadow-[0_0_20px_rgba(239,68,68,0.4)] transition-all"><Phone className="w-4 h-4" /> ১৬২৬৩ (টোল ফ্রি)</a></div>
              <div className="w-16 h-16 bg-red-500/20 rounded-full flex items-center justify-center border border-red-500/30 group-hover:scale-110 transition-transform"><Phone className="w-7 h-7 text-red-400" /></div>
            </div>
            <div className="bg-gradient-to-r from-orange-600/10 to-yellow-900/20 border border-orange-500/30 p-6 rounded-[24px] flex items-center justify-between group shadow-lg">
              <div><h3 className="text-xl font-extrabold text-white mb-1.5">জরুরী অ্যাম্বুলেন্স</h3><p className="text-sm text-orange-200/70 mb-5 font-medium">আইসিইউ ও ফ্রিজিং অ্যাম্বুলেন্স খুঁজুন</p><button onClick={() => document.getElementById('ambulance-section')?.scrollIntoView({behavior: 'smooth'})} className="bg-orange-500 hover:bg-orange-400 text-[#02112A] px-6 py-3 rounded-xl font-extrabold flex items-center gap-2 shadow-[0_0_20px_rgba(249,115,22,0.4)] transition-all"><Activity className="w-4 h-4" /> ডিরেক্টরি দেখুন</button></div>
              <div className="w-16 h-16 bg-orange-500/20 rounded-full flex items-center justify-center border border-orange-500/30 group-hover:scale-110 transition-transform"><Activity className="w-7 h-7 text-orange-400" /></div>
            </div>
         </div>
      </section>

      {/* ================= ১২. রংপুরের সেরা ১০০ অ্যাম্বুলেন্স ডিরেক্টরি ================= */}
      <section id="ambulance-section" className="relative px-4 max-w-7xl mx-auto z-20 mb-24 pt-8">
         <div className="flex flex-col md:flex-row justify-between items-end md:items-center mb-8 pb-4 border-b border-white/5">
            <div className="flex items-center gap-3"><div className="bg-cyan-500/20 p-2.5 rounded-xl border border-cyan-500/30 text-cyan-400"><Activity className="w-7 h-7" /></div><div><h2 className="text-2xl md:text-3xl font-extrabold text-white tracking-tight">সেরা ১০০ অ্যাম্বুলেন্স</h2><p className="text-[13px] text-gray-400 mt-1">ভাড়া আলোচনা সাপেক্ষে, সরাসরি ফোন করে কনফার্ম করুন</p></div></div>
         </div>
         <div className="flex flex-col md:flex-row gap-4 mb-8 bg-[#0A1930]/40 p-3 rounded-2xl border border-white/5 backdrop-blur-sm">
            <div className="flex gap-2 overflow-x-auto custom-scrollbar flex-1 pb-2 md:pb-0">
              {ambulanceCategories.map((cat, idx) => (
                 <button key={idx} onClick={() => setActiveAmbulance(cat)} className={`whitespace-nowrap px-5 py-2.5 rounded-xl text-[13px] font-extrabold transition-all duration-300 ${activeAmbulance === cat ? 'bg-cyan-500 text-[#02112A] shadow-[0_5px_15px_rgba(34,211,238,0.4)]' : 'bg-white/5 text-gray-400 hover:bg-white/10 border border-white/5'}`}>{cat}</button>
              ))}
            </div>
            <div className="w-full md:w-64 shrink-0">
               <select value={activeAmbulanceArea} onChange={(e) => setActiveAmbulanceArea(e.target.value)} className="w-full bg-[#02112A] border border-cyan-500/30 rounded-xl px-4 py-2.5 text-cyan-100 font-bold outline-none focus:border-cyan-400 transition-all shadow-inner appearance-none text-[13px]">
                 <option value="">📍 যেকোনো এলাকা (স্ট্যান্ড)</option><option value="মেডিকেল মোড়">মেডিকেল মোড়</option><option value="ধাপ">ধাপ, জেল রোড</option><option value="শাপলা চত্বর">শাপলা চত্বর</option>
               </select>
            </div>
         </div>
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
            {filteredAmbulances.map((amb, i) => {
                const isICU = amb.type.includes('ICU') || amb.type.includes('NICU');
                return (
                  <div key={i} className="bg-gradient-to-br from-[#0A1930]/80 to-[#02112A] backdrop-blur-md border border-white/10 hover:border-cyan-500/30 p-5 rounded-2xl group transition-all duration-300 hover:-translate-y-1 shadow-[0_10px_30px_rgba(34,211,238,0.15)] flex flex-col h-full relative overflow-hidden">
                      <h4 className="text-[17px] font-extrabold text-white mb-2 leading-tight">{amb.name}</h4>
                      <div className="mb-4"><span className={`text-[11px] font-bold px-2.5 py-1 rounded-md border flex items-center gap-1.5 inline-flex ${isICU ? 'bg-red-500/20 text-red-400 border-red-500/30' : 'bg-blue-500/20 text-blue-300 border-blue-500/30'}`}><Activity className="w-3 h-3" /> {amb.type}</span></div>
                      <div className="mt-auto space-y-2 mb-6 bg-white/5 p-3 rounded-xl border border-white/5">
                        <p className="text-[12px] text-gray-300 font-medium flex items-center gap-2"><MapPin className="w-4 h-4 text-cyan-500/70" /> <span>স্ট্যান্ড: <span className="text-white font-bold">{amb.stand}</span></span></p>
                      </div>
                      <div className="flex gap-3">
                        <button onClick={() => setSelectedAmbulance(amb)} className="w-1/2 py-3 bg-[#02112A] hover:bg-white/10 text-gray-300 font-extrabold rounded-xl border border-white/10 text-[12px]">বিস্তারিত</button>
                        <a href={`tel:${amb.phone.replace(/[^0-9]/g, '')}`} className="w-1/2 py-3 bg-cyan-500/10 hover:bg-cyan-500 text-cyan-400 hover:text-white font-extrabold rounded-xl border border-cyan-500/20 flex justify-center items-center gap-1.5 text-[13px] inline-flex"><Phone className="w-3.5 h-3.5" /> Call Now</a>
                      </div>
                  </div>
                );
            })}
         </div>
      </section>

      {/* ================= ১৩. হাই-কোয়ালিটি প্রফেশনাল ফুটার ================= */}
      <footer className="relative pt-16 pb-8 border-t border-white/10 bg-[#0A1930]/80 backdrop-blur-xl overflow-hidden mt-10">
         <div className="max-w-7xl mx-auto px-4 relative z-10">
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10 mb-12">
               <div className="space-y-6">
                  <div className="flex items-center gap-2"><HeartPulse className="text-blue-400 w-8 h-8" /><h2 className="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-cyan-300">হামার ডাক্তার</h2></div>
                  <p className="text-[13px] text-gray-400 leading-relaxed">১০০% দালালমুক্ত রংপুরের ১ নাম্বার ডাক্টার খোজার পাবলিক পোর্টাল। ইমার্জেন্সি মুহূর্তে সঠিক চিকিৎসা সেবা নিশ্চিত করাই আমাদের লক্ষ্য।</p>
                  <div className="space-y-3 pt-2">
                     <p className="text-[13px] text-gray-300 flex items-center gap-2"><Phone className="w-4 h-4 text-cyan-500" /> +৮৮০ ১৭০০-০০০০০০</p>
                     <p className="text-[13px] text-gray-300 flex items-center gap-2"><MapPin className="w-4 h-4 text-red-400" /> ধাপ, মেডিকেল মোড়, রংপুর</p>
                  </div>
               </div>
               <div>
                  <h3 className="text-[16px] font-bold text-white mb-6 border-b border-white/10 pb-2 inline-block">গুরুত্বপূর্ণ লিংক</h3>
                  <ul className="space-y-3">
                     <li><button onClick={() => document.getElementById('directory-section')?.scrollIntoView({behavior: 'smooth'})} className="text-[13px] text-gray-400 hover:text-cyan-400 transition-colors flex items-center gap-2"><ChevronRight className="w-3 h-3" /> বিশেষজ্ঞ ডাক্তারগণ</button></li>
                     <li><button onClick={() => document.getElementById('hospital-section')?.scrollIntoView({behavior: 'smooth'})} className="text-[13px] text-gray-400 hover:text-cyan-400 transition-colors flex items-center gap-2"><ChevronRight className="w-3 h-3" /> হাসপাতাল ও ক্লিনিক</button></li>
                  </ul>
               </div>
               <div>
                  <h3 className="text-[16px] font-bold text-white mb-6 border-b border-white/10 pb-2 inline-block">পার্টনার ও রেজিস্ট্রেশন</h3>
                  <ul className="space-y-3">
                     <li><button onClick={() => setIsDocRegOpen(true)} className="text-[13px] text-cyan-300 flex items-center gap-2 font-medium bg-cyan-500/10 px-3 py-2.5 rounded-lg w-full text-left"><UserPlus className="w-4 h-4" /> ডক্টর রেজিস্ট্রেশন</button></li>
                     <li><button onClick={() => setIsHospRegOpen(true)} className="text-[13px] text-cyan-300 flex items-center gap-2 font-medium bg-cyan-500/10 px-3 py-2.5 rounded-lg w-full text-left"><Building2 className="w-4 h-4" /> হাসপাতাল রেজিস্ট্রেশন</button></li>
                     <li><button onClick={() => setIsDiagRegOpen(true)} className="text-[13px] text-cyan-300 flex items-center gap-2 font-medium bg-cyan-500/10 px-3 py-2.5 rounded-lg w-full text-left"><Activity className="w-4 h-4" /> ডায়াগনস্টিক রেজিস্ট্রেশন</button></li>                 
                  </ul>
               </div>
               <div>
                  <h3 className="text-[16px] font-bold text-white mb-6 border-b border-white/10 pb-2 inline-block">সাহায্য ও অভিযোগ</h3>
                  <p className="text-[12px] text-gray-400 mb-5 leading-relaxed">কোনো ডাক্তার, অ্যাম্বুলেন্স বা হাসপাতাল অতিরিক্ত ফি দাবি করলে অথবা দালালের খপ্পরে পড়লে সরাসরি আমাদের জানান।</p>
                  <button onClick={() => setIsReportOpen(true)} className="text-[13px] text-red-400 hover:text-white transition-all flex items-center gap-2 font-bold bg-red-500/10 hover:bg-red-600 px-4 py-3 rounded-xl border border-red-500/20 w-full justify-center mb-6 shadow-sm"><ShieldAlert className="w-4 h-4" /> অভিযোগ করুন (Report)</button>
               </div>
            </div>
            <div className="pt-6 border-t border-white/10 flex flex-col md:flex-row justify-between items-center gap-4">
               <p className="text-[12px] text-gray-500 font-medium">© {new Date().getFullYear()} হামার ডাক্তার. সর্বস্বত্ব সংরক্ষিত।</p>
            </div>
         </div>
      </footer>      

      {/* ================= MODALS SECTION ================= */}

      {/* Unified View All Modal */}
      {viewAllConfig.isOpen && (
        <ModalWrap isOpen={true} onClose={() => setViewAllConfig(prev => ({...prev, isOpen: false}))} mw="max-w-5xl">
          <div className="p-6 border-b border-white/10 bg-[#06142E] sticky top-0 z-10 flex justify-between items-center">
            <div><h2 className="text-2xl font-black text-white">{viewAllConfig.title}</h2><p className="text-sm text-gray-400 mt-1">{viewAllConfig.subtitle}</p></div>
          </div>
          <div className="p-6 overflow-y-auto custom-scrollbar max-h-[70vh]">
            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
              {viewAllConfig.items.map((it:any, i:number) => {
                const name = typeof it === 'object' ? it.name : it;
                return (
                  <button key={i} onClick={() => viewAllConfig.onSelect(it)} className="p-4 bg-white/5 hover:bg-cyan-500/10 border border-white/10 rounded-2xl flex items-center text-left gap-4 transition-all group">
                    <div className="w-12 h-12 shrink-0 rounded-xl bg-cyan-900/30 text-cyan-400 flex items-center justify-center border border-cyan-500/20 group-hover:bg-cyan-500 group-hover:text-[#02112A] transition-colors"><viewAllConfig.icon className="w-6 h-6" /></div>
                    <span className="text-[14px] font-bold text-gray-200 group-hover:text-white leading-snug line-clamp-2">{name}</span>
                  </button>
                )
              })}
            </div>
          </div>
        </ModalWrap>
      )}

      {/* Blood Bank Profile Modal */}
      {isBloodModalOpen && selectedBloodBank && (
         <ModalWrap isOpen={true} onClose={() => setIsBloodModalOpen(false)} mw="max-w-md">
            <div className="p-8 relative text-center">
              <div className="w-20 h-20 mx-auto bg-cyan-500/10 rounded-full flex items-center justify-center text-4xl font-black text-cyan-400 mb-4 border border-cyan-500/20"><Droplet className="w-10 h-10" /></div>
              <h2 className="text-xl font-black text-white leading-tight">{selectedBloodBank.name}</h2>
              <p className="text-gray-400 text-[13px] mt-2 flex items-center justify-center gap-1"><MapPin className="w-3.5 h-3.5 text-cyan-500"/> {selectedBloodBank.location}</p>
              <div className="bg-[#02112A] p-5 rounded-2xl mt-6 mb-6 border border-white/5 space-y-4">
                <div>
                    <p className="text-xs text-gray-500 font-bold mb-2">উপলব্ধ রক্তের গ্রুপ (এভেইলেবল):</p>
                    <div className="flex flex-wrap gap-2 justify-center">{selectedBloodBank.available.map((grp: string, i: number) => (<span key={i} className="bg-cyan-500/20 text-cyan-400 border border-cyan-500/30 px-3 py-1 rounded-lg text-sm font-extrabold">{grp}</span>))}</div>
                </div>
              </div>
              <a href={`tel:${selectedBloodBank.phone.replace(/[^0-9]/g, '')}`} className="w-full bg-gradient-to-r from-blue-600 to-cyan-500 text-white py-4 rounded-2xl font-extrabold flex items-center justify-center gap-2 shadow-lg"><Phone className="w-5 h-5" /> কল করুন</a>
            </div>
         </ModalWrap>
      )}

      {/* Guest Review Modal */}
      {isGuestReviewOpen && (
        <ModalWrap isOpen={true} onClose={() => setIsGuestReviewOpen(false)} mw="max-w-lg">
           <div className="p-8 relative">
              <h2 className="text-2xl font-bold text-white mb-2 flex items-center gap-2"><MessageSquare className="text-yellow-500" /> মতামত দিন</h2>
              <form onSubmit={handleGuestReviewSubmit} className="space-y-4 mt-6">
                <div><label className={lblCls}>আপনার নাম</label><input required type="text" className={inputCls} /></div>
                <div><label className={lblCls}>ডাক্তারের নাম</label><input required type="text" className={inputCls} /></div>
                <button type="submit" disabled={guestReviewSubmitting} className="w-full py-3.5 bg-gradient-to-r from-yellow-600 to-yellow-500 text-black font-extrabold rounded-xl mt-4">{guestReviewSubmitting ? 'সাবমিট হচ্ছে...' : 'রিভিউ জমা দিন'}</button>
              </form>
           </div>
        </ModalWrap>
      )}

      {/* Doctor Profile Modal (With Suggestions) */}
      {isModalOpen && selectedDoc && (
        <ModalWrap isOpen={true} onClose={() => setIsModalOpen(false)} mw="max-w-5xl">
            <div className="p-5 md:p-8">
              <div className="flex flex-col md:flex-row gap-6 items-start mb-8 pb-8 border-b border-white/10 relative">
                <div className="w-28 h-28 md:w-36 md:h-36 shrink-0 rounded-[28px] bg-gradient-to-br from-cyan-900/40 to-blue-900/40 border border-cyan-500/30 flex items-center justify-center font-extrabold text-5xl md:text-6xl text-cyan-400 shadow-inner">{getInitial(selectedDoc.name)}</div>
                <div className="flex-1 w-full">
                  <div className="flex flex-wrap items-center gap-3 mb-2"><h2 className="text-2xl md:text-3xl font-extrabold text-white">{selectedDoc.name}</h2></div>
                  <p className="text-cyan-400 font-bold text-lg mb-1.5">{selectedDoc.specialty}</p>
                  <p className="text-gray-300 font-medium flex items-center gap-2 text-[13px] mb-4"><GraduationCap className="w-4 h-4 text-cyan-500/70" /> {selectedDoc.degree}</p>
                </div>
                <div className="w-full md:w-auto bg-[#02112A] border border-cyan-500/20 p-5 rounded-2xl flex flex-col items-center md:items-end">
                  <p className="text-gray-400 text-xs font-bold uppercase tracking-wider mb-1">চেম্বার ফি</p>
                  <h3 className="text-3xl font-extrabold text-white mb-4">৳ {selectedDoc.fee}</h3>
                  <a href={`tel:${selectedDoc.phone}`} className="px-8 py-3.5 bg-cyan-500 text-[#02112A] font-extrabold rounded-xl shadow-lg flex items-center gap-2"><Phone className="w-5 h-5" /> সিরিয়াল নিন</a>
                </div>
              </div>
              <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                <div className="bg-[#02112A]/50 border border-white/5 p-5 rounded-2xl">
                  <h4 className="text-white font-bold flex items-center gap-2 mb-3"><MapPin className="w-5 h-5 text-cyan-400" /> চেম্বারের ঠিকানা ও সময়</h4>
                  <p className="text-sm text-gray-300">{selectedDoc.chamber}</p>
                  <p className="text-sm text-gray-300 font-medium flex items-center gap-2 mt-2"><Calendar className="w-4 h-4 text-cyan-500/50" /> {selectedDoc.time}</p>
                </div>
                <div className="bg-[#02112A]/50 border border-white/5 p-5 rounded-2xl flex flex-col">
                    <h4 className="text-white font-bold flex items-center gap-2 mb-3"><MessageSquare className="w-4 h-4 text-cyan-400" /> রোগীর মতামত</h4>
                    <div className="space-y-3 flex-1">{selectedDoc.reviews.map((r, i) => (<div key={i} className="bg-[#0A1930] p-3 rounded-xl border border-white/5"><div className="flex justify-between items-start mb-1"><p className="text-[12px] font-bold text-gray-200">{r.user}</p></div><p className="text-[11px] text-gray-400 italic">"{r.text}"</p></div>))}</div>
                </div>
              </div>
            </div>
        </ModalWrap>
      )}

      {/* Ambulance Profile Modal */}
      {selectedAmbulance && (
        <ModalWrap isOpen={true} onClose={() => setSelectedAmbulance(null)} mw="max-w-3xl">
            <div className="p-6 md:p-10">
               <div className="flex flex-col md:flex-row gap-6 mb-8 border-b border-white/5 pb-8">
                  <div className="w-20 h-20 bg-cyan-500/20 rounded-2xl flex items-center justify-center border border-cyan-500/30 text-cyan-400 shrink-0"><Activity className="w-10 h-10" /></div>
                  <div>
                    <h2 className="text-2xl md:text-3xl font-extrabold text-white leading-tight mb-2">{selectedAmbulance.name}</h2>
                    <p className="text-[14px] font-bold mb-3 text-cyan-400">{selectedAmbulance.type}</p>
                    <p className="text-[13px] text-gray-400 flex items-center gap-1.5 font-medium"><MapPin className="w-4 h-4 text-cyan-500/70" /> <b>স্ট্যান্ড:</b> {selectedAmbulance.stand}, রংপুর</p>
                  </div>
               </div>
               <div className="flex gap-3 mt-6">
                 <button onClick={() => window.open('https://wa.me/8801700000000', '_blank')} className="w-1/2 bg-green-600/20 text-green-400 border border-green-500/30 rounded-xl py-3.5 font-bold flex justify-center items-center gap-2"><MessageSquare className="w-4 h-4" /> WhatsApp</button>
                 <a href={`tel:${selectedAmbulance.phone}`} className="w-1/2 bg-gradient-to-r from-blue-600 to-cyan-500 text-white rounded-xl py-3.5 font-extrabold shadow-[0_5px_20px_rgba(34,211,238,0.4)] flex justify-center items-center gap-2"><Phone className="w-4 h-4" /> Call Now</a>
               </div>
            </div>
        </ModalWrap>
      )}

      {/* Registration Modals (Doctor, Hospital, Diagnostic) */}
      <ModalWrap isOpen={isDocRegOpen} onClose={() => {setIsDocRegOpen(false); setDocRegStep(1);}} mw="max-w-2xl">
        <div className="p-6 md:p-10">
          <div className="mb-8 text-center"><h2 className="text-2xl font-extrabold text-white"><UserPlus className="inline w-6 h-6 text-cyan-400"/> ডক্টর রেজিস্ট্রেশন</h2></div>
          {renderStepper(docRegStep)}
          <div className="min-h-[300px] bg-white/[0.02] p-5 rounded-2xl border border-white/5 space-y-4">
             {docRegStep === 1 && (<><label className={lblCls}>পূর্ণ নাম</label><input type="text" className={inputCls} /><label className={lblCls}>ইমেইল</label><input type="email" className={inputCls} /></>)}
             {docRegStep === 2 && (<><label className={lblCls}>BMDC নম্বর</label><input type="text" className={inputCls} /><label className={lblCls}>যাবতীয় ডিগ্রি</label><input type="text" className={inputCls} /></>)}
             {docRegStep === 3 && (<><label className={lblCls}>চেম্বার/রুম নাম্বার</label><input type="text" className={inputCls} /><label className={lblCls}>লোকেশন ম্যাপ লিংক</label><input type="text" className={inputCls} /></>)}
             {docRegStep === 4 && (<><label className={lblCls}>পরামর্শ ফি</label><input type="number" className={inputCls} /><label className={lblCls}>সিরিয়াল নাম্বার</label><input type="text" className={inputCls} /></>)}
          </div>
          {renderRegFooter(docRegStep, setDocRegStep, () => {setIsSubmitting(true); setTimeout(()=>{setIsSubmitting(false);setIsDocRegOpen(false);showAlert("সফল!","আপনার প্রোফাইল জমা হয়েছে।","success");}, 1500);})}
        </div>
      </ModalWrap>

      <ModalWrap isOpen={isHospRegOpen} onClose={() => {setIsHospRegOpen(false); setHospRegStep(1);}} mw="max-w-2xl">
        <div className="p-6 md:p-10">
          <div className="mb-8 text-center"><h2 className="text-2xl font-extrabold text-white"><Building2 className="inline w-6 h-6 text-cyan-400"/> হাসপাতাল রেজিস্ট্রেশন</h2></div>
          {renderStepper(hospRegStep)}
          <div className="min-h-[300px] bg-white/[0.02] p-5 rounded-2xl border border-white/5 space-y-4">
             {hospRegStep === 1 && (<><label className={lblCls}>হাসপাতালের পূর্ণ নাম</label><input type="text" className={inputCls} /><label className={lblCls}>DGHS কোড</label><input type="text" className={inputCls} /></>)}
             {hospRegStep === 2 && (<><label className={lblCls}>পূর্ণাঙ্গ ঠিকানা</label><input type="text" className={inputCls} /><label className={lblCls}>ইমার্জেন্সি হটলাইন</label><input type="text" className={inputCls} /></>)}
             {hospRegStep === 3 && (<><label className={lblCls}>AI সার্চ ট্যাগ</label><input type="text" className={inputCls} /><label className={lblCls}>অফার/নোট</label><input type="text" className={inputCls} /></>)}
             {hospRegStep === 4 && (<><label className={lblCls}>অ্যাডমিন নাম</label><input type="text" className={inputCls} /><label className={lblCls}>পাসওয়ার্ড সেট করুন</label><input type="password" className={inputCls} /></>)}
          </div>
          {renderRegFooter(hospRegStep, setHospRegStep, () => {setIsSubmitting(true); setTimeout(()=>{setIsSubmitting(false);setIsHospRegOpen(false);showAlert("সফল!","হাসপাতাল রেজিস্ট্রেশন সম্পন্ন হয়েছে।","success");}, 1500);})}
        </div>
      </ModalWrap>

      <ModalWrap isOpen={isDiagRegOpen} onClose={() => {setIsDiagRegOpen(false); setDiagRegStep(1);}} mw="max-w-2xl">
        <div className="p-6 md:p-10">
          <div className="mb-8 text-center"><h2 className="text-2xl font-extrabold text-white"><Activity className="inline w-6 h-6 text-cyan-400"/> ডায়াগনস্টিক রেজিস্ট্রেশন</h2></div>
          {renderStepper(diagRegStep)}
          <div className="min-h-[300px] bg-white/[0.02] p-5 rounded-2xl border border-white/5 space-y-4">
             {diagRegStep === 1 && (<><label className={lblCls}>সেন্টারের নাম</label><input type="text" className={inputCls} /><label className={lblCls}>DGHS কোড</label><input type="text" className={inputCls} /></>)}
             {diagRegStep === 2 && (<><label className={lblCls}>লোকেশন</label><input type="text" className={inputCls} /><label className={lblCls}>রিসেপশন হটলাইন</label><input type="text" className={inputCls} /></>)}
             {diagRegStep === 3 && (<><label className={lblCls}>AI সার্চ ট্যাগ</label><input type="text" className={inputCls} /><label className={lblCls}>অফার/নোট</label><input type="text" className={inputCls} /></>)}
             {diagRegStep === 4 && (<><label className={lblCls}>লগইন ফোন নম্বর (ID)</label><input type="text" className={inputCls} /><label className={lblCls}>পাসওয়ার্ড</label><input type="password" className={inputCls} /></>)}
          </div>
          {renderRegFooter(diagRegStep, setDiagRegStep, () => {setIsSubmitting(true); setTimeout(()=>{setIsSubmitting(false);setIsDiagRegOpen(false);showAlert("সফল!","ডায়াগনস্টিক রেজিস্ট্রেশন সম্পন্ন হয়েছে।","success");}, 1500);})}
        </div>
      </ModalWrap>

      {/* Login Modal */}
      {isLoginOpen && (
        <ModalWrap isOpen={true} onClose={() => setIsLoginOpen(false)} mw="max-w-md">
            <div className="p-8">
              <div className="text-center mb-6"><div className="w-16 h-16 bg-blue-500/10 rounded-2xl flex items-center justify-center mx-auto mb-4 border border-blue-500/20 text-blue-400"><LogIn className="w-8 h-8" /></div><h2 className="text-2xl font-extrabold text-white">পার্টনার লগইন</h2></div>
              <form onSubmit={(e)=>{e.preventDefault(); setIsLoggingIn(true); setTimeout(()=>{setIsLoggingIn(false);setIsLoginOpen(false);showAlert("সফল!","লগইন সম্পন্ন হয়েছে।","success");}, 1500);}} className="space-y-4">
                <div><label className={lblCls}>ফোন নম্বর (ID)</label><input required type="text" className={inputCls} /></div>
                <div><label className={lblCls}>পাসওয়ার্ড</label><input required type="password" className={inputCls} /></div>
                <button type="submit" disabled={isLoggingIn} className="w-full py-3.5 bg-gradient-to-r from-blue-600 to-cyan-500 text-white font-extrabold rounded-xl flex justify-center items-center shadow-lg mt-4">{isLoggingIn ? <Loader2 className="w-5 h-5 animate-spin" /> : 'লগইন করুন'}</button>
              </form>
            </div>
        </ModalWrap>
      )}

      {/* Report Modal */}
      {isReportOpen && (
        <ModalWrap isOpen={true} onClose={() => setIsReportOpen(false)} mw="max-w-md">
            <div className="p-8">
              <div className="text-center mb-6"><div className="w-16 h-16 bg-red-500/10 rounded-2xl flex items-center justify-center mx-auto mb-4 border border-red-500/20 text-red-400"><ShieldAlert className="w-8 h-8" /></div><h2 className="text-2xl font-extrabold text-white">অভিযোগ করুন</h2></div>
              <form onSubmit={(e)=>{e.preventDefault(); setIsSubmitting(true); setTimeout(()=>{setIsSubmitting(false);setIsReportOpen(false);showAlert("সফল!","অভিযোগ জমা হয়েছে।","success");}, 1500);}} className="space-y-4">
                <div><label className={lblCls}>আপনার ফোন নম্বর *</label><input required type="text" className={inputCls} /></div>
                <div><label className={lblCls}>বিস্তারিত অভিযোগ *</label><textarea required rows={4} className="w-full mt-1.5 bg-[#02112A]/50 border border-white/10 rounded-xl px-4 py-3 text-white focus:border-cyan-500 outline-none transition-all resize-none"></textarea></div>
                <button type="submit" disabled={isSubmitting} className="w-full py-3.5 bg-red-600 hover:bg-red-500 text-white font-extrabold rounded-xl flex justify-center items-center shadow-lg mt-4">{isSubmitting ? <Loader2 className="w-5 h-5 animate-spin" /> : 'জমা দিন'}</button>
              </form>
            </div>
        </ModalWrap>
      )}

    </main>
  );
}