'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 } 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)
  // =====================================================================

  // =====================================================================
  // ২২. ব্লাড ব্যাংক সেকশন এবং প্রোফাইল মডালের স্টেট ও সম্পূর্ণ ডাটাবেস [১৫, ১৯, ২৬১]
  // =====================================================================
  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: '০১৭XX-XXXXXX', type: 'Blood Bank', available: ['A+', 'B+', 'O+', 'AB+'] },
    { id: 2, name: 'Bandhan Blood Bank & Transfusion Center', location: 'Tetulia Road, Panchagarh', phone: '০১৭XX-XXXXXX', type: 'Blood Bank', available: ['A+', 'O+', 'B-'] },
    { id: 3, name: 'BANDHAN BLOOD BANK O SANCHALAN KENDRO', location: 'Holding No. 1531-00; Hazipara, Thakurgaon', phone: '০১৭XX-XXXXXX', type: 'Blood Bank', available: ['B+', 'O-', 'AB-'] },
    { id: 4, name: 'Blood Transfusion Dept, Prime Medical College', location: 'Pirjabad, Badargonj Road, Rangpur', phone: '০১৭XX-XXXXXX', type: 'Blood Bank', available: ['A-', 'O+', 'B+'] },
    { id: 5, name: 'Dinajpur Blood Bank and Transfusion center', location: 'Nimnogor, Balibari, Sadar, Dinajpur', phone: '০১৭XX-XXXXXX', 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: '০১৭XX-XXXXXX', type: 'Blood Bank', available: ['A+', 'B+', 'O+', 'AB+'] },
    { id: 7, name: 'Jagoron Blood Bank And Transfusion Center', location: 'এইচএম স্কয়ার মার্কেট, বীরগঞ্জ, দিনাজপুর', phone: '০১৭XX-XXXXXX', type: 'Blood Bank', available: ['A-', 'B-', 'O-'] },
    { id: 8, name: 'Kasir Uddin Memorial Medical College & Hospital', location: 'Dhap Engineer Para, Rangpur', phone: '০১৭XX-XXXXXX', type: 'Blood Bank', available: ['A+', 'O+', 'B+'] },
    { id: 9, name: 'KONIKA BLOOD BANK AND TRANSFUSION CENTER', location: 'M. R. COLLEGE ROAD, PANCHAGARH SADAR', phone: '০১৭XX-XXXXXX', type: 'Blood Bank', available: ['O+', 'B+', 'AB-'] },
    { id: 10, name: 'LAMB Hospital Blood Bank', location: 'LAMB Hospital, Parbatipur', phone: '০১৭XX-XXXXXX', type: 'Blood Bank', available: ['A+', 'B+', 'O+'] },
    { id: 11, name: 'MEDINET TRUST BLOOD BANK', location: 'M.Abdur Rahim Medical Collage Road, Dinajpur', phone: '০১৭XX-XXXXXX', type: 'Blood Bank', available: ['O+', 'A-', 'B-'] },
    { id: 12, name: 'MPR Blood Bank O Shanchalan Kendra', location: '984, নবাব সিরাজউদ্দৌলা রোড, ঠাকুরগাঁও', phone: '০১৭XX-XXXXXX', type: 'Blood Bank', available: ['AB+', 'O+', 'B+'] },
    { id: 13, name: 'Pure Blood Bank and Transfusion Center', location: 'Dinajpur Medical College Hospital Mor, Dinajpur', phone: '০১৭XX-XXXXXX', type: 'Blood Bank', available: ['A+', 'B+', 'O+'] },
    { id: 14, name: 'Sabina Memorial Blood Bank', location: 'Tetulia Road, Panchagarh', phone: '০১৭XX-XXXXXX', type: 'Blood Bank', available: ['A-', 'O-', 'AB-'] },
    { id: 15, name: 'SAFE BLOOD BANK & TRANSFUSION CENTER', location: 'Hallpara, Thakurgaon', phone: '০১৭XX-XXXXXX', type: 'Blood Bank', available: ['O+', 'B+', 'A+'] },
    { id: 16, name: 'SONDHANI BLOOD BANK & TRANSFUSION CENTER', location: 'Purbo Hazipara, Thakurgaon', phone: '০১৭XX-XXXXXX', type: 'Blood Bank', available: ['A+', 'B+', 'O+', 'AB+'] },
    { id: 17, name: 'THAKURGAON BLOOD BANK AND TRANSFUSION CENTER', location: 'Sarkarpara, Thakurgaon', phone: '০১৭XX-XXXXXX', type: 'Blood Bank', available: ['O+', 'B+', 'A-'] }
  ];

  // ফিল্টারিং লজিক: সিলেক্ট করা ব্লাড গ্রুপ অনুযায়ী ডেটা ফিল্টার করা
  const filteredBloodBanks = activeBloodGroup === 'সকল' 
    ? bloodBanksList 
    : bloodBanksList.filter(bank => bank.available.includes(activeBloodGroup));

  // মডাল ওপেন করার ফাংশন (TypeScript Error Fixed)
  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);

  // OTP পাঠানোর ডামি লজিক
  const handleSendOtp = (e: any) => {
    e.preventDefault();
    setIsSendingOtp(true);
    setTimeout(() => {
      setIsSendingOtp(false);
      setForgotStep(2);
      alert("📲 (টেস্টিং) একটি ডামি OTP আপনার নম্বরে পাঠানো হয়েছে!\n\nঅনুগ্রহ করে '1234' কোডটি ব্যবহার করুন।");
    }, 1500);
  };

  // পাসওয়ার্ড রিসেট করার ডামি লজিক
  const handleResetPassword = (e: any) => {
    e.preventDefault();
    setIsResettingPass(true);
    setTimeout(() => {
      setIsResettingPass(false);
      // আমরা ডামি হিসেবে '1234' কোডটি সেট করেছি
      if(otpCode === '1234') {
          setIsForgotPassOpen(false);
          setForgotStep(1);
          setOtpPhone('');
          setOtpCode('');
          setNewPassword('');
          alert("✅ আলহামদুলিল্লাহ! আপনার পাসওয়ার্ড সফলভাবে পরিবর্তন করা হয়েছে।\n\nআপনি এখন নতুন পাসওয়ার্ড দিয়ে ড্যাশবোর্ডে লগইন করতে পারবেন।");
      } else {
          alert("❌ ভুল OTP! অনুগ্রহ করে সঠিক কোডটি (1234) দিন।");
      }
    }, 1500);
  };
  
  // ২০. পার্টনার লগইন মডাল স্টেট (Vendor Dashboard Login) [২৬০, ২৯৫]
  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('');
      alert("✅ লগইন সফল হয়েছে!\n\nআপনাকে এখন পার্টনার ড্যাশবোর্ডে নিয়ে যাওয়া হবে, যেখান থেকে আপনি আপনার প্রোফাইল আপডেট এবং প্রিমিয়াম স্পন্সরশিপ অ্যাক্টিভ করতে পারবেন।");
    }, 1500);
  };  

  // ১৯. সিম্পল অভিযোগ/রিপোর্ট মডাল স্টেট (V1) [২৫৭, ৪৩৩]
  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('');
      alert("✅ আপনার অভিযোগটি সফলভাবে জমা হয়েছে!\n\nআমরা দ্রুত বিষয়টি তদন্ত করে প্রয়োজনীয় ব্যবস্থা গ্রহণ করব। আমাদের সাথে থাকার জন্য ধন্যবাদ।");
    }, 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);
        },
        () => {
          alert('অনুগ্রহ করে লোকেশন পারমিশন দিন।');
          setIsDiagLocating(false);
        }
      );
    }
  };  
  
  // ১৭. হাসপাতাল ও ক্লিনিক রেজিস্ট্রেশন মডাল স্টেট (World-Class 4 Steps) [২৮৩, ২৮৪]
  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);

  // লোগো আপলোডের ফাংশন (১০০% ফাংশনাল FileReader লজিক)
  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);
        },
        () => {
          alert('অনুগ্রহ করে লোকেশন পারমিশন দিন।');
          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);

  // ছবি আপলোডের ফাংশন (১০০% গ্যারান্টিড প্রিভিউ - FileReader লজিক)
  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);
      };
      
      // ছবিটিকে Base64 ডাটায় কনভার্ট করার কমান্ড
      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);
        },
        () => {
          alert('আপনার ব্রাউজার থেকে লোকেশন অ্যাক্সেস দেওয়া নেই। অনুগ্রহ করে লোকেশন পারমিশন দিন।');
          setIsLocating(false);
        }
      );
    } else {
      alert('আপনার ডিভাইস লাইভ লোকেশন সাপোর্ট করে না।');
      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 categories: string[] = ['মেডিসিন', 'কার্ডিওলজি', 'গাইনি ও প্রসূতি', 'শিশু রোগ', 'অর্থোপেডিক্স', 'নাক-কান-গলা', 'চক্ষু', 'চর্ম ও যৌন'];
  const [activeCategory, setActiveCategory] = useState<string>('মেডিসিন');

  // ৩. ডায়াগনস্টিক সেন্টারের স্টেট
  const topDiagnostics: string[] = [
    'পপুলার ডায়াগনস্টিক সেন্টার', 'ল্যাবএইড লিমিটেড', 'আপডেট ডায়াগনস্টিক', 
    'মেট্রো ল্যাব ইমেজিং', 'এ্যাপোলো ডায়াগনস্টিক', 'গ্রীন ডায়াগনস্টিক', 
    'ডক্টরস ডায়াগনস্টিক', 'চেক আপ ডায়াগনস্টিক', 'ডেল্টা ডায়াগনস্টিক', 'লাইফ কেয়ার ডায়াগনস্টিক'
  ];
  const [activeTopDiag, setActiveTopDiag] = useState<string>('পপুলার ডায়াগনস্টিক সেন্টার');

  // ৪. হাসপাতাল ও ক্লিনিকের স্টেট
  const topHospitals: string[] = [
    'প্রাইম মেডিকেল কলেজ হাসপাতাল', 'গুড হেলথ হাসপাতাল', 'রংপুর কমিউনিটি হাসপাতাল', 
    'ডিপ আই কেয়ার ফাউন্ডেশন', 'কছির উদ্দিন মেমোরিয়াল', 'রংপুর সেন্ট্রাল হাসপাতাল', 
    'সিটি হাসপাতাল', 'ইসলামী ব্যাংক হাসপাতাল', 'মা ও শিশু হাসপাতাল', 'পপুলার জেনারেল হাসপাতাল'
  ];
  const [activeTopHosp, setActiveTopHosp] = 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: ''
  });

  // =====================================================================
  // ফাংশনস (Functions & Logics)
  // =====================================================================

  // ১৫-পয়েন্ট ডক্টর প্রোফাইল ওপেন করার ফাংশন
  const openDoctorProfile = (docName: string) => {
    const dummyProfile: DoctorProfile = {
      name: docName,
      title: 'সিনিয়র কনসালটেন্ট ও বিভাগীয় প্রধান',
      degree: 'MBBS, FCPS (Medicine), MD (Cardio), FRCP (UK)',
      specialty: 'মেডিসিন ও হৃদরোগ বিশেষজ্ঞ',
      experience: '১৮+ বছরের অভিজ্ঞতা',
      bmdc: 'A-28491',
      hospital: 'প্রাইম মেডিকেল কলেজ হাসপাতাল',
      chamber: 'ল্যাবএইড লিমিটেড, রুম নং- ৩০৫ (৩য় তলা), ধাপ, রংপুর',
      time: 'প্রতিদিন বিকেল ৪টা - রাত ৮টা (শুক্রবার বন্ধ)',
      fee: '১০০০',
      rating: '৪.৯',
      phone: '০১৭XX-XXXXXX',
      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);
  };

  // নামের প্রথম অক্ষর বের করার ফাংশন (বাগ ফিক্স করা হয়েছে)
  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);
      alert("✅ ফিল্টার সফলভাবে প্রয়োগ করা হয়েছে!\n(ডাটাবেস কানেক্ট হলে নিচে ফিল্টার করা ডাক্তারদের লিস্ট চলে আসবে।)");
    }, 1000);
  };

  // 🧠 ম্যাসিভ AI কিওয়ার্ড অ্যানালাইজার (Massive Medical NLP Logic)
  const handleAISearch = (e?: React.FormEvent, voiceQuery?: string) => {
    if (e) e.preventDefault();
    
    // সেফ কোয়েরি: undefined বা ক্র্যাশ আটকানোর লজিক
    const query = voiceQuery !== undefined ? voiceQuery : searchQuery;
    const safeQuery = query || '';
    if (!safeQuery.trim()) return;

    setIsSearching(true);
    setTimeout(() => {
      setIsSearching(false);
      const lowerQuery = safeQuery.toLowerCase();
      let detectedDepartment = "মেডিসিন (General Medicine)";

      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 = "এন্ডোক্রাইনোলজি (ডায়াবেটিস ও হরমোন বিশেষজ্ঞ)";
      } 
      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 = "ইনফেকশাস ডিজিজ (সংক্রামক ব্যাধি ও মেডিসিন)";
      }

      alert(`🎤 AI Analysis Results:\n\n🗣️ আপনার সমস্যা: "${safeQuery}"\n\n🧠 AI অ্যানালাইসিস: আপনার লক্ষণের ওপর ভিত্তি করে একজন "${detectedDepartment}" সবচেয়ে উপযুক্ত।\n\n(ডাটাবেস কানেক্ট হলে এখানে এই বিভাগের ডাক্তারদের লিস্ট চলে আসবে!)`);
    }, 1500);
  };

  // 🎙️ রিয়েলিস্টিক ভয়েস সার্চ সিমুলেশন
  const startVoiceSearch = () => {
    setIsRecording(true);
    setTimeout(() => {
      const dummyVoiceParagraph = "আমার মায়ের বয়স ৫০। ওনার মাজা ব্যথা, দুই হাঁটুতে প্রচণ্ড ব্যথা, আর মাঝে মাঝে গিরায় গিরায় ব্যথা করে। রাতে ঘুমাতে পারে না ব্যথার চোটে। একজন ভালো ডাক্তার লাগবে।";
      setSearchQuery(dummyVoiceParagraph);
      setIsRecording(false);
      handleAISearch(undefined, dummyVoiceParagraph);
    }, 4000);
  };

  // অ্যাম্বুলেন্সের মূল ডাটাবেস (মেইন কার্ড এবং রিকমেন্ডেশন উভয়ের জন্য)
  const ambulanceDB = [
    { id: 1, name: "রংপুর লাইফ কেয়ার অ্যাম্বুলেন্স", type: "ICU (লাইফ সাপোর্ট)", stand: "মেডিকেল মোড়", phone: "০১৭XX-XXXXXX", rating: 4.8, reviews: 124, tags: ["অক্সিজেন সাপোর্ট", "ভেন্টিলেটর", "প্যারামেডিক", "ইসিজি"] },
    { id: 2, name: "মীম ফ্রিজিং সার্ভিস", type: "ফ্রিজিং (মরদেহ বহন)", stand: "ধাপ", phone: "০১৯XX-XXXXXX", rating: 4.9, reviews: 45, tags: ["মাইনাস টেম্পারেচার কফিন", "এসি কেবিন", "লং ড্রাইভ"] },
    { id: 3, name: "সেবা এসি অ্যাম্বুলেন্স", type: "AC / Non-AC", stand: "শাপলা চত্বর", phone: "০১৮XX-XXXXXX", rating: 4.5, reviews: 89, tags: ["এসি কন্ডিশনড", "স্ট্রেচার", "ফার্স্ট এইড"] },
    { id: 4, name: "মায়ের দোয়া NICU সার্ভিস", type: "NICU (নবজাতক)", stand: "মেডিকেল মোড়", phone: "০১৭XX-XXXXXX", rating: 4.9, reviews: 210, tags: ["ইনকিউবেটর", "বেবি ওয়ার্মার", "অক্সিজেন", "নার্স"] },
    { id: 5, name: "হলি ফ্যামিলি আইসিইউ", type: "ICU (লাইফ সাপোর্ট)", stand: "টার্মিনাল", phone: "০১৫XX-XXXXXX", rating: 4.7, reviews: 156, tags: ["লাইফ সাপোর্ট", "অক্সিজেন", "প্যারামেডিক"] },
    { id: 6, name: "জনসেবা অ্যাম্বুলেন্স", type: "AC / Non-AC", stand: "মেডিকেল মোড়", phone: "০১৭YY-YYYYYY", 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="#" className="hover:text-blue-400 transition-colors">ডাক্তারগণ</a>
            <a href="#" className="hover:text-blue-400 transition-colors">হাসপাতাল</a>
            <a href="#" className="hover:text-blue-400 transition-colors">ব্লাড ব্যাংক</a>
          </nav>
          <div className="flex items-center gap-4">
            <button 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">
              <Phone className="w-4 h-4" />
              <span>জরুরী কল</span>
            </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>
                <option value="gastroenterology">গ্যাস্ট্রোএন্টারোলজি (পরিপাকতন্ত্র ও লিভার)</option>
                <option value="dermatology">ডার্মাটোলজি (চর্ম ও যৌন)</option>
                <option value="ent">ইএনটি (নাক-কান-গলা)</option>
                <option value="ophthalmology">অপথালমোলজি (চক্ষু)</option>
                <option value="psychiatry">সাইকিয়াট্রি (মানসিক রোগ)</option>
                <option value="nephrology">নেফ্রোলজি (কিডনি)</option>
                <option value="urology">ইউরোলজি (মূত্রতন্ত্র ও প্রোস্টেট)</option>
                <option value="endocrinology">এন্ডোক্রাইনোলজি (ডায়াবেটিস ও হরমোন)</option>
                <option value="pulmonology">পালমোনোলজি (বক্ষব্যাধি ও বক্ষবিদ্যা)</option>
                <option value="oncology">অনকোলজি (ক্যান্সার ও টিউমার)</option>
                <option value="dentistry">ডেন্টিস্ট্রি (দন্ত ও মুখগহ্বর)</option>
                <option value="hematology">হেমাটোলজি (রক্তরোগ)</option>
                <option value="rheumatology">রিউমাটোলজি (বাত ও ব্যথা)</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>
                <option value="jahaj_company">জাহাজ কোম্পানী মোড় (Jahaj Company)</option>
                <option value="co_bazar">সিও বাজার (CO Bazar)</option>
                <option value="payra">পায়রা চত্বর (Payra Chottor)</option>
                <option value="mahiganj">মাহিগঞ্জ (Mahiganj)</option>
                <option value="parker_mor">পার্কের মোড় (Parker More)</option>
                <option value="kellabond">কেল্লাবন্দ (Kellabond)</option>
                <option value="burirhat">বুড়িরহাট (Burirhat)</option>
                <option value="modern_mor">মডার্ন মোড় (Modern More)</option>
                <option value="terminal">কেন্দ্রীয় বাস টার্মিনাল (Bus Terminal)</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="update_diag">আপডেট ডায়াগনস্টিক সেন্টার (Update)</option>
                <option value="prime_mc">প্রাইম মেডিকেল কলেজ হাসপাতাল (Prime)</option>
                <option value="labaid">ল্যাবএইড লিমিটেড (Labaid)</option>
                <option value="islami_bank">ইসলামী ব্যাংক কমিউনিটি হাসপাতাল</option>
                <option value="kasir_uddin">কছির উদ্দিন মেমোরিয়াল হাসপাতাল</option>
                <option value="deep_eye">ডিপ আই কেয়ার ফাউন্ডেশন (Deep Eye)</option>
                <option value="good_health">গুড হেলথ হাসপাতাল (Good Health)</option>
                <option value="rangpur_community">রংপুর কমিউনিটি হাসপাতাল</option>
                <option value="doctors_clinic">ডক্টরস ক্লিনিক ও ডায়াগনস্টিক</option>
                <option value="central_hosp">রংপুর সেন্ট্রাল হাসপাতাল</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>
                <option value="1000_1500">১০০০৳ - ১৫০০৳</option>
                <option value="1500_above">১৫০০৳ এর উপরে</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>

        {/* গ্রিড লেআউট (Desktop 5 columns x 2 rows = 10 Cards) */}
        <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)}
              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>
              
              {/* VIP ব্যাজ */}
              <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 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 className="relative px-4 max-w-7xl mx-auto z-20 mb-24">
        {/* ব্যাকগ্রাউন্ড গ্লো */}
        <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>
          <button 
            onClick={() => alert(`${activeCategory} বিভাগের সকল ডাক্তার লোড হচ্ছে...`)} 
            className="text-cyan-400 hover:text-white font-bold flex items-center gap-1.5 transition-all mt-6 md:mt-0 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>

        {/* ক্যাটাগরি মেনু (Pill Tabs) */}
        <div className="flex overflow-x-auto gap-3 pb-6 mb-8 custom-scrollbar scroll-smooth">
          {categories.map((tab, idx) => {
             const isTabActive = activeCategory === tab;
             return (
              <button
                key={idx}
                onClick={() => setActiveCategory(tab)}
                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: '৪.৬', 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 (
            <>
              {/* পার্ট ১: স্পন্সরড বিশেষজ্ঞ (Row of 5 VIP Cards) */}
              <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)} 
                      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 className="text-xl font-extrabold text-white mb-6 flex items-center gap-2.5">
                <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.map((doc) => (
                  <div 
                    key={doc.id} 
                    onClick={() => openDoctorProfile(doc.name)} 
                    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"
                  >
                    <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>

              {/* লোড মোর বাটন */}
              <div className="mt-8 text-center">
                <button 
                  onClick={() => alert(`${currentCat} বিভাগের ডাটাবেস থেকে আরও ডাক্তার লোড হচ্ছে...`)} 
                  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>

      {/* ================= ৬. সেরা ১০ ডায়াগনস্টিক সেন্টার (Premium 5-Col Grid + Note) ================= */}
      <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>
        </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>

        {/* 10 Cards (5 columns x 2 rows) */}
        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-5">
          {(() => {
            const docNames = ['অধ্যাপক ডাঃ আরিফ মাহমুদ', 'ডাঃ সাদিয়া আফরিন', 'ডাঃ তারেক রহমান', 'ডাঃ নাদিয়া সুলতানা', 'অধ্যাপক ডাঃ সাইদুর রহমান', 'ডাঃ ফাহিম ফয়সাল', 'ডাঃ মেহজাবিন আক্তার', 'ডাঃ রফিকুল ইসলাম', 'ডাঃ শাহরিয়ার হোসেন', 'ডাঃ আহমেদ জামান'];
            const specialities = ['মেডিসিন', 'গাইনি ও প্রসূতি', 'কার্ডিওলজি', 'শিশু রোগ', 'অর্থোপেডিক্স', 'সার্জারি', 'চর্ম ও যৌন', 'নিউরোলজি', 'নাক-কান-গলা', 'চক্ষু'];
            const degrees = ['MBBS, FCPS, MD', 'MBBS, DGO, MCPS', 'MBBS, MD (Cardio)', 'MBBS, FCPS (Ped)', 'MBBS, MS (Ortho)', 'MBBS, FCPS (Surg)', 'MBBS, DDV', 'MBBS, MD (Neuro)', 'MBBS, DLO', 'MBBS, DO'];
            const titles = ['সিনিয়র কনসালটেন্ট', 'সহকারী অধ্যাপক', 'চিফ কনসালটেন্ট', 'বিশেষজ্ঞ চিকিৎসক', 'কনসালটেন্ট', 'সহকারী অধ্যাপক', 'সিনিয়র বিশেষজ্ঞ', 'অধ্যাপক', 'কনসালটেন্ট', 'সিনিয়র কনসালটেন্ট'];

            return docNames.map((name, i) => {
              const successRate = 90 + (i % 9); 
              const patientsSeen = 5000 + (i * 450); 

              return (
                <div 
                  key={i} 
                  onClick={() => openDoctorProfile(name)} 
                  className="bg-gradient-to-b from-[#0A1930] to-[#02112A] border border-white/10 hover:border-cyan-500/50 p-4.5 rounded-[24px] group transition-all duration-300 hover:-translate-y-1.5 hover:shadow-[0_15px_30px_rgba(34,211,238,0.15)] cursor-pointer flex flex-col h-full relative overflow-hidden"
                >
                  <div className="flex justify-between items-start mb-4">
                    <div className="w-12 h-12 rounded-full bg-cyan-900/30 text-cyan-400 flex items-center justify-center font-extrabold text-xl border border-cyan-500/30 group-hover:bg-cyan-500 group-hover:text-[#02112A] transition-colors shadow-inner">
                      {getInitial(name)}
                    </div>
                    <div className="flex flex-col items-end gap-1">
                       <span className="text-yellow-400 text-[11px] font-bold flex items-center gap-1 bg-yellow-400/10 px-2 py-0.5 rounded-md border border-yellow-500/20">
                         <Star className="w-3 h-3 fill-yellow-400" /> 4.{(5 + (i%5))}
                       </span>
                       <span className="text-emerald-400 text-[9px] font-bold flex items-center gap-1">
                         <BadgeCheck className="w-3 h-3" /> ভেরিফায়েড
                       </span>
                    </div>
                  </div>
                  
                  <h4 className="text-[16px] font-extrabold text-white mb-1 group-hover:text-cyan-300 transition-colors leading-tight">{name}</h4>
                  <p className="text-[11px] text-cyan-400 font-bold mb-1.5">{specialities[i]} বিশেষজ্ঞ</p>
                  
                  <div className="space-y-1 mb-4">
                    <p className="text-[10px] text-gray-300 flex items-center gap-1.5 font-medium"><GraduationCap className="w-3 h-3 text-gray-500" /> {degrees[i]}</p>
                    <p className="text-[10px] text-gray-300 flex items-center gap-1.5 font-medium"><Award className="w-3 h-3 text-gray-500" /> {titles[i]}</p>
                    <p className="text-[10px] text-gray-400 flex items-center gap-1.5 pt-1"><MapPin className="w-3 h-3 text-cyan-500/50" /> {activeTopDiag}</p>
                  </div>

                  <div className="mt-auto bg-[#0A1930] p-3 rounded-xl border border-white/5 mb-4">
                    <div className="flex justify-between items-center text-[10px] mb-1.5 font-medium">
                      <span className="text-gray-400 flex items-center gap-1"><TrendingUp className="w-3 h-3" /> রিকভারি রেট</span>
                      <span className="text-cyan-400 font-extrabold">{successRate}%</span>
                    </div>
                    <div className="w-full bg-white/5 rounded-full h-1.5 mb-2.5 overflow-hidden">
                      <div className="bg-gradient-to-r from-blue-500 to-cyan-400 h-1.5 rounded-full" style={{ width: `${successRate}%` }}></div>
                    </div>
                    <div className="flex justify-between items-center text-[9px] text-gray-500 font-medium">
                       <span>মোট রোগী: <strong className="text-gray-300">{(patientsSeen/1000).toFixed(1)}k+</strong></span>
                       <span>ফি: <strong className="text-white text-[11px]">৳ {600 + (i*100 > 400 ? 400 : i*100)}</strong></span>
                    </div>
                  </div>

                  <button className="w-full py-2.5 bg-blue-600/10 group-hover:bg-cyan-500 text-cyan-400 group-hover:text-[#02112A] font-extrabold rounded-xl transition-all duration-300 border border-cyan-500/20 group-hover:border-transparent flex justify-center items-center gap-2 text-[12px] tracking-wide">
                    <Phone className="w-3.5 h-3.5" /> সিরিয়াল নিন
                  </button>
                </div>
              );
            });
          })()}
        </div>

        {/* স্পেশাল নোট বার */}
        {(() => {
          const specialNotes: Record<string, string> = {
            'পপুলার ডায়াগনস্টিক সেন্টার': 'পপুলার ডায়াগনস্টিক সেন্টারে সকল প্যাথলজি টেস্টে স্পেশাল ২০% ছাড় চলছে।',
            'ল্যাবএইড লিমিটেড': 'ল্যাবএইডে ২৪ ঘণ্টা ইমার্জেন্সি ব্লাড টেস্ট ও ইসিজি সুবিধা চালু আছে।',
            'আপডেট ডায়াগনস্টিক': 'এখানে আধুনিক 4D আল্ট্রাসোনোগ্রাফি মেশিন দ্বারা পরীক্ষা করা হয়।'
          };
          const currentNote = specialNotes[activeTopDiag] || `${activeTopDiag}-এ প্রতিদিন সকাল ৮টা থেকে রাত ১১টা পর্যন্ত বিশেষজ্ঞ চিকিৎসকরা নিয়মিত রোগী দেখেন।`;

          return (
            <div className="mt-8 flex flex-col lg:flex-row items-center justify-between gap-5 bg-gradient-to-r from-[#0A1930] to-cyan-900/10 border border-cyan-500/20 p-5 rounded-2xl backdrop-blur-md shadow-[0_10px_30px_rgba(0,0,0,0.3)]">
              <div className="flex items-start md:items-center gap-3.5 w-full lg:w-auto">
                <div className="bg-cyan-500/20 p-2.5 rounded-full text-cyan-400 shrink-0 border border-cyan-500/30"><Info className="w-5 h-5" /></div>
                <div>
                  <h4 className="text-white font-extrabold text-[15px] mb-0.5">{activeTopDiag} - স্পেশাল নোট:</h4>
                  <p className="text-[13px] font-medium text-cyan-100/70 leading-relaxed">{currentNote}</p>
                </div>
              </div>
              <div className="w-full lg:w-auto shrink-0">
                <button onClick={() => alert(`🏥 ${activeTopDiag} এর সকল ডাক্তারের তালিকা লোড হচ্ছে...`)} className="w-full lg: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)] hover:shadow-[0_0_30px_rgba(34,211,238,0.5)] flex justify-center items-center gap-2 whitespace-nowrap text-[14px]">
                  আরও ডাক্তার দেখুন <ChevronRight className="w-4 h-4" />
                </button>
              </div>
            </div>
          );
        })()}
      </section>

      {/* ================= ৭. সেরা ১০ হাসপাতাল এবং ক্লিনিক (3+7 Layout + Note) ================= */}
      <section className="relative px-4 max-w-7xl mx-auto z-20 mb-24">
        <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={() => alert('রংপুরের সকল হাসপাতাল ও ক্লিনিকের তালিকা ওপেন হচ্ছে...')} 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">
             সকল হাসপাতাল দেখুন <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>

        <div>
          {(() => {
            const top3Names: string[] = ['অধ্যাপক ডাঃ কামরুল হাসান', 'ডাঃ তানিয়া জামান', 'ডাঃ আব্দুল্লাহ আল মামুন'];
            const top3Specs: string[] = ['মেডিসিন ও হৃদরোগ', 'গাইনি ও প্রসূতি', 'সার্জারি বিশেষজ্ঞ'];
            
            const regular7Names: string[] = ['আরিফ মাহমুদ', 'সাদিয়া আফরিন', 'তারেক রহমান', 'নাদিয়া সুলতানা', 'সাইদুর রহমান', 'ফাহিম ফয়সাল', 'আহমেদ জামান'];
            const regular7Specs: string[] = ['শিশু রোগ', 'অর্থোপেডিক্স', 'চর্ম ও যৌন', 'নিউরোমেডিসিন', 'নাক-কান-গলা', 'চক্ষু', 'ডেন্টিস্ট্রি'];

            return (
              <>
                {/* সারি ১: ৩ জন চিফ কনসালটেন্ট */}
                <div className="grid grid-cols-1 md:grid-cols-3 gap-5 mb-5">
                  {top3Names.map((name: string, i: number) => {
                    const successRate = 95 + (i % 4); 
                    return (
                      <div 
                        key={`top-${i}`} 
                        onClick={() => openDoctorProfile(name)} 
                        className="bg-gradient-to-br from-[#0A1930] to-[#02112A] border border-cyan-500/20 hover:border-cyan-400/60 p-5 rounded-[24px] group transition-all duration-300 hover:-translate-y-1 hover:shadow-[0_15px_30px_rgba(34,211,238,0.2)] cursor-pointer flex flex-col h-full relative overflow-hidden"
                      >
                        <div className="absolute top-0 right-0 bg-cyan-600 text-[9px] text-[#02112A] px-3 py-1 rounded-bl-xl font-extrabold uppercase tracking-widest shadow-md">
                          Chief Consultant
                        </div>
                        <div className="flex items-center gap-4 mb-4">
                          <div className="w-14 h-14 rounded-full bg-cyan-900/30 text-cyan-400 flex items-center justify-center font-extrabold text-2xl border border-cyan-500/30 group-hover:bg-cyan-500 group-hover:text-[#02112A] transition-colors shadow-inner">
                            {getInitial(name)}
                          </div>
                          <div>
                            <h4 className="text-[17px] font-extrabold text-white group-hover:text-cyan-300 transition-colors leading-tight">{name}</h4>
                            <p className="text-[12px] text-cyan-400 font-bold">{top3Specs[i]}</p>
                            <span className="text-yellow-400 text-[11px] font-bold flex items-center gap-1 mt-1">
                              <Star className="w-3 h-3 fill-yellow-400" /> ৪.৯ <span className="text-gray-500 ml-1">(৮৫০+ রিভিউ)</span>
                            </span>
                          </div>
                        </div>
                        <div className="space-y-1.5 mb-4">
                          <p className="text-[11px] text-gray-300 flex items-center gap-2 font-medium"><GraduationCap className="w-3.5 h-3.5 text-gray-500" /> MBBS, FCPS, MD, FRCP</p>
                          <p className="text-[11px] text-gray-400 flex items-center gap-2 pt-1"><MapPin className="w-3.5 h-3.5 text-cyan-500/50" /> {activeTopHosp}</p>
                        </div>
                        <div className="mt-auto bg-cyan-900/10 p-3 rounded-xl border border-cyan-500/10 mb-4">
                          <div className="flex justify-between items-center text-[11px] mb-1.5 font-medium">
                            <span className="text-gray-400 flex items-center gap-1"><TrendingUp className="w-3.5 h-3.5" /> সাকসেস রেশিও</span>
                            <span className="text-cyan-400 font-extrabold">{successRate}%</span>
                          </div>
                          <div className="w-full bg-white/5 rounded-full h-1.5 mb-2 overflow-hidden">
                            <div className="bg-gradient-to-r from-blue-500 to-cyan-400 h-1.5 rounded-full" style={{ width: `${successRate}%` }}></div>
                          </div>
                        </div>
                        <div className="flex gap-3">
                          <div className="w-1/3 flex items-center justify-center bg-white/5 text-white font-extrabold rounded-xl border border-white/10 text-sm">৳ ১০০০</div>
                          <button className="w-2/3 py-3 bg-blue-600/10 group-hover:bg-cyan-500 text-cyan-400 group-hover:text-[#02112A] font-extrabold rounded-xl transition-all duration-300 border border-cyan-500/20 group-hover:border-transparent flex justify-center items-center gap-2 text-[13px] tracking-wide">
                            <Phone className="w-4 h-4" /> সিরিয়াল নিন
                          </button>
                        </div>
                      </div>
                    );
                  })}
                </div>

                {/* সারি ২: ৭ জন বিশেষজ্ঞ */}
                <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-7 gap-3">
                  {regular7Names.map((name: string, i: number) => {
                    const successRate = 85 + (i % 10); 
                    return (
                      <div 
                        key={`reg-${i}`} 
                        onClick={() => openDoctorProfile(name)} 
                        className="bg-[#0A1930] border border-white/5 hover:border-cyan-500/30 p-3 rounded-2xl group transition-all duration-300 hover:-translate-y-1 cursor-pointer flex flex-col h-full relative"
                      >
                        <div className="flex flex-col items-center text-center mb-3">
                          <div className="w-10 h-10 mb-2 rounded-full bg-blue-900/20 text-blue-300 flex items-center justify-center font-extrabold text-sm border border-blue-500/20 group-hover:bg-blue-600 group-hover:text-white transition-colors">
                            {getInitial(name)}
                          </div>
                          <h4 className="text-[12px] font-extrabold text-white group-hover:text-cyan-300 transition-colors leading-tight mb-1">ডাঃ {name}</h4>
                          <p className="text-[10px] text-cyan-500 font-medium bg-cyan-500/10 px-2 py-0.5 rounded">{regular7Specs[i]}</p>
                        </div>
                        <div className="space-y-1 mb-3 text-[9px] text-gray-400">
                          <p className="flex justify-center items-center gap-1 font-medium"><Star className="w-2.5 h-2.5 fill-yellow-400 text-yellow-400" /> ৪.{(5 + (i%5))}</p>
                          <p className="flex justify-center text-center leading-tight line-clamp-1">{activeTopHosp}</p>
                        </div>
                        <div className="mt-auto mb-3">
                           <div className="w-full bg-white/5 rounded-full h-1 overflow-hidden">
                             <div className="bg-cyan-500 h-1 rounded-full" style={{ width: `${successRate}%` }}></div>
                           </div>
                        </div>
                        <div className="flex justify-between items-center pt-2 border-t border-white/5">
                           <span className="text-white text-[10px] font-bold">৳ {600 + (i*50)}</span>
                           <button className="bg-blue-600/20 group-hover:bg-cyan-500 text-cyan-400 group-hover:text-[#02112A] px-2 py-1 rounded text-[9px] font-extrabold transition-all">বুকিং</button>
                        </div>
                      </div>
                    );
                  })}
                </div>
              </>
            );
          })()}
        </div>

        {(() => {
          const hospitalNotes: Record<string, string> = {
            'প্রাইম মেডিকেল কলেজ হাসপাতাল': 'প্রাইম মেডিকেলে ২৪ ঘণ্টা ইমার্জেন্সি সার্ভিস ও আইসিইউ (ICU) সুবিধা এভেইলেবল রয়েছে।',
            'ডিপ আই কেয়ার ফাউন্ডেশন': 'শুক্রবার সহ প্রতিদিন এখানে চোখের আধুনিক ফ্যাকো সার্জারি করা হয়।',
            'গুড হেলথ হাসপাতাল': 'এখানে ডিজিটাল এক্স-রে এবং নিজস্ব প্যাথলজি ল্যাবে টেস্ট করা হয়।'
          };
          const currentNote: string = hospitalNotes[activeTopHosp] || `${activeTopHosp}-এ বহির্বিভাগে প্রতিদিন বিশেষজ্ঞ চিকিৎসকরা নিয়মিত রোগী দেখেন।`;

          return (
            <div className="mt-8 flex flex-col lg:flex-row items-center justify-between gap-4 bg-gradient-to-r from-[#0A1930] to-cyan-900/10 border border-cyan-500/20 p-4 lg:p-5 rounded-2xl backdrop-blur-md shadow-[0_10px_30px_rgba(0,0,0,0.3)]">
              <div className="flex items-start md:items-center gap-3.5 w-full lg:w-auto">
                <div className="bg-cyan-500/20 p-2.5 rounded-full text-cyan-400 shrink-0 border border-cyan-500/30"><Info className="w-5 h-5" /></div>
                <div>
                  <h4 className="text-white font-extrabold text-[14px] mb-0.5">{activeTopHosp} - স্পেশাল নোট:</h4>
                  <p className="text-[12px] md:text-[13px] font-medium text-cyan-100/70 leading-relaxed">{currentNote}</p>
                </div>
              </div>
              <div className="w-full lg:w-auto flex flex-col sm:flex-row gap-3 shrink-0">
                <button 
                  onClick={() => alert(`🏥 ${activeTopHosp} এর বিস্তারিত প্রোফাইল (ম্যাপ, ছবি ও সার্ভিস) ওপেন হচ্ছে...`)}
                  className="w-full sm:w-auto px-5 py-3 bg-white/5 hover:bg-white/10 text-cyan-300 font-bold rounded-xl transition-all border border-cyan-500/20 flex justify-center items-center gap-2 text-[13px]"
                >
                  <Building2 className="w-4 h-4" /> হাসপাতালের প্রোফাইল
                </button>
                <button 
                  onClick={() => alert(`👨‍⚕️ ${activeTopHosp} এর সকল ডাক্তারের পূর্ণাঙ্গ তালিকা লোড হচ্ছে...`)}
                  className="w-full sm:w-auto px-6 py-3 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)] hover:shadow-[0_0_30px_rgba(34,211,238,0.5)] flex justify-center items-center gap-2 text-[13px]"
                >
                  আরও ডাক্তার দেখুন <ChevronRight className="w-4 h-4" />
                </button>
              </div>
            </div>
          );
        })()}
      </section>

      {/* ================= ৯. বিশেষায়িত চিকিৎসা কেন্দ্র (Specialized Care Centers) [৭, ৮] ================= */}
      <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={() => alert('রংপুর বিভাগের সকল স্পেশালাইজড সেন্টারের তালিকা ওপেন হচ্ছে...')} 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">
             সকল সেন্টার দেখুন <ChevronRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
          </button>
        </div>

        {/* স্পেশালাইজড সেন্টার গ্রিড (Premium Glassmorphism Cards) [৮] */}
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
          {[
            { 
              name: 'ডিপ আই কেয়ার ফাউন্ডেশন', 
              category: 'চক্ষু চিকিৎসাকেন্দ্র', 
              location: 'দর্শন, রংপুর', 
              highlight: 'ফ্যাকো সার্জারি ও গ্লুকোমা',
              color: 'cyan'
            },
            { 
              name: 'রংপুর ডায়াবেটিক সমিতি', 
              category: 'ডায়াবেটিস ও হরমোন', 
              location: 'রাধাভল্লভ, রংপুর', 
              highlight: 'ইনসুলিন ও ডায়েট প্ল্যান',
              color: 'rose'
            },
            { 
              name: 'পক্ষাঘাত ও রিহ্যাবিলিটেশন', 
              category: 'ফিজিওথেরাপি সেন্টার', 
              location: 'নয়নপুর, দিনাজপুর', 
              highlight: 'প্যারালাইসিস রিকভারি',
              color: 'blue'
            },
            { 
              name: 'মানসিক রোগ নিরাময় কেন্দ্র', 
              category: 'সাইকিয়াট্রি ও রিহ্যাব', 
              location: 'উপশহর, রংপুর', 
              highlight: 'ডিপ্রেশন ও মাদকাসক্তি',
              color: 'purple'
            }
          ].map((center, idx) => (
            <div 
              key={idx} 
              className="bg-[#0A1930]/80 backdrop-blur-xl border border-white/10 p-6 rounded-[28px] hover:-translate-y-2 transition-all duration-300 group cursor-pointer relative overflow-hidden flex flex-col h-full shadow-[0_10px_30px_rgba(0,0,0,0.3)] hover:shadow-[0_15px_40px_rgba(168,85,247,0.2)]"
            >
               {/* টপ গ্লো এফেক্ট */}
               <div className={`absolute top-0 right-0 w-24 h-24 bg-${center.color}-500/10 rounded-full blur-2xl -mr-8 -mt-8 transition-all group-hover:bg-${center.color}-500/20`}></div>
               
               <div className="flex justify-between items-start mb-5 relative z-10">
                 <div className={`w-14 h-14 rounded-2xl bg-${center.color}-500/10 flex items-center justify-center border border-${center.color}-500/20 group-hover:bg-${center.color}-500 transition-colors shadow-inner`}>
                    <Building2 className={`w-6 h-6 text-${center.color}-400 group-hover:text-white transition-colors`} />
                 </div>
                 <div className="bg-white/5 border border-white/10 px-3 py-1 rounded-full text-[10px] text-gray-300 font-bold flex items-center gap-1.5">
                    <Star className="w-3 h-3 fill-yellow-500 text-yellow-500" /> ৪.৯
                 </div>
               </div>

               <div className="relative z-10 flex-1 flex flex-col">
                 <h3 className="text-[17px] font-extrabold text-white mb-1.5 group-hover:text-purple-300 transition-colors leading-snug">
                   {center.name}
                 </h3>
                 <p className={`text-[12px] font-bold text-${center.color}-400 mb-4 inline-block`}>
                   {center.category}
                 </p>
                 
                 <div className="mt-auto space-y-2.5 mb-6">
                    <p className="text-[11px] text-gray-400 font-medium flex items-center gap-2">
                      <MapPin className="w-3.5 h-3.5 text-gray-500" /> {center.location}
                    </p>
                    <p className="text-[11px] text-gray-300 font-medium flex items-center gap-2">
                      <ShieldCheck className={`w-3.5 h-3.5 text-${center.color}-500`} /> 
                      স্পেশালিটি: <span className="font-bold text-white">{center.highlight}</span>
                    </p>
                 </div>

                 <button className={`w-full py-3 bg-${center.color}-500/10 group-hover:bg-${center.color}-500 text-${center.color}-400 group-hover:text-white font-extrabold rounded-xl transition-all duration-300 border border-${center.color}-500/20 group-hover:border-transparent flex justify-center items-center gap-2 text-[13px]`}>
                   <Phone className="w-4 h-4" /> যোগাযোগ করুন
                 </button>
               </div>
            </div>
          ))}
        </div>
      </section>

            {/* ================= ১০. রিয়েল-টাইম রোগীর মতামত (Live Patient Testimonials) [৮, ২৫৮] ================= */}
      <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={() => alert('গেস্ট রিভিউ সাবমিট করার পপ-আপ ফর্ম ওপেন হচ্ছে...')} 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>

         {/* টেস্টিমোনিয়াল স্লাইডার / হরাইজন্টাল স্ক্রল (Horizontal Slider) [৮] */}
         <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>

      {/* ================= ২৩. ব্লাড ব্যাংক ও রক্তদাতা সেকশন (Ultra-Modern 6-Col Grid) ================= */}
      <section className="relative py-16 px-4 max-w-[1400px] mx-auto w-full z-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>

          {/* 🚀 আল্ট্রা-মডার্ন ৬-কলাম মাইক্রো কার্ড গ্রিড (6 Cards per Row) */}
          {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, i) => (
                         <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>
      

            {/* ================= ১১. ২৪/৭ ইমার্জেন্সি জোন (24/7 Emergency Corner) [৯] ================= */}
      <section className="relative px-4 max-w-7xl mx-auto z-20 mb-24">
         {/* ব্যাকগ্রাউন্ড গ্লো (Emergency Red/Orange) */}
         <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>

         {/* ইমার্জেন্সি কুইক অ্যাকশন কার্ডস (Hotline & Ambulance) */}
         <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>
                 <button className="bg-red-600 hover:bg-red-500 text-white px-6 py-3 rounded-xl font-bold flex items-center gap-2 shadow-[0_0_20px_rgba(239,68,68,0.4)] transition-all">
                   <Phone className="w-4 h-4" /> ১৬২৬৩ (টোল ফ্রি)
                 </button>
              </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={() => alert('অ্যাম্বুলেন্স ডিরেক্টরি ওপেন হচ্ছে...')} 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">
                   <Phone 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>

         {/* 24/7 খোলা হাসপাতাল গ্রিড */}
         <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>
               <button 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" /> হেল্প ডেস্কে কল করুন
               </button>
             </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-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>
                        <button onClick={() => alert(`📞 কল করা হচ্ছে: ${amb.phone}`)} 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`}>
                          <Phone className="w-3.5 h-3.5" /> Call Now
                        </button>
                      </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">
               
               {/* ১. ব্র্যান্ডিং এবং কন্টাক্ট ইনফো (Contact Info) */}
               <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" /> +৮৮০ ১৭XX-XXXXXX</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><a href="#" className="text-[13px] text-gray-400 hover:text-cyan-400 transition-colors flex items-center gap-2"><ChevronRight className="w-3 h-3" /> বিশেষজ্ঞ ডাক্তারগণ</a></li>
                     <li><a href="#" className="text-[13px] text-gray-400 hover:text-cyan-400 transition-colors flex items-center gap-2"><ChevronRight className="w-3 h-3" /> হাসপাতাল ও ক্লিনিক</a></li>
                     <li><a href="#" className="text-[13px] text-gray-400 hover:text-cyan-400 transition-colors flex items-center gap-2"><ChevronRight className="w-3 h-3" /> জরুরী ব্লাড ব্যাংক</a></li>
                     <li><a href="#" className="text-[13px] text-gray-400 hover:text-cyan-400 transition-colors flex items-center gap-2"><ChevronRight className="w-3 h-3" /> ইমার্জেন্সি অ্যাম্বুলেন্স</a></li>
                  </ul>
               </div>

               {/* ৩. পার্টনার ও রেজিস্ট্রেশন (User's Logic) [২৬০] */}
               <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>

               {/* ৪. সাহায্য ও অভিযোগ (Complaint) [২৫৭] */}
               <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">© ২০২৬ হামার ডাক্তার. সর্বস্বত্ব সংরক্ষিত।</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>      

      {/* ================= ৮. ১৫-পয়েন্ট ডক্টর প্রোফাইল মডাল (The Masterpiece - z-index Fixed) ================= */}
      {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>
                  <button 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">
                    <Phone className="w-5 h-5" /> সিরিয়াল নিন
                  </button>
                  <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 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>
            </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={() => alert('WhatsApp-এ লাইভ লোকেশন শেয়ার হচ্ছে...')} 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>
                       <button onClick={() => alert(`📞 কল করা হচ্ছে: ${selectedAmbulance.phone}`)} className="w-1/2 bg-gradient-to-r from-blue-600 to-cyan-500 text-white rounded-xl py-3.5 font-extrabold transition-all shadow-[0_5px_20px_rgba(34,211,238,0.4)] hover:scale-105 flex justify-center items-center gap-2 text-[14px]">
                         <Phone className="w-4 h-4" /> Call Now
                       </button>
                    </div>
                 </div>
               </div>

               {/* ৫. ডাইনামিক রিকমেন্ডেশন (Clickable Cards) */}
               <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>

                           {/* e.stopPropagation() দেওয়া হয়েছে যাতে কার্ড ক্লিক না হয়ে শুধু কল হয় */}
                           <button onClick={(e) => { e.stopPropagation(); alert(`📞 কল করা হচ্ছে: ${recAmb.phone}`); }} 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">
                             <Phone className="w-3.5 h-3.5" /> সরাসরি কল করুন
                           </button>
                        </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 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>
      )}

      {/* ================= ১৬. ডক্টর মাল্টি-স্টেপ রেজিস্ট্রেশন মডাল (Functional & New UI) ================= */}
      {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>
          
          {/* Main Modal Body */}
          <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">
            
            {/* Top Glow & Close Button */}
            <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>

               {/* New Progress Bar UI */}
               <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-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>

               {/* Form Steps Container */}
               <div className="min-h-[340px] bg-white/[0.02] p-5 md:p-6 rounded-2xl border border-white/5">
                 
                 {/* Step 1: Personal & Image Upload (100% Functional) */}
                 {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">
                        {/* Live Image Preview Label */}
                        <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>
                 )}

                 {/* Step 2: Professional Details */}
                 {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>
                 )}

                 {/* Step 3: Live Location & Chamber (100% Functional) */}
                 {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>
                     
                     {/* Functional Live Location Box */}
                     <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" 
                         />
                         
                         {/* Action Button for GPS */}
                         <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>
                 )}

                 {/* Step 4: Schedule & Fees */}
                 {docRegStep === 4 && (
                   <div className="space-y-6 animate-in slide-in-from-right-4 duration-300">
                     {/* Checkbox Design for Days */}
                     <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>

               {/* Modern Navigation Buttons */}
               <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('');
                       alert("✅ আলহামদুলিল্লাহ! আপনার প্রোফাইল সফলভাবে তৈরি হয়েছে।\n\nঅ্যাডমিন আপনার তথ্য ভেরিফাই করার পর আপনার লাইভ লোকেশন ও শিডিউল সহ প্রোফাইলটি ওয়েবসাইটে শো করবে।");
                     }, 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>
      )}

      {/* ================= ১৭. বিশ্বমানের হাসপাতাল ও ক্লিনিক রেজিস্ট্রেশন মডাল (4 Steps) [২৮৩, ২৮৪, ৯] ================= */}
      {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>

               {/* Progress Bar (4 Steps) */}
               <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-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>

               {/* Form Container */}
               <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>

               {/* Navigation Buttons */}
               <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('');
                       alert("✅ আলহামদুলিল্লাহ! আপনার হাসপাতালের রেজিস্ট্রেশন রিকোয়েস্ট জমা হয়েছে।\n\nঅ্যাডমিন আপনার DGHS কোড ভেরিফাই করার পর আপনার প্রোফাইলটি ওয়েবসাইটে লাইভ হবে এবং আপনি ড্যাশবোর্ডে লগইন করতে পারবেন।");
                     }, 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>
      )}

      {/* ================= ১৮. বিশ্বমানের ডায়াগনস্টিক সেন্টার রেজিস্ট্রেশন মডাল (4 Steps) [২৮৩, ২৯৩] ================= */}
      {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>

               {/* Progress Bar (4 Steps) */}
               <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-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>

               {/* Form Container */}
               <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>

               {/* Navigation Buttons */}
               <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('');
                       alert("✅ আলহামদুলিল্লাহ! আপনার ডায়াগনস্টিক সেন্টারের রেজিস্ট্রেশন রিকোয়েস্ট জমা হয়েছে।\n\nঅ্যাডমিন আপনার DGHS কোড ভেরিফাই করার পর আপনার প্রোফাইলটি ওয়েবসাইটে লাইভ হবে এবং আপনি ড্যাশবোর্ডে লগইন করতে পারবেন।");
                     }, 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>
      )}      
      {/* ================= ১৯. সিম্পল ও সিকিউরড অভিযোগ মডাল (V1) [২৫৭, ৪৩৩] ================= */}
      {isReportOpen && (
        <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={() => {setIsReportOpen(false); setReportText('');}}></div>
          
          <div className="relative w-full max-w-xl max-h-[95vh] bg-[#06142E] border border-red-500/30 rounded-[32px] shadow-[0_0_50px_rgba(239,68,68,0.1)] overflow-y-auto custom-scrollbar flex flex-col z-10 animate-in zoom-in-95 duration-300">
            
            {/* Red Glowing Top Border */}
            <div className="absolute top-0 left-1/4 w-1/2 h-1 bg-gradient-to-r from-transparent via-red-500 to-transparent blur-[2px]"></div>
            
            <button onClick={() => {setIsReportOpen(false); setReportText('');}} 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-8">
               <div className="mb-6 text-center">
                 <h2 className="text-2xl md:text-3xl font-extrabold text-white mb-2 flex items-center justify-center gap-2 tracking-tight">
                   <ShieldAlert className="w-7 h-7 text-red-500 animate-pulse" /> অভিযোগ বাক্স
                 </h2>
                 <p className="text-[13px] text-red-200/60">আপনার পরিচয় ১০০% গোপন রাখা হবে। নির্ভয়ে অভিযোগ করুন।</p>
               </div>

               {/* Simple 1-Step Form */}
               <form onSubmit={handleReportSubmit} className="bg-white/[0.02] p-5 md:p-6 rounded-2xl border border-white/5 space-y-5">
                 
                 <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
                   <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.5 text-white focus:border-red-500 focus:bg-[#02112A] outline-none transition-all" />
                   </div>
                   <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"/> আপনার ফোন নম্বর <span className="text-red-400">*</span></label>
                     <input type="text" required 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-red-500 focus:bg-[#02112A] outline-none transition-all" />
                   </div>
                 </div>

                 <div>
                   <label className="text-[12px] font-bold text-gray-400 ml-1">কার বিরুদ্ধে অভিযোগ করতে চান? <span className="text-red-400">*</span></label>
                   <select required className="w-full mt-1.5 bg-red-900/10 border border-red-500/30 rounded-xl px-4 py-3.5 text-red-200 font-bold focus:border-red-400 focus:bg-[#02112A] outline-none transition-all appearance-none cursor-pointer">
                     <option value="">নির্বাচন করুন</option>
                     <option>ডাক্তার বা তার অ্যাসিস্ট্যান্ট</option>
                     <option>হাসপাতাল বা ক্লিনিক কর্তৃপক্ষ</option>
                     <option>ডায়াগনস্টিক সেন্টার</option>
                     <option>অ্যাম্বুলেন্স ড্রাইভার বা মালিক</option>
                     <option>দালাল চক্র</option>
                     <option>অন্যান্য</option>
                   </select>
                 </div>

                 <div className="relative">
                   <label className="text-[12px] font-bold text-gray-400 ml-1 flex items-center gap-1.5 mb-1.5">
                     <FileText className="w-3.5 h-3.5 text-red-400"/> অভিযোগের বিবরণ <span className="text-red-400">*</span>
                   </label>
                   
                   {/* Text Area with Voice Record Button */}
                   <div className={`relative bg-[#02112A]/50 border rounded-xl overflow-hidden transition-all ${isReportRecording ? 'border-red-500 shadow-[0_0_15px_rgba(239,68,68,0.2)]' : 'border-white/10 focus-within:border-red-500'}`}>
                     <textarea 
                       required 
                       rows={4} 
                       value={reportText}
                       onChange={(e) => setReportText(e.target.value)}
                       placeholder={isReportRecording ? "আপনার কথা শোনা হচ্ছে... 🎤" : "কী ঘটেছে তা বিস্তারিতভাবে লিখুন অথবা পাশের মাইক বাটনে চেপে মুখে বলুন..."} 
                       className="w-full px-4 py-3 text-white bg-transparent outline-none resize-none disabled:opacity-70"
                       disabled={isReportRecording}
                     ></textarea>
                     
                     <div className="absolute bottom-2 right-2">
                       <button 
                         type="button"
                         onClick={startReportVoiceRecord}
                         disabled={isReportRecording}
                         className={`p-2.5 rounded-full transition-all flex items-center justify-center ${isReportRecording ? 'bg-red-500/20 text-red-500 animate-pulse' : 'bg-white/5 hover:bg-white/10 text-red-400 hover:text-red-300'}`}
                         title="মুখে বলে অভিযোগ করুন"
                       >
                         {isReportRecording ? <MicOff className="w-5 h-5" /> : <Mic className="w-5 h-5" />}
                       </button>
                     </div>
                   </div>
                   {isReportRecording && (
                     <p className="text-[10px] text-red-400 mt-2 ml-1 animate-pulse">🎤 কথা বলুন, রেকর্ড হচ্ছে...</p>
                   )}
                 </div>

                 {/* Submit Button */}
                 <div className="pt-4 border-t border-white/5">
                   <button 
                     type="submit"
                     disabled={isReportSubmitting || isReportRecording}
                     className="w-full py-3.5 bg-gradient-to-r from-red-600 to-orange-500 text-white rounded-xl font-extrabold transition-all shadow-[0_10px_20px_rgba(239,68,68,0.3)] hover:scale-105 hover:shadow-[0_10px_30px_rgba(239,68,68,0.5)] flex items-center justify-center gap-2 text-[14px] disabled:opacity-70 disabled:hover:scale-100 disabled:cursor-not-allowed"
                   >
                     {isReportSubmitting ? <><Loader2 className="w-5 h-5 animate-spin"/> সাবমিট হচ্ছে...</> : 'অভিযোগ জমা দিন'}
                   </button>
                 </div>
                 
               </form>
            </div>
          </div>
        </div>
      )}

      {/* ================= ২০. প্রিমিয়াম পার্টনার লগইন মডাল [২৬০, ২৯৫] ================= */}
      {isLoginOpen && (
        <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={() => {setIsLoginOpen(false); setLoginPhone(''); setLoginPassword('');}}></div>
          
          <div className="relative w-full max-w-md bg-[#06142E] border border-cyan-500/30 rounded-[32px] shadow-[0_0_50px_rgba(34,211,238,0.15)] overflow-hidden flex flex-col z-10 animate-in zoom-in-95 duration-300">
            
            {/* Glowing Top Border */}
            <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={() => {setIsLoginOpen(false); setLoginPhone(''); setLoginPassword('');}} 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-8 md:p-10">
               <div className="mb-8 text-center">
                 <div className="w-16 h-16 bg-gradient-to-br from-blue-600 to-cyan-400 rounded-2xl mx-auto flex items-center justify-center mb-4 shadow-[0_0_20px_rgba(34,211,238,0.4)] transform rotate-3">
                    <ShieldCheck className="w-8 h-8 text-[#02112A] -rotate-3" />
                 </div>
                 <h2 className="text-2xl font-extrabold text-white mb-2 tracking-tight">
                   পার্টনার পোর্টালে স্বাগতম
                 </h2>
                 <p className="text-[13px] text-cyan-100/60">ড্যাশবোর্ডে প্রবেশ করতে আপনার সঠিক তথ্য দিন</p>
               </div>

               {/* Login Form */}
               <form onSubmit={handlePartnerLogin} className="space-y-5">
                 
                 <div>
                   <label className="text-[12px] font-bold text-gray-400 ml-1 flex items-center gap-1.5 mb-1.5">
                     <Phone className="w-3.5 h-3.5 text-cyan-400"/> লগইন আইডি (ফোন নম্বর)
                   </label>
                   <input 
                     type="text" 
                     required
                     value={loginPhone}
                     onChange={(e) => setLoginPhone(e.target.value)}
                     placeholder="017XX-XXXXXX" 
                     className="w-full bg-[#02112A]/50 border border-white/10 rounded-xl px-4 py-3.5 text-white font-bold tracking-wide focus:border-cyan-500 focus:bg-[#02112A] outline-none transition-all shadow-inner" 
                   />
                 </div>

                 <div>
                   <label className="text-[12px] font-bold text-gray-400 ml-1 flex items-center gap-1.5 mb-1.5">
                     <Lock className="w-3.5 h-3.5 text-cyan-400"/> পাসওয়ার্ড
                   </label>
                   <input 
                     type="password" 
                     required
                     value={loginPassword}
                     onChange={(e) => setLoginPassword(e.target.value)}
                     placeholder="••••••••" 
                     className="w-full bg-[#02112A]/50 border border-white/10 rounded-xl px-4 py-3.5 text-white font-bold tracking-widest focus:border-cyan-500 focus:bg-[#02112A] outline-none transition-all shadow-inner" 
                   />
                 </div>

                 <div className="flex justify-between items-center px-1">
                   <label className="flex items-center gap-2 cursor-pointer group">
                     <input type="checkbox" className="w-3.5 h-3.5 accent-cyan-500 rounded cursor-pointer" />
                     <span className="text-[11px] text-gray-400 group-hover:text-gray-300 font-medium transition-colors">Remember Me</span>
                   </label>
                   <button type="button" onClick={() => {setIsLoginOpen(false); setIsForgotPassOpen(true);}} className="text-[11px] text-cyan-400 hover:text-cyan-300 font-bold hover:underline transition-all">
                     পাসওয়ার্ড ভুলে গেছেন?
                   </button>
                 </div>

                 {/* Submit Button */}
                 <div className="pt-4">
                   <button 
                     type="submit"
                     disabled={isLoggingIn}
                     className="w-full py-4 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 justify-center gap-2 text-[14px] disabled:opacity-70 disabled:hover:scale-100 disabled:cursor-not-allowed"
                   >
                     {isLoggingIn ? <><Loader2 className="w-5 h-5 animate-spin"/> লগইন হচ্ছে...</> : <><LogIn className="w-5 h-5" /> ড্যাশবোর্ডে প্রবেশ করুন</>}
                   </button>
                 </div>
                 
               </form>

               {/* Registration Prompt */}
               <div className="mt-8 text-center border-t border-white/5 pt-6">
                 <p className="text-[11px] text-gray-400">
                   আমাদের পোর্টালে এখনো যুক্ত হননি? <br/>
                   <span className="text-cyan-400 font-bold mt-1 inline-block cursor-pointer hover:underline" onClick={() => {setIsLoginOpen(false);}}>
                     উপরে থাকা রেজিস্ট্রেশন বাটনগুলো ব্যবহার করুন
                   </span>
                 </p>
               </div>

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

      {/* ================= ২১. পাসওয়ার্ড রিকভারি ও OTP ভেরিফিকেশন মডাল ================= */}
      {isForgotPassOpen && (
        <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={() => {setIsForgotPassOpen(false); setForgotStep(1); setOtpPhone(''); setOtpCode(''); setNewPassword('');}}></div>
          
          <div className="relative w-full max-w-md bg-[#06142E] border border-cyan-500/30 rounded-[32px] shadow-[0_0_50px_rgba(34,211,238,0.15)] overflow-hidden flex flex-col z-10 animate-in zoom-in-95 duration-300">
            
            {/* Glowing Top Border */}
            <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={() => {setIsForgotPassOpen(false); setForgotStep(1); setOtpPhone(''); setOtpCode(''); setNewPassword('');}} 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-8 md:p-10">
               <div className="mb-8 text-center">
                 <div className="w-16 h-16 bg-gradient-to-br from-cyan-900 to-[#02112A] border border-cyan-500/30 rounded-full mx-auto flex items-center justify-center mb-4 shadow-[0_0_20px_rgba(34,211,238,0.2)]">
                    <ShieldCheck className="w-8 h-8 text-cyan-400" />
                 </div>
                 <h2 className="text-2xl font-extrabold text-white mb-2 tracking-tight">
                   পাসওয়ার্ড রিকভারি
                 </h2>
                 <p className="text-[12px] text-cyan-100/60">
                   {forgotStep === 1 ? 'আপনার রেজিস্টার্ড ফোন নম্বরটি দিন' : 'আপনার ফোনে পাঠানো ৪-ডিজিটের কোডটি দিন'}
                 </p>
               </div>

               {/* Step 1: Request OTP */}
               {forgotStep === 1 && (
                 <form onSubmit={handleSendOtp} className="space-y-6 animate-in slide-in-from-right-4 duration-300">
                   <div>
                     <label className="text-[12px] font-bold text-gray-400 ml-1 flex items-center gap-1.5 mb-1.5">
                       <Phone className="w-3.5 h-3.5 text-cyan-400"/> রেজিস্টার্ড ফোন নম্বর
                     </label>
                     <input 
                       type="text" 
                       required
                       value={otpPhone}
                       onChange={(e) => setOtpPhone(e.target.value)}
                       placeholder="017XX-XXXXXX" 
                       className="w-full bg-[#02112A]/50 border border-white/10 rounded-xl px-4 py-3.5 text-white font-bold tracking-wide focus:border-cyan-500 focus:bg-[#02112A] outline-none transition-all shadow-inner" 
                     />
                   </div>
                   <button 
                     type="submit"
                     disabled={isSendingOtp}
                     className="w-full py-4 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 justify-center gap-2 text-[13px] disabled:opacity-70 disabled:hover:scale-100 disabled:cursor-not-allowed"
                   >
                     {isSendingOtp ? <><Loader2 className="w-5 h-5 animate-spin"/> কোড পাঠানো হচ্ছে...</> : 'OTP কোড পাঠান'}
                   </button>
                 </form>
               )}

               {/* Step 2: Verify OTP & New Password */}
               {forgotStep === 2 && (
                 <form onSubmit={handleResetPassword} className="space-y-5 animate-in slide-in-from-right-4 duration-300">
                   <div className="bg-green-900/10 border border-green-500/20 p-3 rounded-xl mb-2">
                     <p className="text-[10px] text-green-400 text-center font-bold">
                       {otpPhone} নম্বরে একটি কোড পাঠানো হয়েছে।
                     </p>
                   </div>
                   
                   <div>
                     <label className="text-[12px] font-bold text-gray-400 ml-1 flex items-center gap-1.5 mb-1.5">
                       <ShieldCheck className="w-3.5 h-3.5 text-cyan-400"/> ৪-ডিজিটের OTP কোড
                     </label>
                     <input 
                       type="text" 
                       required
                       value={otpCode}
                       onChange={(e) => setOtpCode(e.target.value)}
                       placeholder="1 2 3 4" 
                       className="w-full bg-cyan-900/10 border border-cyan-500/30 rounded-xl px-4 py-3.5 text-cyan-300 font-extrabold tracking-[0.5em] text-center text-lg 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 flex items-center gap-1.5 mb-1.5">
                       <Lock className="w-3.5 h-3.5 text-cyan-400"/> নতুন পাসওয়ার্ড সেট করুন
                     </label>
                     <input 
                       type="password" 
                       required
                       value={newPassword}
                       onChange={(e) => setNewPassword(e.target.value)}
                       placeholder="নতুন পাসওয়ার্ড দিন" 
                       className="w-full bg-[#02112A]/50 border border-white/10 rounded-xl px-4 py-3.5 text-white font-bold tracking-widest focus:border-cyan-500 focus:bg-[#02112A] outline-none transition-all shadow-inner" 
                     />
                   </div>

                   <button 
                     type="submit"
                     disabled={isResettingPass}
                     className="w-full py-4 mt-2 bg-gradient-to-r from-green-600 to-emerald-400 text-white rounded-xl font-extrabold transition-all shadow-[0_10px_20px_rgba(16,185,129,0.3)] hover:scale-105 hover:shadow-[0_10px_30px_rgba(16,185,129,0.5)] flex items-center justify-center gap-2 text-[13px] disabled:opacity-70 disabled:hover:scale-100 disabled:cursor-not-allowed"
                   >
                     {isResettingPass ? <><Loader2 className="w-5 h-5 animate-spin"/> সেভ হচ্ছে...</> : 'পাসওয়ার্ড পরিবর্তন করুন'}
                   </button>
                 </form>
               )}

               <div className="mt-6 text-center">
                 <button type="button" onClick={() => {setIsForgotPassOpen(false); setIsLoginOpen(true); setForgotStep(1);}} className="text-[11px] text-gray-400 hover:text-white transition-colors">
                   <span className="mr-1">←</span> লগইন পেজে ফিরে যান
                 </button>
               </div>

            </div>
          </div>
        </div>
      )}
      {/* ================= ২৪. আল্ট্রা-মডার্ন ব্লাড ব্যাংক প্রোফাইল মডাল (Cyan/Blue Theme) ================= */}
      {isBloodModalOpen && selectedBloodBank && (
        <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={() => setIsBloodModalOpen(false)}></div>
          
          <div className="relative w-full max-w-lg max-h-[95vh] bg-[#06142E] border border-cyan-500/30 rounded-[32px] shadow-[0_0_50px_rgba(34,211,238,0.15)] overflow-y-auto custom-scrollbar flex flex-col z-10 animate-in zoom-in-95 duration-300">
            
            {/* Glowing Top Border */}
            <div className="absolute top-0 left-1/4 w-1/2 h-1.5 bg-gradient-to-r from-transparent via-cyan-500 to-transparent rounded-full blur-[2px]"></div>
            
            <button onClick={() => setIsBloodModalOpen(false)} className="absolute top-4 right-4 w-10 h-10 bg-white/5 hover:bg-cyan-500/20 text-gray-400 hover:text-cyan-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-8">
               {/* Profile Header */}
               <div className="flex items-start gap-4 mb-6">
                 <div className="w-16 h-16 shrink-0 rounded-2xl bg-cyan-500/10 text-cyan-400 flex items-center justify-center border border-cyan-500/30 shadow-[0_0_15px_rgba(34,211,238,0.15)]">
                   <Droplet className="w-8 h-8" />
                 </div>
                 <div>
                   <div className="flex items-center gap-2 mb-1.5">
                     <span className="text-[10px] font-extrabold bg-cyan-500 text-[#02112A] px-2 py-0.5 rounded-md uppercase tracking-wider">
                       {selectedBloodBank.type}
                     </span>
                     <span className="text-[10px] font-bold text-emerald-400 bg-emerald-400/10 border border-emerald-400/20 px-2 py-0.5 rounded-md flex items-center gap-1">
                       <BadgeCheck className="w-3 h-3"/> ভেরিফাইড
                     </span>
                   </div>
                   <h2 className="text-xl md:text-2xl font-extrabold text-white leading-tight">{selectedBloodBank.name}</h2>
                 </div>
               </div>

               {/* Address & Location */}
               <div className="bg-[#02112A] p-4 rounded-xl border border-white/5 mb-6 flex items-center justify-between">
                 <div>
                   <p className="text-[11px] text-gray-400 mb-1">ঠিকানা / অবস্থান</p>
                   <p className="text-[13px] font-bold text-white flex items-center gap-1.5"><MapPin className="w-4 h-4 text-cyan-400"/> {selectedBloodBank.location}</p>
                 </div>
                 <div className="w-10 h-10 bg-cyan-900/30 rounded-full flex items-center justify-center border border-cyan-500/30 cursor-pointer hover:bg-cyan-500/20 transition-colors" title="ম্যাপে দেখুন">
                   <Navigation2 className="w-5 h-5 text-cyan-400" />
                 </div>
               </div>

               {/* Blood Groups in Stock (TypeScript Error Fixed with :any) */}
               <div className="mb-6 bg-cyan-950/20 p-4 rounded-xl border border-cyan-500/10">
                 <p className="text-[12px] font-bold text-cyan-300 mb-3 flex items-center gap-1.5"><Droplet className="w-4 h-4"/> স্টকে থাকা রক্তের গ্রুপ:</p>
                 <div className="flex flex-wrap gap-2">
                   {selectedBloodBank.available.map((grp: any, i: number) => (
                     <span key={i} className="bg-cyan-500 text-[#02112A] text-[13px] font-extrabold px-4 py-1.5 rounded-lg shadow-lg">
                       {grp}
                     </span>
                   ))}
                 </div>
                 <p className="text-[10px] text-gray-400 mt-3">* স্টকের পরিমাণ যেকোনো সময় পরিবর্তন হতে পারে। যাওয়ার আগে অবশ্যই কল করে কনফার্ম হয়ে নিন।</p>
               </div>

               {/* Dual Contact Buttons */}
               <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 mb-6 pt-4 border-t border-white/5">
                 <button onClick={() => alert(`📞 ${selectedBloodBank.phone} নম্বরে কল করা হচ্ছে...`)} className="w-full py-4 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 flex items-center justify-center gap-2 text-[14px]">
                   <Phone className="w-5 h-5" /> সরাসরি কল করুন
                 </button>
                 <button onClick={() => alert('💬 WhatsApp-এ মেসেজ পাঠানো হচ্ছে...')} className="w-full py-4 bg-[#25D366]/20 hover:bg-[#25D366] text-[#25D366] hover:text-white border border-[#25D366]/50 rounded-xl font-extrabold transition-all flex items-center justify-center gap-2 text-[14px]">
                   <MessageSquare className="w-5 h-5" /> WhatsApp করুন
                 </button>
               </div>

               {/* Report Button */}
               <div className="mt-8 text-center bg-yellow-500/5 p-4 rounded-xl border border-yellow-500/10">
                 <p className="text-[11px] text-gray-400 mb-2">এই ব্লাড ব্যাংক বা ডোনার অর্থের বিনিময়ে রক্ত বিক্রি করতে চাইলে রিপোর্ট করুন</p>
                 <button 
                   onClick={() => {
                     setIsBloodModalOpen(false); 
                     if(typeof setIsReportOpen === 'function') setIsReportOpen(true);
                     else alert("অভিযোগ মডাল ওপেন হবে।");
                   }} 
                   className="text-[12px] text-yellow-500 hover:text-yellow-400 font-bold flex items-center justify-center gap-1.5 mx-auto transition-colors"
                 >
                   <ShieldAlert className="w-4 h-4" /> কর্তৃপক্ষের কাছে অভিযোগ করুন
                 </button>
               </div>

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

    </main>
  );
}