'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 {
  Network,
  Cable,
  Server,
  Shield,
  Phone,
  Wifi,
  Monitor,
  Settings,
  HardDrive,
  Lock,
  ArrowRight,
  Check,
} from 'lucide-react'

const services = [
  {
    icon: Cable,
    title: 'Cableado Estructurado',
    description: 'Diseño e instalación de redes de datos y voz con certificación.',
  },
  {
    icon: Network,
    title: 'Administración de Redes',
    description: 'Gestión, monitoreo y optimización de tu infraestructura de red.',
  },
  {
    icon: Phone,
    title: 'Telefonía IP / VoIP',
    description: 'Implementación de sistemas de comunicación unificada.',
  },
  {
    icon: Wifi,
    title: 'Redes Inalámbricas',
    description: 'Diseño y despliegue de redes WiFi empresariales de alto rendimiento.',
  },
  {
    icon: Server,
    title: 'Servidores y Data Centers',
    description: 'Configuración y mantenimiento de servidores físicos y virtuales.',
  },
  {
    icon: Shield,
    title: 'Seguridad Perimetral',
    description: 'Firewalls, VPN, detección de intrusos y protección de red.',
  },
  {
    icon: Monitor,
    title: 'Videovigilancia IP',
    description: 'Sistemas CCTV con almacenamiento y acceso remoto.',
  },
  {
    icon: HardDrive,
    title: 'Almacenamiento NAS/SAN',
    description: 'Soluciones de almacenamiento empresarial escalable.',
  },
  {
    icon: Settings,
    title: 'Soporte Técnico',
    description: 'Mesa de ayuda y mantenimiento preventivo y correctivo.',
  },
]

const benefits = [
  'Infraestructura certificada con garantía',
  'Reducción de tiempos de inactividad',
  'Mayor velocidad y estabilidad de red',
  'Protección contra amenazas cibernéticas',
  'Escalabilidad para crecimiento futuro',
  'Cumplimiento de normativas y estándares',
  'Soporte técnico especializado',
  'Documentación completa de la red',
]

const certifications = [
  { name: 'Cisco', description: 'Partner certificado' },
  { name: 'Ubiquiti', description: 'Instalador autorizado' },
  { name: 'Fortinet', description: 'Partner de seguridad' },
  { name: 'HP/Aruba', description: 'Partner comercial' },
]

const faqItems: FAQItem[] = [
  {
    question: '¿Qué incluye el servicio de cableado estructurado?',
    answer: 'Incluye diseño de la red, instalación de cableado Cat6/Cat6A, patch panels, organizadores, racks, etiquetado, certificación con equipo Fluke y documentación completa de puntos.',
  },
  {
    question: '¿Trabajan con cualquier marca de equipos?',
    answer: 'Sí, somos agnósticos de marcas y trabajamos con Cisco, HP/Aruba, Ubiquiti, Fortinet, Mikrotik y otras. Recomendamos la mejor opción según tu presupuesto y necesidades.',
  },
  {
    question: '¿Pueden administrar mi red de forma remota?',
    answer: 'Sí, implementamos herramientas de monitoreo y gestión remota que nos permiten supervisar tu red 24/7, detectar problemas proactivamente y resolverlos sin necesidad de visitar tu sitio.',
  },
  {
    question: '¿Qué pasa si tengo una emergencia fuera de horario?',
    answer: 'Los planes Completo y Enterprise incluyen soporte 24/7. Para el plan Básico, ofrecemos atención de emergencias con costo adicional. Tienes una línea directa para reportar incidentes críticos.',
  },
  {
    question: '¿Ofrecen garantía en sus instalaciones?',
    answer: 'Sí, todas nuestras instalaciones de cableado estructurado incluyen garantía de 15 años en materiales y mano de obra. Los equipos tienen la garantía del fabricante.',
  },
]

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

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

            <p className="text-xl text-slate-200 font-semibold mb-4">
              Conectividad Empresarial de Alto Rendimiento
            </p>

            <p className="text-lg text-slate-200 max-w-2xl mx-auto mb-8">
              Diseñamos, implementamos y administramos la infraestructura de TI
              que tu empresa necesita para operar de manera eficiente y segura.
            </p>

            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Button href="/contacto" size="lg" className="bg-white text-slate-700 hover:bg-slate-50">
                Solicitar Evaluación
                <ArrowRight className="ml-2 w-5 h-5" />
              </Button>
            </div>
          </AnimatedSection>
        </div>
      </section>

      {/* Certifications */}
      <section className="py-12 bg-gray-50">
        <div className="container-custom">
          <AnimatedContainer className="flex flex-wrap justify-center gap-8 md:gap-12">
            {certifications.map((cert, idx) => (
              <AnimatedItem key={idx} className="text-center">
                <div className="text-2xl font-bold text-slate-700">{cert.name}</div>
                <p className="text-gray-600 text-sm">{cert.description}</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 integrales de infraestructura y conectividad
            </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-slate-100 rounded-xl flex items-center justify-center mb-4">
                      <service.icon className="w-6 h-6 text-slate-700" />
                    </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">
                ¿Por qué elegirnos?
              </h2>
              <p className="text-lg text-gray-600 mb-8">
                Contamos con años de experiencia implementando soluciones de red
                para empresas de todos los tamaños.
              </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-slate-700 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-slate-600 to-slate-800 rounded-2xl p-4 sm:p-8 text-white">
                <Lock className="w-16 h-16 mb-6 opacity-80" />
                <h3 className="text-2xl font-bold mb-4">Seguridad de Red</h3>
                <p className="text-slate-200 mb-6">
                  Protegemos tu infraestructura con las mejores prácticas y
                  tecnologías de seguridad del mercado.
                </p>
                <ul className="space-y-2 text-slate-200">
                  <li>• Firewalls de próxima generación (NGFW)</li>
                  <li>• VPN site-to-site y acceso remoto</li>
                  <li>• Detección y prevención de intrusos</li>
                  <li>• Segmentación de red (VLANs)</li>
                </ul>
              </div>
            </AnimatedSection>
          </div>
        </div>
      </section>

      {/* Process */}
      <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">
              Nuestro Proceso
            </h2>
            <p className="mt-4 text-lg text-gray-600">
              Metodología probada para garantizar el éxito de tu proyecto
            </p>
          </AnimatedSection>

          <AnimatedContainer className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-6">
            {[
              { step: '01', title: 'Evaluación', desc: 'Analizamos tu infraestructura actual y necesidades' },
              { step: '02', title: 'Diseño', desc: 'Creamos la solución óptima para tu empresa' },
              { step: '03', title: 'Implementación', desc: 'Instalamos y configuramos con mínima interrupción' },
              { step: '04', title: 'Soporte', desc: 'Monitoreo continuo y mantenimiento preventivo' },
            ].map((item, idx) => (
              <AnimatedItem key={idx} className="text-center">
                <div className="w-16 h-16 bg-slate-100 rounded-full flex items-center justify-center mx-auto mb-4">
                  <span className="text-2xl font-bold text-slate-700">{item.step}</span>
                </div>
                <h3 className="font-semibold text-gray-900 mb-2">{item.title}</h3>
                <p className="text-sm text-gray-600">{item.desc}</p>
              </AnimatedItem>
            ))}
          </AnimatedContainer>
        </div>
      </section>

      {/* FAQ */}
      <ServiceFAQ
        title="Preguntas sobre Redes e Infraestructura"
        subtitle="Resolvemos tus dudas sobre nuestros servicios de TI"
        faqs={faqItems}
      />

      {/* Contact Form */}
      <ServiceContactForm
        serviceName="Redes e Infraestructura"
        title="¿Necesitas mejorar tu infraestructura?"
        subtitle="Solicita una evaluación gratuita y descubre cómo podemos optimizar tu red empresarial."
        colorTheme="slate"
      />
    </>
  )
}