'use client'

import { Button } from '@/components/ui/Button'
import { Card, CardContent } from '@/components/ui/Card'
import { AnimatedSection, AnimatedContainer, AnimatedItem } from '@/components/ui/AnimatedSection'
import { ServiceFAQ, FAQItem } from '@/components/sections/ServiceFAQ'
import { ServiceContactForm } from '@/components/sections/ServiceContactForm'
import {
  Phone,
  PhoneCall,
  Headphones,
  Radio,
  Satellite,
  Globe,
  Users,
  MessageSquare,
  Video,
  ArrowRight,
  Check,
  Shield,
} from 'lucide-react'

const services = [
  {
    icon: Phone,
    title: 'Telefonía IP / VoIP',
    description: 'Sistemas de telefonía en la nube con calidad HD y funciones avanzadas.',
  },
  {
    icon: PhoneCall,
    title: 'Conmutadores Virtuales',
    description: 'PBX en la nube sin necesidad de hardware, escalable y flexible.',
  },
  {
    icon: Headphones,
    title: 'Contact Center',
    description: 'Soluciones de call center con IVR, colas, reportes y grabación.',
  },
  {
    icon: Radio,
    title: 'Troncales SIP',
    description: 'Conexión directa con carriers nacionales e internacionales.',
  },
  {
    icon: Satellite,
    title: 'Enlaces Dedicados',
    description: 'Conectividad empresarial con SLA garantizado y alta disponibilidad.',
  },
  {
    icon: Globe,
    title: 'Numeración DID',
    description: 'Números locales e internacionales para tu empresa.',
  },
  {
    icon: Users,
    title: 'Comunicaciones Unificadas',
    description: 'Integración de voz, video, chat y colaboración en una plataforma.',
  },
  {
    icon: MessageSquare,
    title: 'SMS Empresarial',
    description: 'Envío masivo de mensajes y notificaciones automatizadas.',
  },
  {
    icon: Video,
    title: 'Videoconferencia',
    description: 'Salas virtuales HD para reuniones y webinars empresariales.',
  },
]

const benefits = [
  'Reducción de hasta 60% en costos de telefonía',
  'Calidad de voz HD cristalina',
  'Escalabilidad inmediata sin límites',
  'Trabajo remoto desde cualquier lugar',
  'Integración con CRM y sistemas existentes',
  'Grabación de llamadas para calidad y cumplimiento',
  'Reportes detallados en tiempo real',
  'Soporte técnico 24/7 incluido',
  'Sin inversión inicial en hardware',
]

const stats = [
  { value: '99.9%', label: 'Uptime garantizado' },
  { value: '60%', label: 'Ahorro promedio' },
  { value: '24/7', label: 'Soporte técnico' },
  { value: '500+', label: 'Empresas activas' },
]

const faqItems: FAQItem[] = [
  {
    question: '¿Qué es la telefonía VoIP y cómo funciona?',
    answer: 'VoIP (Voice over IP) transmite llamadas de voz a través de internet en lugar de líneas telefónicas tradicionales. Esto permite mayor flexibilidad, menores costos y funciones avanzadas como videollamadas, IVR, grabación y más.',
  },
  {
    question: '¿Puedo conservar mi número telefónico actual?',
    answer: 'Sí, realizamos la portabilidad de tus números actuales sin costo adicional. El proceso toma entre 5-10 días hábiles y no hay interrupción del servicio durante la migración.',
  },
  {
    question: '¿Qué velocidad de internet necesito?',
    answer: 'Recomendamos al menos 100 Kbps por llamada simultánea. Para una oficina de 10 extensiones con 5 llamadas simultáneas, necesitarías aproximadamente 1 Mbps dedicado para voz. Evaluamos tu conexión antes de implementar.',
  },
  {
    question: '¿Funciona si se va el internet?',
    answer: 'Sí, configuramos failover automático. Las llamadas pueden redirigirse a celulares, otra sede o buzón de voz. También ofrecemos enlaces de respaldo para alta disponibilidad.',
  },
  {
    question: '¿Puedo hacer llamadas internacionales?',
    answer: 'Sí, ofrecemos tarifas competitivas a más de 200 países. También puedes obtener números DID internacionales para que tus clientes en otros países te llamen como llamada local.',
  },
]

export default function TelecomunicacionesPage() {
  return (
    <>
      {/* Hero */}
      <section className="relative bg-gradient-to-br from-indigo-600 via-indigo-700 to-indigo-900 pt-32 pb-20">
        <div className="absolute inset-0 overflow-hidden">
          <div className="absolute -top-40 -right-40 w-80 h-80 bg-indigo-500/20 rounded-full blur-3xl" />
          <div className="absolute -bottom-40 -left-40 w-80 h-80 bg-indigo-400/20 rounded-full blur-3xl" />
        </div>

        <div className="container-custom relative">
          <AnimatedSection className="max-w-3xl mx-auto text-center">
            <div className="w-20 h-20 bg-white rounded-2xl flex items-center justify-center mx-auto mb-6">
              <Phone className="w-10 h-10 text-indigo-600" />
            </div>

            <h1 className="text-2xl sm:text-4xl md:text-5xl font-bold text-white mb-4">
              Telecomunicaciones
            </h1>

            <p className="text-xl text-indigo-200 font-semibold mb-4">
              Conecta tu Empresa con el Mundo
            </p>

            <p className="text-lg text-indigo-100 max-w-2xl mx-auto mb-8">
              Soluciones integrales de comunicación empresarial: telefonía IP,
              contact center, videoconferencia y comunicaciones unificadas.
            </p>

            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Button href="/demo" size="lg" className="bg-white text-indigo-700 hover:bg-indigo-50">
                Solicitar Demo
                <ArrowRight className="ml-2 w-5 h-5" />
              </Button>
              <Button href="/contacto" size="lg" variant="outline" className="border-white text-white hover:bg-white/10">
                Contactar Ventas
              </Button>
            </div>
          </AnimatedSection>
        </div>
      </section>

      {/* Stats */}
      <section className="py-12 bg-indigo-50">
        <div className="container-custom">
          <AnimatedContainer className="grid grid-cols-2 md:grid-cols-4 gap-8">
            {stats.map((stat, idx) => (
              <AnimatedItem key={idx} className="text-center">
                <div className="text-3xl md:text-4xl font-bold text-indigo-600">{stat.value}</div>
                <p className="text-gray-600">{stat.label}</p>
              </AnimatedItem>
            ))}
          </AnimatedContainer>
        </div>
      </section>

      {/* Services */}
      <section className="section-padding">
        <div className="container-custom">
          <AnimatedSection className="text-center max-w-3xl mx-auto mb-16">
            <h2 className="text-3xl md:text-4xl font-bold text-gray-900">
              Nuestros Servicios
            </h2>
            <p className="mt-4 text-lg text-gray-600">
              Soluciones completas de telecomunicaciones para empresas de todos los tamaños
            </p>
          </AnimatedSection>

          <AnimatedContainer className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            {services.map((service, idx) => (
              <AnimatedItem key={idx}>
                <Card hover className="h-full">
                  <CardContent className="p-6">
                    <div className="w-12 h-12 bg-indigo-100 rounded-xl flex items-center justify-center mb-4">
                      <service.icon className="w-6 h-6 text-indigo-600" />
                    </div>
                    <h3 className="font-semibold text-gray-900 mb-2">
                      {service.title}
                    </h3>
                    <p className="text-sm text-gray-600">{service.description}</p>
                  </CardContent>
                </Card>
              </AnimatedItem>
            ))}
          </AnimatedContainer>
        </div>
      </section>

      {/* Benefits */}
      <section className="section-padding bg-gray-50">
        <div className="container-custom">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            <AnimatedSection variant="slideRight">
              <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-6">
                Beneficios de Migrar a VoIP
              </h2>
              <p className="text-lg text-gray-600 mb-8">
                Moderniza las comunicaciones de tu empresa y obtén ventajas competitivas
                con nuestra plataforma de telefonía en la nube.
              </p>
              <ul className="space-y-3">
                {benefits.map((benefit, idx) => (
                  <li key={idx} className="flex items-start gap-3">
                    <Check className="w-5 h-5 text-indigo-600 flex-shrink-0 mt-0.5" />
                    <span className="text-gray-700">{benefit}</span>
                  </li>
                ))}
              </ul>
            </AnimatedSection>
            <AnimatedSection variant="slideLeft" delay={0.2}>
              <div className="bg-gradient-to-br from-indigo-600 to-indigo-800 rounded-2xl p-4 sm:p-8 text-white">
                <Shield className="w-16 h-16 mb-6 opacity-80" />
                <h3 className="text-2xl font-bold mb-4">Seguridad y Confiabilidad</h3>
                <p className="text-indigo-100 mb-6">
                  Tu comunicación empresarial protegida con los más altos estándares
                  de seguridad y disponibilidad.
                </p>
                <ul className="space-y-2 text-indigo-100">
                  <li>• Encriptación de llamadas TLS/SRTP</li>
                  <li>• Redundancia geográfica de servidores</li>
                  <li>• Protección contra fraude telefónico</li>
                  <li>• Cumplimiento normativo (LFPDPPP)</li>
                </ul>
              </div>
            </AnimatedSection>
          </div>
        </div>
      </section>

      {/* Products highlight */}
      <section className="section-padding">
        <div className="container-custom">
          <AnimatedSection className="text-center max-w-3xl mx-auto mb-16">
            <h2 className="text-3xl md:text-4xl font-bold text-gray-900">
              Nuestras Soluciones
            </h2>
            <p className="mt-4 text-lg text-gray-600">
              Productos diseñados para transformar tus comunicaciones
            </p>
          </AnimatedSection>

          <AnimatedContainer className="grid md:grid-cols-2 gap-8">
            <AnimatedItem>
              <Card className="h-full border-2 border-primary-100 hover:border-primary-300 transition-colors">
                <CardContent className="p-4 sm:p-8">
                  <div className="w-16 h-16 bg-primary-100 rounded-2xl flex items-center justify-center mb-6">
                    <Phone className="w-8 h-8 text-primary-600" />
                  </div>
                  <h3 className="text-2xl font-bold text-gray-900 mb-3">LambiCall</h3>
                  <p className="text-gray-600 mb-6">
                    Conmutador virtual en la nube con todas las funciones que tu empresa necesita.
                    IVR, colas, grabación, reportes y más.
                  </p>
                  <Button href="/lambicall" variant="outline">
                    Conocer más
                    <ArrowRight className="ml-2 w-4 h-4" />
                  </Button>
                </CardContent>
              </Card>
            </AnimatedItem>
            <AnimatedItem>
              <Card className="h-full border-2 border-green-100 hover:border-green-300 transition-colors">
                <CardContent className="p-4 sm:p-8">
                  <div className="w-16 h-16 bg-green-100 rounded-2xl flex items-center justify-center mb-6">
                    <PhoneCall className="w-8 h-8 text-green-600" />
                  </div>
                  <h3 className="text-2xl font-bold text-gray-900 mb-3">LambiPhone</h3>
                  <p className="text-gray-600 mb-6">
                    Aplicación móvil para iOS y Android. Lleva tu extensión empresarial
                    a cualquier lugar con calidad HD.
                  </p>
                  <Button href="/lambiphone" variant="outline">
                    Conocer más
                    <ArrowRight className="ml-2 w-4 h-4" />
                  </Button>
                </CardContent>
              </Card>
            </AnimatedItem>
          </AnimatedContainer>
        </div>
      </section>

      {/* FAQ */}
      <ServiceFAQ
        title="Preguntas sobre Telecomunicaciones"
        subtitle="Resolvemos tus dudas sobre telefonía IP y comunicaciones unificadas"
        faqs={faqItems}
      />

      {/* Contact Form */}
      <ServiceContactForm
        serviceName="Telecomunicaciones"
        title="¿Listo para modernizar tus comunicaciones?"
        subtitle="Solicita una demo gratuita y descubre cómo podemos transformar la telefonía de tu empresa."
        colorTheme="indigo"
      />
    </>
  )
}