/**
 * AvanzaCast Landing Page - Modern SaaS Style
 * Basado en Techwind Modern SaaS Template
 * Enfocado en streaming multiplatforma y broadcasting profesional
 */

'use client'

import { useState } from 'react'

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

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    console.log('Email submitted:', email)
  }

  return (
    <div className="min-h-screen font-nunito">
      {/* Hero Section - Modern SaaS Style */}
      <section className="relative w-full py-36 overflow-hidden bg-gradient-to-b to-transparent from-indigo-600/20 dark:from-indigo-600/40">
        <div className="container mx-auto px-4 relative">
          <div className="relative grid md:grid-cols-12 grid-cols-1 items-center mt-10 gap-[30px]">
            <div className="md:col-span-6">
              <div className="md:me-8">
                <h4 className="font-bold lg:leading-normal leading-normal text-4xl lg:text-5xl mb-5 text-black dark:text-white">
                  La forma más fácil de <span className="before:block before:absolute before:-inset-1 before:-skew-y-3 before:bg-indigo-600 relative inline-block"><span className="relative text-white">transmitir</span></span> a múltiples plataformas
                </h4>
                <p className="text-slate-400 text-lg max-w-xl">
                  Lanza tu transmisión en vivo a YouTube, Twitch, Facebook, LinkedIn y más. Todo desde un solo lugar con calidad profesional.
                </p>

                <div className="subcribe-form mt-6 mb-3">
                  <form className="relative max-w-xl" onSubmit={handleSubmit}>
                    <input
                      type="email"
                      id="subcribe"
                      name="email"
                      value={email}
                      onChange={(e) => setEmail(e.target.value)}
                      className="py-4 pe-40 ps-6 w-full h-[50px] outline-none text-black dark:text-white rounded-full bg-white dark:bg-slate-900 shadow dark:shadow-gray-800"
                      placeholder="Tu Email..."
                      required
                    />
                    <button
                      type="submit"
                      className="py-2 px-5 inline-block font-semibold tracking-wide align-middle duration-500 text-base text-center absolute top-[2px] end-[3px] h-[46px] bg-indigo-600 hover:bg-indigo-700 border border-indigo-600 hover:border-indigo-700 text-white rounded-full"
                    >
                      Prueba Gratis <i className="uil uil-arrow-right"></i>
                    </button>
                  </form>
                </div>

                <span className="text-slate-400 font-medium">
                  ¿Buscas ayuda? <a href="#" className="text-indigo-600">Contáctanos</a>
                </span>
              </div>
            </div>

            <div className="md:col-span-6">
              <div className="relative">
                <div className="relative rounded-xl overflow-hidden shadow-md dark:shadow-gray-800">
                  <div className="w-full py-72 bg-gradient-to-br from-slate-900 to-slate-800 bg-cover bg-no-repeat bg-top flex items-center justify-center">
                    {/* Studio mockup */}
                    <div className="text-center">
                      <div className="inline-flex items-center gap-2 px-4 py-2 bg-red-600 rounded-full mb-4 animate-pulse">
                        <span className="w-3 h-3 bg-white rounded-full animate-ping"></span>
                        <span className="text-white font-semibold">● EN VIVO</span>
                      </div>
                      <p className="text-white/60 text-sm">Estudio Virtual en el Navegador</p>
                    </div>
                  </div>
                </div>

                {/* Floating card - Viewer stats */}
                <div className="absolute flex justify-between items-center md:bottom-10 bottom-5 md:-start-16 p-4 rounded-lg shadow-md dark:shadow-gray-800 bg-white dark:bg-slate-900 w-60 m-3">
                  <div className="flex items-center">
                    <div className="flex items-center justify-center h-[65px] min-w-[65px] bg-indigo-600/5 text-indigo-600 text-center rounded-full me-3">
                      <i className="uil uil-users-alt text-3xl"></i>
                    </div>
                    <div className="flex-1">
                      <h6 className="text-slate-400">Espectadores</h6>
                      <p className="text-xl font-bold">2,847</p>
                    </div>
                  </div>
                  <span className="text-green-600"><i className="uil uil-arrow-up"></i> 12%</span>
                </div>

                {/* Floating card - Streaming progress */}
                <div className="absolute xl:top-20 top-40 xl:-end-20 lg:-end-10 -end-1 p-4 rounded-lg shadow-md dark:shadow-gray-800 bg-white dark:bg-slate-900 w-60 m-3">
                  <h5 className="text-xl font-semibold mb-3">Transmitiendo a 5 plataformas</h5>
                  <div className="flex justify-between mt-3 mb-2">
                    <span className="text-slate-400">En progreso</span>
                    <span className="text-slate-400">100%</span>
                  </div>
                  <div className="w-full bg-gray-100 dark:bg-gray-800 rounded-full h-[6px]">
                    <div className="bg-indigo-600 h-[6px] rounded-full" style={{width: '100%'}}></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Brand Section */}
      <section className="relative w-full md:pb-24 pb-16 overflow-hidden">
        <div className="container mx-auto px-4 relative">
          <div className="grid grid-cols-1 pb-8 text-center">
            <div className="flex items-center justify-center rounded-full mx-auto bg-gray-50 dark:bg-slate-800 shadow dark:shadow-gray-800 size-[110px]">
              <svg className="w-12 h-12 text-indigo-600" fill="currentColor" viewBox="0 0 24 24">
                <path d="M12 2L2 7v10c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-10-5zm0 18c-4.41 0-8-3.59-8-8V8.3l8-4.44 8 4.44V12c0 4.41-3.59 8-8 8z"/>
                <circle cx="12" cy="12" r="3"/>
              </svg>
            </div>
            <h3 className="mb-6 mt-8 md:text-4xl text-3xl md:leading-normal leading-normal font-bold">
              La mejor plataforma de streaming <br /> para crear contenido en <br /> 
              <span className="after:absolute after:end-0 after:start-0 after:bottom-1 after:lg:h-3 after:h-2 after:w-auto after:rounded-md after:bg-indigo-600/30 relative text-indigo-600">vivo profesional.</span>
            </h3>
            <p className="text-slate-400 max-w-xl mx-auto">
              Comienza a transmitir con AvanzaCast, la plataforma que puede ofrecerte todo lo necesario para generar audiencia, aumentar el tráfico y conectar con tu comunidad.
            </p>
          </div>

          {/* Video Preview Section */}
          <div className="grid mt-8">
            <div className="relative overflow-hidden rounded-lg shadow-md dark:shadow-gray-800 bg-gradient-to-br from-slate-900 to-slate-800">
              <div className="aspect-video flex items-center justify-center">
                {/* Video placeholder */}
                <div className="text-center">
                  <div className="inline-flex items-center gap-3 mb-4">
                    <div className="w-16 h-16 rounded-full bg-indigo-600/20 flex items-center justify-center animate-pulse">
                      <i className="uil uil-play text-3xl text-indigo-600"></i>
                    </div>
                  </div>
                  <p className="text-white/80 text-lg font-semibold">Ver Demo del Estudio Virtual</p>
                  <p className="text-white/50 text-sm mt-2">Transmisión multiplatforma en acción</p>
                </div>
              </div>

              <div className="absolute bottom-2/4 translate-y-2/4 start-0 end-0 text-center">
                <a href="#!" className="lg:h-20 h-16 lg:w-20 w-16 rounded-full shadow-lg dark:shadow-gray-800 inline-flex items-center justify-center bg-white dark:bg-slate-900 hover:bg-indigo-600 dark:hover:bg-indigo-600 text-indigo-600 hover:text-white duration-500 ease-in-out mx-auto">
                  <i className="mdi mdi-play inline-flex items-center justify-center text-3xl"></i>
                </a>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Features Section */}
      <section className="relative w-full md:py-24 py-16">
        {/* Why Everyone Loves AvanzaCast */}
        <div className="container mx-auto px-4 relative md:mt-24 mt-16">
          <div className="grid grid-cols-1 pb-8 text-center">
            <h3 className="mb-6 md:text-3xl text-2xl md:leading-normal leading-normal font-semibold">
              Por qué todos aman AvanzaCast
            </h3>
            <p className="text-slate-400 max-w-xl mx-auto">
              La plataforma de streaming que necesitas para crear contenido profesional y llegar a más audiencia en menos tiempo.
            </p>
          </div>

          {/* Feature 1 - Multistreaming */}
          <div className="grid md:grid-cols-2 grid-cols-1 items-center mt-16 gap-[30px]">
            <div className="relative">
              <img src="/images/features/multistream.svg" className="rounded-lg shadow-md dark:shadow-gray-800" alt="Multistreaming" />
              <div className="overflow-hidden absolute lg:size-[400px] size-[320px] bg-indigo-600/5 dark:bg-indigo-600/20 bottom-0 start-0 rotate-45 -z-1 rounded-3xl"></div>
            </div>

            <div className="lg:ms-8">
              <h4 className="mb-4 text-2xl leading-normal font-medium">
                Transmisión Multiplatforma <br /> Alcanza Más Audiencia
              </h4>
              <p className="text-slate-400">
                Transmite simultáneamente a YouTube, Twitch, Facebook, LinkedIn, TikTok y más. Con AvanzaCast, tu contenido llega a todas partes con un solo clic. No más configuraciones complicadas ni software pesado.
              </p>
              <ul className="list-none text-slate-400 mt-4">
                <li className="mb-1 flex"><i className="uil uil-check-circle text-indigo-600 text-xl me-2"></i> Streaming a 15+ plataformas simultáneamente</li>
                <li className="mb-1 flex"><i className="uil uil-check-circle text-indigo-600 text-xl me-2"></i> Configuración en segundos sin software adicional</li>
                <li className="mb-1 flex"><i className="uil uil-check-circle text-indigo-600 text-xl me-2"></i> Calidad hasta 4K Ultra HD</li>
              </ul>

              <div className="mt-4">
                <a href="#" className="relative inline-block font-semibold tracking-wide align-middle text-base text-center border-none after:content-[''] after:absolute after:h-px after:w-0 hover:after:w-full after:end-0 hover:after:end-auto after:bottom-0 after:start-0 after:duration-500 text-indigo-600 hover:text-indigo-600 after:bg-indigo-600 duration-500 ease-in-out">
                  Descubre más <i className="uil uil-angle-right-b align-middle"></i>
                </a>
              </div>
            </div>
          </div>
        </div>

        {/* Feature 2 - Cloud Recording */}
        <div className="container mx-auto px-4 relative md:mt-24 mt-16">
          <div className="grid md:grid-cols-2 grid-cols-1 items-center gap-[30px]">
            <div className="relative order-1 md:order-2">
              <img src="/images/features/recording.svg" className="rounded-lg shadow-md dark:shadow-gray-800" alt="Grabación en la nube" />
              <div className="overflow-hidden absolute lg:size-[400px] size-[320px] bg-indigo-600/5 dark:bg-indigo-600/20 bottom-0 end-0 rotate-45 -z-1 rounded-3xl"></div>
            </div>

            <div className="lg:me-8 order-2 md:order-1">
              <h4 className="mb-4 text-2xl leading-normal font-medium">
                Grabación Automática en la Nube
              </h4>
              <p className="text-slate-400">
                Todas tus transmisiones se graban automáticamente en la nube con calidad profesional. Accede, edita y comparte tus videos cuando quieras. Almacenamiento ilimitado disponible.
              </p>
              <ul className="list-none text-slate-400 mt-4">
                <li className="mb-1 flex"><i className="uil uil-check-circle text-indigo-600 text-xl me-2"></i> Grabación automática de todas las sesiones</li>
                <li className="mb-1 flex"><i className="uil uil-check-circle text-indigo-600 text-xl me-2"></i> Almacenamiento seguro en la nube</li>
                <li className="mb-1 flex"><i className="uil uil-check-circle text-indigo-600 text-xl me-2"></i> Descarga y comparte en cualquier momento</li>
              </ul>

              <div className="mt-4">
                <a href="#" className="relative inline-block font-semibold tracking-wide align-middle text-base text-center border-none after:content-[''] after:absolute after:h-px after:w-0 hover:after:w-full after:end-0 hover:after:end-auto after:bottom-0 after:start-0 after:duration-500 text-indigo-600 hover:text-indigo-600 after:bg-indigo-600 duration-500 ease-in-out">
                  Descubre más <i className="uil uil-angle-right-b align-middle"></i>
                </a>
              </div>
            </div>
          </div>
        </div>

        {/* Testimonials Section */}
        <div className="container mx-auto px-4 relative md:mt-24 mt-16">
          <div className="grid grid-cols-1 pb-8 text-center">
            <h6 className="text-indigo-600 text-base mb-2">Testimonios</h6>
            <h3 className="mb-4 md:text-3xl md:leading-normal text-2xl leading-normal font-semibold">
              Lo que dicen nuestros usuarios
            </h3>
            <p className="text-slate-400 max-w-xl mx-auto">
              Creadores de contenido, empresas y educadores confían en AvanzaCast para sus transmisiones en vivo.
            </p>
          </div>

          <div className="grid md:grid-cols-3 grid-cols-1 mt-8 gap-[30px]">
            {/* Testimonial 1 */}
            <div className="text-center">
              <div className="content relative rounded shadow dark:shadow-gray-800 m-2 p-6 bg-white dark:bg-slate-900">
                <i className="mdi mdi-format-quote-open mdi-48px text-indigo-600"></i>
                <p className="text-slate-400">
                  "AvanzaCast revolucionó mi forma de hacer streaming. Ahora llego a todas mis plataformas simultáneamente sin complicaciones."
                </p>
                <ul className="list-none mb-0 text-amber-400 mt-3">
                  <li className="inline"><i className="mdi mdi-star"></i></li>
                  <li className="inline"><i className="mdi mdi-star"></i></li>
                  <li className="inline"><i className="mdi mdi-star"></i></li>
                  <li className="inline"><i className="mdi mdi-star"></i></li>
                  <li className="inline"><i className="mdi mdi-star"></i></li>
                </ul>
              </div>
              <div className="text-center mt-5">
                <div className="size-14 rounded-full bg-indigo-600/10 flex items-center justify-center mx-auto">
                  <i className="uil uil-user text-2xl text-indigo-600"></i>
                </div>
                <h6 className="mt-2 font-semibold">Carlos Mendoza</h6>
                <span className="text-slate-400 text-sm">Creador de Contenido</span>
              </div>
            </div>

            {/* Testimonial 2 */}
            <div className="text-center">
              <div className="content relative rounded shadow dark:shadow-gray-800 m-2 p-6 bg-white dark:bg-slate-900">
                <i className="mdi mdi-format-quote-open mdi-48px text-indigo-600"></i>
                <p className="text-slate-400">
                  "La calidad de grabación es excepcional. Mis podcasts nunca se habían visto tan profesionales. ¡Totalmente recomendado!"
                </p>
                <ul className="list-none mb-0 text-amber-400 mt-3">
                  <li className="inline"><i className="mdi mdi-star"></i></li>
                  <li className="inline"><i className="mdi mdi-star"></i></li>
                  <li className="inline"><i className="mdi mdi-star"></i></li>
                  <li className="inline"><i className="mdi mdi-star"></i></li>
                  <li className="inline"><i className="mdi mdi-star"></i></li>
                </ul>
              </div>
              <div className="text-center mt-5">
                <div className="size-14 rounded-full bg-indigo-600/10 flex items-center justify-center mx-auto">
                  <i className="uil uil-user text-2xl text-indigo-600"></i>
                </div>
                <h6 className="mt-2 font-semibold">María González</h6>
                <span className="text-slate-400 text-sm">Podcaster</span>
              </div>
            </div>

            {/* Testimonial 3 */}
            <div className="text-center">
              <div className="content relative rounded shadow dark:shadow-gray-800 m-2 p-6 bg-white dark:bg-slate-900">
                <i className="mdi mdi-format-quote-open mdi-48px text-indigo-600"></i>
                <p className="text-slate-400">
                  "Perfecto para nuestros webinars corporativos. La función de invitados remotos funciona sin problemas."
                </p>
                <ul className="list-none mb-0 text-amber-400 mt-3">
                  <li className="inline"><i className="mdi mdi-star"></i></li>
                  <li className="inline"><i className="mdi mdi-star"></i></li>
                  <li className="inline"><i className="mdi mdi-star"></i></li>
                  <li className="inline"><i className="mdi mdi-star"></i></li>
                  <li className="inline"><i className="mdi mdi-star"></i></li>
                </ul>
              </div>
              <div className="text-center mt-5">
                <div className="size-14 rounded-full bg-indigo-600/10 flex items-center justify-center mx-auto">
                  <i className="uil uil-user text-2xl text-indigo-600"></i>
                </div>
                <h6 className="mt-2 font-semibold">Roberto Silva</h6>
                <span className="text-slate-400 text-sm">Director de Marketing</span>
              </div>
            </div>
          </div>
        </div>

        {/* Pricing Section - Modern SaaS Style */}
        <div className="container mx-auto px-4 relative md:mt-24 mt-16">
          <div className="grid lg:grid-cols-12 grid-cols-1 items-center gap-[30px]">
            <div className="lg:col-span-5">
              <div className="lg:text-start text-center">
                <h3 className="mb-6 md:text-3xl text-2xl md:leading-normal leading-normal font-semibold">
                  Planes cómodos y accesibles
                </h3>
                <p className="text-slate-400 max-w-xl mx-auto">
                  Comienza con AvanzaCast y elige el plan que mejor se adapte a tus necesidades. Actualiza o cancela cuando quieras.
                </p>
                <div className="mt-6">
                  <a href="#" 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 me-2 mt-2">
                    <i className="uil uil-credit-card"></i> Ver Todos los Planes
                  </a>
                </div>
              </div>
            </div>

            <div className="lg:col-span-7 mt-8 lg:mt-0">
              <div className="lg:ms-8">
                <div className="grid md:grid-cols-2 grid-cols-1 md:gap-0 gap-[30px]">
                  {/* Starter Plan */}
                  <div className="group border-b-[3px] dark:border-gray-700 relative shadow dark:shadow-gray-800 rounded-md md:scale-110 z-3 bg-white dark:bg-slate-900">
                    <div className="p-6 py-8">
                      <h6 className="font-bold uppercase mb-5 text-indigo-600">Básico</h6>
                      <div className="flex mb-5">
                        <span className="text-xl font-semibold">$</span>
                        <span className="price text-4xl font-semibold mb-0">29</span>
                        <span className="text-xl font-semibold self-end mb-1">/mes</span>
                      </div>

                      <ul className="list-none text-slate-400">
                        <li className="mb-1 flex"><i className="uil uil-check-circle text-indigo-600 text-xl me-2"></i> 5 destinos streaming</li>
                        <li className="mb-1 flex"><i className="uil uil-check-circle text-indigo-600 text-xl me-2"></i> 1080p Full HD</li>
                        <li className="mb-1 flex"><i className="uil uil-check-circle text-indigo-600 text-xl me-2"></i> 100GB almacenamiento</li>
                        <li className="mb-1 flex"><i className="uil uil-check-circle text-indigo-600 text-xl me-2"></i> Soporte prioritario</li>
                      </ul>
                      <a href="#" 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 mt-5">
                        Comenzar
                      </a>
                    </div>
                  </div>

                  {/* Professional Plan */}
                  <div className="group border-b-[3px] dark:border-gray-700 relative shadow dark:shadow-gray-800 rounded-md z-2 bg-gray-50 dark:bg-slate-800">
                    <div className="p-6 py-8 md:ps-10">
                      <h6 className="font-bold uppercase mb-5 text-indigo-600">Profesional</h6>
                      <div className="flex mb-5">
                        <span className="text-xl font-semibold">$</span>
                        <span className="price text-4xl font-semibold mb-0">79</span>
                        <span className="text-xl font-semibold self-end mb-1">/mes</span>
                      </div>

                      <ul className="list-none text-slate-400">
                        <li className="mb-1 flex"><i className="uil uil-check-circle text-indigo-600 text-xl me-2"></i> Destinos ilimitados</li>
                        <li className="mb-1 flex"><i className="uil uil-check-circle text-indigo-600 text-xl me-2"></i> 4K Ultra HD</li>
                        <li className="mb-1 flex"><i className="uil uil-check-circle text-indigo-600 text-xl me-2"></i> Almacenamiento ilimitado</li>
                        <li className="mb-1 flex"><i className="uil uil-check-circle text-indigo-600 text-xl me-2"></i> Soporte 24/7</li>
                      </ul>
                      <a href="#" 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 mt-5">
                        Pruébalo Ahora
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* FAQ Section */}
        <div className="container mx-auto px-4 relative md:mt-24 mt-16">
          <div className="grid grid-cols-1 pb-8 text-center">
            <h3 className="mb-4 md:text-3xl md:leading-normal text-2xl leading-normal font-semibold">
              Preguntas Frecuentes
            </h3>
            <p className="text-slate-400 max-w-xl mx-auto">
              Respuestas a las preguntas más comunes sobre AvanzaCast y el streaming profesional.
            </p>
          </div>

          <div className="relative grid md:grid-cols-2 grid-cols-1 items-center mt-8 gap-[30px]">
            <div className="relative">
              <div className="relative rounded-xl overflow-hidden shadow-md dark:shadow-gray-800">
                <img src="/images/features/guests.svg" className="w-full h-auto" alt="FAQ" />
              </div>
            </div>

            <div>
              <div className="space-y-4">
                {/* FAQ 1 */}
                <div className="relative shadow dark:shadow-gray-800 rounded-md overflow-hidden">
                  <details className="group">
                    <summary className="flex justify-between items-center p-5 w-full font-medium cursor-pointer list-none">
                      <span>¿Cómo funciona el multistreaming?</span>
                      <span className="transition group-open:rotate-180">
                        <svg fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" viewBox="0 0 24 24" width="24">
                          <path d="M6 9l6 6 6-6"></path>
                        </svg>
                      </span>
                    </summary>
                    <div className="p-5 pt-0">
                      <p className="text-slate-400">
                        AvanzaCast envía tu transmisión simultáneamente a todas las plataformas que configures. Solo necesitas conectar tus cuentas una vez y listo.
                      </p>
                    </div>
                  </details>
                </div>

                {/* FAQ 2 */}
                <div className="relative shadow dark:shadow-gray-800 rounded-md overflow-hidden">
                  <details className="group">
                    <summary className="flex justify-between items-center p-5 w-full font-medium cursor-pointer list-none">
                      <span>¿Necesito descargar software?</span>
                      <span className="transition group-open:rotate-180">
                        <svg fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" viewBox="0 0 24 24" width="24">
                          <path d="M6 9l6 6 6-6"></path>
                        </svg>
                      </span>
                    </summary>
                    <div className="p-5 pt-0">
                      <p className="text-slate-400">
                        No, AvanzaCast funciona 100% en tu navegador web. Solo necesitas una conexión a internet estable.
                      </p>
                    </div>
                  </details>
                </div>

                {/* FAQ 3 */}
                <div className="relative shadow dark:shadow-gray-800 rounded-md overflow-hidden">
                  <details className="group">
                    <summary className="flex justify-between items-center p-5 w-full font-medium cursor-pointer list-none">
                      <span>¿A cuántas plataformas puedo transmitir?</span>
                      <span className="transition group-open:rotate-180">
                        <svg fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" viewBox="0 0 24 24" width="24">
                          <path d="M6 9l6 6 6-6"></path>
                        </svg>
                      </span>
                    </summary>
                    <div className="p-5 pt-0">
                      <p className="text-slate-400">
                        Dependiendo de tu plan, puedes transmitir desde 5 hasta destinos ilimitados simultáneamente.
                      </p>
                    </div>
                  </details>
                </div>

                {/* FAQ 4 */}
                <div className="relative shadow dark:shadow-gray-800 rounded-md overflow-hidden">
                  <details className="group">
                    <summary className="flex justify-between items-center p-5 w-full font-medium cursor-pointer list-none">
                      <span>¿Las grabaciones se guardan automáticamente?</span>
                      <span className="transition group-open:rotate-180">
                        <svg fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" viewBox="0 0 24 24" width="24">
                          <path d="M6 9l6 6 6-6"></path>
                        </svg>
                      </span>
                    </summary>
                    <div className="p-5 pt-0">
                      <p className="text-slate-400">
                        Sí, todas tus transmisiones se graban automáticamente en la nube y puedes acceder a ellas en cualquier momento.
                      </p>
                    </div>
                  </details>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* CTA Final */}
        <div className="container mx-auto px-4 relative md:mt-24 mt-16">
          <div className="grid grid-cols-1 text-center">
            <h3 className="mb-4 md:text-3xl md:leading-normal text-2xl leading-normal font-semibold">
              ¿Tienes preguntas? ¡Contáctanos!
            </h3>
            <p className="text-slate-400 max-w-xl mx-auto">
              Nuestro equipo está listo para ayudarte a comenzar con AvanzaCast y llevar tu streaming al siguiente nivel.
            </p>
            <div className="mt-6">
              <a href="#" 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">
                <i className="uil uil-phone align-middle me-2"></i> Contáctanos
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="footer bg-dark-footer relative text-gray-200 dark:text-gray-200">
        <div className="container">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
            <div>
              <h3 className="text-2xl font-bold mb-4">AvanzaCast</h3>
              <p className="text-gray-400">
                La plataforma profesional de multistreaming para creadores
              </p>
            </div>
            <div>
              <h4 className="font-semibold mb-4">Producto</h4>
              <ul className="space-y-2 text-gray-400">
                <li><a href="#" className="hover:text-white transition-colors">Características</a></li>
                <li><a href="#" className="hover:text-white transition-colors">Precios</a></li>
                <li><a href="#" className="hover:text-white transition-colors">Integraciones</a></li>
              </ul>
            </div>
            <div>
              <h4 className="font-semibold mb-4">Recursos</h4>
              <ul className="space-y-2 text-gray-400">
                <li><a href="#" className="hover:text-white transition-colors">Blog</a></li>
                <li><a href="#" className="hover:text-white transition-colors">Soporte</a></li>
                <li><a href="#" className="hover:text-white transition-colors">API</a></li>
              </ul>
            </div>
            <div>
              <h4 className="font-semibold mb-4">Compañía</h4>
              <ul className="space-y-2 text-gray-400">
                <li><a href="#" className="hover:text-white transition-colors">Acerca de</a></li>
                <li><a href="#" className="hover:text-white transition-colors">Contacto</a></li>
                <li><a href="#" className="hover:text-white transition-colors">Privacidad</a></li>
              </ul>
            </div>
          </div>
          <div className="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
            <p>&copy; 2025 AvanzaCast. Todos los derechos reservados.</p>
          </div>
        </div>
      </footer>
    </div>
  )
}