interface ResultProps {
  aprobado: boolean
  sinIntentos: boolean
  onReintentar: () => void
}

export default function Result(_props: ResultProps) {
  return (
    <div className="flex w-full h-full">
      {/* ─── Columna izquierda 50% ─── */}
      <div className="flex flex-col justify-center" style={{ width: '50%', paddingRight: '20px' }}>
        <div style={{ position: 'relative' }}>
          {/* Cabecera roja flotante */}
          <div
            className="px-8 py-6"
            style={{
              backgroundColor: '#ed1f24',
              borderRadius: '25px',
              width: '90%',
              position: 'absolute',
              top: '-55px',
              left: '50%',
              transform: 'translateX(-50%)',
              zIndex: 10,
            }}
          >
            <p
              className="font-bold text-white text-center"
              style={{ fontSize: '28px', lineHeight: '1.4' }}
            >
              ¡Y con este último giro cerramos nuestra ruleta del día de hoy!
            </p>
          </div>

          {/* Contenido degradado */}
          <div
            className="px-10 py-8"
            style={{
              background: 'linear-gradient(180deg, #ffffff 0%, #d8dcec 100%)',
              borderRadius: '0px 25px 25px 0px',
              boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
              opacity: 0.88,
              paddingTop: '95px',
            }}
          >
            <p
              className="text-gray-700 mb-6"
              style={{ fontSize: '22px', lineHeight: '1.6' }}
            >
              Recorrimos desde la gestión del agua y los residuos, hasta la transición hacia energías más limpias y la movilidad del futuro. Más allá de las respuestas correctas o los puntos, lo verdaderamente importante es que la sostenibilidad no se queda en esta pantalla: se construye con las decisiones que tomamos todos los días.
            </p>
            <p
              className="text-gray-700"
              style={{ fontSize: '22px', lineHeight: '1.6', fontWeight: '600' }}
            >
              Muchísimas gracias a todos por su participación, su energía y sus aportaciones.
            </p>
          </div>
        </div>
      </div>

      {/* ─── Columna derecha 50% ─── */}
      <div className="flex flex-col items-center justify-center" style={{ width: '50%', paddingLeft: '20px' }}>
        <img
          src="./img/03.png"
          alt="Resultado"
          className="object-contain mb-8"
          style={{ width: '80%', height: 'auto' }}
        />

        <div
          className="px-8 py-6 rounded-xl text-center"
          style={{
            backgroundColor: '#383838',
            width: '90%',
          }}
        >
          <p
            className="font-bold text-white"
            style={{ fontSize: '22px', lineHeight: '1.5' }}
          >
            ¡Nos llevamos grandes aprendizajes para seguir cuidando el planeta juntos!
          </p>
        </div>
      </div>
    </div>
  )
}
