import React, { useState, useEffect, useRef } from 'react';
import ReactDOM from 'react-dom';
import { useNavigate } from 'react-router-dom';
import MapBg from '../assets/images/intel_map_dfw_twilight.webp';
import IntelligenceSidePanel from './dashboard/IntelligenceSidePanel';
import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);

// ── 10 Hotspots — 5 Commercial + 5 Residential, DFW Metro ──
const hotspots = [
    // Commercial
    {
        id: 1, top: '22%', left: '58%',
        address: '8333 Douglas Ave, Dallas',
        type: 'Commercial',
        problem: 'Roof Membrane Uplift',
        gain: '+$8.5M',
        weather: 'Hail Expected',
        status: 'Urgent',
        specs: { built: '1998', maintenance: '5 yrs since last coating' },
        management: { name: 'Sterling Properties', contact: 'Sign in for contact details' },
        photos: [
            { id: 'c1-1', url: '/assets/images/properties/Apartment_Complex.jpg', caption: 'Exterior View' },
            { id: 'c1-2', url: '/assets/images/properties/Office_Roof_Top_View.jpg', caption: 'Roof Aerial' },
            { id: 'c1-3', url: '/assets/images/properties/Broken_Roof_Surface.jpg', caption: 'Membrane Damage' },
        ]
    },
    {
        id: 2, top: '35%', left: '38%',
        address: '5600 Tennyson Pkwy, Plano',
        type: 'Commercial',
        problem: 'Critical Membrane Failure',
        gain: '+$22.5M',
        weather: 'Clear',
        status: 'Monitoring',
        specs: { built: '1982', maintenance: '20 yrs since roof replacement' },
        management: { name: 'Goldman Group', contact: 'Sign in for contact details' },
        photos: [
            { id: 'c2-1', url: '/assets/images/properties/Warehouse_Roof_Aerial.jpg', caption: 'Aerial Survey' },
            { id: 'c2-2', url: '/assets/images/properties/Mall_Rooftop_HVAC_Units.jpg', caption: 'HVAC Systems' },
            { id: 'c2-3', url: '/assets/images/properties/Storm_Worn_Roof.jpg', caption: 'Surface Wear' },
            { id: 'c2-4', url: '/assets/images/properties/Cracked_Asphalt_Shingles.jpg', caption: 'Substrate Cracking' },
        ]
    },
    {
        id: 3, top: '48%', left: '72%',
        address: '1900 Preston Rd, Frisco',
        type: 'Commercial',
        problem: 'Ponding Water Accumulation',
        gain: '+$4.2M',
        weather: 'Storm Watch',
        status: 'Action Required',
        specs: { built: '2005', maintenance: '3 yrs since drainage check' },
        management: { name: 'Hillcrest Capital', contact: 'Sign in for contact details' },
        photos: [
            { id: 'c3-1', url: '/assets/images/properties/Apartment_Complex.jpg', caption: 'Building Exterior' },
            { id: 'c3-2', url: '/assets/images/properties/Mall_Rooftop_HVAC_Units.jpg', caption: 'Rooftop Overview' },
            { id: 'c3-3', url: '/assets/images/properties/Broken_Roof_Surface.jpg', caption: 'Ponding Damage' },
        ]
    },
    {
        id: 4, top: '62%', left: '28%',
        address: '2100 N Hwy 360, Grand Prairie',
        type: 'Commercial',
        problem: 'HVAC Penetration Leak',
        gain: '+$6.8M',
        weather: 'Windy',
        status: 'Monitoring',
        specs: { built: '1995', maintenance: '8 yrs since waterproofing' },
        management: { name: 'Apex Industrial Partners', contact: 'Sign in for contact details' },
        photos: [
            { id: 'c4-1', url: '/assets/images/properties/Warehouse_Roof_Aerial.jpg', caption: 'Facility Aerial' },
            { id: 'c4-2', url: '/assets/images/properties/Mall_Rooftop_HVAC_Units.jpg', caption: 'HVAC Penetration' },
            { id: 'c4-3', url: '/assets/images/properties/Cracked_Storm_Shingles.jpg', caption: 'Seal Failure' },
        ]
    },
    {
        id: 5, top: '15%', left: '20%',
        address: '401 Commerce St, Fort Worth',
        type: 'Commercial',
        problem: 'Flashing Deterioration',
        gain: '+$11.3M',
        weather: 'Hail Expected',
        status: 'Urgent',
        specs: { built: '1990', maintenance: '12 yrs since seal replacement' },
        management: { name: 'Tarrant Realty Holdings', contact: 'Sign in for contact details' },
        photos: [
            { id: 'c5-1', url: '/assets/images/properties/Office_Roof_Top_View.jpg', caption: 'Roof Survey' },
            { id: 'c5-2', url: '/assets/images/properties/Apartment_Complex.jpg', caption: 'Building Facade' },
            { id: 'c5-3', url: '/assets/images/properties/Curled_Aging_Shingles.jpg', caption: 'Flashing Wear' },
            { id: 'c5-4', url: '/assets/images/properties/Storm_Worn_Roof.jpg', caption: 'Wind Exposure' },
        ]
    },
    // Residential
    {
        id: 6, top: '55%', left: '50%',
        address: '4200 Beverly Dr, Highland Park',
        type: 'Residential',
        problem: 'Severe Hail Impact',
        gain: '+$1.1M',
        weather: 'Rain Soon',
        status: 'Action Required',
        specs: { roofSize: '62 sq', eventHistory: '8 yrs since last hail event' },
        owner: { fico: '715', profile: 'Early Adopter / Long-term value' },
        photos: [
            { id: 'r6-1', url: '/assets/images/properties/Luxury_Driveway_Residence.jpg', caption: 'Front Exterior' },
            { id: 'r6-2', url: '/assets/images/properties/Hail_Damaged_Shingles.jpg', caption: 'Hail Damage' },
            { id: 'r6-3', url: '/assets/images/properties/Cracked_Storm_Shingles.jpg', caption: 'Storm Damage' },
        ]
    },
    {
        id: 7, top: '72%', left: '65%',
        address: '3505 Lexington Ave, University Park',
        type: 'Residential',
        problem: 'Asphalt Shingle Loss',
        gain: '+$950K',
        weather: 'Windy',
        status: 'Low Priority',
        specs: { roofSize: '45 sq', eventHistory: 'High Wind Zone' },
        owner: { fico: '680', profile: 'First-time Buyer' },
        photos: [
            { id: 'r7-1', url: '/assets/images/properties/Modern_White_Suburban_Home.jpg', caption: 'Front View' },
            { id: 'r7-2', url: '/assets/images/properties/Cracked_Asphalt_Shingles.jpg', caption: 'Shingle Loss' },
            { id: 'r7-3', url: '/assets/images/properties/Roof_Inspection_Angle.jpg', caption: 'Drone Inspection' },
        ]
    },
    {
        id: 8, top: '40%', left: '15%',
        address: '7212 Covewood Dr, Garland',
        type: 'Residential',
        problem: 'Aging Composite Shingles',
        gain: '+$420K',
        weather: 'Clear',
        status: 'Low Priority',
        specs: { roofSize: '38 sq', eventHistory: 'No recent events' },
        owner: { fico: '740', profile: 'Long-term Owner' },
        photos: [
            { id: 'r8-1', url: '/assets/images/properties/Beige_Two_Story_House.jpg', caption: 'Street View' },
            { id: 'r8-2', url: '/assets/images/properties/Curled_Aging_Shingles.jpg', caption: 'Aging Shingles' },
        ]
    },
    {
        id: 9, top: '75%', left: '42%',
        address: '1520 Creekside Dr, Allen',
        type: 'Residential',
        problem: 'Ridge Cap Separation',
        gain: '+$780K',
        weather: 'Hail Expected',
        status: 'Urgent',
        specs: { roofSize: '55 sq', eventHistory: '2 hail events in 3 years' },
        owner: { fico: '695', profile: 'Insurance-motivated' },
        photos: [
            { id: 'r9-1', url: '/assets/images/properties/Brick_Front_Porch_Home.jpg', caption: 'Entryway' },
            { id: 'r9-2', url: '/assets/images/properties/Overlapping_Roof_Shingles.jpg', caption: 'Ridge Detail' },
            { id: 'r9-3', url: '/assets/images/properties/Hail_Damaged_Shingles.jpg', caption: 'Hail Damage' },
            { id: 'r9-4', url: '/assets/images/properties/Storm_Worn_Roof.jpg', caption: 'Worn Surface' },
        ]
    },
    {
        id: 10, top: '30%', left: '82%',
        address: '905 W Main St, Richardson',
        type: 'Residential',
        problem: 'Granule Loss Pattern',
        gain: '+$560K',
        weather: 'Storm Watch',
        status: 'Action Required',
        specs: { roofSize: '42 sq', eventHistory: '5 yrs since installation' },
        owner: { fico: '720', profile: 'Recently Purchased' },
        photos: [
            { id: 'r10-1', url: '/assets/images/properties/Red_Shingle_Cottage.jpg', caption: 'Cottage Exterior' },
            { id: 'r10-2', url: '/assets/images/properties/Residential_Roof_Texture.jpg', caption: 'Roof Texture' },
            { id: 'r10-3', url: '/assets/images/properties/Cracked_Asphalt_Shingles.jpg', caption: 'Granule Loss' },
        ]
    },
];

const FILTERS = ['All', 'Commercial', 'Residential', 'Storm Path'];
const STORM_WEATHER = ['Hail Expected', 'Storm Watch', 'Rain Soon'];

const metrics = [
    { label: 'Total Pipeline', value: 57.1, prefix: '$', suffix: 'M', color: 'text-blue-500', stamp: '\u25CF Active', stampClass: 'permit-stamp--accent' },
    { label: 'Active Alerts', value: 7, prefix: '', suffix: '', color: 'text-amber-500', stamp: '\u25B2 Monitoring', stampClass: 'permit-stamp--accent' },
    { label: 'Urgent', value: 3, prefix: '', suffix: '', color: 'text-red-500', stamp: '\u2715 Critical', stampClass: 'permit-stamp--danger' },
    { label: 'Avg Roof Age', value: 18, prefix: '', suffix: ' yrs', color: 'text-emerald-500', stamp: '\u2713 Assessed', stampClass: 'permit-stamp--verified' },
];

const isSpotVisible = (spot, filter) => {
    if (filter === 'All') return true;
    if (filter === 'Commercial') return spot.type === 'Commercial';
    if (filter === 'Residential') return spot.type === 'Residential';
    if (filter === 'Storm Path') return STORM_WEATHER.includes(spot.weather);
    return true;
};

const IntelligenceMap = () => {
    const navigate = useNavigate();
    const [activeSpot, setActiveSpot] = useState(null);
    const [activeFilter, setActiveFilter] = useState('All');
    const [hoveredSpot, setHoveredSpot] = useState(null);
    const [showRescheduleDialog, setShowRescheduleDialog] = useState(false);

    const sectionRef = useRef(null);
    const pinRefs = useRef([]);
    const metricRefs = useRef([]);
    const mapGlowRef = useRef(null);

    // Reschedule dialog timer
    useEffect(() => {
        const timer = setTimeout(() => setShowRescheduleDialog(true), 2500);
        return () => clearTimeout(timer);
    }, []);

    // GSAP: Staggered pin entrance + metric counters
    useEffect(() => {
        const ctx = gsap.context(() => {
            // Pin entrance
            const pins = pinRefs.current.filter(Boolean);
            pins.forEach(pin => gsap.set(pin, { opacity: 0, scale: 0, y: 20 }));

            gsap.to(pins, {
                opacity: 1, scale: 1, y: 0,
                duration: 0.6, stagger: 0.08,
                ease: 'back.out(1.7)',
                scrollTrigger: {
                    trigger: sectionRef.current,
                    start: 'top 70%',
                    toggleActions: 'play none none none',
                },
                onComplete: () => {
                    // Clear GSAP inline styles so CSS transitions take over
                    pins.forEach(pin => {
                        if (pin) gsap.set(pin, { clearProps: 'opacity,transform' });
                    });
                },
            });

            // Metric counters — proxy object approach
            metricRefs.current.forEach((el) => {
                if (!el) return;
                const target = parseFloat(el.dataset.target);
                const suffix = el.dataset.suffix || '';
                const prefix = el.dataset.prefix || '';
                const counter = { value: 0 };
                el.innerText = prefix + '0' + suffix;

                gsap.to(counter, {
                    value: target,
                    duration: 2,
                    ease: 'power1.out',
                    scrollTrigger: {
                        trigger: el,
                        start: 'top 85%',
                        toggleActions: 'play none none none',
                    },
                    onUpdate: () => {
                        const display = target % 1 !== 0
                            ? counter.value.toFixed(1)
                            : Math.ceil(counter.value).toString();
                        el.innerText = prefix + display + suffix;
                    },
                });
            });
        }, sectionRef);

        return () => ctx.revert();
    }, []);

    // Mouse-follow glow on map
    const handleMapMouseMove = (e) => {
        if (!mapGlowRef.current) return;
        const rect = e.currentTarget.getBoundingClientRect();
        const x = e.clientX - rect.left;
        const y = e.clientY - rect.top;
        mapGlowRef.current.style.background =
            `radial-gradient(350px circle at ${x}px ${y}px, rgba(6,182,212,0.08), transparent 60%)`;
    };

    const handleMapMouseLeave = () => {
        if (mapGlowRef.current) mapGlowRef.current.style.background = 'transparent';
    };

    return (
        <section
            ref={sectionRef}
            className="py-24 bg-zinc-100 dark:bg-zinc-900 border-t border-zinc-200 dark:border-white/5 relative overflow-hidden"
        >
            {/* Blueprint grid bg */}
            <div className="absolute inset-0 blueprint-grid-fine"></div>

            <div className="max-w-7xl mx-auto px-6 relative z-10">

                {/* ── Header ── */}
                <div className="mb-8 text-center max-w-4xl mx-auto">
                    <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-cyan-500/10 dark:bg-cyan-400/10 border border-cyan-500/20 dark:border-cyan-400/20 mb-4">
                        <div className="w-1.5 h-1.5 bg-cyan-500 dark:bg-cyan-400 rounded-full animate-pulse"></div>
                        <span className="text-cyan-600 dark:text-cyan-400 text-xs font-mono font-bold uppercase tracking-widest">Live CRM Data Feed</span>
                    </div>
                    <h2 className="text-3xl md:text-5xl font-black text-zinc-900 dark:text-white mb-4 tracking-tight">
                        Hyper-Local Sales Intelligence
                    </h2>
                    <p className="text-zinc-500 dark:text-zinc-400 text-lg max-w-2xl mx-auto">
                        Our systems overlay live NOAA weather data with property value insights. Maximize revenue by targeting neighborhoods directly in the storm path.
                    </p>
                </div>

                {/* ── Filter Bar ── */}
                <div className="flex flex-wrap items-center justify-center gap-2 sm:gap-3 mb-8">
                    {FILTERS.map((filter) => (
                        <button
                            key={filter}
                            onClick={() => { setActiveFilter(filter); setActiveSpot(null); }}
                            className={`font-mono text-[10px] font-bold uppercase tracking-widest px-4 py-2 rounded-md border transition-all duration-200
                                ${activeFilter === filter
                                    ? 'bg-cyan-500/10 dark:bg-cyan-400/10 text-cyan-600 dark:text-cyan-400 border-cyan-500/30 dark:border-cyan-400/30'
                                    : 'bg-white dark:bg-white/5 text-zinc-500 dark:text-gray-500 border-zinc-200 dark:border-white/10 hover:text-zinc-900 dark:hover:text-white hover:border-zinc-400 dark:hover:border-white/20'
                                }
                            `}
                        >
                            {filter}
                        </button>
                    ))}
                </div>

                {/* ══════════════════════════════════════════════ */}
                {/* MAP CONTAINER — always dark (satellite image) */}
                {/* ══════════════════════════════════════════════ */}
                <div
                    className="relative w-full h-[400px] md:h-[550px] lg:h-[650px] bg-black rounded-2xl border border-zinc-300 dark:border-white/20 shadow-2xl overflow-hidden isolate ring-1 ring-zinc-200 dark:ring-white/10"
                    onMouseMove={handleMapMouseMove}
                    onMouseLeave={handleMapMouseLeave}
                >
                    {/* Map Background */}
                    <div className="absolute inset-0 bg-[#0f172a]">
                        <img
                            src={MapBg}
                            alt="DFW Metroplex Map Overlay"
                            className="w-full h-full object-cover opacity-60 mix-blend-luminosity"
                        />
                        <div className="absolute inset-0 bg-[url('https://grainy-gradients.vercel.app/noise.svg')] opacity-20"></div>
                    </div>

                    {/* Mouse-follow glow */}
                    <div
                        ref={mapGlowRef}
                        className="absolute inset-0 pointer-events-none z-10 transition-[background] duration-150"
                    />

                    {/* Region Indicator — HUD */}
                    <div className="absolute top-4 left-4 z-30">
                        <div className="bg-slate-900/80 backdrop-blur-md text-white pl-3 pr-4 py-1.5 md:pl-4 md:pr-6 md:py-2 rounded-r-lg border-l-4 border-cyan-400 shadow-[0_0_15px_rgba(0,229,255,0.2)]">
                            <div className="text-[9px] md:text-[10px] text-cyan-400 font-bold uppercase tracking-widest mb-0.5">Active Region</div>
                            <div className="font-black text-sm md:text-lg leading-none">DFW Zone 2</div>
                        </div>
                    </div>

                    {/* Weather Widget */}
                    <div className="absolute top-0 right-0 w-full h-full bg-gradient-to-bl from-slate-900/80 via-transparent to-transparent pointer-events-none"></div>
                    <div className="absolute top-4 right-4 p-3 md:p-4 bg-black/60 backdrop-blur-md rounded-lg border border-white/10 max-w-[180px] md:max-w-xs z-30 hidden sm:block">
                        <div className="flex items-center gap-3 md:gap-4">
                            <div className="bg-white/10 p-1.5 md:p-2 rounded-full text-white">
                                <span className="text-xl md:text-2xl">{'\u26C8'}</span>
                            </div>
                            <div>
                                <div className="font-bold text-white text-xs md:text-sm">Severe Hail Watch</div>
                                <div className="text-[10px] md:text-xs text-cyan-400 animate-pulse">Approaching Tarrant County</div>
                                <div className="text-[9px] md:text-[10px] text-gray-500 font-mono mt-1">ETA: 15 MINS</div>
                            </div>
                        </div>
                    </div>

                    {/* ── Interactive Pins ── */}
                    {hotspots.map((spot, index) => {
                        const visible = isSpotVisible(spot, activeFilter);
                        const isDimmed = activeSpot && activeSpot.id !== spot.id;
                        const isCommercial = spot.type === 'Commercial';

                        return (
                            <div
                                key={spot.id}
                                ref={(el) => { pinRefs.current[index] = el; }}
                                className={`absolute group/pin z-20 cursor-pointer transition-all duration-300 ease-in-out
                                    ${!visible ? 'opacity-0 scale-0 pointer-events-none' : ''}
                                    ${visible && isDimmed ? 'opacity-30' : ''}
                                `}
                                style={{ top: spot.top, left: spot.left }}
                                onClick={() => setActiveSpot(activeSpot?.id === spot.id ? null : spot)}
                                onMouseEnter={() => setHoveredSpot(spot.id)}
                                onMouseLeave={() => setHoveredSpot(null)}
                            >
                                {/* Larger invisible touch target */}
                                <div className="absolute -inset-4 md:-inset-2" />

                                {/* Urgent Status Alert Pulse */}
                                {visible && spot.status === 'Urgent' && (
                                    <div className="absolute -inset-8 rounded-full bg-red-500/30 animate-ping" style={{ animationDuration: '1.5s' }} />
                                )}

                                {/* Radar Ripple */}
                                {visible && (
                                    <div className={`absolute ${isCommercial ? '-inset-5' : '-inset-4'} rounded-full animate-ping opacity-75 ${isCommercial ? 'bg-purple-500/20' : 'bg-cyan-400/20'
                                        }`} />
                                )}

                                {/* Selected glow ring */}
                                {activeSpot?.id === spot.id && (
                                    <div className={`absolute -inset-6 rounded-full blur-md animate-pulse ${isCommercial ? 'bg-purple-500/25' : 'bg-cyan-400/25'
                                        }`} />
                                )}

                                {/* Pin cluster */}
                                <div className="relative flex flex-col items-center">
                                    {/* Pin Head */}
                                    <div className={`${isCommercial ? 'w-4 h-4' : 'w-3 h-3'} rounded-full border-2 border-white shadow-lg relative z-10 transition-transform duration-200 group-hover/pin:scale-125 ${isCommercial
                                        ? 'bg-purple-500 shadow-[0_0_15px_rgba(168,85,247,0.6)]'
                                        : 'bg-cyan-400 shadow-[0_0_15px_rgba(0,229,255,0.6)]'
                                        }`} />

                                    {/* Pin Line */}
                                    <div className="w-[1px] h-6 md:h-8 bg-gradient-to-b from-white to-transparent opacity-50" />

                                    {/* Ground Shadow */}
                                    <div className="absolute bottom-0 left-1/2 -translate-x-1/2 w-5 h-1 bg-black/60 blur-sm rounded-[100%] translate-y-1" />
                                </div>

                                {/* Hover Tooltip */}
                                <div className={`absolute bottom-full left-1/2 -translate-x-1/2 mb-3 bg-slate-900/90 backdrop-blur-md text-[10px] font-mono px-3 py-2 rounded-lg border border-white/10 shadow-lg whitespace-nowrap pointer-events-none transition-all duration-200 z-30
                                    ${hoveredSpot === spot.id && activeSpot?.id !== spot.id ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-1'}
                                `}>
                                    <div className="font-bold text-white text-[11px]">{spot.address}</div>
                                    <div className={`font-bold mt-0.5 ${isCommercial ? 'text-purple-400' : 'text-cyan-400'}`}>
                                        {spot.gain}
                                    </div>
                                    <div className="absolute top-full left-1/2 -translate-x-1/2 w-2 h-2 bg-slate-900/90 border-r border-b border-white/10 rotate-45 -mt-1" />
                                </div>
                            </div>
                        );
                    })}

                    {/* Reschedule Dialog */}
                    {showRescheduleDialog && (
                        <div className="absolute bottom-6 left-1/2 transform -translate-x-1/2 md:left-6 md:translate-x-0 z-50 w-[90%] md:w-96">
                            <div className="bg-white/95 backdrop-blur-xl rounded-xl shadow-2xl p-5 md:p-6 border-l-4 border-red-600 animate-[slideUp_0.5s_ease-out]">
                                <div className="flex justify-between items-start mb-3">
                                    <div className="flex items-center gap-3">
                                        <div className="w-8 h-8 bg-red-100 rounded-full flex items-center justify-center text-red-600 font-bold text-lg">!</div>
                                        <h4 className="font-bold text-slate-900 text-sm uppercase tracking-wide">Schedule Conflict</h4>
                                    </div>
                                    <button onClick={() => setShowRescheduleDialog(false)} className="text-gray-400 hover:text-black">{'\u2715'}</button>
                                </div>
                                <p className="text-gray-600 text-sm mb-4 leading-relaxed">
                                    <strong>Heavy rainfall expected in Plano at 2:00 PM.</strong><br />
                                    This conflicts with the inspection at <span className="text-slate-900 font-semibold">Legacy West</span>.
                                </p>
                                <div className="flex gap-3">
                                    <button onClick={() => navigate('/login')} className="flex-1 bg-slate-900 text-white text-xs font-bold py-2.5 rounded hover:bg-slate-800 transition-colors uppercase tracking-wider">
                                        Reschedule
                                    </button>
                                    <button onClick={() => setShowRescheduleDialog(false)} className="flex-1 bg-gray-100 text-gray-600 text-xs font-bold py-2.5 rounded hover:bg-gray-200 transition-colors uppercase tracking-wider">
                                        Dismiss
                                    </button>
                                </div>
                            </div>
                        </div>
                    )}

                    {/* Desktop Side Panel */}
                    {activeSpot && (
                        <div className="hidden md:block">
                            <IntelligenceSidePanel
                                data={activeSpot}
                                onClose={() => setActiveSpot(null)}
                            />
                        </div>
                    )}
                </div>

                {/* ── Mobile Bottom Sheet ── */}
                {activeSpot && ReactDOM.createPortal(
                    <div className="md:hidden fixed inset-0 z-[9999]">
                        <div className="absolute inset-0 bg-black/40 backdrop-blur-sm" onClick={() => setActiveSpot(null)} />
                        <div data-lenis-prevent className="absolute bottom-0 left-0 right-0 max-h-[80vh] bg-white dark:bg-zinc-900 rounded-t-2xl border-t border-zinc-200 dark:border-white/10 overflow-y-auto overscroll-contain animate-[slideUpSheet_0.3s_ease-out] shadow-2xl touch-pan-y">
                            {/* Sheet header */}
                            <div className="sticky top-0 bg-white dark:bg-zinc-900 px-6 pt-4 pb-2 border-b border-zinc-100 dark:border-white/5 z-10">
                                <div className="w-10 h-1 bg-zinc-300 dark:bg-white/20 rounded-full mx-auto mb-3" />
                                <div className="flex justify-between items-center">
                                    <div className="flex items-center gap-2">
                                        <div className={`w-2 h-2 rounded-full ${activeSpot.type === 'Commercial' ? 'bg-purple-500' : 'bg-cyan-400'}`} />
                                        <h3 className="font-bold text-zinc-900 dark:text-white text-sm">{activeSpot.address}</h3>
                                    </div>
                                    <button onClick={() => setActiveSpot(null)} className="text-zinc-400 hover:text-zinc-900 dark:hover:text-white p-1">{'\u2715'}</button>
                                </div>
                            </div>
                            <IntelligenceSidePanel
                                data={activeSpot}
                                onClose={() => setActiveSpot(null)}
                                variant="sheet"
                            />
                        </div>
                    </div>,
                    document.body
                )}

                {/* ── Aggregate Metrics ── */}
                <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mt-8">
                    {metrics.map((m, i) => (
                        <div key={i} className="bg-white dark:bg-white/5 p-5 rounded-xl border border-zinc-200 dark:border-white/10 relative overflow-hidden hover:-translate-y-1 transition-transform duration-200">
                            <div className="measure-ticks measure-ticks-top absolute top-0 left-3 right-3 h-2.5"></div>
                            <div className="text-[10px] font-mono font-bold uppercase tracking-widest text-zinc-400 dark:text-gray-500 mb-1">
                                {m.label}
                            </div>
                            <div
                                ref={(el) => { metricRefs.current[i] = el; }}
                                data-target={m.value}
                                data-suffix={m.suffix}
                                data-prefix={m.prefix}
                                className={`text-3xl font-mono font-bold ${m.color} tracking-tight`}
                            >
                                {m.prefix}0{m.suffix}
                            </div>
                            <div className="mt-3 pt-2 border-t border-zinc-100 dark:border-white/5">
                                <span className={`permit-stamp ${m.stampClass}`}>{m.stamp}</span>
                            </div>
                            <div className="measure-ticks absolute bottom-0 left-3 right-3 h-2.5"></div>
                        </div>
                    ))}
                </div>
            </div>

            <style>{`
                @keyframes slideUp {
                    from { opacity: 0; transform: translate(-50%, 20px); }
                    to { opacity: 1; transform: translate(-50%, 0); }
                }
                @media (min-width: 768px) {
                    @keyframes slideUp {
                        from { opacity: 0; transform: translateY(20px); }
                        to { opacity: 1; transform: translateY(0); }
                    }
                }
            `}</style>
        </section>
    );
};

export default IntelligenceMap;