/* global React */
function Cobertura() {
  const zones = [
    { z: 'Málaga capital', km: '0 km' },
    { z: 'Pedregalejo · El Palo', km: '4 km' },
    { z: 'Teatinos · Universidad', km: '6 km' },
    { z: 'Limonar · Cerrado de Calderón', km: '3 km' },
    { z: 'Torremolinos', km: '12 km' },
    { z: 'Benalmádena', km: '18 km' },
    { z: 'Fuengirola · Mijas', km: '28 km' },
    { z: 'Rincón de la Victoria', km: '11 km' },
  ];
  // Approximate coordinates (relative to viewbox 100x100).
  // anchor + dx/dy colocan la etiqueta para evitar solapamientos.
  const points = [
    { x: 55, y: 50, label: 'Málaga',       anchor: 'start',  dx: 3,   dy: -1,  big: true },
    { x: 48, y: 38, label: 'Teatinos',     anchor: 'middle', dx: 0,   dy: -3.5 },
    { x: 60, y: 57, label: 'Limonar',      anchor: 'end',    dx: -3,  dy: 2.5 },
    { x: 70, y: 52, label: 'Pedregalejo',  anchor: 'start',  dx: 3,   dy: 2.8 },
    { x: 82, y: 46, label: 'Rincón',       anchor: 'end',    dx: -3,  dy: -1.5 },
    { x: 39, y: 62, label: 'Torremolinos', anchor: 'start',  dx: 3,   dy: 0.5 },
    { x: 27, y: 71, label: 'Benalmádena',  anchor: 'start',  dx: 3,   dy: 0.5 },
    { x: 15, y: 80, label: 'Fuengirola',   anchor: 'start',  dx: 3,   dy: 0.5 },
  ];

  return (
    <section id="cobertura">
      <div className="container">
        <div className="cobertura-grid">
          <div className="cobertura-text reveal">
            <Eyebrow>Cobertura</Eyebrow>
            <h2 className="headline" style={{ marginTop: 14 }}>Málaga capital<br />y Costa del Sol.</h2>
            <p className="subhead" style={{ marginTop: 18, maxWidth: '40ch' }}>
              Cubrimos prácticamente toda la costa de la provincia de Málaga, con base y foco en la capital. Almacén propio en el polígono San Luis y oficina-showroom en el Soho.
            </p>
            <ul className="cobertura-zones">
              {zones.map(z => (
                <li key={z.z}><span>{z.z}</span><span className="km">{z.km}</span></li>
              ))}
            </ul>
          </div>
          <div className="map-wrap reveal reveal-delay-1">
            <svg className="map-svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
              <defs>
                <linearGradient id="sea" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="0%" stopColor="var(--bg-alt)" />
                  <stop offset="100%" stopColor="var(--hairline-2)" />
                </linearGradient>
                {/* Área de cobertura centrada en Málaga capital */}
                <radialGradient id="cover" cx="50%" cy="50%" r="50%">
                  <stop offset="0%"  stopColor="var(--accent)" stopOpacity="0.22" />
                  <stop offset="55%" stopColor="var(--accent)" stopOpacity="0.10" />
                  <stop offset="100%" stopColor="var(--accent)" stopOpacity="0" />
                </radialGradient>
              </defs>
              {/* Sea background */}
              <rect width="100" height="100" fill="var(--bg-alt)" />
              {/* Approximate Málaga coastline (smooth, toda la provincia) */}
              <path
                d="M 0 36 Q 18 30 38 40 Q 55 49 74 49 Q 90 49 100 55 L 100 100 L 0 100 Z"
                fill="var(--hairline-2)"
                stroke="var(--hairline)"
                strokeWidth="0.4"
              />
              {/* Coastal road, edge to edge (toda la costa) */}
              <path d="M 2 88 Q 30 70 55 50 Q 72 38 98 44" stroke="var(--hairline)" strokeWidth="0.4" fill="none" strokeDasharray="1.4 1.6" strokeLinecap="round" />
              {/* Foco de cobertura sobre Málaga capital */}
              <circle cx="55" cy="50" r="46" fill="url(#cover)" />
              <circle cx="55" cy="50" r="30" fill="none" stroke="var(--accent)" strokeWidth="0.35" strokeDasharray="1.6 1.8" opacity="0.4" />
              {/* Markers */}
              {points.map((p, i) => (
                <g key={i}>
                  <circle cx={p.x} cy={p.y} r={p.big ? 3.6 : 2.8} className="map-pulse" />
                  <circle cx={p.x} cy={p.y} r={p.big ? 2 : 1.4} className="map-dot" />
                  <text
                    x={p.x + (p.dx || 0)}
                    y={p.y + (p.dy || 0)}
                    fontSize={p.big ? 2.6 : 2.2}
                    textAnchor={p.anchor || 'start'}
                    dominantBaseline="middle"
                    className="map-label"
                    fontWeight={p.big ? 700 : 500}
                  >{p.label}</text>
                </g>
              ))}
            </svg>
            <span className="ph-label">Cobertura · provincia de Málaga · foco en la capital</span>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Cobertura = Cobertura;