// Icons & small components for Copia de llaves landing
const { useState, useEffect, useRef } = React;

const Icon = ({ name, size = 24, stroke = 1.6 }) => {
  const common = {
    width: size, height: size, viewBox: "0 0 24 24",
    fill: "none", stroke: "currentColor", strokeWidth: stroke,
    strokeLinecap: "round", strokeLinejoin: "round",
  };
  switch (name) {
    case "phone": return (
      <svg {...common}><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
    );
    case "wa": return (
      <svg {...common}><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8z"/></svg>
    );
    case "key": return (
      <svg {...common}><circle cx="8" cy="15" r="4"/><path d="M10.85 12.15 19 4"/><path d="m18 5 3 3"/><path d="m15 8 3 3"/></svg>
    );
    case "bolt": return (
      <svg {...common}><path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/></svg>
    );
    case "clock": return (
      <svg {...common}><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
    );
    case "pin": return (
      <svg {...common}><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
    );
    case "remote": return (
      <svg {...common}><rect x="6" y="3" width="12" height="18" rx="3"/><circle cx="10" cy="9" r="1"/><circle cx="14" cy="9" r="1"/><path d="M10 14h4"/><path d="M12 18v.01"/></svg>
    );
    case "lost": return (
      <svg {...common}><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><circle cx="12" cy="12" r="10"/><path d="M12 17h.01"/></svg>
    );
    case "unlock": return (
      <svg {...common}><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 9.9-1"/></svg>
    );
    case "wrench": return (
      <svg {...common}><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>
    );
    case "home": return (
      <svg {...common}><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><path d="M9 22V12h6v10"/></svg>
    );
    case "arrow": return (
      <svg {...common}><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
    );
    case "left": return (
      <svg {...common}><path d="m15 18-6-6 6-6"/></svg>
    );
    case "right": return (
      <svg {...common}><path d="m9 18 6-6-6-6"/></svg>
    );
    case "google": return (
      <svg width={size} height={size} viewBox="0 0 24 24"><path fill="#FFC107" d="M21.8 10.2H21V10H12v4h5.6c-.8 2.3-3 4-5.6 4-3.3 0-6-2.7-6-6s2.7-6 6-6c1.5 0 2.9.6 4 1.5l2.8-2.8C16.9 3 14.6 2 12 2 6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10c0-.7-.1-1.3-.2-1.8z"/><path fill="#FF3D00" d="m3.2 7.3 3.3 2.4C7.4 7.8 9.6 6 12 6c1.5 0 2.9.6 4 1.5l2.8-2.8C16.9 3 14.6 2 12 2 8.1 2 4.7 4.1 3.2 7.3z"/><path fill="#4CAF50" d="M12 22c2.6 0 4.9-1 6.6-2.6l-3-2.5c-1 .7-2.2 1.1-3.6 1.1-2.6 0-4.8-1.7-5.6-4l-3.3 2.5C4.6 19.8 8 22 12 22z"/><path fill="#1976D2" d="M21.8 10.2H21V10H12v4h5.6c-.4 1.1-1.1 2-2 2.7l3 2.5c-.2.2 3.2-2.3 3.2-7.2 0-.7-.1-1.3-.2-1.8z"/></svg>
    );
    case "spark": return (
      <svg {...common}><path d="m12 3-1.6 5.4L5 10l5.4 1.6L12 17l1.6-5.4L19 10l-5.4-1.6z"/></svg>
    );
    default: return null;
  }
};

// Animated key SVG that rotates with scroll
const ScrollKey = ({ rotation }) => (
  <svg className="hero-key" viewBox="0 0 200 380" style={{ transform: `rotate(${rotation}deg)` }}>
    <defs>
      <linearGradient id="keygrad" x1="0" y1="0" x2="1" y2="1">
        <stop offset="0%" stopColor="#2A2F38"/>
        <stop offset="50%" stopColor="#0E0F12"/>
        <stop offset="100%" stopColor="#1F232A"/>
      </linearGradient>
      <linearGradient id="metalgrad" x1="0" y1="0" x2="1" y2="0">
        <stop offset="0%" stopColor="#7C8390"/>
        <stop offset="50%" stopColor="#D6DAE0"/>
        <stop offset="100%" stopColor="#5A606C"/>
      </linearGradient>
    </defs>
    {/* Key fob (top) */}
    <rect x="40" y="20" width="120" height="180" rx="28" fill="url(#keygrad)" stroke="#2A2F38" strokeWidth="2"/>
    {/* Key fob highlight */}
    <rect x="48" y="28" width="104" height="8" rx="4" fill="rgba(255,255,255,0.06)"/>
    {/* Buttons */}
    <rect x="64" y="62" width="72" height="34" rx="10" fill="#0E0F12" stroke="#2A2F38"/>
    <rect x="64" y="106" width="72" height="34" rx="10" fill="#0E0F12" stroke="#2A2F38"/>
    <rect x="64" y="150" width="72" height="34" rx="10" fill="#F5C518"/>
    {/* Lock icons on buttons */}
    <text x="100" y="85" textAnchor="middle" fontSize="14" fill="#8B8F98" fontFamily="monospace">LOCK</text>
    <text x="100" y="129" textAnchor="middle" fontSize="14" fill="#8B8F98" fontFamily="monospace">UNLK</text>
    <text x="100" y="173" textAnchor="middle" fontSize="14" fill="#0E0F12" fontFamily="monospace" fontWeight="700">SOS</text>
    {/* Key blade (bottom) */}
    <rect x="92" y="200" width="16" height="160" fill="url(#metalgrad)"/>
    <path d="M92 360 L100 376 L108 360 Z" fill="url(#metalgrad)"/>
    {/* Key teeth */}
    <path d="M108 220 L120 226 L108 232 Z" fill="url(#metalgrad)"/>
    <path d="M108 250 L124 256 L108 262 Z" fill="url(#metalgrad)"/>
    <path d="M108 280 L118 286 L108 292 Z" fill="url(#metalgrad)"/>
    <path d="M108 310 L122 316 L108 322 Z" fill="url(#metalgrad)"/>
    {/* Hole at top */}
    <circle cx="100" cy="46" r="6" fill="#0E0F12" stroke="#2A2F38"/>
  </svg>
);

// Stylized Castilla-La Mancha map with pins
const ServiceMap = () => {
  // Approx coordinates within a viewBox (relative; not to scale)
  const places = [
    { name: "La Solana", x: 480, y: 420, home: true },
    { name: "Manzanares", x: 450, y: 400 },
    { name: "Valdepeñas", x: 470, y: 480 },
    { name: "Tomelloso", x: 540, y: 360 },
    { name: "Alcázar", x: 530, y: 280 },
    { name: "Daimiel", x: 380, y: 380 },
    { name: "Almagro", x: 360, y: 460 },
    { name: "Ciudad Real", x: 320, y: 440 },
    { name: "Puertollano", x: 310, y: 540 },
    { name: "Miguelturra", x: 330, y: 430 },
    { name: "Bolaños", x: 380, y: 450 },
    { name: "Membrilla", x: 460, y: 440 },
    { name: "Argamasilla", x: 510, y: 380 },
    { name: "Campo de Criptana", x: 540, y: 300 },
    { name: "Herencia", x: 500, y: 250 },
    { name: "Socuéllamos", x: 600, y: 320 },
    { name: "Consuegra", x: 460, y: 220 },
    { name: "Madridejos", x: 440, y: 200 },
    { name: "Villarrobledo", x: 660, y: 320 },
    { name: "La Roda", x: 720, y: 360 },
  ];

  return (
    <svg viewBox="200 150 600 450" preserveAspectRatio="xMidYMid meet">
      <defs>
        <pattern id="dots" width="14" height="14" patternUnits="userSpaceOnUse">
          <circle cx="2" cy="2" r="0.7" fill="#2A2F38"/>
        </pattern>
        <radialGradient id="haloA" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor="#F5C518" stopOpacity="0.35"/>
          <stop offset="100%" stopColor="#F5C518" stopOpacity="0"/>
        </radialGradient>
      </defs>
      <rect x="200" y="150" width="600" height="450" fill="url(#dots)"/>
      {/* Stylized region outline */}
      <path
        d="M250 250 Q280 180 380 180 Q470 160 540 200 Q650 200 720 240 Q780 290 760 380 Q770 470 690 530 Q580 580 470 550 Q360 560 280 510 Q220 460 230 380 Q220 310 250 250 Z"
        fill="rgba(245, 197, 24, 0.03)"
        stroke="#2A2F38"
        strokeWidth="1.5"
        strokeDasharray="4 4"
      />
      {/* Halo on home */}
      <circle cx="480" cy="420" r="60" fill="url(#haloA)"/>
      {/* Connector lines from home to others */}
      {places.filter(p => !p.home).slice(0, 10).map((p, i) => (
        <line key={i} x1="480" y1="420" x2={p.x} y2={p.y} stroke="#2A2F38" strokeWidth="1" strokeDasharray="2 4"/>
      ))}
      {/* Pins */}
      {places.map((p) => (
        <g key={p.name}>
          <circle
            cx={p.x} cy={p.y} r={p.home ? 7 : 4}
            className={`map-pin ${p.home ? "home" : ""}`}
          />
          {p.home && (
            <>
              <circle cx={p.x} cy={p.y} r="14" fill="none" stroke="#F5C518" strokeWidth="1.2" opacity="0.5">
                <animate attributeName="r" from="8" to="22" dur="2s" repeatCount="indefinite"/>
                <animate attributeName="opacity" from="0.6" to="0" dur="2s" repeatCount="indefinite"/>
              </circle>
            </>
          )}
          {(p.home || ["Valdepeñas","Tomelloso","Alcázar","Ciudad Real","Daimiel","Puertollano","Villarrobledo"].includes(p.name)) && (
            <text x={p.x + 10} y={p.y + 4} className={`map-label ${p.home ? "home" : ""}`}>
              {p.name}
            </text>
          )}
        </g>
      ))}
    </svg>
  );
};

Object.assign(window, { Icon, ScrollKey, ServiceMap });