 'use client';

import { useState } from 'react';
import Reveal from './Reveal'

export default function StreamingHeroSection() {
  const [email, setEmail] = useState('');

  const handleGetStarted = (e: React.FormEvent) => {
    e.preventDefault();
    // Aquí se implementará la lógica de registro
    console.log('Email:', email);
  };

  return (
    <section className="relative before:content-[''] before:absolute xl:before:-top-[30%] lg:before:-top-[50%] sm:before:-top-[80%] before:-top-[90%] before:-start-80 before:end-0 before:w-[140rem] before:h-[65rem] before:-rotate-12 before:bg-indigo-600/5 dark:before:bg-indigo-600/10 before:z-0 items-center overflow-hidden pt-32 md:pt-44 pb-16">
      <div className="container mx-auto px-4 relative z-10">
        <div className="grid grid-cols-1 text-center">
          {/* Content */}
          <div className="space-y-8">
            <Reveal durationMs={900} distance={32} threshold={0.06}>
              <h4 className="font-bold lg:leading-normal leading-normal text-4xl lg:text-5xl mb-5 text-slate-900 dark:text-white transition-colors duration-500">
                Transmite Multistreaming Profesional
              </h4>
            </Reveal>

            <Reveal durationMs={900} distance={20} threshold={0.06}>
              <p className="text-slate-400 dark:text-slate-500 text-lg max-w-xl mx-auto transition-colors duration-500">
                La plataforma todo-en-uno para creadores de contenido. Transmite a YouTube, Twitch, Facebook y más de 15 plataformas simultáneamente.
              </p>
            </Reveal>

            <Reveal durationMs={800} distance={16} threshold={0.06}>
              <div className="mt-6">
                <a href="/auth/register" className="py-2 px-5 inline-block font-semibold tracking-wide border align-middle duration-500 text-base text-center bg-indigo-600 hover:bg-indigo-700 border-indigo-600 hover:border-indigo-700 text-white rounded-md transition-all">
                  Comenzar Gratis
                </a>
                <p className="text-slate-400 dark:text-slate-500 text-sm mt-3 transition-colors duration-500">Sin tarjeta de crédito. Prueba gratis por 14 días</p>
              </div>
            </Reveal>
          </div>

          {/* Studio Preview Mockup */}
          <div className="relative mt-8 z-20">
            <div className="bg-gray-900/50 dark:bg-slate-800/50 backdrop-blur-xl rounded-3xl border border-gray-700 dark:border-slate-600 shadow-2xl overflow-hidden transform hover:scale-105 transition-transform duration-500 max-w-4xl mx-auto">
              {/* Browser Bar */}
              <div className="bg-gray-800 dark:bg-slate-700 px-4 py-3 flex items-center gap-2 border-b border-gray-700 dark:border-slate-600">
                <div className="flex gap-2">
                  <div className="w-3 h-3 rounded-full bg-red-500"></div>
                  <div className="w-3 h-3 rounded-full bg-yellow-500"></div>
                  <div className="w-3 h-3 rounded-full bg-green-500"></div>
                </div>
                <div className="flex-1 text-center text-gray-400 text-sm">
                  studio.avanzacast.com
                </div>
              </div>

              {/* Video Preview */}
              <div className="aspect-video bg-gradient-to-br from-slate-900 to-slate-800 dark:from-slate-800 dark:to-slate-900 relative transition-colors duration-500">
                <div className="absolute inset-0 flex items-center justify-center">
                  <div className="text-center">
                    <div className="w-24 h-24 mx-auto mb-4 bg-gradient-to-br from-indigo-600 to-indigo-700 dark:from-indigo-500 dark:to-indigo-600 rounded-full flex items-center justify-center">
                      <svg className="w-12 h-12 text-white" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M2 6a2 2 0 012-2h6a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V6zM14.553 7.106A1 1 0 0014 8v4a1 1 0 00.553.894l2 1A1 1 0 0018 13V7a1 1 0 00-1.447-.894l-2 1z" />
                      </svg>
                    </div>
                    <p className="text-gray-400">Vista previa de tu transmisión</p>
                  </div>
                </div>

                {/* Live Indicator */}
                <div className="absolute top-4 left-4 flex items-center gap-2 bg-red-500 px-4 py-2 rounded-full">
                  <div className="w-2 h-2 rounded-full bg-white animate-pulse"></div>
                  <span className="text-white text-sm font-bold">EN VIVO</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Decorative Elements - Estilo index-saas.html */}
        <div className="bg-indigo-600 w-8 h-16 z-20 absolute start-2 lg:bottom-28 md:bottom-36 sm:bottom-40 bottom-16"></div>
        <div className="bg-indigo-600/20 dark:bg-indigo-600/40 w-8 h-16 z-20 absolute start-12 lg:bottom-32 md:bottom-40 sm:bottom-44 bottom-20 transition-colors duration-500"></div>

        <div className="bg-indigo-600/20 dark:bg-indigo-600/40 w-8 h-16 z-20 absolute end-12 xl:bottom-[420px] lg:bottom-[315px] md:bottom-[285px] sm:bottom-80 bottom-32 transition-colors duration-500"></div>
        <div className="bg-indigo-600 w-8 h-16 z-20 absolute end-2 xl:bottom-[440px] lg:bottom-[335px] md:bottom-[305px] sm:bottom-[340px] bottom-36"></div>
      </div>
    </section>
  );
}
