import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { 
  BookOpen, ArrowRight, School, Users, Shield, 
  Sparkles, BookCheck, Play, CheckCircle, Star,
  GraduationCap, BarChart, Brain, X, Check,
  Pencil, Wand, Mic, Share2
} from 'lucide-react';
import { Footer } from '@/components/ui/footer';
import { PlanForSchools } from '@/components/ui/plan-for-schools';
import { FAQ } from '@/components/ui/faq';
import { StatCard } from '@/components/ui/stat-card';
import { TestimonialCard } from '@/components/ui/testimonial-card';
import { FeatureCard } from '@/components/ui/feature-card';
import { ProcessStep } from '@/components/ui/process-step';
import { InfoCard } from '@/components/ui/info-card';
import { ComparisonSection } from '@/components/ui/comparison-section';

const navigation = [
  { name: 'Início', href: '/' },
  { name: 'Para Pais', href: '/para-pais' },
  { name: 'Evidências', href: '/evidencias' },
  { name: 'Para Educadores', href: '/para-educadores' },
];

export function HomePage() {
  const navigate = useNavigate();
  const [showUserOptions, setShowUserOptions] = useState(false);
  const [activeTab, setActiveTab] = useState('schools');
  const [showFaq, setShowFaq] = useState<number | null>(null);

  // Navigation handlers
  const handleLoginClick = () => setShowUserOptions(!showUserOptions);
  const handleSchoolLogin = () => navigate('/login/school');
  const handleTeacherLogin = () => navigate('/login/teacher');
  const handleStudentLogin = () => navigate('/login/student');
  const handleSchoolRegister = () => {
    navigate('/register');
  };
  const handleDemo = () => navigate('/demo');

  return (
    <div className="min-h-screen bg-gradient-to-b from-purple-50 to-white">
      {/* Header/Nav */}
      <nav className="bg-white/80 backdrop-blur-md fixed w-full z-50 shadow-sm">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center h-16">
            <div className="flex items-center">
              <BookOpen className="h-8 w-8 text-purple-600" />
              <span className="ml-2 text-xl font-bold text-gray-900">Histórias Mágicas</span>
            </div>
            <div className="flex items-center gap-4">
              <div className="relative">
                <button 
                  onClick={handleLoginClick}
                  className="text-gray-600 hover:text-gray-900 px-3 py-2"
                >
                  Entrar
                </button>
                {showUserOptions && (
                  <div className="absolute right-0 mt-2 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5">
                    <div className="py-1" role="menu">
                      <button
                        onClick={handleSchoolLogin}
                        className="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-purple-50"
                      >
                        Entrar como Escola
                      </button>
                      <button
                        onClick={handleTeacherLogin}
                        className="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-purple-50"
                      >
                        Entrar como Professor
                      </button>
                      <button
                        onClick={handleStudentLogin}
                        className="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-purple-50"
                      >
                        Entrar como Aluno
                      </button>
                    </div>
                  </div>
                )}
              </div>
              <button 
                onClick={handleSchoolRegister}
                className="bg-purple-600 text-white px-4 py-2 rounded-lg hover:bg-purple-700 transition"
              >
                Cadastrar Escola
              </button>
            </div>
          </div>
        </div>
      </nav>

      {/* Hero Section */}
      <div className="pt-32 pb-24 px-4 sm:px-6 lg:px-8">
        <div className="max-w-7xl mx-auto">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            <div>
              <div className="inline-block px-4 py-1 rounded-full bg-purple-100 text-purple-600 font-medium text-sm mb-6">
                Potencializado por IA 🚀
              </div>
              <h1 className="text-4xl sm:text-5xl md:text-6xl font-bold text-gray-900 mb-6">
                Transforme a educação com
                <span className="text-purple-600"> histórias inteligentes</span>
              </h1>
              <p className="text-xl text-gray-600 mb-8">
                Uma plataforma educacional que usa IA para criar experiências de 
                aprendizado personalizadas através de histórias interativas.
              </p>
              <div className="flex flex-col sm:flex-row gap-4">
                <button 
                  onClick={handleSchoolRegister}
                  className="bg-purple-600 text-white px-8 py-4 rounded-xl hover:bg-purple-700 transition flex items-center justify-center gap-2 text-lg font-semibold"
                >
                  Começar Gratuitamente
                  <ArrowRight className="w-5 h-5" />
                </button>
                <button 
                  onClick={handleDemo}
                  className="border-2 border-purple-600 text-purple-600 px-8 py-4 rounded-xl hover:bg-purple-50 transition text-lg font-semibold flex items-center justify-center gap-2"
                >
                  <Play className="w-5 h-5" />
                  Ver Demo
                </button>
              </div>
              <div className="mt-8 flex items-center gap-4">
                <div className="flex -space-x-2">
                  {[1,2,3,4].map((i) => (
                    <img
                      key={i}
                      src={`/avatars/${i}.jpg`}
                      alt=""
                      className="w-8 h-8 rounded-full border-2 border-white"
                    />
                  ))}
                </div>
                <div className="text-sm text-gray-600">
                  <span className="text-purple-600 font-semibold">+1000 escolas</span> já 
                  transformaram sua educação
                </div>
              </div>
            </div>
            <div className="relative">
              <div className="aspect-video rounded-xl overflow-hidden shadow-2xl">
                <img 
                  src="/demo-platform.png" 
                  alt="Platform demo" 
                  className="w-full h-full object-cover"
                />
                <button 
                  onClick={handleDemo}
                  className="absolute inset-0 flex items-center justify-center bg-black/30 hover:bg-black/40 transition group"
                >
                  <div className="w-16 h-16 rounded-full bg-white/90 flex items-center justify-center">
                    <Play className="w-8 h-8 text-purple-600 group-hover:scale-110 transition" />
                  </div>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Student Journey Section */}
      <div className="py-24 bg-gradient-to-b from-purple-50 to-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-3xl font-bold text-gray-900 mb-4">
              Jornada do Aluno
            </h2>
            <p className="text-gray-600 max-w-2xl mx-auto">
              Um processo inteligente e envolvente de aprendizado
            </p>
          </div>

          <div className="space-y-12">
            <ProcessStep
              number={1}
              title="Escolha o tema da aventura"
              description="Selecione entre diversos temas educativos alinhados com a BNCC e adequados à idade."
            />

            <ProcessStep
              number={2}
              title="Personalize os personagens"
              description="Crie personagens que seu filho vai adorar, com características únicas e cativantes."
            />

            <ProcessStep
              number={3}
              title="A IA cria a história mágica"
              description="Nossa IA educacional gera uma história personalizada em segundos."
            />

            <ProcessStep
              number={4}
              title="A aventura educativa começa"
              description="Seu filho mergulha em uma jornada mágica de aprendizado e diversão."
            />
          </div>
        </div>
      </div>

      {/* Results Summary */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="mt-24 bg-white rounded-xl shadow-lg p-8">
          <div className="text-center mb-8">
            <h3 className="text-2xl font-bold text-gray-900 mb-2">
              Resultados Comprovados
            </h3>
            <p className="text-gray-600">
              Nossa abordagem inovadora tem transformado a experiência de leitura
            </p>
          </div>

          <div className="grid md:grid-cols-4 gap-8">
            <StatCard
              icon={Star}
              title="Fluência de Leitura"
              value="95%"
              description="Melhoria na fluência de leitura dos alunos"
            />
            <StatCard
              icon={Sparkles}
              title="Engajamento"
              value="87%"
              description="Aumento no engajamento com a leitura"
            />
            <StatCard
              icon={CheckCircle}
              title="Satisfação"
              value="92%"
              description="Satisfação dos pais com o progresso"
            />
            <StatCard
              icon={BookOpen}
              title="Leitura"
              value="3x"
              description="Mais histórias lidas por aluno"
            />
          </div>
        </div>

        {/* Features Grid */}
        <div className="mt-24">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold text-gray-900 mb-4">
              Tecnologia e Educação em Harmonia
            </h2>
            <p className="text-gray-600 max-w-2xl mx-auto">
              Uma plataforma completa que une o poder da IA com as melhores práticas pedagógicas
            </p>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            <FeatureCard
              icon={Brain}
              title="IA Adaptativa"
              description="Conteúdo que se adapta ao ritmo e estilo de aprendizagem de cada aluno"
            />
            <FeatureCard
              icon={BookOpen}
              title="Histórias Interativas"
              description="Narrativas envolventes que tornam o aprendizado mais divertido e eficaz"
            />
            <FeatureCard
              icon={BarChart}
              title="Analytics Avançado"
              description="Insights detalhados sobre o progresso e engajamento dos alunos"
            />
            <FeatureCard
              icon={Users}
              title="Colaboração"
              description="Ferramentas para professores trabalharem juntos e compartilharem recursos"
            />
            <FeatureCard
              icon={Shield}
              title="Ambiente Seguro"
              description="Proteção de dados e conteúdo adequado para todas as idades"
            />
            <FeatureCard
              icon={GraduationCap}
              title="Suporte Pedagógico"
              description="Recursos e orientações para maximizar o potencial de aprendizagem"
            />
          </div>
        </div>

        {/* Before & After Section */}
        <div className="mt-24">
          <ComparisonSection
            title="Compare a Transformação"
            items={[
              {
                title: "Personalização",
                without: [
                  "Conteúdo padronizado que não atende necessidades individuais",
                  "Material didático tradicional e pouco envolvente",
                  "Mesma abordagem para todos os alunos"
                ],
                with: [
                  "Histórias adaptativas que evoluem com cada aluno",
                  "Conteúdo personalizado e envolvente",
                  "Experiência única para cada estudante"
                ]
              },
              {
                title: "Engajamento",
                without: [
                  "Alunos desmotivados com atividades repetitivas",
                  "Baixo interesse nas atividades de leitura",
                  "Dificuldade em manter a atenção dos alunos"
                ],
                with: [
                  "Estudantes engajados e participativos",
                  "Aumento de 300% no engajamento com leitura",
                  "Alunos ansiosos pela próxima atividade"
                ]
              },
              {
                title: "Acompanhamento",
                without: [
                  "Professores sobrecarregados com correções manuais",
                  "Dificuldade em acompanhar o progresso individual",
                  "Falta de dados para decisões pedagógicas"
                ],
                with: [
                  "Correção automática com feedback instantâneo",
                  "Dashboard em tempo real do progresso individual",
                  "Insights precisos para intervenções pedagógicas"
                ]
              }
            ]}
          />
        </div>

        {/* Testimonials */}
        <div className="mt-24 grid md:grid-cols-2 gap-8">
          <TestimonialCard
            quote="A transformação que vimos em nossa escola foi incrível. Alunos que mal conseguiam juntar letras agora estão lendo com fluência e, mais importante, com prazer."
            author="Maria Silva"
            role="Diretora Pedagógica"
          />
          <TestimonialCard
            quote="Como professora há 15 anos, nunca vi um método tão eficaz e envolvente. A plataforma me ajuda a personalizar o ensino para cada aluno."
            author="Ana Paula Santos"
            role="Professora"
          />
        </div>

        {/* Pricing Section */}
        <div className="mt-24">
          <PlanForSchools />
        </div>

        {/* FAQ Section */}
        <div className="mt-24">
          <FAQ
            title="Dúvidas Frequentes"
            description="Tire suas dúvidas sobre a implementação do Histórias Mágicas em sua escola"
            items={[
              {
                question: "Como o Histórias Mágicas se integra ao currículo escolar?",
                answer: "Nossa plataforma foi desenvolvida para complementar e enriquecer o currículo existente. Oferecemos conteúdo alinhado à BNCC e ferramentas de personalização que permitem adaptar as atividades aos objetivos pedagógicos específicos de cada escola."
              },
              {
                question: "Quanto tempo leva para implementar a plataforma?",
                answer: "O processo de implementação é personalizado e gradual, levando em média 2-3 semanas. Iniciamos com uma fase piloto, oferecemos treinamento completo para a equipe e fornecemos suporte contínuo durante todo o processo."
              },
              {
                question: "Como posso acompanhar o progresso dos alunos?",
                answer: "Disponibilizamos um dashboard intuitivo com métricas em tempo real, relatórios detalhados e insights sobre o desempenho individual e coletivo. Professores e coordenadores podem monitorar o progresso, identificar áreas de melhoria e personalizar intervenções."
              },
              {
                question: "Quais são os requisitos técnicos?",
                answer: "A plataforma é acessível via navegador web em qualquer dispositivo (computadores, tablets, smartphones). Recomendamos uma conexão estável à internet e o uso de fones de ouvido para melhor experiência nas atividades de áudio."
              },
              {
                question: "Como vocês protegem os dados dos alunos?",
                answer: "Seguimos rigorosos protocolos de segurança em conformidade com a LGPD. Todos os dados são criptografados, o acesso é controlado e realizamos auditorias regulares de segurança."
              },
              {
                question: "Que tipo de suporte vocês oferecem?",
                answer: "Oferecemos suporte técnico e pedagógico através de múltiplos canais (chat, email, telefone), além de atualizações regulares da plataforma e workshops para capacitação contínua da equipe escolar."
              }
            ]}
          />
        </div>

        {/* Final CTA */}
        <div className="mt-24 pb-24">
          <div className="bg-purple-600 rounded-3xl px-8 py-16 text-center">
            <h2 className="text-4xl font-bold text-white mb-4">
              Pronto para Transformar sua Escola?
            </h2>
            <p className="text-white/90 mb-8 max-w-2xl mx-auto text-lg">
              Junte-se a mais de 1000 escolas que já estão revolucionando a educação
            </p>
            <button
              onClick={() => navigate('/register')}
              className="bg-white text-purple-600 px-8 py-3 rounded-lg font-semibold hover:bg-purple-50 transition"
            >
              Começar Gratuitamente
            </button>
          </div>
        </div>
      </div>

      {/* Footer */}
      <Footer />
    </div>
  );
}

export default HomePage;