import { useAudio } from '../../hooks/useAudio'

interface CoverProps {
  onStart: () => void
}

export default function Cover({ onStart }: CoverProps) {
  const { sounds } = useAudio()

  function handleStart() {
    sounds.click?.play()
    onStart()
  }
  return (
    <div className="flex flex-row items-center justify-center text-center gap-10 py-10 w-full h-full">

      {/* Imagen izquierda */}
      <div className="flex-1 flex justify-center">
        <img
          src="./img/02.png"
          alt="Ruleta Interactiva"
          className="object-contain drop-shadow-xl"
          style={{ width: '80%', height: 'auto' }}
        />
      </div>

      {/* Texto derecho */}
      <div className="flex-1 flex flex-col justify-center gap-0 text-center" style={{ marginRight: '45px' }}>

        {/* Soporte con degradado */}
        <div
          className="rounded-3xl p-8 shadow-lg"
          style={{ background: 'linear-gradient(180deg, #ffffff 0%, #d8dcec 100%)' }}
        >
          <p className="text-gray-700 leading-relaxed" style={{ fontSize: '22px' }}>
            Las reglas son muy sencillas: la ruleta girará, la suerte elegirá una categoría
            y te tocará responder una pregunta. Contarás con 30 segundos para responder
            cada una.
          </p>
          <p className="text-gray-700 leading-relaxed mt-4" style={{ fontSize: '22px' }}>
            No se trata de encontrar la respuesta perfecta, sino de reflexionar y responder
            desde tu experiencia y perspectiva. ¡Prepárate para poner a prueba tus
            conocimientos y disfrutar de la dinámica!
          </p>
        </div>

        {/* Soporte negro */}
        <div
          className="py-5 px-8 shadow-lg flex items-center justify-center"
          style={{ backgroundColor: '#383838',
            width: '65%',
            alignSelf: 'center',
            borderRadius: '0px 0px 25px 25px'
          }}
        >
          <h1 className="text-white font-bold" style={{ fontSize: '32px' }}>
            ¡y que empiece a girar!
          </h1>
        </div>

        <div style={{ display: 'flex', justifyContent: 'center', marginTop: '25px' }}>
          <button
            onClick={handleStart}
            className="font-semibold transition-all duration-200 cursor-pointer hover:scale-105 hover:brightness-110"
            style={{
              backgroundColor: '#ed1f24',
              color: '#ffffff',
              border: '5px solid #ffffff',
              padding: '14px 28px',
              fontSize: '30px',
              borderRadius: '50px',
              fontWeight: 'bold',
              boxShadow: '0 4px 12px rgba(0, 0, 0, 0.85)',
            }}
          >
            Comenzar
          </button>
        </div>
      </div>

    </div>
  )
}
