import React, { useState, useEffect } from 'react';
import { 
    Globe, LandPlot, Calendar, Mail, Phone, MapPin, Linkedin, 
    Menu, X, ArrowRight, ChevronDown // Importamos ChevronDown para el acordeón
} from 'lucide-react';

// --- Constantes de Diseño (Tema Oscuro: Presentación) ---
const COLORS = {
    primaryDark: '#000000', // bg-black
    secondaryDark: '#1C1C1C', // bg-zinc-950 (usaremos zinc-950 que es más estándar)
    accentBeige: '#D2B48C', // text-[#D2B48C] (Tan/Beige)
    textLight: '#FFFFFF', // text-white
    textMuted: '#A0A0A0', // text-zinc-400
};

// --- Funciones Auxiliares (Sin cambios) ---

const loadScript = (src, async = true) => {
    return new Promise((resolve, reject) => {
        // Evita cargar el script múltiples veces
        if (document.querySelector(`script[src="${src}"]`)) {
            resolve();
            return;
        }
        const script = document.createElement('script');
        script.src = src;
        script.async = async;
        script.onload = () => resolve();
        script.onerror = () => reject(new Error(`Script load error for ${src}`));
        document.body.appendChild(script);
    });
};

const loadCss = (href) => {
    if (document.querySelector(`link[href="${href}"]`)) {
        return;
    }
    const link = document.createElement('link');
    link.href = href;
    link.rel = 'stylesheet';
    document.head.appendChild(link);
};

const scrollToSection = (sectionId) => {
    const targetElement = document.getElementById(sectionId);
    if (targetElement) {
        const header = document.getElementById('header');
        const headerHeight = header ? header.offsetHeight : 80; // 80px as fallback (h-20)
        
        window.scrollTo({
            top: targetElement.offsetTop - headerHeight,
            behavior: 'smooth'
        });
    }
};

// --- Componente: Logo (de PÁGINA 1) ---
const AgeLogo = () => (
    <svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
        <circle cx="50" cy="50" r="48" stroke="white" strokeWidth="2"/>
        <circle cx="50" cy="20" r="18" stroke="white" strokeWidth="2"/>
        <circle cx="50" cy="80" r="18" stroke="white" strokeWidth="2"/>
        <circle cx="20" cy="50" r="18" stroke="white" strokeWidth="2"/>
        <circle cx="80" cy="50" r="18" stroke="white" strokeWidth="2"/>
        <ellipse cx="50" cy="50" rx="18" ry="30" stroke="white" strokeWidth="2"/>
        <ellipse cx="50" cy="50" rx="30" ry="18" stroke="white" strokeWidth="2"/>
        <circle cx="50" cy="50" r="4" fill="white" stroke="white" strokeWidth="2"/>
        <circle cx="50" cy="20" r="4" fill="white" stroke="white" strokeWidth="2"/>
        <circle cx="50" cy="80" r="4" fill="white" stroke="white" strokeWidth="2"/>
        <circle cx="20" cy="50" r="4" fill="white" stroke="white" strokeWidth="2"/>
        <circle cx="80" cy="50" r="4" fill="white" stroke="white" strokeWidth="2"/>
        <circle cx="35.85" cy="35.85" r="4" fill="white" stroke="white" strokeWidth="2"/>
        <circle cx="64.15" cy="35.85" r="4" fill="white" stroke="white" strokeWidth="2"/>
        <circle cx="35.85" cy="64.15" r="4" fill="white" stroke="white" strokeWidth="2"/>
        <circle cx="64.15" cy="64.15" r="4" fill="white" stroke="white" strokeWidth="2"/>
    </svg>
);


// --- Componente: Header ---
const Header = ({ currentPage, setPage }) => {
    const [isMobileMenuOpen, setMobileMenuOpen] = useState(false);

    const handleLinkClick = (e, pageName, sectionId) => {
        e.preventDefault();
        setMobileMenuOpen(false);

        if (pageName !== currentPage) {
            setPage(pageName);
            // Espera a que el DOM de la nueva página se renderice antes de hacer scroll
            setTimeout(() => {
                if (sectionId) scrollToSection(sectionId);
                else window.scrollTo(0, 0); // Scroll al inicio si no hay sección
            }, 100);
        } else {
            // Ya está en la página correcta, solo hacer scroll
            if (sectionId) scrollToSection(sectionId);
        }
    };

    const navLinks = [
        { name: "Inicio", page: "home", section: "home" },
        { name: "Visión", page: "network", section: "about" },
        { name: "Servicios", page: "home", section: "services" },
        { name: "Filiales", page: "home", section: "portfolio" },
        { name: "Red Global", page: "network", section: "network" },
        { name: "Contacto", page: "home", section: "contact" },
    ];

    return (
        <header 
            id="header" 
            className="fixed top-0 left-0 w-full z-50 transition duration-300 bg-black/80 backdrop-blur-md"
        >
            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div className="flex justify-between items-center h-20">
                    {/* Logo */}
                    <a 
                        href="#home" 
                        onClick={(e) => handleLinkClick(e, 'home', 'home')}
                        className="flex items-center space-x-2 text-zinc-300 hover:text-white"
                    >
                        <svg width="24" height="24" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg" className="text-zinc-300">
                            <circle cx="50" cy="50" r="48" stroke="currentColor" strokeWidth="4"/>
                            <circle cx="50" cy="20" r="18" stroke="currentColor" strokeWidth="4"/>
                            <circle cx="50" cy="80" r="18" stroke="currentColor" strokeWidth="4"/>
                            <circle cx="20" cy="50" r="18" stroke="currentColor" strokeWidth="4"/>
                            <circle cx="80" cy="50" r="18" stroke="currentColor" strokeWidth="4"/>
                        </svg>
                        <span className="text-xs font-light uppercase tracking-widest">Albeh Global Enterprises</span>
                    </a>
                    
                    {/* Desktop Menu */}
                    <nav className="hidden md:block">
                        <ul className="flex space-x-8 text-xs font-light uppercase tracking-widest">
                            {navLinks.map((link) => (
                                <li key={link.name}>
                                    <a 
                                        href={`#${link.section}`} 
                                        onClick={(e) => handleLinkClick(e, link.page, link.section)}
                                        className={`transition duration-200 ${
                                            (link.page === 'network' && currentPage === 'network') 
                                                ? 'text-white font-semibold' 
                                                : 'text-zinc-400 hover:text-white'
                                        }`}
                                    >
                                        {link.name}
                                    </a>
                                </li>
                            ))}
                        </ul>
                    </nav>

                    {/* Mobile Menu Button */}
                    <button 
                        id="menu-toggle" 
                        className="md:hidden text-white hover:text-zinc-300 focus:outline-none p-2 rounded-lg"
                        onClick={() => setMobileMenuOpen(!isMobileMenuOpen)}
                    >
                        {isMobileMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
                    </button>
                </div>
            </div>

            {/* Mobile Menu (Conditionally rendered) */}
            {isMobileMenuOpen && (
                <nav id="mobile-menu" className="md:hidden bg-black/95 shadow-lg">
                    <ul className="py-4 space-y-2 text-center text-sm font-light uppercase">
                        {navLinks.map((link) => (
                            <li key={link.name}>
                                <a 
                                    href={`#${link.section}`}
                                    onClick={(e) => handleLinkClick(e, link.page, link.section)}
                                    className="block py-2 text-zinc-300 hover:bg-zinc-900"
                                >
                                    {link.name}
                                </a>
                            </li>
                        ))}
                    </ul>
                </nav>
            )}
        </header>
    );
};

// --- Componente: HeroSection (Rediseñado como PÁGINA 1) ---
const HeroSection = () => {
    return (
        <section id="home" className="relative bg-black h-screen flex flex-col items-center justify-center text-center">
            
            <div className="mb-8">
                <AgeLogo />
            </div>
            
            <h1 className="text-4xl sm:text-5xl font-semibold text-white tracking-[0.2em] uppercase">
                ALBEH GLOBAL
            </h1>
            <h2 className="text-4xl sm:text-5xl font-semibold text-white tracking-[0.2em] uppercase mb-8">
                ENTERPRISES
            </h2>
            
            <p className="text-sm font-light text-zinc-400 tracking-[0.3em] uppercase">
                Consorcio de Servicios de Consejería
            </p>
            
            {/* Elementos de diseño de la presentación */}
            <div className="absolute top-1/2 left-4 -translate-y-1/2 w-8 h-1 bg-white"></div>
            <div className="absolute top-1/2 right-4 -translate-y-1/2 w-8 h-1 bg-white"></div>
        </section>
    );
};

// --- Componente: AboutSection (Rediseñado como PÁGINA 6 "VISIÓN") ---
const AboutSection = () => (
    <section id="about" className="py-20 md:py-32 bg-black text-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="grid md:grid-cols-2 gap-16 items-center">
                
                {/* Columna Izquierda: Títulos */}
                <div>
                    <h2 className="text-8xl lg:text-9xl font-black text-white uppercase tracking-tighter">
                        Visión
                    </h2>
                    <p className="text-2xl font-light text-zinc-300 mt-4">
                        Generando confianza para un impacto global
                    </p>
                    <div className="w-20 h-1 bg-white mt-8"></div>
                </div>

                {/* Columna Derecha: Imagen y Texto */}
                <div className="flex space-x-8">
                    <img 
                        src="https://placehold.co/400x500/333/555?text=Antonio+Rubio"
                        alt="Antonio Rubio, Fundador/Director General"
                        className="w-1/2 h-auto object-cover"
                    />
                    <div className="w-1/2 space-y-4 text-sm font-light text-zinc-300">
                        <p>En Albeh Global Enterprises, forjamos relaciones sólidas basadas en la <span className="text-white font-medium">confianza</span>, desarrollando proyectos que generan un <span className="text-white font-medium">impacto positivo en el mundo</span>.</p>
                        <p>Impulsados por la tecnología y las mejores prácticas, buscamos la <span className="text-white font-medium">excelencia en la ejecución</span>, actuando como un socio estratégico que apoya a nuestros socios en la toma de decisiones informadas.</p>
                        <p>Lideramos con la convicción de que la mente, el corazón y el espíritu deben estar presentes en cada paso de este camino.</p>
                        <div className="pt-4">
                            <p className="font-semibold text-white">Antonio Rubio</p>
                            <p className="text-xs text-zinc-400">Fundador / Director General</p>
                            <a href="https://www.linkedin.com" target="_blank" rel="noopener noreferrer" className="inline-block mt-2 text-zinc-300 hover:text-white">
                                <Linkedin className="w-5 h-5" />
                            </a>
                            {/* Placeholder para la firma */}
                            <p className="text-3xl italic font-serif text-zinc-200 mt-2">A. Rubio</p>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </section>
);


// --- INICIO: Datos de Servicios (Extraídos del PDF/Screenshots) ---
const servicesData = [
    {
        id: 'patrimonio',
        title: "Gestión de Patrimonio",
        intro: "Es la gestión financiera integral y holística para individuos y familias de alto patrimonio, diseñada para proteger, hacer crecer y transferir eficientemente su riqueza.",
        image: "https://placehold.co/600x800/222/D2B48C?text=Compass+Map", // Placeholder para la brújula
        points: [
            { name: "Entendimiento & Protección", desc: "Desarrollamos una profunda comprensión de las necesidades de nuestros socios. Estructuración legal y fiscal para mitigar riesgos y optimizar la conservación del capital." },
            { name: "Crecimiento & Acceso Exclusivo", desc: "Diseño de estrategias innovadoras y asignación de activos que buscan maximizar la rentabilidad. Activación de la red de facilitadores de alto nivel para conectar con capital privado." },
            { name: "Optimización Global & Monitoreo", desc: "Experiencia en la elección de estructuras óptimas para proteger el patrimonio. Asesoramiento permanente para adaptarse a los cambios regulatorios y de mercado." },
            { name: "Sucesión, Educación & Filantropía", desc: "Transferencia de riqueza y estructuras de gobernanza familiar. Preparación y mentoría para la próxima generación en la gestión responsable del patrimonio." }
        ]
    },
    {
        id: 'negocios',
        title: "Desarrollo de Negocios Globales",
        intro: "Llevamos su visión de negocio desde la concepción inicial hasta una realidad operativa, eficiente y rentable a escala internacional. Actuamos como el arquitecto y ejecutor de su expansión global.",
        image: "https://placehold.co/600x800/222/D2B48C?text=Global+Business", // Placeholder para VR/DNA
        points: [
            { name: "Diagnóstico & Arquitectura", desc: "Albeh Consulting realiza un Análisis In-depth para definir la ruta estratégica. Aplicamos la Metodología Avant Garde 360° para crear manuales operativos eficientes." },
            { name: "Digitalización & Branding", desc: "Implementamos la Transformación Digital con IA y Metaverso para una estructura inteligente. Albeh Estudio Creativo diseña la personalidad de la marca." },
            { name: "Estrategia & Sostenibilidad", desc: "CRIAL MGMT desarrolla las estrategias personalizadas para impulsar el crecimiento con innovación. SEGI Hub asegura que el proyecto sea sostenible." },
            { name: "Expansión & Capital", desc: "Definición de la estructura óptima para la penetración en los mercados internacionales y Activamos nuestra red de facilitadores para conectar con capital privado." }
        ]
    },
    {
        id: 'real_estate',
        title: "Real Estate Estratégico",
        intro: "El sector inmobiliario es la plataforma física de su expansión internacional y un vehículo tangible para la preservación de su patrimonio. Ofrecemos acceso exclusivo a bienes raíces en ubicaciones privilegiadas.",
        image: "https://placehold.co/600x800/222/D2B48C?text=Dubai+Real+Estate", // Placeholder para Dubai
        points: [
            { name: "Activación de Red & Selección", desc: "Nuestra red global se activa para acceder a bienes raíces off-market. Aseguramos el activo estratégico que sirve como pilar para su visión." },
            { name: "Discreción y Sincronización", desc: "Gestión de la operación con absoluta discreción. Integración con el equipo de Gestión de Patrimonio para optimizar la estructura de adquisición." },
            { name: "Diligencia & Negociación", desc: "Evaluación exhaustiva para mitigar contingencias legales y financieras. Negociación experta de las condiciones en operaciones fuera del mercado." },
            { name: "Cierre, Post-Adquisición & Legado", desc: "Ejecución de la compra, aprovechando la infraestructura global de AGE. Integración del activo al plan de Gestión de Patrimonio." }
        ]
    },
    {
        id: 'eventos',
        title: "Eventos Internacionales",
        intro: "Diseñamos y gestionamos experiencias que reflejan su estándar de excelencia, desde la atención al invitado hasta la creación de espacios enriquecedores.",
        image: "https://placehold.co/600x800/222/D2B48C?text=Event+Speaker", // Placeholder para Evento
        points: [
            { name: "Marca & Diseño de Espacios", desc: "Sincronización con Albeh Estudio Creativo para asegurar que el branding y el mensaje sean coherentes. Creación de entornos que generen un impacto positivo." },
            { name: "Hospitalidad Gastronómica & Logística", desc: "Hubsy aplica su experiencia para crear una oferta gastronómica de élite. Gestión integral de todas las facetas logísticas del evento." },
            { name: "Lanzamiento y Red de contactos", desc: "Hubsy se encarga de la organización integral del evento de lanzamiento de su proyecto o empresa. Inclusión de la Red de Talentos de AGE." },
            { name: "Cobertura & Posicionamiento", desc: "Albeh Estudio Creativo asegura la producción audiovisual de alta calidad. El evento se convierte en una experiencia memorable que posiciona al cliente." }
        ]
    }
];
// --- FIN: Datos de Servicios ---


// --- Componente: ServicesSection (Restaurado a "Presentation Dark" con botón) ---
const ServicesSection = ({ onServiceSelect }) => (
    <section id="services" className="py-20 md:py-32 bg-zinc-950">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <h2 className="text-6xl font-black text-white text-center uppercase tracking-tighter mb-20">
                Servicios Especializados
            </h2>
            <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-10">
                
                {/* Mapeamos los datos de servicios */}
                {servicesData.map((service) => (
                    <div key={service.id} className="p-8 bg-black rounded-lg flex flex-col justify-between">
                        <div>
                            <h3 className="text-xl font-semibold mb-3 text-white">{service.title}</h3>
                            <p className="text-sm font-light text-zinc-400 mb-6">
                                {service.intro.substring(0, 150)}...
                            </p>
                        </div>
                        <button 
                            onClick={() => onServiceSelect(service.id)}
                            className="group text-left text-sm font-semibold text-[#D2B48C] hover:text-white transition duration-300 flex items-center"
                        >
                            Más Información
                            <ArrowRight className="w-4 h-4 ml-2 opacity-0 group-hover:opacity-100 transition-opacity transform group-hover:translate-x-1" />
                        </button>
                    </div>
                ))}

            </div>
        </div>
    </section>
);

// --- Componente: PortfolioSection (Restaurado a "Presentation Dark") ---
const PortfolioSection = () => {
    const companies = [
        { name: "Albeh Estudio Creativo", link: "#", tag: "AEC", role: "Branding, Marketing y Producción", desc: "La personalidad de una empresa o marca define cómo será percibida por su público." },
        { name: "Albeh Consulting", link: "#", tag: "AC", role: "Metodología Avant Garde 360°", desc: "Impulsamos proyectos con capacidad de desarrollo y expansión mediante la transformación digital." },
        { name: "Albeh Square", link: "#", tag: "AS", role: "Showrooms y Franquicias", desc: "Operadora de showrooms, espacios comerciales y franquicias. Selección de proyectos viables." },
        { name: "AGE Dubai", link: "#", tag: "AGE", role: "Puente a EAU", desc: "Socio estratégico de empresarios, inversionistas y familias de América Latina en Dubái." },
        { name: "SEGI Hub", link: "#", tag: "SEGI", role: "Emprendedores Sustentables", desc: "Desarrollamos la conciencia colectiva e impulsamos a la sociedad hacia una versión mejor." },
        { name: "CRIAL MGMT", link: "#", tag: "CRIAL", role: "Centrado en el Cliente", desc: "Estrategias a medida para el crecimiento. Enfoque colaborativo para necesidades y desafíos únicos." },
    ];

    return (
        <section id="portfolio" className="py-20 md:py-32 bg-black">
            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <h2 className="text-6xl font-black text-white text-center uppercase tracking-tighter mb-20">
                    Filiales y Alianzas
                </h2>
                <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-10">
                    {companies.map((company) => (
                        <a 
                            key={company.name}
                            href={company.link} 
                            onClick={(e) => company.link === '#' && e.preventDefault()}
                            target="_blank" 
                            rel="noopener noreferrer"
                            className="block p-8 bg-zinc-900 rounded-lg group transition duration-300 hover:bg-zinc-800"
                        >
                            <h3 className="text-xl font-semibold text-white group-hover:text-[#D2B48C] transition duration-300 mb-2">{company.name}</h3>
                            <p className="text-xs text-zinc-400 uppercase tracking-widest mb-4">{company.role}</p>
                            <p className="text-zinc-400 text-sm font-light">{company.desc}</p>
                        </a>
                    ))}
                </div>
            </div>
        </section>
    );
};

// --- Componente: ContactSection (Restaurado a "Presentation Dark" simple) ---
const ContactSection = () => (
    <section id="contact" className="py-20 md:py-32 bg-zinc-950 text-white">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <h2 className="text-6xl font-black text-white uppercase tracking-tighter mb-8">
                Contacte Ahora
            </h2>
            <p className="text-lg text-zinc-300 font-light mb-12 max-w-2xl mx-auto">
                Descubra cómo podemos ayudarle a alcanzar sus metas más ambiciosas.
            </p>
            <div className="text-xl font-light space-y-4">
                <p>
                    <a href="tel:+971521998010" className="hover:text-[#D2B48C] transition duration-200">
                        +971 52 19 98 010 (Dubái, Emiratos Árabes Unidos)
                    </a>
                </p>
                <p>
                    <a href="tel:+525553498767" className="hover:text-[#D2B48C] transition duration-200">
                        +52 55 53 49 87 67 (México)
                    </a>
                </p>
                <p>
                    <a href="mailto:info@albehge.com" className="hover:text-[#D2B48C] transition duration-200">
                        info@albehge.com
                    </a>
                </p>
            </div>
            
            <a 
                href="https://calendly.com/albehec/albeh-global" 
                target="_blank" 
                rel="noopener noreferrer"
                className="inline-block bg-[#D2B48C] text-black font-semibold py-3 px-8 rounded-sm shadow-lg hover:bg-opacity-80 transition duration-300 uppercase text-xs tracking-widest mt-12"
            >
                Agendar Reunión
            </a>
        </div>
    </section>
);

// --- Componente: HomePage (Ensamblador) ---
const HomePage = ({ setPage }) => {
    // --- INICIO: Estado para el modal de servicio ---
    const [selectedService, setSelectedService] = useState(null);
    // --- FIN: Estado ---


    // Carga el widget de Calendly solo en la página de inicio
    useEffect(() => {
        const initCalendly = () => {
            if (window.Calendly) {
                window.Calendly.initBadgeWidget({ 
                    url: 'https://calendly.com/albehec/albeh-global?primary_color=B8860B', 
                    text: 'Agenda una reunión', 
                    color: '#D2B48C', 
                    textColor: '#000000', 
                    branding: undefined 
                });
            }
        };

        // Espera a que el script de Calendly se cargue
        const checkCalendly = setInterval(() => {
            if (window.Calendly) {
                clearInterval(checkCalendly);
                initCalendly();
            }
        }, 100);

        // Limpieza
        return () => clearInterval(checkCalendly);
    }, []);

    return (
        <main>
            <HeroSection /> 
            {/* <AboutSection /> */} {/* <-- MOVILIZADO A NetworkPage */}
            <ServicesSection onServiceSelect={setSelectedService} />
            <PortfolioSection />
            {/* ContactSection ya no es un formulario */}
            <ContactSection /> 

            {/* --- INICIO: Renderizado condicional del Modal --- */}
            {selectedService && (
                <ServiceModal 
                    serviceId={selectedService} 
                    onClose={() => setSelectedService(null)} 
                />
            )}
            {/* --- FIN: Renderizado --- */}
        </main>
    );
};

// --- INICIO: Nuevo Componente ServiceModal (Restaurado) ---
const ServiceModal = ({ serviceId, onClose }) => {
    const [data, setData] = useState(null);

    // Cargar los datos del servicio cuando el modal se abre
    useEffect(() => {
        // Buscamos en los datos globales (definidos arriba)
        const serviceData = servicesData.find(s => s.id === serviceId);
        setData(serviceData);
    }, [serviceId]);

    // Ocultar el scroll del body mientras el modal está abierto
    useEffect(() => {
        document.body.style.overflow = 'hidden';
        return () => {
            document.body.style.overflow = 'auto';
        };
    }, []);

    if (!data) return null;

    // Detectar click fuera del contenido para cerrar
    const handleBackdropClick = (e) => {
        if (e.target.id === 'modal-backdrop') {
            onClose();
        }
    };

    return (
        <div 
            id="modal-backdrop"
            onClick={handleBackdropClick}
            className="fixed inset-0 z-[100] bg-black/80 backdrop-blur-sm flex items-center justify-center p-4"
        >
            {/* Contenido del Modal */}
            <div className="relative bg-zinc-950 max-w-6xl w-full max-h-[90vh] rounded-lg overflow-hidden flex flex-col md:flex-row shadow-2xl border border-zinc-700">
                
                {/* Botón de Cerrar */}
                <button 
                    onClick={onClose}
                    className="absolute top-4 right-4 text-zinc-500 hover:text-white transition duration-200 z-20"
                >
                    <X className="w-8 h-8" />
                </button>

                {/* Columna de Imagen (como en P.7 "Gestión de Patrimonio") */}
                <div className="w-full md:w-1/3 min-h-[200px] md:min-h-0">
                    <img 
                        src={data.image} 
                        alt={data.title} 
                        className="w-full h-full object-cover"
                    />
                </div>

                {/* Columna de Contenido */}
                <div className="w-full md:w-2/3 p-8 md:p-12 overflow-y-auto">
                    <h2 className="text-5xl font-black text-white uppercase tracking-tighter mb-4">{data.title}</h2>
                    <p className="text-base font-light text-zinc-300 mb-10">{data.intro}</p>

                    {/* Puntos Clave */}
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                        {data.points.map((point) => (
                            <div key={point.name}>
                                <h4 className="text-lg font-semibold text-[#D2B48C] mb-2">{point.name}</h4>
                                <p className="text-sm font-light text-zinc-400">{point.desc}</p>
                            </div>
                        ))}
                    </div>
                </div>

            </div>
        </div>
    );
};
// --- FIN: Nuevo Componente ServiceModal ---


// --- Componente: TeamSection (Restaurado a "Presentation Dark") ---
const TeamSection = () => {
    const teamData = [
        { name: "Diocelino Rangel", role: "CEO CRIAL & CSO Albeh", details: ["Manufacturing", "Renaissance"], location: "USA - México", img: "https://placehold.co/300x300/333/555?text=D.+Rangel" },
        { name: "Rodrigo Martinez", role: "CEO Hubsy & CFO Albeh", details: ["Escuela Bancaria Comercial", "Price Waterhouse Coopers"], location: "México", img: "https://placehold.co/300x300/333/555?text=R.+Martinez" },
        { name: "Abdulkader Hallak", role: "CDO Albeh - UX/UI Diseñador", details: ["Linaeus Universidad"], location: "Suecia", img: "https://placehold.co/300x300/333/555?text=A.+Hallak" },
        { name: "Salvador Cardenas", role: "Tech Lead Albeh", details: ["Desarrollador Full Stack", "Universidad Sur de"], location: "Australia", img: "https://placehold.co/300x300/333/555?text=S.+Cardenas" },
        { name: "Matteo Boffa", role: "NED - Consejero Inversionista", details: ["SEGI Hub", "Swiss Business Council"], location: "Suiza - EAU", img: "https://placehold.co/300x300/333/555?text=M.+Boffa" },
        { name: "Lucia Sotelo", role: "Directora Talentos", details: ["Cosmopolitan Magazine"], location: "Colombia - Mexico", img: "https://placehold.co/300x300/333/555?text=L.+Sotelo" },
        { name: "Aminah Zobeida", role: "Consejera Diplomatica", details: ["Embajada Iran en México"], location: "México - Iran", img: "https://placehold.co/300x300/333/555?text=A.+Zobeida" },
        { name: "Marco Budib", role: "Producción Audiovisual", details: ["Phantasma Lab"], location: "México", img: "https://placehold.co/300x300/333/555?text=M.+Budib" },
        { name: "Miguel Angel Cruz", role: "CRIAL & Albeh - PM", details: ["Coordinador Educativo"], location: "México", img: "https://placehold.co/300x300/333/555?text=M.A.+Cruz" },
        { name: "Alfonso Simon", role: "Representante Comercial", details: ["Bolivia", "Miami"], location: "Bolivia - USA", img: "https://placehold.co/300x300/333/555?text=A.+Simon" },
        { name: "Elias Quezada", role: "Representante Comercial", details: ["México"], location: "México", img: "https://placehold.co/300x300/333/555?text=E.+Quezada" },
        { name: "Luis Miguel Rivera", role: "Representante Comercial", details: ["España"], location: "España", img: "https://placehold.co/300x300/333/555?text=L.M.+Rivera" },
        { name: "Tomasso Spinelli", role: "Representante Comercial", details: ["Italia"], location: "Italia", img: "https://placehold.co/300x300/333/555?text=T.+Spinelli" },
        { name: "Diabe Soumare", role: "Representante Comercial", details: ["Senegal"], location: "Senegal", img: "https://placehold.co/300x300/333/555?text=D.+Soumare" },
    ];

    return (
        <section id="team" className="py-20 md:py-32 bg-zinc-950 text-white">
            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <h2 className="text-6xl font-black text-white text-center uppercase tracking-tighter mb-20">
                    Red de Talentos
                </h2>
                
                <div className="grid md:grid-cols-2 gap-16 items-start">
                    
                    {/* Columna Izquierda: Texto */}
                    <div className="space-y-6 text-base font-light text-zinc-300">
                        <div className="w-20 h-1 bg-white"></div>
                        
                        <p>En AGE, convertimos la confianza en resultados. No solo desarrollamos proyectos globales; construimos alianzas estratégicas diseñadas para generar un impacto tangible y positivo.</p>
                        <blockquote className="pl-4 border-l-2 border-[#D2B48C] italic">
                            <p>"Aprovechamos la tecnología y las mejores prácticas para garantizar la excelencia en cada ejecución. Más que proveedores, somos un socio estratégico."</p>
                            <footer className="mt-2 not-italic">
                                <span className="block font-semibold text-white">Estefanía Alemán</span>
                                <span className="block text-xs text-zinc-400">Co Fundador / CMO</span>
                            </footer>
                        </blockquote>
                        
                        <p>La capacidad de ejecución de Albeh se potencia a través de nuestro talento extendido. Gracias a alianzas basadas en la confianza absoluta y el expertise probado, activamos células de trabajo multidisciplinarias.</p>
                    </div>

                    {/* Columna Derecha: Grid de Equipo (3 columnas) */}
                    <div className="grid grid-cols-2 lg:grid-cols-3 gap-8">
                        {teamData.map((member) => (
                            <div key={member.name} className="text-center md:text-left">
                                <img 
                                    src={member.img}
                                    alt={member.name}
                                    className="w-full h-auto object-cover mb-4"
                                />
                                <h4 className="text-lg font-semibold text-white">{member.name}</h4>
                                <p className="text-sm font-light text-zinc-300 mb-2">{member.role}</p>
                                <ul className="text-xs font-light text-zinc-400 space-y-1">
                                    {member.details.map(detail => <li key={detail}>• {detail}</li>)}
                                </ul>
                                <p className="text-xs text-zinc-500 mt-2">{member.location}</p>
                            </div>
                        ))}
                    </div>
                </div>
            </div>
        </section>
    );
};

// --- Componente: NetworkPage (Ensamblador, Restaurado a "Presentation Dark") ---
const NetworkPage = ({ setPage }) => {
    const [openRegionId, setOpenRegionId] = useState('northAmerica'); 

    const regionsData = [
        {
            id: 'northAmerica',
            name: 'America del Norte, Centro y el Caribe',
            countries: ["Estados Unidos de Norteamerica", "Canada", "México", "Republica Dominicana", "Panama", "Cuba", "Bahamas"]
        },
        {
            id: 'southAmerica',
            name: 'America del Sur',
            countries: ["Colombia", "Peru", "Bolivia", "Brasil", "Chile", "Argentina"]
        },
        {
            id: 'europe',
            name: 'Europa',
            countries: ["Suecia", "Reino Unido", "Irlanda", "Alemania", "Polonia", "Lituania", "Suiza", "Italia", "España"]
        },
        {
            id: 'asiaAfricaOceania',
            name: 'Asia, Africa y Oceania',
            countries: ["China", "Hong Kong", "Singapur", "Malasia", "Arabia Saudita", "Qatar", "Emiratos Árabes Unidos", "Oman", "Senegal", "Nigeria", "Australia"]
        }
    ];

    return (
        <main className="pt-20"> {/* Padding top para el header fijo */}
            
            {/* --- INICIO: Sección Visión (MOVILIZADA AQUÍ) --- */}
            <AboutSection />
            {/* --- FIN: Sección Visión --- */}

            {/* Sección RED GLOBAL (PÁGINA 8) */}
            <section id="network" className="bg-black py-20 md:py-32 text-white">
                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                    <h1 className="text-8xl lg:text-9xl font-black text-white text-center uppercase tracking-tighter mb-20">
                        Red Global
                    </h1>
                    
                    {/* Layout de Acordeón (Restaurado "Presentation Dark") */}
                    <div className="max-w-3xl mx-auto w-full space-y-4">
                        
                        {regionsData.map((region) => (
                            <div key={region.id} className="bg-zinc-900 rounded-lg overflow-hidden border border-zinc-800">
                                
                                {/* Botón del Menú */}
                                <button
                                    onClick={() => setOpenRegionId(openRegionId === region.id ? null : region.id)}
                                    className={`w-full text-left p-6 transition duration-300 flex justify-between items-center ${
                                        openRegionId === region.id
                                            ? 'bg-zinc-700 text-white' // Activo
                                            : 'text-zinc-300 hover:bg-zinc-800 hover:text-white' // Inactivo
                                    }`}
                                >
                                    <span className="text-xl font-semibold">{region.name}</span>
                                    <span className={`transform transition-transform duration-300 ${
                                        openRegionId === region.id ? 'rotate-180' : ''
                                    }`}>
                                        <ChevronDown className="w-5 h-5" />
                                    </span>
                                </button>
                                
                                {/* Submenú Condicional */}
                                <div className={`transition-all duration-500 ease-in-out overflow-hidden ${
                                    openRegionId === region.id ? 'max-h-[1000px] opacity-100' : 'max-h-0 opacity-0'
                                }`}>
                                    <div className="p-8 border-t border-zinc-800">
                                        <ul className="columns-2 md:columns-3 gap-x-8 text-zinc-300 font-light space-y-2">
                                            {region.countries.map(country => (
                                                <li key={country} className="break-inside-avoid">{country}</li>
                                            ))}
                                        </ul>
                                    </div>
                                </div>

                            </div>
                        ))}

                    </div>
                    
                    <p className="text-zinc-400 text-xs uppercase tracking-widest text-center mt-20">
                        CONSTRUYENDO RELACIONES EN EL MUNDO
                    </p>
                </div>
            </section>

            {/* Team Section */}
            <TeamSection />

            {/* CTA Divider (Restaurado "Presentation Dark") */}
            <section className="py-20 bg-black border-t border-b border-zinc-900">
                <div className="max-w-4xl mx-auto px-4 text-center">
                    <h3 className="text-3xl font-semibold text-white mb-4">Conectando Oportunidades</h3>
                    <p className="text-base text-zinc-400 mb-8 font-light">
                        ¿Desea formar parte de nuestra red o discutir una oportunidad de negocio? Contáctenos hoy.
                    </p>
                    <a 
                        href="#contact" 
                        onClick={(e) => {
                            e.preventDefault();
                            setPage('home');
                            setTimeout(() => scrollToSection('contact'), 100);
                        }}
                        className="inline-block bg-[#D2B48C] text-black font-semibold py-3 px-8 rounded-sm shadow-lg hover:bg-opacity-80 transition duration-300 uppercase text-xs tracking-widest"
                    >
                        Contactar a AGE
                    </a>
                </div>
            </section>
        </main>
    );
};

// --- Componente: Footer (Restaurado "Presentation Dark") ---
const Footer = ({ setPage }) => (
    <footer className="py-12 bg-black text-zinc-400 border-t border-zinc-800">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="flex flex-col md:flex-row justify-between items-center space-y-6 md:space-y-0">
                
                <div className="text-center md:text-left">
                    <p className="text-xl font-bold tracking-widest text-[#D2B48C] uppercase mb-2">AGE</p>
                    <p className="text-xs font-light">&copy; Albeh Global Enterprises 2025.</p>
                </div>

                <div className="flex flex-col md:flex-row items-center space-y-4 md:space-y-0 md:space-x-8">
                    <div className="flex space-x-6 text-xs uppercase tracking-widest font-light">
                        <a 
                            href="#network" 
                            onClick={(e) => {
                                e.preventDefault();
                                setPage('network');
                                setTimeout(() => scrollToSection('network'), 100);
                            }}
                            className="hover:text-white transition duration-200"
                        >
                            Red Global
                        </a>
                        <a href="#" onClick={(e) => e.preventDefault()} className="hover:text-white transition duration-200">
                            Términos y Privacidad
                        </a>
                    </div>
                    <a href="https://www.linkedin.com/company/albeh-global-enterprises" title="LinkedIn" target="_blank" rel="noopener noreferrer" className="text-zinc-300 hover:text-white transition duration-200">
                        <Linkedin className="w-5 h-5" />
                    </a>
                </div>
            </div>
        </div>
    </footer>
);


// --- Componente Principal: App ---
const App = () => {
    const [page, setPage] = useState('home'); // 'home' o 'network'

    // Carga los scripts globales (Calendly)
    useEffect(() => {
        loadCss('https://assets.calendly.com/assets/external/widget.css');
        loadScript('https://assets.calendly.com/assets/external/widget.js')
            .then(() => {
                console.log('Calendly script loaded');
            })
            .catch(e => console.error(e));
    }, []);
    
    // Añade el estilo global (si es necesario)
    useEffect(() => {
        const styleTag = document.createElement('style');
        styleTag.innerHTML = `
            body {
                scroll-behavior: smooth;
            }
        `;
        document.head.appendChild(styleTag);
        return () => document.head.removeChild(styleTag);
    }, []);

    return (
        <div className="antialiased font-sans bg-black text-white">
            <Header currentPage={page} setPage={setPage} />
            
            {page === 'home' && <HomePage setPage={setPage} />}
            {page === 'network' && <NetworkPage setPage={setPage} />}
            
            <Footer setPage={setPage} />
        </div>
    );
};

export default App;