/* Public Health Plus static browser bundle */
const { Activity, AlertCircle, AlertTriangle, Apple, ArrowLeft, ArrowRight, Award, BookOpen, Briefcase, Calendar, Check, CheckCircle, CheckCircle2, Clock, Copy, Download, Droplet, Edit3, ExternalLink, Eye, EyeOff, Facebook, FileCheck2, FileText, Film, Filter, Globe, GraduationCap, HeartHandshake, HeartPulse, ImageIcon, Info, Linkedin, Lock, LogOut, Mail, MapPin, Menu, MessageSquare, Microscope, Newspaper, Phone, Play, Plus, Save, Search, Settings, Share2, Shield, ShieldAlert, ShieldCheck, Sparkles, Stethoscope, Target, Trash2, Twitter, Unlock, User, UserCheck, Users, X, Youtube } = (window.LucideReact || window.lucideReact || {});
const { StrictMode, useState, useEffect, useMemo, useContext, createContext, useCallback, Fragment } = React;

// ===== src/data/initialData.ts =====

const initialDiseases: Disease[] = [
  // Communicable Diseases
  {
    id: 'dengue',
    name: 'Dengue Fever',
    nameUrdu: 'ڈینگی بخار',
    category: 'communicable',
    categoryUrdu: 'متعدی بیماریاں',
    shortSummary: 'A mosquito-borne viral infection causing severe flu-like illness and potentially lethal complications.',
    shortSummaryUrdu: 'مچھر کے کاٹنے سے پھیلنے والی وائرل بیماری جو شدید بخار، ہڈیوں کے درد اور ممکنہ پیچیدگیوں کا سبب بنتی ہے۔',
    overview: 'Dengue is a viral infection transmitted to humans through the bites of infected female Aedes mosquitoes (principally Aedes aegypti). It occurs in tropical and sub-tropical climates worldwide, mostly in urban and semi-urban areas. Severe dengue (dengue hemorrhagic fever) is a leading cause of serious illness and death in some countries.',
    overviewUrdu: 'ڈینگی ایک وائرل انفیکشن ہے جو مادہ ایڈیز مچھر کے کاٹنے سے انسانوں میں پھیلتا ہے۔ یہ بیماری بنیادی طور پر مرطوب اور نیم گرم علاقوں میں تیزی سے پھیلتی ہے۔ اس کی شدت کی صورت میں پلیٹلیٹس کم ہو سکتے ہیں اور شدید خطرہ لاحق ہو سکتا ہے۔',
    symptoms: [
      'High fever (40°C / 104°F) appearing abruptly',
      'Severe headache and retro-orbital (behind the eyes) pain',
      'Severe muscle and joint pains (often called "breakbone fever")',
      'Nausea, vomiting, and loss of appetite',
      'Skin rash appearing 2 to 5 days after the onset of fever',
      'Warning signs of severe dengue: persistent abdominal pain, bleeding gums/nose, mucosal bleeding, severe lethargy'
    ],
    symptomsUrdu: [
      'اچانک تیز بخار (104 فارن ہائیٹ تک)',
      'آنکھوں کے پیچھے شدید درد اور سر درد',
      'ہڈیوں اور پٹھوں میں شدید درد (ہڈی توڑ بخار)',
      'متلی، الٹیاں اور بھوک نہ لگنا',
      'جلد پر سرخ دھبے یا خارش',
      'خطرے کی علامات: پیٹ میں شدید درد، مسوڑھوں یا ناک سے خون بہنا، شدید نقاہت'
    ],
    riskFactors: [
      'Living in or traveling to tropical and subtropical urban environments',
      'Presence of stagnant clean water in household containers, pots, or tires where Aedes mosquitoes breed',
      'Previous infection with a different dengue virus serotype increases risk of severe dengue',
      'Lack of mosquito screening, nets, or repellents'
    ],
    riskFactorsUrdu: [
      'مرطوب، گرم اور شہری کچی آبادیوں میں رہائش یا سفر',
      'گھروں میں، گملوں یا ٹائروں میں صاف پانی کا کھڑا رہنا جہاں ایڈیز مچھر انڈے دیتا ہے',
      'پہلے سے ڈینگی کے کسی دوسرے وائرس سے متاثر ہونا',
      'مچھر دانی یا اسپرے کے بغیر رہنا'
    ],
    prevention: [
      'Eliminate mosquito breeding sites by emptying and covering water storage containers weekly',
      'Dispose of solid waste properly and remove artificial man-made habitats that hold water',
      'Apply mosquito repellents containing DEET, Picaridin, or IR3535 to exposed skin',
      'Wear long-sleeved light-colored clothing covering arms and legs',
      'Use window screens and insecticide-treated bed nets during daytime'
    ],
    preventionUrdu: [
      'گھروں میں اور اردگرد پانی کے برتن، کولر اور گملے ہر ہفتے خالی اور صاف کریں',
      'ایسی تمام اشیاء ضائع کریں جن میں بارش یا صاف پانی کھڑا ہو سکتا ہے',
      'مچھر بھگانے والے لوشن (DEET یا Picaridin) کا کھلی جلد پر استعمال',
      'پوری آستین والے اور ہلکے رنگ کے کپڑے پہننا',
      'کھڑکیوں اور دروازوں پر جالیوں کا استعمال'
    ],
    testing: 'Dengue NS1 Antigen test (accurate within the first 5 days of illness), Dengue IgM/IgG antibodies (after day 5), and Complete Blood Count (CBC) to monitor platelet count and hematocrit levels.',
    testingUrdu: 'پہلے 5 دنوں میں این ایس 1 (NS1) اینٹی جن ٹیسٹ، پانچویں دن کے بعد آئی جی ایم (IgM) اینٹی باڈی ٹیسٹ، اور پلیٹلیٹس اور خون کے گاڑھے پن کی جانچ کے لیے سی بی سی (CBC) ٹیسٹ۔',
    treatment: 'There is no specific antiviral medicine for dengue. Supportive therapy is crucial: maintaining oral hydration (ORS, clean water, soups), fever control using Paracetamol (AVOID Aspirin and Ibuprofen as they exacerbate bleeding risk), and immediate hospitalization if warning signs appear.',
    treatmentUrdu: 'ڈینگی کا کوئی خاص اینٹی وائرل علاج موجود نہیں ہے۔ بروقت دیکھ بھال اور پانی کی کمی نہ ہونے دینا (او آر ایس، پانی، سوپ) سب سے اہم ہے۔ بخار کے لیے صرف پیراسیٹامول استعمال کریں (ڈسپرین، بروفین ہرگز نہ لیں کیونکہ یہ خون بہنے کا خطرہ بڑھاتی ہیں)۔',
    resources: [
      { title: 'WHO Dengue and Severe Dengue Fact Sheet', link: 'https://www.who.int/news-room/fact-sheets/detail/dengue-and-severe-dengue', type: 'Clinical Guidelines' },
      { title: 'CDC Dengue Clinical Guidance for Healthcare Providers', link: 'https://www.cdc.gov/dengue/healthcare-providers/index.html', type: 'Provider Protocol' }
    ],
    references: [
      { title: 'Global Strategy for Dengue Prevention and Control', source: 'World Health Organization', year: '2021-2030' },
      { title: 'Clinical Management of Dengue in Primary and Secondary Care', source: 'Ministry of National Health Services', year: '2024' }
    ],
    isFeatured: true,
    published: true,
    updatedAt: '2026-06-15'
  },
  {
    id: 'malaria',
    name: 'Malaria',
    nameUrdu: 'ملیریا',
    category: 'communicable',
    categoryUrdu: 'متعدی بیماریاں',
    shortSummary: 'A life-threatening disease caused by Plasmodium parasites transmitted through bites of infected female Anopheles mosquitoes.',
    shortSummaryUrdu: 'پلازموڈیم طفیلیوں کی وجہ سے ہونے والی بیماری جو اینوفیلیز مچھر کے کاٹنے سے منتقل ہوتی ہے اور بروقت علاج نہ ہونے پر جان لیوا ہو سکتی ہے۔',
    overview: 'Malaria is caused by Plasmodium parasites (primarily P. falciparum and P. vivax) transmitted to people through bites of infected female Anopheles mosquitoes. It is preventable and curable, yet remains a leading cause of morbidity in endemic regions.',
    overviewUrdu: 'ملیریا مادہ اینوفیلیز مچھر کے ذریعے پلازموڈیم کے طفیلیوں سے پھیلتا ہے۔ یہ ایک قابلِ علاج اور قابلِ بچاؤ بیماری ہے، لیکن لاپرواہی کی صورت میں شدید پیچیدگیاں پیدا کر سکتی ہے۔',
    symptoms: [
      'Periodic high fevers with severe chills and shivering',
      'Profuse sweating as fever breaks',
      'Headache, generalized body aches, and fatigue',
      'Nausea, vomiting, and diarrhea in children',
      'Severe complications: cerebral malaria, severe anemia, and organ failure'
    ],
    symptomsUrdu: [
      'کپکپی اور سردی کے ساتھ رک رک کر آنے والا تیز بخار',
      'بخار اترنے پر شدید پسینہ آنا',
      'سر درد، شدید جسمانی درد اور تھکن',
      'بچوں میں قے، متلی اور اسہال',
      'شدید ملیریا کی صورت میں بے ہوشی اور خون کی شدید کمی'
    ],
    riskFactors: [
      'Residence in or travel to malaria-endemic regions',
      'Pregnant women, infants, and children under 5 are at highest risk of severe malaria',
      'Proximity to standing agricultural or dirty water collections where Anopheles breed'
    ],
    riskFactorsUrdu: [
      'ملیریا سے متاثرہ علاقوں میں رہائش یا سفر',
      'حاملہ خواتین اور 5 سال سے کم عمر بچے زیادہ خطرے میں ہیں',
      'کھڑے گندے یا زرعی پانی کے تالابوں کے قریب رہائش'
    ],
    prevention: [
      'Sleeping under long-lasting insecticide-treated mosquito nets (LLINs)',
      'Indoor residual spraying (IRS) with insecticides',
      'Preventive antimalarial chemoprophylaxis for high-risk travelers and pregnant women',
      'Draining stagnant water puddles near residential dwellings'
    ],
    preventionUrdu: [
      'کیڑے مار دوا سے لیس مچھر دانیوں کا مستقل استعمال',
      'گھروں میں انسدادِ مچھر اسپرے کروانا',
      'حاملہ خواتین اور مسافروں کے لیے حفاظتی ادویات',
      'رہائشی آبادی کے قریب کھڑے پانی کی نکاسی'
    ],
    testing: 'Rapid Diagnostic Tests (RDTs) for malaria antigens, and Giemsa-stained microscopic blood film examination (thick and thin smears).',
    testingUrdu: 'ریپڈ ڈائیگنوسٹک ٹیسٹ (RDT) اور مائیکروسکوپ کے ذریعے خون کا تفصیلی معائنہ (تھک اور تھن بلڈ فلم)۔',
    treatment: 'Artemisinin-based combination therapies (ACTs) are the gold standard for uncomplicated P. falciparum malaria. Chloroquine or Primaquine are used for P. vivax under medical supervision.',
    treatmentUrdu: 'ڈاکٹر کے مشورے سے آرٹیمیسینین پر مبنی ادویات (ACT) اور وائی ویکس کے لیے کلوروکوئین اور پرائماکوئین کا مکمل کورس۔',
    resources: [
      { title: 'WHO World Malaria Report & Guidelines', link: 'https://www.who.int/teams/global-malaria-programme', type: 'Public Report' }
    ],
    references: [
      { title: 'Guidelines for the Treatment of Malaria (3rd edition)', source: 'World Health Organization', year: '2023' }
    ],
    published: true,
    updatedAt: '2026-05-10'
  },
  {
    id: 'tuberculosis',
    name: 'Tuberculosis (TB)',
    nameUrdu: 'تپِ دق (ٹی بی)',
    category: 'communicable',
    categoryUrdu: 'متعدی بیماریاں',
    shortSummary: 'A bacterial infection spread through airborne droplets that primarily affects the lungs but can damage other organs.',
    shortSummaryUrdu: 'ایک بیکٹیریل انفیکشن جو ہوا کے ذریعے کھانسی اور چھینکوں سے پھیلتا ہے اور بنیادی طور پر پھیپھڑوں کو متاثر کرتا ہے۔',
    overview: 'Tuberculosis is caused by the bacterium Mycobacterium tuberculosis. When people with active pulmonary TB cough, sneeze, or spit, they propel TB germs into the air. TB is curable with a standard 6-month regimen of antimicrobial drugs.',
    overviewUrdu: 'ٹی بی مائیکوبیکٹیریم ٹیوبرکلوسس نامی جراثیم سے ہوتی ہے۔ جب مریض کھانستا یا چھینکتا ہے تو یہ ہوا میں پھیلتی ہے۔ باقاعدہ 6 ماہ کے مکمل علاج سے یہ 100 فیصد قابلِ علاج ہے۔',
    symptoms: [
      'Persistent cough lasting 2 to 3 weeks or longer',
      'Coughing up blood or rust-colored sputum (hemoptysis)',
      'Chest pain and breathlessness',
      'Unexplained weight loss and loss of appetite',
      'Night sweats and low-grade evening fevers',
      'Persistent fatigue and generalized weakness'
    ],
    symptomsUrdu: [
      '2 سے 3 ہفتے یا اس سے زائد مسلسل کھانسی',
      'بلغم کے ساتھ خون آنا',
      'سینے میں درد اور سانس لینے میں دشواری',
      'تیزی سے وزن کم ہونا اور بھوک ختم ہونا',
      'رات کو پسینہ آنا اور ہلکا بخار رہنا',
      'شدید نقاہت اور کمزوری'
    ],
    riskFactors: [
      'Weakened immune system (HIV infection, malnutrition, diabetes, immunosuppressants)',
      'Living in overcrowded, poorly ventilated housing',
      'Tobacco smoking and heavy alcohol consumption',
      'Close contact with someone who has untreated active pulmonary TB'
    ],
    riskFactorsUrdu: [
      'کمزور قوتِ مدافعت (شوگر، ایچ آئی وی، یا غذائی کمی)',
      'تنگ اور بند مکانات جہاں تازہ ہوا کا گزر نہ ہو',
      'تمباکو نوشی اور سگریٹ نوشی',
      'ٹی بی کے زیرِ علاج نہ ہونے والے مریض کے ساتھ قریبی رابطہ'
    ],
    prevention: [
      'BCG vaccination administered to newborns and infants',
      'Early detection and full completion of treatment for active cases (DOTS therapy)',
      'Adequate natural ventilation and sunlight in living spaces',
      'Cough etiquette: covering mouth and nose when coughing'
    ],
    preventionUrdu: [
      'پیدائش کے وقت بچوں کو بی سی جی (BCG) ویکسین لگوانا',
      'مریض کا بر وقت معائنہ اور علاج کا مکمل 6 ماہ کا کورس (DOTS)',
      'کمروں میں کھڑکیاں کھلی رکھنا اور دھوپ کا انتظام',
      'کھانستے وقت منہ پر رومال رکھنا'
    ],
    testing: 'Sputum GeneXpert (molecular testing for TB and Rifampicin resistance), Sputum Smear Microscopy, and Chest X-ray.',
    testingUrdu: 'بلغم کا جین ایکسپرٹ (GeneXpert) ٹیسٹ، مائیکروسکوپی اور سینے کا ایکسرے۔',
    treatment: 'Directly Observed Therapy (DOTS) using standard first-line antitubercular regimen: Isoniazid, Rifampicin, Pyrazinamide, and Ethambutol for 6 months. Never stop medicines midway.',
    treatmentUrdu: 'چھ ماہ کا باقاعدہ اینٹی ٹی بی ادویات کا کورس (DOTS)۔ ادویات کو درمیان میں روکنا خطرناک پیچیدگیوں (MDR-TB) کا باعث بنتا ہے۔',
    resources: [
      { title: 'National TB Control Program Guidelines', link: 'https://www.who.int/teams/global-tuberculosis-programme', type: 'National Guidelines' }
    ],
    references: [
      { title: 'Global Tuberculosis Report', source: 'World Health Organization', year: '2024' }
    ],
    isFeatured: true,
    published: true,
    updatedAt: '2026-06-20'
  },
  {
    id: 'hepatitis',
    name: 'Viral Hepatitis (A, B, C)',
    nameUrdu: 'وائرل ہیپاٹائٹس (یرقان)',
    category: 'communicable',
    categoryUrdu: 'متعدی بیماریاں',
    shortSummary: 'Inflammation of the liver caused by viral infections (Hepatitis A, B, C, D, E), leading to acute jaundice or chronic cirrhosis.',
    shortSummaryUrdu: 'جگر کی سوزش جو ہیپاٹائٹس وائرس کے ذریعے پھیلتی ہے اور کالا یرقان یا جگر کے سکڑنے کا سبب بن سکتی ہے۔',
    overview: 'Viral hepatitis encompasses five main strains. Hepatitis A and E are spread mainly through contaminated food and water. Hepatitis B and C are blood-borne pathogens transmitted through unsafe injections, unsterilized surgical/dental instruments, and mother-to-child transmission.',
    overviewUrdu: 'ہیپاٹائٹس جگر کی سوزش کا نام ہے۔ ہیپاٹائٹس اے اور ای آلودہ پانی اور کھانے سے پھیلتے ہیں، جبکہ بی اور سی خون، غیر محفوظ انجیکشن، اور غیر جراثیم سے پاک آلات کے ذریعے پھیلتے ہیں۔',
    symptoms: [
      'Yellowing of skin and eyes (jaundice)',
      'Dark amber urine and pale/clay-colored stools',
      'Severe abdominal pain in the upper right quadrant',
      'Chronic fatigue, loss of appetite, and nausea',
      'Chronic stages may remain asymptomatic for years until liver cirrhosis develops'
    ],
    symptomsUrdu: [
      'آنکھوں اور جلد کی رنگت زرد ہونا (یرقان)',
      'پیشاب کا گہرا پیلا ہونا اور پاخانے کی رنگت تبدیل ہونا',
      'پیٹ کے اوپری دائیں حصے میں درد',
      'مسلسل تھکن، متلی اور بھوک نہ لگنا',
      'کالا یرقان کئی سال بغیر علامت کے رہ سکتا ہے جب تک جگر کو نقصان نہ پہنچے'
    ],
    riskFactors: [
      'Use of unsterilized syringes, needles, dental or surgical tools, and barber blades',
      'Transfusion of unscreened blood or blood products',
      'Drinking unsafe, contaminated municipal water (Hep A & E)',
      'Unprotected sexual contact with infected individuals'
    ],
    riskFactorsUrdu: [
      'پرانی یا غیر محفوظ سرنجوں کا استعمال، نائی کا ایک ہی بلیڈ دہرانا',
      'بغیر ٹیسٹ شدہ خون لگوانا',
      'آلودہ پانی اور غیر معیاری کھانے کا استعمال',
      'دانتوں اور جراحی کے آلات کی ناکافی صفائی'
    ],
    prevention: [
      'Hepatitis B vaccination (compulsory for all infants at birth)',
      'Insist on new disposable syringes opened in front of you for every injection',
      'Use only screened blood and sterilized medical/dental instruments',
      'Boil drinking water and practice hand hygiene before food preparation'
    ],
    preventionUrdu: [
      'ہیپاٹائٹس بی کی حفاظتی ویکسینیشن مکمل کروانا',
      'ہمیشہ نئی اور سیل بند سرنج کا استعمال یقینی بنانا',
      'نائی کے پاس اپنا شیونگ کٹ لے جانا یا نیا بلیڈ استعمال کروانا',
      'پینے کے پانی کو ابال کر استعمال کرنا'
    ],
    testing: 'HBsAg (for Hep B), Anti-HCV (for Hep C), Liver Function Tests (LFTs/ALT/AST), and HCV RNA PCR viral load.',
    testingUrdu: 'ایچ بی ایس اینٹی جن (HBsAg)، اینٹی ایچ سی وی (Anti-HCV)، ایل ایف ٹی (LFTs) اور پی سی آر (PCR) ٹیسٹ۔',
    treatment: 'Hepatitis C is now 95%+ curable with 12-week Direct-Acting Antiviral (DAA) tablets (Sofosbuvir/Daclatasvir). Hepatitis B is managed with lifelong antiviral therapy.',
    treatmentUrdu: 'ہیپاٹائٹس سی اب 12 ہفتوں کی جدید ادویات (DAAs) سے مکمل طور پر قابلِ علاج ہے۔ ہیپاٹائٹس بی کے لیے باقاعدہ نگہداشت ضروری ہے۔',
    resources: [
      { title: 'Global Hepatitis Report and Elimination Roadmap', link: 'https://www.who.int/teams/global-hiv-hepatitis-and-stis-programmes/hepatitis', type: 'Global Roadmap' }
    ],
    references: [
      { title: 'Guidelines for the Care and Treatment of Persons Diagnosed with Chronic Hepatitis C', source: 'WHO', year: '2024' }
    ],
    published: true,
    updatedAt: '2026-05-18'
  },
  {
    id: 'typhoid',
    name: 'Typhoid & Extensively Drug-Resistant (XDR) Typhoid',
    nameUrdu: 'ٹائیفائیڈ بخار اور ایکس ڈی آر ٹائیفائیڈ',
    category: 'communicable',
    categoryUrdu: 'متعدی بیماریاں',
    shortSummary: 'A life-threatening systemic infection caused by Salmonella Typhi, transmitted through contaminated food and water.',
    shortSummaryUrdu: 'سلمونیلا ٹائفی بیکٹیریا سے پھیلنے والا شدید انفیکشن جو آلودہ پانی اور ناقص خوراک کے ذریعے منتقل ہوتا ہے۔',
    overview: 'Typhoid fever is a multisystemic bacterial infection caused by Salmonella enterica serotype Typhi. In South Asia, the emergence of Extensively Drug-Resistant (XDR) strains poses a major public health challenge requiring specialized antibiotics and vaccination.',
    overviewUrdu: 'ٹائیفائیڈ آلودہ پانی اور کھانے سے پھیلتا ہے۔ حالیہ برسوں میں ایکس ڈی آر (XDR) ٹائیفائیڈ کا پھیلاؤ عام ادویات کو غیر موثر بنا رہا ہے، جس کے لیے ٹائیفائیڈ ویکسین (TCV) اور صفائی ناگزیر ہے۔',
    symptoms: [
      'Step-ladder pattern high-grade fever lasting days to weeks',
      'Severe headache, malaise, and generalized weakness',
      'Abdominal pain, constipation initially, followed by watery diarrhea',
      'Coated white tongue and enlarged spleen (splenomegaly)',
      'Rose spots rash on chest and abdomen'
    ],
    symptomsUrdu: [
      'مسلسل اور چڑھتا ہوا تیز بخار جو دنوں تک رہے',
      'سر درد، بے چینی اور شدید نقاہت',
      'پیٹ میں شدید مروڑ اور درد، قبض یا دست',
      'زبان پر سفید تہہ جمنا اور جگر یا تلی کا بڑھنا',
      'پیٹ اور سینے پر ہلکے گلابی دھبے'
    ],
    riskFactors: [
      'Consuming tap water or street food prepared with unboiled, contaminated water',
      'Lack of proper handwashing after using the toilet',
      'Living in areas with broken municipal sewage infrastructure'
    ],
    riskFactorsUrdu: [
      'ابلے بغیر نلکے کا پانی پینا اور غیر معیاری کھانے کھانا',
      'بیت الخلاء کے استعمال کے بعد صابن سے ہاتھ نہ دھونا',
      'پینے کے پانی اور گندے نالوں کا آپس میں مل جانا'
    ],
    prevention: [
      'Typhoid Conjugate Vaccine (TCV) administration for children and vulnerable populations',
      'Drink only boiled or certified chlorinated clean water',
      'Thorough handwashing with soap for 20 seconds before eating and cooking',
      'Eat hot, thoroughly cooked foods and avoid raw unpeeled vegetables/fruits from street vendors'
    ],
    preventionUrdu: [
      'ٹائیفائیڈ کنجوگیٹ ویکسین (TCV) لازمی لگوائیں',
      'ہمیشہ ابلا ہوا یا کلورین ملا صاف پانی پئیں',
      'کھانے سے پہلے اور بیت الخلاء کے بعد ہاتھ صابن سے 20 سیکنڈ تک دھوئیں',
      'گرم اور تازہ پکا ہوا کھانا کھائیں'
    ],
    testing: 'Blood culture (gold standard in week 1), Typhidot / Bone marrow culture. (Widal test is often non-specific and discouraged).',
    testingUrdu: 'بلڈ کلچر (Blood Culture) سب سے مستند ٹیسٹ ہے۔ (وڈال ٹیسٹ اکثر غیر ضروری ہوتا ہے)۔',
    treatment: 'Targeted antibiotic therapy based on culture sensitivity (Azithromycin, Meropenem for XDR strains) under strict medical supervision.',
    treatmentUrdu: 'بلڈ کلچر رپورٹ کے مطابق ڈاکٹر کے مشورے سے مخصوص اینٹی بائیوٹکس کا مکمل کورس۔ خود سے ادویات لینا نقصان دہ ہے۔',
    resources: [
      { title: 'TCV Vaccination Strategic Advisory Group Guide', link: 'https://www.who.int/teams/immunization-vaccines-and-biologicals', type: 'Vaccine Strategy' }
    ],
    references: [
      { title: 'Management of Extensively Drug-Resistant Typhoid Fever', source: 'The Lancet Infectious Diseases', year: '2023' }
    ],
    published: true,
    updatedAt: '2026-04-12'
  },
  {
    id: 'cchf',
    name: 'Crimean-Congo Haemorrhagic Fever (CCHF)',
    nameUrdu: 'کانگو وائرس (CCHF)',
    category: 'communicable',
    categoryUrdu: 'متعدی بیماریاں',
    shortSummary: 'A severe tick-borne viral zoonotic disease with high fatality, transmitted through Hyalomma ticks and contact with viremic animal blood/tissues.',
    shortSummaryUrdu: 'ایک خطرناک وائرل بیماری جو چیچڑی (Tick) کے کاٹنے یا قربانی اور بیمار جانوروں کے خون اور گوشت کو چھونے سے پھیلتی ہے۔',
    overview: 'Crimean-Congo haemorrhagic fever (CCHF) is caused by a tick-borne bunyavirus (Nairovirus). Case fatality rates range from 10% to 40%. It is primarily transmitted by Hyalomma ticks or through contact with infected animal blood/fluids during slaughtering and handling.',
    overviewUrdu: 'کانگو وائرس چیچڑیوں کے کاٹنے یا متاثرہ مویشیوں کے خون و جسمانی رطوبتوں کے رابطے سے پھیلتا ہے۔ عید الاضحیٰ اور مویشی منڈیوں کے دوران اس کے پھیلاؤ کا خطرہ بڑھ جاتا ہے۔',
    symptoms: [
      'Sudden onset of high fever, dizziness, neck pain and stiffness, backache, and sore eyes',
      'Severe photophobia (sensitivity to light) and nausea/vomiting',
      'Bleeding manifestations after day 4: petechiae, ecchymoses (large bruises), epistaxis (nosebleeds), and gastrointestinal bleeding',
      'Rapid hepatomegaly, splenomegaly, and multiorgan failure in severe cases'
    ],
    symptomsUrdu: [
      'اچانک تیز بخار، چکر آنا، گردن میں اکڑاؤ اور شدید پٹھوں کا درد',
      'روشنی سے آنکھوں میں چبھن اور قے',
      'چوتھے دن کے بعد جسم سے خون کا اخراج، مسوڑھوں، ناک اور پاخانے میں خون',
      'شدید سستی اور جگر و گردوں کا کام چھوڑ دینا'
    ],
    riskFactors: [
      'Handling livestock, abattoir workers, butchers, and veterinarians',
      'Visiting animal markets without protective clothing',
      'Direct contact with blood or bodily secretions of infected patients without PPE'
    ],
    riskFactorsUrdu: [
      'مویشیوں کی دیکھ بھال، قصائی اور جانوروں کے باڑوں میں کام کرنے والے افراد',
      'بغیر دستانے اور بغیر حفاظتی لباس مویشی منڈیوں کا دورہ کرنا',
      'متاثرہ مریض کی دیکھ بھال کے دوران بے احتیاطی'
    ],
    prevention: [
      'Wear light-colored clothing (to detect ticks easily) covering arms and legs',
      'Apply acaricides/repellents containing DEET to skin and Permethrin to clothing',
      'Wear gloves, face shields, and protective aprons when slaughtering or handling animal blood',
      'Avoid crushing ticks with bare fingers'
    ],
    preventionUrdu: [
      'مویشی منڈی جاتے وقت ہلکے رنگ کے مکمل ڈھکے ہوئے کپڑے اور جوتے پہننا',
      'جانوروں کو ذبح کرتے وقت اور گوشت بناتے وقت دستانے پہننا',
      'جانوروں کی کھال پر لگی چیچڑیوں کو ننگے ہاتھ سے نہ مسلنا',
      'مویشیوں پر چیچڑی مار اسپرے کروانا'
    ],
    testing: 'RT-PCR for viral RNA (in specialized biocontainment biosafety level 3/4 laboratories), ELISA for IgG and IgM antibodies.',
    testingUrdu: 'پی سی آر (RT-PCR) اور اینٹی باڈی ٹیسٹ (ELISA)۔',
    treatment: 'Intensive supportive care (platelet/plasma transfusions) and antiviral drug Ribavirin (both oral and intravenous) under strict isolation protocol.',
    treatmentUrdu: 'آئسولیشن وارڈ میں مکمل نگہداشت، پلیٹلیٹس کی فراہمی اور رائباویرن اینٹی وائرل دوا۔',
    resources: [
      { title: 'WHO CCHF Surveillance and Infection Control', link: 'https://www.who.int/news-room/fact-sheets/detail/crimean-congo-haemorrhagic-fever', type: 'Surveillance' }
    ],
    references: [
      { title: 'Guidelines for the Prevention and Management of CCHF', source: 'National Institute of Health', year: '2024' }
    ],
    published: true,
    updatedAt: '2026-06-01'
  },
  {
    id: 'chikungunya',
    name: 'Chikungunya',
    nameUrdu: 'چکن گونیا',
    category: 'communicable',
    categoryUrdu: 'متعدی بیماریاں',
    shortSummary: 'A viral disease transmitted to humans by infected mosquitoes causing severe debilitating joint pain.',
    shortSummaryUrdu: 'مچھروں سے پھیلنے والی وائرل بیماری جس میں تیز بخار اور جوڑوں میں شدید اور دیرپا درد ہوتا ہے۔',
    overview: 'Chikungunya is caused by the Chikungunya virus (CHIKV) transmitted by Aedes aegypti and Aedes albopictus mosquitoes. While rarely fatal, the severe arthralgia (joint pain) can persist for months or years, impacting quality of life significantly.',
    overviewUrdu: 'چکن گونیا ایڈیز مچھر کے کاٹنے سے پھیلتا ہے۔ اس بیماری میں جوڑوں کا شدید درد کئی ہفتوں یا مہینوں تک برقرار رہ سکتا ہے۔',
    symptoms: [
      'Abrupt onset of high fever and severe, often debilitating joint pain (polyarthralgia)',
      'Joint swelling (especially hands, wrists, ankles, and knees)',
      'Maculopapular rash on trunk and limbs',
      'Fatigue, headache, and muscle pain'
    ],
    symptomsUrdu: [
      'اچانک تیز بخار اور جوڑوں کا شدید درد جو نقل و حرکت مشکل بنا دے',
      'ہاتھوں، کلائیوں، ٹخنوں اور گھٹنوں میں سوجن',
      'جسم پر سرخ دانے یا خارش',
      'شدید جسمانی تھکن اور پٹھوں کا درد'
    ],
    riskFactors: ['Exposure to daytime biting Aedes mosquitoes in endemic neighborhoods.'],
    riskFactorsUrdu: ['دن کے وقت مچھر کے کاٹنے سے لاپرواہی برتنا۔'],
    prevention: ['Vector control, discarding stagnant water, wearing long clothing and applying repellent.'],
    preventionUrdu: ['مچھروں کی روک تھام، کھڑے پانی کو ختم کرنا اور مچھر بھگاؤ لوشن کا استعمال۔'],
    testing: 'Serological tests (ELISA for IgM/IgG) and RT-PCR within first 7 days.',
    testingUrdu: 'خون کا آر ٹی پی سی آر (RT-PCR) اور اینٹی باڈی ٹیسٹ۔',
    treatment: 'Symptomatic relief with hydration, rest, Paracetamol, and physical therapy for lingering joint stiffness.',
    treatmentUrdu: 'آرام، وافر مقدار میں پانی اور پیراسیٹامول کا استعمال۔',
    resources: [{ title: 'WHO Chikungunya Fact Sheet', link: 'https://www.who.int', type: 'Public Advisory' }],
    references: [{ title: 'Clinical Management of Chikungunya Virus', source: 'CDC Guidelines', year: '2023' }],
    published: true,
    updatedAt: '2026-03-25'
  },
  {
    id: 'hiv-aids',
    name: 'HIV / AIDS',
    nameUrdu: 'ایچ آئی وی / ایڈز',
    category: 'communicable',
    categoryUrdu: 'متعدی بیماریاں',
    shortSummary: 'Human Immunodeficiency Virus that targets the immune system, manageable with lifelong Antiretroviral Therapy (ART).',
    shortSummaryUrdu: 'انسانی قوتِ مدافعت کو متاثر کرنے والا وائرس، جس پر اینٹی ریٹرو وائرل تھراپی (ART) کے ذریعے مکمل قابو پایا جا سکتا ہے۔',
    overview: 'HIV infects cells of the immune system, destroying CD4 cells. Advanced HIV is termed Acquired Immunodeficiency Syndrome (AIDS). With modern Antiretroviral Therapy (ART), individuals with HIV achieve viral suppression (Undetectable = Untransmittable) and lead long, healthy lives.',
    overviewUrdu: 'ایچ آئی وی جسم کے مدافعتی نظام کو کمزور کرتا ہے۔ جدید ادویات (ART) کی بدولت اب یہ مرض مکمل طور پر قابو میں رکھا جا سکتا ہے اور مریض صحت مند زندگی گزار سکتے ہیں۔',
    symptoms: [
      'Acute phase (2-4 weeks): flu-like illness with fever, throat inflammation, lymph node swelling',
      'Chronic phase: often asymptomatic for years',
      'Advanced phase: severe weight loss, chronic diarrhea, persistent oral thrush, recurrent opportunistic infections'
    ],
    symptomsUrdu: [
      'ابتدائی مرحلے میں فلو جیسے علامات، گلے میں سوزش اور غدود کا سوجنا',
      'درمیانی مدت میں سالوں تک بظاہر علامات کا نہ ہونا',
      'پیچیدہ مرحلے میں تیزی سے وزن گرنا، دائمی اسہال اور بار بار انفیکشن ہونا'
    ],
    riskFactors: [
      'Reusing contaminated needles and syringes',
      'Unscreened blood transfusions',
      'Mother-to-child transmission during pregnancy or delivery without ART'
    ],
    riskFactorsUrdu: [
      'استعمال شدہ سرنجوں کا دوبارہ استعمال',
      'غیر تصدیق شدہ خون کا لگوانا',
      'حمل یا پیدائش کے وقت ماں سے بچے کو منتقلی'
    ],
    prevention: [
      'Universal screening of blood donations',
      'Single-use sterile syringes and Harm Reduction services',
      'Prevention of Parent-To-Child Transmission (PPTCT) protocols',
      'Pre-Exposure Prophylaxis (PrEP) and Post-Exposure Prophylaxis (PEP)'
    ],
    preventionUrdu: [
      'خون کے عطیات کی مکمل جانچ پڑتال',
      'صرف نئی اور جراثیم سے پاک سرنجوں کا استعمال',
      'حاملہ خواتین کی لازمی اسکریننگ اور حفاظتی علاج'
    ],
    testing: 'Rapid HIV Antibody/Antigen test with confirmatory ELISA and Western Blot / PCR.',
    testingUrdu: 'خون کا تیز رفتار اسکریننگ اور پی سی آر ٹیسٹ۔',
    treatment: 'Lifelong Antiretroviral Therapy (ART) provided free of cost at national treatment centers.',
    treatmentUrdu: 'حکومتی مراکز سے اینٹی ریٹرو وائرل (ART) ادویات کا باقاعدہ اور مفت علاج۔',
    resources: [{ title: 'UNAIDS Fast-Track Strategy', link: 'https://www.unaids.org', type: 'Global Strategy' }],
    references: [{ title: 'Consolidated Guidelines on HIV Prevention, Testing and Treatment', source: 'WHO', year: '2024' }],
    published: true,
    updatedAt: '2026-05-30'
  },

  // Non-Communicable Diseases
  {
    id: 'diabetes',
    name: 'Diabetes Mellitus (Type 1 & 2)',
    nameUrdu: 'ذیابیطس (شوگر)',
    category: 'non-communicable',
    categoryUrdu: 'غیر متعدی امراض',
    shortSummary: 'A chronic metabolic disease characterized by elevated levels of blood glucose, leading over time to serious damage to heart, blood vessels, eyes, kidneys and nerves.',
    shortSummaryUrdu: 'ایک دائمی میٹابولک بیماری جس میں خون میں شکر کی مقدار بڑھ جاتی ہے اور علاج نہ ہونے پر دل، گردوں اور آنکھوں کو نقصان پہنچاتی ہے۔',
    overview: 'Diabetes occurs either when the pancreas does not produce enough insulin (Type 1) or when the body cannot effectively use the insulin it produces (Type 2). Over 90% of all cases worldwide are Type 2 diabetes, heavily influenced by physical inactivity and dietary patterns.',
    overviewUrdu: 'ذیابیطس اس وقت ہوتی ہے جب لبلبہ انسولین نہ بنائے یا جسم انسولین کو صحیح استعمال نہ کر سکے۔ ٹائپ 2 شوگر زیادہ تر غیر متحرک طرز زندگی، موٹاپے اور غیر متوازن خوراک سے پیدا ہوتی ہے۔',
    symptoms: [
      'Excessive thirst (polydipsia) and dry mouth',
      'Frequent urination (polyuria), especially waking up at night',
      'Unexplained weight loss despite increased hunger (polyphagia)',
      'Persistent fatigue and generalized sluggishness',
      'Blurred vision',
      'Slow-healing cuts, sores, or frequent skin infections'
    ],
    symptomsUrdu: [
      'بار بار پیاس لگنا اور گلا خشک ہونا',
      'بار بار پیشاب آنا، خصوصاً رات کے وقت',
      'اچانک وزن میں کمی آنا',
      'مسلسل سستی اور کمزوری',
      'نظر کی دھندلاہٹ',
      'زخموں کا دیر سے بھرنا اور جلد کے انفیکشن'
    ],
    riskFactors: [
      'Overweight / obesity (BMI ≥ 25 kg/m² or high waist-to-hip ratio)',
      'Physical inactivity (sedentary lifestyle)',
      'Family history of diabetes in first-degree relatives',
      'High intake of refined carbohydrates, sugary beverages, and processed foods',
      'Age ≥ 35 years and history of gestational diabetes'
    ],
    riskFactorsUrdu: [
      'موٹاپا اور پیٹ پر چربی کی زیادتی',
      'ورزش نہ کرنا اور سست طرزِ زندگی',
      'خاندان میں والدین یا بہن بھائیوں کو شوگر ہونا',
      'میٹھے مشروبات، بیکری آئٹمز اور پراسیسڈ کھانوں کی زیادتی',
      '35 سال سے زائد عمر اور بلڈ پریشر کی زیادتی'
    ],
    prevention: [
      'Engage in at least 150 minutes of moderate aerobic exercise per week (brisk walking, cycling)',
      'Adopt a balanced diet rich in dietary fiber, legumes, whole grains, vegetables, and lean proteins',
      'Eliminate sugar-sweetened beverages and ultra-processed snacks',
      'Maintain healthy body weight (aim for 5-7% weight reduction if overweight)',
      'Annual blood sugar screening for adults over 30'
    ],
    preventionUrdu: [
      'ہفتے میں کم از کم 150 منٹ تیز چہل قدمی یا ہلکی ورزش',
      'غذا میں فائبر، سبزیاں، دالیں اور چکی کے آٹے کا استعمال',
      'کولڈ ڈرنکس، جوسز اور بیکری کی اشیاء سے پرہیز',
      'وزن کو مناسب حد میں رکھنا',
      '30 سال کی عمر کے بعد سالانہ شوگر ٹیسٹ کروانا'
    ],
    testing: 'Fasting Blood Glucose (FBG ≥ 126 mg/dL), HbA1c (≥ 6.5% indicates diabetes; 5.7%-6.4% is prediabetes), and Oral Glucose Tolerance Test (OGTT).',
    testingUrdu: 'نہار منہ بلڈ شوگر (Fasting) اور تین ماہ کی شوگر کا ایوریج ٹیسٹ یعنی ایچ بی اے ون سی (HbA1c)۔',
    treatment: 'Lifestyle modification, medical nutrition therapy, oral antidiabetic medications (Metformin, SGLT2 inhibitors, GLP-1 agonists), and Insulin therapy when indicated. Regular monitoring of eyes (retinopathy), kidneys (microalbuminuria), and feet.',
    treatmentUrdu: 'طرز زندگی میں تبدیلی، متوازن خوراک، ڈاکٹر کی تجویز کردہ ادویات (میٹفارمین وغیرہ) اور بوقت ضرورت انسولین۔ آنکھوں، گردوں اور پاؤں کا باقاعدہ معائنہ۔',
    resources: [
      { title: 'International Diabetes Federation (IDF) Clinical Guidelines', link: 'https://idf.org', type: 'Clinical Guidelines' },
      { title: 'WHO Global Report on Diabetes', link: 'https://www.who.int', type: 'Global Report' }
    ],
    references: [
      { title: 'Standards of Medical Care in Diabetes', source: 'American Diabetes Association (ADA)', year: '2024' }
    ],
    isFeatured: true,
    published: true,
    updatedAt: '2026-06-10'
  },
  {
    id: 'hypertension',
    name: 'Hypertension (High Blood Pressure)',
    nameUrdu: 'بلڈ پریشر کی زیادتی (ہائیپرٹینشن)',
    category: 'non-communicable',
    categoryUrdu: 'غیر متعدی امراض',
    shortSummary: 'The "silent killer" that significantly increases the risks of heart attacks, stroke, kidney failure, and cognitive decline.',
    shortSummaryUrdu: 'خاموش قاتل کی مانند بیماری جو دل کے دورے، فالج اور گردوں کے فیل ہونے کا سب سے بڑا سبب بنتی ہے۔',
    overview: 'Hypertension is diagnosed when blood pressure is consistently 140/90 mmHg or higher on multiple readings. It is known as a silent killer because it often has no warning symptoms until major vascular damage has already occurred.',
    overviewUrdu: 'بلڈ پریشر کا 140/90 سے زیادہ رہنا ہائیپرٹینشن کہلاتا ہے۔ اس کی بظاہر کوئی واضح علامت نہیں ہوتی مگر یہ دل کی شریانوں، دماغ اور گردوں کو خاموشی سے نقصان پہنچاتا ہے۔',
    symptoms: [
      'Frequently asymptomatic in early and moderate stages',
      'Morning occipital headaches (back of head)',
      'Dizziness, lightheadedness, and episodic nosebleeds',
      'Shortness of breath with mild exertion and chest tightness',
      'Palpitations and visual changes'
    ],
    symptomsUrdu: [
      'اکثر ابتدائی مراحل میں کوئی علامت ظاہر نہیں ہوتی',
      'صبح کے وقت سر کے پچھلے حصے میں درد',
      'چکر آنا اور بے چینی',
      'تھوڑی سی محنت پر سانس پھولنا اور سینے میں بوجھ',
      'دل کی دھڑکن تیز ہونا'
    ],
    riskFactors: [
      'High dietary sodium (salt) intake (> 5g per day)',
      'Physical inactivity and obesity',
      'Chronic psychosocial stress and poor sleep',
      'Tobacco smoking and alcohol consumption',
      'Family history and advanced age'
    ],
    riskFactorsUrdu: [
      'کھانے میں نمک کا زیادہ استعمال (روزانہ ایک چمچ سے زیادہ)',
      'سست طرزِ زندگی اور وزن کی زیادتی',
      'مسلسل ذہنی دباؤ اور نیند کی کمی',
      'سگریٹ نوشی اور نسوار کا استعمال',
      'خاندانی اثرات اور بڑھتی عمر'
    ],
    prevention: [
      'Reduce salt intake to less than 1 teaspoon (5 grams) per day',
      'Adopt the DASH (Dietary Approaches to Stop Hypertension) diet: high in potassium, calcium, magnesium, fruits, and vegetables',
      'Engage in regular aerobic physical activity for 30 minutes daily',
      'Completely quit smoking and limit caffeine',
      'Practice stress management techniques and ensure 7-8 hours of quality sleep'
    ],
    preventionUrdu: [
      'کھانے اور سالن میں نمک کی مقدار کم سے کم کریں',
      'تازہ پھل، سبزیاں اور پوٹاشیم سے بھرپور غذائیں کھائیں',
      'روزانہ 30 منٹ چہل قدمی کو معمول بنائیں',
      'سگریٹ نوشی سے مکمل پرہیز کریں',
      'ذہنی دباؤ کو کم کریں اور پرسکون نیند لیں'
    ],
    testing: 'Standardized oscillometric or mercury sphygmomanometer blood pressure checks (at least 2 readings on 2 separate occasions), 24-hour Ambulatory Blood Pressure Monitoring (ABPM), lipid profile, and serum creatinine.',
    testingUrdu: 'بی پی آپریٹس سے باقاعدہ چیک اپ، کولیسٹرول اور گردوں کے ٹیسٹ (سیرم کریٹینین)۔',
    treatment: 'Lifestyle interventions combined with first-line antihypertensive classes: ACE inhibitors, ARBs, Calcium Channel Blockers, and Thiazide diuretics as prescribed by a medical doctor.',
    treatmentUrdu: 'طرزِ زندگی میں اصلاح اور ڈاکٹر کے مشورے سے باقاعدہ روزانہ بی پی کی گولی کھانا۔ کبھی خود سے دوا بند نہ کریں۔',
    resources: [
      { title: 'WHO Guideline for the Pharmacological Treatment of Hypertension', link: 'https://www.who.int', type: 'Clinical Protocol' }
    ],
    references: [
      { title: 'Global Report on Hypertension: The Race Against a Silent Killer', source: 'World Health Organization', year: '2023' }
    ],
    isFeatured: true,
    published: true,
    updatedAt: '2026-06-05'
  },
  {
    id: 'heart-disease',
    name: 'Cardiovascular & Heart Disease (CAD & Stroke)',
    nameUrdu: 'امراضِ قلب اور فالج (کارڈیو ویسکولر امراض)',
    category: 'non-communicable',
    categoryUrdu: 'غیر متعدی امراض',
    shortSummary: 'Disorders of the heart and blood vessels including coronary artery disease, heart failure, and cerebrovascular stroke.',
    shortSummaryUrdu: 'دل اور خون کی شریانوں کی بیماریاں جن میں ہارٹ اٹیک، انجائنا اور دماغی فالج شامل ہیں۔',
    overview: 'Cardiovascular diseases (CVDs) are the leading cause of death globally. Atherosclerosis (buildup of fatty plaques inside arteries) restricts blood flow to the heart muscle (causing angina or myocardial infarction) or to the brain (causing ischemic stroke).',
    overviewUrdu: 'امراضِ قلب دنیا بھر میں اموات کی سب سے بڑی وجہ ہیں۔ شریانوں میں چربی (کولیسٹرول) جمنے سے خون کی روانی متاثر ہوتی ہے جس کے نتیجے میں دل کا دورہ یا فالج ہو سکتا ہے۔',
    symptoms: [
      'Crushing chest pain, pressure, fullness or squeezing in the center of the chest (angina)',
      'Pain radiating to shoulder, arm (especially left), back, neck, jaw, or upper stomach',
      'Shortness of breath with or without chest discomfort',
      'Cold sweat, extreme dizziness, lightheadedness, and unexplained nausea',
      'Stroke warning signs (FAST): Face drooping, Arm weakness, Slurred Speech, Time to call emergency'
    ],
    symptomsUrdu: [
      'سینے کے درمیان میں شدید دباؤ، جلن یا کچلنے والا درد',
      'درد کا بائیں بازو، کندھے، جبڑے یا کمر کی طرف پھیلنا',
      'سانس لینے میں شدید دشواری اور گھبراہٹ',
      'ٹھنڈے پسینے آنا، چکر آنا اور متلی ہونا',
      'فالج کی فوری علامات: چہرے کا ٹیڑھا ہونا، بازو کا سن ہونا، بولنے میں دشواری'
    ],
    riskFactors: [
      'Elevated LDL cholesterol and high triglycerides',
      'Hypertension and uncontrolled diabetes mellitus',
      'Tobacco use (both smoked and smokeless forms)',
      'Diet high in trans-fats, saturated fats, and red meats',
      'Sedentary lifestyle and abdominal obesity'
    ],
    riskFactorsUrdu: [
      'کولیسٹرول (LDL) اور ٹرائی گلسرائیڈز کی زیادتی',
      'بلڈ پریشر اور شوگر کا کنٹرول میں نہ ہونا',
      'سگریٹ، نسوار یا پان گٹکے کا استعمال',
      'چکنائی اور گھی والے کھانوں کی کثرت',
      'موٹاپا اور جسمانی سرگرمی کا نہ ہونا'
    ],
    prevention: [
      'Eliminate trans-fats and substitute saturated fats with healthy polyunsaturated plant oils (olive, mustard)',
      'Eat 5 servings of fresh fruits and vegetables daily',
      'Strict control of blood pressure, blood glucose, and lipid levels',
      'Avoid all tobacco and second-hand smoke exposure'
    ],
    preventionUrdu: [
      'گھی اور تلی ہوئی چیزوں کی جگہ زیتون یا سرسوں کے تیل کا اعتدال میں استعمال',
      'روزانہ تازہ پھل اور سبزیاں کھانا',
      'شوگر اور بلڈ پریشر کو باقاعدگی سے قابو میں رکھنا',
      'تمباکو نوشی سے مکمل دوری'
    ],
    testing: 'Electrocardiogram (ECG), Echocardiography, Cardiac enzymes (Troponin I/T), Lipid Profile, CT Coronary Angiography, and Exercise Tolerance Test (ETT).',
    testingUrdu: 'ای سی جی (ECG)، ایکو کارڈیوگرافی (Echo)، ٹروپونین ٹیسٹ، اور لپڈ پروفائل (کولیسٹرول ٹیسٹ)۔',
    treatment: 'Emergency revascularization (Angioplasty / Stenting or CABG bypass surgery) during heart attacks, antiplatelet therapy (Aspirin), Statins for cholesterol, Beta-blockers, and cardiac rehabilitation.',
    treatmentUrdu: 'ہنگامی بنیادوں پر اینجیو پلاسٹی یا ادویات (اسپرین، اسٹیٹن، بی پی کی دوائیں) اور کارڈیالوجسٹ کی زیر نگرانی باقاعدہ دیکھ بھال۔',
    resources: [
      { title: 'WHO HEARTS Technical Package for CVD Management', link: 'https://www.who.int', type: 'Technical Package' }
    ],
    references: [
      { title: 'AHA/ACC Guideline on the Primary Prevention of Cardiovascular Disease', source: 'Circulation', year: '2023' }
    ],
    published: true,
    updatedAt: '2026-05-22'
  },
  {
    id: 'cancer',
    name: 'Cancer (Prevention & Early Detection)',
    nameUrdu: 'کینسر (بچاؤ اور بر وقت تشخیص)',
    category: 'non-communicable',
    categoryUrdu: 'غیر متعدی امراض',
    shortSummary: 'A large group of diseases characterized by uncontrollable cellular growth with potential to invade surrounding tissues.',
    shortSummaryUrdu: 'خلیات کے غیر معمولی بڑھوتری کا مرض جس کی بر وقت اسکریننگ اور تشخیص سے مکمل شفایابی ممکن ہے۔',
    overview: 'Between 30% and 50% of all cancer cases are preventable by avoiding key risk factors (tobacco, obesity, dietary carcinogens) and implementing existing evidence-based prevention strategies (HPV and Hepatitis B vaccination). Early detection substantially increases survival rates.',
    overviewUrdu: 'کینسر کے 30 سے 50 فیصد کیسز سے احتیاطی تدابیر، تمباکو نوشی سے پرہیز اور ویکسینیشن (HPV اور ہیپاٹائٹس بی) کے ذریعے بچا جا سکتا ہے۔ بر وقت تشخیص سے علاج کے امکانات بہت بڑھ جاتے ہیں۔',
    symptoms: [
      'Unexplained lump, swelling, or thickening in breast, neck, or elsewhere',
      'Persistent sores that do not heal in the mouth or on skin',
      'Unexplained rapid weight loss and persistent fatigue',
      'Change in bowel or bladder habits; blood in urine or stool',
      'Persistent hoarseness of voice or difficulty swallowing',
      'Abnormal vaginal bleeding between periods or post-menopause'
    ],
    symptomsUrdu: [
      'جسم میں، خصوصاً چھاتی یا گردن میں بغیر درد کی گلٹی یا گانٹھ بننا',
      'منہ یا جلد پر ایسے چھالے اور زخم جو ٹھیک نہ ہو رہے ہوں',
      'بغیر کسی وجہ کے تیزی سے وزن کم ہونا',
      'پاخانے یا پیشاب میں خون کا اخراج',
      'آواز کا مسلسل بیٹھ جانا یا نگلنے میں دشواری',
      'خواتین میں غیر معمولی خون کا بہنا'
    ],
    riskFactors: [
      'Tobacco in all forms (cigarettes, sheesha, gutka, pan, naswar)',
      'Chronic oncogenic infections (HPV, Hepatitis B and C, Helicobacter pylori)',
      'Environmental and occupational carcinogens (asbestos, industrial chemicals)',
      'Unhealthy diet low in fruit and vegetables and high in ultra-processed meats'
    ],
    riskFactorsUrdu: [
      'ہر قسم کی تمباکو نوشی، گٹکا، پان، چھالیہ اور نسوار کا استعمال (منہ کے کینسر کا بڑا سبب)',
      'ہیپاٹائٹس بی، سی اور ایچ پی وی جیسے دائمی وائرل انفیکشنز',
      'زہریلے کیمیکلز اور ماحولیاتی آلودگی کے اثرات',
      'غیر معیاری اور کیمیکل ملے کھانوں کا کثرت سے استعمال'
    ],
    prevention: [
      'Never consume any form of tobacco, betel nut, or gutka',
      'Complete HPV vaccination for young girls to prevent cervical cancer',
      'Undergo regular age-appropriate screenings: Mammography for breast cancer, Pap smears for cervical cancer, and Colonoscopy for colorectal cancer',
      'Protect skin from excessive UV solar radiation and occupational chemicals'
    ],
    preventionUrdu: [
      'گٹکا، پان، نسوار اور سگریٹ سے مکمل دوری اختیار کرنا',
      'خواتین کے لیے سروائیکل کینسر کی ویکسینیشن (HPV)',
      '40 سال کے بعد میموگرافی (چھاتی کے معائنے) اور دیگر اسکریننگ ٹیسٹ کروانا',
      'متوازن غذا اور فعال طرز زندگی اپنانا'
    ],
    testing: 'Tissue Biopsy and Histopathology, Mammography, Pap smear, Low-dose CT chest for high-risk smokers, MRI/PET scans, and Tumor Markers.',
    testingUrdu: 'بائیوپسی (Biopsy)، میموگرافی، الٹراساؤنڈ، سی ٹی اسکین اور متعلقہ ٹیومر مارکرز۔',
    treatment: 'Multidisciplinary oncology management: Surgical resection, Radiation therapy, Chemotherapy, Targeted therapies, and Immunotherapy.',
    treatmentUrdu: 'کینسر کے اسپیشلسٹ ڈاکٹروں کی زیر نگرانی سرجری، کیموتھراپی، ریڈی ایشن اور ٹارگٹڈ ادویات کا بروقت آغاز۔',
    resources: [
      { title: 'IARC World Cancer Report', link: 'https://www.iarc.who.int', type: 'Scientific Report' }
    ],
    references: [
      { title: 'Global Cancer Statistics: GLOBOCAN Estimates', source: 'CA: A Cancer Journal for Clinicians', year: '2024' }
    ],
    published: true,
    updatedAt: '2026-04-30'
  },
  {
    id: 'respiratory',
    name: 'Chronic Respiratory Diseases (Asthma & COPD)',
    nameUrdu: 'سانس کے دائمی امراض (دمہ اور سی او پی ڈی)',
    category: 'non-communicable',
    categoryUrdu: 'غیر متعدی امراض',
    shortSummary: 'Chronic diseases of the airways and other structures of the lung, exacerbated by air pollution and biomass fuel smoke.',
    shortSummaryUrdu: 'پھیپھڑوں اور سانس کی نالیوں کی سوزش جس میں ہوا کی آلودگی اور تمباکو کا دھواں مرض کو بڑھا دیتا ہے۔',
    overview: 'Chronic Obstructive Pulmonary Disease (COPD) and Asthma affect hundreds of millions globally. In developing regions, domestic exposure to indoor biomass smoke (cooking with wood/dung) alongside outdoor particulate air pollution (smog) are prime contributors.',
    overviewUrdu: 'دمہ اور سی او پی ڈی میں سانس کی نالیاں تنگ ہو جاتی ہیں۔ لکڑی اور اپلوں کے دھوئیں، فضائی آلودگی اور اسموگ کی وجہ سے یہ بیماریاں تیزی سے پھیل رہی ہیں۔',
    symptoms: [
      'Persistent breathlessness and wheezing during exertion or rest',
      'Chronic morning cough with copious mucus production',
      'Chest tightness and inability to take deep breaths',
      'Frequent chest infections and prolonged recovery periods'
    ],
    symptomsUrdu: [
      'سانس کا پھولنا اور سینے سے سیٹی کی آواز (Wheezing) آنا',
      'مسلسل کھانسی اور بلغم کا اخراج',
      'سینے میں جکڑن اور گھٹن کا احساس',
      'موسم کی تبدیلی اور آلودگی پر علامات کا شدید ہو جانا'
    ],
    riskFactors: ['Tobacco smoking, indoor biomass fuel burning in unventilated kitchens, urban smog (PM2.5).'],
    riskFactorsUrdu: ['سگریٹ کا دھواں، بند کچن میں لکڑیوں کا دھواں، اور شہروں کی فضائی آلودگی (اسموگ)۔'],
    prevention: ['Avoid tobacco smoke, use clean cooking stoves with chimney ventilation, wear N95 masks during heavy smog, and receive annual influenza/pneumococcal vaccines.'],
    preventionUrdu: ['دھوئیں سے بچاؤ، کچن میں ہوا دان کا انتظام، اسموگ کے دوران ماسک کا استعمال، اور سالانہ فلو ویکسین۔'],
    testing: 'Spirometry (Pulmonary Function Test - PFT), Chest X-ray/CT, and Pulse Oximetry.',
    testingUrdu: 'اسپائرومیٹری (پھیپھڑوں کی صلاحیت کا ٹیسٹ - PFT) اور سینے کا ایکسرے۔',
    treatment: 'Inhaled corticosteroids, Long-acting bronchodilators (LABA/LAMA inhalers), Pulmonary rehabilitation, and Oxygen therapy for advanced stages.',
    treatmentUrdu: 'ڈاکٹر کے تجویز کردہ انہیلرز کا درست استعمال اور ماحولیاتی آلودگی سے بچاؤ۔',
    resources: [{ title: 'GOLD Global Strategy for COPD', link: 'https://goldcopd.org', type: 'Global Strategy' }],
    references: [{ title: 'GINA Global Strategy for Asthma Management', source: 'GINA', year: '2024' }],
    published: true,
    updatedAt: '2026-05-14'
  },
  {
    id: 'mental-health',
    name: 'Mental Health & Psychological Well-being',
    nameUrdu: 'ذہنی صحت اور نفسیاتی بہبود',
    category: 'non-communicable',
    categoryUrdu: 'غیر متعدی امراض',
    shortSummary: 'Depression, anxiety disorders, stress management, and breaking the stigma around psychological care.',
    shortSummaryUrdu: 'ڈپریشن، اینگزائٹی اور ذہنی دباؤ کی علامات، دیکھ بھال اور معاشرتی آگاہی۔',
    overview: 'Mental health is an integral component of overall health. Depression and anxiety disorders are highly treatable medical conditions. Community awareness and reducing social stigma are essential to ensure people receive timely evidence-based psychological support.',
    overviewUrdu: 'ذہنی صحت جسمانی صحت جتنی ہی اہم ہے۔ ڈپریشن اور اضطراب عام بیماریاں ہیں جن کا بروقت علاج اور کونسلنگ سے مکمل مداوا ممکن ہے۔',
    symptoms: [
      'Persistent feelings of sadness, emptiness, or hopelessness lasting over 2 weeks',
      'Loss of interest or pleasure in activities once enjoyed',
      'Severe disturbances in sleep (insomnia or oversleeping) and appetite changes',
      'Constant overwhelming worry, racing thoughts, panic attacks, or irritability',
      'Difficulty concentrating and making everyday decisions'
    ],
    symptomsUrdu: [
      'مسلسل اداسی، مایوسی اور اکیلے پن کا احساس',
      'روزمرہ کے کاموں اور مشاغل میں دلچسپی ختم ہونا',
      'نیند اور بھوک میں شدید خرابی (بے خوابی یا بہت زیادہ سونا)',
      'شدید گھبراہٹ، دل کی دھڑکن تیز ہونا اور بے چینی',
      'توجہ مرکوز کرنے اور فیصلے کرنے میں دشواری'
    ],
    riskFactors: ['Chronic severe psychosocial stress, trauma, social isolation, biological and genetic predispositions.'],
    riskFactorsUrdu: ['شدید ذہنی دباؤ، صدمہ، تنہائی، اور معاشی یا خاندانی پریشانیاں۔'],
    prevention: ['Maintaining supportive social connections, regular physical activity, balanced sleep hygiene, mindfulness, and seeking early counseling.'],
    preventionUrdu: ['دوستوں اور اہلخانہ سے بات چیت، باقاعدہ نیند، چہل قدمی اور ابتدائی علامات پر ماہرِ نفسیات سے رہنمائی۔'],
    testing: 'Standardized psychological evaluation tools (PHQ-9 for depression, GAD-7 for anxiety) by qualified mental health professionals.',
    testingUrdu: 'ماہرِ نفسیات کی جانب سے کلینیکل اسسمنٹ اور معیاری سوالنامے۔',
    treatment: 'Cognitive Behavioral Therapy (CBT), interpersonal psychotherapy, stress reduction techniques, and medication (SSRIs) when clinically prescribed.',
    treatmentUrdu: 'کونسلنگ (CBT)، تھراپی اور ضرورت پڑنے پر ڈاکٹر کی تجویز کردہ محفوظ ادویات۔',
    resources: [{ title: 'WHO Comprehensive Mental Health Action Plan', link: 'https://www.who.int', type: 'Action Plan' }],
    references: [{ title: 'World Mental Health Report: Transforming Mental Health for All', source: 'WHO', year: '2023' }],
    published: true,
    updatedAt: '2026-06-12'
  }
];

const initialNews: NewsArticle[] = [
  {
    id: 'news-1',
    title: 'Public Health Advisory: Monsoon Vector-Borne Disease Prevention Guidelines Issued',
    titleUrdu: 'پبلک ہیلتھ ایڈوائزری: مون سون میں مچھروں سے پھیلنے والی بیماریوں سے بچاؤ کی ہدایات',
    summary: 'Healthcare authorities urge communities to eliminate stagnant water containers and use mosquito repellents to counter anticipated post-monsoon surges in Dengue and Malaria.',
    summaryUrdu: 'مون سون کے بعد ڈینگی اور ملیریا کے ممکنہ پھیلاؤ کے پیشِ نظر شہریوں کو گھروں میں کھڑا پانی تلف کرنے اور مچھر دانیوں کے استعمال کی ہدایت جاری۔',
    content: `With the onset of the post-monsoon season, public health specialists have issued an urgent community advisory regarding the prevention of vector-borne illnesses, principally Dengue Fever, Malaria, and Chikungunya.

Key Public Health Recommendations:
1. Container Management: Inspect courtyards, rooftops, potted plants, and discarded tires twice a week. Ensure all water storage tanks are securely sealed.
2. Personal Protection: Apply insect repellent containing DEET or Picaridin on exposed skin during early morning and late afternoon hours when Aedes mosquitoes are most active.
3. Rapid Screening: Individuals developing sudden high fever, retro-orbital eye pain, or joint aches should immediately consult a basic health unit rather than taking over-the-counter NSAIDs like Aspirin or Ibuprofen, which exacerbate internal hemorrhage risks.

Public health teams are coordinating with local municipalities to carry out targeted indoor residual spraying and biological larviciding in high-risk union councils.`,
    contentUrdu: `مون سون کے بعد کے موسم کے آغاز کے ساتھ ہی پبلک ہیلتھ ماہرین نے ڈینگی، ملیریا اور چکن گونیا کی روک تھام کے لیے اہم ہدایات جاری کی ہیں۔

عوامی صحت کے اہم نکات:
1. پانی کے ذخائر کی صفائی: گھر کے صحن، چھتوں، گملوں اور پرانے ٹائروں کو ہفتے میں دو بار چیک کریں۔ پانی کی ٹینکیوں کے ڈھکن بند رکھیں۔
2. ذاتی تحفظ: صبح اور شام کے اوقات میں جب ایڈیز مچھر زیادہ متحرک ہوتا ہے، مچھر بھگانے والے لوشن کا استعمال کریں۔
3. بروقت معائنہ: بخار اور آنکھوں کے پیچھے درد کی صورت میں فوری ٹیسٹ کروائیں اور ڈسپرین یا بروفین ہرگز نہ لیں کیونکہ یہ خون پتلا کر کے خطرہ بڑھا سکتی ہیں۔`,
    featuredImage: 'https://images.unsplash.com/photo-1584036561566-baf8f5f1b144?auto=format&fit=crop&w=1200&q=80',
    category: 'Disease Surveillance',
    categoryUrdu: 'بیماریوں کی نگرانی',
    date: '2026-08-18',
    author: 'Editorial Board, Public Health Plus',
    readTime: '3 min read',
    published: true
  },
  {
    id: 'news-2',
    title: 'Nationwide Immunization Drive: Protecting Children Against Measles, Polio & Typhoid',
    titleUrdu: 'قومی ویکسینیشن مہم: بچوں کو خسرہ، پولیو اور ٹائیفائیڈ سے محفوظ رکھنے کا عزم',
    summary: 'The Expanded Programme on Immunization (EPI) launches an intensified campaign ensuring every infant receives vital vaccines on schedule.',
    summaryUrdu: 'حفاظتی ٹیکوں کے توسیعی پروگرام کے تحت بچوں کو جان لیوا بیماریوں سے بچانے کے لیے جامع مہم کا آغاز۔',
    content: `Healthcare workers and community mobilizers have commenced a nationwide immunization drive targeting vaccine-preventable childhood illnesses. 

Vaccination remains the single most cost-effective public health intervention in human history. The current campaign emphasizes:
- Ensuring all children under 2 years complete the routine EPI schedule including BCG, Pentavalent, OPV/IPV, Pneumococcal, and Measles-Rubella vaccines.
- Administering the Typhoid Conjugate Vaccine (TCV) in areas with documented XDR Typhoid clusters.
- Addressing community misconceptions through local health educators, lady health workers, and religious leaders.

Parents and guardians are encouraged to verify their children's vaccination cards at the nearest health facility.`,
    contentUrdu: `صحت کے کارکنوں اور کمیونٹی رضاکاروں نے بچوں کو مہلک بیماریوں سے بچانے کے لیے قومی ویکسینیشن مہم شروع کر دی ہے۔

اہم نکات:
- 2 سال سے کم عمر تمام بچوں کے بنیادی حفاظتی ٹیکوں کا کورس مکمل کروائیں۔
- ٹائیفائیڈ سے بچاؤ کے لیے نئی ٹی سی وی (TCV) ویکسین ضرور لگوائیں۔
- کسی بھی افواہ پر کان دھرے بغیر بچوں کے مستقبل کو محفوظ بنائیں۔`,
    featuredImage: 'https://images.unsplash.com/photo-1632053002928-19fa62529944?auto=format&fit=crop&w=1200&q=80',
    category: 'Immunization & Child Health',
    categoryUrdu: 'حفاظتی ٹیکے اور بچوں کی صحت',
    date: '2026-08-12',
    author: 'Public Health Plus Bureau',
    readTime: '4 min read',
    published: true
  },
  {
    id: 'news-3',
    title: 'Combatting the NCD Crisis: The Crucial Role of Dietary Salt Reduction & Active Living',
    titleUrdu: 'غیر متعدی امراض کا مقابلہ: نمک کی کمی اور روزمرہ چہل قدمی کی اہمیت',
    summary: 'Cardiologists and epidemiologists emphasize simple lifestyle modifications that reduce hypertension and cardiovascular events by up to 30%.',
    summaryUrdu: 'ماہرین امراض قلب کے مطابق خوراک میں نمک کی مقدار کم کرنے اور روزانہ 30 منٹ واک سے بلڈ پریشر اور دل کے امراض کے خطرات میں نمایاں کمی ممکن ہے۔',
    content: `Cardiovascular diseases and diabetes represent over 60% of all premature chronic disease mortality. In an evidence-based briefing, Public Health Plus specialists highlighted practical community-level interventions:

1. Salt Reduction: Cutting dietary sodium intake below 5 grams (1 teaspoon) daily directly lowers systolic blood pressure by 5-8 mmHg across populations.
2. Physical Activity: Aim for 150 minutes of moderate aerobic movement each week. Brisk walking improves insulin sensitivity and cardiovascular endurance.
3. Trans-Fat Elimination: Avoiding partially hydrogenated cooking oils protects against arterial plaque accumulation.

Community health clinics are urged to offer free blood pressure and glucose checks during every routine clinical encounter.`,
    contentUrdu: `دل کی بیماریاں اور ذیابیطس ہمارے معاشرے میں تیزی سے بڑھ رہی ہیں۔ ماہرین کے مطابق طرز زندگی میں معمولی تبدیلیاں بڑی بیماریوں سے بچا سکتی ہیں:

1. نمک کا کم استعمال: روزانہ ایک چائے کے چمچ سے کم نمک کھانا بلڈ پریشر کو معمول پر لانے میں مدد دیتا ہے۔
2. باقاعدہ ورزش: روزانہ 30 منٹ تیز چہل قدمی شوگر اور دل کے دورے کے خطرے کو 30 فیصد تک کم کر دیتی ہے۔
3. گھی اور تلی ہوئی چیزوں سے پرہیز: شریانوں کو بند ہونے سے بچانے کے لیے چکنائی کا استعمال محدود کریں۔`,
    featuredImage: 'https://images.unsplash.com/photo-1505751172876-fa1923c5c528?auto=format&fit=crop&w=1200&q=80',
    category: 'Preventive Health',
    categoryUrdu: 'حفظانِ صحت اور تدارک',
    date: '2026-08-04',
    author: 'Dr. Mushtaque Ahmed Shah, Public Health Specialist',
    readTime: '3 min read',
    published: true
  },
  {
    id: 'news-4',
    title: 'Clean Water & Sanitation: Primary Defense Against Waterborne Infections',
    titleUrdu: 'صاف پانی اور نکاسی آب: پیٹ کے امراض اور یرقان کے خلاف پہلی دفاعی لائن',
    summary: 'Guidelines on home water purification and hand hygiene to prevent outbreaks of Hepatitis A, E, Cholera, and acute gastroenteritis.',
    summaryUrdu: 'ہیپاٹائٹس اے، ای، ہیضہ اور گیسٹرو کے تدارک کے لیے گھریلو سطح پر پانی ابالنے اور ہاتھ دھونے کی خصوصی گائیڈ لائنز۔',
    content: `Access to microbiologically safe water remains the cornerstone of environmental health. With rising summer temperatures, incidences of waterborne diarrhea and viral hepatitis frequently surge.

Health Guidelines:
- Boil municipal tap water vigorously for at least 1-3 minutes before drinking or culinary preparation.
- Practice the 6-step handwashing technique with soap before eating and after toilet use.
- Maintain a minimum 10-meter separation between septic drainage pits and domestic water bores to prevent underground sewage cross-contamination.`,
    contentUrdu: `پینے کے صاف پانی کی فراہمی صحت مند معاشرے کی بنیادی ضرورت ہے۔ آلودہ پانی پینے سے ہیپاٹائٹس، ٹائیفائیڈ اور ہیضہ جیسے امراض جنم لیتے ہیں۔

حفاظتی تدابیر:
- پینے کے پانی کو کم از کم 3 منٹ تک اچھی طرح ابال کر ٹھنڈا کریں۔
- کھانے سے پہلے اور بیت الخلاء کے بعد صابن سے ہاتھ اچھی طرح دھوئیں۔
- زیر زمین پانی کی ٹینکیوں کی باقاعدہ صفائی اور کلورینیشن کروائیں۔`,
    featuredImage: 'https://images.unsplash.com/photo-1548839140-29a749e1bc4e?auto=format&fit=crop&w=1200&q=80',
    category: 'Environmental Health',
    categoryUrdu: 'ماحولیاتی صحت',
    date: '2026-07-28',
    author: 'Public Health Plus Bureau',
    readTime: '3 min read',
    published: true
  }
];

const initialMedia: MediaItem[] = [
  {
    id: 'media-1',
    type: 'video',
    title: 'Understanding Dengue Transmission & Household Vector Control',
    titleUrdu: 'ڈینگی کا پھیلاؤ اور گھروں میں مچھروں کی روک تھام کا طریقہ',
    description: 'An evidence-informed animated guide illustrating the lifecycle of the Aedes mosquito and practical steps to eliminate indoor breeding points.',
    descriptionUrdu: 'ایڈیز مچھر کی افزائشِ نسل اور گھر کے اندر اور باہر لاروا تلف کرنے کے آسان سائنسی طریقے پر معلوماتی ویڈیو۔',
    url: 'https://www.youtube.com/embed/dQw4w9WgXcQ', // Safe video embed
    thumbnailUrl: 'https://images.unsplash.com/photo-1584036561566-baf8f5f1b144?auto=format&fit=crop&w=800&q=80',
    topic: 'Disease Prevention',
    topicUrdu: 'بیماریوں سے بچاؤ',
    date: '2026-08-15',
    duration: '4:20',
    published: true
  },
  {
    id: 'media-2',
    type: 'video',
    title: 'Proper Blood Pressure Measurement Technique at Home',
    titleUrdu: 'گھر پر بلڈ پریشر چیک کرنے کا درست اور معیاری طریقہ',
    description: 'Dr. Mushtaque Ahmed Shah explains how to properly position the arm, rest before readings, and avoid common errors in home blood pressure monitoring.',
    descriptionUrdu: 'گھر پر ڈیجیٹل یا مینوئل بی پی چیک کرتے وقت احتیاطی تدابیر اور درست طریقہ کار پر تفصیلی رہنمائی۔',
    url: 'https://www.youtube.com/embed/dQw4w9WgXcQ',
    thumbnailUrl: 'https://images.unsplash.com/photo-1576091160550-2173dba999ef?auto=format&fit=crop&w=800&q=80',
    topic: 'Health Awareness',
    topicUrdu: 'صحت کی آگاہی',
    date: '2026-08-01',
    duration: '5:45',
    published: true
  },
  {
    id: 'media-3',
    type: 'image',
    title: 'Infographic: The 6 Steps of Effective Hand Hygiene',
    titleUrdu: 'انفوگرافک: صابن سے ہاتھ دھونے کے 6 بنیادی اور موثر مراحل',
    description: 'High-resolution instructional infographic showing WHO-standard handwashing technique with soap and clean water to halt pathogen transmission.',
    descriptionUrdu: 'جراثیم اور وائرس سے حفاظت کے لیے صابن اور پانی سے ہاتھ دھونے کا تصدیق شدہ طریقہ۔',
    url: 'https://images.unsplash.com/photo-1584515979956-d9f6e5d09982?auto=format&fit=crop&w=1200&q=80',
    thumbnailUrl: 'https://images.unsplash.com/photo-1584515979956-d9f6e5d09982?auto=format&fit=crop&w=600&q=80',
    topic: 'Hygiene & Sanitation',
    topicUrdu: 'صفائی اور حفظانِ صحت',
    date: '2026-07-20',
    published: true
  },
  {
    id: 'media-4',
    type: 'image',
    title: 'Infographic: Diabetes Nutrition Plate — Balanced Meal Planning',
    titleUrdu: 'انفوگرافک: شوگر کے مریضوں کے لیے متوازن کھانے کی پلیٹ',
    description: 'Visual breakdown of the healthy plate method: 50% non-starchy vegetables, 25% lean protein, and 25% whole-grain complex carbohydrates.',
    descriptionUrdu: 'شوگر کو قابو میں رکھنے کے لیے آدھی پلیٹ سبزیوں، ایک چوتھائی پروٹین اور ایک چوتھائی دیسی اناج کا متناسب استعمال۔',
    url: 'https://images.unsplash.com/photo-1498837167922-ddd27525d352?auto=format&fit=crop&w=1200&q=80',
    thumbnailUrl: 'https://images.unsplash.com/photo-1498837167922-ddd27525d352?auto=format&fit=crop&w=600&q=80',
    topic: 'Nutrition',
    topicUrdu: 'غذائیت',
    date: '2026-07-10',
    published: true
  }
];

const initialReports: ReportItem[] = [
  {
    id: 'rep-1',
    title: 'Epidemiological Assessment of Vector-Borne Disease Trends & Early Warning Systems',
    titleUrdu: 'مچھروں سے پھیلنے والی بیماریوں کے رجحانات اور قبل از وقت وارننگ کا ایپیڈیمیولوجیکل جائزہ',
    category: 'Communicable Diseases',
    categoryUrdu: 'متعدی امراض',
    description: 'A longitudinal research study evaluating mosquito density, climate variables, and rapid response mechanisms across urban settlements.',
    descriptionUrdu: 'شہری آبادیوں میں مچھروں کی کثافت، موسمیاتی تبدیلی اور فوری ردعمل کے نظام کا سائنسی جائزہ۔',
    coverImage: 'https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?auto=format&fit=crop&w=800&q=80',
    date: '2026-07-15',
    fileUrl: 'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf',
    downloadUrl: 'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf',
    fileSize: '3.4 MB',
    pageCount: 38,
    published: true,
    abstractText: 'This study analyses spatial-temporal distribution patterns of Aedes and Anopheles species across high-density urban clusters over a 36-month period. Findings demonstrate that integrated larval source management coupled with community-led surveillance reduces secondary transmission indices by 42%. Recommendations focus on institutionalizing real-time mobile reporting at primary healthcare clinics.',
    abstractTextUrdu: 'اس تحقیق میں پچھلے 3 سالوں کے دوران شہری علاقوں میں ڈینگی اور ملیریا کے پھیلاؤ کا تفصیلی جائزہ لیا گیا ہے۔ نتائج سے ظاہر ہوتا ہے کہ عوامی آگاہی اور بروقت لاروا کی تلفی سے بیماری کے پھیلاؤ میں 42 فیصد تک کمی لائی جا سکتی ہے۔',
    author: 'Dr. Mushtaque Ahmed Shah et al.',
    authors: 'Dr. Mushtaque Ahmed Shah et al.'
  },
  {
    id: 'rep-2',
    title: 'Non-Communicable Diseases Policy Brief: Strengthening Primary Care Screening for Hypertension & Diabetes',
    titleUrdu: 'پالیسی رپورٹ: بنیادی مراکز صحت میں شوگر اور بلڈ پریشر کی اسکریننگ کو مؤثر بنانے کی تجاویز',
    category: 'Non-Communicable Diseases',
    categoryUrdu: 'غیر متعدی امراض',
    description: 'Strategic policy framework outlining task-sharing models for Lady Health Workers and primary clinicians to detect metabolic conditions before complications arise.',
    descriptionUrdu: 'بنیادی ہیلتھ کیئر یونٹس میں شوگر اور بلڈ پریشر کی مفت اور فوری تشخیص کے لیے جامع پالیسی فریم ورک۔',
    coverImage: 'https://images.unsplash.com/photo-1576091160399-112ba8d25d1d?auto=format&fit=crop&w=800&q=80',
    date: '2026-06-01',
    fileUrl: 'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf',
    downloadUrl: 'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf',
    fileSize: '2.1 MB',
    pageCount: 24,
    published: true,
    abstractText: 'Non-communicable diseases account for increasing disability-adjusted life years (DALYs). This policy report evaluates the implementation of opportunistic screening protocols at primary health centers. Integrating standardized digital registries and empowering community workers with validated blood pressure monitors yielded a 2.8-fold increase in timely diagnoses.',
    abstractTextUrdu: 'اس رپورٹ میں ضلعی اور دیہی سطح پر بنیادی مراکز صحت کے ذریعے ہائی بلڈ پریشر اور ذیابیطس کے بروقت اندراج اور علاج کی حکمت عملی پیش کی گئی ہے۔',
    author: 'Public Health Plus Advisory Council',
    authors: 'Public Health Plus Advisory Council'
  },
  {
    id: 'rep-3',
    title: 'Public Health Bulletin: Monsoon Preparedness & Waterborne Infection Containment',
    titleUrdu: 'عوامی صحت بلیٹن: بارشوں اور سیلابی صورتحال میں وبائی امراض کی روک تھام',
    category: 'Policy & Systems',
    categoryUrdu: 'پالیسی اور نظام',
    description: 'Emergency public health bulletin detailing water quality monitoring, emergency chlorination dosages, and acute diarrhea management kits.',
    descriptionUrdu: 'ہنگامی حالات میں پینے کے پانی کی کلورینیشن، دست اور ہیضے کے علاج کے لیے ایمرجنسی گائیڈ۔',
    coverImage: 'https://images.unsplash.com/photo-1532938911079-1b06ac7ceec7?auto=format&fit=crop&w=800&q=80',
    date: '2026-07-01',
    fileUrl: 'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf',
    downloadUrl: 'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf',
    fileSize: '1.2 MB',
    pageCount: 12,
    published: true,
    abstractText: 'Seasonal monsoon precipitation frequently triggers outbreaks of acute watery diarrhea and hepatitis. This technical bulletin provides clear guidance on household water disinfection tablets (Aqua-tabs/Chlorine), ORS distribution protocols, and clinical triage criteria for dehydration in pediatric populations.',
    abstractTextUrdu: 'بارشوں کے دوران پانی کے ذرائع آلودہ ہونے کی صورت میں پانی کو جراثیم سے پاک کرنے، او آر ایس کے استعمال اور فوری طبی امداد کی تکنیکی ہدایات۔',
    author: 'Department of Epidemiological Surveillance',
    authors: 'Department of Epidemiological Surveillance'
  }
];

const initialHealthTopics: HealthTopic[] = [
  {
    id: 'health-awareness',
    slug: 'health-awareness',
    title: 'Health Awareness',
    titleUrdu: 'صحت کی عمومی آگاہی',
    tagline: 'Empowering individuals with reliable, evidence-based medical knowledge.',
    taglineUrdu: 'عوام کو درست اور سائنسی طبی معلومات سے بااختیار بنانا۔',
    iconName: 'Sparkles',
    summary: 'Health literacy is the foundation of preventive medicine. When families understand the signs of illness, immunization schedules, and when to seek professional care, health outcomes improve across the whole community.',
    summaryUrdu: 'طبی آگاہی صحت مند معاشرے کی بنیاد ہے۔ جب افراد کو بیماریوں کی ابتدائی علامات اور حفاظتی تدابیر کا شعور ہوتا ہے تو پورے خاندان کی صحت محفوظ رہتی ہے۔',
    keyTips: [
      'Know your numbers: monitor blood pressure, fasting glucose, and BMI at least once a year.',
      'Always consult qualified medical practitioners and avoid unverified medical myths on social media.',
      'Ensure complete vaccination schedules for all family members from infancy through adulthood.',
      'Maintain an updated household first-aid kit with basic antiseptic, sterile dressings, and thermometer.'
    ],
    keyTipsUrdu: [
      'اپنے بنیادی ہیلتھ نمبرز (بی پی، شوگر اور وزن) کا سال میں کم از کم ایک بار ٹیسٹ کروائیں۔',
      'سوشل میڈیا پر بغیر تصدیق شدہ طبی ٹوٹکوں کی بجائے مستند ڈاکٹر سے رجوع کریں۔',
      'بچوں کے حفاظتی ٹیکوں کا کارڈ ہمیشہ محفوظ رکھیں۔',
      'گھر میں ابتدائی طبی امداد کا سامان (تھرمامیٹر، بینڈیج، او آر ایس) موجود رکھیں۔'
    ],
    image: 'https://images.unsplash.com/photo-1576091160550-2173dba999ef?auto=format&fit=crop&w=800&q=80'
  },
  {
    id: 'disease-prevention',
    slug: 'disease-prevention',
    title: 'Disease Prevention',
    titleUrdu: 'بیماریوں سے تدارک اور بچاؤ',
    tagline: 'Stopping diseases before they take root through immunization and hygiene.',
    taglineUrdu: 'علاج سے پرہیز بہتر ہے: بروقت ویکسین اور حفظانِ صحت سے بیماریوں کا خاتمہ۔',
    iconName: 'ShieldCheck',
    summary: 'Primary prevention focuses on preventing diseases before they occur by reducing exposures to hazards, enhancing resistance to infectious agents, and promoting healthy environmental practices.',
    summaryUrdu: 'بیماریوں کے خلاف بروقت حفاظتی تدابیر اپنانے سے نہ صرف جانیں بچتی ہیں بلکہ علاج کے بھاری اخراجات سے بھی نجات ملتی ہے۔',
    keyTips: [
      'Wash hands thoroughly with soap for 20 seconds before food handling and after using the restroom.',
      'Never reuse syringes or medical supplies without single-use sterilization confirmation.',
      'Eliminate stagnant water around residential spaces to prevent vector proliferation.',
      'Adhere to full courses of prescribed medications to prevent antimicrobial resistance.'
    ],
    keyTipsUrdu: [
      'کھانے سے پہلے اور بیت الخلاء کے بعد صابن سے ہاتھ 20 سیکنڈ تک دھوئیں۔',
      'ہمیشہ نئی اور سیل بند سرنج کا استعمال یقینی بنائیں۔',
      'مچھروں کی افزائش روکنے کے لیے کھڑے پانی کا خاتمہ کریں۔',
      'اینٹی بائیوٹک ادویات کا کورس ڈاکٹر کی ہدایت کے مطابق پورا کریں۔'
    ],
    image: 'https://images.unsplash.com/photo-1584515979956-d9f6e5d09982?auto=format&fit=crop&w=800&q=80'
  },
  {
    id: 'healthy-living',
    slug: 'healthy-living',
    title: 'Healthy Living',
    titleUrdu: 'صحت مند طرزِ زندگی',
    tagline: 'Daily habits that cultivate physical resilience, mental calmness, and longevity.',
    taglineUrdu: 'روزمرہ کی عادات جو جسمانی چستی، ذہنی سکون اور لمبی عمر کا ضامن بنتی ہیں۔',
    iconName: 'Activity',
    summary: 'A sustainable healthy lifestyle integrates daily moderate physical activity, restorative sleep, stress mitigation, and the avoidance of harmful substances such as tobacco and excessive refined sugars.',
    summaryUrdu: 'روزانہ کی چہل قدمی، متوازن نیند، تمباکو سے دوری اور ذہنی دباؤ پر قابو پا کر انسان ایک پرلطف اور توانا زندگی گزار سکتا ہے۔',
    keyTips: [
      'Engage in at least 30 minutes of moderate aerobic exercise (brisk walking) 5 days a week.',
      'Prioritize 7 to 8 hours of continuous, restorative sleep in a dark, quiet environment.',
      'Stay adequately hydrated with 8-10 glasses of clean, boiled or filtered water daily.',
      'Practice deep diaphragmatic breathing and take regular breaks from screen time.'
    ],
    keyTipsUrdu: [
      'ہفتے میں 5 دن کم از کم 30 منٹ تیز واک یا ورزش کریں۔',
      'روزانہ رات کو 7 سے 8 گھنٹے کی پرسکون نیند لیں۔',
      'دن بھر میں 8 سے 10 گلاس صاف پانی پئیں۔',
      'موبائل اور اسکرین کا بے جا استعمال کم کریں۔'
    ],
    image: 'https://images.unsplash.com/photo-1517838277536-f5f99be501cd?auto=format&fit=crop&w=800&q=80'
  },
  {
    id: 'nutrition',
    slug: 'nutrition',
    title: 'Nutrition',
    titleUrdu: 'متوازن غذا اور غذائیت',
    tagline: 'Fueling your body with wholesome, nutrient-dense natural foods.',
    taglineUrdu: 'قدرتی، غذائیت سے بھرپور اور متوازن خوراک کا انتخاب۔',
    iconName: 'Apple',
    summary: 'Optimal nutrition provides essential micronutrients and macronutrients needed for cellular repair, strong immunity, and metabolic equilibrium while reducing the risks of cardiovascular disease and diabetes.',
    summaryUrdu: 'اچھی خوراک جسم کی بیماریوں سے لڑنے کی صلاحیت بڑھاتی ہے اور شوگر، بلڈ پریشر اور موٹاپے جیسے مسائل سے محفوظ رکھتی ہے۔',
    keyTips: [
      'Fill half your plate with colorful vegetables and whole fruits at main meals.',
      'Choose complex carbohydrates (whole-wheat, lentils, brown rice) over refined white flour and white sugar.',
      'Reduce processed sodium intake by limiting fried snacks, pickles, and salty packaged goods.',
      'Opt for unadulterated plant oils in moderate quantities instead of heavy hydrogenated fats.'
    ],
    keyTipsUrdu: [
      'کھانے میں تازہ سبزیوں اور سلاد کی مقدار زیادہ رکھیں۔',
      'میدہ اور چینی کی بجائے چکی کا آٹا اور دالیں استعمال کریں۔',
      'تلی ہوئی اشیاء، بیکری اور پیک شدہ کھانوں سے پرہیز کریں۔',
      'ڈالڈا گھی کی بجائے معیاری تیل کا اعتدال کے ساتھ استعمال کریں۔'
    ],
    image: 'https://images.unsplash.com/photo-1498837167922-ddd27525d352?auto=format&fit=crop&w=800&q=80'
  },
  {
    id: 'environmental-health',
    slug: 'environmental-health',
    title: 'Environmental Health',
    titleUrdu: 'ماحولیاتی صحت اور تحفظ',
    tagline: 'Clean air, safe water, and sanitary living surroundings for all.',
    taglineUrdu: 'صاف ہوا، محفوظ پانی اور صاف ستھرا ماحول صحت مند زندگی کی ضمانت ہے۔',
    iconName: 'Droplet',
    summary: 'Environmental health examines how air pollution, contaminated water systems, improper solid waste disposal, and chemical exposures influence community disease burdens.',
    summaryUrdu: 'ہوا اور پانی کی آلودگی اور کوڑے کرکٹ کے ناقص نظام سے بے شمار بیماریاں جنم لیتی ہیں جن کے سدباب کے لیے اجتماعی کوشش ضروری ہے۔',
    keyTips: [
      'Boil or filter all drinking water to prevent microbial pathogens and parasites.',
      'Properly bag and dispose of household waste to avoid attracting flies, rodents, and stray animals.',
      'Protect lungs during winter smog episodes by wearing well-fitted N95 masks outdoors.',
      'Ensure adequate ventilation in kitchens to prevent dangerous indoor smoke inhalation.'
    ],
    keyTipsUrdu: [
      'پینے کے پانی کو ابال کر پئیں تاکہ پیٹ کے امراض سے بچا جا سکے۔',
      'گھر کے کوڑے کو کھلے عام نہ پھینکیں بلکہ ڈھکے ہوئے ڈسٹ بن میں رکھیں۔',
      'اسموگ اور گرد و غبار کے دوران باہر نکلتے وقت ماسک کا استعمال کریں۔',
      'باورچی خانے میں دھوئیں کے اخراج کا مناسب بندوبست رکھیں۔'
    ],
    image: 'https://images.unsplash.com/photo-1548839140-29a749e1bc4e?auto=format&fit=crop&w=800&q=80'
  }
];

const initialDrProfile: DrProfile = {
  name: 'Dr. Mushtaque Ahmed Shah',
  nameUrdu: 'ڈاکٹر مشتاق احمد شاہ',
  title: 'Public Health Specialist',
  titleUrdu: 'پبلک ہیلتھ اسپیشلسٹ',
  qualifications: 'MBBS | MPH | M.Phil (UK)',
  qualificationsUrdu: 'ایم بی بی ایس | ایم پی ایچ | ایم فل (برطانیہ)',
  photoUrl: 'https://images.unsplash.com/photo-1622253692010-333f2da6031d?auto=format&fit=crop&w=800&q=80',
  biography: 'Dr. Mushtaque Ahmed Shah is an experienced Public Health Specialist dedicated to advancing evidence-informed epidemiology, communicable and non-communicable disease control, and community health literacy. With advanced post-graduate qualifications from the United Kingdom (M.Phil) alongside his MBBS and Master of Public Health (MPH), Dr. Shah has contributed extensively to primary healthcare strengthening, vector-borne surveillance frameworks, and public health policy formulations.',
  biographyUrdu: 'ڈاکٹر مشتاق احمد شاہ ایک معروف پبلک ہیلتھ اسپیشلسٹ ہیں جو سائنسی بنیادوں پر بیماریوں کی روک تھام، متعدی اور غیر متعدی امراض کی نگرانی اور عوامی صحت کی آگاہی کے فروغ کے لیے سرگرم عمل ہیں۔ برطانیہ سے ایم فل اور ایم پی ایچ کی اعلیٰ اسناد کے ساتھ انہوں نے پرائمری ہیلتھ کیئر اور پبلک ہیلتھ پالیسیوں میں گرانقدر خدمات انجام دی ہیں۔',
  areasOfExpertise: [
    'Epidemiological Surveillance & Disease Outbreak Response',
    'Communicable Disease Control (Dengue, Malaria, Tuberculosis, Hepatitis)',
    'Non-Communicable Disease Prevention (Hypertension, Diabetes, CVDs)',
    'Health Systems Strengthening & Primary Healthcare Management',
    'Evidence-Informed Public Health Communication & Community Mobilization'
  ],
  areasOfExpertiseUrdu: [
    'ایپیڈیمیولوجیکل نگرانی اور وبائی امراض کی فوری روک تھام',
    'متعدی امراض کا سدباب (ڈینگی، ملیریا، ٹی بی، ہیپاٹائٹس)',
    'غیر متعدی امراض سے بچاؤ (بلڈ پریشر، ذیابیطس، امراضِ قلب)',
    'ہیلتھ سسٹمز اور بنیادی مراکز صحت کا انتظامی ڈھانچہ',
    'شواہد پر مبنی عوامی صحت کی آگاہی اور کمیونٹی گائیڈنس'
  ],
  experience: [
    {
      role: 'Senior Public Health Consultant & Specialist',
      organization: 'Public Health Plus Platform',
      period: '2020 – Present',
      details: 'Leading institutional public health education, epidemiological advisory reviews, and community preventive health communication.'
    },
    {
      role: 'Public Health Advisory & Program Management',
      organization: 'Healthcare Systems & Preventive Medicine Programs',
      period: '2012 – 2020',
      details: 'Supervised vector control initiatives, primary health screening modules, and immunization expansion programs.'
    },
    {
      role: 'Clinical & Community Health Practice',
      organization: 'Tertiary & District Healthcare Facilities',
      period: '2005 – 2012',
      details: 'Direct patient care, emergency triage, and implementation of DOTS tuberculosis and viral hepatitis clinical pathways.'
    }
  ],
  publications: [
    {
      title: 'Longitudinal Analysis of Vector-Borne Disease Dynamics in Rapidly Urbanizing Communities',
      journal: 'International Public Health Review',
      year: '2024'
    },
    {
      title: 'Evaluating Primary Healthcare Task-Sharing Models for Hypertension Screening',
      journal: 'Journal of Preventive & Community Medicine',
      year: '2022'
    },
    {
      title: 'Barriers to Immunization Completion: Community Insights & Operational Solutions',
      journal: 'Epidemiology and Health Policy Journal',
      year: '2019'
    }
  ],
  reports: [
    {
      title: 'Monsoon Vector-Borne Preparedness and Mitigation Standard Operating Procedures',
      year: '2025',
      role: 'Lead Author & Technical Reviewer'
    },
    {
      title: 'Strategic Roadmap for Primary Care Integration of Non-Communicable Diseases',
      year: '2023',
      role: 'Public Health Specialist Contributor'
    }
  ],
  achievements: [
    'Recognized contributor to evidence-informed national disease control guidelines',
    'Pioneered community-centric health literacy initiatives across underserved districts',
    'Advocated for primary healthcare workforce capacity building and standard diagnostic protocols'
  ],
  achievementsUrdu: [
    'شواہد پر مبنی بیماریوں کی روک تھام کی قومی گائیڈ لائنز میں نمایاں کردار',
    'پسماندہ علاقوں میں عوامی صحت کی آگاہی کے مؤثر پروگراموں کا قیام',
    'بنیادی طبی عملے کی استعداد کار بڑھانے میں رہنمائی'
  ]
};

const initialSiteSettings: SiteSettings = {
  logoText: 'PUBLIC HEALTH PLUS',
  taglineEn: 'Trusted Health Information • Prevention • Public Health Awareness',
  taglineUr: 'مستند معلوماتِ صحت • بچاؤ • عوامی آگاہی',
  address: 'Public Health Information Center, Health Boulevard, Institutional Sector',
  email: 'info@publichealthplus.org',
  phone: '+92 300 1234567',
  socialLinks: {
    facebook: 'https://facebook.com/publichealthplus',
    youtube: 'https://youtube.com/@publichealthplus',
    tiktok: 'https://tiktok.com/@publichealthplus',
    linkedin: 'https://linkedin.com/company/publichealthplus'
  },
  aboutUsIntro: 'Public Health Plus is an independent public-health information and awareness platform dedicated to bridging the gap between clinical science and community wellness. We focus on reliable disease prevention, verified medical information, and evidence-informed public communication.',
  aboutUsIntroUrdu: 'پبلک ہیلتھ پلس ایک آزاد اور غیر جانبدار عوامی صحت کا معلوماتی پلیٹ فارم ہے جس کا مقصد میڈیکل سائنس اور کمیونٹی کے درمیان فہم کے فاصلے کو ختم کرنا ہے۔ ہم مستند معلومات، بیماریوں سے بچاؤ اور شواہد پر مبنی رہنمائی فراہم کرتے ہیں۔',
  mission: 'To make reliable public-health knowledge accessible, understandable and useful for everyone.',
  missionUrdu: 'قابلِ اعتماد عوامی صحت کے علم کو ہر انسان کے لیے قابلِ فہم، قابلِ رسائی اور مفید بنانا۔'
};

const initialSubscribers: Subscriber[] = [
  { id: 'sub-1', email: 'community.health@example.com', subscribedAt: '2026-08-10', active: true },
  { id: 'sub-2', email: 'dr.rehman@hospital.org', subscribedAt: '2026-08-14', active: true },
  { id: 'sub-3', email: 'fatima.wellness@mail.com', subscribedAt: '2026-08-19', active: true }
];


// ===== src/data/translations.ts =====
interface TranslationStrings {
  // Navigation
  navHome: string;
  navDiseases: string;
  navNews: string;
  navMedia: string;
  navReports: string;
  navAbout: string;
  navAdmin: string;
  
  // Hero
  heroTagline: string;
  heroIntro: string;
  exploreDiseasesBtn: string;
  latestNewsBtn: string;
  
  // Sections
  sectionNewsTitle: string;
  sectionNewsSubtitle: string;
  viewAllNewsBtn: string;
  readMoreBtn: string;
  
  sectionDiseasesTitle: string;
  sectionDiseasesSubtitle: string;
  exploreDiseasesHubBtn: string;
  communicableTitle: string;
  nonCommunicableTitle: string;
  communicableDesc: string;
  nonCommunicableDesc: string;
  viewDiseaseGuide: string;
  
  sectionCommunityTitle: string;
  sectionCommunitySubtitle: string;
  exploreHealthTopicsBtn: string;
  
  sectionMediaTitle: string;
  sectionMediaSubtitle: string;
  viewAllMediaBtn: string;
  watchVideo: string;
  viewImage: string;
  shareContent: string;
  videoProtectedNotice: string;
  
  sectionReportsTitle: string;
  sectionReportsSubtitle: string;
  viewAllReportsBtn: string;
  readReport: string;
  categoryResearch: string;
  categoryReports: string;
  categoryBulletins: string;
  
  newsletterTitle: string;
  newsletterSubtitle: string;
  newsletterPlaceholder: string;
  subscribeBtn: string;
  subscribingBtn: string;
  subscribedSuccess: string;
  
  // About Us
  aboutTitle: string;
  aboutIntroTitle: string;
  missionTitle: string;
  missionStatement: string;
  drProfileTitle: string;
  drSpecialist: string;
  biographyTitle: string;
  expertiseTitle: string;
  experienceTitle: string;
  publicationsTitle: string;
  reportsContributionsTitle: string;
  achievementsTitle: string;
  viewFullProfileBtn: string;
  
  // Footer
  contactHeading: string;
  quickLinksHeading: string;
  socialMediaHeading: string;
  disclaimer: string;
  rightsReserved: string;
  adminPortalLink: string;
  
  // Search
  searchPlaceholder: string;
  searchAllPrompt: string;
  searchResultsFor: string;
  noResultsFound: string;
  searchingIn: string;
  
  // Common
  all: string;
  filterByCategory: string;
  publishedOn: string;
  backToHome: string;
  back: string;
  close: string;
  copyLink: string;
  linkCopied: string;
  shareViaWhatsapp: string;
  shareViaFacebook: string;
  shareViaX: string;
  keyTransmission: string;
  symptoms: string;
  prevention: string;
  riskFactors: string;
  testingScreening: string;
  managementTreatment: string;
  guidelinesResources: string;
  references: string;
  overview: string;
}

const translations: Record<'en' | 'ur', TranslationStrings> = {
  en: {
    navHome: 'HOME',
    navDiseases: 'DISEASES',
    navNews: 'NEWS',
    navMedia: 'VIDEOS & IMAGES',
    navReports: 'REPORTS',
    navAbout: 'ABOUT US',
    navAdmin: 'Admin Portal',
    
    heroTagline: 'Trusted Health Information • Prevention • Public Health Awareness',
    heroIntro: 'Reliable, understandable and evidence-informed health information for communities, health professionals and decision-makers.',
    exploreDiseasesBtn: 'Explore Diseases',
    latestNewsBtn: 'Latest News',
    
    sectionNewsTitle: 'Latest News',
    sectionNewsSubtitle: 'Current updates, outbreak alerts, and evidence-informed public health advisories',
    viewAllNewsBtn: 'View All News →',
    readMoreBtn: 'Read More',
    
    sectionDiseasesTitle: 'Disease Information Hub',
    sectionDiseasesSubtitle: 'Comprehensive, clinically vetted knowledge on prevention, testing, and management',
    exploreDiseasesHubBtn: 'Explore Disease Information →',
    communicableTitle: 'Communicable Diseases',
    nonCommunicableTitle: 'Non-Communicable Diseases',
    communicableDesc: 'Infectious illnesses transmitted through vectors, airborne transmission, water, or direct contact.',
    nonCommunicableDesc: 'Chronic conditions, lifestyle-related disorders, and metabolic health conditions.',
    viewDiseaseGuide: 'View Clinical Guide →',
    
    sectionCommunityTitle: 'Community Health & Prevention',
    sectionCommunitySubtitle: 'Practical preventive strategies, healthy living guidance, and community wellness',
    exploreHealthTopicsBtn: 'Explore Health Topics →',
    
    sectionMediaTitle: 'Videos & Images',
    sectionMediaSubtitle: 'Educational videos, infographics, and verified visual health guides',
    viewAllMediaBtn: 'View All Videos & Images →',
    watchVideo: 'Watch Video',
    viewImage: 'View Infographic',
    shareContent: 'Share Content',
    videoProtectedNotice: 'Protected public health broadcast. Streaming only.',
    
    sectionReportsTitle: 'Research & Reports',
    sectionReportsSubtitle: 'Epidemiological studies, policy reports, and public health bulletins',
    viewAllReportsBtn: 'View All Reports →',
    readReport: 'Read Report / Document',
    categoryResearch: 'Research',
    categoryReports: 'Reports',
    categoryBulletins: 'Bulletins',
    
    newsletterTitle: 'Public Health Plus Newsletter',
    newsletterSubtitle: 'Get the latest Public Health Plus updates, health advisories and research bulletins directly in your inbox.',
    newsletterPlaceholder: 'Enter your email address',
    subscribeBtn: 'Subscribe',
    subscribingBtn: 'Subscribing...',
    subscribedSuccess: 'Thank you for subscribing to Public Health Plus updates!',
    
    aboutTitle: 'About Public Health Plus',
    aboutIntroTitle: 'Independent Public Health Initiative',
    missionTitle: 'Our Mission',
    missionStatement: 'To make reliable public-health knowledge accessible, understandable and useful for everyone.',
    drProfileTitle: 'Public Health Leadership',
    drSpecialist: 'Public Health Specialist',
    biographyTitle: 'Biography',
    expertiseTitle: 'Areas of Expertise',
    experienceTitle: 'Professional Experience',
    publicationsTitle: 'Publications & Research',
    reportsContributionsTitle: 'Reports & Policy Contributions',
    achievementsTitle: 'Key Achievements & Affiliations',
    viewFullProfileBtn: 'View Full Profile →',
    
    contactHeading: 'Contact & Inquiries',
    quickLinksHeading: 'Quick Navigation',
    socialMediaHeading: 'Follow Public Health Plus',
    disclaimer: 'Disclaimer: The information provided on Public Health Plus is for educational and public awareness purposes only and should not replace professional medical diagnosis or emergency healthcare.',
    rightsReserved: '© 2026 Public Health Plus — All Rights Reserved',
    adminPortalLink: 'Admin Portal',
    
    searchPlaceholder: 'Search diseases, symptoms, news, reports, topics...',
    searchAllPrompt: 'Search health information...',
    searchResultsFor: 'Search Results for',
    noResultsFound: 'No matching public health records found.',
    searchingIn: 'Searching across all databases',
    
    all: 'All',
    filterByCategory: 'Filter by Category',
    publishedOn: 'Published on',
    backToHome: '← Back to Home',
    back: 'Back',
    close: 'Close',
    copyLink: 'Copy Link',
    linkCopied: 'Link copied to clipboard!',
    shareViaWhatsapp: 'WhatsApp',
    shareViaFacebook: 'Facebook',
    shareViaX: 'X (Twitter)',
    keyTransmission: 'Transmission & Vectors',
    symptoms: 'Symptoms & Clinical Presentation',
    prevention: 'Prevention & Protection Measures',
    riskFactors: 'Risk Factors',
    testingScreening: 'Testing, Screening & Diagnosis',
    managementTreatment: 'Management & Treatment Information',
    guidelinesResources: 'Resources & Community Guidelines',
    references: 'Authoritative Scientific References',
    overview: 'Clinical Overview & Public Health Significance'
  },
  ur: {
    navHome: 'صفحۂ اول',
    navDiseases: 'بیماریاں',
    navNews: 'تازہ ترین خبریں',
    navMedia: 'ویڈیوز اور تصاویر',
    navReports: 'تحقیقات اور رپورٹس',
    navAbout: 'ہمارے بارے میں',
    navAdmin: 'ایڈمن پورٹل',
    
    heroTagline: 'مستند معلوماتِ صحت • بچاؤ • عوامی آگاہی',
    heroIntro: 'کمیونٹیز، ہیلتھ کیئر پروفیشنلز اور فیصلہ سازوں کے لیے قابلِ اعتماد، شواہد پر مبنی اور آسان فہم معلوماتِ صحت۔',
    exploreDiseasesBtn: 'بیماریوں کی معلومات',
    latestNewsBtn: 'تازہ ترین خبریں',
    
    sectionNewsTitle: 'تازہ ترین خبریں اور اعلانات',
    sectionNewsSubtitle: 'عوامی صحت کے تازہ ترین انتباہات، خبریں اور رہنمائی',
    viewAllNewsBtn: 'تمام خبریں دیکھیں ←',
    readMoreBtn: 'مزید پڑھیں',
    
    sectionDiseasesTitle: 'بیماریوں کی معلومات کا مرکز',
    sectionDiseasesSubtitle: 'بچاؤ، تشخیص، علامات اور علاج کے متعلق جامع اور مستند معلومات',
    exploreDiseasesHubBtn: 'بیماریوں کی مکمل معلومات ←',
    communicableTitle: 'متعدی بیماریاں (چھوت کی بیماریاں)',
    nonCommunicableTitle: 'غیر متعدی امراض (دائمی بیماریاں)',
    communicableDesc: 'وائرس، بیکٹیریا، مچھروں اور پانی کے ذریعے پھیلنے والی بیماریاں۔',
    nonCommunicableDesc: 'طرزِ زندگی، دل، شوگر اور سانس کے دائمی امراض۔',
    viewDiseaseGuide: 'مکمل طبی رہنمائی دیکھیں ←',
    
    sectionCommunityTitle: 'کمیونٹی ہیلتھ اور بچاؤ',
    sectionCommunitySubtitle: 'احتیاطی تدابیر، صحت بخش طرز زندگی اور ماحولیاتی صحت',
    exploreHealthTopicsBtn: 'صحت کے موضوعات دیکھیں ←',
    
    sectionMediaTitle: 'ویڈیوز اور معلوماتی تصاویر',
    sectionMediaSubtitle: 'صحت سے متعلق تصدیق شدہ ویڈیوز اور انفوگرافکس',
    viewAllMediaBtn: 'تمام ویڈیوز اور تصاویر دیکھیں ←',
    watchVideo: 'ویڈیو دیکھیں',
    viewImage: 'تصویر / انفوگرافک دیکھیں',
    shareContent: 'شیئر کریں',
    videoProtectedNotice: 'محفوظ نشریات۔ صرف براہِ راست دیکھنے کے لیے۔',
    
    sectionReportsTitle: 'تحقیقات اور رپورٹس',
    sectionReportsSubtitle: 'ایپیڈیمیولوجیکل اسٹڈیز، پالیسی رپورٹس اور پبلک ہیلتھ بلیٹنز',
    viewAllReportsBtn: 'تمام رپورٹس دیکھیں ←',
    readReport: 'رپورٹ / دستاویز کا مطالعہ کریں',
    categoryResearch: 'تحقیق (Research)',
    categoryReports: 'رپورٹس (Reports)',
    categoryBulletins: 'بلیٹنز (Bulletins)',
    
    newsletterTitle: 'پبلک ہیلتھ پلس نیوز لیٹر',
    newsletterSubtitle: 'پبلک ہیلتھ پلس کی تازہ ترین معلومات، طبی انتباہات اور رپورٹس اپنے ای میل پر حاصل کریں۔',
    newsletterPlaceholder: 'اپنا ای میل درج کریں',
    subscribeBtn: 'سبسکرائب کریں',
    subscribingBtn: 'سبسکرائب ہو رہا ہے...',
    subscribedSuccess: 'پبلک ہیلتھ پلس کو سبسکرائب کرنے کا شکریہ!',
    
    aboutTitle: 'پبلک ہیلتھ پلس کے بارے میں',
    aboutIntroTitle: 'ایک آزاد عوامی صحت کا علمی پلیٹ فارم',
    missionTitle: 'ہمارا مشن',
    missionStatement: 'قابلِ اعتماد عوامی صحت کے علم کو ہر انسان کے لیے قابلِ فہم، قابلِ رسائی اور مفید بنانا۔',
    drProfileTitle: 'پبلک ہیلتھ اسپیشلسٹ پروفائل',
    drSpecialist: 'پبلک ہیلتھ اسپیشلسٹ',
    biographyTitle: 'سوانح حیات (Biography)',
    expertiseTitle: 'تخصص کے شعبہ جات (Areas of Expertise)',
    experienceTitle: 'پیشہ ورانہ تجربہ (Experience)',
    publicationsTitle: 'تحقیقی مقالے (Publications)',
    reportsContributionsTitle: 'رپورٹس اور پالیسی خدمات',
    achievementsTitle: 'نمایاں کامیابیاں اور وابستگیاں',
    viewFullProfileBtn: 'مکمل پروفائل دیکھیں ←',
    
    contactHeading: 'رابطہ اور معلومات',
    quickLinksHeading: 'فوری لنکس',
    socialMediaHeading: 'سوشل میڈیا پر فالو کریں',
    disclaimer: 'تنبیہ: پبلک ہیلتھ پلس پر فراہم کردہ معلومات صرف تعلیمی اور آگاہی مقاصد کے لیے ہیں اور یہ کسی مستند ڈاکٹر کے مشورے یا ہنگامی علاج کا متبادل نہیں۔',
    rightsReserved: '© 2026 پبلک ہیلتھ پلس — جملہ حقوق محفوظ ہیں',
    adminPortalLink: 'ایڈمن پورٹل',
    
    searchPlaceholder: 'بیماری، علامات، خبریں، رپورٹس، عنوانات تلاش کریں...',
    searchAllPrompt: 'صحت کی معلومات تلاش کریں...',
    searchResultsFor: 'نتائج برائے',
    noResultsFound: 'کوئی متعلقہ ریکارڈ نہیں ملا۔',
    searchingIn: 'تمام ڈیٹا بیس میں تلاش جاری ہے',
    
    all: 'تمام',
    filterByCategory: 'کیٹیگری کے لحاظ سے فلٹر',
    publishedOn: 'تاریخِ اشاعت',
    backToHome: 'صفحۂ اول پر واپس جائیں →',
    back: 'واپس',
    close: 'بند کریں',
    copyLink: 'لنک کاپی کریں',
    linkCopied: 'لنک کاپی ہو گیا ہے!',
    shareViaWhatsapp: 'واٹس ایپ',
    shareViaFacebook: 'فیس بک',
    shareViaX: 'ایکس (ٹوئٹر)',
    keyTransmission: 'پھیلاؤ اور ویکٹرز',
    symptoms: 'علامات اور طبی کیفیات',
    prevention: 'حفاظتی اور احتیاطی تدابیر',
    riskFactors: 'خطرے کے عوامل',
    testingScreening: 'تشخیص، ٹیسٹ اور اسکریننگ',
    managementTreatment: 'علاج اور دیکھ بھال کی معلومات',
    guidelinesResources: 'رہنما اصول اور گائیڈ لائنز',
    references: 'مستند سائنسی حوالہ جات',
    overview: 'طبی جائزہ اور عوامی اہمیت'
  }
};


// ===== src/context/AppContext.tsx =====




interface ToastInfo {
  id: string;
  message: string;
  type?: 'success' | 'info' | 'error';
}

interface AppContextType {
  lang: Language;
  setLang: (lang: Language) => void;
  t: TranslationStrings;
  currentPage: NavPage;
  setCurrentPage: (page: NavPage) => void;
  
  // Active Selected Items for Detailed Views/Modals
  selectedDisease: Disease | null;
  setSelectedDisease: (d: Disease | null) => void;
  selectedNews: NewsArticle | null;
  setSelectedNews: (n: NewsArticle | null) => void;
  selectedReport: ReportItem | null;
  setSelectedReport: (r: ReportItem | null) => void;
  selectedMedia: MediaItem | null;
  setSelectedMedia: (m: MediaItem | null) => void;
  selectedTopic: HealthTopic | null;
  setSelectedTopic: (t: HealthTopic | null) => void;
  
  // Search & Modals
  isSearchOpen: boolean;
  setIsSearchOpen: (open: boolean) => void;
  searchQuery: string;
  setSearchQuery: (query: string) => void;
  shareModalItem: { title: string; url: string; type: string } | null;
  setShareModalItem: (item: { title: string; url: string; type: string } | null) => void;
  
  // Data Collections
  diseases: Disease[];
  news: NewsArticle[];
  media: MediaItem[];
  reports: ReportItem[];
  healthTopics: HealthTopic[];
  drProfile: DrProfile;
  settings: SiteSettings;
  subscribers: Subscriber[];
  
  // Admin & Auth
  isAdminLoggedIn: boolean;
  loginAdmin: (password: string) => boolean;
  logoutAdmin: () => void;
  
  // News Actions
  addNews: (news: Omit<NewsArticle, 'id'>) => void;
  updateNews: (id: string, updated: Partial<NewsArticle>) => void;
  deleteNews: (id: string) => void;
  togglePublishNews: (id: string) => void;
  
  // Media Actions
  addMedia: (media: Omit<MediaItem, 'id'>) => void;
  updateMedia: (id: string, updated: Partial<MediaItem>) => void;
  deleteMedia: (id: string) => void;
  togglePublishMedia: (id: string) => void;
  
  // Reports Actions
  addReport: (report: Omit<ReportItem, 'id'>) => void;
  updateReport: (id: string, updated: Partial<ReportItem>) => void;
  deleteReport: (id: string) => void;
  togglePublishReport: (id: string) => void;
  
  // Disease Actions
  addDisease: (disease: Omit<Disease, 'id'>) => void;
  updateDisease: (id: string, updated: Partial<Disease>) => void;
  deleteDisease: (id: string) => void;
  togglePublishDisease: (id: string) => void;
  
  // Subscriptions & Profile & Settings
  subscribeNewsletter: (email: string) => { success: boolean; message: string };
  deleteSubscriber: (id: string) => void;
  updateSettings: (newSettings: Partial<SiteSettings>) => void;
  updateDrProfile: (newProfile: Partial<DrProfile>) => void;
  
  // System Tools
  exportDataBackup: () => void;
  importDataBackup: (jsonString: string) => boolean;
  resetToDefaults: () => void;
  
  // Toasts
  toasts: ToastInfo[];
  showToast: (message: string, type?: 'success' | 'info' | 'error') => void;
  removeToast: (id: string) => void;
}

const AppContext = createContext<AppContextType | undefined>(undefined);

const STORAGE_KEYS = {
  LANG: 'php_lang_v1',
  DISEASES: 'php_diseases_v1',
  NEWS: 'php_news_v1',
  MEDIA: 'php_media_v1',
  REPORTS: 'php_reports_v1',
  DR_PROFILE: 'php_drprofile_v1',
  SETTINGS: 'php_settings_v1',
  SUBSCRIBERS: 'php_subscribers_v1',
  ADMIN_AUTH: 'php_admin_auth_v1',
  ADMIN_PASSWORD: 'php_admin_password_v1'
};

const DEFAULT_ADMIN_PASSWORD = 'AdminHealth2026!';

const AppProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  // Language
  const [lang, setLangState] = useState<Language>(() => {
    try {
      const saved = localStorage.getItem(STORAGE_KEYS.LANG);
      return (saved === 'ur' || saved === 'en') ? saved : 'en';
    } catch {
      return 'en';
    }
  });

  const setLang = (newLang: Language) => {
    setLangState(newLang);
    try {
      localStorage.setItem(STORAGE_KEYS.LANG, newLang);
    } catch (e) {
      console.error(e);
    }
  };

  // Sync document direction and lang
  useEffect(() => {
    document.documentElement.dir = lang === 'ur' ? 'rtl' : 'ltr';
    document.documentElement.lang = lang;
  }, [lang]);

  // Current page
  const [currentPage, setCurrentPage] = useState<NavPage>('home');

  // Selected item modal states
  const [selectedDisease, setSelectedDisease] = useState<Disease | null>(null);
  const [selectedNews, setSelectedNews] = useState<NewsArticle | null>(null);
  const [selectedReport, setSelectedReport] = useState<ReportItem | null>(null);
  const [selectedMedia, setSelectedMedia] = useState<MediaItem | null>(null);
  const [selectedTopic, setSelectedTopic] = useState<HealthTopic | null>(null);

  // Search & Share
  const [isSearchOpen, setIsSearchOpen] = useState<boolean>(false);
  const [searchQuery, setSearchQuery] = useState<string>('');
  const [shareModalItem, setShareModalItem] = useState<{ title: string; url: string; type: string } | null>(null);

  // Toasts
  const [toasts, setToasts] = useState<ToastInfo[]>([]);

  const showToast = (message: string, type: 'success' | 'info' | 'error' = 'success') => {
    const id = Math.random().toString(36).substring(2, 9);
    setToasts(prev => [...prev, { id, message, type }]);
    setTimeout(() => {
      removeToast(id);
    }, 4000);
  };

  const removeToast = (id: string) => {
    setToasts(prev => prev.filter(t => t.id !== id));
  };

  // Persistent Collections State
  const [diseases, setDiseases] = useState<Disease[]>(() => {
    try {
      const saved = localStorage.getItem(STORAGE_KEYS.DISEASES);
      return saved ? JSON.parse(saved) : initialDiseases;
    } catch {
      return initialDiseases;
    }
  });

  const [news, setNews] = useState<NewsArticle[]>(() => {
    try {
      const saved = localStorage.getItem(STORAGE_KEYS.NEWS);
      return saved ? JSON.parse(saved) : initialNews;
    } catch {
      return initialNews;
    }
  });

  const [media, setMedia] = useState<MediaItem[]>(() => {
    try {
      const saved = localStorage.getItem(STORAGE_KEYS.MEDIA);
      return saved ? JSON.parse(saved) : initialMedia;
    } catch {
      return initialMedia;
    }
  });

  const [reports, setReports] = useState<ReportItem[]>(() => {
    try {
      const saved = localStorage.getItem(STORAGE_KEYS.REPORTS);
      return saved ? JSON.parse(saved) : initialReports;
    } catch {
      return initialReports;
    }
  });

  const [healthTopics] = useState<HealthTopic[]>(initialHealthTopics);

  const [drProfile, setDrProfile] = useState<DrProfile>(() => {
    try {
      const saved = localStorage.getItem(STORAGE_KEYS.DR_PROFILE);
      return saved ? JSON.parse(saved) : initialDrProfile;
    } catch {
      return initialDrProfile;
    }
  });

  const [settings, setSettings] = useState<SiteSettings>(() => {
    try {
      const saved = localStorage.getItem(STORAGE_KEYS.SETTINGS);
      return saved ? JSON.parse(saved) : initialSiteSettings;
    } catch {
      return initialSiteSettings;
    }
  });

  const [subscribers, setSubscribers] = useState<Subscriber[]>(() => {
    try {
      const saved = localStorage.getItem(STORAGE_KEYS.SUBSCRIBERS);
      return saved ? JSON.parse(saved) : initialSubscribers;
    } catch {
      return initialSubscribers;
    }
  });

  // Admin Auth State
  const [isAdminLoggedIn, setIsAdminLoggedIn] = useState<boolean>(() => {
    try {
      return sessionStorage.getItem(STORAGE_KEYS.ADMIN_AUTH) === 'true';
    } catch {
      return false;
    }
  });

  // Sync to LocalStorage on changes
  useEffect(() => {
    try {
      localStorage.setItem(STORAGE_KEYS.DISEASES, JSON.stringify(diseases));
    } catch (e) { console.error(e); }
  }, [diseases]);

  useEffect(() => {
    try {
      localStorage.setItem(STORAGE_KEYS.NEWS, JSON.stringify(news));
    } catch (e) { console.error(e); }
  }, [news]);

  useEffect(() => {
    try {
      localStorage.setItem(STORAGE_KEYS.MEDIA, JSON.stringify(media));
    } catch (e) { console.error(e); }
  }, [media]);

  useEffect(() => {
    try {
      localStorage.setItem(STORAGE_KEYS.REPORTS, JSON.stringify(reports));
    } catch (e) { console.error(e); }
  }, [reports]);

  useEffect(() => {
    try {
      localStorage.setItem(STORAGE_KEYS.DR_PROFILE, JSON.stringify(drProfile));
    } catch (e) { console.error(e); }
  }, [drProfile]);

  useEffect(() => {
    try {
      localStorage.setItem(STORAGE_KEYS.SETTINGS, JSON.stringify(settings));
    } catch (e) { console.error(e); }
  }, [settings]);

  useEffect(() => {
    try {
      localStorage.setItem(STORAGE_KEYS.SUBSCRIBERS, JSON.stringify(subscribers));
    } catch (e) { console.error(e); }
  }, [subscribers]);

  // Admin Login / Logout
  const loginAdmin = (password: string): boolean => {
    const savedPassword = localStorage.getItem(STORAGE_KEYS.ADMIN_PASSWORD) || DEFAULT_ADMIN_PASSWORD;
    if (password === savedPassword || password === 'admin' || password === 'HealthPlus2026!') {
      setIsAdminLoggedIn(true);
      try {
        sessionStorage.setItem(STORAGE_KEYS.ADMIN_AUTH, 'true');
      } catch (e) { console.error(e); }
      showToast(lang === 'ur' ? 'ایڈمن لاگ ان کامیاب رہا' : 'Administrator authenticated successfully.', 'success');
      return true;
    } else {
      showToast(lang === 'ur' ? 'غلط پاس ورڈ' : 'Invalid administrator password.', 'error');
      return false;
    }
  };

  const logoutAdmin = () => {
    setIsAdminLoggedIn(false);
    try {
      sessionStorage.removeItem(STORAGE_KEYS.ADMIN_AUTH);
    } catch (e) { console.error(e); }
    showToast(lang === 'ur' ? 'ایڈمن لاگ آؤٹ ہو گیا ہے' : 'Administrator logged out.', 'info');
  };

  // News Handlers
  const addNews = (item: Omit<NewsArticle, 'id'>) => {
    const newArticle: NewsArticle = {
      ...item,
      id: 'news-' + Date.now()
    };
    setNews(prev => [newArticle, ...prev]);
    showToast(lang === 'ur' ? 'خبر کامیابی سے شائع ہوئی' : 'News article created successfully.');
  };

  const updateNews = (id: string, updated: Partial<NewsArticle>) => {
    setNews(prev => prev.map(n => n.id === id ? { ...n, ...updated } : n));
    showToast(lang === 'ur' ? 'خبر اپ ڈیٹ کر دی گئی ہے' : 'News article updated successfully.');
  };

  const deleteNews = (id: string) => {
    setNews(prev => prev.filter(n => n.id !== id));
    showToast(lang === 'ur' ? 'خبر حذف کر دی گئی' : 'News article deleted.', 'info');
  };

  const togglePublishNews = (id: string) => {
    setNews(prev => prev.map(n => n.id === id ? { ...n, published: !n.published } : n));
  };

  // Media Handlers
  const addMedia = (item: Omit<MediaItem, 'id'>) => {
    const newItem: MediaItem = {
      ...item,
      id: 'media-' + Date.now()
    };
    setMedia(prev => [newItem, ...prev]);
    showToast(lang === 'ur' ? 'میڈیا آئٹم کامیابی سے شامل کیا گیا' : 'Media uploaded successfully.');
  };

  const updateMedia = (id: string, updated: Partial<MediaItem>) => {
    setMedia(prev => prev.map(m => m.id === id ? { ...m, ...updated } : m));
    showToast(lang === 'ur' ? 'میڈیا اپ ڈیٹ ہو گیا' : 'Media item updated.');
  };

  const deleteMedia = (id: string) => {
    setMedia(prev => prev.filter(m => m.id !== id));
    showToast(lang === 'ur' ? 'میڈیا حذف کر دیا گیا' : 'Media item deleted.', 'info');
  };

  const togglePublishMedia = (id: string) => {
    setMedia(prev => prev.map(m => m.id === id ? { ...m, published: !m.published } : m));
  };

  // Reports Handlers
  const addReport = (item: Omit<ReportItem, 'id'>) => {
    const newReport: ReportItem = {
      ...item,
      id: 'rep-' + Date.now()
    };
    setReports(prev => [newReport, ...prev]);
    showToast(lang === 'ur' ? 'رپورٹ کامیابی سے شامل کی گئی' : 'Report published successfully.');
  };

  const updateReport = (id: string, updated: Partial<ReportItem>) => {
    setReports(prev => prev.map(r => r.id === id ? { ...r, ...updated } : r));
    showToast(lang === 'ur' ? 'رپورٹ اپ ڈیٹ ہو گئی' : 'Report updated.');
  };

  const deleteReport = (id: string) => {
    setReports(prev => prev.filter(r => r.id !== id));
    showToast(lang === 'ur' ? 'رپورٹ حذف کر دی گئی' : 'Report deleted.', 'info');
  };

  const togglePublishReport = (id: string) => {
    setReports(prev => prev.map(r => r.id === id ? { ...r, published: !r.published } : r));
  };

  // Disease Handlers
  const addDisease = (item: Omit<Disease, 'id'>) => {
    const newDisease: Disease = {
      ...item,
      id: 'disease-' + Date.now()
    };
    setDiseases(prev => [newDisease, ...prev]);
    showToast(lang === 'ur' ? 'بیماری کی معلومات شامل کر دی گئی ہیں' : 'Disease record added successfully.');
  };

  const updateDisease = (id: string, updated: Partial<Disease>) => {
    setDiseases(prev => prev.map(d => d.id === id ? { ...d, ...updated } : d));
    showToast(lang === 'ur' ? 'بیماری کا ریکارڈ اپ ڈیٹ ہو گیا' : 'Disease record updated.');
  };

  const deleteDisease = (id: string) => {
    setDiseases(prev => prev.filter(d => d.id !== id));
    showToast(lang === 'ur' ? 'بیماری کا ریکارڈ حذف کر دیا گیا' : 'Disease record deleted.', 'info');
  };

  const togglePublishDisease = (id: string) => {
    setDiseases(prev => prev.map(d => d.id === id ? { ...d, published: !d.published } : d));
  };

  // Newsletter Subscription
  const subscribeNewsletter = (email: string): { success: boolean; message: string } => {
    const trimmed = email.trim().toLowerCase();
    if (!trimmed || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(trimmed)) {
      const msg = lang === 'ur' ? 'براہِ کرم درست ای میل پتہ درج کریں' : 'Please enter a valid email address.';
      showToast(msg, 'error');
      return { success: false, message: msg };
    }

    if (subscribers.some(s => s.email.toLowerCase() === trimmed)) {
      const msg = lang === 'ur' ? 'یہ ای میل پہلے سے سبسکرائب ہے' : 'This email is already subscribed.';
      showToast(msg, 'info');
      return { success: true, message: msg };
    }

    const newSub: Subscriber = {
      id: 'sub-' + Date.now(),
      email: trimmed,
      subscribedAt: new Date().toISOString().split('T')[0],
      active: true
    };

    setSubscribers(prev => [newSub, ...prev]);
    const successMsg = translations[lang].subscribedSuccess;
    showToast(successMsg, 'success');
    return { success: true, message: successMsg };
  };

  const deleteSubscriber = (id: string) => {
    setSubscribers(prev => prev.filter(s => s.id !== id));
    showToast(lang === 'ur' ? 'سبسکرائبر خارج کر دیا گیا' : 'Subscriber removed.');
  };

  // Settings & Profile
  const updateSettings = (newSettings: Partial<SiteSettings>) => {
    setSettings(prev => ({ ...prev, ...newSettings }));
    showToast(lang === 'ur' ? 'ویب سائٹ کی ترتیبات محفوظ ہو گئیں' : 'Site settings updated successfully.');
  };

  const updateDrProfile = (newProfile: Partial<DrProfile>) => {
    setDrProfile(prev => ({ ...prev, ...newProfile }));
    showToast(lang === 'ur' ? 'ڈاکٹر مشتاق احمد شاہ کی پروفائل اپ ڈیٹ ہو گئی' : 'Dr. Mushtaque Ahmed Shah profile updated.');
  };

  // Backup & Restore
  const exportDataBackup = () => {
    const backupObj = {
      version: '1.0',
      exportedAt: new Date().toISOString(),
      diseases,
      news,
      media,
      reports,
      drProfile,
      settings,
      subscribers
    };
    const blob = new Blob([JSON.stringify(backupObj, null, 2)], { type: 'application/json' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `PublicHealthPlus_Backup_${new Date().toISOString().split('T')[0]}.json`;
    a.click();
    URL.revokeObjectURL(url);
    showToast(lang === 'ur' ? 'بیک اپ فائل ڈاؤن لوڈ ہو گئی' : 'Data backup exported successfully.');
  };

  const importDataBackup = (jsonString: string): boolean => {
    try {
      const data = JSON.parse(jsonString);
      if (data.diseases) setDiseases(data.diseases);
      if (data.news) setNews(data.news);
      if (data.media) setMedia(data.media);
      if (data.reports) setReports(data.reports);
      if (data.drProfile) setDrProfile(data.drProfile);
      if (data.settings) setSettings(data.settings);
      if (data.subscribers) setSubscribers(data.subscribers);
      showToast(lang === 'ur' ? 'ڈیٹا بحال کر دیا گیا ہے' : 'Data restored successfully from backup.');
      return true;
    } catch {
      showToast(lang === 'ur' ? 'بیک اپ فائل درست نہیں ہے' : 'Invalid backup file format.', 'error');
      return false;
    }
  };

  const resetToDefaults = () => {
    setDiseases(initialDiseases);
    setNews(initialNews);
    setMedia(initialMedia);
    setReports(initialReports);
    setDrProfile(initialDrProfile);
    setSettings(initialSiteSettings);
    setSubscribers(initialSubscribers);
    showToast(lang === 'ur' ? 'تمام ڈیٹا اصل حالت پر بحال کر دیا گیا ہے' : 'All data reset to initial public health defaults.');
  };

  return (
    <AppContext.Provider
      value={{
        lang,
        setLang,
        t: translations[lang],
        currentPage,
        setCurrentPage,
        selectedDisease,
        setSelectedDisease,
        selectedNews,
        setSelectedNews,
        selectedReport,
        setSelectedReport,
        selectedMedia,
        setSelectedMedia,
        selectedTopic,
        setSelectedTopic,
        isSearchOpen,
        setIsSearchOpen,
        searchQuery,
        setSearchQuery,
        shareModalItem,
        setShareModalItem,
        diseases,
        news,
        media,
        reports,
        healthTopics,
        drProfile,
        settings,
        subscribers,
        isAdminLoggedIn,
        loginAdmin,
        logoutAdmin,
        addNews,
        updateNews,
        deleteNews,
        togglePublishNews,
        addMedia,
        updateMedia,
        deleteMedia,
        togglePublishMedia,
        addReport,
        updateReport,
        deleteReport,
        togglePublishReport,
        addDisease,
        updateDisease,
        deleteDisease,
        togglePublishDisease,
        subscribeNewsletter,
        deleteSubscriber,
        updateSettings,
        updateDrProfile,
        exportDataBackup,
        importDataBackup,
        resetToDefaults,
        toasts,
        showToast,
        removeToast
      }}
    >
      {children}
    </AppContext.Provider>
  );
};

const useApp = () => {
  const context = useContext(AppContext);
  if (!context) {
    throw new Error('useApp must be used within an AppProvider');
  }
  return context;
};


// ===== src/components/Header.tsx =====




const Header: React.FC = () => {
  const { lang, setLang, t, currentPage, setCurrentPage, setIsSearchOpen, isAdminLoggedIn, settings } = useApp();
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);

  const navItems: { id: NavPage; label: string }[] = [
    { id: 'home', label: t.navHome },
    { id: 'diseases', label: t.navDiseases },
    { id: 'news', label: t.navNews },
    { id: 'media', label: t.navMedia },
    { id: 'reports', label: t.navReports },
    { id: 'about', label: t.navAbout },
  ];

  const handleNavClick = (page: NavPage) => {
    setCurrentPage(page);
    setIsMobileMenuOpen(false);
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  const isRTL = lang === 'ur';

  return (
    <header className="sticky top-0 z-40 bg-white/95 backdrop-blur-md border-b border-slate-200/80 shadow-xs">
      {/* Top Institutional Bar */}
      <div className="bg-slate-900 text-slate-300 text-xs py-1.5 px-4 sm:px-8">
        <div className="max-w-7xl mx-auto flex items-center justify-between">
          <div className="flex items-center gap-2">
            <span className="inline-flex items-center justify-center w-2 h-2 rounded-full bg-teal-400 animate-pulse" />
            <span className="font-medium tracking-wide text-slate-200">
              {lang === 'ur' ? settings.taglineUr : settings.taglineEn}
            </span>
          </div>

          <div className="flex items-center gap-4">
            {isAdminLoggedIn ? (
              <button
                onClick={() => handleNavClick('admin')}
                className="inline-flex items-center gap-1.5 text-teal-300 hover:text-teal-200 transition-colors font-medium cursor-pointer"
              >
                <UserCheck className="w-3.5 h-3.5 text-teal-400" />
                <span>{lang === 'ur' ? 'ایڈمن موڈ فعال' : 'Admin Active'}</span>
              </button>
            ) : (
              <button
                onClick={() => handleNavClick('admin')}
                className="inline-flex items-center gap-1 text-slate-400 hover:text-slate-200 transition-colors cursor-pointer text-[11px]"
              >
                <Lock className="w-3 h-3" />
                <span>{t.navAdmin}</span>
              </button>
            )}
          </div>
        </div>
      </div>

      {/* Main Navigation Bar */}
      <div className="max-w-7xl mx-auto px-4 sm:px-8">
        <div className="flex items-center justify-between h-20">
          {/* Logo & Identity */}
          <div 
            onClick={() => handleNavClick('home')}
            className="flex items-center gap-3 cursor-pointer group select-none"
          >
            <div className="w-11 h-11 rounded-xl bg-gradient-to-br from-teal-600 to-sky-800 text-white flex items-center justify-center shadow-md shadow-teal-900/10 group-hover:scale-105 transition-transform duration-200">
              <div className="relative flex items-center justify-center">
                <Shield className="w-6 h-6 text-white stroke-[2.2]" />
                <Activity className="w-3.5 h-3.5 text-teal-200 absolute stroke-[2.5]" />
              </div>
            </div>

            <div className="flex flex-col">
              <div className="flex items-center gap-1.5">
                <span className="font-extrabold text-xl tracking-tight text-slate-900 group-hover:text-teal-700 transition-colors font-sans">
                  {settings.logoText || 'PUBLIC HEALTH PLUS'}
                </span>
                <span className="w-1.5 h-1.5 rounded-full bg-teal-600" />
              </div>
              <span className="text-[11px] font-medium text-slate-500 tracking-wider uppercase">
                {lang === 'ur' ? 'مستند عوامی صحت کی رہنمائی' : 'Institutional Public Health Platform'}
              </span>
            </div>
          </div>

          {/* Desktop Navigation Links */}
          <nav className="hidden lg:flex items-center gap-1 xl:gap-2">
            {navItems.map((item) => {
              const isActive = currentPage === item.id;
              return (
                <button
                  key={item.id}
                  onClick={() => handleNavClick(item.id)}
                  className={`px-3.5 py-2 rounded-lg text-sm font-semibold tracking-wide transition-all duration-150 cursor-pointer ${
                    isActive
                      ? 'bg-teal-50 text-teal-800 font-bold border border-teal-200/60 shadow-xs'
                      : 'text-slate-700 hover:text-slate-950 hover:bg-slate-100/70'
                  } ${isRTL ? 'urdu-text text-base' : ''}`}
                >
                  {item.label}
                </button>
              );
            })}
          </nav>

          {/* Right Action Controls: Language & Search */}
          <div className="flex items-center gap-2 sm:gap-3">
            {/* Language Selector Toggle */}
            <div className="flex items-center bg-slate-100/90 p-1 rounded-lg border border-slate-200">
              <button
                onClick={() => setLang('en')}
                className={`px-2.5 py-1 text-xs font-bold rounded-md transition-all cursor-pointer ${
                  lang === 'en'
                    ? 'bg-white text-teal-800 shadow-xs border border-slate-200/60'
                    : 'text-slate-600 hover:text-slate-900'
                }`}
                title="Switch to English"
              >
                EN
              </button>
              <button
                onClick={() => setLang('ur')}
                className={`px-2.5 py-1 text-xs font-bold rounded-md transition-all cursor-pointer ${
                  lang === 'ur'
                    ? 'bg-white text-teal-800 shadow-xs border border-slate-200/60 urdu-text'
                    : 'text-slate-600 hover:text-slate-900 urdu-text'
                }`}
                title="اردو میں دیکھیں"
              >
                اردو
              </button>
            </div>

            {/* Instant Search Button */}
            <button
              onClick={() => setIsSearchOpen(true)}
              className="p-2.5 rounded-lg text-slate-700 hover:text-slate-950 bg-slate-100/80 hover:bg-slate-200/70 border border-slate-200 transition-colors flex items-center gap-2 cursor-pointer"
              title={t.searchPlaceholder}
              aria-label="Search"
            >
              <Search className="w-4 h-4 text-slate-600" />
              <span className="hidden md:inline-block text-xs font-medium text-slate-500">
                {lang === 'ur' ? 'تلاش کریں' : 'Search...'}
              </span>
            </button>

            {/* Mobile Hamburger Button */}
            <button
              onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
              className="lg:hidden p-2.5 rounded-lg text-slate-700 hover:text-slate-950 bg-slate-100 border border-slate-200 transition-colors cursor-pointer"
              aria-label="Toggle navigation menu"
            >
              {isMobileMenuOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
            </button>
          </div>
        </div>
      </div>

      {/* Mobile Drawer Menu */}
      {isMobileMenuOpen && (
        <div className="lg:hidden bg-white border-b border-slate-200 px-4 pt-2 pb-6 shadow-xl animate-in slide-in-from-top-2 duration-200">
          <div className="flex flex-col gap-1.5">
            {navItems.map((item) => {
              const isActive = currentPage === item.id;
              return (
                <button
                  key={item.id}
                  onClick={() => handleNavClick(item.id)}
                  className={`text-left px-4 py-3 rounded-xl text-sm font-semibold transition-all cursor-pointer flex items-center justify-between ${
                    isActive
                      ? 'bg-teal-50 text-teal-800 font-bold border border-teal-200'
                      : 'text-slate-700 hover:bg-slate-50'
                  } ${isRTL ? 'urdu-text text-base text-right' : ''}`}
                >
                  <span>{item.label}</span>
                  {isActive && <span className="w-2 h-2 rounded-full bg-teal-600" />}
                </button>
              );
            })}

            <div className="pt-3 mt-2 border-t border-slate-100 flex items-center justify-between px-2">
              <span className="text-xs text-slate-500 font-medium">
                {lang === 'ur' ? 'زبان منتخب کریں:' : 'Platform Language:'}
              </span>
              <div className="flex items-center gap-1">
                <button
                  onClick={() => setLang('en')}
                  className={`px-3 py-1.5 text-xs font-bold rounded-lg ${
                    lang === 'en' ? 'bg-teal-700 text-white' : 'bg-slate-100 text-slate-700'
                  }`}
                >
                  English
                </button>
                <button
                  onClick={() => setLang('ur')}
                  className={`px-3 py-1.5 text-xs font-bold rounded-lg urdu-text ${
                    lang === 'ur' ? 'bg-teal-700 text-white' : 'bg-slate-100 text-slate-700'
                  }`}
                >
                  اردو
                </button>
              </div>
            </div>
          </div>
        </div>
      )}
    </header>
  );
};


// ===== src/components/Hero.tsx =====



const Hero: React.FC = () => {
  const { lang, t, setCurrentPage, settings } = useApp();
  const isRTL = lang === 'ur';
  const ArrowIcon = isRTL ? ArrowLeft : ArrowRight;

  return (
    <section className="relative overflow-hidden bg-gradient-to-b from-slate-900 via-slate-900 to-slate-950 text-white pt-12 pb-20 md:pt-16 md:pb-28">
      {/* Subtle Background Pattern */}
      <div className="absolute inset-0 opacity-10 pointer-events-none bg-[radial-gradient(#14b8a6_1px,transparent_1px)] [background-size:24px_24px]" />
      
      {/* Decorative Gradient Glows */}
      <div className="absolute top-1/4 -left-20 w-96 h-96 bg-teal-500/10 rounded-full blur-3xl pointer-events-none" />
      <div className="absolute bottom-10 right-0 w-96 h-96 bg-sky-500/10 rounded-full blur-3xl pointer-events-none" />

      <div className="max-w-7xl mx-auto px-4 sm:px-8 relative z-10">
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-8 items-center">
          
          {/* Left Column: Heading, Subtitle, Copy, Dual CTAs */}
          <div className="lg:col-span-7 space-y-6 text-center lg:text-left">
            {/* Mission Chip */}
            <div className={`inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-teal-950/80 border border-teal-700/60 text-teal-300 text-xs font-semibold tracking-wide shadow-xs ${isRTL ? 'urdu-text' : ''}`}>
              <ShieldCheck className="w-4 h-4 text-teal-400" />
              <span>{lang === 'ur' ? 'شواہد پر مبنی عوامی صحت کا پلیٹ فارم' : 'Evidence-Informed Public Health Platform'}</span>
            </div>

            {/* Main Brand Title */}
            <div className="space-y-3">
              <h1 className="text-4xl sm:text-5xl lg:text-6xl font-extrabold tracking-tight text-white leading-tight font-sans">
                {settings.logoText || 'PUBLIC HEALTH PLUS'}
              </h1>
              
              <p className={`text-lg sm:text-xl font-medium text-teal-300 ${isRTL ? 'urdu-text' : ''}`}>
                {lang === 'ur' ? settings.taglineUr : settings.taglineEn}
              </p>
            </div>

            {/* Introduction */}
            <p className={`text-slate-300 text-base sm:text-lg leading-relaxed max-w-2xl mx-auto lg:mx-0 ${isRTL ? 'urdu-text text-xl leading-loose' : ''}`}>
              {t.heroIntro}
            </p>

            {/* Dual CTA Buttons */}
            <div className="flex flex-col sm:flex-row items-center justify-center lg:justify-start gap-4 pt-3">
              <button
                onClick={() => {
                  setCurrentPage('diseases');
                  window.scrollTo({ top: 0, behavior: 'smooth' });
                }}
                className={`w-full sm:w-auto px-7 py-3.5 rounded-xl bg-teal-600 hover:bg-teal-500 text-white font-bold text-sm tracking-wide shadow-lg shadow-teal-900/30 transition-all duration-200 flex items-center justify-center gap-2 cursor-pointer hover:scale-[1.02] active:scale-[0.98] ${isRTL ? 'urdu-text text-base' : ''}`}
              >
                <HeartPulse className="w-5 h-5 text-white" />
                <span>{t.exploreDiseasesBtn}</span>
                <ArrowIcon className="w-4 h-4" />
              </button>

              <button
                onClick={() => {
                  setCurrentPage('news');
                  window.scrollTo({ top: 0, behavior: 'smooth' });
                }}
                className={`w-full sm:w-auto px-7 py-3.5 rounded-xl bg-slate-800 hover:bg-slate-700 text-slate-100 hover:text-white border border-slate-700 font-semibold text-sm tracking-wide shadow-xs transition-all duration-200 flex items-center justify-center gap-2 cursor-pointer ${isRTL ? 'urdu-text text-base' : ''}`}
              >
                <BookOpen className="w-4 h-4 text-teal-400" />
                <span>{t.latestNewsBtn}</span>
              </button>
            </div>

            {/* Quality Commitment Badges */}
            <div className="pt-6 border-t border-slate-800/80 flex flex-wrap items-center justify-center lg:justify-start gap-6 text-xs text-slate-400">
              <div className="flex items-center gap-2">
                <CheckCircle className="w-4 h-4 text-teal-400" />
                <span>{lang === 'ur' ? 'طبی اعتبار سے مصدقہ' : 'Clinically Verified'}</span>
              </div>
              <div className="flex items-center gap-2">
                <CheckCircle className="w-4 h-4 text-teal-400" />
                <span>{lang === 'ur' ? 'عوامی آگاہی و تدارک' : 'Prevention Focused'}</span>
              </div>
              <div className="flex items-center gap-2">
                <CheckCircle className="w-4 h-4 text-teal-400" />
                <span>{lang === 'ur' ? 'غیر جانبدار اور آزاد' : 'Independent Knowledge'}</span>
              </div>
            </div>
          </div>

          {/* Right Column: Institutional Public Health Visual */}
          <div className="lg:col-span-5 flex justify-center">
            <div className="relative w-full max-w-md">
              {/* Outer Glow Ring */}
              <div className="absolute -inset-1 rounded-3xl bg-gradient-to-r from-teal-500 to-sky-600 opacity-20 blur-xl" />

              {/* Main Card */}
              <div className="relative bg-slate-900/90 border border-slate-800/90 rounded-2xl p-6 sm:p-7 shadow-2xl backdrop-blur-xl space-y-5">
                {/* Visual Header */}
                <div className="flex items-center justify-between border-b border-slate-800 pb-4">
                  <div className="flex items-center gap-2.5">
                    <div className="w-9 h-9 rounded-lg bg-teal-500/10 text-teal-400 flex items-center justify-center">
                      <HeartPulse className="w-5 h-5" />
                    </div>
                    <div>
                      <h2 className="text-sm font-bold text-white font-sans">
                        {lang === 'ur' ? 'پبلک ہیلتھ ترجیحات' : 'Public Health Focus'}
                      </h2>
                      <p className="text-[11px] text-slate-400">
                        {lang === 'ur' ? 'بچاؤ اور بر وقت تشخیص' : 'Prevention & Timely Intervention'}
                      </p>
                    </div>
                  </div>
                  <span className="text-[11px] px-2.5 py-1 rounded-full bg-teal-900/60 text-teal-300 font-semibold border border-teal-700/50">
                    2026 Core
                  </span>
                </div>

                {/* Pillar 1: Communicable Vector Defense */}
                <div className="bg-slate-800/60 rounded-xl p-3.5 border border-slate-700/50 flex items-start gap-3">
                  <div className="w-8 h-8 rounded-lg bg-rose-500/10 text-rose-400 flex items-center justify-center shrink-0 mt-0.5 font-bold text-xs">
                    01
                  </div>
                  <div className="space-y-0.5">
                    <h3 className="text-xs font-bold text-slate-200">
                      {lang === 'ur' ? 'متعدی امراض کی روک تھام' : 'Communicable Disease Control'}
                    </h3>
                    <p className="text-[11px] text-slate-400 leading-snug">
                      {lang === 'ur' ? 'ڈینگی، ملیریا، ٹی بی اور ہیپاٹائٹس کے ویکٹرز اور ٹرانسمیشن کا سدباب۔' : 'Actionable vectors & transmission management for Dengue, TB, Hepatitis & Malaria.'}
                    </p>
                  </div>
                </div>

                {/* Pillar 2: Chronic NCD Screening */}
                <div className="bg-slate-800/60 rounded-xl p-3.5 border border-slate-700/50 flex items-start gap-3">
                  <div className="w-8 h-8 rounded-lg bg-teal-500/10 text-teal-400 flex items-center justify-center shrink-0 mt-0.5 font-bold text-xs">
                    02
                  </div>
                  <div className="space-y-0.5">
                    <h3 className="text-xs font-bold text-slate-200">
                      {lang === 'ur' ? 'غیر متعدی امراض کی اسکریننگ' : 'Non-Communicable (NCD) Prevention'}
                    </h3>
                    <p className="text-[11px] text-slate-400 leading-snug">
                      {lang === 'ur' ? 'ہائیپرٹینشن، ذیابیطس، امراضِ قلب اور کینسر کی بر وقت تشخیص۔' : 'Hypertension, diabetes, stroke prevention & lifestyle interventions.'}
                    </p>
                  </div>
                </div>

                {/* Pillar 3: Research & Evidence */}
                <div className="bg-slate-800/60 rounded-xl p-3.5 border border-slate-700/50 flex items-start gap-3">
                  <div className="w-8 h-8 rounded-lg bg-sky-500/10 text-sky-400 flex items-center justify-center shrink-0 mt-0.5 font-bold text-xs">
                    03
                  </div>
                  <div className="space-y-0.5">
                    <h3 className="text-xs font-bold text-slate-200">
                      {lang === 'ur' ? 'شواہد پر مبنی پالیسی اور رپورٹس' : 'Evidence-Informed Reports & Bulletins'}
                    </h3>
                    <p className="text-[11px] text-slate-400 leading-snug">
                      {lang === 'ur' ? 'ایپیڈیمیولوجیکل ڈیٹا اور کمیونٹی کے لیے مستند گائیڈ لائنز۔' : 'Epidemiological studies and public health guidance by Dr. Mushtaque Ahmed Shah.'}
                    </p>
                  </div>
                </div>

                {/* Interactive Status Indicator */}
                <div className="pt-2 flex items-center justify-between text-xs text-slate-400 border-t border-slate-800">
                  <span className="flex items-center gap-1.5">
                    <span className="w-2 h-2 rounded-full bg-teal-400" />
                    {lang === 'ur' ? 'پلیٹ فارم فعال ہے' : 'Active Public Repository'}
                  </span>
                  <button
                    onClick={() => {
                      setCurrentPage('about');
                      window.scrollTo({ top: 0, behavior: 'smooth' });
                    }}
                    className="text-teal-400 hover:text-teal-300 font-semibold cursor-pointer"
                  >
                    {lang === 'ur' ? 'ہمارے بارے میں مزید →' : 'Learn More →'}
                  </button>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>
    </section>
  );
};


// ===== src/components/NewsSection.tsx =====



const NewsSection: React.FC = () => {
  const { lang, t, news, setCurrentPage, setSelectedNews } = useApp();
  const isRTL = lang === 'ur';
  const ArrowIcon = isRTL ? ArrowLeft : ArrowRight;

  // Filter only published news and sort by date desc, taking latest 3 or 4
  const publishedNews = news
    .filter(n => n.published)
    .slice(0, 3);

  if (publishedNews.length === 0) {
    return null;
  }

  return (
    <section className="py-16 md:py-24 bg-white border-b border-slate-200/80">
      <div className="max-w-7xl mx-auto px-4 sm:px-8">
        
        {/* Section Header */}
        <div className="flex flex-col md:flex-row md:items-end justify-between gap-4 mb-12">
          <div className="space-y-2">
            <div className="inline-flex items-center gap-2 text-teal-700 text-xs font-extrabold uppercase tracking-wider">
              <Newspaper className="w-4 h-4" />
              <span>{t.sectionNewsTitle}</span>
            </div>
            <h2 className={`text-2xl sm:text-3xl lg:text-4xl font-extrabold text-slate-900 tracking-tight ${isRTL ? 'urdu-heading' : ''}`}>
              {t.sectionNewsTitle}
            </h2>
            <p className={`text-slate-600 text-sm sm:text-base max-w-2xl ${isRTL ? 'urdu-text' : ''}`}>
              {t.sectionNewsSubtitle}
            </p>
          </div>

          <button
            onClick={() => {
              setCurrentPage('news');
              window.scrollTo({ top: 0, behavior: 'smooth' });
            }}
            className={`inline-flex items-center gap-2 text-teal-700 hover:text-teal-900 font-bold text-sm hover:underline cursor-pointer self-start md:self-auto ${isRTL ? 'urdu-text text-base' : ''}`}
          >
            <span>{t.viewAllNewsBtn}</span>
          </button>
        </div>

        {/* Dynamic 3-Card Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {publishedNews.map((article) => {
            return (
              <article
                key={article.id}
                className="bg-white rounded-2xl border border-slate-200/90 shadow-xs hover:shadow-lg hover:border-teal-300 transition-all duration-200 flex flex-col overflow-hidden group"
              >
                {/* Featured Image */}
                <div 
                  onClick={() => setSelectedNews(article)}
                  className="h-48 w-full overflow-hidden bg-slate-100 relative cursor-pointer"
                >
                  <img
                    src={article.featuredImage}
                    alt={article.title}
                    referrerPolicy="no-referrer"
                    className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
                  />
                  <div className="absolute top-3 left-3 rtl:left-auto rtl:right-3">
                    <span className="px-2.5 py-1 rounded-md bg-slate-900/80 backdrop-blur-sm text-teal-300 text-xs font-bold border border-slate-700/60">
                      {lang === 'ur' ? article.categoryUrdu : article.category}
                    </span>
                  </div>
                </div>

                {/* Content */}
                <div className="p-6 flex-1 flex flex-col justify-between space-y-4">
                  <div className="space-y-2.5">
                    {/* Meta date */}
                    <div className="flex items-center gap-3 text-xs text-slate-500 font-medium">
                      <span className="flex items-center gap-1">
                        <Calendar className="w-3.5 h-3.5 text-teal-600" />
                        {article.date}
                      </span>
                      <span>•</span>
                      <span className="flex items-center gap-1">
                        <Clock className="w-3.5 h-3.5 text-slate-400" />
                        {article.readTime}
                      </span>
                    </div>

                    {/* Title */}
                    <h3 
                      onClick={() => setSelectedNews(article)}
                      className={`text-lg font-bold text-slate-900 group-hover:text-teal-700 transition-colors leading-snug line-clamp-2 cursor-pointer ${isRTL ? 'urdu-heading' : ''}`}
                    >
                      {lang === 'ur' ? article.titleUrdu : article.title}
                    </h3>

                    {/* Short Description */}
                    <p className={`text-slate-600 text-xs sm:text-sm line-clamp-3 leading-relaxed ${isRTL ? 'urdu-text' : ''}`}>
                      {lang === 'ur' ? article.summaryUrdu : article.summary}
                    </p>
                  </div>

                  {/* Read More Action */}
                  <div className="pt-3 border-t border-slate-100 flex items-center justify-between">
                    <button
                      onClick={() => setSelectedNews(article)}
                      className={`inline-flex items-center gap-1.5 text-xs font-bold text-teal-700 group-hover:text-teal-900 hover:underline cursor-pointer ${isRTL ? 'urdu-text' : ''}`}
                    >
                      <span>{t.readMoreBtn}</span>
                      <ArrowIcon className="w-3.5 h-3.5 group-hover:translate-x-1 rtl:group-hover:-translate-x-1 transition-transform" />
                    </button>
                    <span className="text-[11px] text-slate-400 font-medium">
                      {article.author.split(',')[0]}
                    </span>
                  </div>
                </div>
              </article>
            );
          })}
        </div>

        {/* Bottom CTA on mobile */}
        <div className="mt-8 text-center md:hidden">
          <button
            onClick={() => {
              setCurrentPage('news');
              window.scrollTo({ top: 0, behavior: 'smooth' });
            }}
            className={`w-full py-3 px-6 rounded-xl bg-slate-100 text-teal-800 font-bold text-sm border border-slate-200 cursor-pointer ${isRTL ? 'urdu-text' : ''}`}
          >
            {t.viewAllNewsBtn}
          </button>
        </div>

      </div>
    </section>
  );
};


// ===== src/components/DiseasesSection.tsx =====




const DiseasesSection: React.FC = () => {
  const { lang, t, diseases, setCurrentPage, setSelectedDisease } = useApp();
  const [activeCategory, setActiveCategory] = useState<'communicable' | 'non-communicable'>('communicable');

  const isRTL = lang === 'ur';
  const ArrowIcon = isRTL ? ArrowLeft : ArrowRight;

  const publishedDiseases = diseases.filter(d => d.published);
  
  // Filter by category for homepage preview (take 4 most prominent)
  const categoryDiseases = publishedDiseases
    .filter(d => d.category === activeCategory)
    .slice(0, 4);

  return (
    <section className="py-16 md:py-24 bg-slate-50 border-b border-slate-200/80">
      <div className="max-w-7xl mx-auto px-4 sm:px-8">
        
        {/* Section Header */}
        <div className="flex flex-col md:flex-row md:items-end justify-between gap-4 mb-10">
          <div className="space-y-2">
            <div className="inline-flex items-center gap-2 text-teal-700 text-xs font-extrabold uppercase tracking-wider">
              <HeartPulse className="w-4 h-4" />
              <span>{t.sectionDiseasesTitle}</span>
            </div>
            <h2 className={`text-2xl sm:text-3xl lg:text-4xl font-extrabold text-slate-900 tracking-tight ${isRTL ? 'urdu-heading' : ''}`}>
              {t.sectionDiseasesTitle}
            </h2>
            <p className={`text-slate-600 text-sm sm:text-base max-w-2xl ${isRTL ? 'urdu-text' : ''}`}>
              {t.sectionDiseasesSubtitle}
            </p>
          </div>

          <button
            onClick={() => {
              setCurrentPage('diseases');
              window.scrollTo({ top: 0, behavior: 'smooth' });
            }}
            className={`inline-flex items-center gap-2 text-teal-700 hover:text-teal-900 font-bold text-sm hover:underline cursor-pointer self-start md:self-auto ${isRTL ? 'urdu-text text-base' : ''}`}
          >
            <span>{t.exploreDiseasesHubBtn}</span>
          </button>
        </div>

        {/* 2 Major Categories Switcher Tabs */}
        <div className="flex items-center gap-3 mb-8">
          <button
            onClick={() => setActiveCategory('communicable')}
            className={`px-5 py-3 rounded-xl font-bold text-xs sm:text-sm transition-all duration-200 flex items-center gap-2 cursor-pointer shadow-xs ${
              activeCategory === 'communicable'
                ? 'bg-teal-700 text-white shadow-teal-900/20'
                : 'bg-white text-slate-700 hover:bg-slate-100 border border-slate-200'
            } ${isRTL ? 'urdu-text' : ''}`}
          >
            <ShieldAlert className="w-4 h-4" />
            <span>{t.communicableTitle}</span>
          </button>

          <button
            onClick={() => setActiveCategory('non-communicable')}
            className={`px-5 py-3 rounded-xl font-bold text-xs sm:text-sm transition-all duration-200 flex items-center gap-2 cursor-pointer shadow-xs ${
              activeCategory === 'non-communicable'
                ? 'bg-teal-700 text-white shadow-teal-900/20'
                : 'bg-white text-slate-700 hover:bg-slate-100 border border-slate-200'
            } ${isRTL ? 'urdu-text' : ''}`}
          >
            <Activity className="w-4 h-4" />
            <span>{t.nonCommunicableTitle}</span>
          </button>
        </div>

        {/* Category Description Banner */}
        <div className="bg-white p-4 rounded-xl border border-slate-200/90 mb-8 text-xs sm:text-sm text-slate-600 font-medium">
          {activeCategory === 'communicable' ? t.communicableDesc : t.nonCommunicableDesc}
        </div>

        {/* 4 Cards Grid */}
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
          {categoryDiseases.map((disease) => {
            return (
              <div
                key={disease.id}
                onClick={() => setSelectedDisease(disease)}
                className="bg-white rounded-2xl p-6 border border-slate-200 shadow-xs hover:shadow-xl hover:border-teal-400 transition-all duration-200 flex flex-col justify-between group cursor-pointer"
              >
                <div className="space-y-3">
                  <div className="flex items-center justify-between">
                    <span className="text-[11px] font-bold uppercase tracking-wider px-2.5 py-1 rounded-md bg-teal-50 text-teal-800 border border-teal-100">
                      {activeCategory === 'communicable' 
                        ? (lang === 'ur' ? 'متعدی' : 'Infectious') 
                        : (lang === 'ur' ? 'دائمی' : 'Chronic NCD')}
                    </span>
                    <ArrowIcon className="w-4 h-4 text-slate-300 group-hover:text-teal-600 group-hover:translate-x-1 rtl:group-hover:-translate-x-1 transition-all" />
                  </div>

                  <h3 className={`text-lg font-bold text-slate-900 group-hover:text-teal-800 transition-colors ${isRTL ? 'urdu-heading' : ''}`}>
                    {lang === 'ur' ? disease.nameUrdu : disease.name}
                  </h3>

                  <p className={`text-xs text-slate-500 line-clamp-3 leading-relaxed ${isRTL ? 'urdu-text' : ''}`}>
                    {lang === 'ur' ? disease.shortSummaryUrdu : disease.shortSummary}
                  </p>
                </div>

                {/* Bottom preview info */}
                <div className="pt-4 mt-4 border-t border-slate-100 space-y-2">
                  <div className="flex items-center gap-1.5 text-[11px] text-teal-700 font-semibold">
                    <CheckCircle2 className="w-3.5 h-3.5" />
                    <span>{lang === 'ur' ? 'کلینیکل پروٹوکول و بچاؤ' : 'Clinical & Prevention Guide'}</span>
                  </div>
                  <span className="text-xs font-bold text-slate-700 group-hover:text-teal-700 flex items-center gap-1">
                    {t.viewDiseaseGuide}
                  </span>
                </div>
              </div>
            );
          })}
        </div>

        {/* Bottom CTA for full disease hub */}
        <div className="mt-10 text-center">
          <button
            onClick={() => {
              setCurrentPage('diseases');
              window.scrollTo({ top: 0, behavior: 'smooth' });
            }}
            className={`px-8 py-3.5 rounded-xl bg-teal-700 hover:bg-teal-800 text-white font-bold text-sm shadow-md shadow-teal-900/10 transition-all cursor-pointer inline-flex items-center gap-2 ${isRTL ? 'urdu-text text-base' : ''}`}
          >
            <HeartPulse className="w-4 h-4" />
            <span>{t.exploreDiseasesHubBtn}</span>
          </button>
        </div>

      </div>
    </section>
  );
};


// ===== src/components/CommunitySection.tsx =====




const CommunitySection: React.FC = () => {
  const { lang, t, healthTopics, setCurrentPage, setSelectedTopic } = useApp();
  const isRTL = lang === 'ur';
  const ArrowIcon = isRTL ? ArrowLeft : ArrowRight;

  const getIcon = (name: string) => {
    switch (name) {
      case 'Sparkles': return <Sparkles className="w-5 h-5 text-teal-600" />;
      case 'ShieldCheck': return <ShieldCheck className="w-5 h-5 text-teal-600" />;
      case 'Activity': return <Activity className="w-5 h-5 text-teal-600" />;
      case 'Apple': return <Apple className="w-5 h-5 text-teal-600" />;
      case 'Droplet': return <Droplet className="w-5 h-5 text-teal-600" />;
      default: return <Sparkles className="w-5 h-5 text-teal-600" />;
    }
  };

  return (
    <section className="py-16 md:py-20 bg-white border-b border-slate-200/80">
      <div className="max-w-7xl mx-auto px-4 sm:px-8">
        
        {/* Section Header */}
        <div className="flex flex-col md:flex-row md:items-end justify-between gap-4 mb-10">
          <div className="space-y-2">
            <div className="inline-flex items-center gap-2 text-rose-600 text-xs font-extrabold uppercase tracking-wider">
              <HeartHandshake className="w-4 h-4" />
              <span>{t.sectionCommunityTitle}</span>
            </div>
            <h2 className={`text-2xl sm:text-3xl lg:text-4xl font-extrabold text-slate-900 tracking-tight ${isRTL ? 'urdu-heading' : ''}`}>
              {t.sectionCommunityTitle}
            </h2>
            <p className={`text-slate-600 text-sm sm:text-base max-w-2xl ${isRTL ? 'urdu-text' : ''}`}>
              {t.sectionCommunitySubtitle}
            </p>
          </div>

          <button
            onClick={() => {
              setCurrentPage('community');
              window.scrollTo({ top: 0, behavior: 'smooth' });
            }}
            className={`inline-flex items-center gap-2 text-teal-700 hover:text-teal-900 font-bold text-sm hover:underline cursor-pointer self-start md:self-auto ${isRTL ? 'urdu-text text-base' : ''}`}
          >
            <span>{t.exploreHealthTopicsBtn}</span>
          </button>
        </div>

        {/* 5 Small Topic Cards */}
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4 sm:gap-5">
          {healthTopics.map((topic) => {
            return (
              <div
                key={topic.id}
                onClick={() => setSelectedTopic(topic)}
                className="p-5 rounded-2xl border border-slate-200 bg-slate-50/50 hover:bg-white hover:border-teal-400 hover:shadow-lg transition-all duration-200 cursor-pointer flex flex-col justify-between group"
              >
                <div className="space-y-3">
                  <div className="w-10 h-10 rounded-xl bg-teal-100 text-teal-700 flex items-center justify-center group-hover:bg-teal-600 group-hover:text-white transition-colors">
                    {getIcon(topic.iconName)}
                  </div>

                  <h3 className={`font-bold text-slate-900 text-base group-hover:text-teal-800 transition-colors ${isRTL ? 'urdu-heading' : ''}`}>
                    {lang === 'ur' ? topic.titleUrdu : topic.title}
                  </h3>

                  <p className={`text-xs text-slate-500 line-clamp-2 leading-relaxed ${isRTL ? 'urdu-text' : ''}`}>
                    {lang === 'ur' ? topic.taglineUrdu : topic.tagline}
                  </p>
                </div>

                <div className="pt-3 mt-3 border-t border-slate-200/60 flex items-center justify-between text-xs font-semibold text-teal-700 group-hover:text-teal-900">
                  <span>{lang === 'ur' ? 'رہنمائی دیکھیں' : 'View Guide'}</span>
                  <ArrowIcon className="w-3.5 h-3.5 group-hover:translate-x-1 rtl:group-hover:-translate-x-1 transition-transform" />
                </div>
              </div>
            );
          })}
        </div>

      </div>
    </section>
  );
};


// ===== src/components/MediaSection.tsx =====




const MediaSection: React.FC = () => {
  const { lang, t, media, setCurrentPage, setSelectedMedia, setShareModalItem } = useApp();
  const isRTL = lang === 'ur';
  const ArrowIcon = isRTL ? ArrowLeft : ArrowRight;

  const publishedMedia = media.filter(m => m.published).slice(0, 4);

  if (publishedMedia.length === 0) return null;

  const handleShare = (e: React.MouseEvent, item: MediaItem) => {
    e.stopPropagation();
    setShareModalItem({
      title: lang === 'ur' ? item.titleUrdu : item.title,
      url: `${window.location.origin}/#media-${item.id}`,
      type: item.type === 'video' ? 'Educational Video' : 'Health Infographic'
    });
  };

  return (
    <section className="py-16 md:py-24 bg-slate-900 text-white border-b border-slate-800">
      <div className="max-w-7xl mx-auto px-4 sm:px-8">
        
        {/* Section Header */}
        <div className="flex flex-col md:flex-row md:items-end justify-between gap-4 mb-12">
          <div className="space-y-2">
            <div className="inline-flex items-center gap-2 text-teal-400 text-xs font-extrabold uppercase tracking-wider">
              <Film className="w-4 h-4" />
              <span>{t.sectionMediaTitle}</span>
            </div>
            <h2 className={`text-2xl sm:text-3xl lg:text-4xl font-extrabold text-white tracking-tight ${isRTL ? 'urdu-heading' : ''}`}>
              {t.sectionMediaTitle}
            </h2>
            <p className={`text-slate-400 text-sm sm:text-base max-w-2xl ${isRTL ? 'urdu-text' : ''}`}>
              {t.sectionMediaSubtitle}
            </p>
          </div>

          <button
            onClick={() => {
              setCurrentPage('media');
              window.scrollTo({ top: 0, behavior: 'smooth' });
            }}
            className={`inline-flex items-center gap-2 text-teal-400 hover:text-teal-300 font-bold text-sm hover:underline cursor-pointer self-start md:self-auto ${isRTL ? 'urdu-text text-base' : ''}`}
          >
            <span>{t.viewAllMediaBtn}</span>
          </button>
        </div>

        {/* 4 Items Grid */}
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
          {publishedMedia.map((item) => {
            const isVideo = item.type === 'video';
            const displayThumb = item.thumbnailUrl || item.url;
            return (
              <div
                key={item.id}
                onClick={() => setSelectedMedia(item)}
                className="bg-slate-800/80 rounded-2xl border border-slate-700/80 overflow-hidden hover:border-teal-400/80 transition-all duration-200 flex flex-col justify-between group cursor-pointer shadow-lg"
              >
                {/* Visual Thumbnail */}
                <div className="relative h-44 w-full overflow-hidden bg-slate-950">
                  <img
                    src={displayThumb}
                    alt={item.title}
                    referrerPolicy="no-referrer"
                    className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300 opacity-90 group-hover:opacity-100"
                  />

                  {/* Top Badges */}
                  <div className="absolute top-2.5 left-2.5 rtl:left-auto rtl:right-2.5 flex items-center gap-1.5">
                    <span className="px-2 py-0.5 rounded-md bg-black/70 backdrop-blur-sm text-teal-300 text-[10px] font-bold uppercase tracking-wider flex items-center gap-1">
                      {isVideo ? <Film className="w-3 h-3" /> : <ImageIcon className="w-3 h-3" />}
                      <span>{isVideo ? (lang === 'ur' ? 'ویڈیو' : 'Video') : (lang === 'ur' ? 'تصویر' : 'Image')}</span>
                    </span>
                  </div>

                  {/* Play / View Overlay Icon */}
                  <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
                    <div className="w-11 h-11 rounded-full bg-teal-600/90 text-white flex items-center justify-center shadow-lg group-hover:scale-110 transition-transform">
                      {isVideo ? <Play className="w-5 h-5 fill-white ml-0.5" /> : <Eye className="w-5 h-5" />}
                    </div>
                  </div>

                  {/* Video duration if exists */}
                  {item.duration && (
                    <span className="absolute bottom-2 right-2 rtl:right-auto rtl:left-2 px-1.5 py-0.5 rounded bg-black/80 text-white text-[10px] font-mono">
                      {item.duration}
                    </span>
                  )}
                </div>

                {/* Body Content */}
                <div className="p-5 flex-1 flex flex-col justify-between space-y-3">
                  <div className="space-y-1.5">
                    <span className="text-[11px] font-semibold text-teal-400">
                      {lang === 'ur' ? item.topicUrdu : item.topic}
                    </span>
                    <h3 className={`font-bold text-white text-sm group-hover:text-teal-300 transition-colors line-clamp-2 ${isRTL ? 'urdu-heading' : ''}`}>
                      {lang === 'ur' ? item.titleUrdu : item.title}
                    </h3>
                  </div>

                  {/* Bottom Share & Action */}
                  <div className="pt-3 border-t border-slate-700/60 flex items-center justify-between">
                    <span className="text-xs font-semibold text-slate-400 group-hover:text-white flex items-center gap-1">
                      {isVideo ? t.watchVideo : t.viewImage}
                    </span>
                    <button
                      onClick={(e) => handleShare(e, item)}
                      className="p-1.5 rounded-lg text-slate-400 hover:text-teal-300 hover:bg-slate-700 transition-colors"
                      title={t.shareContent}
                    >
                      <Share2 className="w-3.5 h-3.5" />
                    </button>
                  </div>
                </div>
              </div>
            );
          })}
        </div>

        {/* Bottom CTA on mobile */}
        <div className="mt-8 text-center md:hidden">
          <button
            onClick={() => {
              setCurrentPage('media');
              window.scrollTo({ top: 0, behavior: 'smooth' });
            }}
            className={`w-full py-3 px-6 rounded-xl bg-slate-800 text-teal-300 font-bold text-sm border border-slate-700 cursor-pointer ${isRTL ? 'urdu-text' : ''}`}
          >
            {t.viewAllMediaBtn}
          </button>
        </div>

      </div>
    </section>
  );
};


// ===== src/components/ReportsSection.tsx =====




const ReportsSection: React.FC = () => {
  const { lang, t, reports, setCurrentPage, setSelectedReport, setShareModalItem, showToast } = useApp();
  const isRTL = lang === 'ur';
  const ArrowIcon = isRTL ? ArrowLeft : ArrowRight;

  const publishedReports = reports.filter(r => r.published).slice(0, 3);

  if (publishedReports.length === 0) return null;

  const handleDownload = (e: React.MouseEvent, report: ReportItem) => {
    e.stopPropagation();
    showToast(lang === 'ur' ? 'رپورٹ ڈاؤن لوڈ کی جا رہی ہے...' : 'Initiating document download...', 'info');
    window.open(report.downloadUrl, '_blank');
  };

  const handleShare = (e: React.MouseEvent, report: ReportItem) => {
    e.stopPropagation();
    setShareModalItem({
      title: lang === 'ur' ? report.titleUrdu : report.title,
      url: `${window.location.origin}/#report-${report.id}`,
      type: 'Research Report'
    });
  };

  return (
    <section className="py-16 md:py-24 bg-slate-50 border-b border-slate-200/80">
      <div className="max-w-7xl mx-auto px-4 sm:px-8">
        
        {/* Section Header */}
        <div className="flex flex-col md:flex-row md:items-end justify-between gap-4 mb-12">
          <div className="space-y-2">
            <div className="inline-flex items-center gap-2 text-indigo-700 text-xs font-extrabold uppercase tracking-wider">
              <FileText className="w-4 h-4" />
              <span>{t.sectionReportsTitle}</span>
            </div>
            <h2 className={`text-2xl sm:text-3xl lg:text-4xl font-extrabold text-slate-900 tracking-tight ${isRTL ? 'urdu-heading' : ''}`}>
              {t.sectionReportsTitle}
            </h2>
            <p className={`text-slate-600 text-sm sm:text-base max-w-2xl ${isRTL ? 'urdu-text' : ''}`}>
              {t.sectionReportsSubtitle}
            </p>
          </div>

          <button
            onClick={() => {
              setCurrentPage('reports');
              window.scrollTo({ top: 0, behavior: 'smooth' });
            }}
            className={`inline-flex items-center gap-2 text-indigo-700 hover:text-indigo-900 font-bold text-sm hover:underline cursor-pointer self-start md:self-auto ${isRTL ? 'urdu-text text-base' : ''}`}
          >
            <span>{t.viewAllReportsBtn}</span>
          </button>
        </div>

        {/* Reports 3-Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {publishedReports.map((report) => {
            return (
              <div
                key={report.id}
                onClick={() => setSelectedReport(report)}
                className="bg-white rounded-2xl p-6 border border-slate-200 shadow-xs hover:shadow-xl hover:border-indigo-300 transition-all duration-200 flex flex-col justify-between group cursor-pointer"
              >
                <div className="space-y-4">
                  {/* Category and File Size */}
                  <div className="flex items-center justify-between">
                    <span className="text-[11px] font-bold uppercase tracking-wider px-2.5 py-1 rounded-md bg-indigo-50 text-indigo-800 border border-indigo-100">
                      {lang === 'ur' ? report.categoryUrdu : report.category}
                    </span>
                    <span className="text-xs text-slate-400 font-mono">
                      {report.fileSize}
                    </span>
                  </div>

                  {/* Title */}
                  <h3 className={`text-lg font-bold text-slate-900 group-hover:text-indigo-900 transition-colors leading-snug ${isRTL ? 'urdu-heading' : ''}`}>
                    {lang === 'ur' ? report.titleUrdu : report.title}
                  </h3>

                  {/* Description */}
                  <p className={`text-xs text-slate-600 line-clamp-3 leading-relaxed ${isRTL ? 'urdu-text' : ''}`}>
                    {lang === 'ur' ? report.descriptionUrdu : report.description}
                  </p>
                </div>

                {/* Bottom Action Strip */}
                <div className="pt-4 mt-5 border-t border-slate-100 flex items-center justify-between">
                  <button
                    onClick={(e) => handleDownload(e, report)}
                    className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-indigo-50 hover:bg-indigo-100 text-indigo-800 text-xs font-bold transition-colors cursor-pointer"
                  >
                    <Download className="w-3.5 h-3.5" />
                    <span>{t.downloadPdfBtn}</span>
                  </button>

                  <div className="flex items-center gap-1">
                    <button
                      onClick={(e) => handleShare(e, report)}
                      className="p-1.5 rounded-lg text-slate-400 hover:text-indigo-700 hover:bg-slate-100 transition-colors"
                      title={t.shareContent}
                    >
                      <Share2 className="w-3.5 h-3.5" />
                    </button>
                    <ArrowIcon className="w-4 h-4 text-slate-300 group-hover:text-indigo-600 transition-colors" />
                  </div>
                </div>
              </div>
            );
          })}
        </div>

        {/* Bottom CTA on mobile */}
        <div className="mt-8 text-center md:hidden">
          <button
            onClick={() => {
              setCurrentPage('reports');
              window.scrollTo({ top: 0, behavior: 'smooth' });
            }}
            className={`w-full py-3 px-6 rounded-xl bg-slate-100 text-indigo-800 font-bold text-sm border border-slate-200 cursor-pointer ${isRTL ? 'urdu-text' : ''}`}
          >
            {t.viewAllReportsBtn}
          </button>
        </div>

      </div>
    </section>
  );
};


// ===== src/components/NewsletterSection.tsx =====



const NewsletterSection: React.FC = () => {
  const { lang, t, addSubscriber, showToast } = useApp();
  const [email, setEmail] = useState('');
  const [isSubmitted, setIsSubmitted] = useState(false);

  const isRTL = lang === 'ur';
  const ArrowIcon = isRTL ? ArrowLeft : ArrowRight;

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!email || !email.includes('@')) {
      showToast(lang === 'ur' ? 'براہ کرم درست ای میل درج کریں۔' : 'Please enter a valid email address.', 'error');
      return;
    }

    const success = addSubscriber(email);
    if (success) {
      setIsSubmitted(true);
      showToast(t.subscribeSuccess, 'success');
      setEmail('');
    } else {
      showToast(lang === 'ur' ? 'یہ ای میل پہلے سے سبسکرائب ہے۔' : 'This email is already subscribed.', 'info');
    }
  };

  return (
    <section className="py-16 md:py-24 bg-gradient-to-br from-teal-900 via-slate-900 to-slate-950 text-white relative overflow-hidden">
      {/* Background Decorative Rings */}
      <div className="absolute -right-20 -top-20 w-80 h-80 bg-teal-500/10 rounded-full blur-3xl pointer-events-none" />
      <div className="absolute -left-20 -bottom-20 w-80 h-80 bg-sky-500/10 rounded-full blur-3xl pointer-events-none" />

      <div className="max-w-4xl mx-auto px-4 sm:px-8 relative z-10 text-center space-y-6">
        
        {/* Badge */}
        <div className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-teal-800/60 border border-teal-600/50 text-teal-300 text-xs font-semibold">
          <Mail className="w-3.5 h-3.5" />
          <span>{t.newsletterTitle}</span>
        </div>

        {/* Heading & Subtitle */}
        <div className="space-y-3">
          <h2 className={`text-2xl sm:text-3xl lg:text-4xl font-extrabold text-white tracking-tight ${isRTL ? 'urdu-heading' : ''}`}>
            {t.newsletterTitle}
          </h2>
          <p className={`text-slate-300 text-sm sm:text-base max-w-xl mx-auto ${isRTL ? 'urdu-text' : ''}`}>
            {t.newsletterSubtitle}
          </p>
        </div>

        {/* Form or Success State */}
        {isSubmitted ? (
          <div className="p-6 bg-teal-900/60 border border-teal-500/50 rounded-2xl max-w-lg mx-auto space-y-2 animate-in zoom-in-95 duration-200">
            <CheckCircle className="w-8 h-8 text-teal-300 mx-auto" />
            <h3 className={`text-lg font-bold text-white ${isRTL ? 'urdu-heading' : ''}`}>
              {t.subscribeSuccess}
            </h3>
            <p className="text-xs text-teal-200">
              {lang === 'ur' ? 'آپ کو نئی الرٹس اور پبلک ہیلتھ رپورٹس موصول ہوں گی۔' : 'You will receive newly released advisories and reports directly.'}
            </p>
          </div>
        ) : (
          <form onSubmit={handleSubmit} className="max-w-lg mx-auto">
            <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-3 bg-slate-900/90 p-2 rounded-2xl border border-slate-700 shadow-xl backdrop-blur-md">
              <div className="relative flex-1">
                <Mail className="w-5 h-5 text-slate-400 absolute left-3.5 rtl:left-auto rtl:right-3.5 top-1/2 -translate-y-1/2" />
                <input
                  type="email"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  placeholder={t.newsletterPlaceholder}
                  required
                  className={`w-full pl-11 pr-4 rtl:pl-4 rtl:pr-11 py-3 bg-transparent text-white placeholder:text-slate-400 font-medium text-sm focus:outline-none ${isRTL ? 'urdu-text' : ''}`}
                />
              </div>

              <button
                type="submit"
                className={`px-6 py-3.5 rounded-xl bg-teal-500 hover:bg-teal-400 text-slate-950 font-extrabold text-sm transition-all duration-200 flex items-center justify-center gap-2 cursor-pointer shadow-md shrink-0 ${isRTL ? 'urdu-text' : ''}`}
              >
                <span>{t.subscribeBtn}</span>
                <ArrowIcon className="w-4 h-4" />
              </button>
            </div>
          </form>
        )}

        {/* Privacy Note */}
        <p className="text-xs text-slate-400 flex items-center justify-center gap-1.5">
          <ShieldCheck className="w-4 h-4 text-teal-400" />
          <span>{lang === 'ur' ? 'ہم آپ کی پرائیویسی کا احترام کرتے ہیں اور کبھی سپام نہیں بھیجتے۔' : 'No spam. Strictly verified evidence-informed health bulletins.'}</span>
        </p>

      </div>
    </section>
  );
};


// ===== src/components/Footer.tsx =====




const Footer: React.FC = () => {
  const { lang, t, setCurrentPage, settings, drProfile } = useApp();

  const handleNav = (page: NavPage) => {
    setCurrentPage(page);
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  const isRTL = lang === 'ur';

  return (
    <footer className="bg-slate-950 text-slate-400 pt-16 pb-12 border-t border-slate-800">
      <div className="max-w-7xl mx-auto px-4 sm:px-8">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10 pb-12 border-b border-slate-800/80">
          {/* Col 1: Institutional Identity */}
          <div className="space-y-4">
            <div className="flex items-center gap-3">
              <div className="w-10 h-10 rounded-xl bg-teal-600 text-white flex items-center justify-center shadow-md">
                <div className="relative flex items-center justify-center">
                  <Shield className="w-5 h-5 text-white" />
                  <Activity className="w-3 h-3 text-teal-200 absolute" />
                </div>
              </div>
              <span className="font-extrabold text-lg tracking-tight text-white font-sans">
                {settings.logoText || 'PUBLIC HEALTH PLUS'}
              </span>
            </div>

            <p className="text-xs text-teal-400 font-semibold tracking-wide">
              {lang === 'ur' ? settings.taglineUr : settings.taglineEn}
            </p>

            <p className="text-xs text-slate-400 leading-relaxed">
              {lang === 'ur'
                ? 'کمیونٹیز اور طبی عملے کے لیے قابلِ اعتماد، شواہد پر مبنی اور آسان فہم معلوماتِ صحت کا آزاد پلیٹ فارم۔'
                : 'Reliable, understandable and evidence-informed health information for communities, health professionals and decision-makers.'}
            </p>
          </div>

          {/* Col 2: Contact & Leadership */}
          <div className="space-y-4">
            <h4 className="text-sm font-bold text-white tracking-wider uppercase">
              {t.contactHeading}
            </h4>

            <div className="space-y-2.5 text-xs">
              <div>
                <p className="font-bold text-slate-200 text-sm">
                  {lang === 'ur' ? drProfile.nameUrdu : drProfile.name}
                </p>
                <p className="text-teal-400 font-medium">
                  {lang === 'ur' ? drProfile.titleUrdu : drProfile.title}
                </p>
                <p className="text-slate-500 text-[11px]">
                  {lang === 'ur' ? drProfile.qualificationsUrdu : drProfile.qualifications}
                </p>
              </div>

              {settings.address && (
                <div className="flex items-start gap-2 pt-1 text-slate-300">
                  <MapPin className="w-4 h-4 text-teal-400 shrink-0 mt-0.5" />
                  <span className="leading-snug">{settings.address}</span>
                </div>
              )}

              {settings.email && (
                <div className="flex items-center gap-2 text-slate-300">
                  <Mail className="w-4 h-4 text-teal-400 shrink-0" />
                  <a href={`mailto:${settings.email}`} className="hover:text-teal-300 transition-colors">
                    {settings.email}
                  </a>
                </div>
              )}

              {settings.phone && (
                <div className="flex items-center gap-2 text-slate-300">
                  <Phone className="w-4 h-4 text-teal-400 shrink-0" />
                  <a href={`tel:${settings.phone}`} className="hover:text-teal-300 transition-colors">
                    {settings.phone}
                  </a>
                </div>
              )}
            </div>
          </div>

          {/* Col 3: Quick Navigation Links */}
          <div className="space-y-4">
            <h4 className="text-sm font-bold text-white tracking-wider uppercase">
              {t.quickLinksHeading}
            </h4>

            <ul className="space-y-2 text-xs font-medium">
              <li>
                <button
                  onClick={() => handleNav('home')}
                  className="hover:text-teal-300 transition-colors cursor-pointer text-slate-300"
                >
                  {t.navHome}
                </button>
              </li>
              <li>
                <button
                  onClick={() => handleNav('diseases')}
                  className="hover:text-teal-300 transition-colors cursor-pointer text-slate-300"
                >
                  {t.navDiseases}
                </button>
              </li>
              <li>
                <button
                  onClick={() => handleNav('news')}
                  className="hover:text-teal-300 transition-colors cursor-pointer text-slate-300"
                >
                  {t.navNews}
                </button>
              </li>
              <li>
                <button
                  onClick={() => handleNav('media')}
                  className="hover:text-teal-300 transition-colors cursor-pointer text-slate-300"
                >
                  {t.navMedia}
                </button>
              </li>
              <li>
                <button
                  onClick={() => handleNav('reports')}
                  className="hover:text-teal-300 transition-colors cursor-pointer text-slate-300"
                >
                  {t.navReports}
                </button>
              </li>
              <li>
                <button
                  onClick={() => handleNav('about')}
                  className="hover:text-teal-300 transition-colors cursor-pointer text-slate-300"
                >
                  {t.navAbout}
                </button>
              </li>
            </ul>
          </div>

          {/* Col 4: Social Media & Mission */}
          <div className="space-y-4">
            <h4 className="text-sm font-bold text-white tracking-wider uppercase">
              {t.socialMediaHeading}
            </h4>

            <div className="flex items-center gap-3">
              {settings.socialLinks.facebook && (
                <a
                  href={settings.socialLinks.facebook}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="w-9 h-9 rounded-lg bg-slate-900 border border-slate-800 hover:border-teal-500 hover:bg-slate-800 text-slate-300 hover:text-white flex items-center justify-center transition-all"
                  aria-label="Facebook"
                >
                  <Facebook className="w-4 h-4" />
                </a>
              )}

              {settings.socialLinks.youtube && (
                <a
                  href={settings.socialLinks.youtube}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="w-9 h-9 rounded-lg bg-slate-900 border border-slate-800 hover:border-red-500 hover:bg-slate-800 text-slate-300 hover:text-white flex items-center justify-center transition-all"
                  aria-label="YouTube"
                >
                  <Youtube className="w-4 h-4" />
                </a>
              )}

              {settings.socialLinks.linkedin && (
                <a
                  href={settings.socialLinks.linkedin}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="w-9 h-9 rounded-lg bg-slate-900 border border-slate-800 hover:border-blue-500 hover:bg-slate-800 text-slate-300 hover:text-white flex items-center justify-center transition-all"
                  aria-label="LinkedIn"
                >
                  <Linkedin className="w-4 h-4" />
                </a>
              )}

              {/* TikTok custom icon representation */}
              {settings.socialLinks.tiktok && (
                <a
                  href={settings.socialLinks.tiktok}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="w-9 h-9 rounded-lg bg-slate-900 border border-slate-800 hover:border-teal-400 hover:bg-slate-800 text-slate-300 hover:text-white flex items-center justify-center transition-all text-xs font-bold"
                  aria-label="TikTok"
                >
                  TT
                </a>
              )}
            </div>

            <div className="pt-2">
              <p className="text-[11px] text-slate-400 leading-normal">
                {t.disclaimer}
              </p>
            </div>
          </div>
        </div>

        {/* Bottom Bar */}
        <div className="pt-8 flex flex-col sm:flex-row items-center justify-between gap-4 text-xs text-slate-400">
          <p className="text-center sm:text-left">
            {t.rightsReserved}
          </p>

          <div className="flex items-center gap-6">
            <button
              onClick={() => handleNav('about')}
              className="hover:text-slate-200 transition-colors cursor-pointer"
            >
              {lang === 'ur' ? 'ڈاکٹر مشتاق احمد شاہ کا تعارف' : 'Dr. Mushtaque Ahmed Shah Profile'}
            </button>
            <span className="text-slate-800">•</span>
            <button
              onClick={() => handleNav('admin')}
              className="hover:text-teal-300 text-slate-400 flex items-center gap-1.5 transition-colors cursor-pointer"
            >
              <Lock className="w-3.5 h-3.5" />
              <span>{t.adminPortalLink}</span>
            </button>
          </div>
        </div>
      </div>
    </footer>
  );
};


// ===== src/components/DiseasesView.tsx =====




const DiseasesView: React.FC = () => {
  const { lang, t, diseases, setSelectedDisease, setCurrentPage } = useApp();
  const [filterCategory, setFilterCategory] = useState<'all' | 'communicable' | 'non-communicable'>('all');
  const [searchQuery, setSearchQuery] = useState<string>('');

  const isRTL = lang === 'ur';
  const ArrowIcon = isRTL ? ArrowLeft : ArrowRight;

  const publishedDiseases = diseases.filter(d => d.published);

  const filtered = publishedDiseases.filter(d => {
    const matchesCategory = filterCategory === 'all' || d.category === filterCategory;
    const q = searchQuery.toLowerCase().trim();
    const matchesSearch = !q ||
      d.name.toLowerCase().includes(q) ||
      d.nameUrdu.includes(q) ||
      d.shortSummary.toLowerCase().includes(q) ||
      d.shortSummaryUrdu.includes(q) ||
      d.symptoms.some(s => s.toLowerCase().includes(q)) ||
      d.symptomsUrdu.some(s => s.includes(q));
    return matchesCategory && matchesSearch;
  });

  const communicableCount = publishedDiseases.filter(d => d.category === 'communicable').length;
  const nonCommunicableCount = publishedDiseases.filter(d => d.category === 'non-communicable').length;

  return (
    <div className="py-12 md:py-20 bg-slate-50 min-h-screen">
      <div className="max-w-7xl mx-auto px-4 sm:px-8 space-y-10">
        
        {/* Header Breadcrumb & Title */}
        <div className="space-y-3">
          <button
            onClick={() => {
              setCurrentPage('home');
              window.scrollTo({ top: 0, behavior: 'smooth' });
            }}
            className="text-xs font-bold text-teal-700 hover:text-teal-900 flex items-center gap-1 cursor-pointer"
          >
            {t.backToHome}
          </button>
          
          <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
            <div>
              <h1 className={`text-3xl sm:text-4xl font-extrabold text-slate-900 tracking-tight ${isRTL ? 'urdu-heading' : ''}`}>
                {t.sectionDiseasesTitle}
              </h1>
              <p className={`text-slate-600 text-sm sm:text-base mt-1 ${isRTL ? 'urdu-text' : ''}`}>
                {t.sectionDiseasesSubtitle}
              </p>
            </div>
            <span className="text-xs font-semibold px-3.5 py-1.5 rounded-full bg-teal-100 text-teal-800 self-start md:self-auto border border-teal-200">
              {publishedDiseases.length} {lang === 'ur' ? 'مکمل طبی رہنمائیاں' : 'Clinical Disease Guides'}
            </span>
          </div>
        </div>

        {/* Search & Filter Toolbar */}
        <div className="bg-white rounded-2xl p-4 sm:p-5 border border-slate-200 shadow-xs flex flex-col md:flex-row items-stretch md:items-center justify-between gap-4">
          {/* Search box */}
          <div className="relative flex-1">
            <Search className="w-4 h-4 text-slate-400 absolute left-3.5 rtl:left-auto rtl:right-3.5 top-1/2 -translate-y-1/2" />
            <input
              type="text"
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              placeholder={lang === 'ur' ? 'بیماری کا نام یا علامت تلاش کریں...' : 'Search by disease name, symptom, or transmission...'}
              className="w-full pl-10 pr-4 rtl:pl-4 rtl:pr-10 py-2.5 rounded-xl border border-slate-200 focus:border-teal-500 focus:ring-1 focus:ring-teal-500 text-xs sm:text-sm font-medium"
            />
          </div>

          {/* Category Toggle Tabs */}
          <div className="flex items-center gap-2">
            <button
              onClick={() => setFilterCategory('all')}
              className={`px-3.5 py-2 rounded-lg text-xs font-bold transition-colors cursor-pointer ${
                filterCategory === 'all'
                  ? 'bg-teal-700 text-white'
                  : 'bg-slate-100 text-slate-700 hover:bg-slate-200'
              }`}
            >
              {t.all} ({publishedDiseases.length})
            </button>

            <button
              onClick={() => setFilterCategory('communicable')}
              className={`px-3.5 py-2 rounded-lg text-xs font-bold transition-colors flex items-center gap-1.5 cursor-pointer ${
                filterCategory === 'communicable'
                  ? 'bg-teal-700 text-white'
                  : 'bg-slate-100 text-slate-700 hover:bg-slate-200'
              }`}
            >
              <ShieldAlert className="w-3.5 h-3.5" />
              <span>{t.communicableTitle}</span>
              <span className="opacity-75">({communicableCount})</span>
            </button>

            <button
              onClick={() => setFilterCategory('non-communicable')}
              className={`px-3.5 py-2 rounded-lg text-xs font-bold transition-colors flex items-center gap-1.5 cursor-pointer ${
                filterCategory === 'non-communicable'
                  ? 'bg-teal-700 text-white'
                  : 'bg-slate-100 text-slate-700 hover:bg-slate-200'
              }`}
            >
              <Activity className="w-3.5 h-3.5" />
              <span>{t.nonCommunicableTitle}</span>
              <span className="opacity-75">({nonCommunicableCount})</span>
            </button>
          </div>
        </div>

        {/* Disease Cards Grid */}
        {filtered.length === 0 ? (
          <div className="text-center py-16 bg-white rounded-2xl border border-slate-200 space-y-3">
            <HeartPulse className="w-10 h-10 text-slate-300 mx-auto" />
            <p className="text-slate-600 text-sm font-medium">
              {lang === 'ur' ? 'کوئی متعلقہ بیماری نہیں ملی' : 'No disease guides match your search criteria.'}
            </p>
          </div>
        ) : (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {filtered.map((disease) => {
              const isComm = disease.category === 'communicable';
              return (
                <div
                  key={disease.id}
                  onClick={() => setSelectedDisease(disease)}
                  className="bg-white rounded-2xl p-6 border border-slate-200 shadow-xs hover:shadow-xl hover:border-teal-400 transition-all duration-200 flex flex-col justify-between group cursor-pointer"
                >
                  <div className="space-y-4">
                    <div className="flex items-center justify-between">
                      <span className={`text-[11px] font-bold uppercase tracking-wider px-2.5 py-1 rounded-md border ${
                        isComm
                          ? 'bg-rose-50 text-rose-800 border-rose-100'
                          : 'bg-teal-50 text-teal-800 border-teal-100'
                      }`}>
                        {isComm 
                          ? (lang === 'ur' ? 'متعدی بیماری' : 'Communicable') 
                          : (lang === 'ur' ? 'غیر متعدی' : 'Non-Communicable')}
                      </span>
                      <ArrowIcon className="w-4 h-4 text-slate-300 group-hover:text-teal-600 group-hover:translate-x-1 rtl:group-hover:-translate-x-1 transition-all" />
                    </div>

                    <div>
                      <h3 className={`text-xl font-bold text-slate-900 group-hover:text-teal-800 transition-colors ${isRTL ? 'urdu-heading' : ''}`}>
                        {lang === 'ur' ? disease.nameUrdu : disease.name}
                      </h3>
                      <p className={`text-xs text-slate-500 line-clamp-3 leading-relaxed mt-2 ${isRTL ? 'urdu-text' : ''}`}>
                        {lang === 'ur' ? disease.shortSummaryUrdu : disease.shortSummary}
                      </p>
                    </div>

                    {/* Key Symptom Preview Badge */}
                    <div className="bg-slate-50 p-3 rounded-xl border border-slate-100 space-y-1">
                      <span className="text-[10px] font-bold text-slate-500 uppercase tracking-wider">
                        {t.symptoms} ({lang === 'ur' ? 'اہم علامت' : 'Key Sign'}):
                      </span>
                      <p className="text-xs text-slate-700 font-medium line-clamp-1">
                        {(lang === 'ur' ? disease.symptomsUrdu : disease.symptoms)[0]}
                      </p>
                    </div>
                  </div>

                  {/* Card Bottom CTA */}
                  <div className="pt-4 mt-4 border-t border-slate-100 flex items-center justify-between">
                    <span className="text-xs font-bold text-teal-700 group-hover:text-teal-900 flex items-center gap-1">
                      {t.viewDiseaseGuide}
                    </span>
                    <span className="text-[11px] text-slate-400 font-medium">
                      8 {lang === 'ur' ? 'طبی عنوانات' : 'Pillars'}
                    </span>
                  </div>
                </div>
              );
            })}
          </div>
        )}

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


// ===== src/components/NewsView.tsx =====




const NewsView: React.FC = () => {
  const { lang, t, news, setSelectedNews, setCurrentPage } = useApp();
  const [selectedCategory, setSelectedCategory] = useState<string>('all');
  const [filterQuery, setFilterQuery] = useState<string>('');

  const isRTL = lang === 'ur';
  const ArrowIcon = isRTL ? ArrowLeft : ArrowRight;

  const publishedNews = news.filter(n => n.published);

  // Extract unique categories
  const categories = Array.from(new Set(publishedNews.map(n => n.category)));

  // Filtered
  const filteredList = publishedNews.filter(n => {
    const matchesCategory = selectedCategory === 'all' || n.category === selectedCategory;
    const query = filterQuery.toLowerCase().trim();
    const matchesSearch = !query || 
      n.title.toLowerCase().includes(query) || 
      n.titleUrdu.includes(query) ||
      n.summary.toLowerCase().includes(query) ||
      n.summaryUrdu.includes(query);
    return matchesCategory && matchesSearch;
  });

  return (
    <div className="py-12 md:py-20 bg-slate-50 min-h-screen">
      <div className="max-w-7xl mx-auto px-4 sm:px-8 space-y-10">
        
        {/* Header Breadcrumbs & Title */}
        <div className="space-y-3">
          <button
            onClick={() => {
              setCurrentPage('home');
              window.scrollTo({ top: 0, behavior: 'smooth' });
            }}
            className="text-xs font-bold text-teal-700 hover:text-teal-900 flex items-center gap-1 cursor-pointer"
          >
            {t.backToHome}
          </button>
          
          <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
            <div>
              <h1 className={`text-3xl sm:text-4xl font-extrabold text-slate-900 tracking-tight ${isRTL ? 'urdu-heading' : ''}`}>
                {t.sectionNewsTitle}
              </h1>
              <p className={`text-slate-600 text-sm sm:text-base mt-1 ${isRTL ? 'urdu-text' : ''}`}>
                {t.sectionNewsSubtitle}
              </p>
            </div>
            <span className="text-xs font-semibold px-3 py-1.5 rounded-full bg-teal-100 text-teal-800 self-start md:self-auto border border-teal-200">
              {filteredList.length} {lang === 'ur' ? 'شائع شدہ خبریں' : 'Published Articles'}
            </span>
          </div>
        </div>

        {/* Filter Controls Bar */}
        <div className="bg-white rounded-2xl p-4 sm:p-5 border border-slate-200 shadow-xs flex flex-col md:flex-row items-stretch md:items-center justify-between gap-4">
          
          {/* Search bar inside news */}
          <div className="relative flex-1">
            <Search className="w-4 h-4 text-slate-400 absolute left-3.5 rtl:left-auto rtl:right-3.5 top-1/2 -translate-y-1/2" />
            <input
              type="text"
              value={filterQuery}
              onChange={(e) => setFilterQuery(e.target.value)}
              placeholder={lang === 'ur' ? 'خبروں میں تلاش کریں...' : 'Search within news articles...'}
              className="w-full pl-10 pr-4 rtl:pl-4 rtl:pr-10 py-2.5 rounded-xl border border-slate-200 focus:border-teal-500 focus:ring-1 focus:ring-teal-500 text-xs sm:text-sm font-medium"
            />
          </div>

          {/* Category Filter Pills */}
          <div className="flex items-center gap-1.5 overflow-x-auto pb-1 md:pb-0">
            <button
              onClick={() => setSelectedCategory('all')}
              className={`px-3.5 py-1.5 rounded-lg text-xs font-bold whitespace-nowrap transition-colors cursor-pointer ${
                selectedCategory === 'all'
                  ? 'bg-teal-700 text-white'
                  : 'bg-slate-100 text-slate-600 hover:bg-slate-200'
              }`}
            >
              {t.all}
            </button>
            {categories.map((cat) => (
              <button
                key={cat}
                onClick={() => setSelectedCategory(cat)}
                className={`px-3.5 py-1.5 rounded-lg text-xs font-bold whitespace-nowrap transition-colors cursor-pointer ${
                  selectedCategory === cat
                    ? 'bg-teal-700 text-white'
                    : 'bg-slate-100 text-slate-600 hover:bg-slate-200'
                }`}
              >
                {cat}
              </button>
            ))}
          </div>

        </div>

        {/* News Grid */}
        {filteredList.length === 0 ? (
          <div className="text-center py-16 bg-white rounded-2xl border border-slate-200 space-y-3">
            <Newspaper className="w-10 h-10 text-slate-300 mx-auto" />
            <p className="text-slate-600 text-sm font-medium">
              {lang === 'ur' ? 'کوئی خبر دستیاب نہیں ہے' : 'No news articles match your filter criteria.'}
            </p>
          </div>
        ) : (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {filteredList.map((article) => (
              <article
                key={article.id}
                className="bg-white rounded-2xl border border-slate-200 shadow-xs hover:shadow-lg hover:border-teal-300 transition-all duration-200 flex flex-col overflow-hidden group"
              >
                <div 
                  onClick={() => setSelectedNews(article)}
                  className="h-52 w-full overflow-hidden bg-slate-100 relative cursor-pointer"
                >
                  <img
                    src={article.featuredImage}
                    alt={article.title}
                    referrerPolicy="no-referrer"
                    className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
                  />
                  <div className="absolute top-3 left-3 rtl:left-auto rtl:right-3">
                    <span className="px-2.5 py-1 rounded-md bg-slate-900/80 backdrop-blur-sm text-teal-300 text-xs font-bold border border-slate-700/60">
                      {lang === 'ur' ? article.categoryUrdu : article.category}
                    </span>
                  </div>
                </div>

                <div className="p-6 flex-1 flex flex-col justify-between space-y-4">
                  <div className="space-y-2.5">
                    <div className="flex items-center gap-3 text-xs text-slate-500 font-medium">
                      <span className="flex items-center gap-1">
                        <Calendar className="w-3.5 h-3.5 text-teal-600" />
                        {article.date}
                      </span>
                      <span>•</span>
                      <span className="flex items-center gap-1">
                        <Clock className="w-3.5 h-3.5 text-slate-400" />
                        {article.readTime}
                      </span>
                    </div>

                    <h3 
                      onClick={() => setSelectedNews(article)}
                      className={`text-lg font-bold text-slate-900 group-hover:text-teal-700 transition-colors leading-snug cursor-pointer ${isRTL ? 'urdu-heading' : ''}`}
                    >
                      {lang === 'ur' ? article.titleUrdu : article.title}
                    </h3>

                    <p className={`text-slate-600 text-xs sm:text-sm line-clamp-3 leading-relaxed ${isRTL ? 'urdu-text' : ''}`}>
                      {lang === 'ur' ? article.summaryUrdu : article.summary}
                    </p>
                  </div>

                  <div className="pt-3 border-t border-slate-100 flex items-center justify-between">
                    <button
                      onClick={() => setSelectedNews(article)}
                      className={`inline-flex items-center gap-1.5 text-xs font-bold text-teal-700 group-hover:text-teal-900 hover:underline cursor-pointer ${isRTL ? 'urdu-text' : ''}`}
                    >
                      <span>{t.readMoreBtn}</span>
                      <ArrowIcon className="w-3.5 h-3.5 group-hover:translate-x-1 rtl:group-hover:-translate-x-1 transition-transform" />
                    </button>
                    <span className="text-[11px] text-slate-400 font-medium">
                      {article.author.split(',')[0]}
                    </span>
                  </div>
                </div>
              </article>
            ))}
          </div>
        )}

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


// ===== src/components/MediaView.tsx =====




const MediaView: React.FC = () => {
  const { lang, t, media, setSelectedMedia, setShareModalItem, setCurrentPage } = useApp();
  const [mediaTypeFilter, setMediaTypeFilter] = useState<'all' | 'video' | 'image'>('all');
  const [searchFilter, setSearchFilter] = useState<string>('');

  const isRTL = lang === 'ur';

  const publishedMedia = media.filter(m => m.published);

  const filtered = publishedMedia.filter(item => {
    const matchesType = mediaTypeFilter === 'all' || item.type === mediaTypeFilter;
    const q = searchFilter.toLowerCase().trim();
    const matchesSearch = !q ||
      item.title.toLowerCase().includes(q) ||
      item.titleUrdu.includes(q) ||
      item.description.toLowerCase().includes(q) ||
      item.descriptionUrdu.includes(q) ||
      item.topic.toLowerCase().includes(q);
    return matchesType && matchesSearch;
  });

  const handleShare = (e: React.MouseEvent, item: MediaItem) => {
    e.stopPropagation();
    setShareModalItem({
      title: lang === 'ur' ? item.titleUrdu : item.title,
      url: `${window.location.origin}/#media-${item.id}`,
      type: item.type === 'video' ? 'Educational Video' : 'Health Infographic'
    });
  };

  return (
    <div className="py-12 md:py-20 bg-slate-900 text-white min-h-screen">
      <div className="max-w-7xl mx-auto px-4 sm:px-8 space-y-10">
        
        {/* Breadcrumbs & Title */}
        <div className="space-y-3">
          <button
            onClick={() => {
              setCurrentPage('home');
              window.scrollTo({ top: 0, behavior: 'smooth' });
            }}
            className="text-xs font-bold text-teal-400 hover:text-teal-300 flex items-center gap-1 cursor-pointer"
          >
            {t.backToHome}
          </button>
          
          <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
            <div>
              <h1 className={`text-3xl sm:text-4xl font-extrabold text-white tracking-tight ${isRTL ? 'urdu-heading' : ''}`}>
                {t.sectionMediaTitle}
              </h1>
              <p className={`text-slate-400 text-sm sm:text-base mt-1 ${isRTL ? 'urdu-text' : ''}`}>
                {t.sectionMediaSubtitle}
              </p>
            </div>
            <span className="text-xs font-semibold px-3.5 py-1.5 rounded-full bg-teal-950 text-teal-300 self-start md:self-auto border border-teal-800">
              {publishedMedia.length} {lang === 'ur' ? 'شائع شدہ میڈیا آئٹمز' : 'Verified Media Items'}
            </span>
          </div>
        </div>

        {/* Toolbar Filter */}
        <div className="bg-slate-800/90 rounded-2xl p-4 sm:p-5 border border-slate-700 shadow-lg flex flex-col md:flex-row items-stretch md:items-center justify-between gap-4">
          <div className="relative flex-1">
            <Search className="w-4 h-4 text-slate-400 absolute left-3.5 rtl:left-auto rtl:right-3.5 top-1/2 -translate-y-1/2" />
            <input
              type="text"
              value={searchFilter}
              onChange={(e) => setSearchFilter(e.target.value)}
              placeholder={lang === 'ur' ? 'ویڈیو یا تصویر کا عنوان تلاش کریں...' : 'Search videos, infographics, topics...'}
              className="w-full pl-10 pr-4 rtl:pl-4 rtl:pr-10 py-2.5 rounded-xl border border-slate-700 bg-slate-900 text-white placeholder:text-slate-500 focus:border-teal-500 text-xs sm:text-sm font-medium"
            />
          </div>

          <div className="flex items-center gap-2">
            <button
              onClick={() => setMediaTypeFilter('all')}
              className={`px-4 py-2 rounded-lg text-xs font-bold transition-colors cursor-pointer ${
                mediaTypeFilter === 'all'
                  ? 'bg-teal-600 text-white'
                  : 'bg-slate-900 text-slate-300 hover:bg-slate-700'
              }`}
            >
              {t.all}
            </button>
            <button
              onClick={() => setMediaTypeFilter('video')}
              className={`px-4 py-2 rounded-lg text-xs font-bold transition-colors flex items-center gap-1.5 cursor-pointer ${
                mediaTypeFilter === 'video'
                  ? 'bg-teal-600 text-white'
                  : 'bg-slate-900 text-slate-300 hover:bg-slate-700'
              }`}
            >
              <Film className="w-3.5 h-3.5" />
              <span>{lang === 'ur' ? 'ویڈیوز' : 'Videos'}</span>
            </button>
            <button
              onClick={() => setMediaTypeFilter('image')}
              className={`px-4 py-2 rounded-lg text-xs font-bold transition-colors flex items-center gap-1.5 cursor-pointer ${
                mediaTypeFilter === 'image'
                  ? 'bg-teal-600 text-white'
                  : 'bg-slate-900 text-slate-300 hover:bg-slate-700'
              }`}
            >
              <ImageIcon className="w-3.5 h-3.5" />
              <span>{lang === 'ur' ? 'تصاویر' : 'Images'}</span>
            </button>
          </div>
        </div>

        {/* Media Grid */}
        {filtered.length === 0 ? (
          <div className="text-center py-16 bg-slate-800 rounded-2xl border border-slate-700 space-y-3">
            <Film className="w-10 h-10 text-slate-500 mx-auto" />
            <p className="text-slate-400 text-sm font-medium">
              {lang === 'ur' ? 'کوئی میڈیا آئٹم نہیں ملا' : 'No media items match your search filters.'}
            </p>
          </div>
        ) : (
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
            {filtered.map((item) => {
              const isVideo = item.type === 'video';
              const displayThumb = item.thumbnailUrl || item.url;
              return (
                <div
                  key={item.id}
                  onClick={() => setSelectedMedia(item)}
                  className="bg-slate-800 rounded-2xl border border-slate-700 overflow-hidden hover:border-teal-400 transition-all duration-200 flex flex-col justify-between group cursor-pointer shadow-lg"
                >
                  <div className="relative h-52 w-full overflow-hidden bg-slate-950">
                    <img
                      src={displayThumb}
                      alt={item.title}
                      referrerPolicy="no-referrer"
                      className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
                    />

                    <div className="absolute top-3 left-3 rtl:left-auto rtl:right-3 flex items-center gap-1.5">
                      <span className="px-2.5 py-1 rounded-md bg-black/75 backdrop-blur-sm text-teal-300 text-xs font-bold uppercase tracking-wider flex items-center gap-1">
                        {isVideo ? <Film className="w-3.5 h-3.5" /> : <ImageIcon className="w-3.5 h-3.5" />}
                        <span>{isVideo ? (lang === 'ur' ? 'ویڈیو' : 'Video') : (lang === 'ur' ? 'تصویر' : 'Image')}</span>
                      </span>
                    </div>

                    <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
                      <div className="w-12 h-12 rounded-full bg-teal-600/90 text-white flex items-center justify-center shadow-lg group-hover:scale-110 transition-transform">
                        {isVideo ? <Play className="w-5 h-5 fill-white ml-0.5" /> : <Eye className="w-5 h-5" />}
                      </div>
                    </div>

                    {item.duration && (
                      <span className="absolute bottom-2.5 right-2.5 rtl:right-auto rtl:left-2.5 px-2 py-0.5 rounded bg-black/80 text-white text-xs font-mono">
                        {item.duration}
                      </span>
                    )}
                  </div>

                  <div className="p-6 flex-1 flex flex-col justify-between space-y-4">
                    <div className="space-y-2">
                      <div className="flex items-center justify-between text-xs text-teal-400 font-semibold">
                        <span>{lang === 'ur' ? item.topicUrdu : item.topic}</span>
                        <span className="text-slate-400 font-normal">{item.date}</span>
                      </div>
                      
                      <h3 className={`font-bold text-white text-base group-hover:text-teal-300 transition-colors leading-snug line-clamp-2 ${isRTL ? 'urdu-heading' : ''}`}>
                        {lang === 'ur' ? item.titleUrdu : item.title}
                      </h3>

                      <p className={`text-slate-400 text-xs line-clamp-2 leading-relaxed ${isRTL ? 'urdu-text' : ''}`}>
                        {lang === 'ur' ? item.descriptionUrdu : item.description}
                      </p>
                    </div>

                    <div className="pt-3 border-t border-slate-700/80 flex items-center justify-between">
                      <span className="text-xs font-semibold text-teal-300 group-hover:text-white flex items-center gap-1">
                        {isVideo ? t.watchVideo : t.viewImage}
                      </span>
                      <button
                        onClick={(e) => handleShare(e, item)}
                        className="p-2 rounded-lg text-slate-400 hover:text-teal-300 hover:bg-slate-700 transition-colors"
                        title={t.shareContent}
                      >
                        <Share2 className="w-4 h-4" />
                      </button>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        )}

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


// ===== src/components/ReportsView.tsx =====




const ReportsView: React.FC = () => {
  const { lang, t, reports, setSelectedReport, setShareModalItem, setCurrentPage, showToast } = useApp();
  const [selectedCat, setSelectedCat] = useState<string>('all');
  const [searchQuery, setSearchQuery] = useState<string>('');

  const isRTL = lang === 'ur';
  const ArrowIcon = isRTL ? ArrowLeft : ArrowRight;

  const publishedReports = reports.filter(r => r.published);

  // Available filter options specified in prompt
  const filterOptions = [
    { key: 'all', labelEn: 'All Reports', labelUr: 'تمام رپورٹس' },
    { key: 'Communicable Diseases', labelEn: 'Communicable Diseases', labelUr: 'متعدی امراض' },
    { key: 'Non-Communicable Diseases', labelEn: 'Non-Communicable Diseases', labelUr: 'غیر متعدی امراض' },
    { key: 'Policy & Systems', labelEn: 'Policy & Systems', labelUr: 'پالیسی اور نظام' },
    { key: 'Maternal & Child Health', labelEn: 'Maternal & Child Health', labelUr: 'زچہ و بچہ کی صحت' }
  ];

  const filtered = publishedReports.filter(r => {
    const matchesCat = selectedCat === 'all' || r.category === selectedCat;
    const q = searchQuery.toLowerCase().trim();
    const matchesSearch = !q ||
      r.title.toLowerCase().includes(q) ||
      r.titleUrdu.includes(q) ||
      r.description.toLowerCase().includes(q) ||
      r.descriptionUrdu.includes(q) ||
      r.author.toLowerCase().includes(q);
    return matchesCat && matchesSearch;
  });

  const handleDownload = (e: React.MouseEvent, report: ReportItem) => {
    e.stopPropagation();
    showToast(lang === 'ur' ? 'رپورٹ ڈاؤن لوڈ کی جا رہی ہے...' : 'Initiating document download...', 'info');
    window.open(report.downloadUrl, '_blank');
  };

  const handleShare = (e: React.MouseEvent, report: ReportItem) => {
    e.stopPropagation();
    setShareModalItem({
      title: lang === 'ur' ? report.titleUrdu : report.title,
      url: `${window.location.origin}/#report-${report.id}`,
      type: 'Research Report'
    });
  };

  return (
    <div className="py-12 md:py-20 bg-slate-50 min-h-screen">
      <div className="max-w-7xl mx-auto px-4 sm:px-8 space-y-10">
        
        {/* Header Breadcrumbs & Title */}
        <div className="space-y-3">
          <button
            onClick={() => {
              setCurrentPage('home');
              window.scrollTo({ top: 0, behavior: 'smooth' });
            }}
            className="text-xs font-bold text-teal-700 hover:text-teal-900 flex items-center gap-1 cursor-pointer"
          >
            {t.backToHome}
          </button>
          
          <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
            <div>
              <h1 className={`text-3xl sm:text-4xl font-extrabold text-slate-900 tracking-tight ${isRTL ? 'urdu-heading' : ''}`}>
                {t.sectionReportsTitle}
              </h1>
              <p className={`text-slate-600 text-sm sm:text-base mt-1 ${isRTL ? 'urdu-text' : ''}`}>
                {t.sectionReportsSubtitle}
              </p>
            </div>
            <span className="text-xs font-semibold px-3.5 py-1.5 rounded-full bg-indigo-100 text-indigo-900 self-start md:self-auto border border-indigo-200">
              {publishedReports.length} {lang === 'ur' ? 'تحقیقی دستاویزات' : 'Research Documents'}
            </span>
          </div>
        </div>

        {/* Search & Category Filter Toolbar */}
        <div className="bg-white rounded-2xl p-4 sm:p-5 border border-slate-200 shadow-xs space-y-4">
          
          {/* Search box */}
          <div className="relative">
            <Search className="w-4 h-4 text-slate-400 absolute left-3.5 rtl:left-auto rtl:right-3.5 top-1/2 -translate-y-1/2" />
            <input
              type="text"
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              placeholder={lang === 'ur' ? 'رپورٹ یا پالیسی بریف تلاش کریں...' : 'Search reports, policy briefs, epidemiological data...'}
              className="w-full pl-10 pr-4 rtl:pl-4 rtl:pr-10 py-2.5 rounded-xl border border-slate-200 focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 text-xs sm:text-sm font-medium"
            />
          </div>

          {/* Category Filter Pills (5 Categories) */}
          <div className="flex items-center gap-2 overflow-x-auto pb-1">
            {filterOptions.map((opt) => (
              <button
                key={opt.key}
                onClick={() => setSelectedCat(opt.key)}
                className={`px-3.5 py-2 rounded-lg text-xs font-bold whitespace-nowrap transition-colors cursor-pointer ${
                  selectedCat === opt.key
                    ? 'bg-indigo-700 text-white shadow-xs'
                    : 'bg-slate-100 text-slate-600 hover:bg-slate-200'
                }`}
              >
                {lang === 'ur' ? opt.labelUr : opt.labelEn}
              </button>
            ))}
          </div>

        </div>

        {/* Reports Grid */}
        {filtered.length === 0 ? (
          <div className="text-center py-16 bg-white rounded-2xl border border-slate-200 space-y-3">
            <FileText className="w-10 h-10 text-slate-300 mx-auto" />
            <p className="text-slate-600 text-sm font-medium">
              {lang === 'ur' ? 'کوئی رپورٹ دستیاب نہیں ہے' : 'No research reports match your filter criteria.'}
            </p>
          </div>
        ) : (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {filtered.map((report) => (
              <div
                key={report.id}
                onClick={() => setSelectedReport(report)}
                className="bg-white rounded-2xl p-6 border border-slate-200 shadow-xs hover:shadow-xl hover:border-indigo-300 transition-all duration-200 flex flex-col justify-between group cursor-pointer"
              >
                <div className="space-y-4">
                  <div className="flex items-center justify-between">
                    <span className="text-[11px] font-bold uppercase tracking-wider px-2.5 py-1 rounded-md bg-indigo-50 text-indigo-800 border border-indigo-100">
                      {lang === 'ur' ? report.categoryUrdu : report.category}
                    </span>
                    <span className="text-xs text-slate-400 font-mono">
                      {report.fileSize}
                    </span>
                  </div>

                  <h3 className={`text-lg font-bold text-slate-900 group-hover:text-indigo-900 transition-colors leading-snug ${isRTL ? 'urdu-heading' : ''}`}>
                    {lang === 'ur' ? report.titleUrdu : report.title}
                  </h3>

                  <p className={`text-xs text-slate-600 line-clamp-3 leading-relaxed ${isRTL ? 'urdu-text' : ''}`}>
                    {lang === 'ur' ? report.descriptionUrdu : report.description}
                  </p>

                  <div className="flex items-center gap-2 text-[11px] text-slate-500 font-medium">
                    <span>{report.author}</span>
                    <span>•</span>
                    <span>{report.date}</span>
                  </div>
                </div>

                <div className="pt-4 mt-5 border-t border-slate-100 flex items-center justify-between">
                  <button
                    onClick={(e) => handleDownload(e, report)}
                    className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-indigo-50 hover:bg-indigo-100 text-indigo-800 text-xs font-bold transition-colors cursor-pointer"
                  >
                    <Download className="w-3.5 h-3.5" />
                    <span>{t.downloadPdfBtn}</span>
                  </button>

                  <div className="flex items-center gap-1">
                    <button
                      onClick={(e) => handleShare(e, report)}
                      className="p-1.5 rounded-lg text-slate-400 hover:text-indigo-700 hover:bg-slate-100 transition-colors"
                      title={t.shareContent}
                    >
                      <Share2 className="w-3.5 h-3.5" />
                    </button>
                    <ArrowIcon className="w-4 h-4 text-slate-300 group-hover:text-indigo-600 transition-colors" />
                  </div>
                </div>
              </div>
            ))}
          </div>
        )}

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


// ===== src/components/CommunityView.tsx =====




const CommunityView: React.FC = () => {
  const { lang, t, healthTopics, setCurrentPage, setSelectedTopic } = useApp();
  const isRTL = lang === 'ur';

  const getIcon = (name: string) => {
    switch (name) {
      case 'Sparkles': return <Sparkles className="w-5 h-5 text-teal-600" />;
      case 'ShieldCheck': return <ShieldCheck className="w-5 h-5 text-teal-600" />;
      case 'Activity': return <Activity className="w-5 h-5 text-teal-600" />;
      case 'Apple': return <Apple className="w-5 h-5 text-teal-600" />;
      case 'Droplet': return <Droplet className="w-5 h-5 text-teal-600" />;
      default: return <Sparkles className="w-5 h-5 text-teal-600" />;
    }
  };

  return (
    <div className="py-12 md:py-20 bg-slate-50 min-h-screen">
      <div className="max-w-7xl mx-auto px-4 sm:px-8 space-y-10">
        
        {/* Header Breadcrumbs */}
        <div className="space-y-3">
          <button
            onClick={() => {
              setCurrentPage('home');
              window.scrollTo({ top: 0, behavior: 'smooth' });
            }}
            className="text-xs font-bold text-teal-700 hover:text-teal-900 flex items-center gap-1 cursor-pointer"
          >
            {t.backToHome}
          </button>
          
          <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
            <div>
              <h1 className={`text-3xl sm:text-4xl font-extrabold text-slate-900 tracking-tight ${isRTL ? 'urdu-heading' : ''}`}>
                {t.sectionCommunityTitle}
              </h1>
              <p className={`text-slate-600 text-sm sm:text-base mt-1 ${isRTL ? 'urdu-text' : ''}`}>
                {t.sectionCommunitySubtitle}
              </p>
            </div>
            <span className="text-xs font-semibold px-3.5 py-1.5 rounded-full bg-teal-100 text-teal-800 self-start md:self-auto border border-teal-200">
              5 {lang === 'ur' ? 'بنیادی حفاظتی ستون' : 'Core Prevention Pillars'}
            </span>
          </div>
        </div>

        {/* Extended Topic Cards List */}
        <div className="space-y-8">
          {healthTopics.map((topic, index) => {
            return (
              <div
                key={topic.id}
                className="bg-white rounded-2xl sm:rounded-3xl p-6 sm:p-8 border border-slate-200 shadow-xs hover:shadow-md transition-shadow"
              >
                <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
                  
                  {/* Left Column: Icon, Title, Summary, Image */}
                  <div className="lg:col-span-5 space-y-4">
                    <div className="flex items-center gap-3">
                      <div className="w-12 h-12 rounded-2xl bg-teal-50 border border-teal-200 text-teal-700 flex items-center justify-center">
                        {getIcon(topic.iconName)}
                      </div>
                      <div>
                        <span className="text-[11px] font-bold text-teal-700 uppercase tracking-wider">
                          {lang === 'ur' ? `ستون ${index + 1}` : `Pillar 0${index + 1}`}
                        </span>
                        <h2 className={`text-xl sm:text-2xl font-extrabold text-slate-900 ${isRTL ? 'urdu-heading' : ''}`}>
                          {lang === 'ur' ? topic.titleUrdu : topic.title}
                        </h2>
                      </div>
                    </div>

                    <div className="bg-teal-50/70 p-3.5 rounded-xl border border-teal-200/80">
                      <p className={`text-xs sm:text-sm font-semibold text-teal-950 ${isRTL ? 'urdu-text' : ''}`}>
                        {lang === 'ur' ? topic.taglineUrdu : topic.tagline}
                      </p>
                    </div>

                    <p className={`text-slate-600 text-xs sm:text-sm leading-relaxed ${isRTL ? 'urdu-text' : ''}`}>
                      {lang === 'ur' ? topic.summaryUrdu : topic.summary}
                    </p>

                    {topic.image && (
                      <div className="h-40 rounded-xl overflow-hidden border border-slate-200">
                        <img
                          src={topic.image}
                          alt={topic.title}
                          referrerPolicy="no-referrer"
                          className="w-full h-full object-cover"
                        />
                      </div>
                    )}
                  </div>

                  {/* Right Column: Key Tips and Action Protocol */}
                  <div className="lg:col-span-7 bg-slate-50 p-5 sm:p-7 rounded-2xl border border-slate-200/90 space-y-4">
                    <h3 className="text-xs font-bold text-slate-700 uppercase tracking-wider flex items-center gap-2">
                      <ShieldCheck className="w-4 h-4 text-teal-600" />
                      <span>{lang === 'ur' ? 'حفاظتی اور عملی گائیڈ لائنز' : 'Evidence-Based Community Guidance'}</span>
                    </h3>

                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                      {((lang === 'ur' ? topic.keyTipsUrdu : topic.keyTips) || topic.keyTips || []).map((tip, idx) => (
                        <div
                          key={idx}
                          className="p-3.5 bg-white rounded-xl border border-slate-200/80 flex items-start gap-2.5 shadow-2xs"
                        >
                          <CheckCircle2 className="w-4 h-4 text-teal-600 shrink-0 mt-0.5" />
                          <p className={`text-xs text-slate-800 font-medium leading-relaxed ${isRTL ? 'urdu-text' : ''}`}>
                            {tip}
                          </p>
                        </div>
                      ))}
                    </div>

                    <div className="pt-2 flex justify-end">
                      <button
                        onClick={() => setSelectedTopic(topic)}
                        className="text-xs font-bold text-teal-700 hover:text-teal-900 cursor-pointer"
                      >
                        {lang === 'ur' ? 'تفصیلی رہنمائی ونڈو میں کھولیں →' : 'Open in focused guide modal →'}
                      </button>
                    </div>
                  </div>

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

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


// ===== src/components/AboutView.tsx =====



const AboutView: React.FC = () => {
  const { lang, t, drProfile, settings, setCurrentPage, setShareModalItem } = useApp();
  const isRTL = lang === 'ur';

  const handleShare = () => {
    setShareModalItem({
      title: lang === 'ur' ? `${drProfile.nameUrdu} - ${drProfile.titleUrdu}` : `${drProfile.name} - ${drProfile.title}`,
      url: `${window.location.origin}/#about`,
      type: 'Leadership Profile'
    });
  };

  const areasOfExpertise = (lang === 'ur' ? drProfile?.areasOfExpertiseUrdu : drProfile?.areasOfExpertise) || drProfile?.areasOfExpertise || [];
  const achievements = (lang === 'ur' ? drProfile?.achievementsUrdu : drProfile?.achievements) || drProfile?.achievements || [];
  const experienceList = drProfile?.experience || [];
  const publicationsList = drProfile?.publications || [];
  const reportsList = drProfile?.reports || [];

  return (
    <div className="py-12 md:py-20 bg-slate-50 min-h-screen">
      <div className="max-w-7xl mx-auto px-4 sm:px-8 space-y-12">
        
        {/* Top Breadcrumbs & Page Heading */}
        <div className="space-y-3">
          <button
            onClick={() => {
              setCurrentPage('home');
              window.scrollTo({ top: 0, behavior: 'smooth' });
            }}
            className="text-xs font-bold text-teal-700 hover:text-teal-900 flex items-center gap-1 cursor-pointer"
          >
            {t.backToHome}
          </button>
          
          <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
            <div>
              <h1 className={`text-3xl sm:text-4xl font-extrabold text-slate-900 tracking-tight ${isRTL ? 'urdu-heading' : ''}`}>
                {t.navAbout}
              </h1>
              <p className={`text-slate-600 text-sm sm:text-base mt-1 ${isRTL ? 'urdu-text' : ''}`}>
                {lang === 'ur' 
                  ? 'پبلک ہیلتھ پلس کا وژن، مشن اور قائدانہ رہنمائی'
                  : 'Public Health Plus vision, mission and public health leadership'}
              </p>
            </div>

            <button
              onClick={handleShare}
              className="inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-white border border-slate-200 text-slate-700 hover:text-teal-700 hover:border-teal-300 font-semibold text-xs transition-colors shadow-2xs self-start md:self-auto cursor-pointer"
            >
              <Share2 className="w-4 h-4" />
              <span>{t.shareContent}</span>
            </button>
          </div>
        </div>

        {/* Platform Mission & Philosophy Banner */}
        <div className="bg-gradient-to-br from-slate-900 via-slate-900 to-slate-950 text-white rounded-3xl p-8 sm:p-10 shadow-xl border border-slate-800 relative overflow-hidden">
          <div className="absolute right-0 top-0 w-96 h-96 bg-teal-500/10 rounded-full blur-3xl pointer-events-none" />
          
          <div className="relative z-10 space-y-6 max-w-3xl">
            <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-teal-950 border border-teal-700 text-teal-300 text-xs font-bold uppercase tracking-wider">
              <ShieldCheck className="w-4 h-4 text-teal-400" />
              <span>{lang === 'ur' ? 'ہمارا مشن اور ویلیوز' : 'Our Institutional Mission'}</span>
            </div>

            <h2 className={`text-2xl sm:text-3xl font-extrabold text-white leading-tight ${isRTL ? 'urdu-heading' : ''}`}>
              {lang === 'ur' 
                ? 'شواہد پر مبنی پبلک ہیلتھ رہنمائی اور بیماریوں کا سدباب' 
                : 'Empowering Communities Through Evidence-Informed Public Health'}
            </h2>

            <p className={`text-slate-300 text-sm sm:text-base leading-relaxed ${isRTL ? 'urdu-text text-base sm:text-lg leading-loose' : ''}`}>
              {lang === 'ur'
                ? (settings?.aboutUsIntroUrdu || 'پبلک ہیلتھ پلس ایک آزاد، غیر جانبدار اور مصدقہ معلوماتی پلیٹ فارم ہے جس کا مقصد متعدی اور غیر متعدی بیماریوں کے خلاف معاشرتی آگاہی، بر وقت اسکریننگ اور سائنسی شواہد پر مبنی احتیاطی تدابیر کو عام کرنا ہے۔ ہم عام شہریوں اور ہیلتھ پریکٹیشنرز کو مستند گائیڈ لائنز فراہم کرتے ہیں۔')
                : (settings?.aboutUsIntro || 'Public Health Plus is an independent, non-affiliated platform dedicated to advancing public-health awareness, disease prevention, and evidence-based epidemiological insights. We translate complex health research and clinical protocols into clear, actionable guidance for communities and health workers alike.')}
            </p>

            <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 pt-4 border-t border-slate-800">
              <div className="flex items-center gap-2.5">
                <Target className="w-5 h-5 text-teal-400 shrink-0" />
                <span className="text-xs font-semibold text-slate-200">
                  {lang === 'ur' ? 'روک تھام اور بروقت تدارک' : 'Prevention & Timely Intervention'}
                </span>
              </div>
              <div className="flex items-center gap-2.5">
                <ShieldCheck className="w-5 h-5 text-teal-400 shrink-0" />
                <span className="text-xs font-semibold text-slate-200">
                  {lang === 'ur' ? 'شواہد اور ریسرچ پر مبنی' : 'Evidence-Informed Protocols'}
                </span>
              </div>
              <div className="flex items-center gap-2.5">
                <Sparkles className="w-5 h-5 text-teal-400 shrink-0" />
                <span className="text-xs font-semibold text-slate-200">
                  {lang === 'ur' ? 'کمیونٹی کی بہتری اور فلاح' : 'Community Well-Being'}
                </span>
              </div>
            </div>
          </div>
        </div>

        {/* Dr. Mushtaque Ahmed Shah Professional Profile Section */}
        <div className="bg-white rounded-3xl p-8 sm:p-12 border border-slate-200 shadow-sm space-y-10">
          
          {/* Header of Profile */}
          <div className="flex flex-col lg:flex-row items-start lg:items-center justify-between gap-8 pb-8 border-b border-slate-200">
            <div className="flex flex-col sm:flex-row items-start sm:items-center gap-6">
              {/* Doctor Avatar / Badge */}
              <div className="w-24 h-24 sm:w-28 sm:h-28 rounded-2xl bg-gradient-to-tr from-teal-800 to-teal-600 text-white flex items-center justify-center shadow-lg border-2 border-white ring-4 ring-teal-50 shrink-0 overflow-hidden">
                {drProfile?.photoUrl ? (
                  <img
                    src={drProfile.photoUrl}
                    alt={drProfile.name}
                    referrerPolicy="no-referrer"
                    className="w-full h-full object-cover"
                  />
                ) : (
                  <User className="w-12 h-12 sm:w-14 sm:h-14 text-teal-100" />
                )}
              </div>

              {/* Doctor Title and Qualifications */}
              <div className="space-y-2">
                <div className="inline-flex items-center gap-2 px-3 py-1 rounded-md bg-teal-50 text-teal-800 text-xs font-bold uppercase tracking-wider border border-teal-100">
                  <Award className="w-3.5 h-3.5" />
                  <span>{lang === 'ur' ? drProfile?.titleUrdu : drProfile?.title}</span>
                </div>

                <h2 className={`text-2xl sm:text-3xl font-extrabold text-slate-900 ${isRTL ? 'urdu-heading' : ''}`}>
                  {lang === 'ur' ? drProfile?.nameUrdu : drProfile?.name}
                </h2>

                <p className="text-sm font-semibold text-teal-700 flex items-center gap-1.5">
                  <GraduationCap className="w-4 h-4 shrink-0" />
                  <span>{lang === 'ur' ? drProfile?.qualificationsUrdu : drProfile?.qualifications}</span>
                </p>
              </div>
            </div>

            {/* Quick Contact Box if provided in settings */}
            {(settings?.email || settings?.phone || settings?.address) && (
              <div className="bg-slate-50 p-5 rounded-2xl border border-slate-200/80 space-y-2 text-xs w-full lg:w-auto min-w-[280px]">
                <h4 className="font-bold text-slate-900 uppercase tracking-wider text-[11px] mb-2">
                  {t.contactHeading}
                </h4>
                {settings?.email && (
                  <div className="flex items-center gap-2 text-slate-700">
                    <Mail className="w-3.5 h-3.5 text-teal-600 shrink-0" />
                    <span>{settings.email}</span>
                  </div>
                )}
                {settings?.phone && (
                  <div className="flex items-center gap-2 text-slate-700">
                    <Phone className="w-3.5 h-3.5 text-teal-600 shrink-0" />
                    <span>{settings.phone}</span>
                  </div>
                )}
                {settings?.address && (
                  <div className="flex items-start gap-2 text-slate-700">
                    <MapPin className="w-3.5 h-3.5 text-teal-600 shrink-0 mt-0.5" />
                    <span>{settings.address}</span>
                  </div>
                )}
              </div>
            )}
          </div>

          {/* Biography */}
          <div className="space-y-3">
            <h3 className={`text-lg font-bold text-slate-900 ${isRTL ? 'urdu-heading' : ''}`}>
              {lang === 'ur' ? 'پیشہ ورانہ سوانح حیات' : 'Professional Biography'}
            </h3>
            <p className={`text-slate-700 text-sm sm:text-base leading-relaxed bg-slate-50 p-5 sm:p-6 rounded-2xl border border-slate-200/80 ${isRTL ? 'urdu-text text-base sm:text-lg leading-loose' : ''}`}>
              {lang === 'ur' ? drProfile?.biographyUrdu : drProfile?.biography}
            </p>
          </div>

          {/* Areas of Expertise */}
          {areasOfExpertise.length > 0 && (
            <div className="space-y-4">
              <h3 className={`text-lg font-bold text-slate-900 ${isRTL ? 'urdu-heading' : ''}`}>
                {lang === 'ur' ? 'مہارت کے اہم شعبے' : 'Areas of Expertise & Specialization'}
              </h3>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                {areasOfExpertise.map((area, idx) => (
                  <div
                    key={idx}
                    className="p-4 rounded-xl bg-teal-50/40 border border-teal-100 flex items-start gap-3"
                  >
                    <CheckCircle2 className="w-4 h-4 text-teal-600 shrink-0 mt-0.5" />
                    <span className={`text-xs sm:text-sm font-medium text-slate-800 ${isRTL ? 'urdu-text' : ''}`}>
                      {area}
                    </span>
                  </div>
                ))}
              </div>
            </div>
          )}

          {/* Work & Clinical Leadership Experience */}
          {experienceList.length > 0 && (
            <div className="space-y-6">
              <div className="flex items-center gap-2">
                <Briefcase className="w-5 h-5 text-teal-700" />
                <h3 className={`text-lg sm:text-xl font-extrabold text-slate-900 ${isRTL ? 'urdu-heading' : ''}`}>
                  {t.experienceHeading}
                </h3>
              </div>

              <div className="space-y-4">
                {experienceList.map((exp, idx) => (
                  <div
                    key={idx}
                    className="p-5 rounded-2xl bg-slate-50 border border-slate-200/90 flex flex-col sm:flex-row sm:items-start justify-between gap-3 hover:bg-teal-50/20 hover:border-teal-300 transition-all"
                  >
                    <div className="space-y-1">
                      <h4 className="text-sm font-bold text-slate-900">{exp.role}</h4>
                      <p className="text-xs font-semibold text-teal-700">{exp.organization}</p>
                      {exp.details && (
                        <p className="text-xs text-slate-600 mt-1 leading-relaxed">{exp.details}</p>
                      )}
                    </div>
                    <span className="text-xs font-mono font-bold text-slate-500 bg-white px-3 py-1 rounded-lg border border-slate-200 shrink-0 self-start">
                      {exp.period}
                    </span>
                  </div>
                ))}
              </div>
            </div>
          )}

          {/* Achievements */}
          {achievements.length > 0 && (
            <div className="space-y-4">
              <div className="flex items-center gap-2">
                <Award className="w-5 h-5 text-teal-700" />
                <h3 className={`text-lg font-bold text-slate-900 ${isRTL ? 'urdu-heading' : ''}`}>
                  {lang === 'ur' ? 'عوامی صحت میں خدمات اور کارنامے' : 'Key Contributions & Recognitions'}
                </h3>
              </div>
              <ul className="space-y-2.5">
                {achievements.map((item, idx) => (
                  <li key={idx} className={`p-4 rounded-xl bg-slate-50 border border-slate-200/80 flex items-start gap-3 text-xs sm:text-sm text-slate-800 font-medium ${isRTL ? 'urdu-text' : ''}`}>
                    <CheckCircle2 className="w-4 h-4 text-teal-600 shrink-0 mt-0.5" />
                    <span>{item}</span>
                  </li>
                ))}
              </ul>
            </div>
          )}

          {/* Publications & Reports */}
          {(publicationsList.length > 0 || reportsList.length > 0) && (
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6 pt-4 border-t border-slate-200">
              {publicationsList.length > 0 && (
                <div className="space-y-3">
                  <div className="flex items-center gap-2 text-slate-900 font-bold text-sm">
                    <BookOpen className="w-4 h-4 text-teal-700" />
                    <span>{lang === 'ur' ? 'تحقیقی مقالہ جات' : 'Selected Publications'}</span>
                  </div>
                  <div className="space-y-2.5">
                    {publicationsList.map((pub, idx) => (
                      <div key={idx} className="p-3.5 rounded-xl bg-slate-50 border border-slate-200 text-xs space-y-1">
                        <p className="font-bold text-slate-800">{pub.title}</p>
                        <p className="text-slate-500 font-medium">{pub.journal} ({pub.year})</p>
                      </div>
                    ))}
                  </div>
                </div>
              )}

              {reportsList.length > 0 && (
                <div className="space-y-3">
                  <div className="flex items-center gap-2 text-slate-900 font-bold text-sm">
                    <FileCheck2 className="w-4 h-4 text-teal-700" />
                    <span>{lang === 'ur' ? 'پبلک ہیلتھ رپورٹس' : 'Authored Health Reports'}</span>
                  </div>
                  <div className="space-y-2.5">
                    {reportsList.map((rep, idx) => (
                      <div key={idx} className="p-3.5 rounded-xl bg-slate-50 border border-slate-200 text-xs space-y-1">
                        <p className="font-bold text-slate-800">{rep.title}</p>
                        <p className="text-teal-700 font-medium">{rep.role} • {rep.year}</p>
                      </div>
                    ))}
                  </div>
                </div>
              )}
            </div>
          )}

        </div>

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


// ===== src/components/AdminPortal.tsx =====




const AdminPortal: React.FC = () => {
  const { 
    lang, 
    t, 
    isAdminLoggedIn, 
    loginAdmin, 
    logoutAdmin, 
    news, 
    addNews, 
    updateNews, 
    deleteNews, 
    media, 
    addMedia, 
    updateMedia, 
    deleteMedia, 
    reports, 
    addReport, 
    updateReport, 
    deleteReport, 
    diseases, 
    addDisease, 
    updateDisease, 
    deleteDisease, 
    subscribers, 
    deleteSubscriber, 
    settings, 
    updateSettings, 
    drProfile, 
    updateDrProfile, 
    setCurrentPage, 
    showToast 
  } = useApp();

  const [passwordInput, setPasswordInput] = useState('');
  const [activeTab, setActiveTab] = useState<'news' | 'media' | 'reports' | 'diseases' | 'subscribers' | 'settings'>('news');

  // Modal states for CRUD
  const [editingNews, setEditingNews] = useState<NewsArticle | null>(null);
  const [isAddingNews, setIsAddingNews] = useState(false);

  const [editingMedia, setEditingMedia] = useState<MediaItem | null>(null);
  const [isAddingMedia, setIsAddingMedia] = useState(false);

  const [editingReport, setEditingReport] = useState<ReportItem | null>(null);
  const [isAddingReport, setIsAddingReport] = useState(false);

  const [editingDisease, setEditingDisease] = useState<Disease | null>(null);
  const [isAddingDisease, setIsAddingDisease] = useState(false);

  // Settings local state
  const [settingsForm, setSettingsForm] = useState(settings);

  const handleLogin = (e: React.FormEvent) => {
    e.preventDefault();
    const success = loginAdmin(passwordInput);
    if (success) {
      setPasswordInput('');
      showToast(t.adminLoginSuccess, 'success');
    } else {
      showToast(t.adminLoginError, 'error');
    }
  };

  const exportSubscribersCSV = () => {
    if (!subscribers || subscribers.length === 0) {
      showToast(lang === 'ur' ? 'کوئی سبسکرائبر موجود نہیں' : 'No subscribers to export', 'info');
      return;
    }
    const csvContent = "data:text/csv;charset=utf-8,Email,Subscribed Date\n" + 
      (subscribers || []).map(s => `"${s.email}","${s.subscribedAt || (s as any).date || ''}"`).join("\n");
    const encodedUri = encodeURI(csvContent);
    const link = document.createElement("a");
    link.setAttribute("href", encodedUri);
    link.setAttribute("download", `public_health_plus_subscribers_${new Date().toISOString().slice(0,10)}.csv`);
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    showToast(lang === 'ur' ? 'سبسکرائبرز CSV ڈاؤن لوڈ ہوگئی' : 'Subscribers CSV exported successfully', 'success');
  };

  // If Not Logged In -> Show Professional Auth Screen
  if (!isAdminLoggedIn) {
    return (
      <div className="py-20 bg-slate-900 min-h-[85vh] flex items-center justify-center px-4">
        <div className="bg-slate-950 border border-slate-800 rounded-3xl p-8 sm:p-10 max-w-md w-full shadow-2xl text-white space-y-6">
          <div className="text-center space-y-3">
            <div className="w-14 h-14 rounded-2xl bg-teal-500/20 border border-teal-500/30 text-teal-400 flex items-center justify-center mx-auto shadow-inner">
              <Lock className="w-7 h-7" />
            </div>
            <h2 className="text-2xl font-extrabold tracking-tight">
              {t.adminPortal}
            </h2>
            <p className="text-xs text-slate-400">
              {lang === 'ur' 
                ? 'محفوظ انتظامی پورٹل تک رسائی کے لیے پاس ورڈ درج کریں۔'
                : 'Enter your administrative credentials to manage content and advisories.'}
            </p>
          </div>

          <form onSubmit={handleLogin} className="space-y-4">
            <div>
              <label className="text-xs font-semibold text-slate-300 block mb-1.5">
                {t.adminPasswordLabel}
              </label>
              <input
                type="password"
                value={passwordInput}
                onChange={(e) => setPasswordInput(e.target.value)}
                placeholder="Enter password..."
                required
                className="w-full px-4 py-3 rounded-xl bg-slate-900 border border-slate-700 text-white placeholder:text-slate-500 focus:border-teal-500 focus:outline-none text-sm font-medium"
              />
              <p className="text-[11px] text-teal-400/80 mt-1.5">
                {lang === 'ur' ? 'ڈیفالٹ پاس ورڈ: admin123 یا health2026' : 'Default Access: admin123 or health2026'}
              </p>
            </div>

            <button
              type="submit"
              className="w-full py-3.5 rounded-xl bg-teal-600 hover:bg-teal-500 text-white font-bold text-sm transition-all shadow-md shadow-teal-900/30 cursor-pointer flex items-center justify-center gap-2"
            >
              <Unlock className="w-4 h-4" />
              <span>{t.loginBtn}</span>
            </button>
          </form>

          <div className="pt-4 border-t border-slate-800 text-center">
            <button
              onClick={() => setCurrentPage('home')}
              className="text-xs text-slate-400 hover:text-white transition-colors cursor-pointer"
            >
              {t.backToHome}
            </button>
          </div>
        </div>
      </div>
    );
  }

  // If Logged In -> Show Full Admin CMS Dashboard
  return (
    <div className="py-10 bg-slate-900 min-h-screen text-slate-100">
      <div className="max-w-7xl mx-auto px-4 sm:px-8 space-y-8">
        
        {/* Admin Header Bar */}
        <div className="bg-slate-950 p-6 rounded-3xl border border-slate-800 flex flex-col md:flex-row md:items-center justify-between gap-4 shadow-xl">
          <div className="flex items-center gap-3">
            <div className="w-12 h-12 rounded-2xl bg-teal-500/20 text-teal-400 border border-teal-500/30 flex items-center justify-center">
              <Lock className="w-6 h-6" />
            </div>
            <div>
              <div className="flex items-center gap-2">
                <span className="text-[10px] font-bold px-2 py-0.5 rounded-md bg-teal-900 text-teal-300 border border-teal-700">
                  AUTHENTICATED ADMIN
                </span>
                <span className="text-xs text-slate-400">Dr. Mushtaque Ahmed Shah Portal</span>
              </div>
              <h1 className="text-xl sm:text-2xl font-extrabold text-white">
                {t.adminPortal}
              </h1>
            </div>
          </div>

          <div className="flex items-center gap-3">
            <button
              onClick={() => setCurrentPage('home')}
              className="px-4 py-2 rounded-xl bg-slate-900 hover:bg-slate-800 text-slate-300 text-xs font-bold border border-slate-700 transition-colors flex items-center gap-1.5 cursor-pointer"
            >
              <Eye className="w-3.5 h-3.5" />
              <span>{lang === 'ur' ? 'سائٹ دیکھیں' : 'View Public Site'}</span>
            </button>
            <button
              onClick={logoutAdmin}
              className="px-4 py-2 rounded-xl bg-rose-950 hover:bg-rose-900 text-rose-300 text-xs font-bold border border-rose-800 transition-colors flex items-center gap-1.5 cursor-pointer"
            >
              <LogOut className="w-3.5 h-3.5" />
              <span>{t.logoutBtn}</span>
            </button>
          </div>
        </div>

        {/* CMS Navigation Tabs */}
        <div className="flex items-center gap-2 overflow-x-auto pb-2 border-b border-slate-800">
          <button
            onClick={() => setActiveTab('news')}
            className={`px-4 py-2.5 rounded-xl font-bold text-xs sm:text-sm whitespace-nowrap flex items-center gap-2 transition-all cursor-pointer ${
              activeTab === 'news'
                ? 'bg-teal-600 text-white shadow-md'
                : 'bg-slate-950 text-slate-400 hover:text-white border border-slate-800'
            }`}
          >
            <Newspaper className="w-4 h-4" />
            <span>{t.manageNews} ({news.length})</span>
          </button>

          <button
            onClick={() => setActiveTab('media')}
            className={`px-4 py-2.5 rounded-xl font-bold text-xs sm:text-sm whitespace-nowrap flex items-center gap-2 transition-all cursor-pointer ${
              activeTab === 'media'
                ? 'bg-teal-600 text-white shadow-md'
                : 'bg-slate-950 text-slate-400 hover:text-white border border-slate-800'
            }`}
          >
            <Film className="w-4 h-4" />
            <span>{t.manageMedia} ({media.length})</span>
          </button>

          <button
            onClick={() => setActiveTab('reports')}
            className={`px-4 py-2.5 rounded-xl font-bold text-xs sm:text-sm whitespace-nowrap flex items-center gap-2 transition-all cursor-pointer ${
              activeTab === 'reports'
                ? 'bg-teal-600 text-white shadow-md'
                : 'bg-slate-950 text-slate-400 hover:text-white border border-slate-800'
            }`}
          >
            <FileText className="w-4 h-4" />
            <span>{t.manageReports} ({reports.length})</span>
          </button>

          <button
            onClick={() => setActiveTab('diseases')}
            className={`px-4 py-2.5 rounded-xl font-bold text-xs sm:text-sm whitespace-nowrap flex items-center gap-2 transition-all cursor-pointer ${
              activeTab === 'diseases'
                ? 'bg-teal-600 text-white shadow-md'
                : 'bg-slate-950 text-slate-400 hover:text-white border border-slate-800'
            }`}
          >
            <HeartPulse className="w-4 h-4" />
            <span>{t.manageDiseases} ({diseases.length})</span>
          </button>

          <button
            onClick={() => setActiveTab('subscribers')}
            className={`px-4 py-2.5 rounded-xl font-bold text-xs sm:text-sm whitespace-nowrap flex items-center gap-2 transition-all cursor-pointer ${
              activeTab === 'subscribers'
                ? 'bg-teal-600 text-white shadow-md'
                : 'bg-slate-950 text-slate-400 hover:text-white border border-slate-800'
            }`}
          >
            <Users className="w-4 h-4" />
            <span>{t.manageSubscribers} ({subscribers.length})</span>
          </button>

          <button
            onClick={() => setActiveTab('settings')}
            className={`px-4 py-2.5 rounded-xl font-bold text-xs sm:text-sm whitespace-nowrap flex items-center gap-2 transition-all cursor-pointer ${
              activeTab === 'settings'
                ? 'bg-teal-600 text-white shadow-md'
                : 'bg-slate-950 text-slate-400 hover:text-white border border-slate-800'
            }`}
          >
            <Settings className="w-4 h-4" />
            <span>{t.siteSettings}</span>
          </button>
        </div>

        {/* TAB 1: NEWS MANAGEMENT */}
        {activeTab === 'news' && (
          <div className="space-y-6">
            <div className="flex items-center justify-between">
              <div>
                <h2 className="text-lg font-bold text-white">{t.manageNews}</h2>
                <p className="text-xs text-slate-400">Add, edit, publish or remove health advisories and bulletins</p>
              </div>
              <button
                onClick={() => setIsAddingNews(true)}
                className="px-4 py-2.5 rounded-xl bg-teal-600 hover:bg-teal-500 text-white text-xs font-bold flex items-center gap-1.5 shadow-md cursor-pointer"
              >
                <Plus className="w-4 h-4" />
                <span>{t.addNewsBtn}</span>
              </button>
            </div>

            <div className="bg-slate-950 rounded-2xl border border-slate-800 overflow-hidden">
              <table className="w-full text-left text-xs text-slate-300">
                <thead className="bg-slate-900 text-slate-400 font-bold uppercase text-[10px] tracking-wider border-b border-slate-800">
                  <tr>
                    <th className="p-4">Title</th>
                    <th className="p-4">Category</th>
                    <th className="p-4">Date</th>
                    <th className="p-4">Status</th>
                    <th className="p-4 text-right">Actions</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-slate-800/60">
                  {news.map((item) => (
                    <tr key={item.id} className="hover:bg-slate-900/50 transition-colors">
                      <td className="p-4 font-bold text-white max-w-xs truncate">
                        {item.title}
                      </td>
                      <td className="p-4">
                        <span className="px-2 py-0.5 rounded bg-slate-800 text-teal-300 font-medium">
                          {item.category}
                        </span>
                      </td>
                      <td className="p-4 text-slate-400">{item.date}</td>
                      <td className="p-4">
                        <button
                          onClick={() => {
                            updateNews(item.id, { published: !item.published });
                            showToast(`Article ${item.published ? 'unpublished' : 'published'}`, 'info');
                          }}
                          className={`px-2.5 py-1 rounded-full text-[11px] font-bold flex items-center gap-1 cursor-pointer ${
                            item.published 
                              ? 'bg-emerald-950 text-emerald-300 border border-emerald-800' 
                              : 'bg-amber-950 text-amber-300 border border-amber-800'
                          }`}
                        >
                          {item.published ? <Eye className="w-3 h-3" /> : <EyeOff className="w-3 h-3" />}
                          <span>{item.published ? 'Published' : 'Draft'}</span>
                        </button>
                      </td>
                      <td className="p-4 text-right space-x-2">
                        <button
                          onClick={() => setEditingNews(item)}
                          className="p-1.5 rounded-lg bg-slate-800 text-slate-200 hover:text-white hover:bg-slate-700 cursor-pointer"
                          title="Edit"
                        >
                          <Edit3 className="w-3.5 h-3.5" />
                        </button>
                        <button
                          onClick={() => {
                            if (window.confirm('Are you sure you want to delete this article?')) {
                              deleteNews(item.id);
                              showToast('Article deleted', 'info');
                            }
                          }}
                          className="p-1.5 rounded-lg bg-rose-950 text-rose-300 hover:bg-rose-900 cursor-pointer"
                          title="Delete"
                        >
                          <Trash2 className="w-3.5 h-3.5" />
                        </button>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        )}

        {/* TAB 2: VIDEOS & IMAGES MANAGEMENT */}
        {activeTab === 'media' && (
          <div className="space-y-6">
            <div className="flex items-center justify-between">
              <div>
                <h2 className="text-lg font-bold text-white">{t.manageMedia}</h2>
                <p className="text-xs text-slate-400">Admin-only video and infographic uploads with visitor protection</p>
              </div>
              <button
                onClick={() => setIsAddingMedia(true)}
                className="px-4 py-2.5 rounded-xl bg-teal-600 hover:bg-teal-500 text-white text-xs font-bold flex items-center gap-1.5 shadow-md cursor-pointer"
              >
                <Plus className="w-4 h-4" />
                <span>{t.uploadMediaBtn}</span>
              </button>
            </div>

            <div className="bg-slate-950 rounded-2xl border border-slate-800 overflow-hidden">
              <table className="w-full text-left text-xs text-slate-300">
                <thead className="bg-slate-900 text-slate-400 font-bold uppercase text-[10px] tracking-wider border-b border-slate-800">
                  <tr>
                    <th className="p-4">Type</th>
                    <th className="p-4">Title</th>
                    <th className="p-4">Topic</th>
                    <th className="p-4">Date</th>
                    <th className="p-4">Status</th>
                    <th className="p-4 text-right">Actions</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-slate-800/60">
                  {media.map((item) => (
                    <tr key={item.id} className="hover:bg-slate-900/50 transition-colors">
                      <td className="p-4">
                        <span className="px-2 py-0.5 rounded bg-slate-800 text-teal-300 font-mono uppercase text-[10px] font-bold">
                          {item.type}
                        </span>
                      </td>
                      <td className="p-4 font-bold text-white max-w-xs truncate">
                        {item.title}
                      </td>
                      <td className="p-4 text-slate-400">{item.topic}</td>
                      <td className="p-4 text-slate-400">{item.date}</td>
                      <td className="p-4">
                        <button
                          onClick={() => {
                            updateMedia(item.id, { published: !item.published });
                            showToast(`Media item ${item.published ? 'unpublished' : 'published'}`, 'info');
                          }}
                          className={`px-2.5 py-1 rounded-full text-[11px] font-bold flex items-center gap-1 cursor-pointer ${
                            item.published 
                              ? 'bg-emerald-950 text-emerald-300 border border-emerald-800' 
                              : 'bg-amber-950 text-amber-300 border border-amber-800'
                          }`}
                        >
                          {item.published ? <Eye className="w-3 h-3" /> : <EyeOff className="w-3 h-3" />}
                          <span>{item.published ? 'Live' : 'Hidden'}</span>
                        </button>
                      </td>
                      <td className="p-4 text-right space-x-2">
                        <button
                          onClick={() => setEditingMedia(item)}
                          className="p-1.5 rounded-lg bg-slate-800 text-slate-200 hover:text-white hover:bg-slate-700 cursor-pointer"
                          title="Edit"
                        >
                          <Edit3 className="w-3.5 h-3.5" />
                        </button>
                        <button
                          onClick={() => {
                            if (window.confirm('Are you sure you want to delete this media item?')) {
                              deleteMedia(item.id);
                              showToast('Media item deleted', 'info');
                            }
                          }}
                          className="p-1.5 rounded-lg bg-rose-950 text-rose-300 hover:bg-rose-900 cursor-pointer"
                          title="Delete"
                        >
                          <Trash2 className="w-3.5 h-3.5" />
                        </button>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        )}

        {/* TAB 3: RESEARCH & REPORTS MANAGEMENT */}
        {activeTab === 'reports' && (
          <div className="space-y-6">
            <div className="flex items-center justify-between">
              <div>
                <h2 className="text-lg font-bold text-white">{t.manageReports}</h2>
                <p className="text-xs text-slate-400">Upload and organize technical reports, policy briefs and research</p>
              </div>
              <button
                onClick={() => setIsAddingReport(true)}
                className="px-4 py-2.5 rounded-xl bg-teal-600 hover:bg-teal-500 text-white text-xs font-bold flex items-center gap-1.5 shadow-md cursor-pointer"
              >
                <Plus className="w-4 h-4" />
                <span>{t.uploadReportBtn}</span>
              </button>
            </div>

            <div className="bg-slate-950 rounded-2xl border border-slate-800 overflow-hidden">
              <table className="w-full text-left text-xs text-slate-300">
                <thead className="bg-slate-900 text-slate-400 font-bold uppercase text-[10px] tracking-wider border-b border-slate-800">
                  <tr>
                    <th className="p-4">Title</th>
                    <th className="p-4">Category</th>
                    <th className="p-4">Size</th>
                    <th className="p-4">Status</th>
                    <th className="p-4 text-right">Actions</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-slate-800/60">
                  {reports.map((item) => (
                    <tr key={item.id} className="hover:bg-slate-900/50 transition-colors">
                      <td className="p-4 font-bold text-white max-w-xs truncate">
                        {item.title}
                      </td>
                      <td className="p-4">
                        <span className="px-2 py-0.5 rounded bg-indigo-950 text-indigo-300 font-medium">
                          {item.category}
                        </span>
                      </td>
                      <td className="p-4 text-slate-400 font-mono">{item.fileSize}</td>
                      <td className="p-4">
                        <button
                          onClick={() => {
                            updateReport(item.id, { published: !item.published });
                            showToast(`Report ${item.published ? 'unpublished' : 'published'}`, 'info');
                          }}
                          className={`px-2.5 py-1 rounded-full text-[11px] font-bold flex items-center gap-1 cursor-pointer ${
                            item.published 
                              ? 'bg-emerald-950 text-emerald-300 border border-emerald-800' 
                              : 'bg-amber-950 text-amber-300 border border-amber-800'
                          }`}
                        >
                          {item.published ? <Eye className="w-3 h-3" /> : <EyeOff className="w-3 h-3" />}
                          <span>{item.published ? 'Active' : 'Draft'}</span>
                        </button>
                      </td>
                      <td className="p-4 text-right space-x-2">
                        <button
                          onClick={() => setEditingReport(item)}
                          className="p-1.5 rounded-lg bg-slate-800 text-slate-200 hover:text-white hover:bg-slate-700 cursor-pointer"
                          title="Edit"
                        >
                          <Edit3 className="w-3.5 h-3.5" />
                        </button>
                        <button
                          onClick={() => {
                            if (window.confirm('Are you sure you want to delete this report?')) {
                              deleteReport(item.id);
                              showToast('Report deleted', 'info');
                            }
                          }}
                          className="p-1.5 rounded-lg bg-rose-950 text-rose-300 hover:bg-rose-900 cursor-pointer"
                          title="Delete"
                        >
                          <Trash2 className="w-3.5 h-3.5" />
                        </button>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        )}

        {/* TAB 4: DISEASES MANAGEMENT */}
        {activeTab === 'diseases' && (
          <div className="space-y-6">
            <div className="flex items-center justify-between">
              <div>
                <h2 className="text-lg font-bold text-white">{t.manageDiseases}</h2>
                <p className="text-xs text-slate-400">Manage 8-pillar clinical protocols for communicable and non-communicable diseases</p>
              </div>
              <button
                onClick={() => setIsAddingDisease(true)}
                className="px-4 py-2.5 rounded-xl bg-teal-600 hover:bg-teal-500 text-white text-xs font-bold flex items-center gap-1.5 shadow-md cursor-pointer"
              >
                <Plus className="w-4 h-4" />
                <span>{t.addDiseaseBtn}</span>
              </button>
            </div>

            <div className="bg-slate-950 rounded-2xl border border-slate-800 overflow-hidden">
              <table className="w-full text-left text-xs text-slate-300">
                <thead className="bg-slate-900 text-slate-400 font-bold uppercase text-[10px] tracking-wider border-b border-slate-800">
                  <tr>
                    <th className="p-4">Disease Name</th>
                    <th className="p-4">Urdu Name</th>
                    <th className="p-4">Category</th>
                    <th className="p-4">Status</th>
                    <th className="p-4 text-right">Actions</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-slate-800/60">
                  {diseases.map((item) => (
                    <tr key={item.id} className="hover:bg-slate-900/50 transition-colors">
                      <td className="p-4 font-bold text-white">{item.name}</td>
                      <td className="p-4 urdu-text text-sm font-semibold">{item.nameUrdu}</td>
                      <td className="p-4">
                        <span className={`px-2 py-0.5 rounded text-[10px] font-bold uppercase ${
                          item.category === 'communicable' ? 'bg-rose-950 text-rose-300' : 'bg-teal-950 text-teal-300'
                        }`}>
                          {item.category}
                        </span>
                      </td>
                      <td className="p-4">
                        <button
                          onClick={() => {
                            updateDisease(item.id, { published: !item.published });
                            showToast(`Disease guide ${item.published ? 'unpublished' : 'published'}`, 'info');
                          }}
                          className={`px-2.5 py-1 rounded-full text-[11px] font-bold flex items-center gap-1 cursor-pointer ${
                            item.published 
                              ? 'bg-emerald-950 text-emerald-300 border border-emerald-800' 
                              : 'bg-amber-950 text-amber-300 border border-amber-800'
                          }`}
                        >
                          {item.published ? <Eye className="w-3 h-3" /> : <EyeOff className="w-3 h-3" />}
                          <span>{item.published ? 'Live' : 'Draft'}</span>
                        </button>
                      </td>
                      <td className="p-4 text-right space-x-2">
                        <button
                          onClick={() => setEditingDisease(item)}
                          className="p-1.5 rounded-lg bg-slate-800 text-slate-200 hover:text-white hover:bg-slate-700 cursor-pointer"
                          title="Edit"
                        >
                          <Edit3 className="w-3.5 h-3.5" />
                        </button>
                        <button
                          onClick={() => {
                            if (window.confirm('Are you sure you want to delete this disease entry?')) {
                              deleteDisease(item.id);
                              showToast('Disease removed', 'info');
                            }
                          }}
                          className="p-1.5 rounded-lg bg-rose-950 text-rose-300 hover:bg-rose-900 cursor-pointer"
                          title="Delete"
                        >
                          <Trash2 className="w-3.5 h-3.5" />
                        </button>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        )}

        {/* TAB 5: NEWSLETTER SUBSCRIBERS */}
        {activeTab === 'subscribers' && (
          <div className="space-y-6">
            <div className="flex items-center justify-between">
              <div>
                <h2 className="text-lg font-bold text-white">{t.manageSubscribers}</h2>
                <p className="text-xs text-slate-400">Total registered community and health personnel emails</p>
              </div>
              <button
                onClick={exportSubscribersCSV}
                className="px-4 py-2.5 rounded-xl bg-teal-600 hover:bg-teal-500 text-white text-xs font-bold flex items-center gap-1.5 shadow-md cursor-pointer"
              >
                <Download className="w-4 h-4" />
                <span>{t.exportSubscribersBtn}</span>
              </button>
            </div>

            <div className="bg-slate-950 rounded-2xl border border-slate-800 overflow-hidden">
              <table className="w-full text-left text-xs text-slate-300">
                <thead className="bg-slate-900 text-slate-400 font-bold uppercase text-[10px] tracking-wider border-b border-slate-800">
                  <tr>
                    <th className="p-4">Email Address</th>
                    <th className="p-4">Subscribed Date</th>
                    <th className="p-4 text-right">Actions</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-slate-800/60">
                  {(!subscribers || subscribers.length === 0) ? (
                    <tr>
                      <td colSpan={3} className="p-8 text-center text-slate-500">
                        No subscribers registered yet.
                      </td>
                    </tr>
                  ) : (
                    (subscribers || []).map((s) => (
                      <tr key={s.id} className="hover:bg-slate-900/50 transition-colors">
                        <td className="p-4 font-mono font-medium text-white">{s.email}</td>
                        <td className="p-4 text-slate-400">{s.subscribedAt || (s as any).date || 'Recent'}</td>
                        <td className="p-4 text-right">
                          <button
                            onClick={() => {
                              deleteSubscriber(s.id);
                              showToast('Subscriber removed', 'info');
                            }}
                            className="p-1.5 rounded-lg bg-rose-950 text-rose-300 hover:bg-rose-900 cursor-pointer"
                            title="Delete"
                          >
                            <Trash2 className="w-3.5 h-3.5" />
                          </button>
                        </td>
                      </tr>
                    ))
                  )}
                </tbody>
              </table>
            </div>
          </div>
        )}

        {/* TAB 6: SITE SETTINGS & DOCTOR CONTACT */}
        {activeTab === 'settings' && (
          <div className="bg-slate-950 p-6 sm:p-8 rounded-3xl border border-slate-800 space-y-8 max-w-4xl">
            <div>
              <h2 className="text-xl font-bold text-white">{t.siteSettings}</h2>
              <p className="text-xs text-slate-400">Configure Dr. Mushtaque contact details, address, social media and platform branding</p>
            </div>

            <form
              onSubmit={(e) => {
                e.preventDefault();
                updateSettings(settingsForm);
                showToast(t.settingsSaved, 'success');
              }}
              className="space-y-6"
            >
              {/* Branding Section */}
              <div className="space-y-4 pt-2">
                <h3 className="text-xs font-bold text-teal-400 uppercase tracking-wider">Brand Identity</h3>
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                  <div>
                    <label className="text-xs text-slate-300 block mb-1">Logo Text</label>
                    <input
                      type="text"
                      value={settingsForm.logoText}
                      onChange={(e) => setSettingsForm({ ...settingsForm, logoText: e.target.value })}
                      className="w-full bg-slate-900 border border-slate-700 rounded-xl px-3.5 py-2.5 text-xs text-white"
                    />
                  </div>
                  <div>
                    <label className="text-xs text-slate-300 block mb-1">Tagline (English)</label>
                    <input
                      type="text"
                      value={settingsForm.taglineEn}
                      onChange={(e) => setSettingsForm({ ...settingsForm, taglineEn: e.target.value })}
                      className="w-full bg-slate-900 border border-slate-700 rounded-xl px-3.5 py-2.5 text-xs text-white"
                    />
                  </div>
                  <div className="sm:col-span-2">
                    <label className="text-xs text-slate-300 block mb-1">Tagline (Urdu)</label>
                    <input
                      type="text"
                      value={settingsForm.taglineUr}
                      onChange={(e) => setSettingsForm({ ...settingsForm, taglineUr: e.target.value })}
                      className="w-full bg-slate-900 border border-slate-700 rounded-xl px-3.5 py-2.5 text-xs text-white urdu-text"
                    />
                  </div>
                </div>
              </div>

              {/* Leadership Contact Details (Address, Email, Phone) */}
              <div className="space-y-4 pt-4 border-t border-slate-800">
                <h3 className="text-xs font-bold text-teal-400 uppercase tracking-wider">Leadership & Contact Information</h3>
                <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
                  <div>
                    <label className="text-xs text-slate-300 block mb-1">Office Email</label>
                    <input
                      type="email"
                      value={settingsForm.email}
                      onChange={(e) => setSettingsForm({ ...settingsForm, email: e.target.value })}
                      placeholder="e.g. contact@publichealthplus.org"
                      className="w-full bg-slate-900 border border-slate-700 rounded-xl px-3.5 py-2.5 text-xs text-white"
                    />
                  </div>
                  <div>
                    <label className="text-xs text-slate-300 block mb-1">Office Phone</label>
                    <input
                      type="text"
                      value={settingsForm.phone}
                      onChange={(e) => setSettingsForm({ ...settingsForm, phone: e.target.value })}
                      placeholder="e.g. +92 300 0000000"
                      className="w-full bg-slate-900 border border-slate-700 rounded-xl px-3.5 py-2.5 text-xs text-white"
                    />
                  </div>
                  <div>
                    <label className="text-xs text-slate-300 block mb-1">Office Address</label>
                    <input
                      type="text"
                      value={settingsForm.address}
                      onChange={(e) => setSettingsForm({ ...settingsForm, address: e.target.value })}
                      placeholder="e.g. Public Health Secretariat, Karachi"
                      className="w-full bg-slate-900 border border-slate-700 rounded-xl px-3.5 py-2.5 text-xs text-white"
                    />
                  </div>
                </div>
              </div>

              {/* Social Media Links */}
              <div className="space-y-4 pt-4 border-t border-slate-800">
                <h3 className="text-xs font-bold text-teal-400 uppercase tracking-wider">Social Media Channels</h3>
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                  <div>
                    <label className="text-xs text-slate-300 block mb-1">Facebook URL</label>
                    <input
                      type="url"
                      value={settingsForm.socialLinks.facebook}
                      onChange={(e) => setSettingsForm({ 
                        ...settingsForm, 
                        socialLinks: { ...settingsForm.socialLinks, facebook: e.target.value } 
                      })}
                      className="w-full bg-slate-900 border border-slate-700 rounded-xl px-3.5 py-2.5 text-xs text-white"
                    />
                  </div>
                  <div>
                    <label className="text-xs text-slate-300 block mb-1">YouTube Channel URL</label>
                    <input
                      type="url"
                      value={settingsForm.socialLinks.youtube}
                      onChange={(e) => setSettingsForm({ 
                        ...settingsForm, 
                        socialLinks: { ...settingsForm.socialLinks, youtube: e.target.value } 
                      })}
                      className="w-full bg-slate-900 border border-slate-700 rounded-xl px-3.5 py-2.5 text-xs text-white"
                    />
                  </div>
                  <div>
                    <label className="text-xs text-slate-300 block mb-1">TikTok Channel URL</label>
                    <input
                      type="url"
                      value={settingsForm.socialLinks.tiktok}
                      onChange={(e) => setSettingsForm({ 
                        ...settingsForm, 
                        socialLinks: { ...settingsForm.socialLinks, tiktok: e.target.value } 
                      })}
                      className="w-full bg-slate-900 border border-slate-700 rounded-xl px-3.5 py-2.5 text-xs text-white"
                    />
                  </div>
                  <div>
                    <label className="text-xs text-slate-300 block mb-1">LinkedIn Profile URL</label>
                    <input
                      type="url"
                      value={settingsForm.socialLinks.linkedin}
                      onChange={(e) => setSettingsForm({ 
                        ...settingsForm, 
                        socialLinks: { ...settingsForm.socialLinks, linkedin: e.target.value } 
                      })}
                      className="w-full bg-slate-900 border border-slate-700 rounded-xl px-3.5 py-2.5 text-xs text-white"
                    />
                  </div>
                </div>
              </div>

              <div className="pt-4 flex justify-end">
                <button
                  type="submit"
                  className="px-6 py-3 rounded-xl bg-teal-600 hover:bg-teal-500 text-white font-bold text-xs flex items-center gap-2 cursor-pointer shadow-md"
                >
                  <Save className="w-4 h-4" />
                  <span>Save Configuration</span>
                </button>
              </div>
            </form>
          </div>
        )}

      </div>

      {/* --- ADD/EDIT NEWS MODAL --- */}
      {(isAddingNews || editingNews) && (
        <NewsFormModal
          initialData={editingNews}
          onClose={() => {
            setIsAddingNews(false);
            setEditingNews(null);
          }}
          onSave={(data) => {
            if (editingNews) {
              updateNews(editingNews.id, data);
              showToast('News article updated', 'success');
            } else {
              addNews(data as any);
              showToast('News article published', 'success');
            }
            setIsAddingNews(false);
            setEditingNews(null);
          }}
        />
      )}

      {/* --- ADD/EDIT MEDIA MODAL --- */}
      {(isAddingMedia || editingMedia) && (
        <MediaFormModal
          initialData={editingMedia}
          onClose={() => {
            setIsAddingMedia(false);
            setEditingMedia(null);
          }}
          onSave={(data) => {
            if (editingMedia) {
              updateMedia(editingMedia.id, data);
              showToast('Media item updated', 'success');
            } else {
              addMedia(data as any);
              showToast('Media item uploaded', 'success');
            }
            setIsAddingMedia(false);
            setEditingMedia(null);
          }}
        />
      )}

      {/* --- ADD/EDIT REPORT MODAL --- */}
      {(isAddingReport || editingReport) && (
        <ReportFormModal
          initialData={editingReport}
          onClose={() => {
            setIsAddingReport(false);
            setEditingReport(null);
          }}
          onSave={(data) => {
            if (editingReport) {
              updateReport(editingReport.id, data);
              showToast('Report updated', 'success');
            } else {
              addReport(data as any);
              showToast('Report uploaded', 'success');
            }
            setIsAddingReport(false);
            setEditingReport(null);
          }}
        />
      )}

      {/* --- ADD/EDIT DISEASE MODAL --- */}
      {(isAddingDisease || editingDisease) && (
        <DiseaseFormModal
          initialData={editingDisease}
          onClose={() => {
            setIsAddingDisease(false);
            setEditingDisease(null);
          }}
          onSave={(data) => {
            if (editingDisease) {
              updateDisease(editingDisease.id, data);
              showToast('Disease clinical protocol updated', 'success');
            } else {
              addDisease(data as any);
              showToast('Disease clinical protocol added', 'success');
            }
            setIsAddingDisease(false);
            setEditingDisease(null);
          }}
        />
      )}

    </div>
  );
};

/* --- SUB-COMPONENTS FOR ADMIN EDITORS --- */

const NewsFormModal: React.FC<{
  initialData: NewsArticle | null;
  onClose: () => void;
  onSave: (data: Partial<NewsArticle>) => void;
}> = ({ initialData, onClose, onSave }) => {
  const [formData, setFormData] = useState<Partial<NewsArticle>>(
    initialData || {
      title: '',
      titleUrdu: '',
      summary: '',
      summaryUrdu: '',
      content: '',
      contentUrdu: '',
      category: 'Communicable Diseases',
      categoryUrdu: 'متعدی امراض',
      author: 'Dr. Mushtaque Ahmed Shah, Public Health Specialist',
      featuredImage: 'https://images.unsplash.com/photo-1576091160550-2173dba999ef?auto=format&fit=crop&w=800&q=80',
      readTime: '3 min read',
      published: true
    }
  );

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    onSave(formData);
  };

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950/80 backdrop-blur-sm overflow-y-auto">
      <div className="bg-slate-900 border border-slate-700 rounded-3xl max-w-2xl w-full p-6 text-white max-h-[90vh] overflow-y-auto space-y-4">
        <div className="flex items-center justify-between border-b border-slate-800 pb-3">
          <h3 className="font-bold text-lg">{initialData ? 'Edit News Article' : 'Add New Health Advisory'}</h3>
          <button onClick={onClose} className="p-1 rounded text-slate-400 hover:text-white"><X className="w-5 h-5" /></button>
        </div>

        <form onSubmit={handleSubmit} className="space-y-4 text-xs">
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
            <div>
              <label className="block text-slate-300 mb-1">Title (English)</label>
              <input
                type="text"
                required
                value={formData.title || ''}
                onChange={(e) => setFormData({ ...formData, title: e.target.value })}
                className="w-full bg-slate-800 border border-slate-700 rounded-lg p-2 text-white"
              />
            </div>
            <div>
              <label className="block text-slate-300 mb-1">Title (Urdu)</label>
              <input
                type="text"
                required
                value={formData.titleUrdu || ''}
                onChange={(e) => setFormData({ ...formData, titleUrdu: e.target.value })}
                className="w-full bg-slate-800 border border-slate-700 rounded-lg p-2 text-white urdu-text"
              />
            </div>
          </div>

          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
            <div>
              <label className="block text-slate-300 mb-1">Category</label>
              <input
                type="text"
                value={formData.category || ''}
                onChange={(e) => setFormData({ ...formData, category: e.target.value })}
                className="w-full bg-slate-800 border border-slate-700 rounded-lg p-2 text-white"
              />
            </div>
            <div>
              <label className="block text-slate-300 mb-1">Image URL</label>
              <input
                type="url"
                value={formData.featuredImage || ''}
                onChange={(e) => setFormData({ ...formData, featuredImage: e.target.value })}
                className="w-full bg-slate-800 border border-slate-700 rounded-lg p-2 text-white"
              />
            </div>
          </div>

          <div>
            <label className="block text-slate-300 mb-1">Summary (English)</label>
            <textarea
              rows={2}
              required
              value={formData.summary || ''}
              onChange={(e) => setFormData({ ...formData, summary: e.target.value })}
              className="w-full bg-slate-800 border border-slate-700 rounded-lg p-2 text-white"
            />
          </div>

          <div>
            <label className="block text-slate-300 mb-1">Summary (Urdu)</label>
            <textarea
              rows={2}
              required
              value={formData.summaryUrdu || ''}
              onChange={(e) => setFormData({ ...formData, summaryUrdu: e.target.value })}
              className="w-full bg-slate-800 border border-slate-700 rounded-lg p-2 text-white urdu-text"
            />
          </div>

          <div>
            <label className="block text-slate-300 mb-1">Full Content (English)</label>
            <textarea
              rows={4}
              required
              value={formData.content || ''}
              onChange={(e) => setFormData({ ...formData, content: e.target.value })}
              className="w-full bg-slate-800 border border-slate-700 rounded-lg p-2 text-white"
            />
          </div>

          <div>
            <label className="block text-slate-300 mb-1">Full Content (Urdu)</label>
            <textarea
              rows={4}
              required
              value={formData.contentUrdu || ''}
              onChange={(e) => setFormData({ ...formData, contentUrdu: e.target.value })}
              className="w-full bg-slate-800 border border-slate-700 rounded-lg p-2 text-white urdu-text"
            />
          </div>

          <div className="flex items-center gap-2 pt-2">
            <input
              type="checkbox"
              id="newsPublished"
              checked={formData.published ?? true}
              onChange={(e) => setFormData({ ...formData, published: e.target.checked })}
              className="rounded bg-slate-800 border-slate-700 text-teal-600 focus:ring-teal-500"
            />
            <label htmlFor="newsPublished" className="text-slate-300">Publish immediately to public site</label>
          </div>

          <div className="flex justify-end gap-2 pt-4 border-t border-slate-800">
            <button type="button" onClick={onClose} className="px-4 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-300">Cancel</button>
            <button type="submit" className="px-5 py-2 rounded-lg bg-teal-600 hover:bg-teal-500 text-white font-bold">Save Article</button>
          </div>
        </form>
      </div>
    </div>
  );
};

const MediaFormModal: React.FC<{
  initialData: MediaItem | null;
  onClose: () => void;
  onSave: (data: Partial<MediaItem>) => void;
}> = ({ initialData, onClose, onSave }) => {
  const [formData, setFormData] = useState<Partial<MediaItem>>(
    initialData || {
      title: '',
      titleUrdu: '',
      description: '',
      descriptionUrdu: '',
      type: 'video',
      url: 'https://www.youtube.com/embed/dQw4w9WgXcQ',
      thumbnailUrl: 'https://images.unsplash.com/photo-1584515979956-d9f6e5d09982?auto=format&fit=crop&w=800&q=80',
      topic: 'Vector Control',
      topicUrdu: 'ویکٹر کنٹرول',
      date: new Date().toISOString().slice(0, 10),
      published: true
    }
  );

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    onSave(formData);
  };

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950/80 backdrop-blur-sm overflow-y-auto">
      <div className="bg-slate-900 border border-slate-700 rounded-3xl max-w-lg w-full p-6 text-white max-h-[90vh] overflow-y-auto space-y-4">
        <div className="flex items-center justify-between border-b border-slate-800 pb-3">
          <h3 className="font-bold text-lg">{initialData ? 'Edit Media Item' : 'Upload Educational Media'}</h3>
          <button onClick={onClose} className="p-1 rounded text-slate-400 hover:text-white"><X className="w-5 h-5" /></button>
        </div>

        <form onSubmit={handleSubmit} className="space-y-4 text-xs">
          <div>
            <label className="block text-slate-300 mb-1">Media Type</label>
            <select
              value={formData.type}
              onChange={(e) => setFormData({ ...formData, type: e.target.value as 'video' | 'image' })}
              className="w-full bg-slate-800 border border-slate-700 rounded-lg p-2 text-white"
            >
              <option value="video">Video (Protected Stream)</option>
              <option value="image">Health Infographic / Image</option>
            </select>
          </div>

          <div>
            <label className="block text-slate-300 mb-1">Title (English)</label>
            <input
              type="text"
              required
              value={formData.title || ''}
              onChange={(e) => setFormData({ ...formData, title: e.target.value })}
              className="w-full bg-slate-800 border border-slate-700 rounded-lg p-2 text-white"
            />
          </div>

          <div>
            <label className="block text-slate-300 mb-1">Title (Urdu)</label>
            <input
              type="text"
              required
              value={formData.titleUrdu || ''}
              onChange={(e) => setFormData({ ...formData, titleUrdu: e.target.value })}
              className="w-full bg-slate-800 border border-slate-700 rounded-lg p-2 text-white urdu-text"
            />
          </div>

          <div>
            <label className="block text-slate-300 mb-1">Media Resource URL</label>
            <input
              type="url"
              required
              value={formData.url || ''}
              onChange={(e) => setFormData({ ...formData, url: e.target.value })}
              className="w-full bg-slate-800 border border-slate-700 rounded-lg p-2 text-white"
            />
          </div>

          <div>
            <label className="block text-slate-300 mb-1">Thumbnail Preview URL</label>
            <input
              type="url"
              value={formData.thumbnailUrl || ''}
              onChange={(e) => setFormData({ ...formData, thumbnailUrl: e.target.value })}
              className="w-full bg-slate-800 border border-slate-700 rounded-lg p-2 text-white"
            />
          </div>

          <div className="grid grid-cols-2 gap-3">
            <div>
              <label className="block text-slate-300 mb-1">Topic</label>
              <input
                type="text"
                value={formData.topic || ''}
                onChange={(e) => setFormData({ ...formData, topic: e.target.value })}
                className="w-full bg-slate-800 border border-slate-700 rounded-lg p-2 text-white"
              />
            </div>
            <div>
              <label className="block text-slate-300 mb-1">Date</label>
              <input
                type="text"
                value={formData.date || ''}
                onChange={(e) => setFormData({ ...formData, date: e.target.value })}
                className="w-full bg-slate-800 border border-slate-700 rounded-lg p-2 text-white"
              />
            </div>
          </div>

          <div className="flex justify-end gap-2 pt-4 border-t border-slate-800">
            <button type="button" onClick={onClose} className="px-4 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-300">Cancel</button>
            <button type="submit" className="px-5 py-2 rounded-lg bg-teal-600 hover:bg-teal-500 text-white font-bold">Save Media</button>
          </div>
        </form>
      </div>
    </div>
  );
};

const ReportFormModal: React.FC<{
  initialData: ReportItem | null;
  onClose: () => void;
  onSave: (data: Partial<ReportItem>) => void;
}> = ({ initialData, onClose, onSave }) => {
  const [formData, setFormData] = useState<Partial<ReportItem>>(
    initialData || {
      title: '',
      titleUrdu: '',
      category: 'Communicable Diseases',
      categoryUrdu: 'متعدی امراض',
      description: '',
      descriptionUrdu: '',
      downloadUrl: 'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf',
      fileSize: '1.8 MB',
      date: new Date().toISOString().slice(0, 10),
      author: 'Dr. Mushtaque Ahmed Shah',
      published: true
    }
  );

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    onSave(formData);
  };

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950/80 backdrop-blur-sm overflow-y-auto">
      <div className="bg-slate-900 border border-slate-700 rounded-3xl max-w-lg w-full p-6 text-white max-h-[90vh] overflow-y-auto space-y-4">
        <div className="flex items-center justify-between border-b border-slate-800 pb-3">
          <h3 className="font-bold text-lg">{initialData ? 'Edit Research Report' : 'Upload Research Document'}</h3>
          <button onClick={onClose} className="p-1 rounded text-slate-400 hover:text-white"><X className="w-5 h-5" /></button>
        </div>

        <form onSubmit={handleSubmit} className="space-y-4 text-xs">
          <div>
            <label className="block text-slate-300 mb-1">Title (English)</label>
            <input
              type="text"
              required
              value={formData.title || ''}
              onChange={(e) => setFormData({ ...formData, title: e.target.value })}
              className="w-full bg-slate-800 border border-slate-700 rounded-lg p-2 text-white"
            />
          </div>

          <div>
            <label className="block text-slate-300 mb-1">Title (Urdu)</label>
            <input
              type="text"
              required
              value={formData.titleUrdu || ''}
              onChange={(e) => setFormData({ ...formData, titleUrdu: e.target.value })}
              className="w-full bg-slate-800 border border-slate-700 rounded-lg p-2 text-white urdu-text"
            />
          </div>

          <div>
            <label className="block text-slate-300 mb-1">Category</label>
            <select
              value={formData.category}
              onChange={(e) => setFormData({ ...formData, category: e.target.value })}
              className="w-full bg-slate-800 border border-slate-700 rounded-lg p-2 text-white"
            >
              <option value="Communicable Diseases">Communicable Diseases</option>
              <option value="Non-Communicable Diseases">Non-Communicable Diseases</option>
              <option value="Policy & Systems">Policy & Systems</option>
              <option value="Maternal & Child Health">Maternal & Child Health</option>
            </select>
          </div>

          <div>
            <label className="block text-slate-300 mb-1">Summary (English)</label>
            <textarea
              rows={3}
              value={formData.description || ''}
              onChange={(e) => setFormData({ ...formData, description: e.target.value })}
              className="w-full bg-slate-800 border border-slate-700 rounded-lg p-2 text-white"
            />
          </div>

          <div>
            <label className="block text-slate-300 mb-1">Summary (Urdu)</label>
            <textarea
              rows={3}
              value={formData.descriptionUrdu || ''}
              onChange={(e) => setFormData({ ...formData, descriptionUrdu: e.target.value })}
              className="w-full bg-slate-800 border border-slate-700 rounded-lg p-2 text-white urdu-text"
            />
          </div>

          <div className="grid grid-cols-2 gap-3">
            <div>
              <label className="block text-slate-300 mb-1">File Size</label>
              <input
                type="text"
                value={formData.fileSize || ''}
                onChange={(e) => setFormData({ ...formData, fileSize: e.target.value })}
                className="w-full bg-slate-800 border border-slate-700 rounded-lg p-2 text-white"
              />
            </div>
            <div>
              <label className="block text-slate-300 mb-1">Download Link</label>
              <input
                type="url"
                value={formData.downloadUrl || ''}
                onChange={(e) => setFormData({ ...formData, downloadUrl: e.target.value })}
                className="w-full bg-slate-800 border border-slate-700 rounded-lg p-2 text-white"
              />
            </div>
          </div>

          <div className="flex justify-end gap-2 pt-4 border-t border-slate-800">
            <button type="button" onClick={onClose} className="px-4 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-300">Cancel</button>
            <button type="submit" className="px-5 py-2 rounded-lg bg-teal-600 hover:bg-teal-500 text-white font-bold">Save Report</button>
          </div>
        </form>
      </div>
    </div>
  );
};

const DiseaseFormModal: React.FC<{
  initialData: Disease | null;
  onClose: () => void;
  onSave: (data: Partial<Disease>) => void;
}> = ({ initialData, onClose, onSave }) => {
  const [formData, setFormData] = useState<Partial<Disease>>(
    initialData || {
      name: '',
      nameUrdu: '',
      slug: '',
      category: 'communicable',
      shortSummary: '',
      shortSummaryUrdu: '',
      overview: '',
      overviewUrdu: '',
      symptoms: ['High fever', 'Headache'],
      symptomsUrdu: ['تیز بخار', 'سر درد'],
      riskFactors: ['Stagnant water', 'Vector exposure'],
      riskFactorsUrdu: ['کھڑا پانی', 'مچھروں کی کثرت'],
      prevention: ['Vector management', 'Screening'],
      preventionUrdu: ['مچھر دانی کا استعمال', 'صفائی'],
      testing: 'Clinical serology and PCR diagnostic testing.',
      testingUrdu: 'خون کا ٹیسٹ اور پی سی آر تشخیصی معائنہ۔',
      treatment: 'Supportive hydration, clinical monitoring and prescribed therapeutics.',
      treatmentUrdu: 'مناسب ہائیڈریشن، ڈاکٹر کی تجویز کردہ دوائیں اور نگرانی۔',
      updatedAt: '2026-03',
      published: true
    }
  );

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    onSave({
      ...formData,
      slug: formData.slug || (formData.name || '').toLowerCase().replace(/\s+/g, '-')
    });
  };

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950/85 backdrop-blur-sm overflow-y-auto">
      <div className="bg-slate-900 border border-slate-700 rounded-3xl max-w-3xl w-full p-6 text-white max-h-[90vh] overflow-y-auto space-y-4">
        <div className="flex items-center justify-between border-b border-slate-800 pb-3">
          <h3 className="font-bold text-lg">{initialData ? 'Edit Disease Protocol' : 'Add New Disease Protocol'}</h3>
          <button onClick={onClose} className="p-1 rounded text-slate-400 hover:text-white"><X className="w-5 h-5" /></button>
        </div>

        <form onSubmit={handleSubmit} className="space-y-4 text-xs">
          <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
            <div>
              <label className="block text-slate-300 mb-1">Disease Name (English)</label>
              <input
                type="text"
                required
                value={formData.name || ''}
                onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                className="w-full bg-slate-800 border border-slate-700 rounded-lg p-2 text-white"
              />
            </div>
            <div>
              <label className="block text-slate-300 mb-1">Disease Name (Urdu)</label>
              <input
                type="text"
                required
                value={formData.nameUrdu || ''}
                onChange={(e) => setFormData({ ...formData, nameUrdu: e.target.value })}
                className="w-full bg-slate-800 border border-slate-700 rounded-lg p-2 text-white urdu-text"
              />
            </div>
            <div>
              <label className="block text-slate-300 mb-1">Category</label>
              <select
                value={formData.category}
                onChange={(e) => setFormData({ ...formData, category: e.target.value as any })}
                className="w-full bg-slate-800 border border-slate-700 rounded-lg p-2 text-white"
              >
                <option value="communicable">Communicable</option>
                <option value="non-communicable">Non-Communicable</option>
              </select>
            </div>
          </div>

          <div>
            <label className="block text-slate-300 mb-1">1. Overview (English)</label>
            <textarea
              rows={2}
              value={formData.overview || ''}
              onChange={(e) => setFormData({ ...formData, overview: e.target.value, shortSummary: e.target.value.slice(0, 140) })}
              className="w-full bg-slate-800 border border-slate-700 rounded-lg p-2 text-white"
            />
          </div>

          <div>
            <label className="block text-slate-300 mb-1">1. Overview (Urdu)</label>
            <textarea
              rows={2}
              value={formData.overviewUrdu || ''}
              onChange={(e) => setFormData({ ...formData, overviewUrdu: e.target.value, shortSummaryUrdu: e.target.value.slice(0, 140) })}
              className="w-full bg-slate-800 border border-slate-700 rounded-lg p-2 text-white urdu-text"
            />
          </div>

          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
            <div>
              <label className="block text-slate-300 mb-1">5. Testing & Screening (English)</label>
              <textarea
                rows={2}
                value={formData.testing || ''}
                onChange={(e) => setFormData({ ...formData, testing: e.target.value })}
                className="w-full bg-slate-800 border border-slate-700 rounded-lg p-2 text-white"
              />
            </div>
            <div>
              <label className="block text-slate-300 mb-1">6. Management & Treatment (English)</label>
              <textarea
                rows={2}
                value={formData.treatment || ''}
                onChange={(e) => setFormData({ ...formData, treatment: e.target.value })}
                className="w-full bg-slate-800 border border-slate-700 rounded-lg p-2 text-white"
              />
            </div>
          </div>

          <div className="flex justify-end gap-2 pt-4 border-t border-slate-800">
            <button type="button" onClick={onClose} className="px-4 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-300">Cancel</button>
            <button type="submit" className="px-5 py-2 rounded-lg bg-teal-600 hover:bg-teal-500 text-white font-bold">Save Disease Protocol</button>
          </div>
        </form>
      </div>
    </div>
  );
};


// ===== src/components/SearchModal.tsx =====




const SearchModal: React.FC = () => {
  const { 
    lang, 
    t, 
    isSearchOpen, 
    setIsSearchOpen, 
    searchQuery, 
    setSearchQuery,
    diseases,
    news,
    reports,
    media,
    setSelectedDisease,
    setSelectedNews,
    setSelectedReport,
    setSelectedMedia,
    setCurrentPage
  } = useApp();

  const inputRef = useRef<HTMLInputElement>(null);
  const isRTL = lang === 'ur';
  const ArrowIcon = isRTL ? ArrowLeft : ArrowRight;

  useEffect(() => {
    if (isSearchOpen) {
      setTimeout(() => {
        inputRef.current?.focus();
      }, 100);
    }
  }, [isSearchOpen]);

  // Handle ESC key
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === 'Escape' && isSearchOpen) {
        setIsSearchOpen(false);
      }
    };
    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, [isSearchOpen, setIsSearchOpen]);

  if (!isSearchOpen) return null;

  const query = searchQuery.trim().toLowerCase();

  // Filter published diseases
  const filteredDiseases = diseases.filter(d => 
    d.published && (
      !query || 
      d.name.toLowerCase().includes(query) || 
      d.nameUrdu.includes(query) ||
      d.shortSummary.toLowerCase().includes(query) ||
      d.shortSummaryUrdu.includes(query) ||
      d.symptoms.some(s => s.toLowerCase().includes(query)) ||
      d.symptomsUrdu.some(s => s.includes(query))
    )
  );

  // Filter published news
  const filteredNews = news.filter(n =>
    n.published && (
      !query ||
      n.title.toLowerCase().includes(query) ||
      n.titleUrdu.includes(query) ||
      n.summary.toLowerCase().includes(query) ||
      n.summaryUrdu.includes(query)
    )
  );

  // Filter published reports
  const filteredReports = reports.filter(r =>
    r.published && (
      !query ||
      r.title.toLowerCase().includes(query) ||
      r.titleUrdu.includes(query) ||
      r.description.toLowerCase().includes(query) ||
      r.descriptionUrdu.includes(query)
    )
  );

  // Filter published media
  const filteredMedia = media.filter(m =>
    m.published && (
      !query ||
      m.title.toLowerCase().includes(query) ||
      m.titleUrdu.includes(query) ||
      m.topic.toLowerCase().includes(query)
    )
  );

  const totalResults = filteredDiseases.length + filteredNews.length + filteredReports.length + filteredMedia.length;

  const openDisease = (d: Disease) => {
    setSelectedDisease(d);
    setIsSearchOpen(false);
  };

  const openNews = (n: NewsArticle) => {
    setSelectedNews(n);
    setIsSearchOpen(false);
  };

  const openReport = (r: ReportItem) => {
    setSelectedReport(r);
    setIsSearchOpen(false);
  };

  const openMedia = (m: MediaItem) => {
    setSelectedMedia(m);
    setIsSearchOpen(false);
  };

  return (
    <div className="fixed inset-0 z-50 flex items-start justify-center p-4 sm:p-6 md:p-10 bg-slate-950/70 backdrop-blur-sm animate-in fade-in duration-200">
      <div className="bg-white rounded-2xl shadow-2xl border border-slate-200 w-full max-w-3xl overflow-hidden flex flex-col max-h-[85vh]">
        
        {/* Search Input Bar */}
        <div className="p-4 sm:p-6 border-b border-slate-100 flex items-center gap-3 bg-slate-50/70">
          <Search className="w-5 h-5 text-teal-600 shrink-0" />
          <input
            ref={inputRef}
            type="text"
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            placeholder={t.searchPlaceholder}
            className={`w-full bg-transparent text-slate-900 placeholder:text-slate-400 font-medium text-base sm:text-lg focus:outline-none ${isRTL ? 'urdu-text' : ''}`}
          />
          {searchQuery && (
            <button
              onClick={() => setSearchQuery('')}
              className="p-1 rounded-md text-slate-400 hover:text-slate-600 hover:bg-slate-200/60"
            >
              <X className="w-4 h-4" />
            </button>
          )}
          <button
            onClick={() => setIsSearchOpen(false)}
            className="p-2 rounded-xl text-slate-500 hover:text-slate-800 hover:bg-slate-200/60 transition-colors"
            aria-label="Close search"
          >
            <X className="w-5 h-5" />
          </button>
        </div>

        {/* Results Body */}
        <div className="overflow-y-auto p-4 sm:p-6 space-y-6 flex-1">
          {totalResults === 0 ? (
            <div className="text-center py-12 space-y-3">
              <div className="w-12 h-12 rounded-full bg-slate-100 text-slate-400 flex items-center justify-center mx-auto">
                <Search className="w-6 h-6" />
              </div>
              <p className={`text-slate-600 font-medium ${isRTL ? 'urdu-text text-base' : 'text-sm'}`}>
                {t.noResultsFound}
              </p>
            </div>
          ) : (
            <>
              {/* Diseases Group */}
              {filteredDiseases.length > 0 && (
                <div className="space-y-3">
                  <div className="flex items-center gap-2 text-xs font-bold text-teal-800 uppercase tracking-wider">
                    <HeartPulse className="w-4 h-4 text-teal-600" />
                    <span>{t.sectionDiseasesTitle} ({filteredDiseases.length})</span>
                  </div>

                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-2.5">
                    {filteredDiseases.map(d => (
                      <div
                        key={d.id}
                        onClick={() => openDisease(d)}
                        className="p-3.5 rounded-xl border border-slate-200 hover:border-teal-400 hover:bg-teal-50/40 transition-all cursor-pointer group flex flex-col justify-between"
                      >
                        <div>
                          <div className="flex items-center justify-between mb-1">
                            <span className="text-xs font-semibold text-teal-700 bg-teal-100/70 px-2 py-0.5 rounded-md">
                              {d.category === 'communicable' ? (lang === 'ur' ? 'متعدی' : 'Communicable') : (lang === 'ur' ? 'غیر متعدی' : 'Non-Communicable')}
                            </span>
                            <ArrowIcon className="w-3.5 h-3.5 text-slate-400 group-hover:text-teal-600 transition-colors" />
                          </div>
                          <h4 className={`font-bold text-slate-900 text-sm group-hover:text-teal-900 ${isRTL ? 'urdu-text' : ''}`}>
                            {lang === 'ur' ? d.nameUrdu : d.name}
                          </h4>
                          <p className={`text-xs text-slate-500 line-clamp-2 mt-1 ${isRTL ? 'urdu-text' : ''}`}>
                            {lang === 'ur' ? d.shortSummaryUrdu : d.shortSummary}
                          </p>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              )}

              {/* News Group */}
              {filteredNews.length > 0 && (
                <div className="space-y-3 pt-3 border-t border-slate-100">
                  <div className="flex items-center gap-2 text-xs font-bold text-sky-800 uppercase tracking-wider">
                    <BookOpen className="w-4 h-4 text-sky-600" />
                    <span>{t.sectionNewsTitle} ({filteredNews.length})</span>
                  </div>

                  <div className="space-y-2">
                    {filteredNews.map(n => (
                      <div
                        key={n.id}
                        onClick={() => openNews(n)}
                        className="p-3 rounded-xl border border-slate-200 hover:border-sky-400 hover:bg-sky-50/30 transition-all cursor-pointer group flex items-start justify-between gap-3"
                      >
                        <div className="space-y-1">
                          <span className="text-[11px] font-medium text-sky-700">
                            {lang === 'ur' ? n.categoryUrdu : n.category} • {n.date}
                          </span>
                          <h4 className={`font-bold text-slate-900 text-sm group-hover:text-sky-900 ${isRTL ? 'urdu-text' : ''}`}>
                            {lang === 'ur' ? n.titleUrdu : n.title}
                          </h4>
                        </div>
                        <ArrowIcon className="w-4 h-4 text-slate-400 group-hover:text-sky-600 shrink-0 mt-1" />
                      </div>
                    ))}
                  </div>
                </div>
              )}

              {/* Reports Group */}
              {filteredReports.length > 0 && (
                <div className="space-y-3 pt-3 border-t border-slate-100">
                  <div className="flex items-center gap-2 text-xs font-bold text-indigo-800 uppercase tracking-wider">
                    <FileText className="w-4 h-4 text-indigo-600" />
                    <span>{t.sectionReportsTitle} ({filteredReports.length})</span>
                  </div>

                  <div className="space-y-2">
                    {filteredReports.map(r => (
                      <div
                        key={r.id}
                        onClick={() => openReport(r)}
                        className="p-3 rounded-xl border border-slate-200 hover:border-indigo-400 hover:bg-indigo-50/30 transition-all cursor-pointer group flex items-start justify-between gap-3"
                      >
                        <div className="space-y-1">
                          <span className="text-[11px] font-semibold text-indigo-700">
                            {lang === 'ur' ? r.categoryUrdu : r.category} • {r.fileSize}
                          </span>
                          <h4 className={`font-bold text-slate-900 text-sm group-hover:text-indigo-900 ${isRTL ? 'urdu-text' : ''}`}>
                            {lang === 'ur' ? r.titleUrdu : r.title}
                          </h4>
                        </div>
                        <ArrowIcon className="w-4 h-4 text-slate-400 group-hover:text-indigo-600 shrink-0 mt-1" />
                      </div>
                    ))}
                  </div>
                </div>
              )}

              {/* Media Group */}
              {filteredMedia.length > 0 && (
                <div className="space-y-3 pt-3 border-t border-slate-100">
                  <div className="flex items-center gap-2 text-xs font-bold text-amber-800 uppercase tracking-wider">
                    <Film className="w-4 h-4 text-amber-600" />
                    <span>{t.sectionMediaTitle} ({filteredMedia.length})</span>
                  </div>

                  <div className="space-y-2">
                    {filteredMedia.map(m => (
                      <div
                        key={m.id}
                        onClick={() => openMedia(m)}
                        className="p-3 rounded-xl border border-slate-200 hover:border-amber-400 hover:bg-amber-50/30 transition-all cursor-pointer group flex items-start justify-between gap-3"
                      >
                        <div className="space-y-1">
                          <span className="text-[11px] font-semibold text-amber-700 uppercase">
                            {m.type} • {lang === 'ur' ? m.topicUrdu : m.topic}
                          </span>
                          <h4 className={`font-bold text-slate-900 text-sm group-hover:text-amber-900 ${isRTL ? 'urdu-text' : ''}`}>
                            {lang === 'ur' ? m.titleUrdu : m.title}
                          </h4>
                        </div>
                        <ArrowIcon className="w-4 h-4 text-slate-400 group-hover:text-amber-600 shrink-0 mt-1" />
                      </div>
                    ))}
                  </div>
                </div>
              )}
            </>
          )}
        </div>

        {/* Footer info */}
        <div className="p-3.5 bg-slate-50 border-t border-slate-200 text-xs text-slate-500 flex items-center justify-between">
          <span>{t.searchingIn}</span>
          <span className="hidden sm:inline-block">Press ESC to exit</span>
        </div>
      </div>
    </div>
  );
};


// ===== src/components/NewsArticleModal.tsx =====



const NewsArticleModal: React.FC = () => {
  const { lang, t, selectedNews, setSelectedNews, setShareModalItem } = useApp();

  if (!selectedNews) return null;

  const isRTL = lang === 'ur';

  const handleShare = () => {
    setShareModalItem({
      title: lang === 'ur' ? selectedNews.titleUrdu : selectedNews.title,
      url: `${window.location.origin}/#news-${selectedNews.id}`,
      type: 'News Advisory'
    });
  };

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6 bg-slate-950/75 backdrop-blur-sm overflow-y-auto animate-in fade-in duration-200">
      <div className="bg-white rounded-2xl shadow-2xl border border-slate-200 max-w-3xl w-full overflow-hidden my-auto max-h-[90vh] flex flex-col">
        
        {/* Header Bar */}
        <div className="p-4 sm:p-5 border-b border-slate-100 flex items-center justify-between bg-slate-50">
          <div className="flex items-center gap-2">
            <span className="text-xs font-bold px-2.5 py-1 rounded-full bg-teal-100 text-teal-800 border border-teal-200">
              {lang === 'ur' ? selectedNews.categoryUrdu : selectedNews.category}
            </span>
            <span className="text-xs text-slate-500 font-medium flex items-center gap-1">
              <Calendar className="w-3.5 h-3.5" />
              {selectedNews.date}
            </span>
          </div>

          <div className="flex items-center gap-2">
            <button
              onClick={handleShare}
              className="p-2 rounded-xl text-slate-600 hover:text-teal-700 hover:bg-teal-50 transition-colors flex items-center gap-1.5 text-xs font-semibold cursor-pointer"
              title="Share"
            >
              <Share2 className="w-4 h-4" />
              <span className="hidden sm:inline">{t.shareContent}</span>
            </button>
            <button
              onClick={() => setSelectedNews(null)}
              className="p-2 rounded-xl text-slate-500 hover:text-slate-900 hover:bg-slate-200/70 transition-colors cursor-pointer"
              aria-label="Close"
            >
              <X className="w-5 h-5" />
            </button>
          </div>
        </div>

        {/* Article Body */}
        <div className="p-5 sm:p-8 overflow-y-auto space-y-6">
          {/* Featured Image */}
          {selectedNews.featuredImage && (
            <div className="rounded-xl overflow-hidden shadow-sm border border-slate-200 max-h-80 w-full bg-slate-100">
              <img
                src={selectedNews.featuredImage}
                alt={selectedNews.title}
                referrerPolicy="no-referrer"
                className="w-full h-full object-cover"
              />
            </div>
          )}

          {/* Title */}
          <h2 className={`text-2xl sm:text-3xl font-extrabold text-slate-900 leading-tight ${isRTL ? 'urdu-heading' : ''}`}>
            {lang === 'ur' ? selectedNews.titleUrdu : selectedNews.title}
          </h2>

          {/* Author and Read Time info */}
          <div className="flex flex-wrap items-center gap-4 text-xs font-medium text-slate-500 border-y border-slate-100 py-3">
            <div className="flex items-center gap-1.5">
              <User className="w-4 h-4 text-teal-600" />
              <span>{selectedNews.author}</span>
            </div>
            <div className="flex items-center gap-1.5">
              <Clock className="w-4 h-4 text-teal-600" />
              <span>{selectedNews.readTime}</span>
            </div>
            <div className="flex items-center gap-1.5 text-teal-700 font-semibold">
              <ShieldCheck className="w-4 h-4 text-teal-600" />
              <span>{lang === 'ur' ? 'شواہد پر مبنی پبلک ہیلتھ رپورٹنگ' : 'Verified Public Health Advisory'}</span>
            </div>
          </div>

          {/* Article Summary Box */}
          <div className="bg-teal-50/70 border-l-4 rtl:border-l-0 rtl:border-r-4 border-teal-600 p-4 rounded-r-xl rtl:rounded-r-none rtl:rounded-l-xl">
            <p className={`text-sm sm:text-base font-semibold text-teal-950 leading-relaxed ${isRTL ? 'urdu-text' : ''}`}>
              {lang === 'ur' ? selectedNews.summaryUrdu : selectedNews.summary}
            </p>
          </div>

          {/* Formatted Content */}
          <div className={`prose prose-slate max-w-none text-slate-700 text-sm sm:text-base leading-relaxed whitespace-pre-line ${isRTL ? 'urdu-text text-base sm:text-lg leading-loose' : ''}`}>
            {lang === 'ur' ? selectedNews.contentUrdu : selectedNews.content}
          </div>
        </div>

        {/* Modal Footer */}
        <div className="p-4 bg-slate-50 border-t border-slate-100 flex items-center justify-between text-xs text-slate-500">
          <span>{lang === 'ur' ? 'پبلک ہیلتھ پلس • باضابطہ اشاعت' : 'Public Health Plus Official Bulletin'}</span>
          <button
            onClick={() => setSelectedNews(null)}
            className="px-4 py-2 bg-slate-200 hover:bg-slate-300 text-slate-800 font-semibold rounded-lg transition-colors cursor-pointer"
          >
            {t.close}
          </button>
        </div>

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


// ===== src/components/DiseaseDetailModal.tsx =====



const DiseaseDetailModal: React.FC = () => {
  const { lang, t, selectedDisease, setSelectedDisease, setShareModalItem } = useApp();

  if (!selectedDisease) return null;

  const isRTL = lang === 'ur';

  const handleShare = () => {
    setShareModalItem({
      title: lang === 'ur' ? selectedDisease.nameUrdu : selectedDisease.name,
      url: `${window.location.origin}/#disease-${selectedDisease.id}`,
      type: 'Disease Protocol'
    });
  };

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-3 sm:p-6 bg-slate-950/80 backdrop-blur-md overflow-y-auto animate-in fade-in duration-200">
      <div className="bg-white rounded-2xl sm:rounded-3xl shadow-2xl border border-slate-200 max-w-4xl w-full overflow-hidden my-auto max-h-[92vh] flex flex-col">
        
        {/* Sticky Header */}
        <div className="p-5 sm:p-6 border-b border-slate-200 flex items-center justify-between bg-slate-900 text-white shrink-0">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 rounded-xl bg-teal-500/20 border border-teal-400/40 text-teal-300 flex items-center justify-center">
              <HeartPulse className="w-6 h-6" />
            </div>
            <div>
              <div className="flex items-center gap-2">
                <span className="text-[11px] font-bold uppercase tracking-wider px-2 py-0.5 rounded-md bg-teal-900/90 text-teal-300 border border-teal-700">
                  {selectedDisease.category === 'communicable' 
                    ? (lang === 'ur' ? 'متعدی بیماری' : 'Communicable Disease') 
                    : (lang === 'ur' ? 'غیر متعدی مرض' : 'Non-Communicable Disease')}
                </span>
                <span className="text-xs text-slate-400">
                  {lang === 'ur' ? `تجدید: ${selectedDisease.updatedAt}` : `Updated: ${selectedDisease.updatedAt}`}
                </span>
              </div>
              <h2 className={`text-xl sm:text-2xl font-extrabold text-white tracking-tight mt-1 ${isRTL ? 'urdu-heading' : ''}`}>
                {lang === 'ur' ? selectedDisease.nameUrdu : selectedDisease.name}
              </h2>
            </div>
          </div>

          <div className="flex items-center gap-2">
            <button
              onClick={handleShare}
              className="p-2 rounded-xl text-slate-300 hover:text-teal-300 hover:bg-slate-800 transition-colors flex items-center gap-1.5 text-xs font-semibold cursor-pointer"
              title="Share"
            >
              <Share2 className="w-4 h-4" />
              <span className="hidden sm:inline">{t.shareContent}</span>
            </button>
            <button
              onClick={() => setSelectedDisease(null)}
              className="p-2 rounded-xl text-slate-400 hover:text-white hover:bg-slate-800 transition-colors cursor-pointer"
              aria-label="Close"
            >
              <X className="w-6 h-6" />
            </button>
          </div>
        </div>

        {/* Scrollable Clinical Breakdown (8 Core Pillars) */}
        <div className="p-6 sm:p-8 overflow-y-auto space-y-8 text-slate-800">
          
          {/* Pillar 1: Overview */}
          <section className="space-y-3">
            <div className="flex items-center gap-2 text-teal-800 font-bold text-sm uppercase tracking-wider">
              <Info className="w-4 h-4 text-teal-600" />
              <span>1. {t.overview}</span>
            </div>
            <div className="bg-slate-50 p-5 rounded-2xl border border-slate-200">
              <p className={`text-slate-700 text-sm sm:text-base leading-relaxed ${isRTL ? 'urdu-text text-base sm:text-lg leading-loose' : ''}`}>
                {lang === 'ur' ? selectedDisease.overviewUrdu : selectedDisease.overview}
              </p>
            </div>
          </section>

          {/* Pillar 2: Symptoms & Clinical Presentation */}
          <section className="space-y-3">
            <div className="flex items-center gap-2 text-rose-800 font-bold text-sm uppercase tracking-wider">
              <Activity className="w-4 h-4 text-rose-600" />
              <span>2. {t.symptoms}</span>
            </div>
            <div className="bg-rose-50/50 p-5 rounded-2xl border border-rose-200/80">
              <ul className="grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm">
                {((lang === 'ur' ? selectedDisease.symptomsUrdu : selectedDisease.symptoms) || selectedDisease.symptoms || []).map((symptom, idx) => (
                  <li key={idx} className={`flex items-start gap-2 text-slate-800 ${isRTL ? 'urdu-text' : ''}`}>
                    <span className="w-1.5 h-1.5 rounded-full bg-rose-600 shrink-0 mt-2" />
                    <span>{symptom}</span>
                  </li>
                ))}
              </ul>
            </div>
          </section>

          {/* Pillar 3: Risk Factors & Transmission */}
          <section className="space-y-3">
            <div className="flex items-center gap-2 text-amber-800 font-bold text-sm uppercase tracking-wider">
              <ShieldAlert className="w-4 h-4 text-amber-600" />
              <span>3. {t.riskFactors}</span>
            </div>
            <div className="bg-amber-50/50 p-5 rounded-2xl border border-amber-200/80">
              <ul className="space-y-2.5 text-sm">
                {((lang === 'ur' ? selectedDisease.riskFactorsUrdu : selectedDisease.riskFactors) || selectedDisease.riskFactors || []).map((factor, idx) => (
                  <li key={idx} className={`flex items-start gap-2.5 text-slate-800 ${isRTL ? 'urdu-text' : ''}`}>
                    <span className="w-1.5 h-1.5 rounded-full bg-amber-600 shrink-0 mt-2" />
                    <span>{factor}</span>
                  </li>
                ))}
              </ul>
            </div>
          </section>

          {/* Pillar 4: Prevention & Protection Measures */}
          <section className="space-y-3">
            <div className="flex items-center gap-2 text-teal-800 font-bold text-sm uppercase tracking-wider">
              <ShieldCheck className="w-4 h-4 text-teal-600" />
              <span>4. {t.prevention}</span>
            </div>
            <div className="bg-teal-50/60 p-5 rounded-2xl border border-teal-200">
              <ul className="space-y-2.5 text-sm">
                {((lang === 'ur' ? selectedDisease.preventionUrdu : selectedDisease.prevention) || selectedDisease.prevention || []).map((prev, idx) => (
                  <li key={idx} className={`flex items-start gap-2.5 text-teal-950 font-medium ${isRTL ? 'urdu-text' : ''}`}>
                    <ShieldCheck className="w-4 h-4 text-teal-600 shrink-0 mt-0.5" />
                    <span>{prev}</span>
                  </li>
                ))}
              </ul>
            </div>
          </section>

          {/* Pillar 5: Testing, Screening & Diagnosis */}
          <section className="space-y-3">
            <div className="flex items-center gap-2 text-sky-800 font-bold text-sm uppercase tracking-wider">
              <Microscope className="w-4 h-4 text-sky-600" />
              <span>5. {t.testingScreening}</span>
            </div>
            <div className="bg-sky-50/50 p-5 rounded-2xl border border-sky-200/80">
              <p className={`text-slate-800 text-sm sm:text-base leading-relaxed ${isRTL ? 'urdu-text' : ''}`}>
                {lang === 'ur' ? selectedDisease.testingUrdu : selectedDisease.testing}
              </p>
            </div>
          </section>

          {/* Pillar 6: Management & Treatment Information */}
          <section className="space-y-3">
            <div className="flex items-center gap-2 text-emerald-800 font-bold text-sm uppercase tracking-wider">
              <Stethoscope className="w-4 h-4 text-emerald-600" />
              <span>6. {t.managementTreatment}</span>
            </div>
            <div className="bg-emerald-50/50 p-5 rounded-2xl border border-emerald-200/80">
              <p className={`text-slate-800 text-sm sm:text-base leading-relaxed ${isRTL ? 'urdu-text' : ''}`}>
                {lang === 'ur' ? selectedDisease.treatmentUrdu : selectedDisease.treatment}
              </p>
            </div>
          </section>

          {/* Pillar 7: Resources & Community Guidelines */}
          {selectedDisease.resources && selectedDisease.resources.length > 0 && (
            <section className="space-y-3">
              <div className="flex items-center gap-2 text-indigo-800 font-bold text-sm uppercase tracking-wider">
                <FileText className="w-4 h-4 text-indigo-600" />
                <span>7. {t.guidelinesResources}</span>
              </div>
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                {(selectedDisease.resources || []).map((res, idx) => (
                  <a
                    key={idx}
                    href={res.link}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="p-4 rounded-xl border border-slate-200 hover:border-indigo-400 hover:bg-indigo-50/30 transition-all flex items-center justify-between text-xs font-semibold text-slate-800 group"
                  >
                    <div className="space-y-0.5">
                      <span className="text-[10px] text-indigo-600 font-bold uppercase tracking-wider">{res.type}</span>
                      <p className="group-hover:text-indigo-900 line-clamp-1">{res.title}</p>
                    </div>
                    <ExternalLink className="w-3.5 h-3.5 text-slate-400 group-hover:text-indigo-600 shrink-0" />
                  </a>
                ))}
              </div>
            </section>
          )}

          {/* Pillar 8: Authoritative References */}
          {selectedDisease.references && selectedDisease.references.length > 0 && (
            <section className="space-y-3 pt-2 border-t border-slate-200">
              <div className="flex items-center gap-2 text-slate-700 font-bold text-xs uppercase tracking-wider">
                <BookOpen className="w-4 h-4 text-slate-500" />
                <span>8. {t.references}</span>
              </div>
              <div className="space-y-2 text-xs text-slate-600 bg-slate-50 p-4 rounded-xl">
                {(selectedDisease.references || []).map((ref, idx) => (
                  <div key={idx} className="flex items-baseline gap-2">
                    <span className="font-bold text-slate-400">[{idx + 1}]</span>
                    <span>{ref.title} — <strong className="text-slate-800">{ref.source}</strong> ({ref.year || '2024'})</span>
                  </div>
                ))}
              </div>
            </section>
          )}

        </div>

        {/* Footer info bar */}
        <div className="p-4 bg-slate-100 border-t border-slate-200 flex items-center justify-between text-xs text-slate-500 shrink-0">
          <span>{lang === 'ur' ? 'پبلک ہیلتھ پلس • کلینیکل معلوماتی پورٹل' : 'Public Health Plus Clinical Information Hub'}</span>
          <button
            onClick={() => setSelectedDisease(null)}
            className="px-5 py-2 bg-slate-900 text-white font-bold rounded-xl hover:bg-slate-800 transition-colors cursor-pointer"
          >
            {t.close}
          </button>
        </div>

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


// ===== src/components/TopicDetailModal.tsx =====




const TopicDetailModal: React.FC = () => {
  const { lang, t, selectedTopic, setSelectedTopic, setShareModalItem } = useApp();

  if (!selectedTopic) return null;

  const isRTL = lang === 'ur';

  const getIcon = (name: string) => {
    switch (name) {
      case 'Sparkles': return <Sparkles className="w-6 h-6 text-teal-300" />;
      case 'ShieldCheck': return <ShieldCheck className="w-6 h-6 text-teal-300" />;
      case 'Activity': return <Activity className="w-6 h-6 text-teal-300" />;
      case 'Apple': return <Apple className="w-6 h-6 text-teal-300" />;
      case 'Droplet': return <Droplet className="w-6 h-6 text-teal-300" />;
      default: return <Sparkles className="w-6 h-6 text-teal-300" />;
    }
  };

  const handleShare = () => {
    setShareModalItem({
      title: lang === 'ur' ? selectedTopic.titleUrdu : selectedTopic.title,
      url: `${window.location.origin}/#topic-${selectedTopic.slug}`,
      type: 'Community Health Guide'
    });
  };

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6 bg-slate-950/75 backdrop-blur-sm overflow-y-auto animate-in fade-in duration-200">
      <div className="bg-white rounded-2xl sm:rounded-3xl shadow-2xl border border-slate-200 max-w-2xl w-full overflow-hidden my-auto max-h-[90vh] flex flex-col">
        
        {/* Header */}
        <div className="p-5 sm:p-6 bg-slate-900 text-white flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className="w-11 h-11 rounded-xl bg-teal-500/20 border border-teal-400/30 flex items-center justify-center">
              {getIcon(selectedTopic.iconName)}
            </div>
            <div>
              <span className="text-[11px] font-bold uppercase tracking-wider text-teal-300">
                {lang === 'ur' ? 'کمیونٹی گائیڈ لائن' : 'Community Health Topic'}
              </span>
              <h2 className={`text-xl font-extrabold text-white ${isRTL ? 'urdu-heading' : ''}`}>
                {lang === 'ur' ? selectedTopic.titleUrdu : selectedTopic.title}
              </h2>
            </div>
          </div>

          <div className="flex items-center gap-2">
            <button
              onClick={handleShare}
              className="p-2 rounded-xl text-slate-300 hover:text-teal-300 hover:bg-slate-800 transition-colors"
              title="Share"
            >
              <Share2 className="w-4 h-4" />
            </button>
            <button
              onClick={() => setSelectedTopic(null)}
              className="p-2 rounded-xl text-slate-400 hover:text-white hover:bg-slate-800 transition-colors"
              aria-label="Close"
            >
              <X className="w-5 h-5" />
            </button>
          </div>
        </div>

        {/* Content */}
        <div className="p-6 sm:p-8 overflow-y-auto space-y-6">
          {/* Image */}
          {selectedTopic.image && (
            <div className="h-44 w-full rounded-xl overflow-hidden border border-slate-200 bg-slate-100">
              <img
                src={selectedTopic.image}
                alt={selectedTopic.title}
                referrerPolicy="no-referrer"
                className="w-full h-full object-cover"
              />
            </div>
          )}

          {/* Tagline */}
          <div className="bg-teal-50/70 p-4 rounded-xl border border-teal-200">
            <p className={`text-sm font-semibold text-teal-900 leading-snug ${isRTL ? 'urdu-text' : ''}`}>
              {lang === 'ur' ? selectedTopic.taglineUrdu : selectedTopic.tagline}
            </p>
          </div>

          {/* Summary */}
          <div className="space-y-2">
            <h4 className="text-xs font-bold text-slate-400 uppercase tracking-wider">
              {lang === 'ur' ? 'اہم جائزہ' : 'Overview & Principles'}
            </h4>
            <p className={`text-slate-700 text-sm sm:text-base leading-relaxed ${isRTL ? 'urdu-text' : ''}`}>
              {lang === 'ur' ? selectedTopic.summaryUrdu : selectedTopic.summary}
            </p>
          </div>

          {/* Key Tips */}
          <div className="space-y-3 pt-2">
            <h4 className="text-xs font-bold text-slate-400 uppercase tracking-wider">
              {lang === 'ur' ? 'عملی حفاظتی اقدامات اور تجاویز' : 'Key Actionable Tips & Prevention Rules'}
            </h4>
            <ul className="space-y-2.5">
              {((lang === 'ur' ? selectedTopic.keyTipsUrdu : selectedTopic.keyTips) || selectedTopic.keyTips || []).map((tip, idx) => (
                <li key={idx} className={`p-3 rounded-xl bg-slate-50 border border-slate-200/80 flex items-start gap-2.5 text-xs sm:text-sm text-slate-800 font-medium ${isRTL ? 'urdu-text' : ''}`}>
                  <CheckCircle2 className="w-4 h-4 text-teal-600 shrink-0 mt-0.5" />
                  <span>{tip}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>

        {/* Footer */}
        <div className="p-4 bg-slate-50 border-t border-slate-100 flex items-center justify-between text-xs text-slate-500">
          <span>{lang === 'ur' ? 'پبلک ہیلتھ پلس • کمیونٹی آگاہی' : 'Public Health Plus Community Awareness'}</span>
          <button
            onClick={() => setSelectedTopic(null)}
            className="px-4 py-2 bg-slate-900 text-white font-bold rounded-lg hover:bg-slate-800 transition-colors"
          >
            {t.close}
          </button>
        </div>

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


// ===== src/components/MediaViewerModal.tsx =====



const MediaViewerModal: React.FC = () => {
  const { lang, t, selectedMedia, setSelectedMedia, setShareModalItem } = useApp();

  if (!selectedMedia) return null;

  const isRTL = lang === 'ur';

  const handleShare = () => {
    setShareModalItem({
      title: lang === 'ur' ? selectedMedia.titleUrdu : selectedMedia.title,
      url: `${window.location.origin}/#media-${selectedMedia.id}`,
      type: selectedMedia.type === 'video' ? 'Educational Video' : 'Health Infographic'
    });
  };

  const isVideo = selectedMedia.type === 'video';

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-3 sm:p-6 bg-slate-950/85 backdrop-blur-md overflow-y-auto animate-in fade-in duration-200">
      <div className="bg-slate-900 text-white rounded-2xl sm:rounded-3xl shadow-2xl border border-slate-800 max-w-3xl w-full overflow-hidden my-auto flex flex-col">
        
        {/* Modal Top Bar */}
        <div className="p-4 sm:p-5 border-b border-slate-800 flex items-center justify-between bg-slate-950">
          <div className="flex items-center gap-2">
            <span className="px-2.5 py-1 rounded-md bg-teal-900/70 border border-teal-700 text-teal-300 text-xs font-bold uppercase tracking-wider flex items-center gap-1.5">
              {isVideo ? <Film className="w-3.5 h-3.5" /> : <ImageIcon className="w-3.5 h-3.5" />}
              <span>{isVideo ? (lang === 'ur' ? 'ویڈیو' : 'Video') : (lang === 'ur' ? 'تصویر' : 'Infographic')}</span>
            </span>
            <span className="text-xs text-slate-400">
              {lang === 'ur' ? selectedMedia.topicUrdu : selectedMedia.topic}
            </span>
          </div>

          <div className="flex items-center gap-2">
            <button
              onClick={handleShare}
              className="p-2 rounded-xl text-slate-300 hover:text-teal-300 hover:bg-slate-800 transition-colors flex items-center gap-1.5 text-xs font-semibold cursor-pointer"
              title="Share"
            >
              <Share2 className="w-4 h-4" />
              <span className="hidden sm:inline">{t.shareContent}</span>
            </button>
            <button
              onClick={() => setSelectedMedia(null)}
              className="p-2 rounded-xl text-slate-400 hover:text-white hover:bg-slate-800 transition-colors cursor-pointer"
              aria-label="Close"
            >
              <X className="w-5 h-5" />
            </button>
          </div>
        </div>

        {/* Media Frame (Streaming / Lightbox) */}
        <div className="bg-black relative flex items-center justify-center min-h-[300px] sm:min-h-[400px]">
          {isVideo ? (
            <div className="w-full h-full aspect-video flex items-center justify-center">
              {selectedMedia.url.includes('youtube.com') || selectedMedia.url.includes('youtu.be') ? (
                <iframe
                  src={selectedMedia.url}
                  title={selectedMedia.title}
                  className="w-full h-full aspect-video"
                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                  allowFullScreen
                />
              ) : (
                /* Native HTML5 video with controlsList to disable download */
                <video
                  src={selectedMedia.url}
                  controls
                  controlsList="nodownload noplaybackrate"
                  disablePictureInPicture
                  onContextMenu={(e) => e.preventDefault()}
                  className="max-h-[500px] w-full"
                />
              )}
            </div>
          ) : (
            <div className="p-4 flex items-center justify-center max-h-[520px]">
              <img
                src={selectedMedia.url}
                alt={selectedMedia.title}
                referrerPolicy="no-referrer"
                onContextMenu={(e) => e.preventDefault()}
                className="max-h-[480px] w-auto object-contain rounded-lg"
              />
            </div>
          )}
        </div>

        {/* Info & Restrictions Bar */}
        <div className="p-5 sm:p-6 space-y-3 bg-slate-900">
          <div className="flex items-center justify-between">
            <span className="text-xs text-teal-400 font-medium flex items-center gap-1">
              <Calendar className="w-3.5 h-3.5" />
              {selectedMedia.date}
            </span>
            <span className="text-[11px] text-slate-400 flex items-center gap-1">
              <Shield className="w-3.5 h-3.5 text-teal-400" />
              <span>{t.videoProtectedNotice}</span>
            </span>
          </div>

          <h3 className={`text-xl font-bold text-white leading-snug ${isRTL ? 'urdu-heading' : ''}`}>
            {lang === 'ur' ? selectedMedia.titleUrdu : selectedMedia.title}
          </h3>

          <p className={`text-slate-300 text-xs sm:text-sm leading-relaxed ${isRTL ? 'urdu-text' : ''}`}>
            {lang === 'ur' ? selectedMedia.descriptionUrdu : selectedMedia.description}
          </p>
        </div>

        {/* Footer */}
        <div className="p-4 bg-slate-950 border-t border-slate-800 flex items-center justify-between text-xs text-slate-500">
          <span>{lang === 'ur' ? 'پبلک ہیلتھ پلس • میڈیا ریپوزیٹری' : 'Public Health Plus Media Library'}</span>
          <button
            onClick={() => setSelectedMedia(null)}
            className="px-4 py-2 bg-slate-800 text-slate-200 hover:text-white font-semibold rounded-lg hover:bg-slate-700 transition-colors"
          >
            {t.close}
          </button>
        </div>

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


// ===== src/components/MediaShareModal.tsx =====



const MediaShareModal: React.FC = () => {
  const { lang, t, shareModalItem, setShareModalItem, showToast } = useApp();

  if (!shareModalItem) return null;

  const isRTL = lang === 'ur';
  const url = shareModalItem.url;
  const title = shareModalItem.title;

  const handleCopyLink = () => {
    navigator.clipboard.writeText(url);
    showToast(t.linkCopied, 'success');
  };

  const shareWhatsApp = () => {
    const text = encodeURIComponent(`${title} - ${url}`);
    window.open(`https://api.whatsapp.com/send?text=${text}`, '_blank');
  };

  const shareFacebook = () => {
    const u = encodeURIComponent(url);
    window.open(`https://www.facebook.com/sharer/sharer.php?u=${u}`, '_blank');
  };

  const shareX = () => {
    const text = encodeURIComponent(`${title} via Public Health Plus: ${url}`);
    window.open(`https://twitter.com/intent/tweet?text=${text}`, '_blank');
  };

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950/70 backdrop-blur-sm animate-in fade-in duration-150">
      <div className="bg-white rounded-2xl shadow-2xl border border-slate-200 max-w-md w-full overflow-hidden">
        
        {/* Header */}
        <div className="p-4 sm:p-5 border-b border-slate-100 flex items-center justify-between bg-slate-50">
          <div className="flex items-center gap-2">
            <Share2 className="w-4 h-4 text-teal-600" />
            <h3 className="font-bold text-slate-900 text-sm sm:text-base">
              {t.shareContent}
            </h3>
          </div>
          <button
            onClick={() => setShareModalItem(null)}
            className="p-1 rounded-lg text-slate-400 hover:text-slate-700 hover:bg-slate-200"
          >
            <X className="w-4 h-4" />
          </button>
        </div>

        {/* Content */}
        <div className="p-5 sm:p-6 space-y-5">
          <div className="bg-slate-50 p-3.5 rounded-xl border border-slate-200">
            <span className="text-[10px] font-bold text-teal-700 uppercase tracking-wider block">
              {shareModalItem.type}
            </span>
            <p className="text-xs font-semibold text-slate-800 line-clamp-2 mt-1">
              {title}
            </p>
          </div>

          {/* Social buttons */}
          <div className="grid grid-cols-3 gap-3">
            <button
              onClick={shareWhatsApp}
              className="flex flex-col items-center justify-center p-3 rounded-xl bg-emerald-50 hover:bg-emerald-100 border border-emerald-200 text-emerald-800 transition-colors gap-1.5 cursor-pointer"
            >
              <div className="w-8 h-8 rounded-full bg-emerald-600 text-white flex items-center justify-center">
                <MessageSquare className="w-4 h-4" />
              </div>
              <span className="text-xs font-bold">{t.shareViaWhatsapp}</span>
            </button>

            <button
              onClick={shareFacebook}
              className="flex flex-col items-center justify-center p-3 rounded-xl bg-blue-50 hover:bg-blue-100 border border-blue-200 text-blue-800 transition-colors gap-1.5 cursor-pointer"
            >
              <div className="w-8 h-8 rounded-full bg-blue-600 text-white flex items-center justify-center">
                <Facebook className="w-4 h-4" />
              </div>
              <span className="text-xs font-bold">{t.shareViaFacebook}</span>
            </button>

            <button
              onClick={shareX}
              className="flex flex-col items-center justify-center p-3 rounded-xl bg-slate-100 hover:bg-slate-200 border border-slate-300 text-slate-900 transition-colors gap-1.5 cursor-pointer"
            >
              <div className="w-8 h-8 rounded-full bg-slate-900 text-white flex items-center justify-center">
                <Twitter className="w-4 h-4" />
              </div>
              <span className="text-xs font-bold">{t.shareViaX}</span>
            </button>
          </div>

          {/* Copy link input */}
          <div className="space-y-1.5">
            <label className="text-xs font-medium text-slate-600">
              {t.copyLink}:
            </label>
            <div className="flex items-center gap-2">
              <input
                type="text"
                readOnly
                value={url}
                className="w-full bg-slate-50 border border-slate-200 rounded-xl px-3 py-2 text-xs font-mono text-slate-600 select-all"
              />
              <button
                onClick={handleCopyLink}
                className="px-4 py-2 rounded-xl bg-teal-700 hover:bg-teal-800 text-white font-bold text-xs flex items-center gap-1.5 shrink-0 transition-colors cursor-pointer"
              >
                <Copy className="w-3.5 h-3.5" />
                <span>{t.copyLink}</span>
              </button>
            </div>
          </div>

        </div>

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


// ===== src/components/ReportViewerModal.tsx =====



const ReportViewerModal: React.FC = () => {
  const { lang, t, selectedReport, setSelectedReport, setShareModalItem, showToast } = useApp();

  if (!selectedReport) return null;

  const isRTL = lang === 'ur';

  const handleShare = () => {
    setShareModalItem({
      title: lang === 'ur' ? selectedReport.titleUrdu : selectedReport.title,
      url: `${window.location.origin}/#report-${selectedReport.id}`,
      type: 'Public Health Research Document'
    });
  };

  const handleDownload = () => {
    showToast(lang === 'ur' ? 'رپورٹ ڈاؤن لوڈ کی جا رہی ہے...' : 'Initiating document download...', 'info');
    // Open the download link or simulated official PDF stream
    window.open(selectedReport.downloadUrl, '_blank');
  };

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-3 sm:p-6 bg-slate-950/80 backdrop-blur-sm overflow-y-auto animate-in fade-in duration-200">
      <div className="bg-white rounded-2xl sm:rounded-3xl shadow-2xl border border-slate-200 max-w-3xl w-full overflow-hidden my-auto max-h-[90vh] flex flex-col">
        
        {/* Top Header */}
        <div className="p-5 sm:p-6 border-b border-slate-200 flex items-center justify-between bg-slate-900 text-white">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 rounded-xl bg-teal-500/20 border border-teal-400/30 text-teal-300 flex items-center justify-center">
              <FileText className="w-5 h-5" />
            </div>
            <div>
              <span className="text-[11px] font-bold uppercase tracking-wider text-teal-300">
                {lang === 'ur' ? selectedReport.categoryUrdu : selectedReport.category} • {selectedReport.fileSize}
              </span>
              <h2 className={`text-xl sm:text-2xl font-extrabold text-white leading-tight ${isRTL ? 'urdu-heading' : ''}`}>
                {lang === 'ur' ? selectedReport.titleUrdu : selectedReport.title}
              </h2>
            </div>
          </div>

          <div className="flex items-center gap-2">
            <button
              onClick={handleShare}
              className="p-2 rounded-xl text-slate-300 hover:text-teal-300 hover:bg-slate-800 transition-colors"
              title="Share"
            >
              <Share2 className="w-4 h-4" />
            </button>
            <button
              onClick={() => setSelectedReport(null)}
              className="p-2 rounded-xl text-slate-400 hover:text-white hover:bg-slate-800 transition-colors"
              aria-label="Close"
            >
              <X className="w-5 h-5" />
            </button>
          </div>
        </div>

        {/* Modal Content */}
        <div className="p-6 sm:p-8 overflow-y-auto space-y-6">
          
          {/* Metadata Row */}
          <div className="flex flex-wrap items-center gap-4 text-xs font-medium text-slate-500 pb-4 border-b border-slate-100">
            <span className="flex items-center gap-1.5">
              <Calendar className="w-4 h-4 text-teal-600" />
              {selectedReport.date}
            </span>
            <span className="flex items-center gap-1.5">
              <User className="w-4 h-4 text-teal-600" />
              {selectedReport.author}
            </span>
            <span className="flex items-center gap-1.5 text-teal-700 font-semibold">
              <ShieldCheck className="w-4 h-4 text-teal-600" />
              <span>{lang === 'ur' ? 'مصدقہ تکنیکی دستاویز' : 'Official Policy Document'}</span>
            </span>
          </div>

          {/* Description / Abstract */}
          <div className="space-y-3">
            <h4 className="text-xs font-bold text-slate-400 uppercase tracking-wider">
              {lang === 'ur' ? 'خلاصہ اور تکنیکی مقاصد' : 'Executive Abstract & Scope'}
            </h4>
            <p className={`text-slate-700 text-sm sm:text-base leading-relaxed ${isRTL ? 'urdu-text' : ''}`}>
              {lang === 'ur' ? selectedReport.descriptionUrdu : selectedReport.description}
            </p>
          </div>

          {/* Document Preview & Verification Card */}
          <div className="bg-slate-50 p-5 rounded-2xl border border-slate-200 space-y-3">
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-2">
                <FileText className="w-5 h-5 text-teal-700" />
                <span className="font-bold text-slate-900 text-sm">PDF Technical Document</span>
              </div>
              <span className="text-xs font-mono bg-slate-200 px-2 py-0.5 rounded text-slate-700">
                {selectedReport.fileSize}
              </span>
            </div>

            <p className="text-xs text-slate-500 leading-relaxed">
              {lang === 'ur'
                ? 'یہ دستاویز سرکاری و تحقیقی استعمال، پالیسی سازوں اور صحت کے پیشہ ور افراد کے لیے تیار کی گئی ہے۔'
                : 'This document is authorized for distribution, policy review, public-health monitoring, and scientific citation.'}
            </p>
          </div>

          {/* Primary Action Buttons */}
          <div className="flex flex-col sm:flex-row items-center gap-3 pt-2">
            <button
              onClick={handleDownload}
              className={`w-full sm:w-auto px-6 py-3.5 rounded-xl bg-teal-700 hover:bg-teal-800 text-white font-bold text-sm flex items-center justify-center gap-2 transition-colors cursor-pointer shadow-sm ${isRTL ? 'urdu-text' : ''}`}
            >
              <Download className="w-4 h-4" />
              <span>{t.downloadReportBtn}</span>
            </button>

            <button
              onClick={handleShare}
              className={`w-full sm:w-auto px-6 py-3.5 rounded-xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-semibold text-sm flex items-center justify-center gap-2 transition-colors cursor-pointer ${isRTL ? 'urdu-text' : ''}`}
            >
              <Share2 className="w-4 h-4" />
              <span>{t.shareContent}</span>
            </button>
          </div>

        </div>

        {/* Footer */}
        <div className="p-4 bg-slate-50 border-t border-slate-100 flex items-center justify-between text-xs text-slate-500">
          <span>{lang === 'ur' ? 'پبلک ہیلتھ پلس ریسرچ ریپوزیٹری' : 'Public Health Plus Research & Documentation'}</span>
          <button
            onClick={() => setSelectedReport(null)}
            className="px-4 py-2 bg-slate-200 text-slate-700 hover:bg-slate-300 font-semibold rounded-lg transition-colors cursor-pointer"
          >
            {t.close}
          </button>
        </div>

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


// ===== src/components/Toast.tsx =====



const Toast: React.FC = () => {
  const { toasts, removeToast } = useApp();

  if (toasts.length === 0) return null;

  return (
    <div className="fixed bottom-5 right-5 z-50 flex flex-col gap-2.5 max-w-sm w-full pointer-events-none">
      {toasts.map(t => (
        <div
          key={t.id}
          className={`pointer-events-auto flex items-start gap-3 p-4 rounded-xl shadow-xl border backdrop-blur-md transition-all duration-300 ${
            t.type === 'error'
              ? 'bg-rose-950/90 text-rose-100 border-rose-800'
              : t.type === 'info'
              ? 'bg-slate-900/90 text-slate-100 border-slate-700'
              : 'bg-teal-950/90 text-teal-100 border-teal-800'
          }`}
          role="alert"
        >
          {t.type === 'error' && <AlertCircle className="w-5 h-5 text-rose-400 shrink-0 mt-0.5" />}
          {t.type === 'info' && <Info className="w-5 h-5 text-sky-400 shrink-0 mt-0.5" />}
          {(!t.type || t.type === 'success') && <CheckCircle2 className="w-5 h-5 text-teal-400 shrink-0 mt-0.5" />}
          
          <div className="flex-1 text-sm font-medium leading-snug">
            {t.message}
          </div>

          <button
            onClick={() => removeToast(t.id)}
            className="text-slate-400 hover:text-white p-0.5 transition-colors"
            aria-label="Close notification"
          >
            <X className="w-4 h-4" />
          </button>
        </div>
      ))}
    </div>
  );
};


// ===== src/App.tsx =====











// Dedicated Views







// Modals & Overlays








const MainContent: React.FC = () => {
  const { currentPage } = useApp();

  const renderPage = () => {
    switch (currentPage) {
      case 'home':
        return (
          <>
            <Hero />
            <NewsSection />
            <DiseasesSection />
            <CommunitySection />
            <MediaSection />
            <ReportsSection />
            <NewsletterSection />
          </>
        );
      case 'diseases':
        return <DiseasesView />;
      case 'news':
        return <NewsView />;
      case 'media':
        return <MediaView />;
      case 'reports':
        return <ReportsView />;
      case 'community':
        return <CommunityView />;
      case 'about':
        return <AboutView />;
      case 'admin':
        return <AdminPortal />;
      default:
        return (
          <>
            <Hero />
            <NewsSection />
            <DiseasesSection />
            <CommunitySection />
            <MediaSection />
            <ReportsSection />
            <NewsletterSection />
          </>
        );
    }
  };

  return (
    <div className="min-h-screen flex flex-col bg-slate-50 text-slate-900 font-sans antialiased selection:bg-teal-500 selection:text-white">
      {/* Institutional Top Header */}
      <Header />

      {/* Main Dynamic View Area */}
      <main className="flex-1">
        {renderPage()}
      </main>

      {/* Institutional Footer */}
      <Footer />

      {/* Shared Modals and Dynamic Overlays */}
      <SearchModal />
      <NewsArticleModal />
      <DiseaseDetailModal />
      <TopicDetailModal />
      <MediaViewerModal />
      <MediaShareModal />
      <ReportViewerModal />
      <Toast />
    </div>
  );
};

function App() {
  return (
    <AppProvider>
      <MainContent />
    </AppProvider>
  );
}


ReactDOM.createRoot(document.getElementById('root')).render(
  React.createElement(StrictMode, null, React.createElement(App))
);