/* ─── SVG de Agua ──────────────────────────────────── */
function IconoAgua() {
  return (
    <svg viewBox="0 0 120 120" width="105" height="105" className="transition-transform duration-300 group-hover:scale-110">
      {/* Gota de agua */}
      <path
        d="M60 15 C60 15 30 55 30 75 C30 91.6 43.4 105 60 105 C76.6 105 90 91.6 90 75 C90 55 60 15 60 15Z"
        fill="#3B82F6"
        opacity="0.85"
      />
      {/* Brillo */}
      <ellipse cx="50" cy="60" rx="10" ry="16" fill="white" opacity="0.3" transform="rotate(-15 50 60)" />
      {/* Grifo simplificado arriba */}
      <rect x="52" y="4" width="16" height="18" rx="6" fill="#64748B" />
      <rect x="48" y="16" width="24" height="8" rx="3" fill="#64748B" />
      <circle cx="60" cy="8" r="5" fill="#3B82F6" />
    </svg>
  )
}

/* ─── SVG de Residuos y Circularidad ───────────────── */
function IconoResiduos() {
  return (
    <svg viewBox="0 0 120 120" width="105" height="105" className="transition-transform duration-300 group-hover:scale-110">
      {/* Contenedor de reciclaje */}
      <rect x="30" y="50" width="60" height="55" rx="5" fill="#16A34A" />
      <rect x="32" y="52" width="56" height="10" rx="3" fill="#15803D" />
      <line x1="35" y1="55" x2="85" y2="55" stroke="#86EFAC" strokeWidth="3" strokeLinecap="round" />
      <line x1="35" y1="62" x2="85" y2="62" stroke="#86EFAC" strokeWidth="3" strokeLinecap="round" />
      <line x1="35" y1="69" x2="85" y2="69" stroke="#86EFAC" strokeWidth="3" strokeLinecap="round" />
      {/* Símbolo de reciclaje ♻ */}
      <g transform="translate(60, 32) scale(0.55)">
        <path d="M0-28 L-24 14 L-8 14 L-8 28 L8 28 L8 14 L24 14 Z"
          fill="none" stroke="#16A34A" strokeWidth="6" strokeLinejoin="round" />
        <path d="M24-14 L0-42 L-24-14 L-10-6 L-2-20 L6-6 Z"
          fill="none" stroke="#16A34A" strokeWidth="6" strokeLinejoin="round"
          transform="rotate(120)" style={{ transformOrigin: '0 0' }} />
        <path d="M-24-14 L0-42 L24-14 L10-6 L2-20 L-6-6 Z"
          fill="none" stroke="#16A34A" strokeWidth="6" strokeLinejoin="round"
          transform="rotate(240)" style={{ transformOrigin: '0 0' }} />
      </g>
    </svg>
  )
}

/* ─── SVG de Energía ───────────────────────────────── */
function IconoEnergia() {
  return (
    <svg viewBox="0 0 120 120" width="105" height="105" className="transition-transform duration-300 group-hover:scale-110">
      {/* Sol */}
      <circle cx="85" cy="20" r="12" fill="#FACC15" />
      {[0, 45, 90, 135, 180, 225, 270, 315].map((angle, i) => (
        <line key={i}
          x1={85 + 8 * Math.cos(angle * Math.PI / 180)}
          y1={20 + 8 * Math.sin(angle * Math.PI / 180)}
          x2={85 + 16 * Math.cos(angle * Math.PI / 180)}
          y2={20 + 16 * Math.sin(angle * Math.PI / 180)}
          stroke="#FACC15" strokeWidth="2.5" strokeLinecap="round" />
      ))}
      {/* Colinas verdes */}
      <ellipse cx="35" cy="85" rx="42" ry="28" fill="#22C55E" opacity="0.8" />
      <ellipse cx="75" cy="90" rx="38" ry="22" fill="#16A34A" opacity="0.7" />
      {/* Aerogenerador */}
      <rect x="32" y="38" width="4" height="40" rx="2" fill="#94A3B8" />
      <g transform="translate(34, 38)">
        <rect x="-2" y="-28" width="4" height="27" rx="2" fill="#CBD5E1" transform="rotate(0)" />
        <rect x="-2" y="-28" width="4" height="27" rx="2" fill="#CBD5E1" transform="rotate(120)" />
        <rect x="-2" y="-28" width="4" height="27" rx="2" fill="#CBD5E1" transform="rotate(240)" />
        <circle cx="0" cy="0" r="4" fill="#64748B" />
      </g>
      {/* Panel solar */}
      <rect x="62" y="65" width="28" height="18" rx="2" fill="#3B82F6" opacity="0.8" transform="rotate(-8 76 74)" />
      <line x1="68" y1="72" x2="84" y2="70" stroke="#BFDBFE" strokeWidth="1" />
      <line x1="69" y1="76" x2="85" y2="74" stroke="#BFDBFE" strokeWidth="1" />
      <line x1="70" y1="80" x2="86" y2="78" stroke="#BFDBFE" strokeWidth="1" />
    </svg>
  )
}

/* ─── SVG de Electromovilidad ──────────────────────── */
function IconoElectromovilidad() {
  return (
    <svg viewBox="0 0 120 120" width="105" height="105" className="transition-transform duration-300 group-hover:scale-110">
      {/* Carretera */}
      <rect x="5" y="78" width="110" height="6" rx="3" fill="#CBD5E1" />
      <line x1="20" y1="81" x2="40" y2="81" stroke="white" strokeWidth="2" strokeDasharray="6,4" />
      <line x1="55" y1="81" x2="75" y2="81" stroke="white" strokeWidth="2" strokeDasharray="6,4" />
      <line x1="90" y1="81" x2="105" y2="81" stroke="white" strokeWidth="2" strokeDasharray="6,4" />
      {/* Coche eléctrico azul */}
      <g transform="translate(45, 50)">
        {/* Carrocería */}
        <rect x="0" y="6" width="50" height="18" rx="8" fill="#3B82F6" />
        {/* Techo / cabina */}
        <path d="M12 6 L18 -6 L36 -6 L42 6 Z" fill="#3B82F6" />
        {/* Ventanas */}
        <path d="M14 4 L19 -4 L25 -4 L25 4 Z" fill="#BFDBFE" />
        <path d="M27 -4 L34 -4 L39 4 L27 4 Z" fill="#BFDBFE" />
        {/* Ruedas */}
        <circle cx="12" cy="24" r="6" fill="#374151" />
        <circle cx="12" cy="24" r="2.5" fill="#9CA3AF" />
        <circle cx="38" cy="24" r="6" fill="#374151" />
        <circle cx="38" cy="24" r="2.5" fill="#9CA3AF" />
        {/* Faro */}
        <rect x="48" y="14" width="3" height="5" rx="1" fill="#FACC15" />
      </g>
      {/* Cargador / estación */}
      <rect x="8" y="48" width="8" height="30" rx="3" fill="#64748B" />
      <rect x="6" y="44" width="12" height="6" rx="2" fill="#475569" />
      {/* Cable */}
      <path d="M20 48 Q28 40 42 52" fill="none" stroke="#FACC15" strokeWidth="2.5" strokeLinecap="round" />
      {/* Indicador verde */}
      <circle cx="12" cy="52" r="2" fill="#22C55E" />
      {/* Rayo */}
      <path d="M10 38 L7 42 L11 42 L9 46 L14 40 L10 40 Z" fill="#FACC15" transform="scale(0.7) translate(12, 14)" />
    </svg>
  )
}

/* ─── Datos de categorías ──────────────────────────── */
const CATEGORIAS = [
  { id: 'agua', nombre: 'Agua', Icono: IconoAgua },
  { id: 'residuos', nombre: 'Residuos y', nombre2: 'Circularidad', Icono: IconoResiduos },
  { id: 'energia', nombre: 'Energía', Icono: IconoEnergia },
  { id: 'electromovilidad', nombre: 'Electromovilidad', nombre2: 'y Transporte', nombre3: 'Sostenible', Icono: IconoElectromovilidad },
]

export default function Intro() {
  return (
    <div className="relative w-full h-full flex flex-col">

      {/* ─── Contenido scrolleable ──────────────────── */}
      <div className="relative z-10 flex w-full flex-1 overflow-y-auto px-16 pb-6">

        {/* ─── Columna izquierda (60%): bienvenida ───────── */}
        <div className="flex flex-col items-start justify-center" style={{ width: '65%' }}>
          <h1 style={{ color: '#000000', fontSize: '105px', fontWeight: 'bold', lineHeight: '1.1', textAlign: 'center', width: '100%' }}>¡BIENVENIDOS!</h1>
          <img src="./img/01.png" alt="Logo Ruleta" style={{ marginTop: '20px', width: '70%', height: 'auto' }} />
        </div>

        {/* ─── Columna derecha (40%): texto ─────────── */}
        <div className="flex flex-col justify-center" style={{ width: '35%', paddingRight: '20px' }}>
          <div className="relative z-10 w-full bg-transparent rounded-3xl p-10" style={{top: '-10%'}}>
            {/* Texto introductorio */}
            <p className="text-gray-700 leading-relaxed mb-8" style={{ fontSize: '22px' }}>
              Hoy vamos a poner a prueba nuestros conocimientos y a reflexionar juntos sobre
              cómo nuestras acciones impactan el planeta. En esta ruleta tenemos{' '}
              <strong>4 ejes fundamentales para el futuro:</strong>
            </p>

            {/* Lista de ejes con imágenes */}
            <div className="flex flex-col gap-5">
              {CATEGORIAS.map((cat, i) => {
                const imagenes = ['agua.png', 'residuos.png', 'energia.png', 'movilidad.png']
                return (
                  <div key={cat.id} className="flex items-center gap-4">
                    <img
                      src={`./img/${imagenes[i]}`}
                      alt={cat.nombre}
                      className="shrink-0 object-contain"
                      style={{ width: '75px', height: '78px' }}
                    />
                    <div>
                      <strong className="text-gray-800" style={{ fontSize: '22px' }}>
                        {cat.nombre}
                        {cat.nombre2 ? ` ${cat.nombre2}` : ''}
                        {cat.nombre3 ? ` ${cat.nombre3}` : ''}
                      </strong>
                    </div>
                  </div>
                )
              })}
            </div>
          </div>
        </div>

      </div>
    </div>
  )
}
