import { useEffect, useRef, useState } from "react";
import { 
  Bot, Zap, Globe, Headphones, Sparkles, TrendingUp, Shield, Clock, 
  ArrowRight, Star, Cpu, Menu, X, CheckCircle, Mail, Phone, MapPin, 
  Linkedin, Twitter, Instagram, Github, MessageCircle, Award, Target,
  BarChart3, Layers, ChevronDown, PlayCircle, Calendar, Users,
  Code, Database, Settings, Briefcase, Building2, Factory
} from "lucide-react";

const LandingPage = () => {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [isScrolled, setIsScrolled] = useState(false);
  const [scrollY, setScrollY] = useState(0);
  const [activeSection, setActiveSection] = useState('hero');
  
  // Parallax refs
  const parallaxBg1 = useRef<HTMLDivElement>(null);
  const parallaxBg2 = useRef<HTMLDivElement>(null);
  const parallaxBg3 = useRef<HTMLDivElement>(null);
  const parallaxContent = useRef<HTMLDivElement>(null);

  // Services data
  const services = [
    {
      icon: Bot,
      title: "Agentes IA Conversacionales",
      description: "Chatbots inteligentes que entienden contexto, manejan consultas complejas y convierten visitantes en clientes automáticamente.",
      features: ["Procesamiento de lenguaje natural", "Integración CRM completa", "Aprendizaje continuo"]
    },
    {
      icon: Headphones,
      title: "Soporte Automatizado",
      description: "Sistema de atención al cliente 24/7 que resuelve el 90% de consultas sin intervención humana.",
      features: ["Respuestas instantáneas", "Escalado inteligente", "Base de conocimiento dinámica"]
    },
    {
      icon: Zap,
      title: "Automatización de Procesos",
      description: "Workflows inteligentes que eliminan tareas repetitivas y optimizan operaciones empresariales.",
      features: ["Flujos personalizados", "Integración con sistemas", "Monitoreo en tiempo real"]
    },
    {
      icon: Globe,
      title: "Desarrollo Web IA",
      description: "Websites y aplicaciones con inteligencia artificial integrada para máxima conversión.",
      features: ["Personalización dinámica", "SEO automatizado", "Analytics predictivos"]
    }
  ];

  // Pricing plans
  const pricingPlans = [
    {
      name: "Starter",
      price: "2,500",
      period: "/mes",
      description: "Perfecto para pequeñas empresas que inician su transformación digital",
      features: [
        "1 Agente IA básico",
        "Hasta 1,000 conversaciones/mes",
        "Integración con 2 plataformas",
        "Soporte por email",
        "Dashboard de métricas",
        "Configuración inicial incluida"
      ],
      popular: false,
      cta: "Comenzar Prueba"
    },
    {
      name: "Professional",
      price: "7,500",
      period: "/mes",
      description: "Ideal para empresas medianas que buscan automatización completa",
      features: [
        "3 Agentes IA avanzados",
        "Hasta 10,000 conversaciones/mes",
        "Integración ilimitada",
        "Soporte prioritario 24/7",
        "Analytics avanzados",
        "Automatización de procesos",
        "Entrenamiento personalizado",
        "API completa"
      ],
      popular: true,
      cta: "Más Popular"
    },
    {
      name: "Enterprise",
      price: "Personalizado",
      period: "",
      description: "Soluciones a medida para grandes corporaciones",
      features: [
        "Agentes IA ilimitados",
        "Conversaciones ilimitadas",
        "Infraestructura dedicada",
        "Soporte técnico dedicado",
        "Desarrollo personalizado",
        "Compliance y seguridad avanzada",
        "SLA garantizado",
        "Migración completa incluida"
      ],
      popular: false,
      cta: "Contactar Ventas"
    }
  ];

  // Industries
  const industries = [
    { icon: Building2, name: "Inmobiliaria", description: "Automatización de leads y tours virtuales" },
    { icon: Briefcase, name: "Servicios", description: "Gestión de clientes y automatización de procesos" },
    { icon: Factory, name: "Manufactura", description: "Optimización de cadena de suministro" },
    { icon: Users, name: "Retail", description: "Personalización y atención al cliente" }
  ];

  // Features comparison
  const features = [
    { name: "Agentes IA conversacionales", starter: "1", professional: "3", enterprise: "Ilimitado" },
    { name: "Conversaciones mensuales", starter: "1,000", professional: "10,000", enterprise: "Ilimitadas" },
    { name: "Integraciones", starter: "2", professional: "Ilimitadas", enterprise: "Ilimitadas" },
    { name: "Soporte técnico", starter: "Email", professional: "24/7", enterprise: "Dedicado" },
    { name: "Analytics avanzados", starter: false, professional: true, enterprise: true },
    { name: "API completa", starter: false, professional: true, enterprise: true },
    { name: "Infraestructura dedicada", starter: false, professional: false, enterprise: true },
    { name: "SLA garantizado", starter: false, professional: false, enterprise: true }
  ];

  // Parallax effect
  useEffect(() => {
    const handleScroll = () => {
      const y = window.scrollY;
      setScrollY(y);
      setIsScrolled(y > 100);

      // True parallax effect - different speeds for each layer
      if (parallaxBg1.current) {
        parallaxBg1.current.style.transform = `translate3d(0, ${y * 0.5}px, 0)`;
      }
      if (parallaxBg2.current) {
        parallaxBg2.current.style.transform = `translate3d(0, ${y * 0.3}px, 0)`;
      }
      if (parallaxBg3.current) {
        parallaxBg3.current.style.transform = `translate3d(0, ${y * 0.1}px, 0)`;
      }
      if (parallaxContent.current) {
        parallaxContent.current.style.transform = `translate3d(0, ${y * -0.1}px, 0)`;
      }

      // Active section detection
      const sections = ['hero', 'servicios', 'industrias', 'precios', 'proceso', 'testimonios', 'contacto'];
      const current = sections.find(section => {
        const element = document.getElementById(section);
        if (element) {
          const rect = element.getBoundingClientRect();
          return rect.top <= 100 && rect.bottom >= 100;
        }
        return false;
      });
      if (current) setActiveSection(current);
    };

    window.addEventListener('scroll', handleScroll, { passive: true });
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  return (
    <div className="min-h-screen bg-white">
      {/* SEO Breadcrumbs */}
      <nav aria-label="Breadcrumb" className="sr-only">
        <ol itemScope itemType="https://schema.org/BreadcrumbList">
          <li itemProp="itemListElement" itemScope itemType="https://schema.org/ListItem">
            <a itemProp="item" href="https://apolod.es">
              <span itemProp="name">Inicio</span>
            </a>
            <meta itemProp="position" content="1" />
          </li>
        </ol>
      </nav>

      {/* Navigation Header */}
      <header className={`fixed top-0 left-0 right-0 z-50 transition-all duration-500 ${
        isScrolled 
          ? 'backdrop-blur-xl bg-white/95 border-b border-gray-200 shadow-lg' 
          : 'backdrop-blur-md bg-white/80'
      }`} role="banner">
        <nav className="max-w-7xl mx-auto px-6 lg:px-8 h-20 flex items-center justify-between" role="navigation" aria-label="Navegación principal">
          {/* Logo */}
          <a href="#hero" className="flex items-center gap-3" aria-label="Apolod - Inicio">
            <div className="w-10 h-10 bg-gray-900 rounded-xl flex items-center justify-center">
              <Layers className="w-5 h-5 text-white" aria-hidden="true" />
            </div>
            <span className="font-bold text-xl text-gray-900">Apolod</span>
          </a>

          {/* Desktop Navigation */}
          <div className="hidden lg:flex items-center gap-8">
            {[
              { href: '#servicios', label: 'Servicios' },
              { href: '#industrias', label: 'Industrias' },
              { href: '#precios', label: 'Precios' },
              { href: '#proceso', label: 'Proceso' },
              { href: '#contacto', label: 'Contacto' }
            ].map((item) => (
              <a
                key={item.href}
                href={item.href}
                className="text-gray-700 hover:text-gray-900 font-medium transition-colors"
              >
                {item.label}
              </a>
            ))}
          </div>

          {/* CTA Button */}
          <div className="hidden lg:block">
            <a href="#contacto">
              <button className="bg-gray-900 text-white px-6 py-3 rounded-lg font-semibold hover:bg-gray-800 transition-colors">
                Consulta Gratuita
              </button>
            </a>
          </div>

          {/* Mobile Menu Button */}
          <button 
            className="lg:hidden p-2"
            onClick={() => setIsMenuOpen(!isMenuOpen)}
          >
            {isMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
          </button>
        </nav>

        {/* Mobile Menu */}
        {isMenuOpen && (
          <div className="lg:hidden bg-white border-t border-gray-200">
            <div className="px-6 py-6 space-y-4">
              {[
                { href: '#servicios', label: 'Servicios' },
                { href: '#industrias', label: 'Industrias' },
                { href: '#precios', label: 'Precios' },
                { href: '#proceso', label: 'Proceso' },
                { href: '#contacto', label: 'Contacto' }
              ].map((item) => (
                <a
                  key={item.href}
                  href={item.href}
                  className="block text-gray-700 hover:text-gray-900 font-medium"
                  onClick={() => setIsMenuOpen(false)}
                >
                  {item.label}
                </a>
              ))}
              <button className="w-full bg-gray-900 text-white px-6 py-3 rounded-lg font-semibold">
                Consulta Gratuita
              </button>
            </div>
          </div>
        )}
      </header>

      {/* Hero Section with Real Parallax */}
      <main>
        <section id="hero" className="relative min-h-screen flex items-center justify-center overflow-hidden" role="main" aria-labelledby="hero-heading">
        {/* Parallax Background Layers */}
        <div className="absolute inset-0">
          {/* Layer 1 - Slowest */}
          <div ref={parallaxBg1} className="absolute inset-0 will-change-transform">
            <div className="absolute top-0 left-0 w-96 h-96 bg-gray-200 rounded-full blur-3xl opacity-30"></div>
            <div className="absolute bottom-0 right-0 w-[32rem] h-[32rem] bg-gray-300 rounded-full blur-3xl opacity-20"></div>
          </div>
          
          {/* Layer 2 - Medium */}
          <div ref={parallaxBg2} className="absolute inset-0 will-change-transform">
            <div className="absolute top-1/4 right-1/4 w-64 h-64 bg-gray-100 rounded-full blur-2xl opacity-40"></div>
            <div className="absolute bottom-1/3 left-1/5 w-80 h-80 bg-gray-200 rounded-full blur-2xl opacity-30"></div>
          </div>
          
          {/* Layer 3 - Fastest */}
          <div ref={parallaxBg3} className="absolute inset-0 will-change-transform">
            <div className="absolute inset-0 bg-[linear-gradient(rgba(0,0,0,0.02)_1px,transparent_1px),linear-gradient(90deg,rgba(0,0,0,0.02)_1px,transparent_1px)] bg-[size:100px_100px]"></div>
          </div>
        </div>

                  {/* Hero Content */}
        <div ref={parallaxContent} className="relative z-10 max-w-7xl mx-auto px-6 lg:px-8 text-center will-change-transform">
          <div className="inline-flex items-center gap-2 bg-white border border-gray-200 text-gray-700 px-4 py-2 rounded-full text-sm font-medium mb-8">
            <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse" aria-hidden="true"></div>
            Transformación Digital con IA
          </div>

          <h1 id="hero-heading" className="text-5xl md:text-7xl font-bold mb-8 text-gray-900 leading-tight">
            Automatiza tu negocio
            <br />
            <span className="text-gray-600">con Inteligencia Artificial</span>
          </h1>

          <p className="text-xl text-gray-600 mb-12 max-w-3xl mx-auto">
            Implementamos soluciones de IA que automatizan procesos, mejoran la atención al cliente 
            y multiplican las ventas de tu empresa.
          </p>

          <div className="flex flex-col sm:flex-row gap-4 justify-center items-center mb-16">
            <a href="https://calendly.com/kevincorreawork16/integracion-apolod" target="_blank" rel="noopener noreferrer" className="bg-gray-900 text-white px-8 py-4 rounded-lg font-semibold hover:bg-gray-800 transition-colors inline-block" aria-label="Agendar demo en vivo con consultor especializado">
              Agendar Demo en Vivo
            </a>
            <a href="#testimonios" className="border border-gray-300 text-gray-700 px-8 py-4 rounded-lg font-semibold hover:bg-gray-50 transition-colors inline-block" aria-label="Ver casos de estudio de éxito">
              Ver Casos de Éxito
            </a>
          </div>

          {/* Stats */}
          <div className="grid grid-cols-2 md:grid-cols-4 gap-8 max-w-4xl mx-auto" role="region" aria-label="Estadísticas de rendimiento">
            {[
              { number: "300+", label: "Empresas transformadas" },
              { number: "95%", label: "Reducción en costos" },
              { number: "24/7", label: "Disponibilidad" },
              { number: "10x", label: "ROI promedio" }
            ].map((stat, index) => (
              <div key={index} className="text-center">
                <div className="text-3xl font-bold text-gray-900 mb-2" aria-label={`${stat.number} ${stat.label}`}>{stat.number}</div>
                <div className="text-sm text-gray-600">{stat.label}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Scroll Indicator */}
        <div className="absolute bottom-8 left-1/2 transform -translate-x-1/2 animate-bounce">
          <ChevronDown className="w-6 h-6 text-gray-400" aria-hidden="true" />
        </div>
        </section>
      </main>

      {/* Services Section */}
      <section id="servicios" className="py-20 bg-gray-50" aria-labelledby="servicios-heading">
        <div className="max-w-7xl mx-auto px-6 lg:px-8">
          <header className="text-center mb-16">
            <h2 id="servicios-heading" className="text-4xl font-bold mb-4 text-gray-900">
              Servicios de IA Empresarial
            </h2>
            <p className="text-xl text-gray-600 max-w-3xl mx-auto">
              Soluciones personalizadas que se adaptan a las necesidades específicas de tu industria
            </p>
          </header>
          
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            {services.map((service, index) => (
              <article key={index} className="bg-white rounded-xl p-8 shadow-sm hover:shadow-md transition-shadow">
                <div className="w-12 h-12 bg-gray-900 rounded-lg flex items-center justify-center mb-6">
                  <service.icon className="h-6 w-6 text-white" aria-hidden="true" />
                </div>
                
                <h3 className="text-xl font-semibold mb-4 text-gray-900">{service.title}</h3>
                <p className="text-gray-600 mb-6">{service.description}</p>
                
                <ul className="space-y-2" role="list">
                  {service.features.map((feature, featureIndex) => (
                    <li key={featureIndex} className="flex items-center text-gray-700">
                      <CheckCircle className="w-4 h-4 text-green-500 mr-2 flex-shrink-0" aria-hidden="true" />
                      <span className="text-sm">{feature}</span>
                    </li>
                  ))}
                </ul>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* Industries Section */}
      <section id="industrias" className="py-20 bg-white" aria-labelledby="industrias-heading">
        <div className="max-w-7xl mx-auto px-6 lg:px-8">
          <header className="text-center mb-16">
            <h2 id="industrias-heading" className="text-4xl font-bold mb-4 text-gray-900">
              Industrias que Transformamos
            </h2>
            <p className="text-xl text-gray-600">
              Experiencia especializada en sectores clave de la economía
            </p>
          </header>
          
          <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
            {industries.map((industry, index) => (
              <article key={index} className="text-center p-6 rounded-xl border border-gray-200 hover:border-gray-300 transition-colors">
                <div className="w-16 h-16 bg-gray-100 rounded-lg flex items-center justify-center mx-auto mb-4">
                  <industry.icon className="h-8 w-8 text-gray-700" aria-hidden="true" />
                </div>
                <h3 className="font-semibold mb-2 text-gray-900">{industry.name}</h3>
                <p className="text-sm text-gray-600">{industry.description}</p>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* Pricing Section */}
      <section id="precios" className="py-20 bg-gray-50" aria-labelledby="precios-heading">
        <div className="max-w-7xl mx-auto px-6 lg:px-8">
          <header className="text-center mb-16">
            <h2 id="precios-heading" className="text-4xl font-bold mb-4 text-gray-900">
              Planes de Implementación
            </h2>
            <p className="text-xl text-gray-600">
              Elige el plan que mejor se adapte al tamaño y necesidades de tu empresa
            </p>
          </header>
          
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
            {pricingPlans.map((plan, index) => (
              <article key={index} className={`bg-white rounded-xl p-8 shadow-sm ${
                plan.popular ? 'ring-2 ring-gray-900 relative' : ''
              }`}>
                {plan.popular && (
                  <div className="absolute -top-3 left-1/2 transform -translate-x-1/2">
                    <span className="bg-gray-900 text-white px-4 py-1 rounded-full text-sm font-semibold">
                      Más Popular
                    </span>
                  </div>
                )}
                
                <div className="text-center mb-8">
                  <h3 className="text-xl font-semibold mb-2 text-gray-900">{plan.name}</h3>
                  <div className="mb-4">
                    <span className="text-4xl font-bold text-gray-900">€{plan.price}</span>
                    <span className="text-gray-600">{plan.period}</span>
                  </div>
                  <p className="text-gray-600 text-sm">{plan.description}</p>
                </div>
                
                <ul className="space-y-4 mb-8" role="list">
                  {plan.features.map((feature, featureIndex) => (
                    <li key={featureIndex} className="flex items-center">
                      <CheckCircle className="w-4 h-4 text-green-500 mr-3 flex-shrink-0" aria-hidden="true" />
                      <span className="text-gray-700 text-sm">{feature}</span>
                    </li>
                  ))}
                </ul>
                
                <a href="https://calendly.com/kevincorreawork16/integracion-apolod" target="_blank" rel="noopener noreferrer" className={`w-full py-3 rounded-lg font-semibold transition-colors inline-block text-center ${
                  plan.popular
                    ? 'bg-gray-900 text-white hover:bg-gray-800'
                    : 'border border-gray-300 text-gray-700 hover:bg-gray-50'
                }`} aria-label={`Agendar consulta para plan ${plan.name}`}>
                  {plan.name === "Enterprise" ? "Agendar Consulta" : plan.cta}
                </a>
              </article>
            ))}
          </div>

          {/* Features Comparison */}
          <div className="bg-white rounded-xl p-8 shadow-sm">
            <h3 className="text-2xl font-bold mb-8 text-center text-gray-900">
              Comparación Detallada
            </h3>
            
            <div className="overflow-x-auto">
              <table className="w-full">
                <thead>
                  <tr className="border-b border-gray-200">
                    <th className="text-left py-4 text-gray-900 font-semibold">Características</th>
                    <th className="text-center py-4 text-gray-900 font-semibold">Starter</th>
                    <th className="text-center py-4 text-gray-900 font-semibold">Professional</th>
                    <th className="text-center py-4 text-gray-900 font-semibold">Enterprise</th>
                  </tr>
                </thead>
                <tbody>
                  {features.map((feature, index) => (
                    <tr key={index} className="border-b border-gray-100">
                      <td className="py-4 text-gray-700">{feature.name}</td>
                      <td className="text-center py-4">
                        {typeof feature.starter === 'boolean' ? (
                          feature.starter ? (
                            <CheckCircle className="w-5 h-5 text-green-500 mx-auto" />
                          ) : (
                            <X className="w-5 h-5 text-gray-300 mx-auto" />
                          )
                        ) : (
                          <span className="text-gray-900">{feature.starter}</span>
                        )}
                      </td>
                      <td className="text-center py-4">
                        {typeof feature.professional === 'boolean' ? (
                          feature.professional ? (
                            <CheckCircle className="w-5 h-5 text-green-500 mx-auto" />
                          ) : (
                            <X className="w-5 h-5 text-gray-300 mx-auto" />
                          )
                        ) : (
                          <span className="text-gray-900">{feature.professional}</span>
                        )}
                      </td>
                      <td className="text-center py-4">
                        {typeof feature.enterprise === 'boolean' ? (
                          feature.enterprise ? (
                            <CheckCircle className="w-5 h-5 text-green-500 mx-auto" />
                          ) : (
                            <X className="w-5 h-5 text-gray-300 mx-auto" />
                          )
                        ) : (
                          <span className="text-gray-900">{feature.enterprise}</span>
                        )}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </section>

      {/* Process Section */}
      <section id="proceso" className="py-20 bg-white" aria-labelledby="proceso-heading">
        <div className="max-w-7xl mx-auto px-6 lg:px-8">
          <header className="text-center mb-16">
            <h2 id="proceso-heading" className="text-4xl font-bold mb-4 text-gray-900">
              Nuestro Proceso de Implementación
            </h2>
            <p className="text-xl text-gray-600">
              Metodología probada para garantizar el éxito de tu transformación digital
            </p>
          </header>
          
          <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
            {[
              {
                step: "01",
                title: "Análisis y Diagnóstico",
                description: "Evaluamos tus procesos actuales y identificamos oportunidades de mejora con IA."
              },
              {
                step: "02", 
                title: "Diseño de Solución",
                description: "Creamos una estrategia personalizada con tecnologías específicas para tu negocio."
              },
              {
                step: "03",
                title: "Desarrollo e Integración", 
                description: "Implementamos las soluciones de IA e integramos con tus sistemas existentes."
              },
              {
                step: "04",
                title: "Optimización Continua",
                description: "Monitoreamos resultados y optimizamos continuamente para maximizar el ROI."
              }
            ].map((item, index) => (
              <article key={index} className="text-center">
                <div className="w-16 h-16 bg-gray-900 text-white rounded-lg flex items-center justify-center mx-auto mb-4 text-xl font-bold" aria-hidden="true">
                  {item.step}
                </div>
                <h3 className="text-lg font-semibold mb-3 text-gray-900">{item.title}</h3>
                <p className="text-gray-600">{item.description}</p>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* Testimonials Section */}
      <section id="testimonios" className="py-20 bg-gray-50" aria-labelledby="testimonios-heading">
        <div className="max-w-7xl mx-auto px-6 lg:px-8">
          <header className="text-center mb-16">
            <h2 id="testimonios-heading" className="text-4xl font-bold mb-4 text-gray-900">
              Casos de Éxito
            </h2>
            <p className="text-xl text-gray-600">
              Empresas que han transformado sus resultados con nuestras soluciones
            </p>
          </header>
          
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {[
              {
                name: "María González",
                position: "CEO, TechCorp",
                content: "Implementamos los agentes IA de Apolod y nuestras ventas aumentaron un 340% en 6 meses. La automatización nos permite enfocar en estrategia.",
                result: "+340% ventas"
              },
              {
                name: "Carlos Mendoza", 
                position: "Director, LogiFlow",
                content: "La automatización de procesos nos ahorra 25 horas semanales. El ROI fue inmediato y continúa creciendo cada mes.",
                result: "25h/semana ahorradas"
              },
              {
                name: "Ana Ruiz",
                position: "Fundadora, StartupHub", 
                content: "El soporte automatizado mejoró nuestra satisfacción del cliente del 70% al 96%. Impresionante nivel de personalización.",
                result: "96% satisfacción"
              }
            ].map((testimonial, index) => (
              <article key={index} className="bg-white rounded-xl p-8 shadow-sm">
                <div className="flex gap-1 mb-4" role="img" aria-label="5 estrellas">
                  {[...Array(5)].map((_, i) => (
                    <Star key={i} className="w-4 h-4 text-yellow-400 fill-current" aria-hidden="true" />
                  ))}
                </div>
                
                <p className="text-gray-700 mb-6 italic">"{testimonial.content}"</p>
                
                <div className="border-t border-gray-200 pt-4">
                  <div className="flex justify-between items-center">
                    <div>
                      <div className="font-semibold text-gray-900">{testimonial.name}</div>
                      <div className="text-sm text-gray-600">{testimonial.position}</div>
                    </div>
                    <div className="bg-gray-100 px-3 py-1 rounded-full text-sm font-semibold text-gray-900">
                      {testimonial.result}
                    </div>
                  </div>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section id="contacto" className="py-20 bg-gray-900 text-white" aria-labelledby="contacto-heading">
        <div className="max-w-4xl mx-auto px-6 lg:px-8 text-center">
          <h2 id="contacto-heading" className="text-4xl font-bold mb-6">
            Comienza tu Transformación Digital Hoy
          </h2>
          
          <p className="text-xl text-gray-300 mb-12">
            Agenda una consulta gratuita de 30 minutos donde analizamos tu negocio 
            y te mostramos cómo la IA puede transformar tus resultados.
          </p>
          
          <div className="flex flex-col sm:flex-row gap-4 justify-center items-center mb-12">
            <a href="https://calendly.com/kevincorreawork16/integracion-apolod" target="_blank" rel="noopener noreferrer" className="bg-white text-gray-900 px-8 py-4 rounded-lg font-semibold hover:bg-gray-100 transition-colors inline-flex items-center" aria-label="Agendar consulta gratuita de 30 minutos">
              <Calendar className="w-5 h-5 mr-2" aria-hidden="true" />
              Agendar Consulta Gratuita
            </a>
            
            <a href="mailto:kevincorreawork16@gmail.com?subject=Consulta%20sobre%20servicios%20de%20IA" className="border border-gray-600 text-white px-8 py-4 rounded-lg font-semibold hover:bg-gray-800 transition-colors inline-block" aria-label="Contactar por email para más información">
              Contactar por Email
            </a>
          </div>
          
          <address className="grid grid-cols-1 md:grid-cols-3 gap-8 not-italic">
            <div className="text-center">
              <Phone className="h-8 w-8 mx-auto mb-4 text-gray-400" aria-hidden="true" />
              <h3 className="font-semibold mb-2">Teléfono</h3>
              <p className="text-gray-400">
                <a href="tel:+59899429264" className="hover:text-white transition-colors">+598 99 429 264</a>
              </p>
            </div>
            
            <div className="text-center">
              <Mail className="h-8 w-8 mx-auto mb-4 text-gray-400" aria-hidden="true" />
              <h3 className="font-semibold mb-2">Email</h3>
              <p className="text-gray-400">
                <a href="mailto:kevincorreawork16@gmail.com" className="hover:text-white transition-colors">kevincorreawork16@gmail.com</a>
              </p>
            </div>
            
            <div className="text-center">
              <MapPin className="h-8 w-8 mx-auto mb-4 text-gray-400" aria-hidden="true" />
              <h3 className="font-semibold mb-2">Ubicación</h3>
              <p className="text-gray-400">Madrid, España</p>
            </div>
          </address>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-gray-900 text-white border-t border-gray-800" role="contentinfo">
        <div className="max-w-7xl mx-auto px-6 lg:px-8 py-12">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
            <div className="md:col-span-2">
              <div className="flex items-center gap-3 mb-4">
                <div className="w-8 h-8 bg-white rounded-lg flex items-center justify-center">
                  <Layers className="h-4 w-4 text-gray-900" aria-hidden="true" />
                </div>
                <span className="text-xl font-bold">Apolod</span>
              </div>
              
              <p className="text-gray-400 mb-6 max-w-md">
                Transformamos empresas con soluciones de Inteligencia Artificial 
                que automatizan procesos y multiplican resultados.
              </p>
              
              <div className="flex gap-4">
                {[
                  { icon: Linkedin, href: "https://www.linkedin.com/in/kevin--correa/", label: "LinkedIn" },
                ].map((social, index) => (
                  <a
                    key={index}
                    href={social.href}
                    className="w-8 h-8 bg-gray-800 rounded-lg flex items-center justify-center hover:bg-gray-700 transition-colors"
                    aria-label={`Síguenos en ${social.label}`}
                    target="_blank"
                    rel="noopener noreferrer"
                  >
                    <social.icon className="h-4 w-4" aria-hidden="true" />
                  </a>
                ))}
              </div>
            </div>
            
            <nav>
              <h3 className="font-semibold mb-4">Servicios</h3>
              <ul className="space-y-2">
                <li><a href="#servicios" className="text-gray-400 hover:text-white transition-colors">Agentes IA</a></li>
                <li><a href="#servicios" className="text-gray-400 hover:text-white transition-colors">Automatización</a></li>
                <li><a href="#servicios" className="text-gray-400 hover:text-white transition-colors">Soporte IA</a></li>
                <li><a href="#servicios" className="text-gray-400 hover:text-white transition-colors">Desarrollo Web</a></li>
              </ul>
            </nav>
            
            <nav>
              <h3 className="font-semibold mb-4">Empresa</h3>
              <ul className="space-y-2">
                <li><a href="#hero" className="text-gray-400 hover:text-white transition-colors">Sobre nosotros</a></li>
                <li><a href="#testimonios" className="text-gray-400 hover:text-white transition-colors">Casos de estudio</a></li>
                <li><a href="#proceso" className="text-gray-400 hover:text-white transition-colors">Metodología</a></li>
                <li><a href="#contacto" className="text-gray-400 hover:text-white transition-colors">Contacto</a></li>
              </ul>
            </nav>
          </div>
          
          <div className="border-t border-gray-800 mt-8 pt-8 text-center">
            <p className="text-gray-400 text-sm">
              © 2024 Apolod. Todos los derechos reservados.
            </p>
          </div>
        </div>
      </footer>

      {/* Floating CTA */}
      <aside className="fixed bottom-6 right-6 z-50">
        <a
          href="https://wa.me/59899429264?text=Hola,%20me%20interesa%20conocer%20más%20sobre%20sus%20servicios%20de%20IA%20y%20automatización"
          className="w-14 h-14 bg-gray-900 text-white rounded-full flex items-center justify-center shadow-xl hover:scale-110 transition-all duration-300 group"
          aria-label="Contactar por WhatsApp para consulta inmediata"
          target="_blank"
          rel="noopener noreferrer"
        >
          <MessageCircle className="w-6 h-6" aria-hidden="true" />
          <div className="absolute right-full mr-4 bg-gray-900 text-white px-3 py-2 rounded-lg text-sm whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity">
            Consulta inmediata
          </div>
        </a>
      </aside>
    </div>
  );
};

export default LandingPage;