story-generator/src/components/home/HomePage.tsx

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, Check, X 
} from 'lucide-react';

// Components
const FeatureCard = ({ icon, title, description }: { 
  icon: React.ReactNode; 
  title: string; 
  description: string; 
}) => (
  <div className="p-6 rounded-xl border border-gray-200 hover:shadow-lg transition bg-white">
    <div className="w-12 h-12 rounded-lg bg-purple-100 flex items-center justify-center mb-4">
      <div className="text-purple-600">{icon}</div>
    </div>
    <h3 className="text-xl font-semibold text-gray-900 mb-2">{title}</h3>
    <p className="text-gray-600">{description}</p>
  </div>
);

const StatCard = ({ number, label }: { number: string; label: string }) => (
  <div className="p-6">
    <div className="text-4xl font-bold mb-2">{number}</div>
    <div className="text-purple-200">{label}</div>
  </div>
);

const TestimonialCard = ({ quote, author, role, image }: {
  quote: string;
  author: string;
  role: string;
  image: string;
}) => (
  <div className="p-6 rounded-xl bg-white shadow-md">
    <div className="flex items-center gap-4 mb-4">
      <img src={image} alt={author} className="w-12 h-12 rounded-full" />
      <div>
        <div className="font-semibold text-gray-900">{author}</div>
        <div className="text-sm text-gray-600">{role}</div>
      </div>
    </div>
    <p className="text-gray-600 italic">"{quote}"</p>
  </div>
);

const PriceCard = ({ 
  plan, 
  price, 
  description, 
  features, 
  highlighted = false 
}: {
  plan: string;
  price: string;
  description: string;
  features: string[];
  highlighted?: boolean;
}) => (
  <div className={`p-6 rounded-xl border ${
    highlighted ? 'border-purple-600 shadow-lg' : 'border-gray-200'
  }`}>
    <div className="text-xl font-semibold text-gray-900 mb-2">{plan}</div>
    <div className="text-3xl font-bold text-gray-900 mb-2">
      R$ {price}<span className="text-sm font-normal text-gray-600">/mês</span>
    </div>
    <p className="text-gray-600 mb-6">{description}</p>
    <ul className="space-y-3 mb-6">
      {features.map((feature, index) => (
        <li key={index} className="flex items-center gap-2">
          <CheckCircle className="w-5 h-5 text-purple-600" />
          <span className="text-gray-600">{feature}</span>
        </li>
      ))}
    </ul>
    <button className={`w-full py-2 px-4 rounded-lg transition ${
      highlighted 
        ? 'bg-purple-600 text-white hover:bg-purple-700' 
        : 'border border-purple-600 text-purple-600 hover:bg-purple-50'
    }`}>
      Começar agora
    </button>
  </div>
);

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/school');
  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-20 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>

      {/* Features Grid */}
      <div className="py-20 bg-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">
              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>
      </div>

      {/* Before & After Section */}
      <div className="py-20 bg-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">
              Transforme a Experiência de Aprendizagem
            </h2>
            <p className="text-gray-600 max-w-2xl mx-auto">
              Veja como o Histórias Mágicas revoluciona o ensino
            </p>
          </div>

          <div className="grid md:grid-cols-2 gap-16">
            {/* Before */}
            <div className="rounded-2xl bg-red-50 p-8">
              <div className="flex items-center gap-3 mb-6">
                <div className="w-12 h-12 rounded-full bg-red-100 flex items-center justify-center">
                  <X className="w-6 h-6 text-red-600" />
                </div>
                <h3 className="text-2xl font-semibold text-gray-900">Antes</h3>
              </div>
              <ul className="space-y-4">
                {[
                  'Conteúdo padronizado que não atende necessidades individuais',
                  'Alunos desmotivados com material didático tradicional',
                  'Professores sobrecarregados com correções manuais',
                  'Dificuldade em acompanhar o progresso individual',
                  'Baixo engajamento nas atividades de leitura e escrita',
                  'Falta de dados para tomada de decisão pedagógica'
                ].map((item, index) => (
                  <li key={index} className="flex items-start gap-3">
                    <div className="mt-1">
                      <X className="w-5 h-5 text-red-600" />
                    </div>
                    <span className="text-gray-600">{item}</span>
                  </li>
                ))}
              </ul>
            </div>

            {/* After */}
            <div className="rounded-2xl bg-green-50 p-8">
              <div className="flex items-center gap-3 mb-6">
                <div className="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center">
                  <Check className="w-6 h-6 text-green-600" />
                </div>
                <h3 className="text-2xl font-semibold text-gray-900">Depois</h3>
              </div>
              <ul className="space-y-4">
                {[
                  'Histórias adaptativas que evoluem com cada aluno',
                  'Estudantes engajados com conteúdo personalizado',
                  'Correção automática com feedback instantâneo',
                  'Dashboard em tempo real do progresso individual',
                  'Aumento de 300% no engajamento com leitura',
                  'Insights precisos para intervenções pedagógicas'
                ].map((item, index) => (
                  <li key={index} className="flex items-start gap-3">
                    <div className="mt-1">
                      <Check className="w-5 h-5 text-green-600" />
                    </div>
                    <span className="text-gray-600">{item}</span>
                  </li>
                ))}
              </ul>
            </div>

            {/* Results Preview */}
            <div className="md:col-span-2 mt-8">
              <div className="bg-white rounded-xl shadow-lg p-8">
                <div className="grid md:grid-cols-3 gap-8 text-center">
                  <div>
                    <div className="text-4xl font-bold text-purple-600 mb-2">300%</div>
                    <p className="text-gray-600">Aumento no engajamento</p>
                  </div>
                  <div>
                    <div className="text-4xl font-bold text-purple-600 mb-2">85%</div>
                    <p className="text-gray-600">Melhoria no desempenho</p>
                  </div>
                  <div>
                    <div className="text-4xl font-bold text-purple-600 mb-2">50%</div>
                    <p className="text-gray-600">Redução da carga dos professores</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Pricing */}
      <div className="py-20 bg-gray-50">
        <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">
              Planos para Cada Necessidade
            </h2>
            <p className="text-gray-600 max-w-2xl mx-auto">
              Escolha o plano ideal para sua escola
            </p>
          </div>

          <div className="grid md:grid-cols-3 gap-8">
            <PriceCard
              plan="Básico"
              price="497"
              description="Ideal para escolas pequenas"
              features={[
                "Até 200 alunos",
                "Histórias básicas",
                "Suporte por email"
              ]}
            />
            <PriceCard
              plan="Profissional"
              price="997"
              description="Para escolas em crescimento"
              features={[
                "Até 1000 alunos",
                "Histórias personalizadas",
                "Suporte prioritário",
                "Analytics avançado"
              ]}
              highlighted
            />
            <PriceCard
              plan="Enterprise"
              price="Consulte"
              description="Para redes de ensino"
              features={[
                "Alunos ilimitados",
                "Customização completa",
                "Suporte 24/7",
                "API dedicada"
              ]}
            />
          </div>
        </div>
      </div>

      {/* Final CTA */}
      <div className="py-20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="bg-gradient-to-r from-purple-600 to-indigo-600 rounded-2xl p-8 md:p-16 text-center text-white">
            <h2 className="text-3xl md:text-4xl font-bold mb-4">
              Pronto para Transformar sua Escola?
            </h2>
            <p className="text-lg mb-8 max-w-2xl mx-auto">
              Junte-se a mais de 1000 escolas que já estão revolucionando a educação
            </p>
            <button 
              onClick={handleSchoolRegister}
              className="bg-white text-purple-600 px-8 py-4 rounded-xl hover:bg-purple-50 transition text-lg font-semibold"
            >
              Começar Gratuitamente
            </button>
          </div>
        </div>
      </div>

      {/* Footer */}
      <footer className="bg-gray-900 text-white py-12">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid md:grid-cols-4 gap-8">
            <div>
              <div className="flex items-center gap-2 mb-4">
                <BookOpen className="h-8 w-8" />
                <span className="text-xl font-bold">Histórias Mágicas</span>
              </div>
              <p className="text-gray-400">
                Transformando a educação através de histórias interativas
              </p>
            </div>
            {/* Adicione mais seções do footer conforme necessário */}
          </div>
        </div>
      </footer>
    </div>
  );
}