import CleopatraVoiceWidget from "@/app/components/CleopatraVoiceWidget";

export default function CleopatraVoicePage() {
  return (
    <main className="min-h-screen bg-gradient-to-br from-slate-950 via-purple-950 to-slate-950 py-12 px-4">
      <div className="max-w-4xl mx-auto">
        <div className="text-center mb-8">
          <h1 className="text-4xl font-bold text-white mb-2">
            👑 Cleopatra Voice AI
          </h1>
          <p className="text-purple-300">
            Premium Voice Agent - Built for Human-Like Conversations
          </p>
        </div>
        
        <div className="grid md:grid-cols-2 gap-8 mb-12">
          <div className="bg-white/5 backdrop-blur rounded-2xl p-6 border border-white/10">
            <h2 className="text-xl font-bold text-white mb-4">🎤 Características</h2>
            <ul className="space-y-3 text-purple-200">
              <li className="flex items-center gap-2">
                <span className="text-green-400">✓</span>
                Respuesta menos de 1 segundo
              </li>
              <li className="flex items-center gap-2">
                <span className="text-green-400">✓</span>
                Detección de voz (VAD)
              </li>
              <li className="flex items-center gap-2">
                <span className="text-green-400">✓</span>
                Palabras de relleno naturales
              </li>
              <li className="flex items-center gap-2">
                <span className="text-green-400">✓</span>
                Manejo de interrupciones
              </li>
              <li className="flex items-center gap-2">
                <span className="text-green-400">✓</span>
                Multilingüe
              </li>
            </ul>
          </div>
          
          <div className="bg-white/5 backdrop-blur rounded-2xl p-6 border border-white/10">
            <h2 className="text-xl font-bold text-white mb-4">🧠 Tecnología</h2>
            <ul className="space-y-3 text-purple-200">
              <li className="flex items-center gap-2">
                <span className="text-blue-400">●</span>
                STT: Whisper (preciso)
              </li>
              <li className="flex items-center gap-2">
                <span className="text-blue-400">●</span>
                LLM: MiniMax M2.7
              </li>
              <li className="flex items-center gap-2">
                <span className="text-blue-400">●</span>
                TTS: ElevenLabs (75ms)
              </li>
              <li className="flex items-center gap-2">
                <span className="text-blue-400">●</span>
                Streaming de audio
              </li>
              <li className="flex items-center gap-2">
                <span className="text-blue-400">●</span>
                Personalidad Cleopatra
              </li>
            </ul>
          </div>
        </div>
        
        <div className="mb-8">
          <CleopatraVoiceWidget />
        </div>
        
        <div className="text-center">
          <p className="text-purple-400 text-sm">
            🚀 Construido por Horus + Cleopatra | HostPioneers
          </p>
        </div>
      </div>
    </main>
  );
}