import React, { useState, useEffect } from 'react';
import { 
  BarChart3, 
  Users, 
  Settings, 
  Award, 
  CheckCircle2, 
  TrendingUp, 
  Layout, 
  Cpu, 
  MessageSquare, 
  Briefcase, 
  Mail, 
  Phone, 
  Linkedin,
  Brain,
  Layers,
  Search,
  ArrowRight,
  Menu,
  X
} from 'lucide-react';

// --- Dados Completos ---

const profileData = {
  name: "Edely Viana",
  title: "Consultor Sênior | Neuropsicanalista | Especialista em Gestão",
  contact: {
    phone: "21 97915-9621",
    email: "edelyviana@gmail.com",
    location: "Rio de Janeiro, Brasil"
  },
  bio: "Transformando organizações e pessoas através da excelência em processos e desenvolvimento humano. Com propósito de gerar valor e crescimento sustentável.",
  colors: {
    primary: "from-slate-900 to-slate-800",
    accent: "text-emerald-400",
    accentBg: "bg-emerald-500"
  }
};

const trainingData = [
  {
    category: "Qualidade e Melhoria Contínua",
    icon: <Award className="w-6 h-6" />,
    description: "Formação técnica para excelência operacional.",
    items: [
      { name: "5S", desc: "Organização e disciplina" },
      { name: "VSM", desc: "Mapeamento de fluxo de valor" },
      { name: "7 Ferramentas da Qualidade", desc: "Análise e solução de problemas" },
      { name: "Lean Manufacturing", desc: "Redução de desperdícios" },
      { name: "Six Sigma", desc: "Redução de variabilidade" },
      { name: "Kaizen", desc: "Melhoria contínua" },
      { name: "ISO 9001:2015", desc: "Gestão da Qualidade" },
      { name: "ISO 14001", desc: "Gestão Ambiental" },
      { name: "ISO 31000", desc: "Gestão de Riscos" },
      { name: "NR 1 & NR 17", desc: "Normas Regulamentadoras e Ergonomia" },
    ],
    extras: ["Material Didático Incluso", "Formulários Práticos", "Certificado Digital"]
  },
  {
    category: "Planejamento e Gestão",
    icon: <BarChart3 className="w-6 h-6" />,
    description: "Estratégias para liderança e execução eficaz.",
    items: [
      { name: "Planejamento Estratégico", desc: "Visão de longo prazo" },
      { name: "Gestão de Projetos Waterfall", desc: "Metodologias clássicas" },
      { name: "Agilidade", desc: "Scrum, Kanban, Management 3.0" },
      { name: "OKRs e KPIs", desc: "Gestão por indicadores" },
      { name: "Design Thinking & Sprint", desc: "Inovação e Solução de Problemas" },
      { name: "BPMN", desc: "Gestão de Processos de Negócio" },
      { name: "Gestão de Mudanças", desc: "Adaptação organizacional" },
      { name: "Gestão de Equipes", desc: "Liderança e Conflitos" },
      { name: "Gestão do Tempo", desc: "Produtividade pessoal" },
    ]
  },
  {
    category: "Tecnologia",
    icon: <Cpu className="w-6 h-6" />,
    description: "Ferramentas digitais para alta performance.",
    items: [
      { name: "Ferramentas Google", desc: "Workspace e Colaboração" },
      { name: "Microsoft 365", desc: "Office e Produtividade" },
      { name: "MS Project (PPM)", desc: "Gerenciamento de Cronogramas" },
      { name: "Jira", desc: "Gestão Ágil de Projetos" },
      { name: "IA Aplicada", desc: "Inteligência Artificial nos Negócios" },
      { name: "Sistemas Operacionais", desc: "Windows e Linux" },
    ]
  },
  {
    category: "Comunicação & CX",
    icon: <MessageSquare className="w-6 h-6" />,
    description: "Conexão humana e experiência do cliente.",
    items: [
      { name: "Oratória", desc: "Falar em público com confiança" },
      { name: "Técnicas de Apresentação", desc: "Impacto visual e narrativo" },
      { name: "Inteligências Múltiplas", desc: "Desenvolvimento Cognitivo" },
      { name: "CX Management", desc: "Customer Experience" },
      { name: "CS Management", desc: "Customer Success" },
    ]
  }
];

const consultingData = [
  {
    area: "Implementação de Sistemas",
    icon: <Settings className="w-6 h-6" />,
    services: [
      "Implantação do Sistema 5S",
      "Certificação ISO 9001:2015, 14000 e 31000",
      "Sistema de Melhoria Kaizen",
      "Adequação às Normas NR 1 e NR 17",
      "Projetos Lean Six Sigma (Green/Black Belt)",
      "Adequação à LGPD"
    ]
  },
  {
    area: "Transformação Organizacional",
    icon: <Layers className="w-6 h-6" />,
    services: [
      "Design Organizacional",
      "Remodelagem de Modelo de Negócio",
      "Implementação de Escritório de Projetos (PMO)",
      "Mapeamento e Melhoria de Processos (BPM)",
      "Gestão de Mudança e Transformação Cultural",
      "Implementação de ERPs, MRPs e SIG"
    ]
  },
  {
    area: "Inteligência de Negócio",
    icon: <TrendingUp className="w-6 h-6" />,
    services: [
      "Gestão de Indicadores de Performance (KPIs)",
      "Metodologias Ágeis em Escala",
      "Planejamento e Gestão Estratégica"
    ]
  }
];

// --- Componentes ---

const HeroSection = ({ setView }) => (
  <div className="relative overflow-hidden bg-slate-900 text-white pt-20 pb-24 px-6 md:px-12">
    {/* Background Abstract Shapes */}
    <div className="absolute top-0 right-0 w-96 h-96 bg-emerald-500/10 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2"></div>
    <div className="absolute bottom-0 left-0 w-64 h-64 bg-blue-500/10 rounded-full blur-3xl translate-y-1/2 -translate-x-1/2"></div>

    <div className="max-w-7xl mx-auto grid md:grid-cols-2 gap-12 items-center relative z-10">
      <div className="space-y-6">
        <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-slate-800 border border-slate-700 text-sm text-emerald-400 font-medium">
          <Brain className="w-4 h-4" /> Neuropsicanálise & Gestão
        </div>
        <h1 className="text-4xl md:text-6xl font-bold leading-tight">
          Edely <span className="text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 to-blue-500">Viana</span>
        </h1>
        <p className="text-xl text-slate-300 font-light max-w-lg">
          Excelência em Consultoria Corporativa e Desenvolvimento Humano. 
          Integrando estratégias de negócios com o potencial da mente humana.
        </p>
        
        <div className="flex flex-wrap gap-4 pt-4">
          <button 
            onClick={() => setView('training')}
            className="px-6 py-3 bg-emerald-500 hover:bg-emerald-600 text-white font-semibold rounded-lg transition-all shadow-lg shadow-emerald-500/20 flex items-center gap-2"
          >
            Ver Treinamentos <ArrowRight className="w-4 h-4" />
          </button>
          <button 
            onClick={() => setView('consulting')}
            className="px-6 py-3 bg-white/10 hover:bg-white/20 border border-white/20 text-white font-semibold rounded-lg transition-all backdrop-blur-sm"
          >
            Serviços de Consultoria
          </button>
        </div>

        <div className="flex items-center gap-6 text-sm text-slate-400 pt-6">
          <a href={`mailto:${profileData.contact.email}`} className="flex items-center gap-2 hover:text-white transition-colors">
            <Mail className="w-4 h-4" /> {profileData.contact.email}
          </a>
          <a href={`tel:${profileData.contact.phone}`} className="flex items-center gap-2 hover:text-white transition-colors">
            <Phone className="w-4 h-4" /> {profileData.contact.phone}
          </a>
        </div>
      </div>

      {/* Dynamic Graph Visualization */}
      <div className="hidden md:flex justify-center items-center">
        <div className="relative w-80 h-80">
          <div className="absolute inset-0 border-2 border-dashed border-slate-700 rounded-full animate-spin-slow"></div>
          <div className="absolute inset-8 border border-slate-600 rounded-full opacity-30"></div>
          
          {/* Central Node */}
          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-24 h-24 bg-gradient-to-br from-emerald-500 to-blue-600 rounded-full flex items-center justify-center shadow-2xl z-20">
            <span className="font-bold text-white text-xl">EV</span>
          </div>

          {/* Satellite Nodes */}
          <div className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-6 flex flex-col items-center gap-2">
            <div className="w-12 h-12 bg-slate-800 border border-slate-600 rounded-xl flex items-center justify-center text-emerald-400 shadow-lg">
              <Award className="w-6 h-6" />
            </div>
            <span className="text-xs font-semibold bg-slate-900 px-2 py-1 rounded text-slate-300">Qualidade</span>
          </div>

          <div className="absolute bottom-10 right-0 flex flex-col items-center gap-2">
            <div className="w-12 h-12 bg-slate-800 border border-slate-600 rounded-xl flex items-center justify-center text-blue-400 shadow-lg">
              <TrendingUp className="w-6 h-6" />
            </div>
            <span className="text-xs font-semibold bg-slate-900 px-2 py-1 rounded text-slate-300">Gestão</span>
          </div>

          <div className="absolute bottom-10 left-0 flex flex-col items-center gap-2">
            <div className="w-12 h-12 bg-slate-800 border border-slate-600 rounded-xl flex items-center justify-center text-purple-400 shadow-lg">
              <Cpu className="w-6 h-6" />
            </div>
            <span className="text-xs font-semibold bg-slate-900 px-2 py-1 rounded text-slate-300">Tech</span>
          </div>
        </div>
      </div>
    </div>
  </div>
);

const TrainingView = () => {
  const [activeCategory, setActiveCategory] = useState(0);

  return (
    <div className="space-y-8 animate-fadeIn">
      <div className="text-center max-w-3xl mx-auto mb-12">
        <h2 className="text-3xl font-bold text-slate-800 mb-4">Catálogo de Treinamentos</h2>
        <p className="text-slate-600">
          Capacitação completa com material didático, formulários práticos e certificação digital.
          Metodologia focada na aplicação imediata.
        </p>
      </div>

      <div className="flex flex-col lg:flex-row gap-8">
        {/* Sidebar Navigation */}
        <div className="lg:w-1/4 space-y-2">
          {trainingData.map((cat, idx) => (
            <button
              key={idx}
              onClick={() => setActiveCategory(idx)}
              className={`w-full text-left px-6 py-4 rounded-xl flex items-center gap-3 transition-all duration-300 ${
                activeCategory === idx 
                  ? 'bg-emerald-600 text-white shadow-lg scale-105' 
                  : 'bg-white text-slate-600 hover:bg-slate-50 border border-slate-100'
              }`}
            >
              <div className={`${activeCategory === idx ? 'text-white' : 'text-emerald-600'}`}>
                {cat.icon}
              </div>
              <span className="font-semibold">{cat.category}</span>
            </button>
          ))}
          
          <div className="mt-8 p-6 bg-slate-100 rounded-xl border border-slate-200">
            <h4 className="font-bold text-slate-800 mb-3 flex items-center gap-2">
              <CheckCircle2 className="w-5 h-5 text-emerald-600" /> Incluso
            </h4>
            <ul className="space-y-2 text-sm text-slate-600">
              <li className="flex items-center gap-2">
                <span className="w-1.5 h-1.5 bg-emerald-500 rounded-full"></span> Material Didático Completo
              </li>
              <li className="flex items-center gap-2">
                <span className="w-1.5 h-1.5 bg-emerald-500 rounded-full"></span> Formulários Práticos
              </li>
              <li className="flex items-center gap-2">
                <span className="w-1.5 h-1.5 bg-emerald-500 rounded-full"></span> Certificado Digital
              </li>
            </ul>
          </div>
        </div>

        {/* Content Area */}
        <div className="lg:w-3/4">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            {trainingData[activeCategory].items.map((item, idx) => (
              <div key={idx} className="group bg-white p-6 rounded-xl border border-slate-100 hover:shadow-xl hover:border-emerald-200 transition-all duration-300">
                <div className="flex justify-between items-start mb-2">
                  <h3 className="font-bold text-lg text-slate-800 group-hover:text-emerald-600 transition-colors">
                    {item.name}
                  </h3>
                  <div className="opacity-0 group-hover:opacity-100 transition-opacity text-emerald-500">
                    <ArrowRight className="w-5 h-5" />
                  </div>
                </div>
                <p className="text-slate-500 text-sm">{item.desc}</p>
                <div className="w-full bg-slate-100 h-1 mt-4 rounded-full overflow-hidden">
                  <div className="h-full bg-emerald-500 w-0 group-hover:w-full transition-all duration-700 ease-out"></div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

const ConsultingView = () => (
  <div className="animate-fadeIn">
    <div className="text-center max-w-3xl mx-auto mb-12">
      <h2 className="text-3xl font-bold text-slate-800 mb-4">Soluções de Consultoria</h2>
      <p className="text-slate-600">
        Diagnóstico preciso, implementação estratégica e acompanhamento de resultados.
        Do planejamento à certificação.
      </p>
    </div>

    <div className="grid md:grid-cols-3 gap-8">
      {consultingData.map((area, idx) => (
        <div key={idx} className="bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden hover:shadow-2xl transition-all duration-300 flex flex-col">
          <div className="bg-slate-50 p-6 border-b border-slate-100 flex items-center gap-4">
            <div className="p-3 bg-white rounded-lg shadow-sm text-blue-600">
              {area.icon}
            </div>
            <h3 className="font-bold text-lg text-slate-800">{area.area}</h3>
          </div>
          <div className="p-6 flex-1">
            <ul className="space-y-4">
              {area.services.map((service, sIdx) => (
                <li key={sIdx} className="flex items-start gap-3 text-slate-600 text-sm group">
                  <CheckCircle2 className="w-5 h-5 text-emerald-500 shrink-0 mt-0.5 group-hover:scale-110 transition-transform" />
                  <span className="group-hover:text-slate-900 transition-colors">{service}</span>
                </li>
              ))}
            </ul>
          </div>
          <div className="p-4 bg-slate-50 border-t border-slate-100 mt-auto">
            <button className="w-full py-2 text-sm font-semibold text-blue-600 hover:text-blue-700 hover:bg-blue-50 rounded transition-colors">
              Solicitar Diagnóstico
            </button>
          </div>
        </div>
      ))}
    </div>

    {/* Process Timeline/Methodology */}
    <div className="mt-20 py-12 border-t border-slate-200">
      <h3 className="text-2xl font-bold text-center text-slate-800 mb-10">Metodologia de Atuação</h3>
      <div className="flex flex-col md:flex-row justify-between items-center max-w-4xl mx-auto relative px-4">
        {/* Connecting Line */}
        <div className="hidden md:block absolute top-1/2 left-0 w-full h-0.5 bg-slate-200 -z-10"></div>
        
        {[
          { step: "1", title: "Imersão", desc: "Entendimento do cenário" },
          { step: "2", title: "Diagnóstico", desc: "Identificação de gaps" },
          { step: "3", title: "Planejamento", desc: "Plano de ação" },
          { step: "4", title: "Execução", desc: "Implementação guiada" },
          { step: "5", title: "Monitoramento", desc: "KPIs e ajustes" }
        ].map((item, i) => (
          <div key={i} className="flex flex-col items-center bg-white p-4 md:p-0 z-10 w-full md:w-auto mb-6 md:mb-0">
            <div className="w-12 h-12 rounded-full bg-slate-900 text-white flex items-center justify-center font-bold mb-3 shadow-lg ring-4 ring-white">
              {item.step}
            </div>
            <h4 className="font-bold text-slate-800">{item.title}</h4>
            <p className="text-xs text-slate-500 text-center">{item.desc}</p>
          </div>
        ))}
      </div>
    </div>
  </div>
);

const Footer = () => (
  <footer className="bg-slate-900 text-slate-400 py-12 mt-20">
    <div className="max-w-7xl mx-auto px-6 grid md:grid-cols-4 gap-8">
      <div className="col-span-1 md:col-span-2">
        <h3 className="text-white text-xl font-bold mb-4">{profileData.name}</h3>
        <p className="mb-4 max-w-sm">
          Ajudando pessoas e empresas a atingirem seu potencial máximo através de gestão estratégica e inteligência emocional.
        </p>
        <div className="flex gap-4">
          <a href="#" className="w-10 h-10 rounded-full bg-slate-800 flex items-center justify-center hover:bg-emerald-500 hover:text-white transition-all">
            <Linkedin className="w-5 h-5" />
          </a>
          <a href={`mailto:${profileData.contact.email}`} className="w-10 h-10 rounded-full bg-slate-800 flex items-center justify-center hover:bg-emerald-500 hover:text-white transition-all">
            <Mail className="w-5 h-5" />
          </a>
        </div>
      </div>
      
      <div>
        <h4 className="text-white font-semibold mb-4">Competências</h4>
        <ul className="space-y-2 text-sm">
          <li>Lean Six Sigma</li>
          <li>Gestão de Projetos</li>
          <li>Design Thinking</li>
          <li>Neuropsicanálise</li>
        </ul>
      </div>

      <div>
        <h4 className="text-white font-semibold mb-4">Contato</h4>
        <ul className="space-y-2 text-sm">
          <li className="flex items-center gap-2">
            <Phone className="w-4 h-4" /> {profileData.contact.phone}
          </li>
          <li className="flex items-center gap-2">
            <Mail className="w-4 h-4" /> {profileData.contact.email}
          </li>
          <li className="flex items-center gap-2">
            <Briefcase className="w-4 h-4" /> Consultoria e Treinamento
          </li>
        </ul>
      </div>
    </div>
    <div className="border-t border-slate-800 mt-12 pt-8 text-center text-xs">
      &copy; {new Date().getFullYear()} Edely Viana. Todos os direitos reservados.
    </div>
  </footer>
);

export default function App() {
  const [view, setView] = useState('training'); // 'training' or 'consulting'

  return (
    <div className="min-h-screen bg-slate-50 font-sans text-slate-900 selection:bg-emerald-200 selection:text-emerald-900">
      <style>{`
        @keyframes spin-slow {
          from { transform: rotate(0deg); }
          to { transform: rotate(360deg); }
        }
        .animate-spin-slow {
          animation: spin-slow 20s linear infinite;
        }
        .animate-fadeIn {
          animation: fadeIn 0.5s ease-out forwards;
        }
        @keyframes fadeIn {
          from { opacity: 0; transform: translateY(10px); }
          to { opacity: 1; transform: translateY(0); }
        }
      `}</style>

      {/* Navigation Bar */}
      <nav className="sticky top-0 z-50 bg-white/80 backdrop-blur-md border-b border-slate-200">
        <div className="max-w-7xl mx-auto px-6 h-16 flex items-center justify-between">
          <div className="font-bold text-xl tracking-tight text-slate-800 flex items-center gap-2">
            <div className="w-8 h-8 bg-gradient-to-br from-emerald-500 to-blue-600 rounded-lg flex items-center justify-center text-white text-xs">EV</div>
            Edely Viana
          </div>
          
          <div className="flex bg-slate-100 p-1 rounded-lg">
            <button
              onClick={() => setView('training')}
              className={`px-4 py-1.5 rounded-md text-sm font-medium transition-all ${
                view === 'training' ? 'bg-white text-slate-900 shadow-sm' : 'text-slate-500 hover:text-slate-700'
              }`}
            >
              Treinamentos
            </button>
            <button
              onClick={() => setView('consulting')}
              className={`px-4 py-1.5 rounded-md text-sm font-medium transition-all ${
                view === 'consulting' ? 'bg-white text-slate-900 shadow-sm' : 'text-slate-500 hover:text-slate-700'
              }`}
            >
              Consultoria
            </button>
          </div>
        </div>
      </nav>

      <HeroSection setView={setView} />

      <main className="max-w-7xl mx-auto px-6 py-16 min-h-[600px]">
        {view === 'training' ? <TrainingView /> : <ConsultingView />}
      </main>

      <Footer />
    </div>
  );
}