import React, { useState, useEffect, useRef } from 'react';
import { colors, tailwindClasses } from '../theme';

const HUB_URL = import.meta.env.VITE_HUB_URL || 'http://localhost:3001';
const hubLoginUrl = () => {
  const returnTo = encodeURIComponent(`${window.location.origin}/auth/sso`);
  return `${HUB_URL}/login?return_to=${returnTo}`;
};

export default function LandingAnimated() {
  const [isScrolled, setIsScrolled] = useState(false);
  const [activeSection, setActiveSection] = useState('inicio');
  const [visibleElements, setVisibleElements] = useState(new Set());
  const [contactForm, setContactForm] = useState({
    name: '',
    email: '',
    company: '',
    message: ''
  });

  const currentYear = new Date().getFullYear();
  const observerRef = useRef(null);
  const sectionsRef = useRef({});

  // Configurar Intersection Observer para animaciones y navegación activa
  useEffect(() => {
    // Observer para animaciones de elementos
    const animationObserver = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            const elementId = entry.target.dataset.animate;
            if (elementId) {
              setVisibleElements(prev => new Set([...prev, elementId]));
            }
          }
        });
      },
      {
        threshold: 0.1,
        rootMargin: '0px 0px -100px 0px'
      }
    );

    // Observer para navegación activa
    const navigationObserver = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            setActiveSection(entry.target.id);
          }
        });
      },
      {
        threshold: 0.3,
        rootMargin: '-20% 0px -70% 0px'
      }
    );

    // Observar elementos para animaciones
    const animatedElements = document.querySelectorAll('[data-animate]');
    animatedElements.forEach(el => animationObserver.observe(el));

    // Observar secciones para navegación
    const sections = document.querySelectorAll('section[id]');
    sections.forEach(section => navigationObserver.observe(section));

    return () => {
      animationObserver.disconnect();
      navigationObserver.disconnect();
    };
  }, []);

  // Efecto de scroll para navbar
  useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 50);
    };

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

  // Smooth scroll para navegación
  const scrollToSection = (sectionId) => {
    const element = document.getElementById(sectionId);
    if (element) {
      element.scrollIntoView({ 
        behavior: 'smooth',
        block: 'start'
      });
    }
  };

  const handleContactSubmit = (e) => {
    e.preventDefault();
    alert('Gracias por tu mensaje. Nos pondremos en contacto contigo pronto.');
    setContactForm({ name: '', email: '', company: '', message: '' });
  };

  // Clase de animación condicional
  const getAnimationClass = (elementId, baseClass = '') => {
    return visibleElements.has(elementId) 
      ? `${baseClass} animate-fade-in-up opacity-100 translate-y-0` 
      : `${baseClass} opacity-0 translate-y-8`;
  };

  // Estadísticas animadas
  const stats = [
    { number: '350+', label: 'Clientes', icon: '🏢' },
    { number: '15,000+', label: 'Pedimentos Procesados', icon: '📋' },
    { number: '99.9%', label: 'Uptime Garantizado', icon: '⚡' },
    { number: '24/7', label: 'Soporte Especializado', icon: '🛡️' }
  ];

  return (
    <div className="min-h-screen" style={{ backgroundColor: '#F2F4F7' }}>
      {/* Navbar flotante con efectos */}
      <header className={`fixed top-0 w-full z-50 transition-all duration-300 ${
        isScrolled 
          ? 'bg-white/95 backdrop-blur-md shadow-lg border-b border-gray-200' 
          : 'bg-transparent'
      }`}>
        <div className="px-4 mx-auto max-w-7xl sm:px-6 lg:px-8">
          <div className="flex items-center justify-between py-4">
            <div className="flex items-center">
              <div className="flex-shrink-0">
                <h1 className="text-2xl font-bold">
                  <span 
                    className="text-transparent bg-clip-text"
                    style={{ 
                      color: isScrolled
                        ? 'transparent'
                        : '#FFFFFF',
                      background: isScrolled
                        ? 'linear-gradient(to right, #1B2A41, #4DA6FF)'
                        : 'none',
                      WebkitBackgroundClip: isScrolled ? 'text' : 'unset',
                      WebkitTextFillColor: isScrolled ? 'transparent' : '#FFFFFF',
                      backgroundClip: isScrolled ? 'text' : 'unset'
                    }}

                  >
                    EFC
                  </span>
                </h1>
              </div>
              <nav className="hidden ml-10 space-x-8 md:flex">
                {[
                  { id: 'inicio', label: 'Inicio' },
                  { id: 'estadisticas', label: 'Confianza' },
                  { id: 'caracteristicas', label: 'Características' },
                  { id: 'testimonios', label: 'Testimonios' },
                  { id: 'precios', label: 'Precios' },
                  { id: 'contacto', label: 'Contacto' }
                ].map((item) => (
    <button
      key={item.id}
      onClick={() => scrollToSection(item.id)}
      className={`relative text-sm font-medium transition-all duration-300 hover:scale-105 group`}
      style={{
        color: item.id === 'inicio' 
          ? (isScrolled 
              ? (activeSection === 'inicio' ? '#1B2A41' : '#333333')
              : (activeSection === 'inicio' ? 'white' : 'white'))
          : (activeSection === item.id
              ? '#1B2A41'
              : isScrolled
              ? '#333333'
              : 'white')
      }}
      onMouseEnter={(e) => {
        if (activeSection !== item.id) {
          if (item.id === 'inicio') {
            e.target.style.color = isScrolled ? '#1B2A41' : '#4DA6FF';
          } else {
            e.target.style.color = isScrolled ? '#1B2A41' : '#4DA6FF';
          }
        }
      }}
      onMouseLeave={(e) => {
        if (activeSection !== item.id) {
          if (item.id === 'inicio') {
            e.target.style.color = isScrolled ? '#333333' : 'white';
          } else {
            e.target.style.color = isScrolled ? '#333333' : 'white';
          }
        }
      }}
    >
      {item.label}
      <span 
        className={`absolute -bottom-1 left-0 h-0.5 transition-all duration-300 ${
          activeSection === item.id ? 'w-full' : 'w-0 group-hover:w-full'
        }`}
        style={{ 
          backgroundColor: item.id === 'inicio' && !isScrolled && activeSection === 'inicio' 
            ? 'white' 
            : '#1B2A41' 
        }}
      ></span>
    </button>
                ))}
              </nav>
            </div>
            <div className="flex items-center space-x-4">
              <a
                href="/login"
                className="px-6 py-2 rounded-full text-sm font-medium transition-all duration-200 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 text-white"
                style={{
                  background: 'linear-gradient(to right, #1B2A41, #4DA6FF)',
                }}
                onMouseEnter={(e) => {
                  e.target.style.background = 'linear-gradient(to right, #162234, #1976D2)';
                }}
                onMouseLeave={(e) => {
                  e.target.style.background = 'linear-gradient(to right, #1B2A41, #4DA6FF)';
                }}
              >
                Acceder
              </a>
            </div>
          </div>
        </div>
      </header>

      {/* Hero Section con efectos de gradiente animado */}
      <section id="inicio" className="relative flex items-center min-h-screen overflow-hidden">
        {/* Background con imagen */}
        <div className="absolute inset-0">
          {/* Imagen de fondo */}
          <div 
            className="absolute inset-0 bg-center bg-no-repeat bg-cover"
            style={{
              backgroundImage: 'url("images/empresaria001.webp")', // Cambia esta ruta
              backgroundColor: '#1B2A41', // Color de respaldo
            }}
          >
            {/* Overlay para oscurecer la imagen y mejorar legibilidad */}
            <div 
              className="absolute inset-0"
              style={{
                background: 'linear-gradient(to bottom, rgba(27, 42, 65, 0.85), rgba(27, 42, 65, 0.7))',
              }}
            ></div>
          </div>
            
          {/* Efectos adicionales */}
          <div className="absolute inset-0 opacity-20">
            <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/5 to-transparent animate-pulse"></div>
          </div>
        </div>

        <div className="relative px-4 py-32 mx-auto text-center max-w-7xl sm:px-6 lg:px-8">
          <div className="space-y-8">
            <h1 
              data-animate="hero-title"
              className={`text-5xl sm:text-6xl md:text-7xl font-extrabold text-white transition-all duration-1000 ${
                visibleElements.has('hero-title') 
                  ? 'opacity-100 translate-y-0' 
                  : 'opacity-0 translate-y-10'
              }`}
            >
              <span className="block">
                <span 
                  className="text-transparent bg-clip-text"
                  style={{
                    background: 'linear-gradient(to right, white, #64B5F6)',
                    WebkitBackgroundClip: 'text',
                    WebkitTextFillColor: 'transparent'
                  }}
                >
                  EFC
                </span>
              </span>
              <span 
                className="block mt-4 text-3xl text-transparent sm:text-4xl md:text-5xl bg-clip-text"
                style={{
                  background: 'linear-gradient(to right, #64B5F6, white)',
                  WebkitBackgroundClip: 'text',
                  WebkitTextFillColor: 'transparent'
                }}
              >
                Para Agentes Aduanales
              </span>
              <span 
                className="block text-3xl text-transparent sm:text-4xl md:text-5xl bg-clip-text"
                style={{
                  background: 'linear-gradient(to right, white, #64B5F6)',
                  WebkitBackgroundClip: 'text',
                  WebkitTextFillColor: 'transparent'
                }}
              >
                e Importadores
              </span>
            </h1>
            
            <p 
              data-animate="hero-subtitle"
              className={`text-xl sm:text-2xl max-w-4xl mx-auto leading-relaxed transition-all duration-1000 delay-300 ${
                visibleElements.has('hero-subtitle') 
                  ? 'opacity-100 translate-y-0' 
                  : 'opacity-0 translate-y-10'
              }`}
              style={{ color: '#64B5F6' }}
            >
              La plataforma líder desarrollada por 
              <span className="font-bold text-white"> Aduanasoft®</span> para 
              <span className="font-semibold" style={{ color: '#FFFFFF' }}> digitalizar y optimizar</span> 
              {' '}todos tus procesos de comercio exterior con tecnología de vanguardia
            </p>
            
            <div 
              data-animate="hero-buttons"
              className={`flex flex-col sm:flex-row gap-6 justify-center transition-all duration-1000 delay-500 ${
                visibleElements.has('hero-buttons') 
                  ? 'opacity-100 translate-y-0' 
                  : 'opacity-0 translate-y-10'
              }`}
            >
              <a
                href="/login"
                className="inline-flex items-center px-8 py-4 text-lg font-semibold transition-all duration-300 transform rounded-full shadow-2xl group hover:shadow-3xl hover:-translate-y-1 hover:scale-105"
                style={{
                  color: '#1B2A41',
                  background: 'linear-gradient(to right, white, #F2F4F7)'
                }}
                onMouseEnter={(e) => {
                  e.target.style.background = 'linear-gradient(to right, #F2F4F7, white)';
                }}
                onMouseLeave={(e) => {
                  e.target.style.background = 'linear-gradient(to right, white, #F2F4F7)';
                }}
              >
                <span>Comenzar Ahora</span>
                <svg className="w-5 h-5 ml-2 transition-transform duration-200 group-hover:translate-x-1" fill="currentColor" viewBox="0 0 20 20">
                  <path fillRule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clipRule="evenodd" />
                </svg>
              </a>
              <button 
                onClick={() => scrollToSection('caracteristicas')}
                className="inline-flex items-center px-8 py-4 text-lg font-semibold text-white transition-all duration-300 bg-transparent border-2 rounded-full group border-white/30 hover:border-white hover:bg-white/10 backdrop-blur-sm"
              >
                <svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h1m4 0h1m-6 4h.01M19 10a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                <span>Ver Demo</span>
              </button>
            </div>

            {/* Floating cards con efectos */}
            <div className="grid max-w-4xl grid-cols-1 gap-6 mx-auto md:grid-cols-3">
              {[
                { icon: '🚀', title: 'Rápido', desc: 'Procesamiento instantáneo' },
                { icon: '🔒', title: 'Seguro', desc: 'Cifrado de nivel bancario' },
                { icon: '📊', title: 'Inteligente', desc: 'IA para optimización' },
              ].map((feature, index) => (
                <div 
                  key={index}
                  data-animate={`hero-card-${index}`}
                  className={`bg-white/10 backdrop-blur-md rounded-2xl p-6 border border-white/20 hover:bg-white/20 transition-all duration-500 hover:scale-105 hover:shadow-2xl ${
                    visibleElements.has(`hero-card-${index}`) 
                      ? 'opacity-100 translate-y-0' 
                      : 'opacity-0 translate-y-10'
                  }`}
                  style={{ transitionDelay: `${700 + index * 200}ms` }}
                >
                  <div className="mb-3 text-4xl">{feature.icon}</div>
                  <h3 className="mb-2 text-lg font-semibold text-white">{feature.title}</h3>
                  <p className="text-sm" style={{ color: '#64B5F6' }}>{feature.desc}</p>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Scroll indicator animado */}
        <div className="absolute transform -translate-x-1/2 bottom-8 left-1/2 animate-bounce">
          <button 
            onClick={() => scrollToSection('estadisticas')}
            className="transition-colors duration-200 text-white/70 hover:text-white"
          >
            <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
            </svg>
          </button>
        </div>
      </section>

      {/* Sección de Estadísticas y Confianza */}
      <section id="estadisticas" className="py-20" style={{ background: 'linear-gradient(to right, #F2F4F7, white)' }}>
        <div className="px-4 mx-auto max-w-7xl sm:px-6 lg:px-8">
          <div 
            data-animate="stats-header"
            className={`text-center mb-16 transition-all duration-1000 ${
              visibleElements.has('stats-header') 
                ? 'opacity-100 translate-y-0' 
                : 'opacity-0 translate-y-10'
            }`}
          >
            <h2 className="mb-4 text-4xl font-extrabold" style={{ color: '#333333' }}>
              Más de <span style={{ color: '#1B2A41' }}>350 empresas</span> confían en nosotros
            </h2>
            <p className="max-w-3xl mx-auto text-xl" style={{ color: '#7A7A7A' }}>
              Desarrollado por <span className="font-bold" style={{ color: '#1B2A41' }}>Aduanasoft®</span>, 
              líderes en tecnología aduanal con más de 29 años de experiencia
            </p>
          </div>

          {/* Stats con animaciones */}
          <div className="grid grid-cols-2 gap-8 mb-16 lg:grid-cols-4">
            {stats.map((stat, index) => (
              <div 
                key={index}
                data-animate={`stat-${index}`}
                className={`text-center p-6 bg-white rounded-2xl shadow-lg hover:shadow-xl transition-all duration-700 hover:scale-105 border border-gray-100 ${
                  visibleElements.has(`stat-${index}`) 
                    ? 'opacity-100 translate-y-0 scale-100' 
                    : 'opacity-0 translate-y-10 scale-95'
                }`}
                style={{ transitionDelay: `${index * 200}ms` }}
              >
                <div className="mb-4 text-4xl animate-pulse">{stat.icon}</div>
                <div className="mb-2 text-3xl font-bold" style={{ color: '#1B2A41' }}>{stat.number}</div>
                <div className="font-medium" style={{ color: '#7A7A7A' }}>{stat.label}</div>
              </div>
            ))}
          </div>

          {/* AduanaSoft Info */}
          <div 
            data-animate="aduanasoft-info"
            className={`rounded-3xl p-8 md:p-12 text-white transition-all duration-1000 ${
              visibleElements.has('aduanasoft-info') 
                ? 'opacity-100 translate-y-0' 
                : 'opacity-0 translate-y-10'
            }`}
            style={{ background: 'linear-gradient(to right, #1B2A41, #263549)' }}
          >
            <div className="grid items-center gap-8 md:grid-cols-2">
              <div>
                <h3 className="mb-6 text-3xl font-bold">Acerca de Aduanasoft</h3>
                <div className="space-y-4 text-indigo-100">
                  {[
                    "29+ años especializados en software aduanal",
                    "Equipo experto en comercio exterior y tecnología",
                    "Certificación SAT y cumplimiento normativo total",
                    "Soporte 24/7 con especialistas aduanales"
                  ].map((item, idx) => (
                    <div key={idx} className="flex items-start space-x-3">
                      <div className="flex items-center justify-center flex-shrink-0 w-6 h-6 mt-1 rounded-full bg-white/20">
                        <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                          <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
                        </svg>
                      </div>
                      <p><strong>{item.split(' ')[0]} {item.split(' ')[1]}</strong> {item.split(' ').slice(2).join(' ')}</p>
                    </div>
                  ))}
                </div>
              </div>
              <div className="text-center">
                <div className="p-8 border bg-white/10 backdrop-blur-md rounded-2xl border-white/20">
                  <div className="mb-4 text-6xl">🏆</div>
                  <h4 className="mb-2 text-2xl font-bold">Líder del Mercado</h4>
                  <p className="text-indigo-100">
                    Reconocidos como la mejor solución tecnológica para agentes aduanales en México
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Características con efectos interactivos */}
      <section id="caracteristicas" className="py-20 bg-white">
        <div className="px-4 mx-auto max-w-7xl sm:px-6 lg:px-8">
          <div 
            data-animate="features-header"
            className={`text-center mb-16 transition-all duration-1000 ${
              visibleElements.has('features-header') 
                ? 'opacity-100 translate-y-0' 
                : 'opacity-0 translate-y-10'
            }`}
          >
            <h2 className="mb-4 text-4xl font-extrabold text-gray-900">
              Soluciones Especializadas para Comercio Exterior
            </h2>
            <p className="text-xl text-gray-600">
              Herramientas diseñadas específicamente para las necesidades de agentes aduanales e importadores
            </p>
          </div>

          <div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
            {[
              {
                icon: '📋',
                title: 'Gestión de Pedimentos',
                description: 'Administra pedimentos de importación y exportación, documentos aduanales, clasificaciones arancelarias y toda la documentación requerida por el SAT.',
                features: ['Validación automática SAT', 'Clasificación arancelaria', 'Cálculo de impuestos', 'Trazabilidad completa']
              },
              {
                icon: '🏢',
                title: 'Control por Organización',
                description: 'Gestiona múltiples clientes importadores con espacios de trabajo separados, permisos granulares y control total sobre el acceso a la información.',
                features: ['Multi-tenancy', 'Roles y permisos', 'Auditoría completa', 'Segregación de datos']
              },
              {
                icon: '📊',
                title: 'Reportes Aduanales',
                description: 'Genera reportes especializados para auditorías, seguimiento de operaciones aduanales, estadísticas de importación y cumplimiento normativo.',
                features: ['Dashboards en tiempo real', 'Exportación múltiple', 'KPIs personalizados', 'Alertas automáticas']
              }
            ].map((feature, index) => (
              <div 
                key={index}
                data-animate={`feature-${index}`}
                className={`group bg-white rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-700 overflow-hidden border border-gray-100 hover:scale-105 ${
                  visibleElements.has(`feature-${index}`) 
                    ? 'opacity-100 translate-y-0 rotate-0' 
                    : 'opacity-0 translate-y-10 rotate-3'
                }`}
                style={{ 
                  transitionDelay: `${index * 300}ms`,
                  borderColor: visibleElements.has(`feature-${index}`) ? '#4DA6FF' : '#e5e7eb'
                }}
              >
                <div className="p-8">
                  <div className={`text-5xl mb-6 transition-all duration-500 ${
                    visibleElements.has(`feature-${index}`) 
                      ? 'transform scale-100 rotate-0' 
                      : 'transform scale-75 rotate-12'
                  }`}>
                    {feature.icon}
                  </div>
                  <h3 className="mb-4 text-2xl font-bold transition-colors duration-300" style={{ 
                    color: visibleElements.has(`feature-${index}`) ? '#1B2A41' : '#333333' 
                  }}>
                    {feature.title}
                  </h3>
                  <p className="mb-6 leading-relaxed" style={{ color: '#7A7A7A' }}>
                    {feature.description}
                  </p>
                  <ul className="space-y-2">
                    {feature.features.map((item, idx) => (
                      <li key={idx} className="flex items-center text-sm" style={{ color: '#7A7A7A' }}>
                        <svg className="flex-shrink-0 w-4 h-4 mr-2" style={{ color: '#2E7D32' }} fill="currentColor" viewBox="0 0 20 20">
                          <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
                        </svg>
                        {item}
                      </li>
                    ))}
                  </ul>
                </div>
                <div className="p-4 transition-colors duration-300" style={{ 
                  background: 'linear-gradient(to right, #F2F4F7, #FFFFFF)' 
                }}>
                  <button className="text-sm font-semibold transition-colors duration-200" style={{ 
                    color: '#1B2A41' 
                  }}>
                    Conocer más →
                  </button>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Precios */}
      <section id="precios" className="py-20 bg-white">
        <div className="px-4 mx-auto max-w-7xl sm:px-6 lg:px-8">
          <div 
            data-animate="pricing-header"
            className={`text-center mb-16 transition-all duration-1000 ${
              visibleElements.has('pricing-header') 
                ? 'opacity-100 translate-y-0' 
                : 'opacity-0 translate-y-10'
            }`}
          >
            <h2 className="mb-4 text-4xl font-extrabold text-gray-900">
              Planes diseñados para tu crecimiento
            </h2>
            <p className="text-xl text-gray-600">
              Desde agentes independientes hasta grandes corporativos
            </p>
          </div>

          <div className="grid grid-cols-1 gap-8 md:grid-cols-3">
            {[
              {
                name: 'Starter',
                // price: '$2,999',
                period: '/mes',
                description: 'Perfecto para agentes aduanales independientes',
                features: [
                  'Hasta 50 pedimentos/mes',
                  '5 GB almacenamiento',
                  'Soporte por email',
                  'Reportes básicos',
                  '2 usuarios'
                ],
                popular: false
              },
              {
                name: 'Professional',
                // price: '$5,999',
                period: '/mes',
                description: 'Ideal para agencias medianas',
                features: [
                  'Hasta 200 pedimentos/mes',
                  '20 GB almacenamiento',
                  'Soporte prioritario',
                  'Reportes avanzados',
                  '10 usuarios',
                  'API acceso',
                  'Integraciones SAT'
                ],
                popular: true
              },
              {
                name: 'Enterprise',
                price: 'Personalizado',
                period: '',
                description: 'Para grandes corporativos',
                features: [
                  'Pedimentos ilimitados',
                  'Almacenamiento ilimitado',
                  'Soporte 24/7 dedicado',
                  'Reportes personalizados',
                  'Usuarios ilimitados',
                  'API completa',
                  'Implementación dedicada',
                  'SLA garantizado'
                ],
                popular: false
              }
            ].map((plan, index) => (
              <div 
                key={index}
                data-animate={`plan-${index}`}
                className={`relative rounded-2xl border-2 p-8 transition-all duration-700 hover:scale-105 ${
                  plan.popular 
                    ? 'shadow-xl' 
                    : 'border-gray-200 bg-white shadow-lg hover:shadow-xl'
                } ${
                  visibleElements.has(`plan-${index}`) 
                    ? 'opacity-100 translate-y-0' 
                    : 'opacity-0 translate-y-10'
                }`}
                style={{ 
                  transitionDelay: `${index * 200}ms`,
                  borderColor: plan.popular ? '#1B2A41' : '#e5e7eb',
                  background: plan.popular ? 'linear-gradient(to bottom, #F2F4F7, white)' : 'white'
                }}
              >
                {plan.popular && (
                  <div className="absolute transform -translate-x-1/2 -top-4 left-1/2">
                    <span className="px-4 py-2 text-sm font-semibold text-white rounded-full animate-pulse" style={{
                      background: 'linear-gradient(to right, #1B2A41, #263549)'
                    }}>
                      Más Popular
                    </span>
                  </div>
                )}
                
                <div className="mb-8 text-center">
                  <h3 className="mb-2 text-2xl font-bold" style={{ color: '#333333' }}>{plan.name}</h3>
                  <p className="mb-4" style={{ color: '#7A7A7A' }}>{plan.description}</p>
                  {/*
                  <div className="mb-4">
                    <span className="text-4xl font-extrabold" style={{ color: '#1B2A41' }}>{plan.price}</span>
                    <span style={{ color: '#7A7A7A' }}>{plan.period}</span>
                  </div>
                  */}
                </div>

                <ul className="mb-8 space-y-3">
                  {plan.features.map((feature, idx) => (
                    <li key={idx} className="flex items-center">
                      <svg className="w-5 h-5 mr-3 text-green-500" fill="currentColor" viewBox="0 0 20 20">
                        <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
                      </svg>
                      <span className="text-gray-700">{feature}</span>
                    </li>
                  ))}
                </ul>

                <button 
                  onClick={() => scrollToSection('contacto')}
                  className={`w-full py-3 px-6 rounded-full font-semibold transition-all duration-200 ${
                    plan.popular
                      ? 'bg-gradient-to-r from-indigo-600 to-purple-600 text-white hover:from-indigo-700 hover:to-purple-700 shadow-lg hover:shadow-xl'
                      : 'bg-gray-100 text-gray-900 hover:bg-gray-200'
                  }`}
                >
                  {plan.name === 'Enterprise' ? 'Contactar Ventas' : 'Comenzar Prueba'}
                </button>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Contacto */}
<section id="contacto" className="relative py-20 overflow-hidden">
  {/* Background con imagen */}
  <div className="absolute inset-0">
    {/* Misma imagen de fondo que la sección inicio */}
    <div 
      className="absolute inset-0 bg-center bg-no-repeat bg-cover"
      style={{
        backgroundImage: 'url("images/sistemagestion002.webp")',
        backgroundColor: '#1B2A41',
      }}
    >
      {/* Overlay más oscuro para mejor legibilidad en formulario */}
      <div 
        className="absolute inset-0"
        style={{
          background: 'linear-gradient(to bottom, rgba(27, 42, 65, 0.85), rgba(27, 42, 65, 0.7))',
        }}
      ></div>
    </div>
    
    {/* Background Pattern */}
    <div className="absolute inset-0 opacity-10">
      <div className="absolute inset-0" style={{
        backgroundImage: `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fillRule='evenodd'%3E%3Cg fill='%234DA6FF' fillOpacity='0.3'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`
      }}></div>
    </div>
  </div>
  
  {/* Floating elements */}
  {/* <div className="absolute w-20 h-20 rounded-full top-10 left-10 opacity-20" style={{ backgroundColor: '#4DA6FF' }}></div>
  <div className="absolute w-32 h-32 rounded-full bottom-10 right-10 opacity-15" style={{ backgroundColor: '#F57C00' }}></div>
  <div className="absolute w-16 h-16 rounded-full top-1/2 left-1/4 opacity-10" style={{ backgroundColor: '#2E7D32' }}></div> */}
  
  <div className="relative px-4 mx-auto max-w-7xl sm:px-6 lg:px-8">
    <div className="mb-16 text-center">
      <h2 className="mb-6 text-4xl font-extrabold text-white md:text-5xl">
        ¿Listo para <span style={{ color: '#4DA6FF' }}>transformar</span> tu operación aduanal?
      </h2>
      <p className="max-w-3xl mx-auto text-xl md:text-2xl" style={{ color: '#64B5F6' }}>
        Únete a más de 350 empresas que ya optimizaron sus procesos con EFC
      </p>
    </div>
          
          <div className="grid items-start grid-cols-1 gap-12 lg:grid-cols-2">
            <div 
              data-animate="contact-info"
              className={`transition-all duration-1000 ${
                visibleElements.has('contact-info') 
                  ? 'opacity-100 translate-x-0' 
                  : 'opacity-0 -translate-x-10'
              }`}
            >
              {/* Card de información de contacto */}
              <div className="p-8 border bg-white/10 backdrop-blur-md rounded-3xl border-white/20">
                <div className="mb-8">
                  <h3 className="mb-4 text-2xl font-bold text-white">
                    Hablemos de tu proyecto
                  </h3>
                  <p className="text-lg" style={{ color: '#64B5F6' }}>
                    Nuestros expertos en comercio exterior están listos para ayudarte
                  </p>
                </div>
                
                <div className="space-y-6">
                  {[
                    { 
                      icon: 'M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z', 
                      title: 'Teléfono', 
                      info: '656 616 2527',
                      subtitle: 'Lun - Vie, 9:00 AM - 7:00 PM'
                    },
                    { 
                      icon: 'M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z', 
                      title: 'Email', 
                      info: 'info@aduanasoft.com.mx',
                      subtitle: 'Respuesta en menos de 2 horas'
                    },
                    { 
                      icon: 'M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z M15 11a3 3 0 11-6 0 3 3 0 016 0z', 
                      title: 'Oficinas', 
                      info: 'Ciudad Juárez, Chihuahua',
                      subtitle: 'Visitas con cita previa'
                    }
                  ].map((contact, idx) => (
                    <div key={idx} className="flex items-start p-4 space-x-4 transition-all duration-300 rounded-xl bg-white/5 hover:bg-white/10">
                      <div className="flex items-center justify-center rounded-full w-14 h-14" style={{ backgroundColor: '#4DA6FF' }}>
                        <svg className="text-white w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d={contact.icon} />
                        </svg>
                      </div>
                      <div className="flex-1">
                        <h4 className="text-lg font-bold text-white">{contact.title}</h4>
                        <p className="mb-1 font-semibold" style={{ color: '#4DA6FF' }}>{contact.info}</p>
                        <p className="text-sm" style={{ color: '#64B5F6' }}>{contact.subtitle}</p>
                      </div>
                    </div>
                  ))}
                </div>
                
                {/* Botón adicional para WhatsApp */}
                <div className="pt-6 mt-8 border-t border-white/20">
                  <a 
                    href="#" 
                    className="flex items-center justify-center w-full px-6 py-4 font-semibold text-white transition-all duration-300 transform rounded-xl hover:scale-105"
                    style={{
                      background: 'linear-gradient(45deg, #25D366, #128C7E)'
                    }}
                  >
                    <svg className="w-6 h-6 mr-3" fill="currentColor" viewBox="0 0 24 24">
                      <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893A11.821 11.821 0 0020.885 3.488"/>
                    </svg>
                    Chatear por WhatsApp
                  </a>
                </div>
              </div>
            </div>

            <div 
              data-animate="contact-form"
              className={`bg-white rounded-2xl shadow-2xl p-8 transition-all duration-1000 ${
                visibleElements.has('contact-form') 
                  ? 'opacity-100 translate-x-0' 
                  : 'opacity-0 translate-x-10'
              }`}
            >
              <h3 className="mb-6 text-2xl font-bold" style={{ color: '#333333' }}>Solicita una demostración</h3>
              <form onSubmit={handleContactSubmit} className="space-y-4">
                <div>
                  <label className="block mb-2 text-sm font-semibold" style={{ color: '#333333' }}>
                    Nombre completo
                  </label>
                  <input
                    type="text"
                    required
                    value={contactForm.name}
                    onChange={(e) => setContactForm({...contactForm, name: e.target.value})}
                    className="w-full px-4 py-3 transition-all duration-200 border border-gray-300 rounded-lg focus:ring-2 focus:border-transparent"
                    style={{ 
                      focusRingColor: '#4DA6FF',
                      outline: 'none'
                    }}
                    onFocus={(e) => e.target.style.borderColor = '#4DA6FF'}
                    onBlur={(e) => e.target.style.borderColor = '#d1d5db'}
                    placeholder="Tu nombre"
                  />
                </div>
                
                <div>
                  <label className="block mb-2 text-sm font-semibold" style={{ color: '#333333' }}>
                    Email corporativo
                  </label>
                  <input
                    type="email"
                    required
                    value={contactForm.email}
                    onChange={(e) => setContactForm({...contactForm, email: e.target.value})}
                    className="w-full px-4 py-3 transition-all duration-200 border border-gray-300 rounded-lg focus:ring-2 focus:border-transparent"
                    onFocus={(e) => e.target.style.borderColor = '#4DA6FF'}
                    onBlur={(e) => e.target.style.borderColor = '#d1d5db'}
                    placeholder="tu@empresa.com"
                  />
                </div>

                <div>
                  <label className="block mb-2 text-sm font-semibold" style={{ color: '#333333' }}>
                    Empresa
                  </label>
                  <input
                    type="text"
                    required
                    value={contactForm.company}
                    onChange={(e) => setContactForm({...contactForm, company: e.target.value})}
                    className="w-full px-4 py-3 transition-all duration-200 border border-gray-300 rounded-lg focus:ring-2 focus:border-transparent"
                    onFocus={(e) => e.target.style.borderColor = '#4DA6FF'}
                    onBlur={(e) => e.target.style.borderColor = '#d1d5db'}
                    placeholder="Nombre de tu empresa"
                  />
                </div>

                <div>
                  <label className="block mb-2 text-sm font-semibold" style={{ color: '#333333' }}>
                    Mensaje
                  </label>
                  <textarea
                    rows="4"
                    value={contactForm.message}
                    onChange={(e) => setContactForm({...contactForm, message: e.target.value})}
                    className="w-full px-4 py-3 transition-all duration-200 border border-gray-300 rounded-lg focus:ring-2 focus:border-transparent"
                    onFocus={(e) => e.target.style.borderColor = '#4DA6FF'}
                    onBlur={(e) => e.target.style.borderColor = '#d1d5db'}
                    placeholder="Cuéntanos sobre tu operación aduanal..."
                  ></textarea>
                </div>

                <button
                  type="submit"
                  className="w-full text-white py-3 px-6 rounded-lg font-semibold transition-all duration-200 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5"
                  style={{
                    background: 'linear-gradient(to right, #1B2A41, #263549)'
                  }}
                  onMouseEnter={(e) => {
                    e.target.style.background = 'linear-gradient(to right, #263549, #1B2A41)';
                  }}
                  onMouseLeave={(e) => {
                    e.target.style.background = 'linear-gradient(to right, #1B2A41, #263549)';
                  }}
                >
                  Enviar solicitud
                </button>
              </form>
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="py-12 text-white" style={{ backgroundColor: '#1B2A41' }}>
        <div className="px-4 mx-auto max-w-7xl sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 gap-8 md:grid-cols-4">
            <div className="col-span-1 md:col-span-2">
              <h3 className="mb-4 text-2xl font-bold">
                <span style={{
                  background: 'linear-gradient(to right, #4DA6FF, #64B5F6)',
                  WebkitBackgroundClip: 'text',
                  WebkitTextFillColor: 'transparent'
                }}>
                  EFC
                </span>
              </h3>
              {/* <p className="max-w-md mb-2" style={{ color: '#7A7A7A' }}>
                Uso correcto <span className="font-semibold" style={{ color: '#4DA6FF' }}>Aduanasoft®</span>
              </p> */}
              {/* <ul className="mb-4 space-y-1 text-sm text-gray-300">
                <li><span className="font-bold text-white">+350</span> clientes en todo el país</li>
                <li><span className="font-bold text-white">29 años</span> de experiencia</li>
              </ul> */}
              <div className="flex space-x-4">
                <a href="https://www.facebook.com/AduanaSoftMX" target="_blank" rel="noopener noreferrer" className="transition-colors duration-200" style={{ color: '#7A7A7A' }} onMouseEnter={e => e.target.style.color = 'white'} onMouseLeave={e => e.target.style.color = '#7A7A7A'} title="Facebook">
                  <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M22.675 0h-21.35C.595 0 0 .592 0 1.326v21.348C0 23.408.595 24 1.325 24h11.495v-9.294H9.692v-3.622h3.128V8.413c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.797.143v3.24l-1.918.001c-1.504 0-1.797.715-1.797 1.763v2.313h3.587l-.467 3.622h-3.12V24h6.116C23.406 24 24 23.408 24 22.674V1.326C24 .592 23.406 0 22.675 0"/></svg>
                </a>
                <a href="https://www.instagram.com/aduanasoftjrz" target="_blank" rel="noopener noreferrer" className="transition-colors duration-200" style={{ color: '#7A7A7A' }} onMouseEnter={e => e.target.style.color = 'white'} onMouseLeave={e => e.target.style.color = '#7A7A7A'} title="Instagram">
                  <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 1.366.062 2.633.334 3.608 1.308.974.974 1.246 2.241 1.308 3.608.058 1.266.069 1.646.069 4.85s-.012 3.584-.07 4.85c-.062 1.366-.334 2.633-1.308 3.608-.974.974-2.241 1.246-3.608 1.308-1.266.058-1.646.069-4.85.069s-3.584-.012-4.85-.07c-1.366-.062-2.633-.334-3.608-1.308-.974-.974-1.246-2.241-1.308-3.608C2.175 15.647 2.163 15.267 2.163 12s.012-3.584.07-4.85c.062-1.366.334-2.633 1.308-3.608C4.515 2.497 5.782 2.225 7.148 2.163 8.414 2.105 8.794 2.163 12 2.163zm0-2.163C8.741 0 8.332.013 7.052.072 5.771.131 4.659.363 3.678 1.344 2.697 2.325 2.465 3.437 2.406 4.718 2.347 5.998 2.334 6.407 2.334 12c0 5.593.013 6.002.072 7.282.059 1.281.291 2.393 1.272 3.374.981.981 2.093 1.213 3.374 1.272 1.28.059 1.689.072 7.282.072s6.002-.013 7.282-.072c1.281-.059 2.393-.291 3.374-1.272.981-.981 1.213-2.093 1.272-3.374.059-1.28.072-1.689.072-7.282s-.013-6.002-.072-7.282c-.059-1.281-.291-2.393-1.272-3.374C21.393.363 20.281.131 19 .072 17.719.013 17.31 0 12 0zm0 5.838a6.162 6.162 0 1 0 0 12.324 6.162 6.162 0 0 0 0-12.324zm0 10.162a3.999 3.999 0 1 1 0-7.998 3.999 3.999 0 0 1 0 7.998zm6.406-11.845a1.44 1.44 0 1 0 0 2.88 1.44 1.44 0 0 0 0-2.88z"/></svg>
                </a>
                <a href="https://www.linkedin.com/in/aduanasoft" target="_blank" rel="noopener noreferrer" className="transition-colors duration-200" style={{ color: '#7A7A7A' }} onMouseEnter={e => e.target.style.color = 'white'} onMouseLeave={e => e.target.style.color = '#7A7A7A'} title="LinkedIn">
                  <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
                </a>
              </div>
            <div className="mt-6 text-sm text-gray-300">
              <div className="mb-1"><b>Correo informes:</b> <a href="mailto:info@aduanasoft.com.mx" className="underline hover:text-white">info@aduanasoft.com.mx</a></div>
              <div className="mb-1"><b>Teléfonos:</b></div>
              <ul className="ml-4">
                <li>Cd Juárez: <a href="tel:6566162527" className="underline hover:text-white">656 616 2527</a></li>
                <li>CDMX: <a href="tel:5563585502" className="underline hover:text-white">55 63 58 5502</a></li>
                <li>USA: <a href="tel:9157744393" className="underline hover:text-white">915 774 43 93</a></li>
              </ul>
            </div>
            </div>
            
            <div>
              <h4 className="mb-4 font-semibold">Producto</h4>
              <ul className="space-y-2 text-gray-400">
                <li><button onClick={() => scrollToSection('caracteristicas')} className="transition-colors duration-200 hover:text-white">Características</button></li>
                <li><button onClick={() => scrollToSection('precios')} className="transition-colors duration-200 hover:text-white">Precios</button></li>
                <li><a href="#" className="transition-colors duration-200 hover:text-white">Integraciónes</a></li>
                <li><a href="#" className="transition-colors duration-200 hover:text-white">API</a></li>
              </ul>
            </div>
            
            <div>
              <h4 className="mb-4 font-semibold">Soporte</h4>
              <ul className="space-y-2 text-gray-400">
                <li><button onClick={() => scrollToSection('contacto')} className="transition-colors duration-200 hover:text-white">Contacto</button></li>
                <li><a href="#" className="transition-colors duration-200 hover:text-white">Documentación</a></li>
                <li><a href="#" className="transition-colors duration-200 hover:text-white">Centro de Ayuda</a></li>
                <li><a href="#" className="transition-colors duration-200 hover:text-white">Status</a></li>
              </ul>
            </div>
          </div>
          
          <div className="pt-8 mt-8 text-center text-gray-400 border-t border-gray-800">
            <p>
              &copy; {currentYear} EFC by <span className="font-semibold text-white">Aduanasoft®</span>. 
              Todos los derechos reservados. | Solución especializada para Agentes Aduanales e Importadores.
            </p>
          </div>
        </div>
      </footer>
    </div>
  );
}