'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 {
  Code,
  TestTube,
  HeadphonesIcon,
  Shield,
  Database,
  HardDrive,
  Server,
  Users,
  CreditCard,
  Cpu,
  GraduationCap,
  DollarSign,
  Heart,
  Package,
  ShoppingCart,
  Phone,
  Truck,
  ArrowRight,
} from 'lucide-react'

const services = [
  {
    icon: TestTube,
    title: 'Prueba de Software',
    description: 'Servicios integrales de pruebas de calidad para brindar soluciones de manera ágil.',
  },
  {
    icon: HeadphonesIcon,
    title: 'Servicios de Soporte',
    description: 'Garantizamos el cumplimiento de los servicios con seguimiento, informes y gestión.',
  },
  {
    icon: Shield,
    title: 'Seguridad de TI',
    description: 'Identificamos vulnerabilidades e implementamos los cifrados y protocolos necesarios.',
  },
  {
    icon: Database,
    title: 'Migraciones de Datos',
    description: 'Migraciones en la nube, actualizaciones del sistema y modernización de software.',
  },
  {
    icon: HardDrive,
    title: 'Backup y Recuperación',
    description: 'Estrategias sólidas de respaldo para garantizar integridad de datos y continuidad.',
  },
  {
    icon: Server,
    title: 'Soporte de Infraestructura',
    description: 'Mesa de ayuda, mensajería, colaboración, administración de redes y sistemas.',
  },
]

const solutions = [
  { icon: Users, title: 'CRM', description: 'Gestión de relaciones con el cliente' },
  { icon: Package, title: 'ERP', description: 'Planificación de recursos empresariales' },
  { icon: CreditCard, title: 'Pagos y POS', description: 'Procesamiento de pagos y punto de venta' },
  { icon: Cpu, title: 'AI & IoT', description: 'Inteligencia artificial e Internet de las cosas' },
]

const industries = [
  { icon: GraduationCap, name: 'E-learning y Educación' },
  { icon: DollarSign, name: 'Finanzas' },
  { icon: Heart, name: 'Cuidados de la salud' },
  { icon: Package, name: 'Inventarios' },
  { icon: ShoppingCart, name: 'Punto de ventas' },
  { icon: Phone, name: 'Telefonía' },
  { icon: Truck, name: 'Transporte' },
]

const faqItems: FAQItem[] = [
  {
    question: '¿Cuánto tiempo toma desarrollar una aplicación?',
    answer: 'El tiempo varía según la complejidad. Un MVP básico toma de 4 a 6 semanas. Una aplicación completa puede tomar de 3 a 6 meses. Durante la consulta inicial definimos un cronograma detallado.',
  },
  {
    question: '¿Qué tecnologías utilizan?',
    answer: 'Utilizamos tecnologías modernas y probadas: React, Next.js, Node.js, Python, Go para backend; React Native y Flutter para móvil; PostgreSQL, MongoDB y Redis para bases de datos; AWS, GCP y Azure para infraestructura.',
  },
  {
    question: '¿El código fuente me pertenece?',
    answer: 'Sí, al finalizar el proyecto recibes el 100% del código fuente y toda la documentación técnica. El software desarrollado es completamente tuyo.',
  },
  {
    question: '¿Ofrecen mantenimiento después del lanzamiento?',
    answer: 'Sí, ofrecemos planes de mantenimiento mensual que incluyen actualizaciones de seguridad, corrección de bugs, nuevas funcionalidades y soporte técnico.',
  },
  {
    question: '¿Cómo es el proceso de desarrollo?',
    answer: 'Seguimos metodología ágil con sprints de 2 semanas. Tendrás visibilidad completa del avance con demos regulares, acceso al repositorio de código y comunicación directa con el equipo de desarrollo.',
  },
]

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

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

            <p className="text-xl text-orange-100 font-semibold mb-4">
              Software y Aplicaciones de Clase Mundial
            </p>

            <p className="text-lg text-orange-100 max-w-2xl mx-auto mb-8">
              Contamos con desarrolladores expertos y vasta experiencia en industrias
              específicas para crear soluciones personalizadas.
            </p>

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

      {/* Target Audience */}
      <section className="py-12 bg-gray-50">
        <div className="container-custom">
          <AnimatedContainer className="flex flex-wrap justify-center gap-8">
            <AnimatedItem className="text-center">
              <div className="text-3xl font-bold text-orange-600">Startups</div>
              <p className="text-gray-600">Empresas emergentes</p>
            </AnimatedItem>
            <AnimatedItem className="text-center">
              <div className="text-3xl font-bold text-orange-600">PYMES</div>
              <p className="text-gray-600">Pequeñas y medianas empresas</p>
            </AnimatedItem>
            <AnimatedItem className="text-center">
              <div className="text-3xl font-bold text-orange-600">Corporaciones</div>
              <p className="text-gray-600">Grandes empresas</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">
              Modelo ágil de gestión del ciclo de vida del producto de extremo a extremo
            </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-orange-100 rounded-xl flex items-center justify-center mb-4">
                      <service.icon className="w-6 h-6 text-orange-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>

      {/* Solutions */}
      <section className="section-padding bg-gray-50">
        <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">
              Soluciones Empresariales
            </h2>
            <p className="mt-4 text-lg text-gray-600">
              Aumente su equipo de desarrollo o cree una solución desde cero
            </p>
          </AnimatedSection>

          <AnimatedContainer className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
            {solutions.map((solution, idx) => (
              <AnimatedItem key={idx}>
                <Card hover className="h-full">
                  <CardContent className="p-6 text-center">
                    <div className="w-16 h-16 bg-orange-100 rounded-full flex items-center justify-center mx-auto mb-4">
                      <solution.icon className="w-8 h-8 text-orange-600" />
                    </div>
                    <h3 className="font-bold text-gray-900 mb-1">{solution.title}</h3>
                    <p className="text-sm text-gray-600">{solution.description}</p>
                  </CardContent>
                </Card>
              </AnimatedItem>
            ))}
          </AnimatedContainer>
        </div>
      </section>

      {/* Industries */}
      <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">
              Industrias que Atendemos
            </h2>
            <p className="mt-4 text-lg text-gray-600">
              Amplia experiencia en la creación de aplicaciones y soluciones personalizadas
            </p>
          </AnimatedSection>

          <AnimatedContainer className="flex flex-wrap justify-center gap-4">
            {industries.map((industry, idx) => (
              <AnimatedItem key={idx}>
                <div className="flex items-center gap-2 bg-white border border-gray-200 rounded-full px-6 py-3 hover:border-orange-300 hover:bg-orange-50 transition-colors">
                  <industry.icon className="w-5 h-5 text-orange-600" />
                  <span className="font-medium text-gray-700">{industry.name}</span>
                </div>
              </AnimatedItem>
            ))}
          </AnimatedContainer>
        </div>
      </section>

      {/* FAQ */}
      <ServiceFAQ
        title="Preguntas sobre Desarrollo de Software"
        subtitle="Resolvemos tus dudas sobre nuestro proceso de desarrollo"
        faqs={faqItems}
      />

      {/* Contact Form */}
      <ServiceContactForm
        serviceName="Desarrollo de Software"
        title="¿Tienes un proyecto en mente?"
        subtitle="Nuestro equipo de desarrolladores está listo para convertir tu idea en realidad."
        colorTheme="orange"
      />
    </>
  )
}