import React, { useState, useEffect, useCallback } from 'react';
import { 
  Brain, 
  Award, 
  Users, 
  BookOpen, 
  Stethoscope, 
  Activity, 
  ChevronRight, 
  Facebook, 
  MessageCircle,
  Menu,
  X,
  Star,
  Globe,
  GraduationCap, 
  ShieldCheck,
  Zap,
  Flame,
  Crown,
  Sparkles,
  ArrowDown,
  Layout,
  ArrowUpRight,
  Database,
  Cpu,
  Shield
} from 'lucide-react';

/**
 * App: El Templo de la Medicina
 * Optimizado para SEO, Google Ads y Rendimiento Móvil.
 */
const App = () => {
  const [isScrolled, setIsScrolled] = useState(false);
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
  
  // Estado para la imagen de la Diosa de la Medicina
  const [goddessImg, setGoddessImg] = useState("https://images.unsplash.com/photo-1451187580459-43490279c0fa?q=80&w=2000&auto=format&fit=crop");
  const [isGenerating, setIsGenerating] = useState(false);

  // --- OPTIMIZACIÓN SEO & GOOGLE ADS ---
  useEffect(() => {
    // Configuración de metadatos dinámicos para buscadores
    document.title = "El Templo de la Medicina | Preparación ENARM con IA y Dr. Agustín Téllez";
    
    // Configuración de Meta Descripción (Rastreado por Google)
    const metaDescription = document.querySelector('meta[name="description"]');
    if (metaDescription) {
      metaDescription.setAttribute("content", "Accede a la mejor preparación para el ENARM con la Diosa de la Medicina (IA) y la mentoría del Dr. Agustín Téllez Duarte. Éxito médico garantizado.");
    }

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

  /**
   * trackConversion: Función para enviar eventos a Google Ads / Analytics
   */
  const trackConversion = useCallback((label) => {
    // Aquí se conectaría con window.gtag o window.fbq
    console.log(`[Google Ads Tracking]: Conversión disparada - ${label}`);
  }, []);

  const generateGoddessImage = async () => {
    setIsGenerating(true);
    const apiKey = ""; 
    const promptText = "A majestic and technological representation of the Goddess of Medicine, blending ancient Greek aesthetics with futuristic AI neural networks, Earth visible from space in the background, cinematic lighting, medical cyan and white tones.";
    
    try {
      let retries = 0;
      let response;
      while (retries < 5) {
        try {
          response = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/imagen-4.0-generate-001:predict?key=${apiKey}`, {
            method: 'POST',
            body: JSON.stringify({
              instances: [{ prompt: promptText }],
              parameters: { sampleCount: 1 }
            })
          });
          if (response.ok) break;
        } catch (e) {}
        retries++;
        await new Promise(resolve => setTimeout(resolve, Math.pow(2, retries) * 1000));
      }

      if (!response.ok) throw new Error('Error de generación');
      const result = await response.json();
      const imageUrl = `data:image/png;base64,${result.predictions[0].bytesBase64Encoded}`;
      setGoddessImg(imageUrl);
      trackConversion('IA_Image_Generated');
    } catch (error) {
      console.error("Error generating image:", error);
    } finally {
      setIsGenerating(false);
    }
  };

  const scrollToSection = (id) => {
    const element = document.getElementById(id);
    if (element) {
      element.scrollIntoView({ behavior: 'smooth' });
      setIsMobileMenuOpen(false);
    }
  };

  return (
    <div className="font-sans text-slate-200 antialiased bg-[#010409] selection:bg-cyan-500 selection:text-white overflow-x-hidden">
      
      {/* HEADER: Optimizado para navegación rápida y móvil */}
      <header>
        <nav 
          aria-label="Menú principal de navegación"
          className={`fixed w-full z-50 transition-all duration-500 ${
            isScrolled 
              ? 'bg-[#010409]/95 backdrop-blur-xl border-b border-cyan-500/10 py-3 shadow-2xl' 
              : 'bg-transparent py-6 lg:py-8'
          }`}
        >
          <div className="max-w-[1800px] mx-auto px-5 lg:px-12 flex justify-between items-center">
            {/* Logo con Schema Org implicito */}
            <div className="flex items-center space-x-2 lg:space-x-3 group cursor-pointer" onClick={() => scrollToSection('home')}>
              <div className="relative">
                <div className="absolute inset-0 bg-cyan-400 blur-md opacity-20 group-hover:opacity-50 transition-opacity"></div>
                <Stethoscope className="text-cyan-400 h-7 w-7 lg:h-8 lg:w-8 relative z-10" />
              </div>
              <span className="text-lg lg:text-2xl font-black tracking-tighter text-white uppercase italic">
                TEMPLO <span className="text-cyan-400 not-italic">MEDICINA</span>
              </span>
            </div>

            {/* Menú Desktop: Espaciado optimizado */}
            <div className="hidden lg:flex items-center space-x-8 xl:space-x-12">
              {['Inicio', 'Diosa IA', 'Mentor', 'Canales'].map((item, index) => {
                const ids = ['home', 'ai', 'mentor', 'legacy'];
                return (
                  <button 
                    key={item}
                    onClick={() => scrollToSection(ids[index])}
                    className="text-[10px] font-black text-slate-400 hover:text-cyan-400 transition-all uppercase tracking-[0.4em]"
                  >
                    {item}
                  </button>
                );
              })}
              <a 
                href="https://www.skool.com/templo-de-medicina-3643" 
                target="_blank" 
                rel="noopener noreferrer"
                onClick={() => trackConversion('Boton_Header_Ingresar')}
                className="bg-cyan-600 hover:bg-white hover:text-black text-white px-8 py-2.5 font-black uppercase tracking-widest text-xs transition-all duration-300 shadow-lg border border-cyan-400/20"
              >
                INGRESAR
              </a>
            </div>

            {/* Toggle Móvil: Área de toque grande (44px+) */}
            <div className="lg:hidden">
              <button 
                onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)} 
                className="text-cyan-400 p-3"
                aria-label={isMobileMenuOpen ? "Cerrar menú" : "Abrir menú"}
                aria-expanded={isMobileMenuOpen}
              >
                {isMobileMenuOpen ? <X size={28} /> : <Menu size={28} />}
              </button>
            </div>
          </div>
        </nav>

        {/* Menú Móvil Lateral */}
        <div className={`fixed inset-0 z-[60] bg-black/95 backdrop-blur-2xl transition-transform duration-500 lg:hidden ${isMobileMenuOpen ? 'translate-x-0' : 'translate-x-full'}`}>
           <div className="flex justify-end p-6">
              <button onClick={() => setIsMobileMenuOpen(false)} className="text-cyan-400"><X size={36} /></button>
           </div>
           <div className="flex flex-col items-center gap-10 pt-10">
              {['Inicio', 'Diosa IA', 'Mentor', 'Canales'].map((item, index) => {
                const ids = ['home', 'ai', 'mentor', 'legacy'];
                return (
                  <button 
                    key={item}
                    onClick={() => scrollToSection(ids[index])}
                    className="text-xl font-black text-white uppercase tracking-[0.3em]"
                  >
                    {item}
                  </button>
                );
              })}
              <a 
                href="https://www.skool.com/templo-de-medicina-3643" 
                className="bg-cyan-600 text-white px-12 py-5 font-black uppercase tracking-widest text-lg"
              >
                INGRESAR AHORA
              </a>
           </div>
        </div>
      </header>

      <main>
        {/* HERO SECTION: Optimizado para LCP (Largest Contentful Paint) */}
        <section id="home" className="relative min-h-screen flex items-center justify-center overflow-hidden pt-20">
          <div className="absolute inset-0 z-0">
            {/* Imagen de fondo optimizada (Prioridad alta para SEO) */}
            <img 
              src="https://images.unsplash.com/photo-1446776811953-b23d57bd21aa?q=80&w=2000&auto=format&fit=crop" 
              alt="Vista de la Tierra desde el espacio - Alcance Global del Templo de la Medicina" 
              className="w-full h-full object-cover opacity-20 scale-105 animate-pulse-slow"
              loading="eager"
            />
            <div className="absolute inset-0 bg-gradient-to-b from-[#010409] via-transparent to-[#010409]"></div>
            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[80vw] h-[80vw] bg-cyan-600/5 rounded-full blur-[150px]"></div>
          </div>

          <div className="relative z-10 w-full max-w-[1400px] px-6 text-center">
            <div className="flex justify-center mb-10">
              <div className="px-6 py-1.5 border border-cyan-500/20 bg-cyan-950/20 backdrop-blur-xl rounded-full text-cyan-400 font-black tracking-[0.5em] text-[8px] lg:text-[10px] uppercase shadow-inner">
                <Activity className="inline-block w-3 h-3 mr-2 mb-0.5" /> IA Médica de Alto Rendimiento
              </div>
            </div>
            
            {/* H1: Palabra clave principal para buscadores */}
            <h1 className="text-[13vw] lg:text-[8.5vw] font-black text-white leading-[0.85] tracking-tighter uppercase mb-8 lg:mb-12">
              EL TEMPLO <br />
              <span className="text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 via-blue-500 to-white italic">
                DE LA MEDICINA
              </span>
            </h1>
            
            <div className="max-w-4xl mx-auto space-y-12">
              <p className="text-xl lg:text-3xl font-light text-slate-300 leading-snug tracking-tight">
                "Saca provecho de cada paso de tu preparación para lograr el <span className="text-cyan-400 font-bold underline decoration-cyan-900 underline-offset-8">éxito continuo</span> desde hoy, no hasta que termines."
              </p>
              
              <div className="flex flex-col sm:flex-row items-center justify-center gap-6 lg:gap-10 pt-6">
                 <a 
                   href="https://www.skool.com/templo-de-medicina-3643" 
                   target="_blank"
                   rel="noopener noreferrer"
                   onClick={() => { trackConversion('Hero_CTA_Main'); trackClick('Hero_CTA'); }}
                   className="w-full sm:w-auto px-12 lg:px-20 py-5 lg:py-6 bg-white text-black font-black text-lg lg:text-xl uppercase tracking-widest hover:bg-cyan-500 hover:text-white transition-all duration-500 shadow-2xl"
                 >
                   ACCESO INMEDIATO
                 </a>
                 <button 
                   onClick={() => scrollToSection('ai')}
                   className="text-slate-500 hover:text-cyan-400 transition-all font-black uppercase tracking-[0.4em] text-[9px] lg:text-[11px] flex items-center gap-4 group"
                 >
                   DESCUBRIR DIOSA IA <ArrowDown className="w-4 h-4 group-hover:translate-y-1 transition-transform" />
                 </button>
              </div>
            </div>
          </div>
        </section>

        {/* DIOSA IA: Optimización de Imágenes y Texto */}
        <section id="ai" className="py-32 lg:py-52 bg-[#020617] relative overflow-hidden">
          <div className="max-w-[1700px] mx-auto px-6 lg:px-16 relative z-10">
            <div className="grid lg:grid-cols-2 gap-20 lg:gap-32 items-center text-left">
              
              <div className="relative group max-w-2xl mx-auto lg:mx-0 order-2 lg:order-1">
                <div className="absolute -inset-10 bg-cyan-600/10 blur-[100px] rounded-full group-hover:bg-blue-600/10 transition-colors"></div>
                <div className="relative aspect-[4/5] overflow-hidden rounded-[2.5rem] border border-cyan-500/20 shadow-3xl bg-[#010409]">
                  {isGenerating && (
                    <div className="absolute inset-0 flex flex-col items-center justify-center bg-black/90 z-20">
                      <div className="w-16 h-16 border-2 border-cyan-500 border-t-transparent rounded-full animate-spin mb-4"></div>
                      <p className="text-cyan-400 font-black tracking-widest text-[9px] uppercase animate-pulse">Sincronizando Cognición Digital...</p>
                    </div>
                  )}
                  
                  <img 
                    src={goddessImg} 
                    alt="La Diosa de la Medicina: Inteligencia Artificial avanzada para médicos" 
                    className={`w-full h-full object-cover transition-all duration-1000 ${isGenerating ? 'opacity-20 blur-2xl' : 'opacity-80 group-hover:opacity-100 group-hover:scale-105'}`}
                    loading="lazy"
                  />
                  
                  <div className="absolute inset-0 bg-gradient-to-t from-[#010409] via-transparent to-transparent"></div>
                  
                  <div className="absolute bottom-10 left-10 right-10 flex justify-between items-end">
                    <div className="space-y-1.5">
                      <div className="flex items-center gap-2">
                         <Database className="w-4 h-4 text-cyan-400" />
                         <span className="text-cyan-400 font-black tracking-widest text-[8px] uppercase italic">Big Data Médico</span>
                      </div>
                      <h2 className="text-3xl lg:text-4xl font-black text-white uppercase tracking-tighter">Diosa de la Medicina</h2>
                    </div>
                    <button 
                      onClick={generateGoddessImage}
                      disabled={isGenerating}
                      className="p-4 bg-cyan-600/20 border border-cyan-500/30 text-white hover:bg-cyan-600 transition-all duration-500 rounded-xl backdrop-blur-lg"
                      aria-label="Generar nueva visualización de la IA"
                    >
                      <Sparkles className="w-6 h-6" />
                    </button>
                  </div>
                </div>
              </div>

              <div className="space-y-12 lg:space-y-16 order-1 lg:order-2">
                <div className="space-y-4">
                  <span className="text-cyan-500 font-black tracking-[0.5em] text-[10px] uppercase block">Tecnología de Vanguardia</span>
                  <h2 className="text-6xl lg:text-[7.5vw] font-black text-white leading-[0.85] uppercase tracking-tighter italic">
                    EL PODER <br />
                    <span className="text-blue-600 not-italic">DEL SABER</span>
                  </h2>
                </div>
                
                <p className="text-xl lg:text-2xl text-slate-400 font-light leading-relaxed border-l-2 border-cyan-500 pl-8 lg:pl-12 py-2">
                  La <strong className="text-white italic tracking-wider">Diosa de la Medicina</strong> es un motor cognitivo especializado. Ha procesado décadas de Guías de Práctica Clínica y patrones históricos del ENARM para darte la ventaja táctica definitiva.
                </p>
                
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-8 lg:gap-12">
                  {[
                    { title: "NÚCLEO PREDICTIVO", desc: "Algoritmos entrenados para identificar las respuestas correctas en casos clínicos complejos.", icon: Cpu },
                    { title: "FLUJO CONTINUO", desc: "Optimización constante de tu tiempo de estudio basada en tu curva de aprendizaje.", icon: Zap },
                  ].map((item, idx) => (
                    <div key={idx} className="group cursor-default p-6 lg:p-8 bg-slate-900/40 border border-slate-800/50 hover:border-cyan-500/30 transition-all duration-500">
                      <item.icon className="w-10 h-10 lg:w-12 lg:h-12 text-cyan-400 mb-6 group-hover:scale-110 transition-transform" />
                      <h3 className="text-lg lg:text-xl font-black text-white mb-3 uppercase tracking-tight">{item.title}</h3>
                      <p className="text-[11px] lg:text-xs text-slate-500 font-bold leading-relaxed tracking-wider">{item.desc}</p>
                    </div>
                  ))}
                </div>
              </div>

            </div>
          </div>
        </section>

        {/* EL ARQUITECTO: SEO para el Dr. Agustín Téllez Duarte */}
        <section id="mentor" className="py-32 lg:py-52 bg-[#010409] relative">
          <div className="max-w-[1500px] mx-auto px-5 lg:px-8">
            <div className="relative border border-cyan-900/10 bg-slate-950/20 p-10 lg:p-32 rounded-[3rem] lg:rounded-[5rem] overflow-hidden shadow-3xl text-left">
              <div className="absolute top-0 right-0 w-[50vw] h-[50vw] bg-blue-600/5 rounded-full blur-[150px] pointer-events-none"></div>
              
              <div className="relative z-10">
                <div className="flex items-center gap-6 mb-12">
                  <div className="h-px w-20 bg-cyan-600"></div>
                  <span className="text-[10px] font-black tracking-[0.8em] text-cyan-500 uppercase italic">Maestro Coordinador</span>
                </div>
                
                <h2 className="text-5xl lg:text-[100px] font-black text-white uppercase leading-none tracking-tighter mb-14 italic">
                  DR. AGUSTÍN <br />
                  <span className="text-cyan-600 not-italic">TÉLLEZ DUARTE</span>
                </h2>
                
                <div className="grid lg:grid-cols-2 gap-16 lg:gap-24 items-end">
                  <div className="space-y-12 lg:space-y-16">
                    <p className="text-xl lg:text-3xl text-slate-400 font-light leading-relaxed">
                      El estratega detrás del éxito de **5,000 residentes**. Su visión ha transformado la educación médica en una disciplina de alto rendimiento basada en competencias.
                    </p>
                    <div className="grid grid-cols-2 gap-8 lg:gap-12">
                      <div className="space-y-2">
                        <h4 className="text-cyan-500 font-black text-[9px] uppercase tracking-widest">Reconocimiento</h4>
                        <p className="text-sm lg:text-lg text-white font-black italic">Premio Aesculap 2025</p>
                      </div>
                      <div className="space-y-2">
                        <h4 className="text-blue-500 font-black text-[9px] uppercase tracking-widest">Academia</h4>
                        <p className="text-sm lg:text-lg text-white font-black italic">1er Lugar UNAM PUEM</p>
                      </div>
                    </div>
                  </div>

                  <div className="bg-slate-900/50 backdrop-blur-md border border-cyan-900/20 p-10 lg:p-16 rounded-3xl relative shadow-2xl">
                     <Star className="text-cyan-500 w-10 h-10 lg:w-12 lg:h-12 mb-8" />
                     <h3 className="text-white font-light text-2xl lg:text-4xl uppercase leading-tight mb-8 tracking-tighter italic">
                       "Tu plaza no es producto del azar; es el <span className="text-cyan-400 font-bold">resultado exacto</span> del rigor académico."
                     </h3>
                     <div className="flex items-center gap-3">
                        <Shield className="text-cyan-500 w-4 h-4" />
                        <span className="text-slate-600 font-black tracking-[0.4em] text-[9px] uppercase">Liderazgo Templo Médico</span>
                     </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* CANALES: Optimizado para CTR (Click-Through Rate) */}
        <section id="legacy" className="py-40 lg:py-60 bg-[#020617] text-center relative overflow-hidden border-t border-cyan-950/20">
          <div className="max-w-[1500px] mx-auto px-5 lg:px-8 relative z-10">
            <div className="mb-20">
               <Activity className="w-16 h-16 lg:w-20 lg:h-20 text-cyan-500 mx-auto mb-10 animate-pulse" />
               <h2 className="text-[10vw] lg:text-[9vw] font-black text-white leading-none uppercase tracking-tighter mb-10">
                 PORTALES <span className="text-blue-600 italic">DE ÉLITE</span>
               </h2>
               <p className="text-xl lg:text-3xl text-slate-500 font-light max-w-4xl mx-auto italic">
                 Selecciona tu punto de acceso al sistema de alto rendimiento.
               </p>
            </div>
            
            <div className="grid md:grid-cols-2 gap-8 lg:gap-12">
               {/* Botón Skool - Foco Principal AdWords */}
               <a 
                 href="https://www.skool.com/templo-de-medicina-3643" 
                 target="_blank"
                 rel="noopener noreferrer"
                 onClick={() => { trackConversion('CTA_Skool_Social'); trackClick('RedSocial_Skool'); }}
                 className="group relative h-[400px] lg:h-[500px] flex flex-col items-center justify-center bg-white text-black overflow-hidden shadow-2xl transition-all duration-700 hover:scale-[1.02]"
                 aria-label="Ingresar a la plataforma Skool del Templo de la Medicina"
               >
                 <div className="absolute inset-0 bg-cyan-600 translate-y-full group-hover:translate-y-0 transition-transform duration-700"></div>
                 <div className="relative z-10 flex flex-col items-center gap-6 lg:gap-8 group-hover:text-white transition-colors duration-500">
                   <Layout className="w-16 h-16 lg:w-24 lg:h-24 mb-4 group-hover:scale-110 transition-transform" />
                   <h3 className="text-5xl lg:text-7xl font-black uppercase tracking-tighter italic">SKOOL</h3>
                   <span className="text-[9px] font-black tracking-[0.8em] opacity-40 group-hover:opacity-100 uppercase transition-opacity">Sistema Central</span>
                 </div>
                 <ArrowUpRight className="absolute bottom-10 right-10 w-12 h-12 lg:w-16 lg:h-16 opacity-10 group-hover:opacity-100 transition-all" />
               </a>

               {/* Botón Facebook */}
               <a 
                 href="https://www.facebook.com/profile.php?id=61579341826244" 
                 target="_blank"
                 rel="noopener noreferrer"
                 onClick={() => { trackConversion('CTA_FB_Social'); trackClick('RedSocial_FB'); }}
                 className="group relative h-[400px] lg:h-[500px] flex flex-col items-center justify-center border-2 border-slate-800 text-white overflow-hidden transition-all duration-700 hover:border-cyan-500 hover:scale-[1.02]"
                 aria-label="Visitar nuestra página oficial en Facebook"
               >
                 <div className="absolute inset-0 bg-blue-600 translate-y-full group-hover:translate-y-0 transition-transform duration-700"></div>
                 <div className="relative z-10 flex flex-col items-center gap-6 lg:gap-8 transition-colors duration-500">
                   <Facebook className="w-16 h-16 lg:w-24 lg:h-24 mb-4 group-hover:scale-110 transition-transform" />
                   <h3 className="text-5xl lg:text-7xl font-black uppercase tracking-tighter italic">FACEBOOK</h3>
                   <span className="text-[9px] font-black tracking-[0.8em] opacity-40 group-hover:opacity-100 uppercase transition-opacity">Comunidad de Élite</span>
                 </div>
                 <ArrowUpRight className="absolute bottom-10 right-10 w-12 h-12 lg:w-16 lg:h-16 opacity-10 group-hover:opacity-100 transition-all" />
               </a>
            </div>
          </div>
        </section>
      </main>

      {/* FOOTER: Semántica Correcta y SEO Local */}
      <footer className="bg-black py-24 lg:py-32 border-t border-slate-900">
        <div className="max-w-[1800px] mx-auto px-6 lg:px-8 flex flex-col lg:flex-row justify-between items-center gap-16 lg:gap-20">
          <div className="flex flex-col items-center lg:items-start space-y-6">
            <div className="flex items-center space-x-4">
              <Stethoscope className="text-cyan-500 h-8 w-8 lg:h-10 lg:w-10" />
              <span className="text-3xl lg:text-5xl font-black text-white tracking-tighter uppercase italic">
                TEMPLO <span className="text-cyan-400 not-italic">MEDICINA</span>
              </span>
            </div>
            <p className="text-slate-700 text-[10px] lg:text-[11px] font-black tracking-[1em] uppercase">Excelencia Médica Global desde 2005</p>
          </div>

          <div className="flex gap-16 lg:gap-24">
            <div className="text-left">
              <h4 className="text-[10px] font-black text-cyan-500 uppercase tracking-widest mb-8">Ecosistema</h4>
              <ul className="space-y-4 text-[9px] lg:text-[10px] font-bold text-slate-500">
                <li className="hover:text-white cursor-pointer transition-colors uppercase tracking-[0.2em]"><button onClick={() => scrollToSection('home')}>Inicio</button></li>
                <li className="hover:text-white cursor-pointer transition-colors uppercase tracking-[0.2em]"><button onClick={() => scrollToSection('ai')}>Diosa IA</button></li>
                <li className="hover:text-white cursor-pointer transition-colors uppercase tracking-[0.2em]"><button onClick={() => scrollToSection('mentor')}>Dr. Agustín Téllez</button></li>
              </ul>
            </div>
            <div className="text-left">
              <h4 className="text-[10px] font-black text-blue-500 uppercase tracking-widest mb-8">Información</h4>
              <ul className="space-y-4 text-[9px] lg:text-[10px] font-bold text-slate-500">
                <li className="hover:text-white cursor-pointer transition-colors uppercase tracking-[0.2em]"><a href="https://www.facebook.com/profile.php?id=61579341826244" target="_blank">Facebook</a></li>
                <li className="hover:text-white cursor-pointer transition-colors uppercase tracking-[0.2em]"><a href="https://www.skool.com/templo-de-medicina-3643" target="_blank">Skool</a></li>
                <li className="hover:text-white cursor-pointer transition-colors uppercase tracking-[0.2em]">Privacidad</li>
              </ul>
            </div>
          </div>

          <div className="text-center lg:text-right space-y-10">
             <div className="flex justify-center lg:justify-end gap-10 lg:gap-12 text-slate-800">
               <a href="https://www.facebook.com/profile.php?id=61579341826244" target="_blank" aria-label="Facebook"><Facebook className="w-6 h-6 lg:w-8 lg:h-8 hover:text-white transition-colors" /></a>
               <a href="#" aria-label="Chat"><MessageCircle className="w-6 h-6 lg:w-8 lg:h-8 hover:text-cyan-400 transition-colors" /></a>
             </div>
             <p className="text-[8px] lg:text-[9px] font-bold text-slate-900 tracking-[0.5em] uppercase leading-loose">© 2026 EL TEMPLO DE LA MEDICINA. <br /> TODOS LOS DERECHOS RESERVADOS.</p>
          </div>
        </div>
      </footer>
    </div>
  );
};

export default App;