'use client';
import React, { useState } from 'react';
import { HeartPulse, Droplet, AlertCircle, Navigation2, 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[];
}

export default function Home() {
  // =====================================================================
  // স্টেটস (States)
  // =====================================================================

  // গ্লোবাল অ্যালার্ট / টোস্ট সিস্টেম (নেটিভ Alert রিমুভ করার জন্য)
  const [globalAlert, setGlobalAlert] = useState<{isOpen: boolean, type: 'success'|'error'|'info', title: string, message: string}>({isOpen: false, type: 'info', title: '', message: ''});
  
  const showAlert = (title: string, message: string, type: 'success'|'error'|'info' = 'info') => {
    setGlobalAlert({isOpen: true, title, message, type});
  };

  // =====================================================================
  // ভিউ অল (View All) মডাল স্টেটস - NEW
  // =====================================================================
  const [isAllDeptsOpen, setIsAllDeptsOpen] = useState(false);
  const [isAllHospsOpen, setIsAllHospsOpen] = useState(false);
  const [isAllDiagsOpen, setIsAllDiagsOpen] = useState(false);
  const [isAllSpecOpen, setIsAllSpecOpen] = useState(false);

  // ৪. হাসপাতাল ও ক্লিনিকের স্টেট
  const allHospitalsList: string[] = [
    'প্রাইম মেডিকেল কলেজ হাসপাতাল', 'গুড হেলথ হাসপাতাল', 'রংপুর কমিউনিটি হাসপাতাল', 
    'ডিপ আই কেয়ার ফাউন্ডেশন', 'কছির উদ্দিন মেমোরিয়াল', 'রংপুর সেন্ট্রাল হাসপাতাল', 
    'সিটি হাসপাতাল', 'ইসলামী ব্যাংক হাসপাতাল', 'মা ও শিশু হাসপাতাল', 'পপুলার জেনারেল হাসপাতাল',
    'মাজেদা আই হাসপাতাল', 'ডাঃ ইমার উদ্দিন কমিউনিটি হাসপাতাল', 'গ্রামীণ আই এন্ড হেলথ কেয়ার', 'হাজী ক্লিনিক', 'মডার্ন হেলথ কেয়ার', 'পপুলার ডায়াবেটিক সেন্টার', 'রাইয়ান হেলথ কেয়ার', 'সেভেন ডে নার্সিং হোম', 'সুপ্রিয় হাসপাতাল', 'সুর্যের হাসি নেটওয়ার্ক'
  ];
  const topHospitals: string[] = [
    'প্রাইম মেডিকেল কলেজ হাসপাতাল', 'গুড হেলথ হাসপাতাল', 'রংপুর কমিউনিটি হাসপাতাল', 
    'ডিপ আই কেয়ার ফাউন্ডেশন', 'কছির উদ্দিন মেমোরিয়াল', 'রংপুর সেন্ট্রাল হাসপাতাল', 
    'সিটি হাসপাতাল', 'ইসলামী ব্যাংক হাসপাতাল', 'মা ও শিশু হাসপাতাল', 'পপুলার জেনারেল হাসপাতাল'
  ];
  const [activeTopHosp, setActiveTopHosp] = useState<string>('প্রাইম মেডিকেল কলেজ হাসপাতাল');

  // ৩. ডায়াগনস্টিক সেন্টারের স্টেট
  const allDiagnosticsList: string[] = [
    'পপুলার ডায়াগনস্টিক সেন্টার', 'ল্যাবএইড লিমিটেড', 'আপডেট ডায়াগনস্টিক', 
    'মেট্রো ল্যাব ইমেজিং', 'এ্যাপোলো ডায়াগনস্টিক', 'গ্রীন ডায়াগনস্টিক', 
    'ডক্টরস ডায়াগনস্টিক', 'চেক আপ ডায়াগনস্টিক', 'ডেল্টা ডায়াগনস্টিক', 'লাইফ কেয়ার ডায়াগনস্টিক',
    'ধাপ বায়োল্যাব', 'নর্দান প্রাইভেট মেডিকেল', 'সান ডায়াগনস্টিক সেন্টার', 'হেলথ কেয়ার ল্যাব', 'ভিশন ডিজিটাল ডায়াগনস্টিক'
  ];
  const topDiagnostics: string[] = [
    'পপুলার ডায়াগনস্টিক সেন্টার', 'ল্যাবএইড লিমিটেড', 'আপডেট ডায়াগনস্টিক', 
    'মেট্রো ল্যাব ইমেজিং', 'এ্যাপোলো ডায়াগনস্টিক', 'গ্রীন ডায়াগনস্টিক', 
    'ডক্টরস ডায়াগনস্টিক', 'চেক আপ ডায়াগনস্টিক', 'ডেল্টা ডায়াগনস্টিক', 'লাইফ কেয়ার ডায়াগনস্টিক'
  ];
  const [activeTopDiag, setActiveTopDiag] = useState<string>('পপুলার ডায়াগনস্টিক সেন্টার');

  // Categories Structure for Hospital / Diagnostic Doctors
  const categorizedDoctorDepts = [
    { name: 'মেডিসিন ও কার্ডিওলজি', docs: ['আরিফ মাহমুদ', 'সাদিয়া আফরিন', 'তারেক রহমান'] },
    { name: 'গাইনি, প্রসূতি ও শিশু', docs: ['নাদিয়া সুলতানা', 'সাইদুর রহমান'] },
    { name: 'সার্জারি ও অর্থোপেডিক্স', docs: ['ফাহিম ফয়সাল', 'আহমেদ জামান', 'রফিকুল ইসলাম'] },
    { name: 'নাক-কান-গলা ও অন্যান্য', docs: ['মেহজাবিন আক্তার', 'শাহরিয়ার হোসেন'] }
  ];

  // =====================================================================
  // ২২. ব্লাড ব্যাংক সেকশন এবং প্রোফাইল মডালের স্টেট ও সম্পূর্ণ ডাটাবেস
  // =====================================================================
  const bloodGroups = ['সকল', 'A+', 'A-', 'B+', 'B-', 'O+', 'O-', 'AB+', 'AB-'];
  const [activeBloodGroup, setActiveBloodGroup] = useState('সকল');

  const [isBloodModalOpen, setIsBloodModalOpen] = useState(false);
  const [selectedBloodBank, setSelectedBloodBank] = useState<any>(null);

  const bloodBanksList = [
    { id: 1, name: 'ADARSHA DEAGNOSTIC CENTER & BLOOD BANK', location: 'Mithapukur, Tetulia Road, Panchagarh', phone: '01700000000', type: 'Blood Bank', available: ['A+', 'B+', 'O+', 'AB+'] },
    { id: 2, name: 'Bandhan Blood Bank & Transfusion Center', location: 'Tetulia Road, Panchagarh', phone: '01700000001', type: 'Blood Bank', available: ['A+', 'O+', 'B-'] },
    { id: 3, name: 'BANDHAN BLOOD BANK O SANCHALAN KENDRO', location: 'Holding No. 1531-00; Hazipara, Thakurgaon', phone: '01700000002', type: 'Blood Bank', available: ['B+', 'O-', 'AB-'] },
    { id: 4, name: 'Blood Transfusion Dept, Prime Medical College', location: 'Pirjabad, Badargonj Road, Rangpur', phone: '01700000003', type: 'Blood Bank', available: ['A-', 'O+', 'B+'] },
    { id: 5, name: 'Dinajpur Blood Bank and Transfusion center', location: 'Nimnogor, Balibari, Sadar, Dinajpur', phone: '01700000004', type: 'Blood Bank', available: ['O+', 'A+', 'AB+'] },
    { id: 6, name: 'IDEAL HEALTH CITY & BLOOD BANK', location: 'H# 24, R#01, DHAP, JAIL ROAD, RANGPUR', phone: '01700000005', type: 'Blood Bank', available: ['A+', 'B+', 'O+', 'AB+'] },
    { id: 7, name: 'Jagoron Blood Bank And Transfusion Center', location: 'এইচএম স্কয়ার মার্কেট, বীরগঞ্জ, দিনাজপুর', phone: '01700000006', type: 'Blood Bank', available: ['A-', 'B-', 'O-'] },
    { id: 8, name: 'Kasir Uddin Memorial Medical College & Hospital', location: 'Dhap Engineer Para, Rangpur', phone: '01700000007', type: 'Blood Bank', available: ['A+', 'O+', 'B+'] },
    { id: 9, name: 'KONIKA BLOOD BANK AND TRANSFUSION CENTER', location: 'M. R. COLLEGE ROAD, PANCHAGARH SADAR', phone: '01700000008', type: 'Blood Bank', available: ['O+', 'B+', 'AB-'] },
    { id: 10, name: 'LAMB Hospital Blood Bank', location: 'LAMB Hospital, Parbatipur', phone: '01700000009', type: 'Blood Bank', available: ['A+', 'B+', 'O+'] },
    { id: 11, name: 'MEDINET TRUST BLOOD BANK', location: 'M.Abdur Rahim Medical Collage Road, Dinajpur', phone: '01700000010', type: 'Blood Bank', available: ['O+', 'A-', 'B-'] },
    { id: 12, name: 'MPR Blood Bank O Shanchalan Kendra', location: '984, নবাব সিরাজউদ্দৌলা রোড, ঠাকুরগাঁও', phone: '01700000011', type: 'Blood Bank', available: ['AB+', 'O+', 'B+'] },
    { id: 13, name: 'Pure Blood Bank and Transfusion Center', location: 'Dinajpur Medical College Hospital Mor, Dinajpur', phone: '01700000012', type: 'Blood Bank', available: ['A+', 'B+', 'O+'] },
    { id: 14, name: 'Sabina Memorial Blood Bank', location: 'Tetulia Road, Panchagarh', phone: '01700000013', type: 'Blood Bank', available: ['A-', 'O-', 'AB-'] },
    { id: 15, name: 'SAFE BLOOD BANK & TRANSFUSION CENTER', location: 'Hallpara, Thakurgaon', phone: '01700000014', type: 'Blood Bank', available: ['O+', 'B+', 'A+'] },
    { id: 16, name: 'SONDHANI BLOOD BANK & TRANSFUSION CENTER', location: 'Purbo Hazipara, Thakurgaon', phone: '01700000015', type: 'Blood Bank', available: ['A+', 'B+', 'O+', 'AB+'] },
    { id: 17, name: 'THAKURGAON BLOOD BANK AND TRANSFUSION CENTER', location: 'Sarkarpara, Thakurgaon', phone: '01700000016', type: 'Blood Bank', available: ['O+', 'B+', 'A-'] }
  ];

  const filteredBloodBanks = activeBloodGroup === 'সকল' 
    ? bloodBanksList 
    : bloodBanksList.filter(bank => bank.available.includes(activeBloodGroup));

  const openBloodBankProfile = (bank: any) => {
    setSelectedBloodBank(bank);
    setIsBloodModalOpen(true);
  };

  // ২১. পাসওয়ার্ড রিকভারি ও OTP মডাল স্টেট
  const [isForgotPassOpen, setIsForgotPassOpen] = useState(false);
  const [forgotStep, setForgotStep] = useState(1);
  const [otpPhone, setOtpPhone] = useState('');
  const [otpCode, setOtpCode] = useState('');
  const [newPassword, setNewPassword] = useState('');
  
  const [isSendingOtp, setIsSendingOtp] = useState(false);
  const [isResettingPass, setIsResettingPass] = useState(false);

  const handleSendOtp = (e: any) => {
    e.preventDefault();
    setIsSendingOtp(true);
    setTimeout(() => {
      setIsSendingOtp(false);
      setForgotStep(2);
      showAlert("OTP পাঠানো হয়েছে", `আপনার ${otpPhone} নম্বরে একটি সিকিউরিটি কোড পাঠানো হয়েছে。\n\n(ডামি টেস্টের জন্য '1234' কোডটি ব্যবহার করুন)`, 'info');
    }, 1500);
  };

  const handleResetPassword = (e: any) => {
    e.preventDefault();
    setIsResettingPass(true);
    setTimeout(() => {
      setIsResettingPass(false);
      if(otpCode === '1234') {
          setIsForgotPassOpen(false);
          setForgotStep(1);
          setOtpPhone('');
          setOtpCode('');
          setNewPassword('');
          showAlert("পাসওয়ার্ড আপডেট সফল!", "আলহামদুলিল্লাহ! আপনার পাসওয়ার্ড সফলভাবে পরিবর্তন করা হয়েছে। আপনি এখন নতুন পাসওয়ার্ড দিয়ে ড্যাশবোর্ডে লগইন করতে পারবেন।", 'success');
      } else {
          showAlert("ভুল OTP!", "অনুগ্রহ করে সঠিক কোডটি (1234) দিন।", 'error');
      }
    }, 1500);
  };
  
  // ২০. পার্টনার লগইন মডাল স্টেট
  const [isLoginOpen, setIsLoginOpen] = useState(false);
  const [isLoggingIn, setIsLoggingIn] = useState(false);
  const [loginPhone, setLoginPhone] = useState('');
  const [loginPassword, setLoginPassword] = useState('');

  const handlePartnerLogin = (e: any) => {
    e.preventDefault();
    setIsLoggingIn(true);
    setTimeout(() => {
      setIsLoggingIn(false);
      setIsLoginOpen(false);
      setLoginPhone('');
      setLoginPassword('');
      showAlert("লগইন সফল!", "আপনাকে এখন পার্টনার ড্যাশবোর্ডে নিয়ে যাওয়া হবে, যেখান থেকে আপনি আপনার প্রোফাইল আপডেট এবং প্রিমিয়াম স্পন্সরশিপ অ্যাক্টিভ করতে পারবেন।", 'success');
    }, 1500);
  };  

  // ১৯. অভিযোগ/রিপোর্ট মডাল স্টেট
  const [isReportOpen, setIsReportOpen] = useState(false);
  const [isReportSubmitting, setIsReportSubmitting] = useState(false);
  const [reportText, setReportText] = useState('');
  const [isReportRecording, setIsReportRecording] = useState(false);

  const startReportVoiceRecord = () => {
    setIsReportRecording(true);
    setTimeout(() => {
      setReportText("ডাক্তার সাহেব আমার সাথে খুব খারাপ ব্যবহার করেছেন এবং ২০০ টাকা বেশি ভিজিট রেখেছেন। আমি এর বিচার চাই।");
      setIsReportRecording(false);
    }, 4000);
  };

  const handleReportSubmit = (e: any) => {
    e.preventDefault();
    setIsReportSubmitting(true);
    setTimeout(() => {
      setIsReportSubmitting(false);
      setIsReportOpen(false);
      setReportText('');
      showAlert("অভিযোগ জমা হয়েছে!", "আপনার অভিযোগটি সফলভাবে জমা হয়েছে! আমরা দ্রুত বিষয়টি তদন্ত করে প্রয়োজনীয় ব্যবস্থা গ্রহণ করব।", 'success');
    }, 1500);
  };  

  // ১৮. ডায়াগনস্টিক সেন্টার রেজিস্ট্রেশন মডাল স্টেট
  const [isDiagRegOpen, setIsDiagRegOpen] = useState(false);
  const [diagRegStep, setDiagRegStep] = useState(1);
  const [isDiagSubmitting, setIsDiagSubmitting] = useState(false);
  
  const [diagLogo, setDiagLogo] = useState<string | null>(null);
  const [diagLocationText, setDiagLocationText] = useState('');
  const [isDiagLocating, setIsDiagLocating] = useState(false);

  const handleDiagLogoUpload = (e: any) => {
    const file = e.target.files && e.target.files.item(0);
    if (file) {
      const reader = new FileReader();
      reader.onloadend = () => { setDiagLogo(reader.result as string); };
      reader.readAsDataURL(file);
    }
  };

  const handleDiagLiveLocation = () => {
    setIsDiagLocating(true);
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(
        (position) => {
          const lat = position.coords.latitude.toFixed(4);
          const lng = position.coords.longitude.toFixed(4);
          setDiagLocationText(`অক্ষাংশ: ${lat}, দ্রাঘিমাংশ: ${lng} (লাইভ জিপিএস)`);
          setIsDiagLocating(false);
        },
        () => {
          showAlert('লোকেশন এরর', 'অনুগ্রহ করে ব্রাউজার থেকে লোকেশন পারমিশন দিন।', 'error');
          setIsDiagLocating(false);
        }
      );
    }
  };  
  
  // ১৭. হাসপাতাল ও ক্লিনিক রেজিস্ট্রেশন মডাল স্টেট
  const [isHospRegOpen, setIsHospRegOpen] = useState(false);
  const [hospRegStep, setHospRegStep] = useState(1);
  const [isHospSubmitting, setIsHospSubmitting] = useState(false);
  const [hospLogo, setHospLogo] = useState<string | null>(null);
  const [hospLocationText, setHospLocationText] = useState('');
  const [isHospLocating, setIsHospLocating] = useState(false);

  const handleHospLogoUpload = (e: any) => {
    const file = e.target.files && e.target.files.item(0);
    if (file) {
      const reader = new FileReader();
      reader.onloadend = () => { setHospLogo(reader.result as string); };
      reader.readAsDataURL(file);
    }
  };

  const handleHospLiveLocation = () => {
    setIsHospLocating(true);
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(
        (position) => {
          const lat = position.coords.latitude.toFixed(4);
          const lng = position.coords.longitude.toFixed(4);
          setHospLocationText(`অক্ষাংশ: ${lat}, দ্রাঘিমাংশ: ${lng} (লাইভ জিপিএস)`);
          setIsHospLocating(false);
        },
        () => {
          showAlert('লোকেশন এরর', 'অনুগ্রহ করে ব্রাউজার থেকে লোকেশন পারমিশন দিন।', 'error');
          setIsHospLocating(false);
        }
      );
    }
  };

  // ১. ডক্টর প্রোফাইল মডালের স্টেট
  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
  const [selectedDoc, setSelectedDoc] = useState<DoctorProfile | null>(null);

  // ১৬. ডক্টর রেজিস্ট্রেশন মডাল স্টেট
  const [isDocRegOpen, setIsDocRegOpen] = useState(false);
  const [docRegStep, setDocRegStep] = useState(1);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [profilePic, setProfilePic] = useState<string | null>(null);
  const [locationText, setLocationText] = useState('');
  const [isLocating, setIsLocating] = useState(false);

  const handleImageUpload = (e: any) => {
    const file = e.target.files && e.target.files.item(0);
    if (file) {
      const reader = new FileReader();
      reader.onloadend = () => { setProfilePic(reader.result as string); };
      reader.readAsDataURL(file);
    }
  };

  const handleLiveLocation = () => {
    setIsLocating(true);
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(
        (position) => {
          const lat = position.coords.latitude.toFixed(4);
          const lng = position.coords.longitude.toFixed(4);
          setLocationText(`অক্ষাংশ: ${lat}, দ্রাঘিমাংশ: ${lng} (লাইভ জিপিএস লোকেশন)`);
          setIsLocating(false);
        },
        () => {
          showAlert('লোকেশন এরর', 'আপনার ব্রাউজার থেকে লোকেশন অ্যাক্সেস দেওয়া নেই। অনুগ্রহ করে লোকেশন পারমিশন দিন।', 'error');
          setIsLocating(false);
        }
      );
    } else {
      showAlert('সাপোর্ট এরর', 'আপনার ডিভাইস লাইভ লোকেশন সাপোর্ট করে না।', 'error');
      setIsLocating(false);
    }
  };  

  // ১৩. অ্যাম্বুলেন্স ডিরেক্টরি এবং মডালের স্টেট
  const ambulanceCategories = ['সকল', 'ICU (লাইফ সাপোর্ট)', 'ফ্রিজিং (মরদেহ বহন)', 'AC / Non-AC', 'NICU (নবজাতক)'];
  const [activeAmbulance, setActiveAmbulance] = useState('সকল');
  const [activeAmbulanceArea, setActiveAmbulanceArea] = useState('');
  const [selectedAmbulance, setSelectedAmbulance] = useState<any | null>(null);

  // ২. ক্যাটাগরি ট্যাবের স্টেট
  const allCategoriesList: string[] = ['মেডিসিন', 'কার্ডিওলজি', 'গাইনি ও প্রসূতি', 'শিশু রোগ', 'অর্থোপেডিক্স', 'নাক-কান-গলা', 'চক্ষু', 'চর্ম ও যৌন', 'নিউরো মেডিসিন', 'গ্যাস্ট্রোএন্টারোলজি', 'ইউরোলজি', 'সাইকিয়াট্রি', 'অনকোলজি', 'ডেন্টিস্ট্রি', 'পালমোনোলজি', 'ফিজিওথেরাপি'];
  const [activeCategory, setActiveCategory] = useState<string>('মেডিসিন');
  const [visibleDocs, setVisibleDocs] = useState(5); // Pagination State



  // বিশেষায়িত সেন্টারের স্টেট
  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' }
  ];
  const specializedCentersList = allSpecializedList.slice(0, 4);
  const [activeSpecialCenter, setActiveSpecialCenter] = useState<string>('ডিপ আই কেয়ার ফাউন্ডেশন');

  // ৫. AI Search States
  const [searchQuery, setSearchQuery] = useState<string>('');
  const [isSearching, setIsSearching] = useState<boolean>(false);
  const [isRecording, setIsRecording] = useState<boolean>(false);

  // ৬. Advanced Filter States
  const [isFiltering, setIsFiltering] = useState<boolean>(false);
  const [filters, setFilters] = useState({
    name: '', department: '', area: '', hospital: '', fee: '', rating: '', availability: '', gender: ''
  });

  // ৭. Guest Review & Hospital Profile Modal States
  const [isGuestReviewOpen, setIsGuestReviewOpen] = useState(false);
  const [guestReviewSubmitting, setGuestReviewSubmitting] = useState(false);
  const [guestRating, setGuestRating] = useState(5);

  // =====================================================================
  // ফাংশনস (Functions & Logics)
  // =====================================================================

  const openDoctorProfile = (docName: string, dept: string = activeCategory) => {
    // Open modal with simulated data transition
    setIsModalOpen(false); // reset slightly if already open
    setTimeout(() => {
      const dummyProfile: DoctorProfile = {
        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: 5, date: '১ সপ্তাহ আগে', text: 'উনার ব্যবহার খুব ভালো। রোগীকে অনেক সময় নিয়ে দেখেন এবং সুন্দর করে বুঝিয়ে বলেন।' },
          { user: 'মাহমুদ হাসান', rating: 4, date: '৩ সপ্তাহ আগে', text: 'সিরিয়াল পাওয়া একটু কঠিন, তবে চিকিৎসা খুবই উন্নত মানের। চেম্বারের পরিবেশও ভালো।' }
        ]
      };
      setSelectedDoc(dummyProfile);
      setIsModalOpen(true);
    }, 100);
  };

  const getInitial = (name: string) => {
    return name.replace(/^(অধ্যাপক ডাঃ |ডাঃ |Dr. )/, '').charAt(0);
  };

  const handleFilterChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
    const { name, value } = e.target;
    setFilters(prev => ({ ...prev, [name]: value }));
  };

  const handleResetFilters = () => {
    setFilters({ name: '', department: '', area: '', hospital: '', fee: '', rating: '', availability: '', gender: '' });
  };

  const handleApplyFilters = () => {
    setIsFiltering(true);
    setTimeout(() => {
      setIsFiltering(false);
      showAlert("ফিল্টার প্রয়োগ সম্পন্ন!", "(ডাটাবেস কানেক্ট হলে এখানে ফিল্টার করা ডাক্তারদের লিস্ট চলে আসবে।)", "success");
      document.getElementById('directory-section')?.scrollIntoView({behavior: 'smooth'});
    }, 1000);
  };

  const handleAISearch = (e?: React.FormEvent, voiceQuery?: string) => {
    if (e) e.preventDefault();
    const query = voiceQuery !== undefined ? voiceQuery : searchQuery;
    const safeQuery = query || '';
    if (!safeQuery.trim()) return;

    setIsSearching(true);
    setTimeout(() => {
      setIsSearching(false);
      const lowerQuery = safeQuery.toLowerCase();
      let detectedDepartment = "মেডিসিন";

      if (/(বুক ব্যথা|হার্ট|শ্বাসকষ্ট|প্রেসার|রক্তচাপ|উচ্চরক্তচাপ|বুক ধড়ফড়|হাঁপিয়ে যাই|ব্লক|স্ট্রোকের লক্ষণ|কোলেস্টেরল|পালস|হার্ট অ্যাটাক|বুকে চাপ)/.test(lowerQuery)) detectedDepartment = "কার্ডিওলজি";
      else if (/(মাথা ব্যথা|মাইগ্রেন|স্ট্রোক|প্যারালাইসিস|মৃগী|ব্রেইন|নার্ভ|ভুলে যাওয়া|ঘাড় ব্যথা|মাথা ঘোরে|স্মৃতিশক্তি|অজ্ঞান|হাত পা অবশ|খিঁচুনি|ব্রেইন টিউমার|মাথা চক্কর)/.test(lowerQuery)) detectedDepartment = "নিউরো মেডিসিন";
      else if (/(গ্যাস|পেট ব্যথা|আলসার|অ্যাসিডিটি|বদহজম|বুক জ্বালা|ডায়রিয়া|লিভার|জন্ডিস|বমি|পাইলস|কোষ্ঠকাঠিন্য|ফিস্টুলা|রক্তবমি|আমাশয়|পেট ফাঁপা|হেপাটাইটিস|গলব্লাডার|পাথর|গেজ)/.test(lowerQuery)) detectedDepartment = "গ্যাস্ট্রোএন্টারোলজি";
      else if (/(চর্ম|স্কিন|চুলকানি|ব্রণ|এলার্জি|দাদ|চুল পড়া|নখ|ত্বক|যৌন|মেসতা|শ্বেতী|খুশকি|খোসপাঁচড়া|সিফিলিস|গনেরিয়া|ঘামাচি|ঘা)/.test(lowerQuery)) detectedDepartment = "চর্ম ও যৌন";
      else if (/(হাড়|জয়েন্ট|মাজা ব্যথা|কোমর ব্যথা|পেশী|বাত|মেরুদণ্ড|ফ্র্যাকচার|হাঁটু ব্যথা|পা ব্যথা|প্লাস্টার|গিরায় ব্যথা|হাড় ক্ষয়|রগ টান|মচকে যাওয়া|ডিস্ক)/.test(lowerQuery)) detectedDepartment = "অর্থোপেডিক্স";
      else if (/(প্রেগন্যান্সি|পিরিয়ড|সাদাস্রাব|জরায়ু|গর্ভবতী|মাসিক|ডেলিভারি|বাচ্চা হচ্ছে না|সিজার|সিস্ট|টিউব|স্তন ব্যথা|ব্রেস্ট টিউমার|সাদা স্রাব|ওভারি)/.test(lowerQuery)) detectedDepartment = "গাইনি ও প্রসূতি";
      else if (/(বাচ্চা|শিশু|নবজাতক|পোলিও|বাচ্চার জ্বর|টিকা|বাচ্চার কাশি|বাচ্চার ওজন|হাম|বাচ্চার খিঁচুনি|বাচ্চার পাতলা পায়খানা|অটিজম)/.test(lowerQuery)) detectedDepartment = "শিশু রোগ";
      else if (/(চোখ|দৃষ্টি|ছানি|গ্লুকোমা|চশমা|চোখ ওঠা|চোখ লাল|পানি পড়ে|রেটিনা|অন্ধ|চোখে ঝাপসা|কন্টাক্ট লেন্স|মাংস বৃদ্ধি)/.test(lowerQuery)) detectedDepartment = "চক্ষু";
      else if (/(কান|নাক|গলা|টনসিল|কানে কম শোনা|সাইনাস|কানে পুঁজ|গলা ব্যথা|নাক ডাকা|পলিপাস|নাক দিয়ে রক্ত|কানের পর্দা|স্বরভঙ্গ|কানে শোঁ শোঁ)/.test(lowerQuery)) detectedDepartment = "নাক-কান-গলা";
      else if (/(কিডনি|প্রস্রাব|ডায়ালাইসিস|ইউরিন|প্রস্রাবে জ্বালাপোড়া|প্রোস্টেট|প্রস্রাব আটকে যাওয়া|প্রস্রাবে রক্ত|ক্রিয়েটিনিন|তলপেটে ব্যথা)/.test(lowerQuery)) detectedDepartment = "ইউরোলজি";
      else if (/(মানসিক|ডিপ্রেশন|টেনশন|ঘুম|উদ্বেগ|পাগল|নেশা|মাদক|ভয়|অস্থিরতা|ওসিডি|সুইসাইড|হ্যালুসিনেশন|পাগলামি)/.test(lowerQuery)) detectedDepartment = "সাইকিয়াট্রি";
      else if (/(ডায়াবেটিস|থাইরয়েড|হরমোন|ওজন বৃদ্ধি|ওজন হ্রাস|সুগার|গলগণ্ড|মোটা হয়ে যাওয়া|চিকন হয়ে যাওয়া)/.test(lowerQuery)) detectedDepartment = "ডায়াবেটিস";

      setActiveCategory(detectedDepartment);
      showAlert('AI Analysis Results', `🗣️ আপনার সমস্যা: "${safeQuery}"\n\n🧠 AI অ্যানালাইসিস: আপনার লক্ষণের ওপর ভিত্তি করে একজন "${detectedDepartment} বিশেষজ্ঞ" সবচেয়ে উপযুক্ত।\n\n(নিচে এই বিভাগের ডাক্তারদের লিস্ট ওপেন করা হয়েছে!)`, 'success');
      document.getElementById('directory-section')?.scrollIntoView({behavior: 'smooth'});
    }, 1500);
  };

  const startVoiceSearch = () => {
    setIsRecording(true);
    setTimeout(() => {
      const dummyVoiceParagraph = "আমার মায়ের বয়স ৫০। ওনার মাজা ব্যথা, দুই হাঁটুতে প্রচণ্ড ব্যথা, আর মাঝে মাঝে গিরায় গিরায় ব্যথা করে। রাতে ঘুমাতে পারে মোহ ব্যথার চোটে। একজন ভালো ডাক্তার লাগবে।";
      setSearchQuery(dummyVoiceParagraph);
      setIsRecording(false);
      handleAISearch(undefined, dummyVoiceParagraph);
    }, 4000);
  };

  const handleGuestReviewSubmit = (e: any) => {
    e.preventDefault();
    setGuestReviewSubmitting(true);
    setTimeout(() => {
      setGuestReviewSubmitting(false);
      setIsGuestReviewOpen(false);
      showAlert('ধন্যবাদ!', 'আপনার রিভিউটি সফলভাবে জমা হয়েছে। অ্যাডমিন রিভিউ যাচাই করার পর এটি সাইটে লাইভ হবে।', 'success');
    }, 1500);
  };

  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 filteredAmbulances = ambulanceDB.filter(amb => {
      const matchCategory = activeAmbulance === 'সকল' || amb.type === activeAmbulance;
      const matchArea = activeAmbulanceArea === '' || amb.stand.includes(activeAmbulanceArea);
      return matchCategory && matchArea;
  });


  return (
    <main className="min-h-screen bg-[#02112A] text-white selection:bg-blue-500 pb-20 font-sans">
      
      {/* ================= ১. হেডার সেকশন (z-index Fixed) ================= */}
      <header className="fixed top-0 w-full z-50 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="#directory-section" className="hover:text-blue-400 transition-colors">ডাক্তারগণ</a>
            <a href="#hospital-section" className="hover:text-blue-400 transition-colors">হাসপাতাল</a>
            <a href="#blood-bank" 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="hidden md:flex items-center gap-2 bg-gradient-to-r from-blue-600 to-cyan-500 hover:from-blue-500 hover:to-cyan-400 px-5 py-2.5 rounded-full transition-all shadow-lg hover:scale-105 text-sm font-extrabold border border-transparent">
              <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>

      {/* ================= ২. হিরো সেকশন এবং অ্যাডভান্সড AI সার্চ ================= */}
      <section className="relative pt-40 pb-20 flex flex-col items-center text-center overflow-hidden 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="Medical Background" 
            className="w-full h-full object-cover opacity-30 mix-blend-luminosity" 
          />
          <div className="absolute bottom-0 w-full h-32 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 leading-relaxed 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 focus-within:shadow-[0_0_50px_rgba(59,130,246,0.4)] focus-within:border-blue-400/50`}
          >
            <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 transition-all group 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'}`}
                title="ভয়েস দিয়ে সমস্যা বলুন"
              >
                {isRecording ? <MicOff className="w-6 h-6" /> : <Mic className="w-6 h-6 group-hover:scale-110 group-hover:text-red-400 transition-all" />}
              </button>
              
              <button 
                type="submit" 
                disabled={isSearching || isRecording}
                className="bg-gradient-to-r w-full md:w-auto from-blue-600 to-blue-400 hover:from-blue-500 hover:to-blue-300 text-white px-8 py-3 md:py-4 rounded-[24px] font-semibold transition-all shadow-lg shadow-blue-500/25 flex items-center justify-center gap-2 disabled:opacity-70"
              >
                {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>

      {/* ================= ৩. অ্যাডভান্সড ডিরেক্টরি ফিল্টার (Premium UI/UX Revamp) ================= */}
      <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)] relative overflow-hidden group">
          
          <div className="absolute top-0 left-1/2 -translate-x-1/2 w-1/2 h-[2px] bg-gradient-to-r from-transparent via-blue-500 to-transparent opacity-50 group-hover:w-3/4 transition-all duration-500"></div>
          
          <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="flex flex-col gap-2 xl:col-span-2">
              <label className="text-[13px] font-bold text-gray-400 ml-1 uppercase tracking-wider">নাম বা পদবী দিয়ে খুঁজুন</label>
              <div className="relative">
                <input 
                  type="text" 
                  name="name" 
                  value={filters.name} 
                  onChange={handleFilterChange}
                  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 focus:ring-2 focus:ring-blue-500/20 transition-all placeholder:text-gray-500 shadow-inner"
                />
                <Search className="absolute left-4 top-4 w-5 h-5 text-gray-500" />
              </div>
            </div>

            <div className="flex flex-col gap-2">
              <label className="text-[13px] font-bold text-gray-400 ml-1 uppercase tracking-wider">বিভাগ বা স্পেশালিটি</label>
              <select name="department" value={filters.department} onChange={handleFilterChange} 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 focus:ring-2 focus:ring-blue-500/20 w-full transition-all cursor-pointer shadow-inner appearance-none">
                <option value="">সকল বিভাগ</option>
                <option value="medicine">মেডিসিন (Internal Medicine)</option>
                <option value="cardiology">কার্ডিওলজি (হৃদরোগ)</option>
                <option value="gynecology">গাইনি ও প্রসূতি (Gynecology)</option>
                <option value="pediatrics">শিশু রোগ (Pediatrics)</option>
                <option value="orthopedics">অর্থোপেডিক্স (হাড় ও জোড়)</option>
                <option value="neurology">নিউরোলজি (স্নায়ুরোগ ও ব্রেইন)</option>
              </select>
            </div>

            <div className="flex flex-col gap-2">
              <label className="text-[13px] font-bold text-gray-400 ml-1 uppercase tracking-wider">এলাকা / লোকেশন</label>
              <select name="area" value={filters.area} onChange={handleFilterChange} 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 focus:ring-2 focus:ring-blue-500/20 w-full transition-all cursor-pointer shadow-inner appearance-none">
                <option value="">যেকোনো এলাকা</option>
                <option value="dhap">ধাপ (Dhap)</option>
                <option value="medical_mor">মেডিকেল মোড় (Medical More)</option>
                <option value="shapla">শাপলা চত্বর (Shapla Chottor)</option>
              </select>
            </div>

            <div className="flex flex-col gap-2">
              <label className="text-[13px] font-bold text-gray-400 ml-1 uppercase tracking-wider">হাসপাতাল বা ক্লিনিক</label>
              <select name="hospital" value={filters.hospital} onChange={handleFilterChange} 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 focus:ring-2 focus:ring-blue-500/20 w-full transition-all cursor-pointer shadow-inner appearance-none">
                <option value="">সব হাসপাতাল ও ক্লিনিক</option>
                <option value="popular_diag">পপুলার ডায়াগনস্টিক সেন্টার (Popular)</option>
                <option value="prime_mc">প্রাই মেডিকেল কলেজ হাসপাতাল (Prime)</option>
                <option value="labaid">ল্যাবএইড লিমিটেড (Labaid)</option>
              </select>
            </div>

            <div className="flex flex-col gap-2">
              <label className="text-[13px] font-bold text-gray-400 ml-1 uppercase tracking-wider">পরামর্শ ফি (Fee)</label>
              <select name="fee" value={filters.fee} onChange={handleFilterChange} 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 focus:ring-2 focus:ring-blue-500/20 w-full transition-all cursor-pointer shadow-inner appearance-none">
                <option value="">যেকোনো ফি</option>
                <option value="free">বিনামূল্যে (Free/Charity)</option>
                <option value="500_below">৫০০৳ এর নিচে</option>
                <option value="500_800">৫০০৳ - ৮০০৳</option>
                <option value="800_1000">৮০০৳ - ১০০০৳</option>
              </select>
            </div>

            <div className="flex flex-col gap-2">
              <label className="text-[13px] font-bold text-gray-400 ml-1 uppercase tracking-wider">ডাক্তারের রেটিং</label>
              <select name="rating" value={filters.rating} onChange={handleFilterChange} 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 focus:ring-2 focus:ring-blue-500/20 w-full transition-all cursor-pointer shadow-inner appearance-none">
                <option value="">যেকোনো রেটিং</option>
                <option value="5">⭐⭐⭐⭐⭐ ৫ স্টার (Top Rated)</option>
                <option value="4.5">⭐⭐⭐⭐.৫ (৪.৫+ স্টার)</option>
                <option value="4">⭐⭐⭐⭐ (৪.০+ স্টার)</option>
              </select>
            </div>

            <div className="flex flex-col gap-2">
              <label className="text-[13px] font-bold text-gray-400 ml-1 uppercase tracking-wider">এভেইলেবিলিটি</label>
              <select name="availability" value={filters.availability} onChange={handleFilterChange} 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 focus:ring-2 focus:ring-blue-500/20 w-full transition-all cursor-pointer shadow-inner appearance-none">
                <option value="">যেকোনো দিন</option>
                <option value="today">আজকে অ্যাভেইলেবল</option>
                <option value="friday">শুক্রবার (ছুটির দিন খোলা)</option>
                <option value="evening">শুধুমাত্র সান্ধ্যকালীন</option>
                <option value="morning">শুধুমাত্র সকালকালীন</option>
              </select>
            </div>

            <div className="flex flex-col gap-2">
              <label className="text-[13px] font-bold text-gray-400 ml-1 uppercase tracking-wider">জেন্ডার</label>
              <select name="gender" value={filters.gender} onChange={handleFilterChange} 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 focus:ring-2 focus:ring-blue-500/20 w-full transition-all cursor-pointer shadow-inner appearance-none">
                <option value="">যেকোনো (Any)</option>
                <option value="male">পুরুষ ডাক্তার</option>
                <option value="female">মহিলা ডাক্তার</option>
              </select>
            </div>

          </div>

          <div className="mt-10 flex flex-col sm:flex-row justify-end items-center gap-4 pt-6 border-t border-white/10">
             <button 
               onClick={handleResetFilters} 
               className="w-full sm:w-auto px-6 py-3.5 rounded-2xl text-gray-400 hover:text-white hover:bg-white/10 font-bold transition-all flex items-center justify-center gap-2"
             >
               <RotateCcw className="w-4 h-4" /> রিসেট করুন (Clear)
             </button>
             <button 
               onClick={handleApplyFilters} 
               disabled={isFiltering} 
               className="w-full sm:w-auto bg-blue-600 hover:bg-blue-500 text-white px-10 py-3.5 rounded-2xl font-bold transition-all shadow-[0_10px_20px_rgba(37,99,235,0.3)] flex items-center justify-center gap-2 disabled:opacity-70 disabled:cursor-not-allowed border border-blue-500/50"
             >
              {isFiltering ? <><Loader2 className="w-5 h-5 animate-spin" /> প্রসেসিং...</> : <><Search className="w-5 h-5" /> ফিল্টার প্রয়োগ করুন</>}
            </button>
          </div>
        </div>
      </section>

      {/* ================= ৪. রংপুরের টপ-১০ স্পন্সরড ডাক্তার (The Premium Ten) ================= */}
      <section className="relative px-4 max-w-7xl mx-auto z-20 mb-24">
        <div className="flex flex-col items-center justify-center mb-12 text-center">
          <div className="inline-flex items-center justify-center p-2 bg-yellow-500/10 rounded-full mb-4 border border-yellow-500/20">
            <span className="text-yellow-400 text-sm font-bold tracking-widest uppercase px-4">Premium Sponsored</span>
          </div>
          <h2 className="text-3xl md:text-5xl font-extrabold flex items-center gap-3 text-white drop-shadow-lg">
            <span className="text-yellow-400 text-4xl md:text-5xl drop-shadow-[0_0_15px_rgba(234,179,8,0.5)]">👑</span>
            রংপুরের সেরা ১০ বিশেষজ্ঞ
          </h2>
          <p className="text-gray-400 text-sm md:text-base mt-4 max-w-xl mx-auto font-medium">
            রোগীদের সর্বোচ্চ রেটিং প্রাপ্ত এবং আমাদের স্পেশাল ভেরিফায়েড চিকিৎসকদের তালিকা
          </p>
        </div>

        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6">
          {[
            { name: "ডাঃ আব্দুল্লাহ আল মামুন", specialty: "মেডিসিন ও হৃদরোগ", rating: "৪.৯", reviews: "১২০", fee: "৮০০", init: "আ", dept: "Medicine" },
            { name: "ডাঃ শারমিন আক্তার", specialty: "গাইনি ও প্রসূতি", rating: "৪.৮", reviews: "৯৬", fee: "৬০০", init: "শা", dept: "Gynecology" },
            { name: "ডাঃ কামরুল হাসান", specialty: "কার্ডিওলজি (হার্ট)", rating: "৫.০", reviews: "২১৪", fee: "১০০০", init: "কা", dept: "Cardiology" },
            { name: "ডাঃ রফিকুল ইসলাম", specialty: "মেডিসিন বিশেষজ্ঞ", rating: "৪.৭", reviews: "৮৮", fee: "৭০০", init: "র", dept: "Medicine" },
            { name: "ডাঃ তানিয়া জামান", specialty: "শিশু রোগ বিশেষজ্ঞ", rating: "৪.৯", reviews: "১৫০", fee: "৮০০", init: "তা", dept: "Pediatrics" },
            { name: "ডাঃ শাহরিয়ার হোসেন", specialty: "নিউরোলজি (ব্রেইন)", rating: "৪.৮", reviews: "১১০", fee: "১০০০", init: "শা", dept: "Neurology" },
            { name: "ডাঃ মেহজাবিন চৌধুরী", specialty: "চর্ম ও যৌন রোগ", rating: "৪.৬", reviews: "৭৫", fee: "৬০০", init: "মে", dept: "Dermatology" },
            { name: "ডাঃ সাইদুর রহমান", specialty: "কার্ডিওলজি (হার্ট)", rating: "৪.৯", reviews: "১৩২", fee: "৯০০", init: "সা", dept: "Cardiology" },
            { name: "ডাঃ ফাহিম ফয়সাল", specialty: "অর্থোপেডিক্স (হাড়)", rating: "৪.৮", reviews: "১০৫", fee: "৮০০", init: "ফা", dept: "Orthopedics" },
            { name: "ডাঃ নুসরাত জাহান", specialty: "গাইনি ও প্রসূতি", rating: "৫.০", reviews: "১৮০", fee: "৭০০", init: "নু", dept: "Gynecology" }
          ].map((doctor, idx) => (
            <div 
              key={idx} 
              onClick={() => openDoctorProfile(doctor.name, doctor.specialty)}
              className="relative bg-gradient-to-b from-[#0A1930]/90 to-[#02112A]/90 backdrop-blur-2xl border border-yellow-500/30 rounded-[28px] p-6 shadow-[0_10px_30px_rgba(0,0,0,0.5)] hover:shadow-[0_0_40px_rgba(234,179,8,0.25)] hover:-translate-y-2 transition-all duration-300 group overflow-hidden flex flex-col cursor-pointer"
            >
              <div className="absolute top-0 right-0 w-32 h-32 bg-yellow-500/10 rounded-full blur-3xl -mr-10 -mt-10 transition-all group-hover:bg-yellow-500/20"></div>
              <div className="absolute top-0 right-0 bg-yellow-500 text-[10px] text-black px-3 py-1 rounded-bl-xl font-extrabold uppercase shadow-md flex items-center gap-1">
                <Star className="w-3 h-3 fill-black" /> Top
              </div>
              
              <div className="w-16 h-16 bg-gradient-to-br from-yellow-500/20 to-orange-500/20 rounded-full flex items-center justify-center text-yellow-500 font-extrabold text-2xl mb-4 border border-yellow-500/30 shadow-inner group-hover:scale-110 transition-transform relative z-10">
                {doctor.init}
              </div>
              
              <h4 className="text-[17px] font-extrabold text-white mb-1.5 leading-tight relative z-10">{doctor.name}</h4>
              <p className="text-[12px] text-yellow-400/80 mb-4 font-bold relative z-10">{doctor.specialty}</p>
              
              <div className="mt-auto space-y-2 mb-5 text-[11px] text-gray-300 relative z-10">
                <p className="flex justify-between"><span>রেটিং:</span> <span className="text-yellow-400 font-bold flex items-center gap-1"><Star className="w-3 h-3 fill-yellow-400" /> {doctor.rating} ({doctor.reviews})</span></p>
                <p className="flex justify-between"><span>পরামর্শ ফি:</span> <span className="text-white font-bold bg-white/10 px-2 py-0.5 rounded">৳{doctor.fee}</span></p>
              </div>
              
              <button 
                onClick={(e) => { e.stopPropagation(); openDoctorProfile(doctor.name, doctor.specialty); }}
                className="w-full bg-[#0A1930] hover:bg-gradient-to-r hover:from-yellow-600 hover:to-yellow-500 text-yellow-400 hover:text-black py-3 rounded-xl text-[13px] font-extrabold transition-all duration-300 border border-yellow-500/30 hover:border-transparent shadow-lg uppercase tracking-wide relative z-10"
              >
                সিরিয়াল নিন
              </button>
            </div>
          ))}
        </div>
      </section>

      {/* ================= ৫. ক্যাটাগরি এবং ডিরেক্টরি ট্যাব (Dynamic Data) ================= */}
      <section id="directory-section" className="relative px-4 max-w-7xl mx-auto z-20 mb-24 pt-8">
        <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={() => setIsAllDeptsOpen(true)} 
              className="text-white bg-white/5 hover:bg-white/10 font-bold flex items-center gap-1.5 transition-all 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 transition-all 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) => {
             const isTabActive = activeCategory === tab;
             return (
              <button
                key={idx}
                onClick={() => {setActiveCategory(tab); setVisibleDocs(5);}}
                className={`whitespace-nowrap px-7 py-3.5 rounded-[20px] font-extrabold transition-all duration-300 ${
                  isTabActive
                  ? 'bg-blue-600 text-white shadow-[0_10px_20px_rgba(37,99,235,0.4)] border border-blue-400/50 scale-105'
                  : 'bg-[#0A1930] text-gray-400 hover:bg-white/10 hover:text-white border border-white/5'
                }`}
              >
                {tab}
              </button>
            );
          })}
        </div>

        {(() => {
          const currentCat = activeCategory;
          
          const featuredList = [
            { id: 1, name: 'ডাঃ শফিকুল ইসলাম', spec: `সিনিয়র ${currentCat} বিশেষজ্ঞ`, hosp: 'পপুলার ডায়াগনস্টিক, ধাপ', rating: '৪.৯', fee: '৮০০', init: 'শ' },
            { id: 2, name: 'ডাঃ তানিয়া জামান', spec: `চিফ ${currentCat} কনসালটেন্ট`, hosp: 'ল্যাবএইড লিমিটেড', rating: '৪.৮', fee: '৬০০', init: 'ত' },
            { id: 3, name: 'ডাঃ কামরুল হাসান', spec: `${currentCat} স্পেশালিস্ট`, hosp: 'রংপুর কমিউনিটি হাসপাতাল', rating: '৪.৭', fee: '১০০০', init: 'ক' },
            { id: 4, name: 'ডাঃ শারমিন আক্তার', spec: `${currentCat} ও সার্জন`, hosp: 'গুড হেলথ হাসপাতাল', rating: '৪.৯', fee: '৭০০', init: 'শ' },
            { id: 5, name: 'ডাঃ আব্দুল্লাহ আল মামুন', spec: `${currentCat} বিশেষজ্ঞ`, hosp: 'আপডেট ক্লিনিক', rating: '৪.৮', fee: '৮০০', init: 'আ' }
          ];

          const regularList = [
            { id: 1, name: 'ডাঃ আরিফ মাহমুদ', spec: `${currentCat} বিশেষজ্ঞ`, rating: '৪.৬', fee: '৫০০' },
            { id: 2, name: 'ডাঃ সাদিয়া আফরিন', spec: `${currentCat} স্পেশালিস্ট`, rating: '৪.৫', fee: '৬০০' },
            { id: 3, name: 'ডাঃ তারেক রহমান', spec: `সহকারী অধ্যাপক, ${currentCat}`, rating: '৪.৭', fee: '৭০০' },
            { id: 4, name: 'ডাঃ নাদিয়া সুলতানা', spec: `${currentCat} কনসালটেন্ট`, rating: '৪.৪', fee: '৪০০' },
            { id: 5, name: 'ডাঃ সাইদুর রহমান', spec: `${currentCat} বিশেষজ্ঞ`, rating: '৪.৮', fee: '৮০০' },
            { id: 6, name: 'ডাঃ ফাহিম ফয়সাল', spec: `${currentCat} স্পেশালিস্ট`, rating: '৪.৫', fee: '৬০০' },
            { id: 7, name: 'ডাঃ মেহজাবিন', spec: `সিনিয়র ${currentCat} বিশেষজ্ঞ`, rating: '৪.6', fee: '৫০০' },
            { id: 8, name: 'ডাঃ রফিকুল ইসলাম', spec: `${currentCat} সার্জন`, rating: '৪.৩', fee: '৪০০' },
            { id: 9, name: 'ডাঃ শাহরিয়ার', spec: `${currentCat} কনসালটেন্ট`, rating: '৪.৭', fee: '৯০০' },
            { id: 10, name: 'ডাঃ আহমেদ', spec: `${currentCat} বিশেষজ্ঞ`, rating: '৪.৫', fee: '৫০০' },
            { id: 11, name: 'ডাঃ তাসনিম', spec: `অধ্যাপক, ${currentCat}`, rating: '৪.৮', fee: '৬০০' },
            { id: 12, name: 'ডাঃ নাহিদ', spec: `${currentCat} বিশেষজ্ঞ`, rating: '৪.৬', fee: '৫০০' },
            { id: 13, name: 'ডাঃ ফারজানা', spec: `${currentCat} স্পেশালিস্ট`, rating: '৪.৪', fee: '৪০০' },
            { id: 14, name: 'ডাঃ মাহমুদ', spec: `কনসালটেন্ট, ${currentCat}`, rating: '৪.৫', fee: '৬০০' },
            { id: 15, name: 'ডাঃ হাসান', spec: `${currentCat} বিশেষজ্ঞ`, rating: '৪.৭', fee: '৭০০' }
          ];

          return (
            <>
              <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" /> 
                  {currentCat} বিভাগের ফিচারড বিশেষজ্ঞ
                  <span className="text-[10px] font-medium 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">
                  {featuredList.map((doc) => (
                    <div 
                      key={doc.id} 
                      onClick={() => openDoctorProfile(doc.name, currentCat)} 
                      className="bg-gradient-to-br from-blue-900/30 to-[#02112A] border border-blue-500/30 rounded-2xl p-5 hover:bg-blue-900/40 hover:-translate-y-1 transition-all group relative overflow-hidden cursor-pointer shadow-lg"
                    >
                      <div className="absolute top-0 right-0 bg-blue-600 text-[9px] text-white px-3 py-1 rounded-bl-xl font-bold uppercase tracking-widest shadow-md">
                        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 group-hover:scale-110 transition-transform">
                        {doc.init}
                      </div>
                      <h4 className="text-[16px] font-bold text-white mb-1.5 leading-tight">{doc.name}</h4>
                      <p className="text-[12px] text-cyan-300 mb-3 font-medium bg-cyan-900/30 inline-block px-2 py-0.5 rounded">{doc.spec}</p>
                      <p className="text-[11px] text-gray-400 mb-5 line-clamp-1">{doc.hosp}</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" /> {doc.rating}</span>
                        <span className="text-white font-extrabold bg-white/10 px-2 py-1 rounded-lg">৳ {doc.fee}</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" /> {currentCat} বিভাগের অন্যান্য বিশেষজ্ঞ
              </h3>
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-4">
                {regularList.slice(0, visibleDocs).map((doc) => (
                  <div 
                    key={doc.id} 
                    onClick={() => openDoctorProfile(doc.name, currentCat)} 
                    className="flex items-center gap-3.5 bg-[#0A1930]/40 border border-white/5 p-3.5 rounded-[20px] hover:bg-white/10 hover:border-white/10 transition-all cursor-pointer group animate-in fade-in duration-300"
                  >
                    <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">
                      {getInitial(doc.name)}
                    </div>
                    <div className="flex-1">
                      <h4 className="text-[13px] font-extrabold text-white group-hover:text-blue-300 transition-colors leading-tight mb-1">{doc.name}</h4>
                      <p className="text-[10px] text-gray-400">{doc.spec}</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" /> {doc.rating}</span>
                        <span className="text-gray-300">৳ {doc.fee}</span>
                      </div>
                    </div>
                  </div>
                ))}
              </div>

              {visibleDocs < regularList.length && (
                <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>

      {/* ================= ৭. সেরা ১০ হাসপাতাল এবং ক্লিনিক (Update: Category Wise Doctors) ================= */}
      <section id="hospital-section" className="relative px-4 max-w-7xl mx-auto z-20 mb-24 pt-8">
        <div className="absolute top-1/2 right-1/4 w-96 h-96 bg-cyan-600/10 rounded-full blur-[120px] -z-10 pointer-events-none"></div>

        <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-gradient-to-br from-cyan-500/20 to-blue-500/20 p-2.5 rounded-xl border border-cyan-500/30 text-cyan-400 shadow-[0_0_15px_rgba(34,211,238,0.2)]">
               <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={() => setIsAllHospsOpen(true)} 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 transition-all text-sm font-extrabold shadow-lg group">
             <Grid className="w-4 h-4" /> সকল হাসপাতাল দেখুন <ChevronRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
          </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-[0_5px_15px_rgba(34,211,238,0.3)]' 
                 : 'bg-transparent text-gray-400 hover:bg-white/5 hover:text-white'
               }`}
             >
               {hosp}
             </button>
          ))}
        </div>

        {/* Hospital Inline Profile Display */}
        <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-[0_10px_30px_rgba(34,211,238,0.05)] flex flex-col md:flex-row justify-between items-center gap-6 animate-in slide-in-from-bottom-4 duration-500">
            <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 shadow-inner">
                    <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-[0_0_20px_rgba(34,211,238,0.3)] flex justify-center items-center gap-2">
                <Phone className="w-5 h-5" /> রিসেপশনে কল করুন
            </a>
        </div>

        {/* Categorized Doctors List for Active Hospital */}
        <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] transition-colors shrink-0">
                      {getInitial(docName)}
                    </div>
                    <div className="flex-1">
                      <h4 className="text-[14px] font-extrabold text-white group-hover:text-cyan-300 transition-colors 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>

      {/* ================= ৬. সেরা ১০ ডায়াগনস্টিক সেন্টার (Update: Category Wise Doctors) ================= */}
      <section className="relative px-4 max-w-7xl mx-auto z-20 mb-24">
        <div className="absolute top-1/3 left-1/4 w-96 h-96 bg-cyan-600/10 rounded-full blur-[120px] -z-10 pointer-events-none"></div>

        <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-gradient-to-br from-cyan-500/20 to-blue-500/20 p-2.5 rounded-xl border border-cyan-500/30 text-cyan-400 shadow-[0_0_15px_rgba(34,211,238,0.2)]">
               <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={() => setIsAllDiagsOpen(true)} 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 transition-all text-sm font-extrabold shadow-lg group">
             <Grid className="w-4 h-4" /> সকল ডায়াগনস্টিক দেখুন <ChevronRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
          </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-[0_5px_15px_rgba(34,211,238,0.3)]' 
                 : 'bg-transparent text-gray-400 hover:bg-white/5 hover:text-white'
               }`}
             >
               {diag}
             </button>
          ))}
        </div>

        {/* Diagnostic Inline Profile Display */}
        <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-[0_10px_30px_rgba(34,211,238,0.05)] flex flex-col md:flex-row justify-between items-center gap-6 animate-in slide-in-from-bottom-4 duration-500">
            <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 shadow-inner">
                    <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 flex items-center gap-1 border border-white/10"><ShieldCheck className="w-3 h-3 text-green-400"/> অ্যাডভান্সড এমআরআই (MRI)</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>
                        <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-[0_0_20px_rgba(34,211,238,0.3)] flex justify-center items-center gap-2">
                <Phone className="w-5 h-5" /> টেস্টের সিরিয়াল নিন
            </a>
        </div>

        {/* Categorized Doctors List for Active Diagnostic */}
        <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] transition-colors shrink-0">
                      {getInitial(docName)}
                    </div>
                    <div className="flex-1">
                      <h4 className="text-[14px] font-extrabold text-white group-hover:text-cyan-300 transition-colors 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>

      {/* ================= ৯. বিশেষায়িত চিকিৎসা কেন্দ্র (Update: Category Wise Doctors) ================= */}
      <section className="relative px-4 max-w-7xl mx-auto z-20 mb-24">
        <div className="absolute top-0 right-1/4 w-80 h-80 bg-purple-600/10 rounded-full blur-[100px] -z-10 pointer-events-none"></div>

        <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-gradient-to-br from-purple-500/20 to-pink-500/20 p-2.5 rounded-xl border border-purple-500/30 text-purple-400 shadow-[0_0_15px_rgba(168,85,247,0.2)]">
               <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={() => setIsAllSpecOpen(true)} 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 hover:border-transparent rounded-full transition-all text-sm font-extrabold shadow-lg group">
             <Grid className="w-4 h-4" /> সকল সেন্টার দেখুন <ChevronRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
          </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 hover:text-white'
               }`}
             >
               {center.name}
             </button>
          ))}
        </div>

        {(() => {
          const activeData = specializedCentersList.find(c => c.name === activeSpecialCenter) || specializedCentersList[0];
          return (
            <>
              {/* Specialized Center Inline Profile Display */}
              <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 animate-in slide-in-from-bottom-4 duration-500`}>
                  <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>

              {/* Categorized Doctors List for Active Specialized Center */}
              <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, 5, 6].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="absolute top-1/2 left-1/4 w-80 h-80 bg-yellow-500/10 rounded-full blur-[100px] -z-10 pointer-events-none"></div>

         <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-gradient-to-br from-yellow-500/20 to-orange-500/20 p-2.5 rounded-xl border border-yellow-500/30 text-yellow-400 shadow-[0_0_15px_rgba(234,179,8,0.2)]">
                 <MessageSquare 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={() => 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-[0_10px_20px_rgba(234,179,8,0.3)] group">
               <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: "১ মাস আগে" },
              { 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] hover:border-yellow-500/30 transition-all duration-300 group cursor-pointer shadow-lg hover:shadow-[0_10px_30px_rgba(234,179,8,0.1)]">
                  <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-gradient-to-br from-yellow-500/20 to-orange-500/20 text-yellow-400 flex items-center justify-center font-extrabold text-lg border border-yellow-500/30 shadow-inner group-hover:scale-110 transition-transform">
                          {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 group-hover:bg-[#02112A] transition-colors">
                    <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="absolute top-0 left-1/2 -translate-x-1/2 w-3/4 h-full bg-gradient-to-b from-cyan-900/20 to-transparent blur-[150px] -z-10 pointer-events-none"></div>

        <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="absolute top-0 left-1/2 -translate-x-1/2 w-16 h-16 bg-cyan-500/20 rounded-full blur-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>

                  <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="absolute top-1/2 right-1/4 w-80 h-80 bg-red-600/10 rounded-full blur-[120px] -z-10 pointer-events-none"></div>

         <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-gradient-to-br from-red-500/20 to-orange-500/20 p-2.5 rounded-xl border border-red-500/30 text-red-400 shadow-[0_0_15px_rgba(239,68,68,0.2)] animate-pulse">
                 <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="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 hover:border-red-500/50 hover:bg-red-900/30 transition-all 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 hover:border-orange-500/50 hover:bg-orange-900/30 transition-all 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>

         <div className="flex items-center gap-2 mb-5">
           <Building2 className="w-5 h-5 text-gray-400" />
           <h3 className="text-lg font-bold text-white">২৪ ঘণ্টা খোলা হাসপাতাল (ICU/CCU)</h3>
         </div>
         
         <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
           {[
             { name: 'প্রাইম মেডিকেল কলেজ হাসপাতাল', location: 'পীরজাবাদ, রংপুর', facility: 'ICU, CCU, Emergency', status: '24/7 Open' },
             { name: 'রংপুর কমিউনিটি হাসপাতাল', location: 'মেডিকেল মোড়, রংপুর', facility: 'Emergency, NICU, OT', status: '24/7 Open' },
             { name: 'ইসলামী ব্যাংক কমিউনিটি হাসপাতাল', location: 'ধাপ, জেল রোড, রংপুর', facility: 'ICU, Blood Bank, NICU', status: '24/7 Open' }
           ].map((hosp, idx) => (
             <div key={idx} className="bg-[#0A1930]/60 backdrop-blur-md border border-white/10 p-5 rounded-2xl hover:border-red-500/30 transition-all group">
               <div className="flex justify-between items-start mb-3">
                 <h4 className="text-[15px] font-bold text-white group-hover:text-red-400 transition-colors leading-tight">{hosp.name}</h4>
                 <span className="bg-red-500/20 text-red-400 text-[9px] px-2 py-1 rounded font-extrabold uppercase tracking-wider animate-pulse">{hosp.status}</span>
               </div>
               <p className="text-[11px] text-gray-400 font-medium flex items-center gap-1.5 mb-2">
                 <MapPin className="w-3.5 h-3.5 text-gray-500" /> {hosp.location}
               </p>
               <p className="text-[11px] text-cyan-300 font-medium flex items-center gap-1.5 mb-5 bg-cyan-900/30 inline-block px-2 py-1 rounded">
                 <ShieldCheck className="w-3.5 h-3.5 inline mr-1 text-cyan-400" /> {hosp.facility}
               </p>
               <a href="tel:01700000000" className="w-full py-3 bg-white/5 hover:bg-red-600 text-gray-300 hover:text-white rounded-xl text-xs font-bold transition-all flex justify-center items-center gap-2 border border-white/5 hover:border-transparent">
                 <Phone className="w-3.5 h-3.5" /> হেল্প ডেস্কে কল করুন
               </a>
             </div>
           ))}
         </div>
      </section>

      {/* ================= ১৩. রংপুরের সেরা ১০০ অ্যাম্বুলেন্স ডিরেক্টরি ================= */}
      <section id="ambulance-section" className="relative px-4 max-w-7xl mx-auto z-20 mb-24 pt-8">
         <div className="absolute top-1/2 right-1/4 w-80 h-80 bg-cyan-600/10 rounded-full blur-[100px] -z-10 pointer-events-none"></div>

         <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-gradient-to-br from-cyan-500/20 to-blue-500/20 p-2.5 rounded-xl border border-cyan-500/30 text-cyan-400 shadow-[0_0_15px_rgba(34,211,238,0.2)]">
                 <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 hover:text-cyan-300'}`}>
                    {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>
                 <option value="টার্মিনাল">বাস টার্মিনাল</option>
               </select>
            </div>
         </div>

         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
            {filteredAmbulances.length > 0 ? (
              filteredAmbulances.map((amb, i) => {
                const isICU = amb.type.includes('ICU') || amb.type.includes('NICU');
                const isFreezing = amb.type.includes('ফ্রিজিং');
                
                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 hover:shadow-[0_10px_30px_rgba(34,211,238,0.15)] flex flex-col h-full relative overflow-hidden">
                      <div className="absolute top-0 right-0 bg-green-500/20 text-green-400 text-[9px] px-3 py-1.5 rounded-bl-xl font-extrabold uppercase tracking-widest border-b border-l border-green-500/30 shadow-sm flex items-center gap-1">
                        <span className="w-1.5 h-1.5 bg-green-400 rounded-full animate-pulse"></span> 24/7 Open
                      </div>

                      <h4 className="text-[17px] font-extrabold text-white mb-2 group-hover:text-cyan-300 transition-colors leading-tight pr-16">{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 animate-pulse' : isFreezing ? 'bg-cyan-500/20 text-cyan-300 border-cyan-500/30' : 'bg-blue-500/20 text-blue-300 border-blue-500/30'}`}>
                           {isICU ? <HeartPulse className="w-3 h-3" /> : <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-start gap-2">
                          <MapPin className="w-4 h-4 text-cyan-500/70 shrink-0 mt-0.5" /> <span>স্ট্যান্ড: <span className="text-white font-bold">{amb.stand}</span></span>
                        </p>
                        <p className="text-[12px] text-gray-300 font-medium flex items-start gap-2 pt-1 border-t border-white/5">
                          <span className="w-4 text-center font-bold text-cyan-500/70">৳</span>
                          <span>ভাড়া: <span className="text-cyan-400 font-bold">আলোচনা সাপেক্ষে</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 transition-all border border-white/10 text-[12px]">
                          বিস্তারিত দেখুন
                        </button>
                        <a href={`tel:${amb.phone.replace(/[^0-9]/g, '')}`} className={`w-1/2 py-3 ${isICU ? 'bg-red-600/10 hover:bg-red-600 text-red-400 border-red-500/20' : 'bg-cyan-500/10 hover:bg-cyan-500 text-cyan-400 border-cyan-500/20'} hover:text-white font-extrabold rounded-xl transition-all border hover:border-transparent flex justify-center items-center gap-1.5 text-[13px] shadow-lg inline-flex`}>
                          <Phone className="w-3.5 h-3.5" /> Call Now
                        </a>
                      </div>
                  </div>
                );
              })
            ) : (
              <div className="col-span-full py-10 text-center bg-white/5 border border-white/10 rounded-2xl">
                <p className="text-gray-400 font-medium">দুঃখিত, এই ক্যাটাগরি বা লোকেশনে কোনো অ্যাম্বুলেন্স পাওয়া যায়নি।</p>
              </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="absolute bottom-0 left-1/2 -translate-x-1/2 w-[800px] h-[300px] bg-blue-600/10 rounded-full blur-[120px] -z-10 pointer-events-none"></div>

         <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"><MessageSquare className="w-4 h-4 text-green-400" /> হোয়াটসঅ্যাপ সাপোর্ট</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>
                     <li><button onClick={() => document.getElementById('blood-bank')?.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('ambulance-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 hover:text-white transition-all flex items-center gap-2 font-medium bg-cyan-500/10 hover:bg-cyan-500/20 px-3 py-2.5 rounded-lg border border-cyan-500/20 w-full text-left">
                           <UserPlus className="w-4 h-4" /> ডক্টর রেজিস্ট্রেশন
                        </button>
                     </li>
                     <li>
                         <button onClick={() => setIsHospRegOpen(true)} className="text-[13px] text-cyan-300 hover:text-white transition-all flex items-center gap-2 font-medium bg-cyan-500/10 hover:bg-cyan-500/20 px-3 py-2.5 rounded-lg border border-cyan-500/20 w-full text-left">
                           <Building2 className="w-4 h-4" /> হাসপাতাল/ক্লিনিক রেজিস্ট্রেশন
                        </button>
                     </li>
                     <li>
                         <button onClick={() => setIsDiagRegOpen(true)} className="text-[13px] text-cyan-300 hover:text-white transition-all flex items-center gap-2 font-medium bg-cyan-500/10 hover:bg-cyan-500/20 px-3 py-2.5 rounded-lg border border-cyan-500/20 w-full text-left">
                           <Activity className="w-4 h-4" /> ডায়াগনস্টিক রেজিস্ট্রেশন
                        </button>
                     </li>                 
                     <li className="pt-2">
                        <button onClick={() => setIsLoginOpen(true)} className="text-[13px] text-[#02112A] hover:text-white transition-all flex items-center justify-center gap-2 font-extrabold bg-gradient-to-r from-blue-500 to-cyan-400 hover:from-blue-600 hover:to-cyan-500 px-3 py-2.5 rounded-lg border border-transparent w-full text-center shadow-lg">
                           <LogIn className="w-4 h-4" /> পার্টনার লগইন (Login)
                        </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 className="flex gap-3">
                     <div className="w-9 h-9 rounded-full bg-white/5 border border-white/10 flex items-center justify-center text-gray-400 hover:bg-blue-600 hover:text-white transition-all cursor-pointer font-bold">f</div>
                     <div className="w-9 h-9 rounded-full bg-white/5 border border-white/10 flex items-center justify-center text-gray-400 hover:bg-red-600 hover:text-white transition-all cursor-pointer font-bold">y</div>
                     <div className="w-9 h-9 rounded-full bg-white/5 border border-white/10 flex items-center justify-center text-gray-400 hover:bg-cyan-500 hover:text-[#02112A] transition-all cursor-pointer font-bold">in</div>
                  </div>
               </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 className="flex gap-6 text-[12px] text-gray-500 font-medium">
                  <a href="#" className="hover:text-cyan-400 transition-colors">Privacy Policy</a>
                  <a href="#" className="hover:text-cyan-400 transition-colors">Terms of Service</a>
               </div>
            </div>
         </div>
      </footer>      

      {/* ================= MODALS SECTION ================= */}

      {/* --- ALL DEPARTMENTS MODAL --- */}
      {isAllDeptsOpen && (
        <div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-[#02112A]/90 backdrop-blur-xl animate-in zoom-in-95 duration-300">
          <div className="bg-[#0A1930] w-full max-w-5xl max-h-[90vh] rounded-[32px] border border-cyan-500/30 shadow-[0_0_50px_rgba(34,211,238,0.15)] flex flex-col relative overflow-hidden">
            <div className="p-6 border-b border-white/10 flex justify-between items-center bg-[#06142E] sticky top-0 z-10">
              <div>
                <h2 className="text-2xl font-black text-white">সকল বিভাগ</h2>
                <p className="text-sm text-gray-400 mt-1">আপনার প্রয়োজনীয় বিভাগ নির্বাচন করুন</p>
              </div>
              <button onClick={() => setIsAllDeptsOpen(false)} className="w-10 h-10 bg-white/5 hover:bg-red-500/20 text-gray-400 hover:text-red-400 rounded-full flex items-center justify-center transition-colors">
                <X className="w-5 h-5" />
              </button>
            </div>
            <div className="p-6 overflow-y-auto custom-scrollbar">
              <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
                {allCategoriesList.map((dept, idx) => (
                  <button 
                    key={idx} 
                    onClick={() => {
                      setActiveCategory(dept);
                      setVisibleDocs(5);
                      setIsAllDeptsOpen(false);
                      document.getElementById('directory-section')?.scrollIntoView({behavior: 'smooth'});
                    }}
                    className="p-4 bg-white/5 hover:bg-cyan-500/20 border border-white/10 hover:border-cyan-500/50 rounded-2xl flex flex-col items-center justify-center text-center gap-3 transition-all group"
                  >
                    <div className="w-12 h-12 rounded-full bg-cyan-900/30 text-cyan-400 flex items-center justify-center group-hover:bg-cyan-500 group-hover:text-[#02112A] transition-colors">
                      <Stethoscope className="w-6 h-6" />
                    </div>
                    <span className="text-[13px] font-bold text-gray-200 group-hover:text-white">{dept}</span>
                  </button>
                ))}
              </div>
            </div>
          </div>
        </div>
      )}

      {/* --- ALL HOSPITALS MODAL --- */}
      {isAllHospsOpen && (
        <div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-[#02112A]/90 backdrop-blur-xl animate-in zoom-in-95 duration-300">
          <div className="bg-[#0A1930] w-full max-w-5xl max-h-[90vh] rounded-[32px] border border-cyan-500/30 shadow-[0_0_50px_rgba(34,211,238,0.15)] flex flex-col relative overflow-hidden">
            <div className="p-6 border-b border-white/10 flex justify-between items-center bg-[#06142E] sticky top-0 z-10">
              <div>
                <h2 className="text-2xl font-black text-white">সকল হাসপাতাল ও ক্লিনিক</h2>
                <p className="text-sm text-gray-400 mt-1">রংপুর বিভাগের সকল রেজিস্টার্ড হাসপাতালের তালিকা</p>
              </div>
              <button onClick={() => setIsAllHospsOpen(false)} className="w-10 h-10 bg-white/5 hover:bg-red-500/20 text-gray-400 hover:text-red-400 rounded-full flex items-center justify-center transition-colors">
                <X className="w-5 h-5" />
              </button>
            </div>
            <div className="p-6 overflow-y-auto custom-scrollbar">
              <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
                {allHospitalsList.map((hosp, idx) => (
                  <button 
                    key={idx} 
                    onClick={() => {
                      setActiveTopHosp(hosp);
                      setIsAllHospsOpen(false);
                      document.getElementById('hospital-section')?.scrollIntoView({behavior: 'smooth'});
                    }}
                    className="p-4 bg-white/5 hover:bg-cyan-500/10 border border-white/10 hover:border-cyan-500/30 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">
                      <Building2 className="w-6 h-6" />
                    </div>
                    <div>
                       <span className="text-[14px] font-bold text-gray-200 group-hover:text-white leading-snug line-clamp-2">{hosp}</span>
                       <span className="text-[10px] text-gray-500 mt-1 block">রংপুর বিভাগ</span>
                    </div>
                  </button>
                ))}
              </div>
            </div>
          </div>
        </div>
      )}

      {/* --- ALL DIAGNOSTICS MODAL --- */}
      {isAllDiagsOpen && (
        <div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-[#02112A]/90 backdrop-blur-xl animate-in zoom-in-95 duration-300">
          <div className="bg-[#0A1930] w-full max-w-5xl max-h-[90vh] rounded-[32px] border border-cyan-500/30 shadow-[0_0_50px_rgba(34,211,238,0.15)] flex flex-col relative overflow-hidden">
            <div className="p-6 border-b border-white/10 flex justify-between items-center bg-[#06142E] sticky top-0 z-10">
              <div>
                <h2 className="text-2xl font-black text-white">সকল ডায়াগনস্টিক সেন্টার</h2>
                <p className="text-sm text-gray-400 mt-1">রংপুর বিভাগের সকল রেজিস্টার্ড ডায়াগনস্টিক সেন্টারের তালিকা</p>
              </div>
              <button onClick={() => setIsAllDiagsOpen(false)} className="w-10 h-10 bg-white/5 hover:bg-red-500/20 text-gray-400 hover:text-red-400 rounded-full flex items-center justify-center transition-colors">
                <X className="w-5 h-5" />
              </button>
            </div>
            <div className="p-6 overflow-y-auto custom-scrollbar">
              <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
                {allDiagnosticsList.map((diag, idx) => (
                  <button 
                    key={idx} 
                    onClick={() => {
                      setActiveTopDiag(diag);
                      setIsAllDiagsOpen(false);
                      document.getElementById('hospital-section')?.scrollIntoView({behavior: 'smooth'}); // assuming diags are right after hospital
                    }}
                    className="p-4 bg-white/5 hover:bg-cyan-500/10 border border-white/10 hover:border-cyan-500/30 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">
                      <Activity className="w-6 h-6" />
                    </div>
                    <div>
                       <span className="text-[14px] font-bold text-gray-200 group-hover:text-white leading-snug line-clamp-2">{diag}</span>
                       <span className="text-[10px] text-gray-500 mt-1 block">রংপুর বিভাগ</span>
                    </div>
                  </button>
                ))}
              </div>
            </div>
          </div>
        </div>
      )}

      {/* --- ALL SPECIALIZED CENTERS MODAL --- */}
      {isAllSpecOpen && (
        <div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-[#02112A]/90 backdrop-blur-xl animate-in zoom-in-95 duration-300">
          <div className="bg-[#0A1930] w-full max-w-5xl max-h-[90vh] rounded-[32px] border border-cyan-500/30 shadow-[0_0_50px_rgba(34,211,238,0.15)] flex flex-col relative overflow-hidden">
            <div className="p-6 border-b border-white/10 flex justify-between items-center bg-[#06142E] sticky top-0 z-10">
              <div>
                <h2 className="text-2xl font-black text-white">সকল বিশেষায়িত সেন্টার</h2>
                <p className="text-sm text-gray-400 mt-1">রংপুর বিভাগের সকল স্পেশালাইজড হাসপাতাল ও রিহ্যাব</p>
              </div>
              <button onClick={() => setIsAllSpecOpen(false)} className="w-10 h-10 bg-white/5 hover:bg-red-500/20 text-gray-400 hover:text-red-400 rounded-full flex items-center justify-center transition-colors">
                <X className="w-5 h-5" />
              </button>
            </div>
            <div className="p-6 overflow-y-auto custom-scrollbar">
              <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
                {allSpecializedList.map((spec, idx) => (
                  <button 
                    key={idx} 
                    onClick={() => {
                      setActiveSpecialCenter(spec.name);
                      setIsAllSpecOpen(false);
                      document.getElementById('hospital-section')?.scrollIntoView({behavior: 'smooth'}); // scrolls to specialized area generally
                    }}
                    className={`p-4 bg-white/5 hover:bg-${spec.color}-500/10 border border-white/10 hover:border-${spec.color}-500/30 rounded-2xl flex flex-col text-left gap-3 transition-all group`}
                  >
                    <div className="flex items-center gap-4">
                        <div className={`w-12 h-12 shrink-0 rounded-xl bg-${spec.color}-900/30 text-${spec.color}-400 flex items-center justify-center border border-${spec.color}-500/20 group-hover:bg-${spec.color}-500 group-hover:text-[#02112A] transition-colors`}>
                        <Building2 className="w-6 h-6" />
                        </div>
                        <div>
                        <span className="text-[14px] font-bold text-gray-200 group-hover:text-white leading-snug line-clamp-2">{spec.name}</span>
                        <span className="text-[10px] text-gray-500 mt-1 block">{spec.location}</span>
                        </div>
                    </div>
                    <span className={`bg-white/5 text-${spec.color}-300 text-[10px] px-2 py-1 rounded w-max border border-white/5`}>{spec.category}</span>
                  </button>
                ))}
              </div>
            </div>
          </div>
        </div>
      )}

      {/* ব্লাড ব্যাংক প্রোফাইল মডাল (Fully Functional) */}
      {isBloodModalOpen && selectedBloodBank && (
          <div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-[#02112A]/90 backdrop-blur-xl animate-in zoom-in-95 duration-300">
            <div className="bg-[#0A1930] w-full max-w-md rounded-[40px] border border-cyan-500/30 overflow-hidden shadow-[0_0_50px_rgba(34,211,238,0.15)] p-8 relative">
              <button onClick={() => setIsBloodModalOpen(false)} className="absolute top-6 right-6 p-2 bg-white/5 rounded-full text-gray-400 hover:text-white transition-all">
                <X className="w-5 h-5" />
              </button>
              <div className="text-center mb-6">
                 <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 shadow-inner">
                   <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>
              <div className="bg-[#02112A] p-5 rounded-2xl 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">
                        {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 className="flex justify-between text-sm pt-4 border-t border-white/5">
                    <span className="text-gray-500 font-bold">স্ট্যাটাস:</span> 
                    <span className="text-green-400 font-extrabold flex items-center gap-1"><BadgeCheck className="w-4 h-4"/> ভেরিফাইড</span>
                </div>
              </div>
              <a href={`tel:${selectedBloodBank.phone.replace(/[^0-9]/g, '')}`} className="w-full bg-gradient-to-r from-blue-600 to-cyan-500 hover:from-blue-500 hover:to-cyan-400 text-[#02112A] py-4 rounded-2xl font-extrabold flex items-center justify-center gap-2 transition-all shadow-lg hover:scale-105">
                <Phone className="w-5 h-5" /> {selectedBloodBank.phone} এ কল করুন
              </a>
            </div>
          </div>
      )}

      {/* Guest Review Modal */}
      {isGuestReviewOpen && (
        <div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-[#02112A]/90 backdrop-blur-md animate-in zoom-in-95 duration-300">
           <div className="bg-[#06142E] border border-yellow-500/30 p-8 rounded-3xl max-w-lg w-full shadow-[0_0_50px_rgba(234,179,8,0.15)] relative">
              <button onClick={() => setIsGuestReviewOpen(false)} className="absolute top-4 right-4 text-gray-400 hover:text-white transition-colors"><X className="w-5 h-5"/></button>
              <h2 className="text-2xl font-bold text-white mb-2 flex items-center gap-2"><MessageSquare className="text-yellow-500" /> মতামত দিন</h2>
              <p className="text-sm text-gray-400 mb-6">আপনার চিকিৎসা অভিজ্ঞতা শেয়ার করুন, যা অন্য রোগীদের সাহায্য করবে।</p>
              
              <form onSubmit={handleGuestReviewSubmit} className="space-y-4">
                <div>
                  <label className="text-[12px] text-gray-400 font-bold mb-1 block">আপনার নাম</label>
                  <input required type="text" placeholder="আপনার নাম লিখুন" className="w-full bg-[#02112A] border border-white/10 px-4 py-3 rounded-xl text-white outline-none focus:border-yellow-500/50" />
                </div>
                <div>
                  <label className="text-[12px] text-gray-400 font-bold mb-1 block">ডাক্তারের নাম</label>
                  <input required type="text" placeholder="যাকে দেখিয়েছেন তার নাম" className="w-full bg-[#02112A] border border-white/10 px-4 py-3 rounded-xl text-white outline-none focus:border-yellow-500/50" />
                </div>
                <div>
                  <label className="text-[12px] text-gray-400 font-bold mb-2 block">আপনার রেটিং</label>
                  <div className="flex gap-2">
                    {[1,2,3,4,5].map(star => (
                       <Star key={star} onClick={() => setGuestRating(star)} className={`w-8 h-8 cursor-pointer transition-colors ${star <= guestRating ? 'fill-yellow-500 text-yellow-500' : 'text-gray-600'}`} />
                    ))}
                  </div>
                </div>
                <div>
                  <label className="text-[12px] text-gray-400 font-bold mb-1 block">বিস্তারিত মতামত</label>
                  <textarea required rows={4} placeholder="আপনার অভিজ্ঞতা লিখুন..." className="w-full bg-[#02112A] border border-white/10 px-4 py-3 rounded-xl text-white outline-none focus:border-yellow-500/50 resize-none"></textarea>
                </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 hover:scale-105 transition-transform disabled:opacity-70">
                  {guestReviewSubmitting ? 'সাবমিট হচ্ছে...' : 'রিভিউ জমা দিন'}
                </button>
              </form>
           </div>
        </div>
      )}

      {/* Global Alert / Toast Modal */}
      {globalAlert.isOpen && (
        <div className="fixed inset-0 z-[200] flex items-center justify-center p-4 bg-[#02112A]/80 backdrop-blur-sm animate-in zoom-in-95 duration-200">
          <div className={`bg-[#06142E] border ${globalAlert.type === 'success' ? 'border-green-500/50' : globalAlert.type === 'error' ? 'border-red-500/50' : 'border-cyan-500/50'} p-8 rounded-3xl max-w-sm w-full shadow-[0_0_40px_rgba(0,0,0,0.3)] text-center flex flex-col items-center relative`}>
             <button onClick={() => setGlobalAlert({...globalAlert, isOpen: false})} className="absolute top-4 right-4 text-gray-400 hover:text-white transition-colors"><X className="w-5 h-5"/></button>
             {globalAlert.type === 'success' && <ShieldCheck className="w-16 h-16 text-green-400 mb-4 drop-shadow-[0_0_15px_rgba(74,222,128,0.4)]" />}
             {globalAlert.type === 'error' && <ShieldAlert className="w-16 h-16 text-red-400 mb-4 drop-shadow-[0_0_15px_rgba(248,113,113,0.4)]" />}
             {globalAlert.type === 'info' && <Info className="w-16 h-16 text-cyan-400 mb-4 drop-shadow-[0_0_15px_rgba(34,211,238,0.4)]" />}
             <h3 className="text-xl font-bold text-white mb-2">{globalAlert.title}</h3>
             <p className="text-gray-300 text-sm whitespace-pre-line leading-relaxed">{globalAlert.message}</p>
             <button onClick={() => setGlobalAlert({...globalAlert, isOpen: false})} className={`mt-6 px-8 py-3 w-full rounded-xl font-bold transition-all ${globalAlert.type === 'success' ? 'bg-green-500 hover:bg-green-400 text-black' : globalAlert.type === 'error' ? 'bg-red-500 hover:bg-red-400 text-white' : 'bg-cyan-500 hover:bg-cyan-400 text-[#02112A]'}`}>
               ঠিক আছে
             </button>
          </div>
        </div>
      )}

      {/* ৮. ১৫-পয়েন্ট ডক্টর প্রোফাইল মডাল (With Suggestions) */}
      {isModalOpen && selectedDoc && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-2 sm:p-4 opacity-100 transition-opacity duration-300">
          <div className="absolute inset-0 bg-[#02112A]/85 backdrop-blur-md" onClick={() => setIsModalOpen(false)}></div>
          
          <div className="relative w-full max-w-5xl max-h-[95vh] bg-[#0A1930] border border-cyan-500/30 rounded-[32px] shadow-2xl overflow-hidden flex flex-col z-10 animate-in zoom-in-95 duration-300">
            <button onClick={() => setIsModalOpen(false)} className="absolute top-4 right-4 sm:top-5 sm:right-5 w-10 h-10 bg-white/5 hover:bg-red-500/20 text-gray-400 hover:text-red-400 rounded-full flex items-center justify-center transition-all z-20">
              <X className="w-5 h-5" />
            </button>

            <div className="overflow-y-auto custom-scrollbar p-5 md:p-8">
              {/* টপ সেকশন */}
              <div className="flex flex-col md:flex-row gap-6 lg:gap-8 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 relative">
                  {getInitial(selectedDoc.name)}
                  <div className="absolute -bottom-2 -right-2 bg-emerald-500 text-[#02112A] p-1.5 rounded-full border-2 border-[#0A1930]" title="BMDC Verified">
                    <ShieldCheck className="w-5 h-5" />
                  </div>
                </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>
                    <span className="bg-yellow-400/10 border border-yellow-400/20 text-yellow-400 text-sm font-bold px-3 py-1 rounded-full flex items-center gap-1.5">
                      <Star className="w-4 h-4 fill-yellow-400" /> {selectedDoc.rating}
                    </span>
                  </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 mb-1.5 text-sm">
                    <Award className="w-4 h-4 text-cyan-500/70" /> {selectedDoc.title}
                  </p>
                  <p className="text-gray-400 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 className="flex flex-wrap gap-2 md:gap-3">
                    <div className="inline-flex items-center gap-1.5 bg-blue-500/10 border border-blue-500/20 px-3 py-1.5 rounded-lg text-xs font-bold text-blue-300">
                      <Briefcase className="w-3.5 h-3.5" /> {selectedDoc.experience}
                    </div>
                    <div className="inline-flex items-center gap-1.5 bg-emerald-500/10 border border-emerald-500/20 px-3 py-1.5 rounded-lg text-xs font-bold text-emerald-300">
                      <FileText className="w-3.5 h-3.5" /> BMDC: {selectedDoc.bmdc}
                    </div>
                    <div className="inline-flex items-center gap-1.5 bg-white/5 border border-white/10 px-3 py-1.5 rounded-lg text-xs font-bold text-gray-300">
                      <Building2 className="w-3.5 h-3.5 text-cyan-400" /> {selectedDoc.hospital}
                    </div>
                  </div>
                </div>

                <div className="w-full md:w-auto bg-gradient-to-b from-[#02112A] to-cyan-900/10 border border-cyan-500/20 p-5 rounded-2xl flex flex-col items-center md:items-end shrink-0 shadow-lg">
                  <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.replace(/[^0-9]/g, '')}`} 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-[0_0_20px_rgba(34,211,238,0.3)] flex items-center justify-center gap-2 mb-2 inline-flex">
                    <Phone className="w-5 h-5" /> সিরিয়াল নিন
                  </a>
                  <p className="text-[11px] text-cyan-400 font-medium bg-cyan-500/10 px-2 py-1 rounded w-full text-center">কল: {selectedDoc.phone}</p>
                </div>
              </div>

              {/* বডি সেকশন */}
              <div className="grid grid-cols-1 lg:grid-cols-12 gap-6 lg:gap-8">
                <div className="lg:col-span-7 space-y-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"><Stethoscope className="w-5 h-5 text-cyan-400" /> যে সকল রোগের চিকিৎসা করেন</h4>
                    <div className="flex flex-wrap gap-2">
                      {selectedDoc.diseases.map((disease, idx) => (
                        <span key={idx} className="bg-[#0A1930] text-gray-300 text-xs font-medium px-3 py-1.5 rounded-full border border-white/10 cursor-default">
                          {disease}
                        </span>
                      ))}
                    </div>
                  </div>

                  <div className="bg-[#02112A]/50 border border-white/5 p-5 rounded-2xl space-y-4">
                    <h4 className="text-white font-bold flex items-center gap-2 mb-2"><MapPin className="w-5 h-5 text-cyan-400" /> চেম্বারের ঠিকানা ও সময়</h4>
                    <div className="pl-7 space-y-3">
                      <div>
                        <p className="text-xs text-gray-500 font-bold mb-1">লোকেশন ও রুম নং</p>
                        <p className="text-sm text-gray-300 font-medium leading-relaxed">{selectedDoc.chamber}</p>
                      </div>
                      <div className="w-full h-px bg-white/5"></div>
                      <div>
                        <p className="text-xs text-gray-500 font-bold mb-1">রোগী দেখার সময়সূচী</p>
                        <p className="text-sm text-gray-300 font-medium flex items-center gap-2">
                          <Calendar className="w-4 h-4 text-cyan-500/50" /> {selectedDoc.time}
                        </p>
                      </div>
                    </div>
                  </div>

                  <div className="bg-gradient-to-br from-cyan-900/10 to-blue-900/10 border border-cyan-500/20 p-5 rounded-2xl">
                    <h4 className="text-white font-bold flex items-center gap-2 mb-4"><TrendingUp className="w-5 h-5 text-cyan-400" /> প্রফেশনাল ইনসাইট</h4>
                    <div className="space-y-4">
                      <div>
                        <div className="flex justify-between items-center mb-2">
                          <span className="text-xs font-bold text-gray-400">সাকসেস ও রিকভারি রেট</span>
                          <span className="text-sm font-extrabold text-cyan-400">{selectedDoc.successRate}%</span>
                        </div>
                        <div className="w-full bg-[#02112A] rounded-full h-2">
                          <div className="bg-gradient-to-r from-blue-500 to-cyan-400 h-2 rounded-full" style={{ width: `${selectedDoc.successRate}%` }}></div>
                        </div>
                      </div>
                      <div className="flex justify-between items-center bg-[#0A1930] p-3 rounded-xl border border-white/5">
                        <div className="flex items-center gap-3">
                          <ThumbsUp className="w-5 h-5 text-gray-400" />
                          <div><p className="text-[10px] text-gray-500 font-bold">পাবলিক রেটিং</p><p className="text-sm font-extrabold text-white">৯৮% পজিটিভ</p></div>
                        </div>
                        <div className="w-px h-8 bg-white/10"></div>
                        <div><p className="text-[10px] text-gray-500 font-bold">মোট রোগী দেখেছেন</p><p className="text-sm font-extrabold text-white">{selectedDoc.patients}</p></div>
                      </div>
                    </div>
                  </div>
                </div>

                <div className="lg:col-span-5 space-y-6 flex flex-col">
                  <div className="bg-[#02112A]/50 border border-white/5 p-2 rounded-2xl relative overflow-hidden group cursor-pointer h-48 shrink-0">
                    <div className="w-full h-full bg-gray-800 rounded-xl relative overflow-hidden">
                       <img src="https://images.unsplash.com/photo-1524661135-423995f22d0b?q=80&w=2074&auto=format&fit=crop" alt="Map" className="w-full h-full object-cover opacity-40 group-hover:opacity-60 transition-opacity duration-500" />
                       <div className="absolute inset-0 flex items-center justify-center bg-[#02112A]/40 group-hover:bg-[#02112A]/20 transition-all">
                         <div className="bg-white/10 backdrop-blur-md px-5 py-3 rounded-full border border-white/20 flex items-center gap-2 text-white font-bold text-sm shadow-[0_10px_20px_rgba(0,0,0,0.5)]">
                           <Map className="w-4 h-4 text-cyan-400" /> ম্যাপে ডিরেকশন দেখুন
                         </div>
                       </div>
                    </div>
                  </div>

                  <div className="bg-[#02112A]/50 border border-white/5 p-5 rounded-2xl flex flex-col flex-1 min-h-[300px]">
                    <div className="flex justify-between items-center mb-4 border-b border-white/5 pb-3">
                      <h4 className="text-white font-bold flex items-center gap-2"><MessageSquare className="w-4 h-4 text-cyan-400" /> রোগীর মতামত</h4>
                      <span className="text-[10px] bg-white/5 text-gray-300 px-2 py-1 rounded-md border border-white/10">১০+ রিভিউ</span>
                    </div>
                    <div className="space-y-3 overflow-y-auto custom-scrollbar flex-1 pr-2">
                      {selectedDoc.reviews.map((review, index) => (
                        <div key={index} className="bg-[#0A1930] p-3 rounded-xl border border-white/5">
                          <div className="flex justify-between items-start mb-1.5">
                            <div className="flex items-center gap-2">
                              <div className="w-6 h-6 rounded-full bg-blue-900/30 text-cyan-400 flex items-center justify-center font-bold text-xs border border-cyan-500/20">{review.user.charAt(0)}</div>
                              <div><p className="text-[12px] font-bold text-gray-200 leading-tight">{review.user}</p><p className="text-[9px] text-gray-500">{review.date}</p></div>
                            </div>
                            <div className="flex gap-0.5">
                              {[...Array(review.rating)].map((_, i) => (<Star key={i} className="w-2.5 h-2.5 fill-yellow-400 text-yellow-400" />))}
                            </div>
                          </div>
                          <p className="text-[11px] text-gray-400 font-medium leading-relaxed italic line-clamp-3">"{review.text}"</p>
                        </div>
                      ))}
                    </div>
                    <button onClick={() => {setIsModalOpen(false); setIsGuestReviewOpen(true);}} className="w-full mt-3 py-3 bg-white/5 hover:bg-white/10 text-cyan-400 font-bold rounded-xl transition-all border border-cyan-500/20 text-sm">
                      আপনার মতামত দিন
                    </button>
                  </div>
                </div>
              </div>

              {/* সাজেশন (Recommendations) সেকশন */}
              <div className="border-t border-white/5 pt-8 mt-8">
                  <h3 className="text-[15px] font-bold text-white mb-4 flex items-center gap-2">
                     <Stethoscope className="w-5 h-5 text-cyan-400"/> একই ক্যাটাগরির অন্যান্য বিশেষজ্ঞ
                  </h3>
                  <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
                      {[1, 2, 3, 4].map((_, idx) => (
                          <div key={idx} onClick={() => openDoctorProfile(`ডাঃ নতুন সাজেশন ${idx+1}`, selectedDoc.specialty.split(' ')[0])} className="bg-[#02112A] border border-white/10 p-4 rounded-2xl hover:border-cyan-500/50 cursor-pointer transition-all group flex items-center gap-3">
                              <div className="w-12 h-12 bg-cyan-900/30 rounded-full flex items-center justify-center text-cyan-400 font-bold border border-cyan-500/30 group-hover:bg-cyan-500 group-hover:text-[#02112A] transition-colors">ডা</div>
                              <div>
                                  <h4 className="text-sm font-bold text-white group-hover:text-cyan-300 transition-colors">ডাঃ নতুন সাজেশন {idx+1}</h4>
                                  <p className="text-[10px] text-gray-400">{selectedDoc.specialty}</p>
                                  <span className="text-[10px] text-yellow-400 font-bold flex items-center gap-1 mt-1"><Star className="w-3 h-3 fill-yellow-400" /> ৪.৮</span>
                              </div>
                          </div>
                      ))}
                  </div>
              </div>

            </div>
          </div>
        </div>
      )}

      {/* ১৪. অ্যাম্বুলেন্স প্রোফাইল মাস্টারপিস মডাল */}
      {selectedAmbulance && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-2 sm:p-4 opacity-100 transition-opacity duration-300">
          <div className="absolute inset-0 bg-[#02112A]/85 backdrop-blur-md" onClick={() => setSelectedAmbulance(null)}></div>
          <div className="relative w-full max-w-4xl max-h-[95vh] bg-gradient-to-b from-[#0A1930] to-[#02112A] border border-cyan-500/30 rounded-[32px] shadow-2xl overflow-y-auto custom-scrollbar flex flex-col z-10 animate-in zoom-in-95 duration-300">
            
            <button onClick={() => setSelectedAmbulance(null)} className="absolute top-4 right-4 w-10 h-10 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>

            <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-gradient-to-br from-cyan-500/20 to-blue-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>
                    <div className="flex flex-wrap items-center gap-3 mb-2">
                       <h2 className="text-2xl md:text-3xl font-extrabold text-white leading-tight">{selectedAmbulance.name}</h2>
                       <span className="bg-green-500/20 text-green-400 text-[10px] px-2.5 py-1 rounded-md font-bold uppercase flex items-center gap-1.5 border border-green-500/20">
                          <span className="w-1.5 h-1.5 bg-green-400 rounded-full animate-pulse"></span> 24/7 Open
                       </span>
                    </div>
                    <p className={`text-[14px] font-bold mb-3 ${selectedAmbulance.type.includes('ICU') ? 'text-red-400' : 'text-cyan-400'}`}>
                      {selectedAmbulance.type}
                    </p>
                    <div className="flex flex-col gap-1.5">
                       <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>
                       <p className="text-[13px] text-cyan-300 flex items-center gap-1.5 font-bold bg-cyan-900/20 w-max px-3 py-1 rounded-md border border-cyan-500/20">
                         <span className="w-4 text-center font-bold">৳</span> ভাড়া: আলোচনা সাপেক্ষে
                       </p>
                    </div>
                  </div>
               </div>

               <div className="mb-8">
                  <h3 className="text-[15px] font-bold text-white mb-4 flex items-center gap-2">
                    <ShieldCheck className="w-5 h-5 text-cyan-400" /> ভেতরের সুবিধাসমূহ
                  </h3>
                  <div className="flex flex-wrap gap-2">
                    {selectedAmbulance.tags.map((tag: string, i: number) => (
                      <span key={i} className="bg-white/5 border border-white/10 text-cyan-100 text-[12px] px-3 py-1.5 rounded-lg font-medium">
                        ✓ {tag}
                      </span>
                    ))}
                  </div>
               </div>

               <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
                 <div className="bg-[#02112A] border border-white/5 rounded-2xl p-2 relative overflow-hidden group h-48">
                    <img src="https://images.unsplash.com/photo-1524661135-423995f22d0b?q=80&w=2074&auto=format&fit=crop" className="w-full h-full object-cover opacity-40 mix-blend-luminosity rounded-xl" alt="Map" />
                    <div className="absolute inset-0 flex items-center justify-center">
                      <div className="bg-[#0A1930]/90 backdrop-blur-md px-5 py-3 rounded-xl border border-cyan-500/30 text-center">
                        <Map className="w-6 h-6 text-cyan-400 mx-auto mb-1" />
                        <p className="text-[11px] text-white font-bold">{selectedAmbulance.stand} এরিয়া</p>
                        <p className="text-[9px] text-gray-400 mt-0.5">লাইভ ডিরেকশন দেখুন</p>
                      </div>
                    </div>
                 </div>

                 <div className="flex flex-col justify-between">
                    <div className="bg-white/5 border border-white/10 p-5 rounded-2xl mb-4 flex justify-between items-center">
                      <div>
                        <p className="text-[11px] text-gray-400 font-medium mb-1">রোগীদের রেটিং</p>
                        <div className="flex items-center gap-2">
                           <span className="text-2xl font-extrabold text-white">{selectedAmbulance.rating}</span>
                           <div className="flex text-yellow-400"><Star className="w-4 h-4 fill-yellow-400"/><Star className="w-4 h-4 fill-yellow-400"/><Star className="w-4 h-4 fill-yellow-400"/></div>
                        </div>
                      </div>
                      <div className="text-right">
                         <p className="text-[11px] text-gray-400 font-medium mb-1">মোট রিভিউ</p>
                         <p className="text-lg font-bold text-cyan-400">{selectedAmbulance.reviews}+</p>
                      </div>
                    </div>

                    <div className="flex gap-3">
                       <button onClick={() => window.open('https://wa.me/8801700000000?text=আমি+আপনার+অ্যাম্বুলেন্স+সার্ভিসটি+বুক+করতে+চাই।', '_blank')} className="w-1/2 bg-green-600/20 hover:bg-green-600 text-green-400 hover:text-white border border-green-500/30 rounded-xl py-3.5 font-bold transition-all flex justify-center items-center gap-2 text-[14px]">
                         <MessageSquare className="w-4 h-4" /> WhatsApp
                       </button>
                       <a href={`tel:${selectedAmbulance.phone.replace(/[^0-9]/g, '')}`} className="w-1/2 bg-gradient-to-r from-blue-600 to-cyan-500 text-white rounded-xl py-3.5 font-extrabold transition-all shadow-[0_5px_20px_rgba(34,211,238,0.4)] hover:scale-105 flex justify-center items-center gap-2 text-[14px] inline-flex">
                         <Phone className="w-4 h-4" /> Call Now
                       </a>
                    </div>
                 </div>
               </div>

               <div className="border-t border-white/5 pt-8">
                  <h3 className="text-[15px] font-bold text-white mb-4">বিকল্প অ্যাম্বুলেন্স (Recommendations)</h3>
                  <div className="flex gap-4 overflow-x-auto custom-scrollbar pb-4 mb-6">
                    {(() => {
                      let recs = ambulanceDB.filter(a => a.id !== selectedAmbulance.id);
                      let areaMatches = recs.filter(a => a.stand === selectedAmbulance.stand);
                      
                      if (areaMatches.length < 3) {
                         let otherHighRated = recs.filter(a => a.stand !== selectedAmbulance.stand && a.rating >= 4.5);
                         areaMatches = [...areaMatches, ...otherHighRated];
                      }
                      
                      return areaMatches.slice(0, 3).map((recAmb, i) => (
                        <div key={i} onClick={() => setSelectedAmbulance(recAmb)} className="bg-[#0A1930] border border-white/10 hover:border-cyan-500/50 p-4 rounded-2xl min-w-[280px] flex flex-col cursor-pointer transition-all hover:-translate-y-1 group shadow-lg">
                           <div className="flex justify-between items-start mb-2">
                             <h4 className="text-[14px] font-bold text-white group-hover:text-cyan-300 leading-tight pr-2">{recAmb.name}</h4>
                             <span className="text-yellow-400 text-[10px] font-bold flex items-center gap-1 bg-white/5 px-1.5 py-0.5 rounded border border-white/10">
                               <Star className="w-3 h-3 fill-yellow-400"/> {recAmb.rating}
                             </span>
                           </div>
                           <p className="text-[11px] text-gray-400 mb-1 flex items-center gap-1.5"><MapPin className="w-3 h-3"/> স্ট্যান্ড: {recAmb.stand}</p>
                           <p className="text-[11px] text-gray-300 mb-4 font-medium flex items-center gap-1.5"><span className="text-cyan-500 font-bold">৳</span> ভাড়া: <span className="text-cyan-400 font-bold">আলোচনা সাপেক্ষে</span></p>

                           <a href={`tel:${recAmb.phone.replace(/[^0-9]/g, '')}`} onClick={(e) => e.stopPropagation()} className="mt-auto w-full bg-blue-600/20 hover:bg-cyan-500 text-cyan-400 hover:text-[#02112A] py-2.5 rounded-lg text-[12px] font-bold transition-all flex justify-center items-center gap-1.5 border border-cyan-500/20 hover:border-transparent inline-flex">
                             <Phone className="w-3.5 h-3.5" /> সরাসরি কল করুন
                           </a>
                        </div>
                      ));
                    })()}
                  </div>

                  <div className="flex justify-between items-center bg-red-500/5 p-4 rounded-xl border border-red-500/10 mt-2">
                     <p className="text-[11px] text-gray-400">ড্রাইভার অতিরিক্ত ভাড়া দাবি করলে বা দুর্ব্যবহার করলে রিপোর্ট করুন।</p>
                     <button onClick={() => { setSelectedAmbulance(null); setIsReportOpen(true); }} className="text-red-400 hover:text-red-300 text-[11px] font-bold flex items-center gap-1 underline underline-offset-2 shrink-0 ml-2">
                       <FileText className="w-3 h-3" /> রিপোর্ট করুন
                     </button>
                  </div>
               </div>
            </div>
          </div>
        </div>
      )}

      {/* ১৬. ডক্টর মাল্টি-স্টেপ রেজিস্ট্রেশন মডাল */}
      {isDocRegOpen && (
        <div className="fixed inset-0 z-50 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-md" onClick={() => {setIsDocRegOpen(false); setDocRegStep(1); setProfilePic(null);}}></div>
          
          <div className="relative w-full max-w-2xl max-h-[95vh] bg-[#06142E] border border-cyan-500/30 rounded-[32px] shadow-[0_0_50px_rgba(34,211,238,0.1)] overflow-y-auto custom-scrollbar flex flex-col z-10 animate-in zoom-in-95 duration-300">
            <div className="absolute top-0 left-1/4 w-1/2 h-1 bg-gradient-to-r from-transparent via-cyan-500 to-transparent blur-[2px]"></div>
            <button onClick={() => {setIsDocRegOpen(false); setDocRegStep(1); setProfilePic(null);}} className="absolute top-4 right-4 w-10 h-10 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>

            <div className="p-6 md:p-10">
               <div className="mb-8 text-center">
                 <h2 className="text-2xl md:text-3xl font-extrabold text-white mb-2 flex items-center justify-center gap-2 tracking-tight">
                   <UserPlus className="w-7 h-7 text-cyan-400" /> ডক্টর রেজিস্ট্রেশন
                 </h2>
                 <p className="text-[13px] text-cyan-100/60">সঠিক তথ্য দিয়ে ৪টি ধাপে আপনার প্রোফাইল তৈরি করুন</p>
               </div>

               <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 ${docRegStep === 1 ? 'w-0' : docRegStep === 2 ? 'w-1/3' : docRegStep === 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 ${docRegStep >= 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>

               <div className="min-h-[340px] bg-white/[0.02] p-5 md:p-6 rounded-2xl border border-white/5">
                 {docRegStep === 1 && (
                   <div className="space-y-5 animate-in slide-in-from-right-4 duration-300">
                     <div className="flex flex-col items-center justify-center mb-2">
                        <label className="w-24 h-24 rounded-full bg-[#02112A] border-2 border-dashed border-cyan-500/50 flex flex-col items-center justify-center text-cyan-500 hover:bg-cyan-500/10 cursor-pointer transition-colors group relative overflow-hidden shadow-lg">
                      <input type="file" accept="image/*" className="hidden" onChange={handleImageUpload} />
                           {profilePic ? (
                             <img src={profilePic} alt="Profile" className="w-full h-full object-cover" />
                           ) : (
                             <>
                               <Camera className="w-7 h-7 mb-1 group-hover:scale-110 transition-transform" />
                               <span className="text-[10px] font-bold tracking-wide">ছবি দিন</span>
                             </>
                           )}
                        </label>
                     </div>
                     <div>
                       <label className="text-[12px] font-bold text-gray-400 ml-1">পূর্ণ নাম (Title সহ) <span className="text-red-400">*</span></label>
                       <input type="text" placeholder="যেমন: ডাঃ আব্দুল্লাহ আল মামুন" 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 focus:bg-[#02112A] outline-none transition-all" />
                     </div>
                     <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
                       <div>
                         <label className="text-[12px] font-bold text-gray-400 ml-1">ইমেইল অ্যাড্রেস <span className="text-red-400">*</span></label>
                         <input type="email" placeholder="example@mail.com" 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 focus:bg-[#02112A] outline-none transition-all" />
                       </div>
                       <div>
                         <label className="text-[12px] font-bold text-gray-400 ml-1">লগইন পাসওয়ার্ড সেট করুন <span className="text-red-400">*</span></label>
                         <input type="password" placeholder="কমপক্ষে ৬ ক্যারেক্টার" 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 focus:bg-[#02112A] outline-none transition-all" />
                       </div>
                     </div>
                   </div>
                 )}

                 {docRegStep === 2 && (
                   <div className="space-y-5 animate-in slide-in-from-right-4 duration-300">
                     <div className="grid grid-cols-2 gap-5">
                       <div>
                         <label className="text-[12px] font-bold text-gray-400 ml-1">BMDC নম্বর <span className="text-red-400">*</span></label>
                         <input type="text" placeholder="যেমন: A-28491" 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 focus:bg-[#02112A] outline-none transition-all" />
                       </div>
                       <div>
                         <label className="text-[12px] font-bold text-gray-400 ml-1">অভিজ্ঞতা (বছর)</label>
                         <input type="number" placeholder="যেমন: 10" 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 focus:bg-[#02112A] outline-none transition-all" />
                       </div>
                     </div>
                     <div className="grid grid-cols-2 gap-5">
                       <div>
                         <label className="text-[12px] font-bold text-gray-400 ml-1">বিভাগ / স্পেশালিটি <span className="text-red-400">*</span></label>
                         <select 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 focus:bg-[#02112A] outline-none transition-all appearance-none cursor-pointer">
                           <option value="">নির্বাচন করুন</option>
                           <option>মেডিসিন</option>
                           <option>কার্ডিওলজি</option>
                           <option>গাইনি ও প্রসূতি</option>
                         </select>
                       </div>
                       <div>
                         <label className="text-[12px] font-bold text-gray-400 ml-1">লিঙ্গ (Gender)</label>
                         <select 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 focus:bg-[#02112A] outline-none transition-all appearance-none cursor-pointer">
                           <option value="">নির্বাচন করুন</option>
                           <option>পুরুষ</option>
                           <option>মহিলা</option>
                         </select>
                       </div>
                     </div>
                     <div>
                       <label className="text-[12px] font-bold text-gray-400 ml-1">যাবতীয় ডিগ্রি</label>
                       <input type="text" placeholder="যেমন: MBBS, FCPS (Medicine), MD" 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 focus:bg-[#02112A] outline-none transition-all" />
                     </div>
                     <div>
                       <label className="text-[12px] font-bold text-gray-400 ml-1">বর্তমান পদবী ও কর্মস্থল</label>
                       <input type="text" placeholder="যেমন: সহকারী অধ্যাপক, রংপুর মেডিকেল" 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 focus:bg-[#02112A] outline-none transition-all" />
                     </div>
                   </div>
                 )}

                 {docRegStep === 3 && (
                   <div className="space-y-5 animate-in slide-in-from-right-4 duration-300">
                     <div>
                       <label className="text-[13px] font-extrabold text-cyan-300 ml-1 flex items-center gap-1.5"><Building2 className="w-4 h-4"/> কোন ক্লিনিক/হাসপাতালে বসেন? <span className="text-red-400">*</span></label>
                       <select className="w-full mt-2 bg-blue-900/20 border border-cyan-500/30 rounded-xl px-4 py-3 text-cyan-100 focus:border-cyan-400 outline-none transition-all appearance-none font-bold cursor-pointer">
                         <option value="">হাসপাতাল/ক্লিনিক খুঁজুন...</option>
                         <option>পপুলার ডায়াগনস্টিক সেন্টার</option>
                         <option>ল্যাবএইড লিমিটেড</option>
                         <option>প্রাইম মেডিকেল কলেজ</option>
                       </select>
                     </div>
                     <div>
                       <label className="text-[12px] font-bold text-gray-400 ml-1">চেম্বার / রুম নাম্বার</label>
                       <input type="text" placeholder="যেমন: রুম নং- ৩০৫ (৩য় তলা)" 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 focus:bg-[#02112A] outline-none transition-all" />
                     </div>
                     
                     <div className="bg-cyan-900/10 p-4 rounded-xl border border-cyan-500/20">
                       <label className="text-[12px] font-bold text-gray-400 ml-1 mb-2 block">গুগল ম্যাপ লোকেশন <span className="text-cyan-400 text-[10px]">(রোগীদের ডিরেকশনের জন্য)</span></label>
                       <div className="relative">
                         <input 
                           type="text" 
                           value={locationText} 
                           onChange={(e) => setLocationText(e.target.value)} 
                           placeholder="ম্যানুয়ালি লিখুন অথবা বাটনে ক্লিক করুন..." 
                           className="w-full bg-[#02112A] border border-cyan-500/30 rounded-xl pl-4 pr-32 py-3.5 text-white text-[13px] focus:border-cyan-400 outline-none transition-all shadow-inner" 
                         />
                         <button 
                           onClick={handleLiveLocation} 
                           disabled={isLocating}
                           className="absolute right-2 top-2 bg-gradient-to-r from-blue-600 to-cyan-500 hover:from-blue-500 hover:to-cyan-400 text-[#02112A] px-3.5 py-2 rounded-lg flex items-center gap-1.5 text-[11px] font-extrabold transition-all shadow-lg disabled:opacity-70"
                         >
                           {isLocating ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <MapPin className="w-3.5 h-3.5" />}
                           {isLocating ? 'খুঁজছে...' : 'লাইভ লোকেশন'}
                         </button>
                       </div>
                     </div>
                   </div>
                 )}

                 {docRegStep === 4 && (
                   <div className="space-y-6 animate-in slide-in-from-right-4 duration-300">
                     <div>
                       <label className="text-[13px] font-extrabold text-cyan-300 ml-1 mb-3 flex items-center gap-1.5"><CalendarDays className="w-4 h-4"/> কোন কোন বার রোগী দেখেন?</label>
                       <div className="flex flex-wrap gap-2.5">
                         {['শনি', 'রবি', 'সোম', 'মঙ্গল', 'বুধ', 'বৃহঃ', 'শুক্র'].map((day) => (
                           <label key={day} className="flex items-center gap-2 bg-[#02112A] border border-white/10 px-4 py-2.5 rounded-xl cursor-pointer hover:border-cyan-500/50 hover:bg-cyan-500/5 transition-all">
                             <input type="checkbox" className="w-4 h-4 accent-cyan-500 rounded cursor-pointer" /> 
                             <span className="text-[13px] text-gray-300 font-bold">{day}</span>
                           </label>
                         ))}
                       </div>
                     </div>
                     
                     <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
                       <div>
                         <label className="text-[12px] font-bold text-gray-400 ml-1 flex items-center gap-1"><Clock className="w-3.5 h-3.5"/> কখন রোগী দেখেন? (সময়)</label>
                         <input type="text" placeholder="যেমন: বিকেল ৪টা - রাত ৮টা" 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 focus:bg-[#02112A] outline-none transition-all" />
                       </div>
                       <div>
                         <label className="text-[12px] font-bold text-gray-400 ml-1">পরামর্শ ফি (টাকায়) <span className="text-red-400">*</span></label>
                         <input type="number" placeholder="যেমন: 800" 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 focus:bg-[#02112A] outline-none transition-all" />
                       </div>
                     </div>

                     <div>
                       <label className="text-[13px] font-extrabold text-white ml-1 flex items-center gap-1.5"><Phone className="w-4 h-4 text-green-400"/> সিরিয়াল নেওয়ার মোবাইল নাম্বার <span className="text-red-400">*</span></label>
                       <input type="text" placeholder="017XX-XXXXXX" className="w-full mt-2 bg-green-500/10 border border-green-500/30 rounded-xl px-4 py-3.5 text-green-100 font-bold focus:border-green-400 focus:bg-green-500/20 outline-none transition-all shadow-inner" />
                     </div>
                   </div>
                 )}
               </div>

               <div className="flex justify-between items-center mt-8 pt-6 border-t border-white/5">
                 {docRegStep > 1 ? (
                   <button onClick={() => setDocRegStep(docRegStep - 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] flex items-center gap-2">
                     পেছনে যান
                   </button>
                 ) : <div></div>}

                 {docRegStep < 4 ? (
                   <button onClick={() => setDocRegStep(docRegStep + 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)] hover:shadow-[0_0_25px_rgba(34,211,238,0.5)] flex items-center gap-2 text-[13px]">
                     পরবর্তী ধাপ <ChevronRight className="w-4 h-4" />
                   </button>
                 ) : (
                   <button onClick={() => {
                     setIsSubmitting(true);
                     setTimeout(() => {
                       setIsSubmitting(false);
                       setIsDocRegOpen(false);
                       setDocRegStep(1);
                       setProfilePic(null);
                       setLocationText('');
                       showAlert("প্রোফাইল তৈরি সম্পন্ন!", "আলহামদুলিল্লাহ! আপনার প্রোফাইল সফলভাবে তৈরি হয়েছে। অ্যাডমিন আপনার তথ্য ভেরিফাই করার পর আপনার লাইভ লোকেশন ও শিডিউল সহ প্রোফাইলটি ওয়েবসাইটে শো করবে।", "success");
                     }, 1500);
                   }} 
                   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)] hover:scale-105 hover:shadow-[0_10px_30px_rgba(34,211,238,0.5)] flex items-center gap-2 text-[13px] disabled:opacity-70 disabled:hover:scale-100 disabled:cursor-not-allowed">
                     {isSubmitting ? <><Loader2 className="w-4 h-4 animate-spin"/> সাবমিট হচ্ছে...</> : 'সম্পন্ন করুন ও সাবমিট দিন'}
                   </button>
                 )}
               </div>
            </div>
          </div>
        </div>
      )}

      {/* ১৭. হাসপাতাল ও ক্লিনিক রেজিস্ট্রেশন মডাল */}
      {isHospRegOpen && (
        <div className="fixed inset-0 z-50 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-md" onClick={() => {setIsHospRegOpen(false); setHospRegStep(1); setHospLogo(null);}}></div>
          
          <div className="relative w-full max-w-2xl max-h-[95vh] bg-[#06142E] border border-cyan-500/30 rounded-[32px] shadow-[0_0_50px_rgba(34,211,238,0.1)] overflow-y-auto custom-scrollbar flex flex-col z-10 animate-in zoom-in-95 duration-300">
            <div className="absolute top-0 left-1/4 w-1/2 h-1 bg-gradient-to-r from-transparent via-cyan-500 to-transparent blur-[2px]"></div>
            <button onClick={() => {setIsHospRegOpen(false); setHospRegStep(1); setHospLogo(null);}} className="absolute top-4 right-4 w-10 h-10 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>

            <div className="p-6 md:p-10">
               <div className="mb-8 text-center">
                 <h2 className="text-2xl md:text-3xl font-extrabold text-white mb-2 flex items-center justify-center gap-2 tracking-tight">
                   <Building2 className="w-7 h-7 text-cyan-400" /> হাসপাতাল রেজিস্ট্রেশন
                 </h2>
                 <p className="text-[13px] text-cyan-100/60">DGHS কোড ও সঠিক তথ্য দিয়ে আপনার প্রতিষ্ঠান যুক্ত করুন</p>
               </div>

               <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 ${hospRegStep === 1 ? 'w-0' : hospRegStep === 2 ? 'w-1/3' : hospRegStep === 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 ${hospRegStep >= 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>

               <div className="min-h-[350px] bg-white/[0.02] p-5 md:p-6 rounded-2xl border border-white/5">
                 {hospRegStep === 1 && (
                   <div className="space-y-5 animate-in slide-in-from-right-4 duration-300">
                     <div className="flex flex-col items-center justify-center mb-6">
                        <label className="w-28 h-28 rounded-2xl bg-[#02112A] border-2 border-dashed border-cyan-500/50 flex flex-col items-center justify-center text-cyan-500 hover:bg-cyan-500/10 cursor-pointer transition-colors group relative overflow-hidden shadow-lg">
                           <input type="file" accept="image/*" className="hidden" onChange={handleHospLogoUpload} />
                           {hospLogo ? (
                             <img src={hospLogo} alt="Hospital Logo" className="absolute inset-0 w-full h-full object-contain p-2 z-10 bg-[#02112A]" />
                           ) : (
                             <>
                               <Camera className="w-8 h-8 mb-1 group-hover:scale-110 transition-transform" />
                               <span className="text-[11px] font-bold tracking-wide">লোগো দিন</span>
                             </>
                           )}
                        </label>
                        <p className="text-[10px] text-gray-500 mt-2">প্রতিষ্ঠানের অফিশিয়াল লোগো আপলোড করুন</p>
                     </div>

                     <div>
                       <label className="text-[12px] font-bold text-gray-400 ml-1">হাসপাতাল বা ক্লিনিকের পূর্ণ নাম <span className="text-red-400">*</span></label>
                       <input type="text" placeholder="যেমন: প্রাইম মেডিকেল কলেজ হাসপাতাল" className="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" />
                     </div>
                     <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
                       <div>
                         <label className="text-[12px] font-bold text-gray-400 ml-1 flex items-center gap-1"><ShieldCheck className="w-3.5 h-3.5 text-cyan-400"/> DGHS রেজিস্ট্রেশন কোড <span className="text-red-400">*</span></label>
                         <input type="text" placeholder="যেমন: HSM26489" className="w-full mt-1.5 bg-[#02112A]/50 border border-cyan-500/30 rounded-xl px-4 py-3.5 text-cyan-100 font-bold focus:border-cyan-400 focus:bg-[#02112A] outline-none transition-all shadow-inner" />
                       </div>
                       <div>
                         <label className="text-[12px] font-bold text-gray-400 ml-1">প্রতিষ্ঠানের ধরন</label>
                         <select className="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 appearance-none cursor-pointer">
                           <option value="">নির্বাচন করুন</option>
                           <option>প্রাইভেট হাসপাতাল</option>
                           <option>ক্লিনিক ও নার্সিং হোম</option>
                           <option>স্পেশালাইজড সেন্টার</option>
                         </select>
                       </div>
                     </div>
                   </div>
                 )}

                 {hospRegStep === 2 && (
                   <div className="space-y-5 animate-in slide-in-from-right-4 duration-300">
                     <div>
                       <label className="text-[12px] font-bold text-gray-400 ml-1">পূর্ণাঙ্গ ঠিকানা (এলাকা সহ) <span className="text-red-400">*</span></label>
                       <input type="text" placeholder="যেমন: ধাপ, মেডিকেল মোড়, রংপুর" className="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" />
                     </div>
                     
                     <div className="bg-cyan-900/10 p-4 rounded-xl border border-cyan-500/20">
                       <label className="text-[12px] font-bold text-gray-400 ml-1 mb-2 block">লাইভ জিপিএস লোকেশন <span className="text-cyan-400 text-[10px]">(রোগীদের ম্যাপের জন্য)</span></label>
                       <div className="relative">
                         <input 
                           type="text" 
                           value={hospLocationText} 
                           onChange={(e) => setHospLocationText(e.target.value)} 
                           placeholder="বাটনে ক্লিক করুন..." 
                           className="w-full bg-[#02112A] border border-cyan-500/30 rounded-xl pl-4 pr-32 py-3.5 text-white text-[13px] focus:border-cyan-400 outline-none transition-all shadow-inner" 
                         />
                         <button 
                           onClick={handleHospLiveLocation} 
                           disabled={isHospLocating}
                           className="absolute right-2 top-2 bg-gradient-to-r from-blue-600 to-cyan-500 hover:from-blue-500 hover:to-cyan-400 text-[#02112A] px-3.5 py-2 rounded-lg flex items-center gap-1.5 text-[11px] font-extrabold transition-all shadow-lg disabled:opacity-70"
                         >
                           {isHospLocating ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <MapPin className="w-3.5 h-3.5" />}
                           {isHospLocating ? 'খুঁজছে...' : 'লাইভ লোকেশন'}
                         </button>
                       </div>
                     </div>

                     <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
                       <div>
                         <label className="text-[12px] font-bold text-gray-400 ml-1 flex items-center gap-1.5"><Phone className="w-3.5 h-3.5 text-red-400"/> ইমার্জেন্সি হটলাইন (24/7) <span className="text-red-400">*</span></label>
                         <input type="text" placeholder="017XX-XXXXXX" className="w-full mt-1.5 bg-red-500/5 border border-red-500/20 rounded-xl px-4 py-3.5 text-red-100 font-bold focus:border-red-400 focus:bg-red-500/10 outline-none transition-all" />
                       </div>
                       <div>
                         <label className="text-[12px] font-bold text-gray-400 ml-1">নিজস্ব অ্যাম্বুলেন্স ক্যাটাগীর</label>
                         <select className="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 appearance-none cursor-pointer">
                           <option value="">অ্যাম্বুলেন্স নেই</option>
                           <option>আইসিইউ (ICU) অ্যাম্বুলেন্স</option>
                           <option>এসি / নন-এসি অ্যাম্বুলেন্স</option>
                           <option>ফ্রিজিং অ্যাম্বুলেন্স</option>
                         </select>
                       </div>
                     </div>
                   </div>
                 )}

                 {hospRegStep === 3 && (
                   <div className="space-y-6 animate-in slide-in-from-right-4 duration-300">
                     <div>
                        <label className="text-[13px] font-extrabold text-cyan-300 ml-1 mb-3 flex items-center gap-1.5"><Clock className="w-4 h-4"/> ২৪ ঘণ্টা (24/7) কোন সার্ভিসগুলো খোলা থাকে?</label>
                        <div className="flex flex-wrap gap-3">
                          {['২৪/৭ ইমার্জেন্সি', '২৪/৭ ফার্মেসি', '২৪/৭ ব্লাড ব্যাংক', '২৪/৭ অ্যাম্বুলেন্স'].map((service) => (
                            <label key={service} className="flex items-center gap-2 bg-[#02112A] border border-cyan-500/30 px-3.5 py-2.5 rounded-xl cursor-pointer hover:bg-cyan-500/10 transition-all shadow-inner">
                              <input type="checkbox" className="w-4 h-4 accent-cyan-500 rounded cursor-pointer" /> 
                              <span className="text-[12px] text-cyan-100 font-bold">{service}</span>
                            </label>
                          ))}
                        </div>
                     </div>
                     <div>
                       <label className="text-[12px] font-bold text-gray-400 ml-1 flex items-center gap-1.5"><Tag className="w-3.5 h-3.5 text-cyan-400"/> এআই (AI) সার্চ ট্যাগ (কমা দিয়ে লিখুন)</label>
                       <input type="text" placeholder="যেমন: ট্রমা, পয়জনিং, হার্ট অ্যাটাক, ডেঙ্গু" className="w-full mt-1.5 bg-[#02112A]/50 border border-white/10 rounded-xl px-4 py-3 text-white text-[13px] focus:border-cyan-500 focus:bg-[#02112A] outline-none transition-all" />
                       <p className="text-[10px] text-gray-500 mt-1.5 ml-1">রোগীরা এই শব্দগুলো লিখে সার্চ করলে AI আপনার হাসপাতাল আগে দেখাবে।</p>
                     </div>
                     <div>
                        <label className="text-[12px] font-bold text-gray-400 ml-1 mb-2 block flex items-center gap-1.5"><HeartPulse className="w-3.5 h-3.5 text-red-400"/> লাইফ-সেভিং স্পেশাল ইউনিট</label>
                        <div className="grid grid-cols-2 sm:grid-cols-3 gap-2.5">
                          {['আইসিইউ (ICU)', 'সিসিইউ (CCU)', 'এনআইসিইউ (NICU)', 'বার্ন ইউনিট', 'ট্রমা সেন্টার', 'ডায়ালাইসিস'].map((unit) => (
                            <label key={unit} className="flex items-center gap-2 bg-[#02112A]/80 border border-white/10 px-3 py-2 rounded-lg cursor-pointer hover:border-white/30 transition-all">
                              <input type="checkbox" className="w-3.5 h-3.5 accent-cyan-500 rounded cursor-pointer" /> 
                              <span className="text-[12px] text-gray-300 font-bold">{unit}</span>
                            </label>
                          ))}
                        </div>
                     </div>
                     <div>
                       <label className="text-[12px] font-bold text-gray-400 ml-1">বর্তমান কোনো অফার বা স্পেশাল নোট (ঐচ্ছিক)</label>
                       <input type="text" placeholder="যেমন: সকল প্যাথলজি টেস্টে ২০% ছাড়" 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 focus:bg-[#02112A] outline-none transition-all" />
                     </div>
                   </div>
                 )}

                 {hospRegStep === 4 && (
                   <div className="space-y-5 animate-in slide-in-from-right-4 duration-300">
                     <div className="bg-blue-900/20 p-4 rounded-xl border border-blue-500/20 mb-2">
                       <p className="text-[11px] text-blue-300 font-medium leading-relaxed">
                         <b className="text-cyan-400">ড্যাশবোর্ড অ্যাক্সেস:</b> এই তথ্যগুলো দিয়ে লগইন করে আপনি হাসপাতালের প্রোফাইল এবং ডাক্তারদের লিস্ট আপডেট করতে পারবেন।
                       </p>
                     </div>
                     <div>
                       <label className="text-[12px] font-bold text-gray-400 ml-1">দায়িত্বপ্রাপ্ত অ্যাডমিনের নাম <span className="text-red-400">*</span></label>
                       <input type="text" placeholder="অ্যাডমিন বা ম্যানেজারের নাম" className="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" />
                     </div>
                     <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
                       <div>
                         <label className="text-[12px] font-bold text-gray-400 ml-1">অ্যাডমিন ফোন (লগইন আইডি) <span className="text-red-400">*</span></label>
                         <input type="text" placeholder="01XXX-XXXXXX" className="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" />
                       </div>
                       <div>
                         <label className="text-[12px] font-bold text-gray-400 ml-1">লগইন পাসওয়ার্ড সেট করুন <span className="text-red-400">*</span></label>
                         <input type="password" placeholder="কমপক্ষে ৬ ক্যারেক্টার" className="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" />
                       </div>
                     </div>
                     <div className="mt-6 bg-gradient-to-r from-yellow-500/10 to-transparent border border-yellow-500/30 p-4 rounded-xl">
                        <label className="flex items-start gap-3 cursor-pointer">
                          <input type="checkbox" className="w-5 h-5 mt-0.5 accent-yellow-500 rounded cursor-pointer" /> 
                          <div>
                            <span className="text-[13px] text-yellow-400 font-extrabold flex items-center gap-1.5"><Star className="w-3.5 h-3.5 fill-yellow-400"/> প্রিমিয়াম স্পন্সরশিপ রিকোয়েস্ট</span>
                            <p className="text-[10px] text-yellow-100/60 mt-1">হ্যাঁ, আমি আমার হাসপাতালকে হোমপেজের "সেরা ১০" লিস্টে হাইলাইট (Sponsor) করতে চাই। অ্যাডমিন যেন আমার সাথে যোগাযোগ করেন।</p>
                          </div>
                        </label>
                     </div>
                   </div>
                 )}
               </div>

               <div className="flex justify-between items-center mt-8 pt-6 border-t border-white/5">
                 {hospRegStep > 1 ? (
                   <button onClick={() => setHospRegStep(hospRegStep - 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] flex items-center gap-2">
                     পেছনে যান
                   </button>
                 ) : <div></div>}

                 {hospRegStep < 4 ? (
                   <button onClick={() => setHospRegStep(hospRegStep + 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)] hover:shadow-[0_0_25px_rgba(34,211,238,0.5)] flex items-center gap-2 text-[13px]">
                     পরবর্তী ধাপ <ChevronRight className="w-4 h-4" />
                   </button>
                 ) : (
                   <button onClick={() => {
                     setIsHospSubmitting(true);
                     setTimeout(() => {
                       setIsHospSubmitting(false);
                       setIsHospRegOpen(false);
                       setHospRegStep(1);
                       setHospLogo(null);
                       setHospLocationText('');
                       showAlert("হাসপাতাল রেজিস্ট্রেশন সফল!", "আলহামদুলিল্লাহ! আপনার হাসপাতালের রেজিস্ট্রেশন রিকোয়েস্ট জমা হয়েছে। অ্যাডমিন আপনার DGHS কোড ভেরিফাই করার পর আপনার প্রোফাইলটি ওয়েবসাইটে লাইভ হবে এবং আপনি ড্যাশবোর্ডে লগইন করতে পারবেন।", "success");
                     }, 1500);
                   }} 
                   disabled={isHospSubmitting}
                   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)] hover:scale-105 hover:shadow-[0_10px_30px_rgba(34,211,238,0.5)] flex items-center gap-2 text-[13px] disabled:opacity-70 disabled:hover:scale-100 disabled:cursor-not-allowed">
                     {isHospSubmitting ? <><Loader2 className="w-4 h-4 animate-spin"/> সাবমিট হচ্ছে...</> : 'সম্পন্ন করুন ও সাবমিট দিন'}
                   </button>
                 )}
               </div>
            </div>
          </div>
        </div>
      )}

      {/* ১৮. ডায়াগনস্টিক সেন্টার রেজিস্ট্রেশন মডাল */}
      {isDiagRegOpen && (
        <div className="fixed inset-0 z-50 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-md" onClick={() => {setIsDiagRegOpen(false); setDiagRegStep(1); setDiagLogo(null);}}></div>
          
          <div className="relative w-full max-w-2xl max-h-[95vh] bg-[#06142E] border border-cyan-500/30 rounded-[32px] shadow-[0_0_50px_rgba(34,211,238,0.1)] overflow-y-auto custom-scrollbar flex flex-col z-10 animate-in zoom-in-95 duration-300">
            <div className="absolute top-0 left-1/4 w-1/2 h-1 bg-gradient-to-r from-transparent via-cyan-500 to-transparent blur-[2px]"></div>
            <button onClick={() => {setIsDiagRegOpen(false); setDiagRegStep(1); setDiagLogo(null);}} className="absolute top-4 right-4 w-10 h-10 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>

            <div className="p-6 md:p-10">
               <div className="mb-8 text-center">
                 <h2 className="text-2xl md:text-3xl font-extrabold text-white mb-2 flex items-center justify-center gap-2 tracking-tight">
                   <Activity className="w-7 h-7 text-cyan-400" /> ডায়াগনস্টিক রেজিস্ট্রেশন
                 </h2>
                 <p className="text-[13px] text-cyan-100/60">DGHS কোড ও টেস্টের তথ্য দিয়ে আপনার সেন্টারটি যুক্ত করুন</p>
               </div>

               <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 ${diagRegStep === 1 ? 'w-0' : diagRegStep === 2 ? 'w-1/3' : diagRegStep === 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 ${diagRegStep >= 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>

               <div className="min-h-[350px] bg-white/[0.02] p-5 md:p-6 rounded-2xl border border-white/5">
                 {diagRegStep === 1 && (
                   <div className="space-y-5 animate-in slide-in-from-right-4 duration-300">
                     <div className="flex flex-col items-center justify-center mb-6">
                        <label className="w-28 h-28 rounded-2xl bg-[#02112A] border-2 border-dashed border-cyan-500/50 flex flex-col items-center justify-center text-cyan-500 hover:bg-cyan-500/10 cursor-pointer transition-colors group relative overflow-hidden shadow-lg">
                           <input type="file" accept="image/*" className="hidden" onChange={handleDiagLogoUpload} />
                           {diagLogo ? (
                             <img src={diagLogo} alt="Diagnostic Logo" className="absolute inset-0 w-full h-full object-contain p-2 z-10 bg-[#02112A]" />
                           ) : (
                             <>
                               <Camera className="w-8 h-8 mb-1 group-hover:scale-110 transition-transform" />
                               <span className="text-[11px] font-bold tracking-wide">লোগো দিন</span>
                             </>
                           )}
                        </label>
                        <p className="text-[10px] text-gray-500 mt-2">সেন্টারের অফিশিয়াল লোগো আপলোড করুন</p>
                     </div>
                     <div>
                       <label className="text-[12px] font-bold text-gray-400 ml-1">ডায়াগনস্টিক সেন্টারের পূর্ণ নাম <span className="text-red-400">*</span></label>
                       <input type="text" placeholder="যেমন: পপুলার ডায়াগনস্টিক সেন্টার" className="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" />
                     </div>
                     <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
                       <div>
                         <label className="text-[12px] font-bold text-gray-400 ml-1 flex items-center gap-1"><ShieldCheck className="w-3.5 h-3.5 text-cyan-400"/> DGHS রেজিস্ট্রেশন কোড <span className="text-red-400">*</span></label>
                         <input type="text" placeholder="যেমন: HSM26489" className="w-full mt-1.5 bg-[#02112A]/50 border border-cyan-500/30 rounded-xl px-4 py-3.5 text-cyan-100 font-bold focus:border-cyan-400 focus:bg-[#02112A] outline-none transition-all shadow-inner" />
                       </div>
                       <div>
                         <label className="text-[12px] font-bold text-gray-400 ml-1">সেন্টারের প্রধান ধরণ</label>
                         <select className="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 appearance-none cursor-pointer">
                           <option value="">নির্বাচন করুন</option>
                           <option>প্যাথলজি ল্যাব</option>
                           <option>ইমেজিং সেন্টার (X-Ray, MRI)</option>
                           <option>প্যাথলজি ও ইমেজিং (উভয়)</option>
                         </select>
                       </div>
                     </div>
                   </div>
                 )}

                 {diagRegStep === 2 && (
                   <div className="space-y-5 animate-in slide-in-from-right-4 duration-300">
                     <div>
                       <label className="text-[12px] font-bold text-gray-400 ml-1">পূর্ণাঙ্গ ঠিকানা (এলাকা সহ) <span className="text-red-400">*</span></label>
                       <input type="text" placeholder="যেমন: ধাপ, মেডিকেল মোড়, রংপুর" className="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" />
                     </div>
                     <div className="bg-cyan-900/10 p-4 rounded-xl border border-cyan-500/20">
                       <label className="text-[12px] font-bold text-gray-400 ml-1 mb-2 block">লাইভ জিপিএস লোকেশন <span className="text-cyan-400 text-[10px]">(রোগীদের ম্যাপের জন্য)</span></label>
                       <div className="relative">
                         <input 
                           type="text" 
                           value={diagLocationText} 
                           onChange={(e) => setDiagLocationText(e.target.value)} 
                           placeholder="বাটনে ক্লিক করুন..." 
                           className="w-full bg-[#02112A] border border-cyan-500/30 rounded-xl pl-4 pr-32 py-3.5 text-white text-[13px] focus:border-cyan-400 outline-none transition-all shadow-inner" 
                         />
                         <button 
                           onClick={handleDiagLiveLocation} 
                           disabled={isDiagLocating}
                           className="absolute right-2 top-2 bg-gradient-to-r from-blue-600 to-cyan-500 hover:from-blue-500 hover:to-cyan-400 text-[#02112A] px-3.5 py-2 rounded-lg flex items-center gap-1.5 text-[11px] font-extrabold transition-all shadow-lg disabled:opacity-70"
                         >
                           {isDiagLocating ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <MapPin className="w-3.5 h-3.5" />}
                           {isDiagLocating ? 'খুঁজছে...' : 'লাইভ লোকেশন'}
                         </button>
                       </div>
                     </div>
                     <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
                       <div>
                         <label className="text-[12px] font-bold text-gray-400 ml-1 flex items-center gap-1.5"><Phone className="w-3.5 h-3.5 text-cyan-400"/> রিসেপশন হটলাইন <span className="text-red-400">*</span></label>
                         <input type="text" placeholder="017XX-XXXXXX" className="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" />
                       </div>
                       <div>
                         <label className="text-[12px] font-bold text-gray-400 ml-1 text-green-400">হোম স্যাম্পল কালেকশন সুবিধা</label>
                         <select className="w-full mt-1.5 bg-green-500/5 border border-green-500/20 rounded-xl px-4 py-3.5 text-green-100 font-bold focus:border-green-400 focus:bg-green-500/10 outline-none transition-all appearance-none cursor-pointer">
                           <option value="">সুবিধা নেই</option>
                           <option>বাসা থেকে ব্লাড কালেকশন করা হয়</option>
                         </select>
                       </div>
                     </div>
                   </div>
                 )}

                 {diagRegStep === 3 && (
                   <div className="space-y-6 animate-in slide-in-from-right-4 duration-300">
                     <div>
                        <label className="text-[13px] font-extrabold text-cyan-300 ml-1 mb-3 flex items-center gap-1.5"><FileText className="w-4 h-4"/> আপনাদের সেন্টারে কী কী টেস্টের সুবিধা রয়েছে?</label>
                        <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
                          {['প্যাথলজি (Blood/Urine)', 'ডিজিটাল এক্স-রে', 'আল্ট্রাসনোগ্রাম (USG)', 'ইসিজি (ECG)', 'এমআরআই (MRI)', 'সিটি স্ক্যান (CT Scan)', 'ইকোকার্ডিওগ্রাম', 'এন্ডোস্কোপি'].map((test) => (
                            <label key={test} className="flex items-center gap-2 bg-[#02112A]/80 border border-white/10 px-3.5 py-2.5 rounded-xl cursor-pointer hover:border-cyan-500/50 hover:bg-cyan-500/5 transition-all shadow-inner">
                              <input type="checkbox" className="w-4 h-4 accent-cyan-500 rounded cursor-pointer" /> 
                              <span className="text-[12px] text-gray-300 font-bold">{test}</span>
                            </label>
                          ))}
                        </div>
                     </div>
                     <div>
                       <label className="text-[12px] font-bold text-gray-400 ml-1 flex items-center gap-1.5"><Tag className="w-3.5 h-3.5 text-cyan-400"/> এআই (AI) সার্চ ট্যাগ (কমা দিয়ে লিখুন)</label>
                       <input type="text" placeholder="যেমন: ব্লাড টেস্ট, ৪ডি আল্ট্রাসনোগ্রাম, এমআরআই, হরমোন টেস্ট" className="w-full mt-1.5 bg-[#02112A]/50 border border-white/10 rounded-xl px-4 py-3 text-white text-[13px] focus:border-cyan-500 focus:bg-[#02112A] outline-none transition-all" />
                       <p className="text-[10px] text-gray-500 mt-1.5 ml-1">রোগীরা এই টেস্টগুলোর নাম লিখে সার্চ করলে AI আপনার সেন্টার আগে দেখাবে।</p>
                     </div>
                     <div>
                       <label className="text-[12px] font-bold text-gray-400 ml-1">বর্তমান কোনো অফার বা স্পেশাল নোট (ঐচ্ছিক)</label>
                       <input type="text" placeholder="যেমন: রমজান মাস উপলক্ষে সকল প্যাথলজি টেস্টে ২৫% ছাড়" 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 focus:bg-[#02112A] outline-none transition-all" />
                     </div>
                   </div>
                 )}

                 {diagRegStep === 4 && (
                   <div className="space-y-5 animate-in slide-in-from-right-4 duration-300">
                     <div className="bg-blue-900/20 p-4 rounded-xl border border-blue-500/20 mb-2">
                       <p className="text-[11px] text-blue-300 font-medium leading-relaxed">
                         <b className="text-cyan-400">ড্যাশবোর্ড অ্যাক্সেস:</b> এই তথ্যগুলো দিয়ে লগইন করে আপনি ডায়াগনস্টিক সেন্টারের প্রোফাইল, অফার এবং টেস্টের লিস্ট আপডেট করতে পারবেন।
                       </p>
                     </div>
                     <div>
                       <label className="text-[12px] font-bold text-gray-400 ml-1">দায়িত্বপ্রাপ্ত অ্যাডমিনের নাম <span className="text-red-400">*</span></label>
                       <input type="text" placeholder="অ্যাডমিন বা ম্যানেজারের নাম" className="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" />
                     </div>
                     <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
                       <div>
                         <label className="text-[12px] font-bold text-gray-400 ml-1">অ্যাডমিন ফোন (লগইন আইডি) <span className="text-red-400">*</span></label>
                         <input type="text" placeholder="01XXX-XXXXXX" className="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" />
                       </div>
                       <div>
                         <label className="text-[12px] font-bold text-gray-400 ml-1">লগইন পাসওয়ার্ড সেট করুন <span className="text-red-400">*</span></label>
                         <input type="password" placeholder="কমপক্ষে ৬ ক্যারেক্টার" className="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" />
                       </div>
                     </div>
                     <div className="mt-6 bg-gradient-to-r from-yellow-500/10 to-transparent border border-yellow-500/30 p-4 rounded-xl">
                        <label className="flex items-start gap-3 cursor-pointer">
                          <input type="checkbox" className="w-5 h-5 mt-0.5 accent-yellow-500 rounded cursor-pointer" /> 
                          <div>
                            <span className="text-[13px] text-yellow-400 font-extrabold flex items-center gap-1.5"><Star className="w-3.5 h-3.5 fill-yellow-400"/> প্রিমিয়াম স্পন্সরশিপ রিকোয়েস্ট</span>
                            <p className="text-[10px] text-yellow-100/60 mt-1">হ্যাঁ, আমি আমার ডায়াগনস্টিক সেন্টারকে হোমপেজের "সেরা ১০" লিস্টে হাইলাইট করতে চাই। অ্যাডমিন যেন যোগাযোগ করেন।</p>
                          </div>
                        </label>
                     </div>
                   </div>
                 )}
               </div>

               <div className="flex justify-between items-center mt-8 pt-6 border-t border-white/5">
                 {diagRegStep > 1 ? (
                   <button onClick={() => setDiagRegStep(diagRegStep - 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] flex items-center gap-2">
                     পেছনে যান
                   </button>
                 ) : <div></div>}

                 {diagRegStep < 4 ? (
                   <button onClick={() => setDiagRegStep(diagRegStep + 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)] hover:shadow-[0_0_25px_rgba(34,211,238,0.5)] flex items-center gap-2 text-[13px]">
                     পরবর্তী ধাপ <ChevronRight className="w-4 h-4" />
                   </button>
                 ) : (
                   <button onClick={() => {
                     setIsDiagSubmitting(true);
                     setTimeout(() => {
                       setIsDiagSubmitting(false);
                       setIsDiagRegOpen(false);
                       setDiagRegStep(1);
                       setDiagLogo(null);
                       setDiagLocationText('');
                       showAlert("ডায়াগনস্টিক রেজিস্ট্রেশন সফল!", "আলহামদুলিল্লাহ! আপনার ডায়াগনস্টিক সেন্টারের রেজিস্ট্রেশন রিকোয়েস্ট জমা হয়েছে। অ্যাডমিন আপনার DGHS কোড ভেরিফাই করার পর আপনার প্রোফাইলটি ওয়েবসাইটে লাইভ হবে এবং আপনি ড্যাশবোর্ডে লগইন করতে পারবেন।", "success");
                     }, 1500);
                   }} 
                   disabled={isDiagSubmitting}
                   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)] hover:scale-105 hover:shadow-[0_10px_30px_rgba(34,211,238,0.5)] flex items-center gap-2 text-[13px] disabled:opacity-70 disabled:hover:scale-100 disabled:cursor-not-allowed">
                     {isDiagSubmitting ? <><Loader2 className="w-4 h-4 animate-spin"/> সাবমিট হচ্ছে...</> : 'সম্পন্ন করুন ও সাবমিট দিন'}
                   </button>
                 )}
               </div>
            </div>
          </div>
        </div>
      )}

    </main>
  );
}