import React, { useState } from 'react';
import { 
  Heart, Cloud, Wind, Droplets, ThermometerSun, 
  Smile, Shield, ChevronRight, Activity, Moon, 
  Cat, Dog, Zap, Anchor, Users, Lightbulb
} from 'lucide-react';

const ManualCalmaCompleto = () => {
  const [activeTab, setActiveTab] = useState('cover'); // cover, team, tools, exercises, mindset
  const [breathing, setBreathing] = useState(false);

  // Datos del Equipo de Soporte (Familia + Mascotas)
  const supportTeam = [
    {
      name: "Marty (La Hermana Experta)",
      role: "Guía y Maestra",
      action: "Ella tiene lo mismo y aprendió a ganarle.",
      desc: "Marty es la prueba viviente de que puedes hacer una vida normal y feliz. Ella conoce los trucos secretos y te enseñará que el mareo siempre pasa.",
      icon: <Smile className="w-6 h-6 text-pink-500" />,
      bg: "bg-pink-50 border-pink-200"
    },
    {
      name: "Lila (La Gatita Zen)",
      role: "Maestra de la Calma",
      action: "Ronroneo curativo.",
      desc: "Cuando Lila se acuesta en tu pecho y ronronea, su vibración te ayuda a bajar el ritmo. Ella duerme 18 horas al día; es la experta mundial en relajación.",
      icon: <Cat className="w-6 h-6 text-indigo-500" />,
      bg: "bg-indigo-50 border-indigo-200"
    },
    {
      name: "Morita (La Shih Tzu)",
      role: "Enfermera Peluda",
      action: "Detector de ánimos.",
      desc: "Con su nariz húmeda y sus ojos grandes, Morita sabe cuando necesitas un beso en la mano o simplemente que se siente en tus pies para darte calor.",
      icon: <Dog className="w-6 h-6 text-amber-600" />,
      bg: "bg-amber-50 border-amber-200"
    },
    {
      name: "Mamá",
      role: "Capitana de Cuidados",
      action: "La magia de la sal y el agua.",
      desc: "Sabe exactamente cuánta agua necesitas y tiene el abrazo que reinicia el sistema. Con ella, nada malo puede pasar.",
      icon: <Droplets className="w-6 h-6 text-sky-500" />,
      bg: "bg-sky-50 border-sky-200"
    },
    {
      name: "Papá",
      role: "Escudo Protector",
      action: "Fuerza tranquila.",
      desc: "Cuando te sientes débil, papá es la columna fuerte donde te puedes apoyar. Él vigila que todo el entorno esté seguro para ti.",
      icon: <Shield className="w-6 h-6 text-blue-600" />,
      bg: "bg-blue-50 border-blue-200"
    }
  ];

  const maneuvers = [
    {
      title: "Cruzar las piernas",
      desc: "Si estás de pie y te sientes raro, cruza las piernas fuerte y aprieta los músculos. ¡Ayuda a subir la energía!",
      icon: <Activity className="text-emerald-500" />
    },
    {
      title: "Puños de Fuerza",
      desc: "Cierra tus manos fuerte, fuerte, fuerte por unos segundos y luego relaja. Repite como si estuvieras exprimiendo limones.",
      icon: <Zap className="text-yellow-500" />
    },
    {
      title: "Modo Horizontal",
      desc: "No luches. Si el cuerpo pide suelo o cama, dáselo. Poner los pies en alto es el truco más viejo y efectivo.",
      icon: <Anchor className="text-blue-500" />
    }
  ];

  // Renderizado de la Portada
  if (activeTab === 'cover') {
    return (
      <div className="min-h-screen bg-gradient-to-b from-sky-100 via-blue-50 to-white flex items-center justify-center p-4 font-sans relative overflow-hidden">
        <div className="absolute top-10 left-10 text-white/60 animate-pulse"><Cloud size={60} /></div>
        <div className="absolute bottom-20 right-10 text-white/60 animate-pulse delay-700"><Cloud size={80} /></div>
        
        <div 
          onClick={() => setActiveTab('team')}
          className="bg-white/80 backdrop-blur-md p-8 md:p-12 rounded-[3rem] shadow-xl border-4 border-sky-200 max-w-md w-full text-center cursor-pointer hover:scale-[1.02] transition-transform duration-500"
        >
          <div className="bg-sky-100 w-24 h-24 rounded-full flex items-center justify-center mx-auto mb-6 shadow-inner relative">
            <Wind className="w-12 h-12 text-sky-500 animate-spin-slow" style={{ animationDuration: '4s' }} />
            <Heart className="w-6 h-6 text-pink-400 absolute bottom-0 right-0 animate-bounce" />
          </div>
          <h1 className="text-3xl font-bold text-sky-800 mb-2">Manual de Calma</h1>
          <h2 className="text-xl text-sky-600 mb-4 font-medium">Para días nublados</h2>
          <p className="text-slate-500 mb-8 leading-relaxed text-sm">
            Una guía hecha con amor por tu familia (humanos y peludos) para recordarte que eres valiente y que esto siempre pasa.
          </p>
          <button className="bg-sky-400 text-white px-8 py-3 rounded-full font-bold shadow-lg shadow-sky-200 hover:bg-sky-500 transition-colors flex items-center justify-center gap-2 w-full">
            Comenzar <ChevronRight size={20} />
          </button>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-slate-50 font-sans flex flex-col md:flex-row max-w-6xl mx-auto md:p-6 h-screen md:h-auto overflow-hidden">
      
      {/* Sidebar de Navegación */}
      <div className="md:w-1/4 bg-white p-4 md:p-6 md:rounded-l-[2.5rem] rounded-b-2xl shadow-lg z-10 border-r border-slate-100 flex flex-col overflow-y-auto">
        <div className="mb-6 flex items-center gap-3">
          <div onClick={() => setActiveTab('cover')} className="cursor-pointer bg-sky-100 p-2 rounded-full hover:bg-sky-200 transition">
            <Cloud className="text-sky-600" size={24} />
          </div>
          <div>
            <h3 className="font-bold text-slate-700 leading-tight">Zona Segura</h3>
            <p className="text-xs text-slate-400">Todo va a estar bien</p>
          </div>
        </div>
        
        <nav className="space-y-2 flex-1">
          <NavButton active={activeTab === 'team'} onClick={() => setActiveTab('team')} icon={<Users size={18} />} label="El Equipo" color="sky" />
          <NavButton active={activeTab === 'mindset'} onClick={() => setActiveTab('mindset')} icon={<Lightbulb size={18} />} label="Sin Miedo" color="amber" />
          <NavButton active={activeTab === 'exercises'} onClick={() => setActiveTab('exercises')} icon={<Activity size={18} />} label="Ejercicios" color="emerald" />
          <NavButton active={activeTab === 'tools'} onClick={() => setActiveTab('tools')} icon={<Heart size={18} />} label="Kit de Ayuda" color="pink" />
        </nav>

        <div className="mt-6 bg-indigo-50 p-4 rounded-2xl border border-indigo-100">
           <p className="text-indigo-700 text-xs font-bold mb-1">Dato curioso:</p>
           <p className="text-indigo-600/80 text-xs italic">
             "Los astronautas tienen algo parecido cuando vuelven del espacio. ¡Tienes un cuerpo espacial!"
           </p>
        </div>
      </div>

      {/* Área de Contenido Principal */}
      <div className="md:w-3/4 bg-white/60 md:rounded-r-[2.5rem] p-4 md:p-8 overflow-y-auto custom-scrollbar relative">
        
        {/* PESTAÑA: EQUIPO */}
        {activeTab === 'team' && (
          <div className="animate-in slide-in-from-right duration-500">
            <Header title="Tu Red de Contención" subtitle="Nunca estás sola, mira quiénes te cuidan:" icon="👥" color="sky" />
            <div className="grid md:grid-cols-2 gap-4">
              {supportTeam.map((member, idx) => (
                <div key={idx} className={`p-4 rounded-2xl border flex items-start gap-3 hover:shadow-md transition-all ${member.bg} ${idx === 0 ? 'md:col-span-2 ring-2 ring-pink-200' : ''}`}>
                  <div className="bg-white p-2.5 rounded-full shadow-sm mt-1 shrink-0">
                    {member.icon}
                  </div>
                  <div>
                    <div className="flex flex-wrap items-center gap-2 mb-1">
                      <h3 className="font-bold text-slate-700">{member.name}</h3>
                    </div>
                    <p className="text-slate-700 font-medium text-xs mb-1 bg-white/50 inline-block px-2 rounded-md">{member.action}</p>
                    <p className="text-slate-500 text-sm leading-snug mt-1">{member.desc}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}

        {/* PESTAÑA: SIN MIEDO (MINDSET) */}
        {activeTab === 'mindset' && (
          <div className="animate-in fade-in duration-500">
             <Header title="Valentía y Calma" subtitle="Lo que necesitas saber para no asustarte" icon="✨" color="amber" />
             
             <div className="space-y-6">
                <div className="bg-amber-50 p-6 rounded-3xl border border-amber-100 text-center relative overflow-hidden">
                  <div className="absolute top-0 right-0 p-4 opacity-10"><Smile size={100} /></div>
                  <h3 className="text-xl font-bold text-amber-800 mb-2">No es peligroso, solo es molesto</h3>
                  <p className="text-amber-700 leading-relaxed">
                    A veces el corazón late rápido o te sientes un poco "en las nubes". <br/>
                    <strong>¡No te asustes!</strong> Es solo tu cuerpo ajustando la presión, como una manguera que se dobla un poquito.
                  </p>
                </div>

                <div className="bg-white border-2 border-slate-100 p-6 rounded-3xl flex flex-col md:flex-row items-center gap-6 shadow-sm">
                  <div className="bg-pink-100 p-4 rounded-full shrink-0">
                     <Users size={32} className="text-pink-500" />
                  </div>
                  <div>
                    <h3 className="text-lg font-bold text-slate-700 mb-1">El Club de los Corazones Rápidos</h3>
                    <p className="text-slate-500 text-sm">
                      Hay muchísima gente (niñas, jóvenes, deportistas) que tienen esto. Es muy común. 
                      Tu hermana <strong>Marty</strong> es la presidenta de este club en casa. Ella aprendió a escuchar su cuerpo, a tomar agua y seguir jugando. ¡Tú también puedes!
                    </p>
                  </div>
                </div>

                <div className="grid grid-cols-2 gap-4">
                  <div className="bg-green-50 p-4 rounded-2xl text-center">
                    <span className="text-2xl">✅</span>
                    <p className="font-bold text-green-700 text-sm mt-2">Sí hacer</p>
                    <p className="text-green-600 text-xs">Decirlo apenas te sientas mal.</p>
                  </div>
                  <div className="bg-red-50 p-4 rounded-2xl text-center">
                    <span className="text-2xl">🚫</span>
                    <p className="font-bold text-red-700 text-sm mt-2">No hacer</p>
                    <p className="text-red-600 text-xs">Guardarse el secreto o tener miedo.</p>
                  </div>
                </div>
             </div>
          </div>
        )}

        {/* PESTAÑA: EJERCICIOS */}
        {activeTab === 'exercises' && (
          <div className="animate-in slide-in-from-bottom duration-500">
            <Header title="Maniobras de Poder" subtitle="Trucos físicos para sentirte mejor rápido" icon="💪" color="emerald" />
            
            <div className="grid gap-4">
              {maneuvers.map((m, i) => (
                 <div key={i} className="bg-white border border-slate-200 p-5 rounded-2xl flex items-center gap-4 hover:border-emerald-300 transition-colors shadow-sm">
                    <div className="bg-slate-50 p-3 rounded-xl">
                      {m.icon}
                    </div>
                    <div>
                      <h4 className="font-bold text-slate-700">{m.title}</h4>
                      <p className="text-slate-500 text-sm">{m.desc}</p>
                    </div>
                 </div>
              ))}
            </div>
            
            <div className="mt-6 bg-emerald-50 p-5 rounded-2xl border border-emerald-100 flex gap-4 items-center">
               <Activity className="text-emerald-500 shrink-0" />
               <p className="text-emerald-800 text-sm font-medium">
                 Recuerda: Si te levantas de la cama, hazlo como un ninja: <strong>lento y silencioso</strong>. Sentarse primero, esperar, y luego pararse.
               </p>
            </div>
          </div>
        )}

        {/* PESTAÑA: HERRAMIENTAS (Respiración) */}
        {activeTab === 'tools' && (
          <div className="animate-in fade-in duration-500 h-full flex flex-col">
            <Header title="Kit de Emergencia" subtitle="Ayudas inmediatas" icon="🚑" color="pink" />

            <div className="grid grid-cols-2 gap-4 mb-6">
               <TipCard icon={<Droplets />} title="Agua + Sal" subtitle="La pócima mágica de mamá" color="blue" />
               <TipCard icon={<Moon />} title="Pausa" subtitle="El mundo puede esperar" color="indigo" />
            </div>

            {/* Ejercicio de Respiración */}
            <div className="flex-1 bg-gradient-to-br from-slate-50 to-white rounded-3xl border-2 border-dashed border-slate-200 flex flex-col items-center justify-center p-6 relative overflow-hidden min-h-[250px]">
               <div className="z-10 text-center">
                 <h3 className="font-bold text-slate-600 mb-6">Botón de Calma</h3>
                 
                 <div 
                   onClick={() => setBreathing(!breathing)}
                   className="relative w-32 h-32 mx-auto flex items-center justify-center cursor-pointer group"
                 >
                   <div className={`absolute inset-0 bg-pink-200/40 rounded-full transition-all duration-[4000ms] ease-in-out ${breathing ? 'scale-150 opacity-50' : 'scale-100 opacity-20'}`}></div>
                   <div className={`absolute inset-0 bg-pink-300/30 rounded-full transition-all duration-[4000ms] ease-in-out delay-100 ${breathing ? 'scale-125 opacity-60' : 'scale-90 opacity-30'}`}></div>
                   <div className="relative bg-white p-5 rounded-full shadow-lg border-4 border-pink-100 z-10 group-hover:scale-105 transition-transform">
                     <Wind className={`w-10 h-10 text-pink-400 transition-transform duration-[4000ms] ${breathing ? 'scale-110' : 'scale-90'}`} />
                   </div>
                 </div>

                 <p className="mt-6 text-pink-500 font-medium animate-pulse text-sm">
                   {breathing ? "Inhala suave (huele la flor)... Exhala lento (sopla la vela)..." : "Toca para respirar juntos"}
                 </p>
               </div>
            </div>
          </div>
        )}

      </div>
    </div>
  );
};

// Componentes auxiliares para limpiar el código
const NavButton = ({ active, onClick, icon, label, color }) => {
  const activeClasses = {
    sky: 'bg-sky-100 text-sky-700',
    amber: 'bg-amber-100 text-amber-700',
    emerald: 'bg-emerald-100 text-emerald-700',
    pink: 'bg-pink-100 text-pink-700'
  };
  
  return (
    <button 
      onClick={onClick}
      className={`w-full text-left p-3 md:p-4 rounded-2xl flex items-center gap-3 transition-all font-medium text-sm md:text-base ${active ? activeClasses[color] : 'hover:bg-slate-50 text-slate-500'}`}
    >
      {icon} {label}
    </button>
  );
};

const Header = ({ title, subtitle, icon, color }) => {
  const colors = {
    sky: 'bg-sky-100 text-sky-600',
    amber: 'bg-amber-100 text-amber-600',
    emerald: 'bg-emerald-100 text-emerald-600',
    pink: 'bg-pink-100 text-pink-600'
  };

  return (
    <div className="mb-6">
      <h2 className="text-2xl font-bold text-slate-700 flex items-center gap-2">
        <span className={`p-2 rounded-xl text-lg ${colors[color]}`}>{icon}</span> 
        {title}
      </h2>
      <p className="text-slate-400 text-sm ml-1">{subtitle}</p>
    </div>
  );
}

const TipCard = ({ icon, title, subtitle, color }) => {
  const colors = {
    blue: 'bg-blue-50 border-blue-100 text-blue-700',
    indigo: 'bg-indigo-50 border-indigo-100 text-indigo-700'
  };
  
  return (
    <div className={`${colors[color]} p-4 rounded-2xl border text-center`}>
      <div className="mb-2 flex justify-center opacity-70">{icon}</div>
      <span className="block text-sm font-bold">{title}</span>
      <span className="text-xs opacity-70">{subtitle}</span>
    </div>
  );
}

export default ManualCalmaCompleto;