// Map Coverage Section - Global reach with arcs
const { useState, useEffect, useRef } = React;

function MapCoverage({ t }) {
  const mapContainerRef = useRef(null);
  const mapRef = useRef(null);
  const [mapLoaded, setMapLoaded] = useState(false);

  // AEQ headquarters in Ipoh, Perak, Malaysia
  const HQ = [101.0901, 4.5975];

  // Malaysian cities
  const malaysiaCities = [
    // Peninsular Malaysia - West Coast
    { name: "Ipoh", coords: [101.0901, 4.5975] },
    { name: "Kuala Lumpur", coords: [101.6869, 3.1390] },
    { name: "Petaling Jaya", coords: [101.6074, 3.1073] },
    { name: "Shah Alam", coords: [101.5328, 3.0733] },
    { name: "Klang", coords: [101.4433, 3.0449] },
    { name: "Penang", coords: [100.3327, 5.4164] },
    { name: "Butterworth", coords: [100.3641, 5.3991] },
    { name: "Melaka", coords: [102.2501, 2.1896] },
    { name: "Johor Bahru", coords: [103.7414, 1.4927] },
    { name: "Pasir Gudang", coords: [103.9053, 1.4725] },
    { name: "Batu Pahat", coords: [102.9325, 1.8548] },
    { name: "Muar", coords: [102.5689, 2.0442] },
    { name: "Seremban", coords: [101.9424, 2.7297] },
    { name: "Port Dickson", coords: [101.7964, 2.5228] },
    { name: "Taiping", coords: [100.7333, 4.8500] },
    { name: "Lumut", coords: [100.6294, 4.2340] },
    { name: "Teluk Intan", coords: [101.0208, 4.0259] },
    { name: "Kampar", coords: [101.1537, 4.3050] },
    { name: "Batu Gajah", coords: [101.0467, 4.4703] },
    { name: "Alor Setar", coords: [100.4711, 6.1248] },
    { name: "Sungai Petani", coords: [100.4880, 5.6470] },
    { name: "Langkawi", coords: [99.7269, 6.3500] },
    { name: "Kangar", coords: [100.1986, 6.4414] },

    // Peninsular Malaysia - East Coast
    { name: "Kuantan", coords: [103.4324, 3.8077] },
    { name: "Gebeng", coords: [103.3833, 3.9167] },
    { name: "Kuala Terengganu", coords: [103.1324, 5.3117] },
    { name: "Kemaman", coords: [103.4167, 4.2333] },
    { name: "Kota Bharu", coords: [102.2386, 6.1254] },
    { name: "Pasir Mas", coords: [102.1397, 6.0500] },

    // East Malaysia - Sabah
    { name: "Kota Kinabalu", coords: [116.0735, 5.9804] },
    { name: "Sandakan", coords: [118.0590, 5.8402] },
    { name: "Tawau", coords: [117.8911, 4.2498] },
    { name: "Labuan", coords: [115.2308, 5.2831] },
    { name: "Lahad Datu", coords: [118.3270, 5.0268] },

    // East Malaysia - Sarawak
    { name: "Kuching", coords: [110.3444, 1.5535] },
    { name: "Miri", coords: [113.9867, 4.3995] },
    { name: "Sibu", coords: [111.8308, 2.3000] },
    { name: "Bintulu", coords: [113.0419, 3.1667] },
    { name: "Mukah", coords: [112.0944, 2.8986] },
  ];

  // Global destinations
  const globalDestinations = [
    { name: "Singapore", coords: [103.8198, 1.3521], region: "SEA" },
    { name: "Bangkok", coords: [100.5018, 13.7563], region: "SEA" },
    { name: "Jakarta", coords: [106.8456, -6.2088], region: "SEA" },
    { name: "Manila", coords: [120.9842, 14.5995], region: "SEA" },
    { name: "Ho Chi Minh", coords: [106.6297, 10.8231], region: "SEA" },
    { name: "Dubai", coords: [55.2708, 25.2048], region: "Middle East" },
    { name: "Mumbai", coords: [72.8777, 19.0760], region: "Asia" },
    { name: "Shanghai", coords: [121.4737, 31.2304], region: "Asia" },
    { name: "Tokyo", coords: [139.6917, 35.6895], region: "Asia" },
    { name: "Sydney", coords: [151.2093, -33.8688], region: "Oceania" },
    { name: "London", coords: [-0.1276, 51.5074], region: "Europe" },
    { name: "Frankfurt", coords: [8.6821, 50.1109], region: "Europe" },
  ];

  useEffect(() => {
    if (!mapContainerRef.current || !window.maplibregl) return;

    const map = new maplibregl.Map({
      container: mapContainerRef.current,
      style: 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json',
      center: [108, 4],
      zoom: 3.5,
      minZoom: 2,
      maxZoom: 8,
      attributionControl: false,
      renderWorldCopies: false,
    });

    mapRef.current = map;

    map.on('load', () => {
      setMapLoaded(true);

      // Custom map styling - make it beautiful
      // Change water color to deep blue
      if (map.getLayer('water')) {
        map.setPaintProperty('water', 'fill-color', '#0c1929');
      }

      // Style the land/background
      if (map.getLayer('land')) {
        map.setPaintProperty('land', 'background-color', '#0f172a');
      }

      // Style country boundaries
      if (map.getLayer('boundary_country')) {
        map.setPaintProperty('boundary_country', 'line-color', '#334155');
        map.setPaintProperty('boundary_country', 'line-opacity', 0.5);
      }

      // Create arc data with different colors for different regions
      const arcColors = {
        'SEA': '#22d3ee',      // Cyan for Southeast Asia
        'Middle East': '#f59e0b', // Amber for Middle East
        'Asia': '#a78bfa',     // Purple for Asia
        'Oceania': '#34d399',  // Green for Oceania
        'Europe': '#f472b6',   // Pink for Europe
      };

      const arcFeatures = globalDestinations.map((dest, i) => {
        const coords = generateArc(HQ, dest.coords, 0.35);
        return {
          type: 'Feature',
          properties: {
            id: i,
            name: dest.name,
            region: dest.region,
            color: arcColors[dest.region] || '#06b6d4'
          },
          geometry: { type: 'LineString', coordinates: coords }
        };
      });

      // Add arc source
      map.addSource('arcs', {
        type: 'geojson',
        data: { type: 'FeatureCollection', features: arcFeatures }
      });

      // Add outer glow layer
      map.addLayer({
        id: 'arc-glow-outer',
        type: 'line',
        source: 'arcs',
        layout: { 'line-join': 'round', 'line-cap': 'round' },
        paint: {
          'line-color': ['get', 'color'],
          'line-width': 12,
          'line-opacity': 0.1,
          'line-blur': 8
        }
      });

      // Add middle glow layer
      map.addLayer({
        id: 'arc-glow-middle',
        type: 'line',
        source: 'arcs',
        layout: { 'line-join': 'round', 'line-cap': 'round' },
        paint: {
          'line-color': ['get', 'color'],
          'line-width': 6,
          'line-opacity': 0.25,
          'line-blur': 4
        }
      });

      // Add main arc layer
      map.addLayer({
        id: 'arc-layer',
        type: 'line',
        source: 'arcs',
        layout: { 'line-join': 'round', 'line-cap': 'round' },
        paint: {
          'line-color': ['get', 'color'],
          'line-width': 2.5,
          'line-opacity': 0.9,
        }
      });

      // Add bright core
      map.addLayer({
        id: 'arc-core',
        type: 'line',
        source: 'arcs',
        layout: { 'line-join': 'round', 'line-cap': 'round' },
        paint: {
          'line-color': '#ffffff',
          'line-width': 0.8,
          'line-opacity': 0.5,
        }
      });

      // Add HQ marker at Ipoh, Perak - Golden Star
      const hqEl = document.createElement('div');
      hqEl.className = 'map-marker map-marker-hq';
      hqEl.style.cssText = 'width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;';
      hqEl.innerHTML = `
        <div class="hq-glow"></div>
        <div class="hq-star">
          <svg viewBox="0 0 24 24" fill="url(#goldGradient)" width="28" height="28">
            <defs>
              <linearGradient id="goldGradient" x1="0%" y1="0%" x2="100%" y2="100%">
                <stop offset="0%" style="stop-color:#fcd34d"/>
                <stop offset="50%" style="stop-color:#f59e0b"/>
                <stop offset="100%" style="stop-color:#d97706"/>
              </linearGradient>
            </defs>
            <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
          </svg>
        </div>
        <div class="hq-tag">HQ</div>
      `;

      const hqPopup = new maplibregl.Popup({ offset: 25, closeButton: false })
        .setHTML(`<div class="map-popup"><strong>Ipoh, Perak</strong><br><span class="hq-label">⭐ AEQ Safety Headquarters</span><br><span>Malaysia</span></div>`);

      new maplibregl.Marker({ element: hqEl, anchor: 'center' })
        .setLngLat(HQ)
        .setPopup(hqPopup)
        .addTo(map);

      // Add Malaysian cities markers
      malaysiaCities.forEach(city => {
        // Skip Ipoh since HQ is there
        if (city.name === 'Ipoh') return;

        const el = document.createElement('div');
        el.className = 'map-marker map-marker-malaysia';
        el.innerHTML = '<div class="marker-dot malaysia"><div class="marker-inner"></div></div>';

        const popup = new maplibregl.Popup({ offset: 25, closeButton: false })
          .setHTML(`<div class="map-popup"><strong>${city.name}</strong><br><span>Malaysia</span></div>`);

        new maplibregl.Marker({ element: el })
          .setLngLat(city.coords)
          .setPopup(popup)
          .addTo(map);
      });

      // Add global destination markers with region-specific colors
      const regionColors = {
        'SEA': '#22d3ee',
        'Middle East': '#f59e0b',
        'Asia': '#a78bfa',
        'Oceania': '#34d399',
        'Europe': '#f472b6',
      };

      globalDestinations.forEach(dest => {
        const color = regionColors[dest.region] || '#a855f7';
        const el = document.createElement('div');
        el.className = 'map-marker map-marker-global';
        el.innerHTML = `<div class="marker-glow" style="background: ${color}"></div><div class="marker-dot global" style="background: ${color}; box-shadow: 0 0 15px ${color}"><div class="marker-inner"></div></div>`;

        const popup = new maplibregl.Popup({ offset: 25, closeButton: false })
          .setHTML(`<div class="map-popup"><strong>${dest.name}</strong><br><span style="color: ${color}">${dest.region}</span></div>`);

        new maplibregl.Marker({ element: el })
          .setLngLat(dest.coords)
          .setPopup(popup)
          .addTo(map);
      });
    });

    return () => map.remove();
  }, []);

  // Generate curved arc coordinates
  function generateArc(from, to, curvature) {
    const points = [];
    const samples = 50;
    const [x0, y0] = from;
    const [x2, y2] = to;
    const dx = x2 - x0;
    const dy = y2 - y0;
    const distance = Math.sqrt(dx * dx + dy * dy);

    if (distance === 0) return [from, to];

    const mx = (x0 + x2) / 2;
    const my = (y0 + y2) / 2;
    const nx = -dy / distance;
    const ny = dx / distance;
    const offset = distance * curvature;
    const cx = mx + nx * offset;
    const cy = my + ny * offset;

    for (let i = 0; i <= samples; i++) {
      const t = i / samples;
      const inv = 1 - t;
      const x = inv * inv * x0 + 2 * inv * t * cx + t * t * x2;
      const y = inv * inv * y0 + 2 * inv * t * cy + t * t * y2;
      points.push([x, y]);
    }
    return points;
  }

  return (
    <section className="map-coverage-section">
      <div className="wrap">
        <div className="map-header">
          <div className="eyebrow"><span className="dot"></span><span>GLOBAL REACH</span></div>
          <h2 className="map-title">Serving Industries Worldwide</h2>
          <p className="map-desc">
            From our headquarters in Malaysia, we deliver professional safety and engineering services across Southeast Asia and beyond.
          </p>
        </div>

        <div className="map-container">
          <div ref={mapContainerRef} className="map-canvas"></div>
          {!mapLoaded && (
            <div className="map-loading">
              <div className="loading-spinner"></div>
              <span>Loading map...</span>
            </div>
          )}

          <div className="map-legend">
            <div className="legend-item">
              <span className="legend-star">⭐</span>
              <span>HQ - Ipoh, Perak</span>
            </div>
            <div className="legend-item">
              <span className="legend-dot malaysia"></span>
              <span>Malaysia Operations</span>
            </div>
            <div className="legend-item">
              <span className="legend-dot global"></span>
              <span>International Coverage</span>
            </div>
          </div>
        </div>

        <div className="map-stats">
          <div className="map-stat">
            <span className="stat-value">37+</span>
            <span className="stat-label">Malaysian Cities</span>
          </div>
          <div className="map-stat">
            <span className="stat-value">12+</span>
            <span className="stat-label">Countries Served</span>
          </div>
          <div className="map-stat">
            <span className="stat-value">4</span>
            <span className="stat-label">Continents Reached</span>
          </div>
        </div>
      </div>

      <style>{`
        .map-coverage-section {
          position: relative;
          padding: 80px 0;
          background: linear-gradient(180deg, #030712 0%, #0c1222 50%, #030712 100%);
          overflow: hidden;
        }

        .map-coverage-section::before {
          content: '';
          position: absolute;
          top: 0;
          left: 50%;
          transform: translateX(-50%);
          width: 80%;
          height: 1px;
          background: linear-gradient(90deg, transparent, rgba(6, 182, 212, 0.3), transparent);
        }

        .map-header {
          text-align: center;
          margin-bottom: 40px;
        }

        .map-title {
          font-size: clamp(28px, 4vw, 42px);
          font-weight: 800;
          color: #fff;
          margin: 0 0 16px;
          letter-spacing: -0.02em;
          background: linear-gradient(135deg, #fff 0%, #94a3b8 100%);
          -webkit-background-clip: text;
          background-clip: text;
          -webkit-text-fill-color: transparent;
        }

        .map-desc {
          font-size: 16px;
          color: #94a3b8;
          line-height: 1.7;
          max-width: 600px;
          margin: 0 auto;
        }

        .map-container {
          position: relative;
          height: 550px;
          border-radius: 20px;
          overflow: hidden;
          border: 1px solid rgba(6, 182, 212, 0.2);
          background: linear-gradient(135deg, #0c1929 0%, #0a0f1a 100%);
          box-shadow:
            0 0 60px rgba(6, 182, 212, 0.1),
            0 20px 60px rgba(0, 0, 0, 0.5),
            inset 0 1px 0 rgba(255, 255, 255, 0.05);
        }

        .map-container::before {
          content: '';
          position: absolute;
          inset: 0;
          border-radius: 20px;
          padding: 1px;
          background: linear-gradient(135deg, rgba(6, 182, 212, 0.3), transparent, rgba(168, 85, 247, 0.3));
          -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          -webkit-mask-composite: xor;
          mask-composite: exclude;
          pointer-events: none;
          z-index: 10;
        }

        .map-canvas {
          width: 100%;
          height: 100%;
        }

        .map-loading {
          position: absolute;
          inset: 0;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 12px;
          background: rgba(3, 7, 18, 0.95);
          color: #94a3b8;
          font-size: 14px;
        }

        .loading-spinner {
          width: 40px;
          height: 40px;
          border: 3px solid rgba(6, 182, 212, 0.2);
          border-top-color: #06b6d4;
          border-radius: 50%;
          animation: spin 1s linear infinite;
        }

        @keyframes spin {
          to { transform: rotate(360deg); }
        }

        .map-legend {
          position: absolute;
          bottom: 20px;
          left: 20px;
          background: rgba(3, 7, 18, 0.85);
          backdrop-filter: blur(12px);
          padding: 16px 20px;
          border-radius: 14px;
          border: 1px solid rgba(255, 255, 255, 0.08);
          display: flex;
          flex-direction: column;
          gap: 12px;
          box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
        }

        .legend-item {
          display: flex;
          align-items: center;
          gap: 12px;
          font-size: 12px;
          color: #e2e8f0;
          font-weight: 500;
        }

        .legend-star {
          font-size: 14px;
          filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.6));
        }

        .legend-dot {
          width: 12px;
          height: 12px;
          border-radius: 50%;
          position: relative;
        }

        .legend-dot::after {
          content: '';
          position: absolute;
          inset: -3px;
          border-radius: 50%;
          background: inherit;
          opacity: 0.3;
          filter: blur(4px);
        }

        .legend-dot.hq {
          background: linear-gradient(135deg, #fb923c, #f97316);
          box-shadow: 0 0 12px rgba(249, 115, 22, 0.6);
        }

        .legend-dot.malaysia {
          background: linear-gradient(135deg, #22d3ee, #06b6d4);
          box-shadow: 0 0 12px rgba(6, 182, 212, 0.6);
        }

        .legend-dot.global {
          background: linear-gradient(135deg, #c084fc, #a855f7);
          box-shadow: 0 0 12px rgba(168, 85, 247, 0.6);
        }

        /* Map markers */
        .map-marker {
          cursor: pointer;
          position: relative;
        }

        .marker-dot {
          width: 10px;
          height: 10px;
          background: linear-gradient(135deg, #22d3ee, #06b6d4);
          border-radius: 50%;
          border: 2px solid rgba(255, 255, 255, 0.9);
          box-shadow: 0 0 12px rgba(6, 182, 212, 0.7);
          transition: all 0.3s ease;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .marker-inner {
          width: 3px;
          height: 3px;
          background: #fff;
          border-radius: 50%;
          opacity: 0.8;
        }

        .marker-dot:hover {
          transform: scale(1.4);
          box-shadow: 0 0 20px currentColor;
        }

        .marker-dot.malaysia {
          width: 8px;
          height: 8px;
          background: linear-gradient(135deg, #22d3ee, #06b6d4);
        }

        .marker-dot.hq {
          width: 18px;
          height: 18px;
          background: linear-gradient(135deg, #fbbf24, #f97316);
          border: 3px solid #fff;
          box-shadow: 0 0 25px rgba(249, 115, 22, 0.8);
        }

        .marker-dot.hq .marker-inner {
          width: 6px;
          height: 6px;
        }

        .marker-dot.global {
          width: 10px;
          height: 10px;
          border: 2px solid rgba(255, 255, 255, 0.9);
        }

        .marker-glow {
          position: absolute;
          width: 20px;
          height: 20px;
          border-radius: 50%;
          opacity: 0.3;
          filter: blur(6px);
          transform: translate(-5px, -5px);
          animation: glow-pulse 2s ease-in-out infinite;
        }

        @keyframes glow-pulse {
          0%, 100% { opacity: 0.3; transform: translate(-5px, -5px) scale(1); }
          50% { opacity: 0.5; transform: translate(-5px, -5px) scale(1.3); }
        }

        .marker-pulse {
          position: absolute;
          width: 40px;
          height: 40px;
          background: radial-gradient(circle, rgba(249, 115, 22, 0.4) 0%, transparent 70%);
          border-radius: 50%;
          transform: translate(-11px, -11px);
          animation: pulse 2s ease-out infinite;
        }

        .marker-pulse.delay {
          animation-delay: 1s;
        }

        @keyframes pulse {
          0% { transform: translate(-11px, -11px) scale(0.5); opacity: 1; }
          100% { transform: translate(-11px, -11px) scale(2.5); opacity: 0; }
        }

        .map-marker-hq {
          position: relative;
          z-index: 100;
          cursor: pointer;
        }

        .hq-star {
          position: relative;
          z-index: 2;
          filter: drop-shadow(0 2px 8px rgba(251, 191, 36, 0.8));
          animation: star-float 3s ease-in-out infinite;
        }

        @keyframes star-float {
          0%, 100% { transform: translateY(0) scale(1); }
          50% { transform: translateY(-3px) scale(1.1); }
        }

        .hq-glow {
          position: absolute;
          width: 60px;
          height: 60px;
          background: radial-gradient(circle, rgba(251, 191, 36, 0.7) 0%, rgba(251, 191, 36, 0) 70%);
          border-radius: 50%;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          animation: hq-pulse 2s ease-out infinite;
          z-index: 1;
        }

        @keyframes hq-pulse {
          0% { transform: translate(-50%, -50%) scale(0.8); opacity: 1; }
          100% { transform: translate(-50%, -50%) scale(2.5); opacity: 0; }
        }

        .hq-tag {
          position: absolute;
          top: -8px;
          left: 100%;
          margin-left: 4px;
          background: linear-gradient(135deg, #fbbf24, #f59e0b);
          color: #78350f;
          font-size: 10px;
          font-weight: 800;
          padding: 3px 8px;
          border-radius: 4px;
          white-space: nowrap;
          box-shadow: 0 2px 8px rgba(251, 191, 36, 0.5);
          letter-spacing: 0.5px;
          z-index: 3;
        }

        .hq-tag::before {
          content: '';
          position: absolute;
          left: -5px;
          top: 50%;
          transform: translateY(-50%);
          border: 5px solid transparent;
          border-right-color: #fbbf24;
        }

        .hq-label-tag {
          position: absolute;
          top: -8px;
          left: 20px;
          background: linear-gradient(135deg, #f97316, #ea580c);
          color: #fff;
          font-size: 9px;
          font-weight: 700;
          padding: 3px 6px;
          border-radius: 4px;
          white-space: nowrap;
          box-shadow: 0 2px 8px rgba(249, 115, 22, 0.4);
          letter-spacing: 0.5px;
          animation: float 3s ease-in-out infinite;
        }

        .hq-label-tag::before {
          content: '';
          position: absolute;
          left: -4px;
          top: 50%;
          transform: translateY(-50%);
          border: 4px solid transparent;
          border-right-color: #f97316;
        }

        @keyframes float {
          0%, 100% { transform: translateY(0); }
          50% { transform: translateY(-3px); }
        }

        .map-popup {
          padding: 6px 2px;
          font-size: 13px;
          color: #1e293b;
          font-weight: 500;
        }

        .map-popup span {
          font-size: 11px;
          color: #64748b;
          font-weight: 400;
        }

        .map-popup .hq-label {
          color: #f97316;
          font-weight: 600;
        }

        .map-stats {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 24px;
          margin-top: 40px;
          padding: 36px;
          background: linear-gradient(135deg, rgba(6, 182, 212, 0.05) 0%, rgba(168, 85, 247, 0.05) 100%);
          border-radius: 20px;
          border: 1px solid rgba(255, 255, 255, 0.06);
          position: relative;
          overflow: hidden;
        }

        .map-stats::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          height: 1px;
          background: linear-gradient(90deg, transparent, rgba(6, 182, 212, 0.4), rgba(168, 85, 247, 0.4), transparent);
        }

        .map-stat {
          text-align: center;
          position: relative;
        }

        .map-stat:not(:last-child)::after {
          content: '';
          position: absolute;
          right: -12px;
          top: 50%;
          transform: translateY(-50%);
          width: 1px;
          height: 60%;
          background: linear-gradient(180deg, transparent, rgba(255,255,255,0.1), transparent);
        }

        .stat-value {
          display: block;
          font-size: 42px;
          font-weight: 800;
          background: linear-gradient(135deg, #22d3ee 0%, #a78bfa 50%, #f472b6 100%);
          -webkit-background-clip: text;
          background-clip: text;
          -webkit-text-fill-color: transparent;
          margin-bottom: 8px;
          letter-spacing: -0.02em;
        }

        .stat-label {
          font-size: 14px;
          color: #94a3b8;
          font-weight: 500;
        }

        @media (max-width: 768px) {
          .map-coverage-section {
            padding: 60px 0;
          }

          .map-container {
            height: 420px;
          }

          .map-legend {
            bottom: 10px;
            left: 10px;
            padding: 12px 14px;
          }

          .map-stats {
            grid-template-columns: 1fr;
            gap: 24px;
            padding: 28px;
          }

          .map-stat:not(:last-child)::after {
            display: none;
          }

          .stat-value {
            font-size: 32px;
          }
        }

        @media (max-width: 500px) {
          .map-container {
            height: 350px;
            border-radius: 14px;
          }

          .legend-item {
            font-size: 11px;
          }
        }

        /* MapLibre popup styles */
        .maplibregl-popup-content {
          background: rgba(255, 255, 255, 0.98);
          border-radius: 10px;
          padding: 12px 16px;
          box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
          border: 1px solid rgba(0, 0, 0, 0.05);
        }

        .maplibregl-popup-anchor-bottom .maplibregl-popup-tip {
          border-top-color: rgba(255, 255, 255, 0.98);
        }

        .maplibregl-popup-anchor-top .maplibregl-popup-tip {
          border-bottom-color: rgba(255, 255, 255, 0.98);
        }

        .maplibregl-ctrl-attrib {
          display: none !important;
        }
      `}</style>
    </section>
  );
}

window.MapCoverage = MapCoverage;