'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 {
  Cloud,
  Server,
  Lock,
  Layers,
  Globe,
  RefreshCw,
  HardDrive,
  Database,
  ArrowRight,
  Check,
} from 'lucide-react'

const features = [
  {
    icon: Server,
    title: 'Desarrollo Personalizado',
    description: 'Arquitecturas, redes, servidores, bases de datos, plataformas y aplicaciones en la nube.',
  },
  {
    icon: Lock,
    title: 'Implementación Segura',
    description: 'Encriptación SSL/TLS, IAM, Control de acceso RBAC, Single Sign-On (SSO) y más.',
  },
  {
    icon: Layers,
    title: 'Soluciones SaaS/IaaS/DBaaS',
    description: 'Software, Infraestructura y Base de datos como servicio según estándares CDMI.',
  },
  {
    icon: Globe,
    title: 'Multiplataforma',
    description: 'Soluciones comunitarias, distribuidas, entre nubes y multi-nube.',
  },
  {
    icon: RefreshCw,
    title: 'Migración en la Nube',
    description: 'Migración y modernización de aplicaciones, construcción de nuevas apps basadas en la nube.',
  },
  {
    icon: HardDrive,
    title: 'Respaldo y Recuperación',
    description: 'Estrategias sólidas de backup para servidores en la nube, locales e híbridos.',
  },
]

const benefits = [
  'Conecta: Mayor rendimiento para tu infraestructura de TI',
  'Escala inmediata: Almacenamiento, memoria y procesamiento según necesidades',
  'Plan de recuperación ante desastres actualizado',
  'Garantía de alta disponibilidad en tiempo real',
  'Respaldo diario automático y seguro',
  'Versiones ilimitadas con encriptación',
  'Portal web para administrar respaldos',
  'Usuarios ilimitados',
  'Protección contra ransomware',
]

const faqItems: FAQItem[] = [
  {
    question: '¿Qué es Cloud Computing y cómo beneficia a mi empresa?',
    answer: 'Cloud Computing es la entrega de servicios de computación a través de internet. Permite a tu empresa acceder a servidores, almacenamiento y aplicaciones sin necesidad de infraestructura física propia, reduciendo costos y aumentando la flexibilidad.',
  },
  {
    question: '¿Mis datos están seguros en la nube?',
    answer: 'Absolutamente. Implementamos múltiples capas de seguridad incluyendo encriptación SSL/TLS, firewalls avanzados, autenticación multifactor y respaldos redundantes. Cumplimos con estándares internacionales de seguridad.',
  },
  {
    question: '¿Puedo migrar mi infraestructura actual a la nube?',
    answer: 'Sí, ofrecemos servicios completos de migración. Nuestro equipo evalúa tu infraestructura actual, diseña un plan de migración y ejecuta la transición con mínimo tiempo de inactividad.',
  },
  {
    question: '¿Qué pasa si necesito más recursos temporalmente?',
    answer: 'Una de las ventajas del cloud es la escalabilidad. Puedes aumentar o reducir recursos según la demanda, pagando solo por lo que usas. Ideal para picos de temporada o proyectos especiales.',
  },
  {
    question: '¿Ofrecen soporte técnico?',
    answer: 'Sí, todos nuestros planes incluyen soporte técnico. El plan Business y Enterprise cuentan con soporte 24/7 y tiempos de respuesta garantizados según el SLA.',
  },
]

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

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

            <p className="text-xl text-cyan-100 font-semibold mb-4">
              Empodera tu Empresa desde la Nube
            </p>

            <p className="text-lg text-cyan-100 max-w-2xl mx-auto mb-8">
              Una solución que te garantiza mayor rendimiento, rentabilidad y alta
              disponibilidad para toda tu infraestructura de TI.
            </p>

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

      {/* Features */}
      <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">
              Servicios en la Nube
            </h2>
            <p className="mt-4 text-lg text-gray-600">
              Soluciones integrales de computación en la nube para tu empresa
            </p>
          </AnimatedSection>

          <AnimatedContainer className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            {features.map((feature, idx) => (
              <AnimatedItem key={idx}>
                <Card hover className="h-full">
                  <CardContent className="p-6">
                    <div className="w-12 h-12 bg-cyan-100 rounded-xl flex items-center justify-center mb-4">
                      <feature.icon className="w-6 h-6 text-cyan-600" />
                    </div>
                    <h3 className="font-semibold text-gray-900 mb-2">
                      {feature.title}
                    </h3>
                    <p className="text-sm text-gray-600">{feature.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 del Cloud
              </h2>
              <p className="text-lg text-gray-600 mb-8">
                Evita pérdidas de información que paralicen la operación de tu negocio
                por fallas en equipos, ataques cibernéticos o desastres naturales.
              </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-cyan-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-cyan-500 to-cyan-700 rounded-2xl p-4 sm:p-8 text-white">
                <Database className="w-16 h-16 mb-6 opacity-80" />
                <h3 className="text-2xl font-bold mb-4">Respaldo Empresarial</h3>
                <p className="text-cyan-100 mb-6">
                  Desde un archivo de Word hasta programas completos. Libérate de
                  servidores con almacenamiento limitado y mantenimiento costoso.
                </p>
                <ul className="space-y-2 text-cyan-100">
                  <li>• Respaldo de servidores completos (físico o virtual)</li>
                  <li>• Bases de datos SQL</li>
                  <li>• Ejecución en tiempo real</li>
                  <li>• Soporte técnico especializado</li>
                </ul>
              </div>
            </AnimatedSection>
          </div>
        </div>
      </section>

      {/* FAQ */}
      <ServiceFAQ
        title="Preguntas sobre Cloud Computing"
        subtitle="Todo lo que necesitas saber sobre nuestros servicios en la nube"
        faqs={faqItems}
      />

      {/* Contact Form */}
      <ServiceContactForm
        serviceName="Cloud Computing"
        title="¿Listo para migrar a la nube?"
        subtitle="Nuestro equipo de expertos te ayudará a diseñar la mejor estrategia de cloud computing para tu empresa."
        colorTheme="cyan"
      />
    </>
  )
}