import React, { useState, useEffect } from 'react';
import { 
  Moon, 
  Sun, 
  Battery, 
  BookOpen, 
  Users, 
  Zap, 
  CheckCircle, 
  MessageSquare, 
  Leaf,
  ChevronDown,
  Star,
  Info
} from 'lucide-react';

const App = () => {
  const [batteryLevel, setBatteryLevel] = useState(20);
  const [isCharging, setIsCharging] = useState(false);

  // Simulação da bateria para a interatividade lúdica
  useEffect(() => {
    let interval;
    if (isCharging && batteryLevel < 100) {
      interval = setInterval(() => {
        setBatteryLevel(prev => Math.min(prev + 5, 100));
      }, 200);
    } else if (!isCharging && batteryLevel > 10) {
      interval = setInterval(() => {
        setBatteryLevel(prev => Math.max(prev - 1, 10));
      }, 2000);
    }
    return () => clearInterval(interval);
  }, [isCharging, batteryLevel]);

  const modules = [
    {
      title: "Módulo I: A Metáfora da Bateria",
      icon: <Zap className="w-6 h-6" />,
      content: "Comparação do corpo humano a um dispositivo que precisa de ser 'ligado' ao descanso. A jornada de Carlinhos para entender que dormir é ganhar vida."
    },
    {
      title: "Módulo II: Pilares do Desenvolvimento",
      icon: <CheckCircle className="w-6 h-6" />,
      content: "Exploração do Cérebro Atento e do Corpo Forte. Como a exaustão da Turma do Soninho os impediu de aprender na escola."
    },
    {
      title: "Módulo III: Consciência e Ambiente",
      icon: <Leaf className="w-6 h-6" />,
      content: "A conexão entre o descanso pessoal e o cuidado com o planeta. Ser um 'amigo do ambiente' começa por cuidar da própria energia."
    },
    {
      title: "Módulo IV: Guia Prático para Famílias",
      icon: <BookOpen className="w-6 h-6" />,
      content: "O ritual do travesseirinho da Nany: dicas práticas de higiene do sono e horários recomendados para cada idade."
    }
  ];

  return (
    <div className="min-h-screen bg-white text-[#002147] font-sans">
      {/* Hero Section - Azul Marinho Profundo */}
      <header className="relative overflow-hidden bg-[#002147] pt-24 pb-40 px-6 text-white">
        {/* Estrelas decorativas subtis */}
        <div className="absolute inset-0 opacity-10 pointer-events-none">
          <Star className="absolute top-10 left-[15%]" size={12} />
          <Star className="absolute top-32 left-[40%]" size={8} />
          <Star className="absolute top-20 right-[20%]" size={14} />
          <Star className="absolute bottom-20 left-[10%]" size={10} />
        </div>
        
        <div className="max-w-4xl mx-auto text-center relative z-10">
          <div className="inline-flex items-center gap-2 px-5 py-1.5 mb-8 text-xs font-bold tracking-[0.2em] uppercase bg-white/10 border border-white/20 rounded-full">
             Proposta de Palestra
          </div>
          <h1 className="text-5xl md:text-7xl font-serif font-bold mb-6 tracking-tight">
            Turma do <span className="text-blue-200 italic">Soninho</span>
          </h1>
          <p className="text-xl md:text-2xl text-blue-100/80 mb-10 max-w-2xl mx-auto font-light leading-relaxed">
            Explorando a relevância vital do descanso para o desenvolvimento infantil e a consciência ambiental.
          </p>
          <div className="flex flex-col items-center gap-3">
            <p className="text-lg font-medium tracking-widest uppercase text-white/90">Autora: Sónia Regina Fares</p>
            <div className="h-1 w-24 bg-white/30 rounded-full"></div>
          </div>
          
          <div className="mt-16 animate-bounce flex justify-center opacity-50">
            <ChevronDown size={32} />
          </div>
        </div>
      </header>

      {/* Intro Section - Branco Limpo */}
      <section className="py-24 px-6 max-w-6xl mx-auto">
        <div className="grid md:grid-cols-2 gap-20 items-center">
          <div className="space-y-8">
            <div className="space-y-4">
              <h2 className="text-4xl font-serif font-bold text-[#002147]">
                O Sono como <br/>Investimento Vital
              </h2>
              <p className="text-gray-600 text-lg leading-relaxed">
                As fontes abordam que dormir não significa perder tempo, mas sim garantir a recuperação física e a disposição necessária para o aprendizado e a vida.
              </p>
            </div>
            
            <div className="grid gap-6">
              <div className="flex gap-5 items-start p-6 rounded-2xl bg-slate-50 border border-slate-100 shadow-sm transition-hover hover:shadow-md">
                <div className="p-3 bg-[#002147] text-white rounded-xl">
                  <CheckCircle size={24} />
                </div>
                <div>
                  <h4 className="font-bold text-lg">Capacidade Cognitiva</h4>
                  <p className="text-sm text-gray-500">O descanso é essencial para a concentração e o desempenho escolar.</p>
                </div>
              </div>
              <div className="flex gap-5 items-start p-6 rounded-2xl bg-slate-50 border border-slate-100 shadow-sm transition-hover hover:shadow-md">
                <div className="p-3 bg-[#002147] text-white rounded-xl">
                  <Leaf size={24} />
                </div>
                <div>
                  <h4 className="font-bold text-lg">Consciência Ambiental</h4>
                  <p className="text-sm text-gray-500">Conectar o bem-estar pessoal ao cuidado com o nosso planeta.</p>
                </div>
              </div>
            </div>
          </div>

          {/* Simulador de Bateria - Estética Azul Marinho/Branco */}
          <div className="bg-[#002147] p-10 rounded-[2.5rem] shadow-2xl text-white relative">
            <div className="absolute -top-6 -right-6 bg-white p-4 rounded-full shadow-lg border-4 border-[#002147]">
              <Info className="text-[#002147]" size={24} />
            </div>
            <h3 className="text-2xl font-bold mb-8 text-center uppercase tracking-widest">Recarga Vital</h3>
            
            <div className="flex flex-col items-center gap-10">
              <div className="relative w-28 h-52 border-[4px] border-white/30 rounded-[2rem] p-1.5 flex flex-col justify-end overflow-hidden">
                <div className="absolute -top-3 left-1/2 -translate-x-1/2 w-8 h-2.5 bg-white/30 rounded-t-lg"></div>
                
                <div 
                  className={`w-full rounded-2xl transition-all duration-500 ease-out flex items-center justify-center ${
                    batteryLevel > 70 ? 'bg-blue-400' : batteryLevel > 30 ? 'bg-blue-300' : 'bg-red-400 animate-pulse'
                  }`}
                  style={{ height: `${batteryLevel}%` }}
                >
                  {isCharging && <Zap size={24} className="text-white animate-pulse" />}
                </div>
                
                <div className="absolute inset-0 flex items-center justify-center font-bold text-3xl z-10 drop-shadow-sm">
                  {batteryLevel}%
                </div>
              </div>

              <div className="text-center w-full space-y-5">
                <button 
                  onMouseDown={() => setIsCharging(true)}
                  onMouseUp={() => setIsCharging(false)}
                  onMouseLeave={() => setIsCharging(false)}
                  onTouchStart={() => setIsCharging(true)}
                  onTouchEnd={() => setIsCharging(false)}
                  className={`w-full py-5 rounded-xl font-bold text-lg transition-all transform active:scale-95 shadow-lg ${
                    isCharging 
                      ? 'bg-blue-400 text-white' 
                      : 'bg-white text-[#002147] hover:bg-blue-50'
                  }`}
                >
                  {isCharging ? 'A Restaurar Energia...' : 'Conectar ao Sono'}
                </button>
                <p className="text-xs text-blue-200/60 uppercase tracking-widest font-semibold">Simule a recuperação do Carlinhos</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Roadmap Section - Alternância de cores Marinho/Branco */}
      <section className="bg-slate-50 py-24 px-6">
        <div className="max-w-6xl mx-auto">
          <div className="text-center mb-16">
            <h2 className="text-4xl font-serif font-bold text-[#002147] mb-4 text-center">Estrutura da Palestra</h2>
            <div className="h-1 w-20 bg-[#002147] mx-auto"></div>
          </div>
          
          <div className="grid sm:grid-cols-2 gap-8">
            {modules.map((mod, i) => (
              <div key={i} className="group flex flex-col p-10 bg-white border border-slate-200 rounded-3xl transition-all hover:bg-[#002147] hover:text-white shadow-sm hover:shadow-xl">
                <div className="w-14 h-14 rounded-2xl bg-slate-100 text-[#002147] flex items-center justify-center mb-6 transition-colors group-hover:bg-white/10 group-hover:text-white">
                  {mod.icon}
                </div>
                <h3 className="text-2xl font-bold mb-4">{mod.title}</h3>
                <p className="text-gray-500 leading-relaxed group-hover:text-blue-100 transition-colors">{mod.content}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Methodology & Resources */}
      <section className="py-24 px-6 max-w-6xl mx-auto">
        <div className="grid md:grid-cols-2 gap-16 items-start">
          <div className="space-y-10">
            <h2 className="text-4xl font-serif font-bold text-[#002147]">Metodologia</h2>
            <div className="space-y-6">
              {[
                { t: "Narrativa Lúdica", d: "Uso da história da Turma do Soninho como âncora emocional." },
                { t: "Analogia Tecnológica", d: "A bateria como carregador para facilitar a compreensão infantil." },
                { t: "Contrato Simbólico", d: "Um compromisso assinado entre pais e filhos para o descanso." }
              ].map((item, i) => (
                <div key={i} className="flex gap-6 border-b border-slate-100 pb-6 last:border-0">
                  <span className="text-4xl font-serif italic text-slate-200">0{i+1}</span>
                  <div>
                    <h4 className="font-bold text-xl text-[#002147]">{item.t}</h4>
                    <p className="text-gray-500 leading-tight">{item.d}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>

          <div className="bg-[#002147] text-white p-12 rounded-[2rem] flex flex-col items-center text-center space-y-8">
             <div className="p-4 bg-white/10 rounded-full animate-pulse">
                <Users size={48} />
             </div>
             <h3 className="text-3xl font-serif font-bold italic">Público-Alvo</h3>
             <ul className="space-y-2 text-blue-100/80 text-lg">
                <li>Educação Infantil</li>
                <li>Ensino Fundamental I</li>
                <li>Pais e Educadores</li>
             </ul>
             <button className="w-full bg-white text-[#002147] py-5 rounded-xl font-bold text-xl hover:bg-blue-50 transition-colors">
               Solicitar Material PDF
             </button>
          </div>
        </div>
      </section>

      {/* Footer Profissional */}
      <footer className="bg-white border-t border-slate-100 py-32 px-6 text-center">
        <div className="max-w-4xl mx-auto">
          <div className="mb-12">
            <Moon className="mx-auto text-[#002147] opacity-20 mb-6" size={40} />
            <blockquote className="text-4xl md:text-5xl font-serif font-bold italic text-[#002147] leading-tight">
              "Dormir bem é o segredo para <br/>acordar gigante."
            </blockquote>
          </div>
          
          <div className="mb-16 space-y-1">
            <p className="text-[#002147] text-xl font-bold uppercase tracking-[0.3em]">Turma do Soninho</p>
            <p className="text-slate-400 text-sm font-medium uppercase tracking-widest">Sónia Regina Fares</p>
          </div>

          <div className="flex justify-center gap-6">
            <div className="h-px w-12 bg-slate-200 self-center"></div>
            <Star size={16} className="text-slate-300" />
            <div className="h-px w-12 bg-slate-200 self-center"></div>
          </div>
        </div>
      </footer>
    </div>
  );
};

export default App;