story-generator/src/pages/landing/EducationalForParents.tsx

import React from 'react';
import { useNavigate } from 'react-router-dom';
import {
  ArrowRight,
  Brain,
  BookOpen,
  Target,
  Wand2,
  Star,
  Shield,
  Sparkles,
  ScrollText,
  Lock,
  Heart,
  Facebook,
  Instagram,
  Twitter,
  Youtube,
  CheckCircle,
  LineChart,
  Clock
} from 'lucide-react';

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';
import { PlanForParents } from '@/components/ui/plan-for-parents';
import { FAQ } from '@/components/ui/faq';
import { Footer } from '@/components/ui/footer';

export function EducationalForParents() {
  return (
    <div className="min-h-screen bg-white">
      {/* Hero Section */}
      <div className="relative isolate overflow-hidden bg-gradient-to-b from-purple-100/20">
        <div className="mx-auto max-w-7xl px-6 pb-24 pt-10 sm:pb-32 lg:flex lg:px-8 lg:py-40">
          <div className="mx-auto max-w-2xl lg:mx-0 flex-shrink-0 lg:pt-8">
            <div className="absolute right-4 top-4 text-gray-600 flex items-center gap-2">
              <Clock className="w-4 h-4" />
              <span className="text-sm">Tempo de leitura: 5 minutos</span>
            </div>
            
            <h1 className="mt-10 text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl">
              Transforme o<br />
              Aprendizado em<br />
              Uma <span className="text-purple-600">Aventura Mágica</span>
            </h1>
            
            <p className="mt-6 text-lg leading-8 text-gray-600 max-w-xl">
              Histórias educativas personalizadas que encantam e ensinam,
              criadas especialmente para o desenvolvimento único do seu filho.
            </p>
            
            <div className="mt-10">
              <button
                onClick={() => window.location.href = '/cadastro'}
                className="rounded-xl bg-purple-600 px-8 py-4 text-base font-semibold text-white shadow-sm hover:bg-purple-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-purple-600 flex items-center gap-2"
              >
                Comece Sua Aventura Mágica Grátis
                <ArrowRight className="w-5 h-5" />
              </button>
            </div>

            <div className="mt-10 flex items-center gap-x-8 text-sm text-gray-600">
              <div className="flex items-center gap-x-2">
                <BookOpen className="w-5 h-5 text-purple-600" />
                <span>Mais de 10.000 histórias mágicas criadas</span>
              </div>
              <div className="flex items-center gap-x-2">
                <Target className="w-5 h-5 text-purple-600" />
                <span>5.000 pequenos leitores encantados</span>
              </div>
            </div>
          </div>

          <div className="mx-auto mt-16 flex max-w-2xl sm:mt-24 lg:ml-10 lg:mr-0 lg:mt-0 lg:max-w-none lg:flex-none xl:ml-32">
            <div className="max-w-3xl flex-none sm:max-w-5xl lg:max-w-none">
              <img
                src="/images/hero-image.webp"
                alt="Crianças mergulhadas em um livro mágico"
                className="w-[76rem] rounded-md bg-white/5 shadow-2xl ring-1 ring-white/10"
              />
            </div>
          </div>
        </div>
      </div>

      {/* Challenges Section */}
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-24">
        <div className="text-center">
          <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
            Desafios da Educação Moderna
          </h2>
          <p className="mt-4 text-lg leading-8 text-gray-600">
            Entendemos os obstáculos que pais e educadores enfrentam no desenvolvimento da leitura.
          </p>
        </div>
        <div className="mt-16 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
          {challenges.map((challenge, index) => (
            <InfoCard
              key={index}
              icon={challenge.icon}
              title={challenge.title}
              description={challenge.description}
            />
          ))}
        </div>
      </div>

      {/* Magic Process Section */}
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-24 bg-gradient-to-b from-purple-50">
        <div className="text-center">
          <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
            Como Funciona a Magia
          </h2>
          <p className="mt-4 text-lg leading-8 text-gray-600">
            Um processo simples e eficaz para transformar a leitura em uma aventura inesquecível.
          </p>
        </div>
        <div className="mt-16 space-y-12">
          {magicSteps.map((step, index) => (
            <ProcessStep
              key={index}
              number={index + 1}
              title={step.title}
              description={step.description}
            />
          ))}
        </div>
      </div>

      {/* Comparison Section */}
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-24">
        <ComparisonSection
          title="A Magia da Transformação"
          items={comparisonData}
        />
      </div>

      {/* Benefits Section */}
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-24 bg-gradient-to-b from-purple-50">
        <div className="text-center">
          <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
            Benefícios Mágicos
          </h2>
          <p className="mt-4 text-lg leading-8 text-gray-600">
            Descubra todas as vantagens que nossa plataforma oferece para o desenvolvimento do seu filho.
          </p>
        </div>
        <div className="mt-16 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
          {detailedBenefits.map((benefit, index) => (
            <FeatureCard
              key={index}
              icon={benefit.icon}
              title={benefit.title}
              description={benefit.description}
            />
          ))}
        </div>
      </div>

      {/* Results Section */}
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-24">
        <div className="text-center">
          <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
            Resultados Comprovados
          </h2>
          <p className="mt-4 text-lg leading-8 text-gray-600">
            Números que demonstram o impacto do Histórias Mágicas no aprendizado.
          </p>
        </div>
        <div className="mt-16 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4">
          <StatCard
            icon={LineChart}
            title="Fluência de Leitura"
            value="95%"
            description="de melhora na velocidade e compreensão"
          />
          <StatCard
            icon={Clock}
            title="Tempo de Leitura"
            value="3x"
            description="mais tempo dedicado à leitura diária"
          />
          <StatCard
            icon={Star}
            title="Satisfação"
            value="98%"
            description="dos pais recomendam a plataforma"
          />
          <StatCard
            icon={BookOpen}
            title="Histórias Lidas"
            value="50+"
            description="histórias por aluno em média"
          />
        </div>
      </div>

      {/* Testimonials Section */}
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-24 bg-gradient-to-b from-purple-50">
        <div className="text-center">
          <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
            Histórias de Transformação
          </h2>
          <p className="mt-4 text-lg leading-8 text-gray-600">
            Veja como o Histórias Mágicas está transformando a vida de famílias por todo o Brasil.
          </p>
        </div>
        <div className="mt-16 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
          {testimonials.map((testimonial, index) => (
            <TestimonialCard
              key={index}
              text={testimonial.text}
              name={testimonial.name}
              role={testimonial.role}
              image={testimonial.image}
              magicMoment={testimonial.magicMoment}
            />
          ))}
        </div>
      </div>

      {/* Pricing Section */}
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-24">
        <PlanForParents />
      </div>

      {/* FAQ Section */}
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-24 bg-gradient-to-b from-purple-50">
        <FAQ
          title="Dúvidas Frequentes"
          description="Encontre respostas para as perguntas mais comuns sobre nossa plataforma."
          items={faqItems}
        />
      </div>

      {/* Final CTA */}
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-24">
        <div className="rounded-3xl bg-purple-600 px-8 py-16">
          <div className="mx-auto max-w-2xl text-center">
            <h2 className="text-3xl font-bold tracking-tight text-white sm:text-4xl">
              Comece a Jornada Mágica Hoje
            </h2>
            <p className="mx-auto mt-6 max-w-xl text-lg leading-8 text-white/90">
              Junte-se a milhares de famílias que já descobriram o poder da leitura personalizada.
            </p>
            <div className="mt-10 flex items-center justify-center gap-x-6">
              <button
                onClick={() => window.location.href = '/cadastro'}
                className="rounded-xl bg-white px-3.5 py-2.5 text-sm font-semibold text-purple-600 shadow-sm hover:bg-purple-50"
              >
                Começar Gratuitamente
              </button>
            </div>
          </div>
        </div>
      </div>

      <Footer />
    </div>
  );
}

const challenges = [
  {
    icon: Brain,
    title: 'Dificuldade de Concentração',
    description: 'Crianças têm dificuldade em manter o foco em métodos tradicionais de leitura.'
  },
  {
    icon: BookOpen,
    title: 'Falta de Engajamento',
    description: 'Livros convencionais nem sempre capturam a imaginação das crianças modernas.'
  },
  {
    icon: Target,
    title: 'Progresso Lento',
    description: 'Pais têm dificuldade em acompanhar e estimular o desenvolvimento da leitura.'
  }
];

const benefits = [
  {
    icon: Wand2,
    title: "Personalização por IA",
    description: "Histórias únicas criadas especialmente para cada criança"
  },
  {
    icon: Star,
    title: "Monitoramento Educacional",
    description: "Acompanhe o progresso com métricas claras e objetivas"
  },
  {
    icon: Shield,
    title: "Segurança de Conteúdo",
    description: "Ambiente seguro e controlado para o aprendizado"
  },
  {
    icon: Sparkles,
    title: "Engajamento Garantido",
    description: "Histórias que prendem a atenção e estimulam a imaginação"
  }
];

const magicSteps = [
  {
    title: 'Escolha do Tema',
    description: 'Selecione entre diversos temas educativos que despertam o interesse do seu filho.'
  },
  {
    title: 'Personalização Mágica',
    description: 'Crie personagens que se conectam com a realidade e interesses da criança.'
  },
  {
    title: 'Geração da História',
    description: 'Nossa IA cria uma narrativa única, adaptada ao nível de leitura do seu filho.'
  },
  {
    title: 'Aventura Educativa',
    description: 'Acompanhe o progresso enquanto seu filho se diverte aprendendo.'
  }
];

const comparisonData = [
  {
    title: 'Tempo & Diversão',
    without: [
      'Horas procurando conteúdo educativo adequado',
      'Crianças entediadas com leituras tradicionais',
      'Histórias que não capturam a imaginação',
      'Dificuldade em acompanhar o progresso'
    ],
    with: [
      'Histórias mágicas personalizadas em minutos',
      'Crianças fascinadas por aventuras únicas',
      'Mundos mágicos que educam e encantam',
      'Portal mágico de acompanhamento do progresso'
    ]
  },
  {
    title: 'Qualidade do Aprendizado',
    without: [
      'Conteúdo genérico e previsível',
      'Falta de conexão emocional com a leitura',
      'Dificuldade em manter o interesse',
      'Aprendizado fragmentado'
    ],
    with: [
      'Histórias que evoluem com cada criança',
      'Conexão emocional com personagens únicos',
      'Aventuras que mesclam diversão e educação',
      'Jornada de aprendizado mágica e integrada'
    ]
  },
  {
    title: 'Resultados',
    without: [
      'Progresso lento e desmotivador',
      'Resistência à leitura e aprendizado',
      'Rotina de estudos cansativa',
      'Pais preocupados com desenvolvimento'
    ],
    with: [
      'Evolução visível e empolgante',
      'Amor natural pela leitura e conhecimento',
      'Aventuras diárias de aprendizado',
      'Pais confiantes no desenvolvimento mágico'
    ]
  }
];

const detailedBenefits = [
  {
    icon: Wand2,
    title: 'Histórias Personalizadas',
    description: 'Narrativas únicas que se adaptam aos interesses e nível de leitura do seu filho.'
  },
  {
    icon: Star,
    title: 'Aprendizado Divertido',
    description: 'Transformamos o processo de leitura em uma aventura mágica e envolvente.'
  },
  {
    icon: Shield,
    title: 'Ambiente Seguro',
    description: 'Conteúdo apropriado para a idade e monitoramento constante do progresso.'
  },
  {
    icon: Sparkles,
    title: 'Recompensas Mágicas',
    description: 'Sistema de conquistas que motiva e celebra o progresso da criança.'
  },
  {
    icon: ScrollText,
    title: 'Relatórios Detalhados',
    description: 'Acompanhe o desenvolvimento da leitura com métricas claras e insights valiosos.'
  },
  {
    icon: Lock,
    title: 'Controle Parental',
    description: 'Defina limites, monitore o uso e mantenha-se informado sobre o progresso.'
  }
];

const testimonials = [
  {
    text: "Minha filha sempre teve dificuldade com leitura, mas desde que começamos a usar o Histórias Mágicas, ela não para de pedir para ler mais uma história!",
    name: "Ana Clara Silva",
    role: "Mãe da Sofia, 8 anos",
    image: "/images/testimonial-1.webp",
    magicMoment: "Sofia leu sua primeira história sozinha após 2 semanas"
  },
  {
    text: "As histórias personalizadas fizeram toda a diferença. Ver meu filho como protagonista das aventuras tornou a leitura muito mais envolvente.",
    name: "Pedro Henrique Santos",
    role: "Pai do Lucas, 7 anos",
    image: "/images/testimonial-2.webp",
    magicMoment: "Lucas aumentou seu vocabulário em 40% em 3 meses"
  },
  {
    text: "O progresso que vimos em apenas algumas semanas foi incrível. A autoconfiança da minha filha na leitura cresceu enormemente.",
    name: "Mariana Costa",
    role: "Mãe da Laura, 9 anos",
    image: "/images/testimonial-3.webp",
    magicMoment: "Laura passou de leitora básica para avançada"
  }
];

const faqItems = [
  {
    question: "Como a plataforma auxilia no trabalho do professor?",
    answer: "O Histórias Mágicas oferece ferramentas que automatizam a avaliação da leitura, gerando relatórios detalhados sobre o progresso de cada aluno. Isso permite que você foque seu tempo no que mais importa: o desenvolvimento personalizado de cada estudante."
  },
  {
    question: "A plataforma se integra ao currículo escolar?",
    answer: "Sim, nossa plataforma foi desenvolvida alinhada à BNCC e pode ser facilmente integrada ao planejamento pedagógico. Oferecemos suporte para adaptar as atividades ao seu programa de ensino e objetivos específicos."
  },
  {
    question: "Como acompanhar o progresso da turma?",
    answer: "Através do painel do professor, você tem acesso a análises individuais e coletivas, identificando padrões de dificuldade, monitorando o progresso e recebendo sugestões de intervenção baseadas em evidências científicas."
  },
  {
    question: "Vocês oferecem treinamento para os professores?",
    answer: "Sim, oferecemos treinamento completo e suporte contínuo. Nosso programa inclui workshops online, materiais de apoio e consultoria pedagógica para garantir que você aproveite ao máximo os recursos da plataforma."
  },
  {
    question: "Como a plataforma lida com diferentes níveis de leitura na mesma turma?",
    answer: "Nossa tecnologia adaptativa personaliza automaticamente as atividades para cada aluno, permitindo que todos progridam em seu próprio ritmo. Você recebe sugestões específicas para apoiar alunos que precisam de mais atenção."
  },
  {
    question: "Quais recursos estão disponíveis para planejamento de aulas?",
    answer: "Disponibilizamos um banco de atividades, planos de aula modelo, e ferramentas de personalização que permitem adaptar o conteúdo às necessidades específicas da sua turma. Tudo isso alinhado às melhores práticas pedagógicas."
  }
];

const footerLinks = [
  {
    title: "Produto",
    links: [
      { text: "Recursos", href: "#recursos" },
      { text: "Preços", href: "#precos" },
      { text: "Como Funciona", href: "#como-funciona" },
      { text: "Histórias de Sucesso", href: "#testimoniais" }
    ]
  },
  {
    title: "Suporte",
    links: [
      { text: "Central de Ajuda", href: "#ajuda" },
      { text: "Contato", href: "#contato" },
      { text: "FAQ", href: "#faq" },
      { text: "Tutoriais", href: "#tutoriais" }
    ]
  },
  {
    title: "Legal",
    links: [
      { text: "Termos de Uso", href: "#termos" },
      { text: "Privacidade", href: "#privacidade" },
      { text: "Segurança", href: "#seguranca" },
      { text: "Cookies", href: "#cookies" }
    ]
  }
];

const socialLinks = [
  { icon: Facebook, href: "https://facebook.com/historias-magicas" },
  { icon: Instagram, href: "https://instagram.com/historias-magicas" },
  { icon: Twitter, href: "https://twitter.com/historias-magicas" },
  { icon: Youtube, href: "https://youtube.com/historias-magicas" }
];

const paymentMethods = [
  { name: "Cartão de Crédito", icon: "/icons/credit-card.svg" },
  { name: "Boleto", icon: "/icons/boleto.svg" },
  { name: "PIX", icon: "/icons/pix.svg" },
  { name: "PayPal", icon: "/icons/paypal.svg" }
];