import React, { useState, useEffect, useRef } from 'react'; import { Map as MapIcon, Grid, Layout, Maximize2, X, MapPin, Users, Mountain, Landmark, Droplets, BookOpen, User, Info, ArrowRight } from 'lucide-react'; import { useLanguage } from '../contexts/LanguageContext'; import { Button } from './ui/Button'; declare const L: any; // Leaflet global interface ProvinceData { id: number; name: string; nepaliName: string; capital: string; capitalNe: string; districts: number; area: string; population: string; density: string; color: string; borderColor: string; description: string; descriptionNe: string; attractions: string[]; attractionsNe: string[]; image: string; majorRivers: string; majorRiversNe: string; literacyRate: string; mainLanguages: string; mainLanguagesNe: string; lat: number; lng: number; } const PROVINCES: ProvinceData[] = [ { id: 1, name: "Koshi Province", nepaliName: "कोशी प्रदेश", capital: "Biratnagar", capitalNe: "विराटनगर", districts: 14, area: "25,905 km²", population: "4,972,021", density: "192/km²", color: "from-blue-600 to-cyan-500", borderColor: "border-blue-500", description: "Koshi Province is the easternmost region of Nepal, home to the world's highest peak, Mount Everest (8848m), and Kanchenjunga. It features diverse topography ranging from the Himalayas to the Terai plains.", descriptionNe: "कोशी प्रदेश नेपालको सबैभन्दा पूर्वी क्षेत्र हो, जहाँ विश्वको सर्वोच्च शिखर सगरमाथा (८८४८ मिटर) र कञ्चनजङ्घा रहेका छन्।", attractions: ["Mt. Everest", "Ilam Tea Gardens", "Koshi Tappu"], attractionsNe: ["सगरमाथा", "इलाम चिया बगान", "कोशी टप्पु"], image: "https://lh3.googleusercontent.com/gps-cs-s/AHVAwerHQlJuN4y6uGM7CNrGK7ZUKJS2nNpqsZDaYnsbybQU-ifpLuEixZHiUk_xjhyVFWZTi4tePP5270Hs1plo7ogPt7FU9limroXpkWhe5EuZsrQG5eFRZ5qntE7tHwBBkzp3wayUWg=w675-h390-n-k-no", majorRivers: "Koshi, Arun", majorRiversNe: "कोशी, अरुण", literacyRate: "71.2%", mainLanguages: "Nepali, Maithili", mainLanguagesNe: "नेपाली, मैथिली", lat: 26.4525, lng: 87.2718 }, { id: 2, name: "Madhesh Province", nepaliName: "मधेश प्रदेश", capital: "Janakpur", capitalNe: "जनकपुर", districts: 8, area: "9,661 km²", population: "6,126,288", density: "635/km²", color: "from-orange-500 to-yellow-500", borderColor: "border-orange-500", description: "The smallest province by area but rich in culture and history. It is the heart of Mithila culture and agriculture.", descriptionNe: "क्षेत्रफलको हिसाबले सबैभन्दा सानो तर संस्कृति र इतिहासमा धनी प्रदेश। यो मिथिला संस्कृतिको मुटु हो।", attractions: ["Janaki Mandir", "Mithila Art", "Parsa National Park"], attractionsNe: ["जानकी मन्दिर", "मिथिला कला", "पर्सा राष्ट्रिय निकुञ्ज"], image: "https://lh3.googleusercontent.com/gps-cs-s/AHVAweo75bHM1SIYpxf2VNcZJ-svV5H5cMa_A-t80RRtkmqVB1jIbThYeNcJ0117uTZvThVmFlRkPoqEYlm0H3zQk-ZadZbCSLsruwQU2_GdqMlZR4Oj2W_bW1dTvWCnEKJXPiQWtoQ=w675-h390-n-k-no", majorRivers: "Bagmati, Kamala", majorRiversNe: "बागमती, कमला", literacyRate: "49.5%", mainLanguages: "Maithili, Bhojpuri", mainLanguagesNe: "मैथिली, भोजपुरी", lat: 26.7288, lng: 85.9274 }, { id: 3, name: "Bagmati Province", nepaliName: "बागमती प्रदेश", capital: "Hetauda", capitalNe: "हेटौंडा", districts: 13, area: "20,300 km²", population: "6,084,042", density: "300/km²", color: "from-red-600 to-pink-600", borderColor: "border-red-600", description: "Home to the federal capital, Kathmandu. It bridges the northern Himalayas with the southern plains and hosts major UNESCO Heritage sites.", descriptionNe: "संघीय राजधानी काठमाडौंको घर। यसले उत्तरी हिमाललाई दक्षिणी मैदानसँग जोड्छ र प्रमुख युनेस्को सम्पदा स्थलहरू समावेश गर्दछ।", attractions: ["Kathmandu Valley", "Chitwan National Park", "Langtang"], attractionsNe: ["काठमाडौं उपत्यका", "चितवन राष्ट्रिय निकुञ्ज", "लाङटाङ"], image: "https://lh3.googleusercontent.com/gps-cs-s/AHVAwepmdUwyFb1HIu4u53bB3TzJv32oVXMmcSSgCSOa-tP5FibBJt0mvV3TMmXm6z_rkLvDfAUZqkLbcOZbNtOSPqeLfddmVXhPb1tkUYqxrOI7We1Q6ZpG-WKdQoAORTBWNhjPEcJs=w675-h390-n-k-no", majorRivers: "Bagmati, Trishuli", majorRiversNe: "बागमती, त्रिशुली", literacyRate: "74.8%", mainLanguages: "Nepali, Newari", mainLanguagesNe: "नेपाली, नेवारी", lat: 27.4292, lng: 85.0325 }, { id: 4, name: "Gandaki Province", nepaliName: "गण्डकी प्रदेश", capital: "Pokhara", capitalNe: "पोखरा", districts: 11, area: "21,504 km²", population: "2,479,745", density: "116/km²", color: "from-emerald-500 to-green-600", borderColor: "border-emerald-500", description: "The tourism capital of Nepal. Gandaki province houses the majestic Annapurna range and is the gateway to world-famous treks.", descriptionNe: "नेपालको पर्यटन राजधानी। गण्डकी प्रदेशमा अन्नपूर्ण हिमशृङ्खला रहेको छ र यो पदयात्राको प्रवेशद्वार हो।", attractions: ["Pokhara", "Annapurna Circuit", "Muktinath"], attractionsNe: ["पोखरा", "अन्नपूर्ण सर्किट", "मुक्तिनाथ"], image: "https://lh3.googleusercontent.com/gps-cs-s/AHVAwerE0IehvUGkr-ri0Y2JqJShK2aUrKraupRmfZ72Odnx1pg9Cwnpw2QpOdWiDmNBvwo6mloNYK7wwRqcZT1UyCmBSOkQHNuEwyCVi4aJv4_Myl8yXls6Am8abAOjnviRGBJ4Pnhn=w675-h390-n-k-no", majorRivers: "Kali Gandaki, Seti", majorRiversNe: "काली गण्डकी, सेती", literacyRate: "74.8%", mainLanguages: "Nepali, Gurung", mainLanguagesNe: "नेपाली, गुरुङ", lat: 28.2380, lng: 83.9956 }, { id: 5, name: "Lumbini Province", nepaliName: "लुम्बिनी प्रदेश", capital: "Deukhuri", capitalNe: "देउखुरी", districts: 12, area: "22,288 km²", population: "5,124,225", density: "230/km²", color: "from-indigo-500 to-blue-600", borderColor: "border-indigo-500", description: "The birthplace of Lord Buddha. Lumbini province holds immense historical and spiritual significance.", descriptionNe: "भगवान बुद्धको जन्मस्थल। लुम्बिनी प्रदेशको ठूलो ऐतिहासिक र आध्यात्मिक महत्व छ।", attractions: ["Lumbini", "Bardiya National Park", "Palpa"], attractionsNe: ["लुम्बिनी", "बर्दिया राष्ट्रिय निकुञ्ज", "पाल्पा"], image: "https://lh3.googleusercontent.com/gps-cs-s/AHVAweolNbMBfCLEcb-JoP1BKkohrqTtq1WsIQGDfBApeCx_ZwqiyMM1IwwUGB6-72BPDxuA7XB5dRAjYO_kBbgFOagQ4Pmtib72cDKbVuFLT-BsO7YGwhuRrLM1EInLL1HF49XR4dZ-Eg=w675-h390-n-k-no", majorRivers: "Rapti, Babai", majorRiversNe: "राप्ती, बबई", literacyRate: "66.4%", mainLanguages: "Nepali, Tharu", mainLanguagesNe: "नेपाली, थारु", lat: 27.8099, lng: 82.5186 }, { id: 6, name: "Karnali Province", nepaliName: "कर्णाली प्रदेश", capital: "Birendranagar", capitalNe: "वीरेन्द्रनगर", districts: 10, area: "27,984 km²", population: "1,694,889", density: "61/km²", color: "from-teal-600 to-emerald-700", borderColor: "border-teal-600", description: "The largest yet least populated province. Karnali is a remote, rugged, and breathtakingly beautiful region home to Rara Lake.", descriptionNe: "सबैभन्दा ठूलो तर कम जनसंख्या भएको प्रदेश। कर्णाली एक दुर्गम र सुन्दर क्षेत्र हो जहाँ रारा ताल अवस्थित छ।", attractions: ["Rara Lake", "Shey Phoksundo", "Upper Dolpo"], attractionsNe: ["रारा ताल", "शे-फोक्सुण्डो", "माथिल्लो डोल्पा"], image: "https://lh3.googleusercontent.com/gps-cs-s/AHVAwerD0R7t4jLghiYVAR2QcK15I2yM0SSWbSFlLVu2WRHDPFwNwxu72zabWeuY3vci3z0Kfa0B2CE9O5gDVlbSomlE8v06Hs6g4-VQ81SD_3SvW7U2sKs_m0oXmcyMYYEKqaIHASdAaA=w675-h390-n-k-no", majorRivers: "Karnali, Bheri", majorRiversNe: "कर्णाली, भेरी", literacyRate: "62.7%", mainLanguages: "Nepali, Magar", mainLanguagesNe: "नेपाली, मगर", lat: 28.6010, lng: 81.6369 }, { id: 7, name: "Sudurpashchim Province", nepaliName: "सुदूरपश्चिम प्रदेश", capital: "Godawari", capitalNe: "गोदावरी", districts: 9, area: "19,999 km²", population: "2,711,270", density: "136/km²", color: "from-purple-600 to-violet-600", borderColor: "border-purple-600", description: "Located in the far west, this province is rich in unspoiled natural beauty and unique Deuda culture.", descriptionNe: "सुदूर पश्चिममा अवस्थित, यो प्रदेश अछुतो प्राकृतिक सौन्दर्य र देउडा संस्कृतिमा धनी छ।", attractions: ["Khaptad", "Shuklaphanta", "Api Nampa"], attractionsNe: ["खप्तड", "शुक्लाफाँटा", "अपि नाम्पा"], image: "https://lh3.googleusercontent.com/gps-cs-s/AHVAweqa0Vgu8fP66KID9-7yelqNiZ4ivnejIRzctBevCwH43INkW4-IjlVZWpEBwv_yh1LrmiGyRFsuKheyKoPY0JEmX8u8GnrzCnrrwSTHwrCiiwL6CzYP5nH3Jc-4r0WmlBNXg2FH=w675-h390-n-k-no", majorRivers: "Mahakali, Seti", majorRiversNe: "महाकाली, सेती", literacyRate: "63.5%", mainLanguages: "Doteli, Tharu", mainLanguagesNe: "डोटेली, थारु", lat: 28.8475, lng: 80.5638 } ]; const ProvinceMap: React.FC = () => { const { t, language } = useLanguage(); const [viewMode, setViewMode] = useState<'cards' | 'map'>('cards'); const [selectedProvince, setSelectedProvince] = useState(null); const mapRef = useRef(null); const mapInstance = useRef(null); useEffect(() => { if (viewMode === 'map' && mapRef.current) { if (!mapInstance.current) { initMap(); } else { mapInstance.current.invalidateSize(); } } }, [viewMode]); const initMap = () => { if (!mapRef.current || typeof L === 'undefined') return; mapInstance.current = L.map(mapRef.current).setView([28.3949, 84.1240], 7); L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png', { attribution: '© OpenStreetMap contributors © CARTO' }).addTo(mapInstance.current); PROVINCES.forEach(prov => { const iconHtml = `
${prov.id}
`; const icon = L.divIcon({ html: iconHtml, className: 'bg-transparent', iconSize: [40, 40], iconAnchor: [20, 20] }); const marker = L.marker([prov.lat, prov.lng], { icon }); const popupContent = `

${language === 'ne' ? prov.nepaliName : prov.name}

${language === 'ne' ? prov.capitalNe : prov.capital}

`; marker.bindPopup(popupContent); marker.on('popupopen', () => { const btn = document.getElementById(`btn-prov-${prov.id}`); if (btn) btn.onclick = () => setSelectedProvince(prov); }); marker.addTo(mapInstance.current); }); }; const localizeNumber = (value: string | number): string => { if (language === 'en') return value.toString(); const str = value.toString(); const devanagariDigits = ['०', '१', '२', '३', '४', '५', '६', '७', '८', '९']; return str.replace(/[0-9]/g, (match) => devanagariDigits[parseInt(match)]); }; return (
{/* View Toggle Header */}

{t("Province Overview", "Province Overview")}

{t("Explore the 7 distinct provinces of Nepal.", "Explore the 7 distinct provinces of Nepal.")}

{/* Scrollable Tabs System - Removed no-scrollbar for PC discoverability */}
{/* Main Content Area - Flexible height to prevent clamping on PC */}
{viewMode === 'cards' ? (
{PROVINCES.map(prov => (
setSelectedProvince(prov)} className="group bg-white dark:bg-gray-800/40 backdrop-blur-sm rounded-3xl overflow-hidden shadow-xl border border-white/10 hover:border-blue-500/50 transition-all duration-300 cursor-pointer hover:-translate-y-1" >
{prov.name}
{t("Province", "Province")} {prov.id}

{language === 'ne' ? prov.nepaliName : prov.name}

{language === 'ne' ? prov.capitalNe : prov.capital}
{localizeNumber(prov.districts)} Districts

"{language === 'ne' ? prov.descriptionNe : prov.description}"

))}
) : (

Map Legend

{PROVINCES.map(p => (
{ mapInstance.current?.flyTo([p.lat, p.lng], 9); setSelectedProvince(p); }}>
{language === 'ne' ? p.nepaliName : p.name}
))}
)}
{/* Detail Modal */} {selectedProvince && (
setSelectedProvince(null)}>
{selectedProvince.name}
{t("Province", "Province")} {localizeNumber(selectedProvince.id)} Official Data

{language === 'en' ? selectedProvince.name : selectedProvince.nepaliName}

{t("Area", "Area")}

{localizeNumber(selectedProvince.area)}

{t("Population", "Population")}

{localizeNumber(selectedProvince.population)}

{t("Administrative Capital", "Administrative Capital")}

{language === 'en' ? selectedProvince.capital : selectedProvince.capitalNe}

{t("Districts", "Districts")}

{localizeNumber(selectedProvince.districts)} Units

Regional Overview

"{language === 'en' ? selectedProvince.description : selectedProvince.descriptionNe}"

Landmark Sites

    {(language === 'en' ? selectedProvince.attractions : selectedProvince.attractionsNe).map((attr, idx) => (
  • {attr}
    • ))}

Vital Waterways

{language === 'en' ? selectedProvince.majorRivers : selectedProvince.majorRiversNe}

Literacy Index

{localizeNumber(selectedProvince.literacyRate)}

Primary Dialects

{language === 'en' ? selectedProvince.mainLanguages : selectedProvince.mainLanguagesNe}

)}
); }; export default ProvinceMap;