.elementor-6 .elementor-element.elementor-element-0588538{--display:flex;}.elementor-6 .elementor-element.elementor-element-9b7996e{width:100%;max-width:100%;}/* Start custom CSS */import React, { useState, useEffect } from 'react';
import { 
  Brain, 
  Compass, 
  Heart, 
  Calendar, 
  User, 
  Volume2, 
  Activity, 
  CheckCircle, 
  ArrowRight, 
  Menu, 
  X, 
  Sparkles, 
  BookOpen, 
  Award,
  Shield,
  Clock,
  ChevronRight,
  Info,
  Download,
  BookMarked,
  DollarSign,
  ThumbsUp,
  ExternalLink,
  Lock
} from 'lucide-react';

export default function App() {
  // Navigation & UI States
  const [activeTab, setActiveTab] = useState('home');
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);
  
  // Modals & Redirection States
  const [isRedirectModalOpen, setIsRedirectModalOpen] = useState(false);
  const [isDownloadModalOpen, setIsDownloadModalOpen] = useState(false);
  const [downloadEmail, setDownloadEmail] = useState('');
  const [downloadSuccess, setDownloadSuccess] = useState(false);
  const [courseSuccess, setCourseSuccess] = useState(false);

  // Interactive Assessment States
  const [activeAssessment, setActiveAssessment] = useState('panic-disorder');
  const [assessmentAnswers, setAssessmentAnswers] = useState({});
  const [assessmentResult, setAssessmentResult] = useState(null);

  // Body Map & Flight/Fight Explainer States
  const [activeBodyZone, setActiveBodyZone] = useState('heart');

  // Audio Player States (Self-Compassion Kristin Neff)
  const [currentTrack, setCurrentTrack] = useState(null);
  const [isPlaying, setIsPlaying] = useState(false);
  const [trackProgress, setTrackProgress] = useState(35);

  // Scroll effect for beautiful sticky glass header
  useEffect(() => {
    const handleScroll = () => {
      if (window.scrollY > 50) {
        setScrolled(true);
      } else {
        setScrolled(false);
      }
    };
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  // External Booking link handler
  const triggerExternalBooking = () => {
    setIsRedirectModalOpen(true);
  };

  const handleConfirmRedirect = () => {
    // URL de simulación de tu sistema externo de agendamiento (Doctoralia, Calendly, etc.)
    window.open('https://www.doctoralia.cl', '_blank');
    setIsRedirectModalOpen(false);
  };

  const handleDownloadSubmit = (e) => {
    e.preventDefault();
    setDownloadSuccess(true);
    setTimeout(() => {
      setDownloadSuccess(false);
      setIsDownloadModalOpen(false);
      setDownloadEmail('');
    }, 4000);
  };

  const handleCourseSubmit = (e) => {
    e.preventDefault();
    setCourseSuccess(true);
    setTimeout(() => {
      setCourseSuccess(false);
    }, 6000);
  };

  // Tracks catalog (based on Kristin Neff's Self-Compassion)
  const tracks = [
    {
      id: 'kindness',
      title: 'Pausa de Auto-Amabilidad',
      duration: '8:45',
      description: 'Un bálsamo de palabras tiernas cuando tu cuerpo percibe peligro inminente y asume catástrofe.',
      pillar: 'Auto-amabilidad frente a la autocrítica severa.'
    },
    {
      id: 'humanity',
      title: 'El Eco de la Humanidad Compartida',
      duration: '12:10',
      description: 'Recordar en medio del pánico que este dolor es parte de la experiencia humana y no estás solo en tu cuarto.',
      pillar: 'Humanidad compartida frente al aislamiento del pánico.'
    },
    {
      id: 'mindfulness',
      title: 'Atención Plena a la Tempestad',
      duration: '10:15',
      description: 'Sostener las sensaciones corporales sin juzgarlas, sin huir de ellas y dándoles un espacio seguro.',
      pillar: 'Mindfulness frente a la sobre-identificación con el miedo.'
    }
  ];

  // Self-Assessments mapping the PDF files
  const assessments = {
    'panic-disorder': {
      title: 'Evaluación de Trastorno de Pánico',
      source: 'am-i-experiencing-panic-disorder.pdf',
      intro: 'Si has tenido un ataque de pánico antes, responde honestamente a estas preguntas sobre cómo interactúas con tu miedo cotidiana.',
      questions: [
        { id: 'pd_q1', text: '¿Has sentido ansiedad, preocupación o nerviosismo constante por tener más ataques de pánico?' },
        { id: 'pd_q2', text: '¿Sueles tener pensamientos catastróficos de que algo terrible te pasará durante una crisis (ej. perder el control, morir, volverte loco)?' },
        { id: 'pd_q3', text: '¿Evitas situaciones o lugares específicos donde temes que te ocurra un ataque de pánico?' },
        { id: 'pd_q4', text: '¿Has abandonado lugares o actividades antes de tiempo debido al inicio de sensaciones de ansiedad?' },
        { id: 'pd_q5', text: '¿Pasas mucho tiempo preparándote para situaciones o procrastinando actividades donde sospechas que te dará pánico?' },
        { id: 'pd_q6', text: '¿Te distraes forzadamente o utilizas "amuletos" para evitar pensar en los ataques de pánico?' },
        { id: 'pd_q7', text: '¿Sientes que necesitas ayuda externa inmediata (medicación no regulada, alcohol, presencia de alguien constante) para hacer frente al pánico?' }
      ]
    },
    'health-anxiety': {
      title: 'Evaluación de Ansiedad por la Salud',
      source: 'am-i-experiencing-health-anxiety.pdf',
      intro: 'Muchas crisis de pánico se desencadenan por una hipervigilancia al cuerpo. Evalúa tu nivel de ansiedad médica.',
      questions: [
        { id: 'ha_q1', text: '¿Te preocupa intensamente tener una enfermedad grave que los médicos aún no han logrado diagnosticar?' },
        { id: 'ha_q2', text: '¿Pasas gran parte de tu día vigilando tu cuerpo, buscando latidos, manchas o bultos?' },
        { id: 'ha_q3', text: 'Al salir de una consulta médica con buenas noticias, ¿tu alivio dura apenas unas pocas horas o días antes de que vuelvan las dudas?' },
        { id: 'ha_q4', text: '¿Tienes dificultades serias para apartar de tu mente los pensamientos relacionados con el cáncer, infartos u otras enfermedades?' },
        { id: 'ha_q5', text: '¿Buscas repetidamente tranquilidad en internet, con familiares o realizando visitas frecuentes a urgencias?' }
      ]
    },
    'death-anxiety': {
      title: 'Evaluación de Ansiedad ante la Muerte',
      source: 'am-i-experiencing-death-anxiety.pdf',
      intro: 'La raíz oculta de muchos pánicos recurrentes es la tanatofobia. Mide cómo esta preocupación moldea tu vida.',
      questions: [
        { id: 'da_q1', text: '¿Pasas un tiempo excesivo angustiándote por tu propia finitud o la muerte de seres queridos?' },
        { id: 'da_q2', text: '¿Sientes un terror paralizante por el proceso físico de morir (dolor, asfixia o pérdida de autonomía)?' },
        { id: 'da_q3', text: '¿Evitas de forma sistemática hospitales, cementerios, noticias fúnebres o películas que aborden la mortalidad?' },
        { id: 'da_q4', text: '¿Tus temores sobre la finitud te han impedido tomar decisiones de vida importantes o disfrutar plenamente del presente?' },
        { id: 'da_q5', text: '¿Sientes la urgencia de realizar conductas repetitivas o "rituales" de seguridad para asegurarte de que no morirás hoy?' }
      ]
    },
    'ptsd-screener': {
      title: 'Screener de Estrés Postraumático (TEPT)',
      source: 'am-i-experiencing-post-traumatic-stress-disorder-ptsd.pdf',
      intro: 'En ocasiones, los ataques de pánico son ecos de eventos altamente aterradores del pasado.',
      questions: [
        { id: 'pt_q1', text: '¿Has vivido alguna experiencia excepcionalmente aterradora, trágica o traumática en tu vida?' },
        { id: 'pt_q2', text: '¿Sufres de pesadillas recurrentes o recuerdos invasivos e involuntarios sobre aquel evento?' },
        { id: 'pt_q3', text: '¿Haces todo lo posible por rehuir conversaciones, personas o lugares que te evoquen ese recuerdo?' },
        { id: 'pt_q4', text: '¿Te encuentras constantemente en guardia, vigilante o sintiendo que estás en vilo?' },
        { id: 'pt_q5', text: '¿Sientes un entumecimiento afectivo o una desconexión profunda hacia tus seres queridos o tu entorno?' }
      ]
    }
  };

  const handleAssessmentSubmit = (e) => {
    e.preventDefault();
    const currentQuestions = assessments[activeAssessment].questions;
    const answeredCount = currentQuestions.filter(q => assessmentAnswers[q.id] !== undefined).length;
    
    if (answeredCount < currentQuestions.length) {
      alert("Por favor, responde a todas las preguntas para darte una perspectiva adecuada.");
      return;
    }

    const positiveAnswers = currentQuestions.filter(q => assessmentAnswers[q.id] === 'yes').length;
    let textResult = "";
    
    if (activeAssessment === 'panic-disorder') {
      textResult = positiveAnswers >= 4 
        ? "Tus respuestas sugieren que estás experimentando un Trastorno de Pánico estructurado. La evitación y la hipervigilancia de tus sensaciones corporales están controlando tu rutina diaria. La Terapia Cognitivo-Conductual (TCC) tiene un 80% de éxito en desarmar este círculo vicioso."
        : "Presentas rasgos de ansiedad, pero tal vez no un trastorno de pánico plenamente consolidado. Abordar estas sensaciones a tiempo evitará que se expandan en el futuro.";
    } else if (activeAssessment === 'health-anxiety') {
      textResult = positiveAnswers >= 3
        ? "Existe una tendencia marcada hacia la Ansiedad por la Salud. Tu mente interpreta erróneamente las sensaciones corporales inofensivas como señales inequívocas de una catástrofe médica inminente. El alivio temporal que buscas perpetúa el problema."
        : "Presentas algunas dudas naturales sobre salud física, pero logras asimilar los diagnósticos médicos con normalidad.";
    } else if (activeAssessment === 'death-anxiety') {
      textResult = positiveAnswers >= 3
        ? "La tanatofobia (ansiedad por la muerte) actúa como el motor invisible de tus crisis de pánico. El pánico es el intento de tu cuerpo por reaccionar a una idea existencial profunda de finitud."
        : "Mantienes una relación sana con la idea de la finitud humana sin que limite de forma invalidante tu vida.";
    } else {
      textResult = positiveAnswers >= 3
        ? "El tamizaje sugiere indicios de Estrés Postraumático. En ocasiones, las crisis de pánico se alimentan de memorias y disparadores no resueltos de tu pasado."
        : "Tus síntomas apuntan a un cuadro de pánico primario, sin indicios de trauma no procesado.";
    }

    setAssessmentResult({
      score: `${positiveAnswers} de ${currentQuestions.length}`,
      text: textResult
    });
  };

  const scrollToSection = (id) => {
    setActiveTab(id);
    setMobileMenuOpen(false);
    const element = document.getElementById(id);
    if (element) {
      element.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
  };

  return (
    <div className="min-h-screen bg-[#FAF9F5] text-[#222825] font-sans antialiased selection:bg-[#D9E8DC] selection:text-[#1E3E2B]">
      
      {/* Dynamic Serene Status Bar */}
      <div className="bg-[#1E3E2B] text-[#E7EFE9] text-xs py-2.5 px-4 text-center tracking-wide font-light flex items-center justify-center gap-2">
        <Sparkles className="w-3.5 h-3.5 text-[#B6D5BE] animate-pulse" />
        <span>Espacio terapéutico de Alfredo Callejas: Un oasis científico y compasivo frente al pánico.</span>
      </div>

      {/* Modern Sticky Glass Header */}
      <header className={`sticky top-0 z-40 transition-all duration-300 ${
        scrolled 
          ? 'bg-[#FAF9F5]/90 backdrop-blur-md border-b border-[#E3E1D7] py-4 shadow-sm' 
          : 'bg-transparent py-6'
      }`}>
        <div className="max-w-7xl mx-auto px-6 flex items-center justify-between">
          
          {/* Logo Brand */}
          <div className="flex items-center gap-3 cursor-pointer" onClick={() => scrollToSection('home')}>
            <div className="w-10 h-10 rounded-full bg-[#1E3E2B] flex items-center justify-center shadow-inner">
              <Compass className="w-5 h-5 text-[#FAF9F5]" />
            </div>
            <div>
              <span className="font-serif text-lg tracking-tight font-semibold block text-[#1E3E2B]">Alfredo Callejas</span>
              <span className="text-[10px] tracking-widest text-[#5C645F] uppercase font-semibold">Psicólogo Clínico · U. de Chile</span>
            </div>
          </div>

          {/* Desktop Nav */}
          <nav className="hidden lg:flex items-center gap-7">
            <button onClick={() => scrollToSection('home')} className={`text-xs uppercase tracking-wider transition-colors ${activeTab === 'home' ? 'text-[#1E3E2B] font-bold' : 'text-[#5C645F] hover:text-[#1E3E2B]'}`}>Inicio</button>
            <button onClick={() => scrollToSection('guia-gratis')} className={`text-xs uppercase tracking-wider transition-colors ${activeTab === 'guia-gratis' ? 'text-[#1E3E2B] font-bold' : 'text-[#5C645F] hover:text-[#1E3E2B]'}`}>Guía Gratis</button>
            <button onClick={() => scrollToSection('assessment')} className={`text-xs uppercase tracking-wider transition-colors ${activeTab === 'assessment' ? 'text-[#1E3E2B] font-bold' : 'text-[#5C645F] hover:text-[#1E3E2B]'}`}>Autoevaluación</button>
            <button onClick={() => scrollToSection('biologia')} className={`text-xs uppercase tracking-wider transition-colors ${activeTab === 'biologia' ? 'text-[#1E3E2B] font-bold' : 'text-[#5C645F] hover:text-[#1E3E2B]'}`}>Fisiología del Dolor</button>
            <button onClick={() => scrollToSection('historias-exposicion')} className={`text-xs uppercase tracking-wider transition-colors ${activeTab === 'historias-exposicion' ? 'text-[#1E3E2B] font-bold' : 'text-[#5C645F] hover:text-[#1E3E2B]'}`}>Exposición & Miedos</button>
            <button onClick={() => scrollToSection('curso')} className={`text-xs uppercase tracking-wider transition-colors text-amber-800 font-bold bg-amber-50 px-2 py-1 rounded border border-amber-200 hover:bg-amber-100 ${activeTab === 'curso' ? 'ring-1 ring-amber-500' : ''}`}>Mi Curso</button>
            <button onClick={() => scrollToSection('meditacion')} className={`text-xs uppercase tracking-wider transition-colors ${activeTab === 'meditacion' ? 'text-[#1E3E2B] font-bold' : 'text-[#5C645F] hover:text-[#1E3E2B]'}`}>Autocompasión</button>
            <button onClick={() => scrollToSection('equipo')} className={`text-xs uppercase tracking-wider transition-colors ${activeTab === 'equipo' ? 'text-[#1E3E2B] font-bold' : 'text-[#5C645F] hover:text-[#1E3E2B]'}`}>Nosotros</button>
          </nav>

          {/* External Link Redirect Trigger */}
          <div className="hidden lg:flex items-center">
            <button 
              onClick={triggerExternalBooking}
              className="bg-[#1E3E2B] text-[#FAF9F5] hover:bg-[#2C523A] px-6 py-2.5 rounded-full text-xs font-semibold tracking-wider uppercase transition-all duration-300 hover:shadow-md flex items-center gap-2"
            >
              <span>Agendar Hora</span>
              <ExternalLink className="w-3.5 h-3.5" />
            </button>
          </div>

          {/* Mobile Menu Button */}
          <button 
            onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
            className="lg:hidden p-2 text-[#1E3E2B]"
            aria-label="Toggle Menu"
          >
            {mobileMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
          </button>
        </div>

        {/* Mobile Navigation Dropdown */}
        {mobileMenuOpen && (
          <div className="lg:hidden absolute top-full left-0 w-full bg-[#FAF9F5] border-b border-[#E3E1D7] shadow-lg py-6 px-6 flex flex-col gap-4 animate-fadeIn">
            <button onClick={() => scrollToSection('home')} className="text-left text-sm font-semibold tracking-wider uppercase py-2 border-b border-[#E3E1D7]/40 text-[#1E3E2B]">Inicio</button>
            <button onClick={() => scrollToSection('guia-gratis')} className="text-left text-sm font-semibold tracking-wider uppercase py-2 border-b border-[#E3E1D7]/40 text-[#1E3E2B]">Guía Gratis (PDF)</button>
            <button onClick={() => scrollToSection('assessment')} className="text-left text-sm font-semibold tracking-wider uppercase py-2 border-b border-[#E3E1D7]/40 text-[#1E3E2B]">Test de Autoevaluación</button>
            <button onClick={() => scrollToSection('biologia')} className="text-left text-sm font-semibold tracking-wider uppercase py-2 border-b border-[#E3E1D7]/40 text-[#1E3E2B]">Biología del Pánico</button>
            <button onClick={() => scrollToSection('historias-exposicion')} className="text-left text-sm font-semibold tracking-wider uppercase py-2 border-b border-[#E3E1D7]/40 text-[#1E3E2B]">Historias de Exposición</button>
            <button onClick={() => scrollToSection('curso')} className="text-left text-sm font-semibold tracking-wider uppercase py-2 border-b border-[#E3E1D7]/40 text-amber-800 font-bold">Curso: Recupera Tu Confianza</button>
            <button onClick={() => scrollToSection('meditacion')} className="text-left text-sm font-semibold tracking-wider uppercase py-2 border-b border-[#E3E1D7]/40 text-[#1E3E2B]">Meditaciones</button>
            <button onClick={() => scrollToSection('equipo')} className="text-left text-sm font-semibold tracking-wider uppercase py-2 border-b border-[#E3E1D7]/40 text-[#1E3E2B]">Alianza Médica & Alfredo</button>
            <button 
              onClick={triggerExternalBooking}
              className="bg-[#1E3E2B] text-[#FAF9F5] py-3 rounded-xl text-center font-semibold text-sm tracking-wider uppercase mt-2 shadow-sm flex items-center justify-center gap-2"
            >
              <span>Ir al Portal de Agenda</span>
              <ExternalLink className="w-4 h-4" />
            </button>
          </div>
        )}
      </header>

      {/* SECTION 1: HERO / PORTADA (Premium Design) */}
      <section id="home" className="pt-6 pb-16 md:py-24 px-6 max-w-7xl mx-auto">
        <div className="grid md:grid-cols-12 gap-12 items-center">
          
          {/* Main Copy */}
          <div className="md:col-span-7 flex flex-col items-start gap-6">
            <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-[#E7EFE9] text-[#1E3E2B] text-xs font-semibold uppercase tracking-wider">
              <span className="w-1.5 h-1.5 rounded-full bg-[#1E3E2B] animate-pulse" />
              Especialista en Trastorno de Pánico y Agorafobia
            </div>
            
            <h1 className="font-serif text-4xl sm:text-5xl lg:text-6xl text-[#1E3E2B] leading-[1.1] font-semibold tracking-tight">
              Tus latidos acelerados <br />
              <span className="italic text-[#48634F] font-light">no son tu fin</span>, sino tu alarma biológica.
            </h1>
            
            <p className="text-[#4E5451] text-base sm:text-lg leading-relaxed max-w-xl">
              Bienvenido a tu oasis de calma. Soy <strong>Alfredo Callejas</strong>, psicólogo de la Universidad de Chile. Comprendo que vivir con miedo constante al próximo ataque de pánico es agotador. Desarmemos el miedo paso a paso bajo un enfoque clínico riguroso y humano.
            </p>

            {/* Micro Badges of Trust */}
            <div className="grid grid-cols-2 sm:grid-cols-3 gap-4 w-full py-4 border-y border-[#E3E1D7]">
              <div className="flex items-center gap-2">
                <Award className="w-5 h-5 text-[#1E3E2B] shrink-0" />
                <span className="text-xs text-[#4E5451] font-medium leading-tight">U. de Chile<br /><span className="text-[10px] font-normal text-[#757E78]">Pregrado & Magíster</span></span>
              </div>
              <div className="flex items-center gap-2">
                <BookOpen className="w-5 h-5 text-[#1E3E2B] shrink-0" />
                <span className="text-xs text-[#4E5451] font-medium leading-tight">CBT de Vanguardia<br /><span className="text-[10px] font-normal text-[#757E78]">Herramientas Prácticas</span></span>
              </div>
              <div className="flex items-center gap-2 col-span-2 sm:col-span-1">
                <Heart className="w-5 h-5 text-[#1E3E2B] shrink-0" />
                <span className="text-xs text-[#4E5451] font-medium leading-tight">Compasión Activa<br /><span className="text-[10px] font-normal text-[#757E78]">Modelo Kristin Neff</span></span>
              </div>
            </div>

            <div className="flex flex-col sm:flex-row gap-4 w-full sm:w-auto">
              <button 
                onClick={triggerExternalBooking}
                className="bg-[#1E3E2B] text-[#FAF9F5] hover:bg-[#2C523A] px-8 py-4 rounded-full text-sm font-semibold tracking-wider uppercase transition-all duration-300 hover:shadow-lg text-center flex items-center justify-center gap-2"
              >
                <span>Agendar Sesión Online</span>
                <ExternalLink className="w-4 h-4" />
              </button>
              <button 
                onClick={() => scrollToSection('guia-gratis')}
                className="border border-[#1E3E2B] text-[#1E3E2B] hover:bg-[#E7EFE9] px-8 py-4 rounded-full text-sm font-semibold tracking-wider uppercase transition-all duration-300 text-center flex items-center justify-center gap-2"
              >
                <Download className="w-4 h-4" />
                <span>Descargar Guía Gratis</span>
              </button>
            </div>
          </div>

          {/* Vanguard Graphic / Profile Frame */}
          <div className="md:col-span-5 relative">
            <div className="relative z-10 w-full aspect-[4/5] rounded-[2rem] overflow-hidden bg-gradient-to-tr from-[#1E3E2B] to-[#48634F] shadow-xl border border-[#E3E1D7] flex flex-col justify-end p-8">
              
              <div className="absolute inset-0 opacity-10 bg-[radial-gradient(#FAF9F5_1px,transparent_1px)] [background-size:16px_16px]"></div>
              
              {/* Profile Image Frame */}
              <div className="absolute inset-0 flex flex-col items-center justify-center text-[#FAF9F5]/40 p-6 text-center">
                <div className="w-20 h-20 rounded-full border border-[#FAF9F5]/20 flex items-center justify-center mb-4">
                  <User className="w-10 h-10 text-[#B6D5BE]" />
                </div>
                <p className="text-xs uppercase tracking-widest font-semibold text-[#B6D5BE]">Espacio para Foto Profesional</p>
                <p className="text-[11px] text-[#FAF9F5]/60 mt-1 max-w-xs">Alfredo Callejas - Psicólogo Clínico</p>
              </div>

              {/* Front Card overlay */}
              <div className="relative z-20 bg-[#FAF9F5]/95 backdrop-blur-md rounded-2xl p-5 shadow-lg border border-[#E3E1D7] flex items-center gap-4">
                <div className="p-3 bg-[#E7EFE9] rounded-xl text-[#1E3E2B]">
                  <Activity className="w-6 h-6" />
                </div>
                <div>
                  <span className="text-[10px] uppercase tracking-wider text-[#5C645F] font-bold block">Práctica Clínica</span>
                  <span className="text-sm font-serif font-bold text-[#1E3E2B] block">Superando el círculo del pánico</span>
                  <span className="text-xs text-[#4E5451]">Espacio libre de juicio.</span>
                </div>
              </div>
            </div>

            {/* Artistic organic blur blobs */}
            <div className="absolute -top-12 -left-12 w-64 h-64 bg-[#B6D5BE]/20 rounded-full blur-3xl -z-10" />
            <div className="absolute -bottom-12 -right-12 w-64 h-64 bg-[#E7EFE9] rounded-full blur-2xl -z-10" />
          </div>

        </div>
      </section>

      {/* SECTION 1.5: FREE GUIDE DOWNLOAD (Lead Magnet - NEW!) */}
      <section id="guia-gratis" className="bg-[#1E3E2B] text-[#FAF9F5] py-16 px-6 relative overflow-hidden">
        <div className="absolute inset-0 opacity-5 bg-[radial-gradient(#FAF9F5_1.5px,transparent_1.5px)] [background-size:24px_24px]" />
        
        <div className="max-w-6xl mx-auto relative z-10 grid md:grid-cols-12 gap-8 items-center">
          
          {/* Cover Mockup */}
          <div className="md:col-span-5 flex justify-center">
            <div className="w-56 sm:w-64 aspect-[3/4] bg-gradient-to-br from-[#48634F] to-[#112419] rounded-xl shadow-2xl border-t border-r border-[#FAF9F5]/20 p-6 flex flex-col justify-between relative transform -rotate-3 hover:rotate-0 transition-all duration-500">
              <div className="absolute top-4 right-4 bg-amber-500 text-[#1E3E2B] font-bold text-[9px] uppercase tracking-widest px-2 py-0.5 rounded shadow">
                GRATIS
              </div>
              <div>
                <BookMarked className="w-8 h-8 text-[#B6D5BE] mb-4" />
                <span className="text-[10px] tracking-widest text-[#B6D5BE] uppercase font-bold block">Guía de Autoterapia</span>
                <h3 className="font-serif text-2xl font-semibold text-white mt-1 leading-tight">24 Técnicas para Controlar un Ataque de Pánico</h3>
              </div>
              <div className="border-t border-white/20 pt-3">
                <span className="text-xs text-white/50 block">Por Alfredo Callejas</span>
                <span className="text-[9px] text-[#B6D5BE] block tracking-wide">Universidad de Chile</span>
              </div>
            </div>
          </div>

          {/* Copy and CTA */}
          <div className="md:col-span-7 flex flex-col items-start gap-4">
            <span className="text-xs tracking-widest text-[#B6D5BE] uppercase font-bold">Recurso Gratuito de Primer Auxilio</span>
            <h2 className="font-serif text-3xl sm:text-4xl text-white font-bold leading-tight">
              ¿Sientes que te ahogas o que el próximo ataque vendrá en cualquier momento?
            </h2>
            <p className="text-white/80 text-sm leading-relaxed max-w-xl">
              He sistematizado las mejores 24 técnicas de desactivación fisiológica y cognitiva basadas en la evidencia actual. No es literatura romántica; son pautas clínicas concretas que puedes aplicar por tu cuenta hoy mismo para frenar el círculo vicioso de la hiperventilación y el miedo corporal.
            </p>

            <button
              onClick={() => setIsDownloadModalOpen(true)}
              className="bg-[#FAF9F5] text-[#1E3E2B] hover:bg-[#E7EFE9] px-7 py-3.5 rounded-full text-xs font-bold uppercase tracking-wider transition-all flex items-center gap-2 mt-2 shadow"
            >
              <Download className="w-4 h-4 text-[#1E3E2B]" />
              <span>Obtener mi Guía Gratuita en PDF</span>
            </button>
            <span className="text-xs text-white/60 mt-1">Más de 2.000 personas de la Universidad de Chile han descargado este material.</span>
          </div>

        </div>
      </section>

      {/* SECTION 2: INTERACTIVE ASSESSMENT HUB (Oasis de Diagnóstico) */}
      <section id="assessment" className="bg-[#E7EFE9]/30 py-20 px-6 border-b border-[#E3E1D7]">
        <div className="max-w-7xl mx-auto">
          
          <div className="text-center max-w-3xl mx-auto mb-16 flex flex-col items-center gap-4">
            <div className="w-12 h-12 rounded-full bg-[#1E3E2B]/10 flex items-center justify-center text-[#1E3E2B]">
              <Brain className="w-6 h-6" />
            </div>
            <h2 className="font-serif text-3xl sm:text-4xl text-[#1E3E2B] font-semibold tracking-tight">
              El Refugio de Autoevaluación
            </h2>
            <p className="text-[#4E5451] text-base leading-relaxed">
              Muchos pacientes que experimentan pánico repetitivo sufren de temores profundos subyacentes. Utiliza este test interactivo basado en nuestros cuadernos clínicos para entender de dónde proviene tu ansiedad.
            </p>
          </div>

          <div className="grid lg:grid-cols-12 gap-8 items-start">
            
            {/* Sidebar body.elementor-page-6 */}
            <div className="lg:col-span-4 flex flex-col gap-3">
              <span className="text-xs font-semibold tracking-widest text-[#5C645F] uppercase px-3">Escoge tu Autoevaluación</span>
              
              {Object.keys(assessments).map((key) => (
                <button
                  key={key}
                  onClick={() => {
                    setActiveAssessment(key);
                    setAssessmentAnswers({});
                    setAssessmentResult(null);
                  }}
                  className={`w-full text-left p-4 rounded-2xl border transition-all duration-300 flex items-center justify-between ${
                    activeAssessment === key 
                      ? 'bg-[#1E3E2B] border-[#1E3E2B] text-[#FAF9F5] shadow-md' 
                      : 'bg-[#FAF9F5] border-[#E3E1D7] text-[#222825] hover:bg-[#E7EFE9]/40'
                  }`}
                >
                  <div className="flex flex-col gap-1 pr-4">
                    <span className="font-semibold text-sm">{assessments[key].title}</span>
                    <span className={`text-[10px] tracking-wide ${activeAssessment === key ? 'text-[#B6D5BE]' : 'text-[#757E78]'}`}>
                      Basado en: {assessments[key].source}
                    </span>
                  </div>
                  <ChevronRight className="w-4 h-4 shrink-0" />
                </button>
              ))}

              <div className="mt-6 p-5 bg-[#FAF9F5] border border-[#E3E1D7] rounded-2xl flex flex-col gap-3">
                <div className="flex items-center gap-2 text-[#1E3E2B]">
                  <Info className="w-4.5 h-4.5" />
                  <span className="text-xs font-bold uppercase tracking-wider">Aviso de Privacidad</span>
                </div>
                <p className="text-xs text-[#5C645F] leading-relaxed">
                  Estas respuestas son anónimas y no se almacenan permanentemente. Te servirán como un punto de partida fundamental para orientar nuestro trabajo clínico.
                </p>
              </div>
            </div>

            {/* Assessment Frame */}
            <div className="lg:col-span-8 bg-[#FAF9F5] border border-[#E3E1D7] rounded-3xl p-6 sm:p-8 shadow-sm">
              <div className="flex items-center justify-between border-b border-[#E3E1D7] pb-4 mb-6">
                <div>
                  <h3 className="font-serif text-xl font-bold text-[#1E3E2B]">{assessments[activeAssessment].title}</h3>
                  <p className="text-xs text-[#5C645F] mt-1 italic">{assessments[activeAssessment].intro}</p>
                </div>
                <span className="text-xs bg-[#E7EFE9] text-[#1E3E2B] font-semibold px-2.5 py-1 rounded-full">Screener de Diagnóstico</span>
              </div>

              {!assessmentResult ? (
                <form onSubmit={handleAssessmentSubmit} className="space-y-6">
                  <div className="divide-y divide-[#E3E1D7]/60">
                    {assessments[activeAssessment].questions.map((q, idx) => (
                      <div key={q.id} className="py-4 first:pt-0 last:pb-0 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                        <span className="text-sm text-[#222825] font-medium leading-relaxed">
                          <span className="text-[#1E3E2B] font-bold mr-2">{idx + 1}.</span> {q.text}
                        </span>
                        
                        <div className="flex items-center gap-3 shrink-0">
                          <button
                            type="button"
                            onClick={() => setAssessmentAnswers({...assessmentAnswers, [q.id]: 'yes'})}
                            className={`px-4 py-2 rounded-xl text-xs font-bold tracking-wider transition-all ${
                              assessmentAnswers[q.id] === 'yes'
                                ? 'bg-[#1E3E2B] text-[#FAF9F5]'
                                : 'bg-[#E7EFE9]/40 text-[#1E3E2B] hover:bg-[#E7EFE9]'
                            }`}
                          >
                            SÍ
                          </button>
                          <button
                            type="button"
                            onClick={() => setAssessmentAnswers({...assessmentAnswers, [q.id]: 'no'})}
                            className={`px-4 py-2 rounded-xl text-xs font-bold tracking-wider transition-all ${
                              assessmentAnswers[q.id] === 'no'
                                ? 'bg-red-800 text-white'
                                : 'bg-[#E7EFE9]/40 text-[#1E3E2B] hover:bg-[#E7EFE9]'
                            }`}
                          >
                            NO
                          </button>
                        </div>
                      </div>
                    ))}
                  </div>

                  <div className="pt-6 border-t border-[#E3E1D7] flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                    <span className="text-xs text-[#5C645F]">
                      Completado: {assessments[activeAssessment].questions.filter(q => assessmentAnswers[q.id] !== undefined).length} de {assessments[activeAssessment].questions.length} preguntas.
                    </span>
                    <button
                      type="submit"
                      className="bg-[#1E3E2B] text-[#FAF9F5] hover:bg-[#2C523A] px-6 py-3 rounded-full text-xs font-semibold tracking-wider uppercase transition-all"
                    >
                      Analizar Respuestas
                    </button>
                  </div>
                </form>
              ) : (
                <div className="py-8 text-center flex flex-col items-center gap-6 animate-fadeIn">
                  <div className="w-16 h-16 rounded-full bg-[#E7EFE9] flex items-center justify-center text-[#1E3E2B]">
                    <CheckCircle className="w-8 h-8" />
                  </div>
                  
                  <div>
                    <span className="text-xs tracking-widest text-[#5C645F] uppercase font-bold">Perspectiva Clínica Sugerida</span>
                    <h4 className="font-serif text-2xl text-[#1E3E2B] font-semibold mt-1">Sintomatología marcada: {assessmentResult.score}</h4>
                    <p className="text-[#4E5451] max-w-xl mx-auto mt-4 leading-relaxed text-sm">
                      {assessmentResult.text}
                    </p>
                  </div>

                  <div className="flex flex-col sm:flex-row gap-3 w-full sm:w-auto mt-4">
                    <button
                      onClick={() => setAssessmentResult(null)}
                      className="border border-[#E3E1D7] hover:bg-[#E7EFE9]/40 px-6 py-3 rounded-full text-xs font-semibold uppercase tracking-wider"
                    >
                      Volver a Evaluar
                    </button>
                    <button
                      onClick={triggerExternalBooking}
                      className="bg-[#1E3E2B] text-[#FAF9F5] hover:bg-[#2C523A] px-6 py-3 rounded-full text-xs font-semibold uppercase tracking-wider flex items-center justify-center gap-2"
                    >
                      <span>Revisar Disponibilidad</span>
                      <ExternalLink className="w-3.5 h-3.5" />
                    </button>
                  </div>
                </div>
              )}

            </div>

          </div>

        </div>
      </section>

      {/* SECTION 3: BIOLOGÍA DE LA RESPUESTA LUCHA/HUIDA (Fight or Flight Response Simulator) */}
      <section id="biologia" className="py-20 px-6 max-w-7xl mx-auto">
        <div className="grid lg:grid-cols-12 gap-12 items-center">
          
          {/* Scientific Bio-explanation */}
          <div className="lg:col-span-6 flex flex-col items-start gap-6">
            <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-[#E7EFE9] text-[#1E3E2B] text-xs font-semibold uppercase tracking-widest">
              <Activity className="w-3.5 h-3.5" />
              Tu cuerpo bajo ataque: La verdad biológica
            </div>

            <h2 className="font-serif text-3xl sm:text-4xl text-[#1E3E2B] font-semibold leading-tight tracking-tight">
              ¿Por qué se siente tan real? <br />
              <span className="italic font-light text-[#48634F]">El mecanismo de supervivencia.</span>
            </h2>

            <p className="text-[#4E5451] text-base leading-relaxed">
              Un ataque de pánico es una <strong>falsa alarma</strong> de tu sistema ancestral de "Lucha o Huida". Tu cuerpo cree que vas a combatir a una bestia salvaje, por lo que desvía recursos cruciales en segundos. Al comprender que cada síntoma tiene una función defensiva, dejas de temerle a tu propia biología.
            </p>

            {/* Interactive zone navigator */}
            <div className="space-y-3 w-full">
              {[
                { id: 'heart', label: 'Latidos acelerados y opresión', desc: 'El corazón bombea sangre con fuerza a las piernas para huir a toda velocidad. No es un infarto; tu corazón está sano y fuerte.' },
                { id: 'breath', label: 'Falta de aire / Hiperventilación', desc: 'Los pulmones absorben oxígeno extra para alimentar los músculos. Al no consumir ese oxígeno corriendo, se acumula y produce un mareo inofensivo.' },
                { id: 'hands', label: 'Manos frías, entumecidas y temblorosas', desc: 'La sangre se retira de la piel y extremidades hacia los órganos vitales para evitar desangrarse en combate. Esto causa hormigueo.' },
                { id: 'vision', label: 'Visión de túnel e irrealidad', desc: 'Tus pupilas se dilatan para enfocar amenazas puntuales en la distancia. Se percibe como una sensación extraña de desrealización.' }
              ].map((zone) => (
                <button
                  key={zone.id}
                  onClick={() => setActiveBodyZone(zone.id)}
                  className={`w-full text-left p-4 rounded-xl border transition-all duration-300 ${
                    activeBodyZone === zone.id 
                      ? 'bg-white border-[#1E3E2B] shadow-sm pl-6' 
                      : 'border-[#E3E1D7] hover:bg-[#E7EFE9]/20'
                  }`}
                >
                  <div className="flex items-center justify-between">
                    <span className="font-bold text-sm text-[#1E3E2B]">{zone.label}</span>
                    <span className={`w-2 h-2 rounded-full ${activeBodyZone === zone.id ? 'bg-[#1E3E2B]' : 'bg-[#E3E1D7]'}`} />
                  </div>
                  {activeBodyZone === zone.id && (
                    <p className="text-xs text-[#5C645F] mt-2 leading-relaxed animate-fadeIn">{zone.desc}</p>
                  )}
                </button>
              ))}
            </div>

            <button
              onClick={triggerExternalBooking}
              className="bg-[#1E3E2B] text-[#FAF9F5] hover:bg-[#2C523A] px-6 py-3 rounded-full text-xs font-semibold tracking-wider uppercase mt-2 transition-all flex items-center gap-2"
            >
              <span>Aprende a calmar tu sistema</span>
              <ExternalLink className="w-3.5 h-3.5" />
            </button>
          </div>

          {/* Interactive Visual body model */}
          <div className="lg:col-span-6 bg-[#FAF9F5] border border-[#E3E1D7] rounded-3xl p-8 relative overflow-hidden flex flex-col items-center justify-center min-h-[450px]">
            <div className="absolute inset-0 opacity-5 bg-[radial-gradient(#1E3E2B_1.5px,transparent_1.5px)] [background-size:24px_24px]" />
            
            {/* SVG body blueprint representation */}
            <svg viewBox="0 0 200 400" className="w-48 h-96 relative z-10 opacity-80">
              <path 
                d="M100,40 C110,40 120,48 120,60 C120,72 110,80 100,80 C90,80 80,72 80,60 C80,48 90,40 100,40 Z" 
                fill={activeBodyZone === 'vision' ? '#B6D5BE' : '#E3E1D7'} 
                className="transition-colors duration-500"
              />
              <path 
                d="M80,85 L120,85 C130,85 140,105 140,120 L135,220 C135,230 130,235 125,235 L75,235 C70,235 65,230 65,220 L60,120 C60,105 70,85 80,85 Z" 
                fill="#E3E1D7"
              />
              {/* Lungs & Heart Area */}
              <circle 
                cx="100" 
                cy="125" 
                r="18" 
                fill={activeBodyZone === 'breath' ? '#B6D5BE' : '#C8C5B9'} 
                className="transition-colors duration-500"
              />
              <circle 
                cx="100" 
                cy="145" 
                r="10" 
                fill={activeBodyZone === 'heart' ? '#1E3E2B' : '#AEAB9C'} 
                className="transition-colors duration-500 animate-pulse"
              />
              {/* Arms */}
              <path 
                d="M60,110 L25,180 C20,190 30,200 35,190 L58,140 Z" 
                fill={activeBodyZone === 'hands' ? '#B6D5BE' : '#E3E1D7'} 
                className="transition-colors duration-500"
              />
              <path 
                d="M140,110 L175,180 C180,190 170,200 165,190 L142,140 Z" 
                fill={activeBodyZone === 'hands' ? '#B6D5BE' : '#E3E1D7'} 
                className="transition-colors duration-500"
              />
              {/* Legs */}
              <path d="M75,235 L65,370 C63,385 78,385 80,370 L85,255 Z" fill="#E3E1D7" />
              <path d="M125,235 L135,370 C137,385 122,385 120,370 L115,255 Z" fill="#E3E1D7" />
            </svg>

            {/* Glowing contextual label */}
            <div className="absolute bottom-8 left-8 right-8 bg-[#1E3E2B] text-[#FAF9F5] p-4 rounded-2xl text-center shadow-lg animate-fadeIn">
              <span className="text-[10px] uppercase tracking-wider text-[#B6D5BE] font-bold block mb-1">Fisiología Activa</span>
              <span className="text-sm font-semibold italic">
                {activeBodyZone === 'heart' && 'El corazón late con fuerza para salvarte, jamás para fallar.'}
                {activeBodyZone === 'breath' && 'La respiración superficial te oxigena de sobra: no te sofocarás.'}
                {activeBodyZone === 'hands' && 'El hormigueo y la temperatura baja son solo una redistribución segura.'}
                {activeBodyZone === 'vision' && 'Tu vista se agudiza buscando amenazas irreales en la habitación.'}
              </span>
            </div>
          </div>

        </div>
      </section>

      {/* SECTION 4: EXPOSURE & FOBIAS DE ANCLA (Empatía & Relatos de Superación - RESTRUCTURED!) */}
      <section id="historias-exposicion" className="bg-white border-t border-[#E3E1D7] py-20 px-6">
        <div className="max-w-7xl mx-auto">
          
          <div className="max-w-3xl mb-16 flex flex-col items-start gap-4">
            <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-[#E7EFE9] text-[#1E3E2B] text-xs font-semibold uppercase tracking-widest">
              <BookOpen className="w-3.5 h-3.5" />
              Entendiendo el Umbral Clínico
            </div>
            <h2 className="font-serif text-3xl sm:text-4xl text-[#1E3E2B] font-semibold tracking-tight">
              Detrás de cada Ataque de Pánico <br />
              <span className="font-light italic text-[#48634F]">hay un temor esperando ser escuchado</span>
            </h2>
            <p className="text-[#4E5451] text-base leading-relaxed">
              En mi práctica clínica he comprendido que el pánico recurrente casi nunca viaja solo. Suele echar raíces en fobias profundas (a la muerte, a la enfermedad, a perder el control en público o a la falta de aire). Superar el pánico no es esquivar estas ideas; es aprender a habitarlas de forma controlada y desmitificar su peligro.
            </p>
          </div>

          {/* Stories Grid */}
          <div className="grid md:grid-cols-3 gap-8">
            
            {/* Story 1: Fear of Physical Sensations */}
            <div className="bg-[#FAF9F5] rounded-3xl p-8 border border-[#E3E1D7] flex flex-col justify-between hover:shadow-md transition-all duration-300">
              <div>
                <span className="text-[10px] uppercase font-bold tracking-widest text-[#1E3E2B] bg-[#E7EFE9] px-2.5 py-1 rounded-full">
                  Fobia a las Sensaciones
                </span>
                <h3 className="font-serif text-xl font-bold text-[#1E3E2B] mt-4 mb-3">
                  "Siento que mi corazón va a estallar"
                </h3>
                <p className="text-xs text-[#5C645F] leading-relaxed mb-6">
                  El pánico es un maestro de la mentira: te hace creer que un latido acelerado o un mareo fugaz es el preámbulo de un infarto catastrófico. Esto fomenta la búsqueda de urgencias médicas una y otra vez.
                </p>
                
                <div className="border-t border-[#E3E1D7] pt-4 mt-4">
                  <span className="text-[10px] uppercase font-bold text-[#757E78] tracking-wider block mb-2">Historias de Recuperación</span>
                  <p className="text-xs text-[#222825] italic leading-relaxed">
                    "Al principio llamaba a urgencias dos veces por semana convencido de un colapso cardíaco. Alfredo me ayudó a entender el origen del miedo y a exponerme a mis propios latidos. Hoy juego tenis y troto sin miedo."
                  </p>
                  <span className="text-[10px] text-[#4E5451] font-semibold block mt-2">— Roberto, 38 años</span>
                </div>
              </div>
            </div>

            {/* Story 2: Fear of Social Vulnerability */}
            <div className="bg-[#FAF9F5] rounded-3xl p-8 border border-[#E3E1D7] flex flex-col justify-between hover:shadow-md transition-all duration-300">
              <div>
                <span className="text-[10px] uppercase font-bold tracking-widest text-[#1E3E2B] bg-[#E7EFE9] px-2.5 py-1 rounded-full">
                  Fobia a Parecer Ansioso
                </span>
                <h3 className="font-serif text-xl font-bold text-[#1E3E2B] mt-4 mb-3">
                  "No quiero que me vean temblar"
                </h3>
                <p className="text-xs text-[#5C645F] leading-relaxed mb-6">
                  El terror a ser evaluado o a que las personas noten tu sudor, temblor o balbuceo durante una crisis te lleva a aislarte de reuniones sociales y eventos de trabajo, levantando conductas de seguridad invisibles.
                </p>
                
                <div className="border-t border-[#E3E1D7] pt-4 mt-4">
                  <span className="text-[10px] uppercase font-bold text-[#757E78] tracking-wider block mb-2">Historias de Recuperación</span>
                  <p className="text-xs text-[#222825] italic leading-relaxed">
                    "Cancelaba exposiciones de mi trabajo para que no me vieran sudar. Descubrimos que el problema no era la ansiedad, sino mi esfuerzo sobrehumano por ocultarla. El alivio llegó cuando aprendí a dejar de pelear."
                  </p>
                  <span className="text-[10px] text-[#4E5451] font-semibold block mt-2">— Andrea, 29 años</span>
                </div>
              </div>
            </div>

            {/* Story 3: Agoraphobia and Suffocation */}
            <div className="bg-[#FAF9F5] rounded-3xl p-8 border border-[#E3E1D7] flex flex-col justify-between hover:shadow-md transition-all duration-300">
              <div>
                <span className="text-[10px] uppercase font-bold tracking-widest text-[#1E3E2B] bg-[#E7EFE9] px-2.5 py-1 rounded-full">
                  Fobia a la Asfixia y Encierro
                </span>
                <h3 className="font-serif text-xl font-bold text-[#1E3E2B] mt-4 mb-3">
                  "Tengo miedo de no poder escapar"
                </h3>
                <p className="text-xs text-[#5C645F] leading-relaxed mb-6">
                  Volar en avión, subir a un ascensor o estar atrapado en el tráfico provoca una sensación física de asfixia o claustrofobia. Evitas estas actividades hasta que tu mapa geográfico se vuelve diminuto.
                </p>
                
                <div className="border-t border-[#E3E1D7] pt-4 mt-4">
                  <span className="text-[10px] uppercase font-bold text-[#757E78] tracking-wider block mb-2">Historias de Recuperación</span>
                  <p className="text-xs text-[#222825] italic leading-relaxed">
                    "Llevaba tres años sin poder tomar el metro o salir de mi comuna por temor a asfixiarme. Diseñamos una escalera de confianza y exposiciones muy amables. Hoy puedo ir a cualquier parte de Santiago."
                  </p>
                  <span className="text-[10px] text-[#4E5451] font-semibold block mt-2">— Francisco, 45 años</span>
                </div>
              </div>
            </div>

          </div>

          <div className="mt-12 p-8 rounded-3xl bg-[#FAF9F5] border border-[#E3E1D7] text-center max-w-4xl mx-auto flex flex-col md:flex-row md:items-center justify-between gap-6">
            <div className="text-left">
              <h4 className="font-serif text-lg font-bold text-[#1E3E2B]">¿Te sientes identificado con alguno de estos dolores silenciosos?</h4>
              <p className="text-xs text-[#5C645F] mt-1">El proceso de recuperación es progresivo, compasivo y profundamente liberador. No estás roto, solo has dejado de confiar en ti.</p>
            </div>
            <button
              onClick={triggerExternalBooking}
              className="bg-[#1E3E2B] text-[#FAF9F5] hover:bg-[#2C523A] px-6 py-3 rounded-full text-xs font-semibold uppercase tracking-wider shrink-0 transition-all shadow-sm flex items-center gap-2 justify-center"
            >
              <span>Consultar Tratamiento</span>
              <ExternalLink className="w-3.5 h-3.5" />
            </button>
          </div>

        </div>
      </section>

      {/* SECTION 5: MI CURSO "RECUPERA TU CONFIANZA" (New Integration!) */}
      <section id="curso" className="py-20 px-6 bg-[#E7EFE9]/40 border-y border-[#E3E1D7]">
        <div className="max-w-6xl mx-auto">
          
          <div className="text-center max-w-2xl mx-auto mb-16 flex flex-col items-center gap-4">
            <span className="text-xs font-bold uppercase tracking-widest text-[#1E3E2B] bg-[#E7EFE9] px-3 py-1 rounded-full">
              Entrenamiento de Autoterapia Online
            </span>
            <h2 className="font-serif text-3xl sm:text-4xl text-[#1E3E2B] font-bold tracking-tight">
              Recupera tu Confianza
            </h2>
            <p className="text-[#4E5451] text-base leading-relaxed">
              El Entrenamiento definitivo para superar la ansiedad y los ataques de pánico desde cualquier lugar del mundo.
            </p>
          </div>

          <div className="bg-white border border-[#E3E1D7] rounded-[2.5rem] p-6 sm:p-10 shadow-lg grid md:grid-cols-12 gap-10 items-stretch">
            
            {/* Left Column: Offer details */}
            <div className="md:col-span-7 flex flex-col justify-between gap-6">
              
              <div>
                <div className="flex flex-wrap items-center gap-3 mb-4">
                  <span className="bg-red-100 text-red-800 text-xs font-bold uppercase px-3 py-1 rounded-full">
                    OFERTA ESPECIAL por tiempo limitado
                  </span>
                  <div className="flex items-center gap-2">
                    <span className="line-through text-xs text-[#757E78] font-bold">$95.000</span>
                    <span className="text-2xl font-serif font-bold text-[#1E3E2B]">$57.000 CLP</span>
                  </div>
                </div>

                <h3 className="text-lg font-serif font-bold text-[#1E3E2B] mb-4">Lo que aprenderás paso a paso:</h3>
                
                <ul className="space-y-3.5 text-xs text-[#4E5451] leading-relaxed">
                  <li className="flex items-start gap-3">
                    <span className="w-5 h-5 rounded-full bg-[#E7EFE9] text-[#1E3E2B] flex items-center justify-center font-bold text-xs shrink-0">✔</span>
                    <span><strong>Entender por qué la ansiedad no es tu enemiga</strong>, sino una señal de confianza debilitada en tu propio cuerpo.</span>
                  </li>
                  <li className="flex items-start gap-3">
                    <span className="w-5 h-5 rounded-full bg-[#E7EFE9] text-[#1E3E2B] flex items-center justify-center font-bold text-xs shrink-0">✔</span>
                    <span>Identificar las <strong>conductas de seguridad</strong> que alimentan tus miedos sin darte cuenta día tras día.</span>
                  </li>
                  <li className="flex items-start gap-3">
                    <span className="w-5 h-5 rounded-full bg-[#E7EFE9] text-[#1E3E2B] flex items-center justify-center font-bold text-xs shrink-0">✔</span>
                    <span>Reconocer tus <strong>pensamientos catastróficos</strong> y desactivarlos con técnicas de re-atribución cognitiva probadas.</span>
                  </li>
                  <li className="flex items-start gap-3">
                    <span className="w-5 h-5 rounded-full bg-[#E7EFE9] text-[#1E3E2B] flex items-center justify-center font-bold text-xs shrink-0">✔</span>
                    <span>Aprender a usar herramientas terapéuticas reales como la <strong>Flecha Vertical</strong> y la <strong>Hoja para Descatastrofizar</strong>.</span>
                  </li>
                  <li className="flex items-start gap-3">
                    <span className="w-5 h-5 rounded-full bg-[#E7EFE9] text-[#1E3E2B] flex items-center justify-center font-bold text-xs shrink-0">✔</span>
                    <span>Construir tu <strong>Escalera de Confianza</strong>, transformando el miedo paralizante en un entrenamiento progresivo y amable.</span>
                  </li>
                  <li className="flex items-start gap-3">
                    <span className="w-5 h-5 rounded-full bg-[#E7EFE9] text-[#1E3E2B] flex items-center justify-center font-bold text-xs shrink-0">✔</span>
                    <span>Realizar <strong>experimentos conductuales</strong> guiados para recuperar la seguridad profunda en tu cuerpo y en ti mismo.</span>
                  </li>
                  <li className="flex items-start gap-3">
                    <span className="w-5 h-5 rounded-full bg-[#E7EFE9] text-[#1E3E2B] flex items-center justify-center font-bold text-xs shrink-0">✔</span>
                    <span>Entender por qué las <strong>recaídas son parte natural</strong> del proceso de cura (y cómo enfrentarlas con absoluta calma).</span>
                  </li>
                </ul>
              </div>

              {/* Course Guarantee Block */}
              <div className="p-5 bg-amber-50 rounded-2xl border border-amber-200 flex items-start gap-3.5">
                <Lock className="w-6 h-6 text-amber-700 shrink-0 mt-0.5" />
                <div>
                  <span className="text-xs font-bold text-amber-900 uppercase tracking-wider block mb-1">🔒 Garantía 100% de devolución</span>
                  <p className="text-xs text-amber-800 leading-relaxed">
                    Confío tanto en este proceso que si después de completar el curso sientes que no te ha ayudado a reducir tu ansiedad o entender mejor tus crisis, te devolveré el 100% de tu dinero. Sin preguntas.
                  </p>
                </div>
              </div>

            </div>

            {/* Right Column: Register Form, Bonos & Testimonials */}
            <div className="md:col-span-5 bg-[#FAF9F5] border border-[#E3E1D7] rounded-3xl p-6 sm:p-8 flex flex-col justify-between gap-6">
              
              <div>
                <span className="text-[10px] uppercase tracking-widest text-[#5C645F] font-bold block mb-3">Bonos de regalo incluidos hoy:</span>
                <div className="space-y-4">
                  <div className="bg-white p-3 rounded-xl border border-[#E3E1D7]">
                    <span className="text-xs font-bold text-[#1E3E2B] block">Guía práctica: “24 técnicas para controlar ataques de pánico”</span>
                    <p className="text-[11px] text-[#5C645F] mt-0.5">Aprende a interpretar tus sensaciones físicas sin miedo y recuperar el control inmediato. <span className="text-amber-800 font-bold">(Valor $20 USD / Incluido)</span></p>
                  </div>
                  <div className="bg-white p-3 rounded-xl border border-[#E3E1D7]">
                    <span className="text-xs font-bold text-[#1E3E2B] block">Mini curso “Descifra la Mente Ansiosa”</span>
                    <p className="text-[11px] text-[#5C645F] mt-0.5">Una serie de video-clases prácticas para conocer qué hay detrás de la ansiedad de una manera lógica. <span className="text-amber-800 font-bold">(Valor $147 USD / Incluido)</span></p>
                  </div>
                  <div className="bg-white p-3 rounded-xl border border-[#E3E1D7]">
                    <span className="text-xs font-bold text-[#1E3E2B] block">Acceso prioritario a consulta</span>
                    <p className="text-[11px] text-[#5C645F] mt-0.5">Posibilidad de agendar una sesión online personalizada con Alfredo (lista prioritaria, sesiones se pagan por separado).</p>
                  </div>
                </div>
              </div>

              {/* Registration Form (Simulated client registry) */}
              {!courseSuccess ? (
                <form onSubmit={handleCourseSubmit} className="space-y-3 pt-4 border-t border-[#E3E1D7]">
                  <span className="text-xs font-bold text-[#1E3E2B] block">Regístrate en el Entrenamiento:</span>
                  <input 
                    type="email" 
                    required
                    placeholder="Tu correo para recibir acceso" 
                    className="w-full bg-white border border-[#E3E1D7] rounded-xl px-4 py-2.5 text-xs focus:outline-none focus:ring-1 focus:ring-[#1E3E2B]"
                  />
                  <button
                    type="submit"
                    className="w-full bg-amber-600 hover:bg-amber-700 text-white font-bold py-3 px-4 rounded-xl text-xs uppercase tracking-wider transition-all shadow"
                  >
                    Registrarme Ahora por $57.000
                  </button>
                  <p className="text-[10px] text-center text-[#757E78] leading-tight">
                    🕒 Recibirás tu acceso por correo electrónico dentro de los próximos minutos. Revisa carpeta spam si no lo ves de inmediato.
                  </p>
                </form>
              ) : (
                <div className="bg-amber-50 border border-amber-200 p-4 rounded-2xl text-center flex flex-col items-center gap-3 animate-fadeIn">
                  <CheckCircle className="w-8 h-8 text-amber-700" />
                  <div>
                    <span className="text-xs font-bold text-amber-900 block">¡Inscripción Iniciada!</span>
                    <p className="text-[11px] text-amber-800 mt-1 leading-normal">
                      Te hemos enviado los datos de transferencia y de acceso a la plataforma al correo ingresado. Asegúrate de usar el mismo correo de compra para ingresar. ¡Te veo dentro del curso!
                    </p>
                  </div>
                </div>
              )}

            </div>

          </div>

          {/* Student Testimonials Block */}
          <div className="grid md:grid-cols-2 gap-8 mt-10">
            <div className="bg-white/60 p-6 rounded-3xl border border-[#E3E1D7] flex flex-col justify-between">
              <p className="text-xs text-[#4E5451] italic leading-relaxed">
                “Llegué con miedo a salir de casa. Hoy puedo volver a tomar el metro sin sentir que me ahogo. Lo que más me ayudó fue entender que no estaba rota, solo había dejado de confiar en mí.”
              </p>
              <div className="mt-4 flex items-center gap-3">
                <div className="w-8 h-8 bg-[#E7EFE9] text-[#1E3E2B] font-bold rounded-full flex items-center justify-center text-xs">D</div>
                <div>
                  <span className="text-xs font-bold text-[#1E3E2B] block">Daniela, 34 años</span>
                  <span className="text-[10px] text-[#757E78]">Santiago, Estudiante del curso</span>
                </div>
              </div>
            </div>

            <div className="bg-white/60 p-6 rounded-3xl border border-[#E3E1D7] flex flex-col justify-between">
              <p className="text-xs text-[#4E5451] italic leading-relaxed">
                “Después de años de terapia, recién ahora entendí cómo funciona mi ansiedad. Este curso me devolvió la sensación de control absoluta sobre mis sensaciones corporales.”
              </p>
              <div className="mt-4 flex items-center gap-3">
                <div className="w-8 h-8 bg-[#E7EFE9] text-[#1E3E2B] font-bold rounded-full flex items-center justify-center text-xs">I</div>
                <div>
                  <span className="text-xs font-bold text-[#1E3E2B] block">Ignacio, 42 años</span>
                  <span className="text-[10px] text-[#757E78]">Viña del Mar, Estudiante del curso</span>
                </div>
              </div>
            </div>
          </div>

          <div className="text-center mt-12 text-xs text-[#5C645F]">
            Hoy puedes seguir buscando soluciones temporales o empezar a entrenar el músculo más importante de todos: tu confianza.
          </div>

        </div>
      </section>

      {/* SECTION 6: MEDICINA Y COMPASIÓN (Kristin Neff Meditations) */}
      <section id="meditacion" className="py-20 px-6">
        <div className="max-w-7xl mx-auto grid lg:grid-cols-12 gap-12 items-center">
          
          {/* Theory and Pillars */}
          <div className="lg:col-span-5 flex flex-col items-start gap-6">
            <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-[#E7EFE9] text-[#1E3E2B] text-xs font-semibold uppercase tracking-widest">
              <Heart className="w-3.5 h-3.5" />
              Filosofía de Kristin Neff
            </div>

            <h2 className="font-serif text-3xl sm:text-4xl text-[#1E3E2B] font-semibold tracking-tight">
              El Abrazo de la Autocompasión
            </h2>

            <p className="text-[#4E5451] text-sm sm:text-base leading-relaxed">
              La ciencia demuestra que fustigarte o asustarte de tener miedo solo amplifica la respuesta cerebral de pánico. Aprendemos a tratarnos con un bálsamo de amor y contención mediante los tres pilares de Kristin Neff:
            </p>

            <div className="space-y-4 w-full">
              {[
                { title: '1. Auto-amabilidad (Self-Kindness)', desc: 'Brindarte palabras de cariño, paciencia y absoluto perdón en vez de criticarte duramente por tener miedo.' },
                { title: '2. Humanidad Compartida', desc: 'Saber que tu sufrimiento no es una falla de diseño. Miles de personas están sintiendo lo mismo que tú ahora mismo.' },
                { title: '3. Mindfulness (Atención Plena)', desc: 'Tolerar las sensaciones incómodas del cuerpo (palpitaciones, mareo) sin juzgarlas, ni magnificarlas, permitiendo que sigan su curso natural.' }
              ].map((p, idx) => (
                <div key={idx} className="bg-white p-4 rounded-2xl border border-[#E3E1D7] shadow-sm">
                  <span className="text-xs font-bold text-[#1E3E2B] block mb-1">{p.title}</span>
                  <p className="text-xs text-[#5C645F] leading-relaxed">{p.desc}</p>
                </div>
              ))}
            </div>
          </div>

          {/* Interactive Player Frame */}
          <div className="lg:col-span-7 bg-[#1E3E2B] text-[#FAF9F5] rounded-[2.5rem] p-8 sm:p-10 shadow-xl relative overflow-hidden flex flex-col justify-between min-h-[500px]">
            <div className="absolute inset-0 opacity-5 bg-[radial-gradient(#FAF9F5_1px,transparent_1px)] [background-size:20px_20px]" />
            
            <div className="relative z-10">
              <div className="flex items-center justify-between mb-8 border-b border-white/10 pb-4">
                <div>
                  <span className="text-[10px] tracking-widest text-[#B6D5BE] uppercase font-bold block">Oasis Auditivo Integrado</span>
                  <span className="text-sm font-serif font-light text-white/80 italic">Calma clínica instantánea</span>
                </div>
                <Volume2 className="w-5 h-5 text-[#B6D5BE]" />
              </div>

              {/* Active Player Interface */}
              <div className="bg-white/5 rounded-3xl p-6 border border-white/10 mb-8 flex flex-col gap-4">
                <div className="flex items-start justify-between">
                  <div>
                    <span className="text-xs text-[#B6D5BE] font-bold uppercase tracking-wider block">Escucha de Calma</span>
                    <h3 className="font-serif text-lg font-bold mt-1 text-white">
                      {currentTrack ? currentTrack.title : 'Selecciona una Meditación de Práctica'}
                    </h3>
                    <p className="text-xs text-white/60 mt-1 max-w-sm">
                      {currentTrack ? currentTrack.description : 'Audios diseñados clínicamente para regular tu respuesta simpática cerebral en plena tormenta.'}
                    </p>
                  </div>
                  <div className="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center text-[#B6D5BE]">
                    <Clock className="w-4 h-4" />
                  </div>
                </div>

                {/* Simulated Audio Progress Bar */}
                <div className="space-y-1">
                  <div className="w-full bg-white/20 h-1 rounded-full overflow-hidden">
                    <div 
                      className="bg-[#B6D5BE] h-full transition-all duration-300" 
                      style={{ width: `${currentTrack ? trackProgress : 0}%` }}
                    />
                  </div>
                  <div className="flex items-center justify-between text-[10px] text-white/50">
                    <span>{currentTrack ? '03:12' : '00:00'}</span>
                    <span>{currentTrack ? currentTrack.duration : '00:00'}</span>
                  </div>
                </div>

                {/* Control Action */}
                <div className="flex justify-center mt-2">
                  <button
                    onClick={() => setIsPlaying(!isPlaying)}
                    disabled={!currentTrack}
                    className={`w-14 h-14 rounded-full flex items-center justify-center text-[#1E3E2B] transition-all transform hover:scale-105 active:scale-95 ${
                      currentTrack ? 'bg-[#B6D5BE]' : 'bg-white/10 text-white/30 cursor-not-allowed'
                    }`}
                  >
                    {isPlaying ? (
                      <span className="text-xs font-bold text-[#1E3E2B]">PAUSA</span>
                    ) : (
                      <span className="text-xs font-bold text-[#1E3E2B] tracking-wider ml-0.5">REPRODUCIR</span>
                    )}
                  </button>
                </div>
              </div>

              {/* Tracklist selection */}
              <div className="space-y-3">
                <span className="text-xs font-bold text-[#B6D5BE] uppercase tracking-wider block">Audios Disponibles de Descarga Inmediata</span>
                {tracks.map((t) => (
                  <button
                    key={t.id}
                    onClick={() => {
                      setCurrentTrack(t);
                      setIsPlaying(true);
                      setTrackProgress(Math.floor(Math.random() * 40) + 20);
                    }}
                    className={`w-full text-left p-4 rounded-2xl border transition-all duration-300 flex items-center justify-between ${
                      currentTrack?.id === t.id 
                        ? 'bg-white/10 border-white text-white' 
                        : 'border-white/10 bg-white/5 text-white/80 hover:bg-white/10'
                    }`}
                  >
                    <div className="flex items-center gap-4">
                      <div className="w-8 h-8 rounded-full bg-white/10 flex items-center justify-center text-[#B6D5BE]">
                        <Volume2 className="w-4 h-4" />
                      </div>
                      <div>
                        <span className="text-sm font-bold block">{t.title}</span>
                        <span className="text-[10px] text-[#B6D5BE] tracking-wide block">{t.pillar}</span>
                      </div>
                    </div>
                    <span className="text-xs text-white/50 font-mono">{t.duration}</span>
                  </button>
                ))}
              </div>
            </div>

            <p className="text-[11px] text-white/40 mt-8 text-center">
              *Recomendamos respirar sin forzar el ritmo mientras escuchas estas directrices terapéuticas.
            </p>
          </div>

        </div>
      </section>

      {/* SECTION 7: NOSOTROS & ALIANZA MÉDICA (Alfredo & Psychiatrist Profile) */}
      <section id="equipo" className="py-20 px-6 max-w-7xl mx-auto border-t border-[#E3E1D7]">
        <div className="text-center max-w-3xl mx-auto mb-16 flex flex-col items-center gap-4">
          <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-[#E7EFE9] text-[#1E3E2B] text-xs font-semibold uppercase tracking-widest">
            <User className="w-3.5 h-3.5" />
            La Alianza de Cuidado Integral
          </div>
          <h2 className="font-serif text-3xl sm:text-4xl text-[#1E3E2B] font-semibold tracking-tight">
            Quiénes Sostendrán tu Red de Seguridad
          </h2>
          <p className="text-[#4E5451] text-base leading-relaxed">
            El trastorno de pánico a veces requiere un abordaje multifactorial. Mi consulta privada combina psicoterapia cognitiva de primer nivel con una alianza médica estrecha para los pacientes que lo requieran.
          </p>
        </div>

        <div className="grid md:grid-cols-2 gap-12 items-stretch">
          
          {/* Card Alfredo Callejas */}
          <div className="bg-white border border-[#E3E1D7] rounded-[2.5rem] p-8 flex flex-col justify-between shadow-sm relative overflow-hidden">
            <div className="absolute top-0 right-0 w-32 h-32 bg-[#B6D5BE]/10 rounded-full blur-2xl" />
            
            <div>
              <div className="flex items-center gap-5 mb-6">
                <div className="w-20 h-20 rounded-full overflow-hidden bg-gradient-to-tr from-[#1E3E2B] to-[#48634F] flex items-center justify-center text-[#FAF9F5]/40 text-xs shrink-0 border border-[#E3E1D7]">
                  <User className="w-8 h-8 text-[#B6D5BE]" />
                </div>
                <div>
                  <span className="text-[10px] tracking-widest text-[#5C645F] uppercase font-bold block">Terapeuta Principal</span>
                  <h3 className="font-serif text-xl font-bold text-[#1E3E2B]">Alfredo Callejas</h3>
                  <span className="text-xs text-[#4E5451]">Psicólogo Clínico, Magíster en Psicología Clínica</span>
                </div>
              </div>

              <div className="space-y-4 text-xs text-[#4E5451] leading-relaxed">
                <p>
                  Soy titulado de la prestigiosa <strong>Universidad de Chile</strong> con magíster en la misma casa de estudio. Cuento con más de una década de práctica especializada ayudando a pacientes desbordados por el trastorno de pánico.
                </p>
                <p className="italic border-l-2 border-[#1E3E2B] pl-4 text-sm font-serif text-[#1E3E2B]">
                  "Mi misión no es enseñarte a respirar bonito mientras sufres; es entrenar a tu mente a comprender que la tormenta pasará siempre y que eres completamente capaz de pilotearla."
                </p>
                <p>
                  Utilizo un modelo híbrido respaldado por evidencia científica: TCC (Terapia Cognitivo-Conductual) de tercera generación, ACT (Terapia de Aceptación y Compromiso) y entrenamiento de autocompasión.
                </p>
              </div>
            </div>

            <div className="pt-8 mt-8 border-t border-[#E3E1D7] flex flex-col sm:flex-row sm:items-center justify-between gap-4">
              <span className="text-xs font-semibold uppercase tracking-wider text-[#1E3E2B]">Universidad de Chile</span>
              <button 
                onClick={triggerExternalBooking}
                className="bg-[#1E3E2B] text-[#FAF9F5] hover:bg-[#2C523A] px-5 py-2.5 rounded-full text-xs font-semibold transition-all flex items-center gap-2 justify-center"
              >
                <span>Agendar con Alfredo</span>
                <ExternalLink className="w-3.5 h-3.5" />
              </button>
            </div>
          </div>

          {/* Card Collaborating Psychiatrist */}
          <div className="bg-[#E7EFE9]/20 border border-[#E3E1D7] rounded-[2.5rem] p-8 flex flex-col justify-between shadow-sm relative overflow-hidden">
            <div className="absolute top-0 right-0 w-32 h-32 bg-[#1E3E2B]/5 rounded-full blur-2xl" />

            <div>
              <div className="flex items-center gap-5 mb-6">
                <div className="w-20 h-20 rounded-full overflow-hidden bg-gradient-to-tr from-[#5C645F] to-[#8E9791] flex items-center justify-center text-white/40 text-xs shrink-0 border border-[#E3E1D7]">
                  <User className="w-8 h-8 text-[#FAF9F5]" />
                </div>
                <div>
                  <span className="text-[10px] tracking-widest text-[#5C645F] uppercase font-bold block">Alianza Médica</span>
                  <h3 className="font-serif text-xl font-bold text-[#1E3E2B]">Dra. Valeria Aránguiz</h3>
                  <span className="text-xs text-[#4E5451]">Médica Psiquiatra de Enlace Clínico</span>
                </div>
              </div>

              <div className="space-y-4 text-xs text-[#4E5451] leading-relaxed">
                <p>
                  Para aquellos casos de crisis de pánico donde la hipersensibilidad del sistema nervioso requiere un regulador biológico transitorio, mantengo una colaboración estrecha con la Dra. Valeria Aránguiz.
                </p>
                <p className="italic border-l-2 border-[#1E3E2B] pl-4 text-sm font-serif text-[#1E3E2B]">
                  "El tratamiento farmacológico no debe ser un chaleco de fuerza perpetuo; es un andamio químico temporal que permite al paciente progresar con seguridad en su psicoterapia cognitiva."
                </p>
                <p>
                  Su perspectiva promueve una dosificación prudente, racional y enfocada en la autonomía del paciente. Si necesitas evaluación médica para el pánico, gestionamos tu interconsulta de forma directa.
                </p>
              </div>
            </div>

            <div className="pt-8 mt-8 border-t border-[#E3E1D7] flex items-center justify-between">
              <span className="text-xs font-semibold uppercase tracking-wider text-[#1E3E2B]">Interconsulta Rápida</span>
              <span className="text-xs bg-[#1E3E2B]/10 text-[#1E3E2B] px-3 py-1 rounded-full font-semibold">Soporte Médico Integrado</span>
            </div>
          </div>

        </div>
      </section>

      {/* FOOTER (Beautiful and clean) */}
      <footer className="bg-[#FAF9F5] border-t border-[#E3E1D7] py-16 px-6">
        <div className="max-w-7xl mx-auto grid md:grid-cols-4 gap-8">
          
          <div className="md:col-span-2 flex flex-col items-start gap-4">
            <div className="flex items-center gap-3">
              <div className="w-8 h-8 rounded-full bg-[#1E3E2B] flex items-center justify-center text-white">
                <Compass className="w-4 h-4" />
              </div>
              <span className="font-serif text-base tracking-tight font-semibold text-[#1E3E2B]">Alfredo Callejas Clínico</span>
            </div>
            <p className="text-xs text-[#5C645F] max-w-sm leading-relaxed">
              Gabinete privado dedicado a deconstruir la anatomía del trastorno de pánico mediante terapias cognitivas de tercera generación y autocompasión clínica.
            </p>
            <span className="text-[10px] text-[#757E78]">© {new Date().getFullYear()} Alfredo Callejas. Todos los derechos reservados.</span>
          </div>

          <div>
            <span className="text-[10px] tracking-widest text-[#1E3E2B] uppercase font-bold block mb-4">Ubicación y Canales</span>
            <ul className="space-y-2 text-xs text-[#5C645F]">
              <li>Santiago de Chile (Online a todo Iberoamérica)</li>
              <li>Consulta Presencial: Providencia, Metro Tobalaba</li>
              <li>E-mail: contacto@alfredocallejas.cl</li>
              <li>Soporte Académico: Alumnos U. de Chile</li>
            </ul>
          </div>

          <div>
            <span className="text-[10px] tracking-widest text-[#1E3E2B] uppercase font-bold block mb-4">Enlaces Rápidos</span>
            <ul className="space-y-2 text-xs text-[#5C645F]">
              <li><button onClick={() => scrollToSection('guia-gratis')} className="hover:text-[#1E3E2B] text-left">Guía Gratuita (PDF)</button></li>
              <li><button onClick={() => scrollToSection('assessment')} className="hover:text-[#1E3E2B] text-left">Test de Autoevaluación</button></li>
              <li><button onClick={() => scrollToSection('historias-exposicion')} className="hover:text-[#1E3E2B] text-left">Exposición & Miedos</button></li>
              <li><button onClick={() => scrollToSection('curso')} className="hover:text-[#1E3E2B] text-left">Curso: Recupera Tu Confianza</button></li>
            </ul>
          </div>

        </div>
      </footer>

      {/* TRANSITIONAL REDIRECT MODAL (Vanguard UX 2026 for External Booking) */}
      {isRedirectModalOpen && (
        <div className="fixed inset-0 bg-[#1E3E2B]/60 backdrop-blur-sm z-50 flex items-center justify-center p-6 animate-fadeIn">
          <div className="bg-[#FAF9F5] rounded-3xl border border-[#E3E1D7] max-w-md w-full p-6 shadow-2xl relative">
            <button 
              onClick={() => setIsRedirectModalOpen(false)}
              className="absolute top-4 right-4 p-1 rounded-full hover:bg-[#E7EFE9] text-[#1E3E2B] transition-all"
            >
              <X className="w-5 h-5" />
            </button>
            
            <div className="text-center space-y-4 pt-4">
              <div className="w-12 h-12 bg-[#E7EFE9] text-[#1E3E2B] rounded-full flex items-center justify-center mx-auto mb-2">
                <Compass className="w-6 h-6" />
              </div>
              <h3 className="font-serif text-xl font-bold text-[#1E3E2B]">Agenda Externa de Alfredo Callejas</h3>
              <p className="text-xs text-[#5C645F] leading-relaxed">
                Estás a punto de ser redirigido a mi portal de agendamiento clínico externo protegido (Doctoralia/Calendly) para escoger libremente el horario de tu sesión online personalizada de 50 minutos.
              </p>
              
              <div className="p-3.5 bg-[#E7EFE9]/40 border border-[#E3E1D7] rounded-xl text-left text-[11px] text-[#4E5451] leading-relaxed">
                <strong>¿Qué necesitas para agendar?</strong> Solo tu correo electrónico y un número de contacto para enviarte las claves del portal seguro de telemedicina de la Universidad de Chile.
              </div>

              <div className="flex gap-3 pt-4">
                <button
                  onClick={() => setIsRedirectModalOpen(false)}
                  className="w-1/2 border border-[#E3E1D7] hover:bg-[#E7EFE9] py-3 rounded-xl text-xs uppercase tracking-wider font-semibold transition-all"
                >
                  Volver atrás
                </button>
                <button
                  onClick={handleConfirmRedirect}
                  className="w-1/2 bg-[#1E3E2B] hover:bg-[#2C523A] text-white py-3 rounded-xl text-xs uppercase tracking-wider font-semibold transition-all flex items-center justify-center gap-2"
                >
                  <span>Ir a la Agenda</span>
                  <ExternalLink className="w-3.5 h-3.5" />
                </button>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* LEAD MAGNET DOWNLOAD MODAL */}
      {isDownloadModalOpen && (
        <div className="fixed inset-0 bg-[#1E3E2B]/60 backdrop-blur-sm z-50 flex items-center justify-center p-6 animate-fadeIn">
          <div className="bg-[#FAF9F5] rounded-3xl border border-[#E3E1D7] max-w-md w-full p-6 shadow-2xl relative">
            <button 
              onClick={() => setIsDownloadModalOpen(false)}
              className="absolute top-4 right-4 p-1 rounded-full hover:bg-[#E7EFE9] text-[#1E3E2B] transition-all"
            >
              <X className="w-5 h-5" />
            </button>
            
            <div className="text-center space-y-4 pt-4">
              <div className="w-12 h-12 bg-[#E7EFE9] text-[#1E3E2B] rounded-full flex items-center justify-center mx-auto mb-2">
                <Download className="w-6 h-6" />
              </div>
              <h3 className="font-serif text-xl font-bold text-[#1E3E2B]">Descarga Directa en PDF</h3>
              <p className="text-xs text-[#5C645F] leading-relaxed">
                Ingresa tu correo para recibir de manera inmediata y gratuita mi guía premium de intervención: <strong>“24 técnicas para controlar ataques de pánico”</strong>.
              </p>
              
              {!downloadSuccess ? (
                <form onSubmit={handleDownloadSubmit} className="space-y-3 pt-2 text-left">
                  <label className="block text-[10px] font-bold uppercase tracking-wider text-[#5C645F]">Tu dirección de correo</label>
                  <input 
                    type="email" 
                    required
                    value={downloadEmail}
                    onChange={(e) => setDownloadEmail(e.target.value)}
                    placeholder="ejemplo@correo.com" 
                    className="w-full bg-white border border-[#E3E1D7] rounded-xl px-4 py-3 text-xs focus:outline-none focus:ring-1 focus:ring-[#1E3E2B]"
                  />
                  <button
                    type="submit"
                    className="w-full bg-[#1E3E2B] hover:bg-[#2C523A] text-[#FAF9F5] py-3 rounded-xl text-xs uppercase tracking-wider font-bold transition-all shadow"
                  >
                    Enviar Guía a mi Correo
                  </button>
                </form>
              ) : (
                <div className="bg-[#E7EFE9]/60 p-4 rounded-xl border border-[#B6D5BE] text-center space-y-2 animate-fadeIn">
                  <CheckCircle className="w-8 h-8 text-[#1E3E2B] mx-auto" />
                  <span className="text-xs font-bold text-[#1E3E2B] block">¡Guía Enviada Correctamente!</span>
                  <p className="text-[10px] text-[#5C645F] leading-tight">
                    Revisa tu bandeja de entrada en los próximos 2 minutos. No olvides revisar la carpeta de promociones o spam.
                  </p>
                </div>
              )}
            </div>
          </div>
        </div>
      )}

    </div>
  );
}/* End custom CSS */