'use client'

import { useState } from 'react'
import { Button } from '@/components/ui/Button'
import { Card, CardContent } from '@/components/ui/Card'
import { CheckCircle, Phone, Users, Clock, Loader2 } from 'lucide-react'
import { contactApi } from '@/lib/api'

export default function DemoPage() {
  const [submitted, setSubmitted] = useState(false)
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState('')

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    setLoading(true)
    setError('')

    const formData = new FormData(e.currentTarget)
    const data = {
      name: `${formData.get('firstName')} ${formData.get('lastName')}`,
      email: formData.get('email') as string,
      phone: formData.get('phone') as string,
      company: formData.get('company') as string,
      subject: 'Solicitud de Demo',
      message: `Extensiones requeridas: ${formData.get('extensions') || 'No especificado'}`,
    }

    try {
      await contactApi.submit(data)
      setSubmitted(true)
    } catch (err) {
      setError('Hubo un error al enviar la solicitud. Por favor intenta de nuevo.')
    } finally {
      setLoading(false)
    }
  }

  return (
    <>
      {/* Hero */}
      <section className="gradient-hero pt-32 pb-16">
        <div className="container-custom text-center">
          <h1 className="text-2xl sm:text-4xl md:text-5xl font-bold text-white">
            Solicita una Demo Gratis
          </h1>
          <p className="mt-4 text-lg text-primary-100 max-w-2xl mx-auto">
            Descubre cómo LambiCall y LambiPhone pueden transformar
            las comunicaciones de tu empresa
          </p>
        </div>
      </section>

      {/* Demo form section */}
      <section className="section-padding">
        <div className="container-custom">
          <div className="grid lg:grid-cols-2 gap-12 max-w-6xl mx-auto">
            {/* Benefits */}
            <div>
              <h2 className="text-2xl font-bold text-gray-900 mb-6">
                ¿Qué incluye la demo?
              </h2>

              <div className="space-y-6">
                <div className="flex gap-4">
                  <div className="w-12 h-12 bg-primary-100 rounded-xl flex items-center justify-center flex-shrink-0">
                    <Phone className="w-6 h-6 text-primary-600" />
                  </div>
                  <div>
                    <h3 className="font-semibold text-gray-900">
                      Tour personalizado
                    </h3>
                    <p className="text-gray-600 mt-1">
                      Un especialista te mostrará todas las funcionalidades
                      adaptadas a las necesidades de tu empresa.
                    </p>
                  </div>
                </div>

                <div className="flex gap-4">
                  <div className="w-12 h-12 bg-primary-100 rounded-xl flex items-center justify-center flex-shrink-0">
                    <Users className="w-6 h-6 text-primary-600" />
                  </div>
                  <div>
                    <h3 className="font-semibold text-gray-900">
                      Prueba con tu equipo
                    </h3>
                    <p className="text-gray-600 mt-1">
                      Acceso temporal para que tú y tu equipo puedan probar
                      el sistema en un entorno real.
                    </p>
                  </div>
                </div>

                <div className="flex gap-4">
                  <div className="w-12 h-12 bg-primary-100 rounded-xl flex items-center justify-center flex-shrink-0">
                    <Clock className="w-6 h-6 text-primary-600" />
                  </div>
                  <div>
                    <h3 className="font-semibold text-gray-900">
                      Sin compromiso
                    </h3>
                    <p className="text-gray-600 mt-1">
                      La demo es completamente gratuita y sin obligación de
                      compra. Decide a tu ritmo.
                    </p>
                  </div>
                </div>
              </div>

              <Card className="bg-primary-50 border-primary-100 mt-8">
                <CardContent className="p-6">
                  <div className="flex items-center gap-3 mb-3">
                    <CheckCircle className="w-6 h-6 text-primary-600" />
                    <span className="font-semibold text-gray-900">
                      Más de 500 empresas confían en nosotros
                    </span>
                  </div>
                  <p className="text-sm text-gray-600">
                    Únete a cientos de empresas que ya han transformado sus
                    comunicaciones con LambiCall.
                  </p>
                </CardContent>
              </Card>
            </div>

            {/* Form */}
            <Card>
              <CardContent className="p-4 sm:p-8">
                {submitted ? (
                  <div className="text-center py-8">
                    <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
                      <CheckCircle className="w-8 h-8 text-green-600" />
                    </div>
                    <h3 className="text-xl font-semibold text-gray-900 mb-2">
                      ¡Solicitud enviada!
                    </h3>
                    <p className="text-gray-600 mb-6">
                      Nos pondremos en contacto contigo en las próximas 24 horas
                      para coordinar tu demo.
                    </p>
                    <Button href="/" variant="outline">
                      Volver al inicio
                    </Button>
                  </div>
                ) : (
                  <>
                    <h3 className="text-xl font-semibold text-gray-900 mb-6">
                      Completa el formulario
                    </h3>

                    <form onSubmit={handleSubmit} className="space-y-5">
                      <div className="grid md:grid-cols-2 gap-5">
                        <div>
                          <label className="block text-sm font-medium text-gray-700 mb-2">
                            Nombre *
                          </label>
                          <input
                            type="text"
                            name="firstName"
                            required
                            className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
                            placeholder="Tu nombre"
                          />
                        </div>
                        <div>
                          <label className="block text-sm font-medium text-gray-700 mb-2">
                            Apellido *
                          </label>
                          <input
                            type="text"
                            name="lastName"
                            required
                            className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
                            placeholder="Tu apellido"
                          />
                        </div>
                      </div>

                      <div>
                        <label className="block text-sm font-medium text-gray-700 mb-2">
                          Email corporativo *
                        </label>
                        <input
                          type="email"
                          name="email"
                          required
                          className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
                          placeholder="tu@empresa.com"
                        />
                      </div>

                      <div>
                        <label className="block text-sm font-medium text-gray-700 mb-2">
                          Teléfono *
                        </label>
                        <input
                          type="tel"
                          name="phone"
                          required
                          className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
                          placeholder="+52 55 1234 5678"
                        />
                      </div>

                      <div>
                        <label className="block text-sm font-medium text-gray-700 mb-2">
                          Nombre de la empresa *
                        </label>
                        <input
                          type="text"
                          name="company"
                          required
                          className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
                          placeholder="Tu empresa"
                        />
                      </div>

                      <div>
                        <label className="block text-sm font-medium text-gray-700 mb-2">
                          ¿Cuántas extensiones necesitas?
                        </label>
                        <select
                          name="extensions"
                          className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
                        >
                          <option value="">Selecciona una opción</option>
                          <option value="1-10">1-10 extensiones</option>
                          <option value="11-50">11-50 extensiones</option>
                          <option value="51-100">51-100 extensiones</option>
                          <option value="100+">Más de 100 extensiones</option>
                        </select>
                      </div>

                      {error && (
                        <p className="text-red-600 text-sm">{error}</p>
                      )}

                      <Button
                        type="submit"
                        size="lg"
                        disabled={loading}
                        className="w-full"
                      >
                        {loading ? (
                          <>
                            <Loader2 className="mr-2 w-5 h-5 animate-spin" />
                            Enviando...
                          </>
                        ) : (
                          'Solicitar Demo'
                        )}
                      </Button>

                      <p className="text-xs text-gray-500 text-center">
                        Al enviar este formulario, aceptas nuestra{' '}
                        <a
                          href="/politicas/privacy-policy"
                          className="text-primary-600 hover:underline"
                        >
                          Política de Privacidad
                        </a>
                      </p>
                    </form>
                  </>
                )}
              </CardContent>
            </Card>
          </div>
        </div>
      </section>
    </>
  )
}