import React from 'react';
import { useNavigate } from 'react-router-dom';
import {
  ArrowRight,
  BookOpen,
  Brain,
  CheckCircle,
  Clock,
  FileText,
  GraduationCap,
  Heart,
  LineChart,
  Lock,
  School,
  Search,
  Shield,
  Star,
  Users,
  X,
  Facebook,
  Instagram,
  Twitter,
  Youtube
} from 'lucide-react';
import { Footer } from '@/components/ui/footer';
import { PlanForSchools } from '@/components/ui/plan-for-schools';
import { FAQ } from '@/components/ui/faq';

// Meta tags e SEO
const meta = {
  title: 'Histórias Mágicas | Alfabetização Baseada em Evidências',
  description: 'Plataforma educacional que utiliza métodos cientificamente comprovados para alfabetização, combinando tecnologia e pedagogia baseada em evidências para resultados reais.',
  keywords: 'alfabetização, evidências científicas, educação baseada em ciência, phonics, consciência fonológica, literatura infantil',
  security: {
    contentSecurityPolicy: "default-src 'self'; img-src 'self' data: https:; script-src 'self'",
    strictTransportSecurity: 'max-age=31536000; includeSubDomains',
    xFrameOptions: 'DENY'
  }
};

export function EvidenceBased(): JSX.Element {
  const navigate = useNavigate();

  React.useEffect(() => {
    // Atualiza as meta tags
    document.title = meta.title;
    const metaDescription = document.querySelector('meta[name="description"]');
    if (metaDescription) {
      metaDescription.setAttribute('content', meta.description);
    }
  }, []);

  return (
    <div className="min-h-screen">
      {/* Hero Section */}
      <section className="relative overflow-hidden bg-gradient-to-b from-purple-50 via-white to-purple-50">
        <div className="absolute inset-0 bg-[url('/patterns/dots.svg')] opacity-5" />
        <div className="px-4 py-24 mx-auto max-w-7xl relative">
          {/* Reading Time */}
          <div className="absolute top-8 right-8 flex items-center gap-2 text-sm text-gray-500">
            <Clock className="h-4 w-4" />
            <span>Tempo de leitura: 7 minutos</span>
          </div>

          <div className="flex flex-col md:flex-row items-center gap-16">
            <div className="flex-1 space-y-8">
              <h1 className="text-6xl font-bold text-gray-900 leading-tight">
                Alfabetização
                <span className="block bg-gradient-to-r from-purple-600 to-blue-500 bg-clip-text text-transparent">
                  Baseada em Evidências
                </span>
              </h1>
              
              <p className="text-xl text-gray-600 leading-relaxed">
                Transforme a educação com métodos cientificamente comprovados. 
                Nossa plataforma combina tecnologia e pedagogia baseada em evidências 
                para resultados reais e mensuráveis.
              </p>

              <div className="flex gap-4">
                <button
                  onClick={() => navigate('/register')}
                  className="group px-8 py-4 bg-gradient-to-r from-purple-600 to-blue-500 
                    text-white rounded-xl hover:from-purple-700 hover:to-blue-600 
                    transform hover:scale-105 transition-all shadow-lg"
                >
                  Comece com Base na Ciência
                  <ArrowRight className="inline-block ml-2 h-5 w-5 
                    group-hover:translate-x-1 transition-transform" />
                </button>
              </div>

              {/* Social Proof */}
              <div className="flex gap-8 text-sm text-gray-600">
                <div className="flex items-center gap-2">
                  <Search className="h-5 w-5 text-purple-600" />
                  <span>Baseado em +50 estudos científicos</span>
                </div>
                <div className="flex items-center gap-2">
                  <Users className="h-5 w-5 text-blue-500" />
                  <span>+10.000 alunos beneficiados</span>
                </div>
              </div>
            </div>

            <div className="flex-1">
              <div className="relative">
                <div className="absolute -inset-4 bg-gradient-to-r from-purple-600 to-blue-500 
                  rounded-2xl blur-lg opacity-20" />
                <img
                  src="/images/evidence-based.webp"
                  alt="Crianças aprendendo com métodos científicos"
                  className="relative rounded-2xl shadow-2xl transform hover:scale-[1.02] 
                    transition-transform"
                />
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Problema & Solução */}
      <section className="px-4 py-24 bg-white">
        <div className="mx-auto max-w-7xl">
          <h2 className="text-4xl font-bold text-center text-gray-900 mb-16">
            O Problema da Alfabetização no Brasil
          </h2>

          <div className="grid md:grid-cols-2 gap-12">
            {/* Problema */}
            <div className="space-y-6">
              <h3 className="text-2xl font-bold text-red-600">O Cenário Atual</h3>
              <ul className="space-y-4">
                {problems.map((problem, index) => (
                  <li key={index} className="flex items-start gap-3">
                    <X className="h-5 w-5 text-red-500 flex-shrink-0 mt-1" />
                    <span className="text-gray-600">{problem}</span>
                  </li>
                ))}
              </ul>
            </div>

            {/* Solução */}
            <div className="space-y-6">
              <h3 className="text-2xl font-bold text-green-600">Nossa Solução Científica</h3>
              <ul className="space-y-4">
                {solutions.map((solution, index) => (
                  <li key={index} className="flex items-start gap-3">
                    <CheckCircle className="h-5 w-5 text-green-500 flex-shrink-0 mt-1" />
                    <span className="text-gray-600">{solution}</span>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* Métodos Científicos */}
      <section className="px-4 py-24 bg-gradient-to-br from-purple-50 to-blue-50">
        <div className="mx-auto max-w-7xl">
          <h2 className="text-4xl font-bold text-center text-gray-900 mb-16">
            Métodos Cientificamente Comprovados
          </h2>

          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            {scientificMethods.map((method, index) => (
              <div key={index} className="bg-white p-6 rounded-xl shadow-sm hover:shadow-md 
                transform hover:scale-105 transition-all">
                <div className="flex flex-col gap-4">
                  <div className="w-12 h-12 flex items-center justify-center 
                    bg-gradient-to-r from-purple-600 to-blue-500 rounded-full">
                    <method.icon className="h-6 w-6 text-white" />
                  </div>
                  <h3 className="text-xl font-bold text-gray-900">{method.title}</h3>
                  <p className="text-gray-600">{method.description}</p>
                  <div className="mt-4 p-3 bg-purple-50 rounded-lg">
                    <p className="text-sm text-purple-600">
                      <strong>Evidência:</strong> {method.evidence}
                    </p>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Comparação */}
      <section className="px-4 py-24 bg-white">
        <div className="mx-auto max-w-7xl">
          <h2 className="text-4xl font-bold text-center text-gray-900 mb-16">
            Evidências vs. Pseudociência
          </h2>

          <div className="grid md:grid-cols-2 gap-8">
            {/* Métodos Tradicionais */}
            <div className="p-8 bg-gray-50 rounded-xl border border-gray-200">
              <div className="flex items-center gap-3 mb-8">
                <div className="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center">
                  <X className="h-6 w-6 text-red-500" />
                </div>
                <h3 className="text-xl font-bold text-gray-900">
                  Métodos Sem Evidências
                </h3>
              </div>

              <ul className="space-y-4">
                {nonScientificMethods.map((method, index) => (
                  <li key={index} className="flex items-start gap-3">
                    <X className="h-5 w-5 text-red-500 flex-shrink-0 mt-1" />
                    <div>
                      <h4 className="font-bold text-gray-900">{method.title}</h4>
                      <p className="text-gray-600">{method.description}</p>
                    </div>
                  </li>
                ))}
              </ul>
            </div>

            {/* Métodos Baseados em Evidências */}
            <div className="p-8 bg-gradient-to-br from-purple-50 to-blue-50 rounded-xl 
              border-2 border-purple-200">
              <div className="flex items-center gap-3 mb-8">
                <div className="w-12 h-12 bg-gradient-to-r from-purple-600 to-blue-500 
                  rounded-full flex items-center justify-center">
                  <CheckCircle className="h-6 w-6 text-white" />
                </div>
                <h3 className="text-xl font-bold text-gray-900">
                  Métodos Científicos
                </h3>
              </div>

              <ul className="space-y-4">
                {scientificAdvantages.map((advantage, index) => (
                  <li key={index} className="flex items-start gap-3">
                    <CheckCircle className="h-5 w-5 text-green-500 flex-shrink-0 mt-1" />
                    <div>
                      <h4 className="font-bold text-gray-900">{advantage.title}</h4>
                      <p className="text-gray-600">{advantage.description}</p>
                    </div>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* Benefícios */}
      <section className="px-4 py-24 bg-gradient-to-br from-purple-50 to-blue-50">
        <div className="mx-auto max-w-7xl">
          <h2 className="text-4xl font-bold text-center text-gray-900 mb-16">
            Benefícios Comprovados
          </h2>

          <div className="grid lg:grid-cols-3 gap-8">
            {benefits.map((benefit, index) => (
              <div key={index} className="bg-white p-6 rounded-xl shadow-sm hover:shadow-md 
                transform hover:scale-105 transition-all">
                <div className="flex flex-col items-center text-center gap-4">
                  <div className="w-16 h-16 flex items-center justify-center 
                    bg-gradient-to-r from-purple-600 to-blue-500 rounded-full">
                    <benefit.icon className="h-8 w-8 text-white" />
                  </div>
                  <h3 className="text-xl font-bold text-gray-900">{benefit.title}</h3>
                  <p className="text-gray-600">{benefit.description}</p>
                  <div className="mt-4 p-3 bg-purple-50 rounded-lg w-full">
                    <p className="text-sm text-purple-600">
                      <strong>Resultado:</strong> {benefit.result}
                    </p>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Depoimentos */}
      <section className="px-4 py-24 bg-white">
        <div className="mx-auto max-w-7xl">
          <h2 className="text-4xl font-bold text-center text-gray-900 mb-16">
            Resultados Comprovados
          </h2>

          <div className="grid md:grid-cols-3 gap-8">
            {testimonials.map((testimonial, index) => (
              <div key={index} className="bg-gradient-to-br from-purple-50 to-blue-50 
                p-6 rounded-xl shadow-sm">
                <div className="flex flex-col gap-4">
                  <div className="flex items-center gap-4">
                    <img
                      src={testimonial.image}
                      alt={testimonial.name}
                      className="w-16 h-16 rounded-full object-cover"
                    />
                    <div>
                      <h3 className="font-bold text-gray-900">{testimonial.name}</h3>
                      <p className="text-sm text-gray-500">{testimonial.role}</p>
                    </div>
                  </div>
                  <p className="text-gray-600 italic">"{testimonial.text}"</p>
                  <div className="mt-4 p-3 bg-white rounded-lg">
                    <p className="text-sm text-purple-600">
                      <strong>Resultado:</strong> {testimonial.result}
                    </p>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Planos */}
      <PlanForSchools />

      {/* FAQ */}
      <FAQ
        title="Dúvidas Frequentes sobre Educação Baseada em Evidências"
        description="Entenda como nossa plataforma aplica métodos cientificamente comprovados"
        items={[
          {
            question: "O que é educação baseada em evidências?",
            answer: "Educação baseada em evidências é uma abordagem que utiliza métodos e práticas pedagógicas comprovadas por pesquisas científicas rigorosas. Em vez de seguir modismos ou teorias não testadas, baseamos nossas estratégias em estudos que demonstram resultados reais na aprendizagem."
          },
          {
            question: "Como vocês aplicam a ciência da leitura na prática?",
            answer: "Nossa plataforma incorpora os cinco pilares da alfabetização: consciência fonêmica, instrução fônica sistemática, fluência, vocabulário e compreensão. Cada atividade é cuidadosamente projetada para desenvolver estas habilidades de forma estruturada e progressiva."
          },
          {
            question: "Quais são as evidências que suportam seus métodos?",
            answer: "Nossos métodos são baseados em décadas de pesquisas em neurociência e psicologia cognitiva, incluindo estudos do National Reading Panel e pesquisas sobre desenvolvimento da leitura. Mantemos parcerias com universidades para validação contínua de nossa abordagem."
          },
          {
            question: "Como vocês medem o progresso dos alunos?",
            answer: "Utilizamos avaliações formativas contínuas e análise de dados em tempo real para monitorar o progresso individual. Nosso sistema coleta métricas específicas de fluência, precisão e compreensão, permitindo intervenções personalizadas baseadas em evidências."
          },
          {
            question: "Como a plataforma se adapta a diferentes níveis de aprendizado?",
            answer: "Nossa tecnologia utiliza algoritmos adaptativos baseados em pesquisas sobre diferenciação de ensino. O sistema ajusta automaticamente a dificuldade e o tipo de atividades com base no desempenho individual, garantindo que cada aluno progrida em seu próprio ritmo."
          },
          {
            question: "Qual é o papel do professor na plataforma?",
            answer: "Os professores são facilitadores essenciais do processo. Nossa plataforma fornece dados detalhados e sugestões de intervenção baseadas em evidências, permitindo que os professores tomem decisões pedagógicas informadas e personalizem o suporte para cada aluno."
          }
        ]}
      />

      {/* CTA Final */}
      <section className="px-4 py-24 bg-gradient-to-br from-purple-600 to-blue-500 text-white">
        <div className="mx-auto max-w-3xl text-center">
          <h2 className="text-4xl font-bold mb-8">
            Transforme a Educação com Base em Evidências
          </h2>
          
          <p className="text-xl opacity-90 mb-12">
            Junte-se a milhares de educadores que já descobriram o poder da ciência na educação
          </p>

          <button
            onClick={() => navigate('/register')}
            className="px-12 py-6 bg-white text-purple-600 rounded-xl text-xl font-bold
              hover:bg-gray-100 transform hover:scale-105 transition-all shadow-lg"
          >
            Comece Agora com Base na Ciência
            <ArrowRight className="inline-block ml-2 h-6 w-6" />
          </button>

          <div className="mt-8 flex justify-center gap-8">
            <div className="flex items-center gap-2">
              <Lock className="h-5 w-5" />
              <span className="text-sm">Ambiente Seguro</span>
            </div>
            <div className="flex items-center gap-2">
              <Shield className="h-5 w-5" />
              <span className="text-sm">Métodos Comprovados</span>
            </div>
            <div className="flex items-center gap-2">
              <Star className="h-5 w-5" />
              <span className="text-sm">Resultados Garantidos</span>
            </div>
          </div>
        </div>
      </section>

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

// Dados
const problems = [
  "54% das crianças não são plenamente alfabetizadas até o 3º ano",
  "Uso de métodos sem comprovação científica",
  "Falta de acompanhamento sistemático do progresso",
  "Desmotivação e frustração no processo de aprendizagem"
];

const solutions = [
  "Método fônico comprovado por estudos científicos",
  "Sistema de progressão baseado em evidências",
  "Acompanhamento detalhado com métricas reais",
  "Engajamento através de histórias personalizadas"
];

const scientificMethods = [
  {
    icon: BookOpen,
    title: "Método Fônico",
    description: "Ensino sistemático das relações entre letras e sons, comprovadamente eficaz.",
    evidence: "National Reading Panel (2000)"
  },
  {
    icon: Brain,
    title: "Consciência Fonológica",
    description: "Desenvolvimento estruturado da percepção dos sons da língua.",
    evidence: "Goswami & Bryant (1990)"
  },
  {
    icon: GraduationCap,
    title: "Literatura Infantil",
    description: "Uso de histórias para desenvolvimento da linguagem e compreensão.",
    evidence: "Mol & Bus (2011)"
  }
];

const nonScientificMethods = [
  {
    title: "Método Global",
    description: "Memorização de palavras inteiras sem compreensão fonológica"
  },
  {
    title: "Adivinhação de Palavras",
    description: "Uso de dicas contextuais em detrimento da decodificação"
  },
  {
    title: "Aprendizado Natural",
    description: "Espera pela descoberta espontânea sem instrução sistemática"
  }
];

const scientificAdvantages = [
  {
    title: "Progressão Sistemática",
    description: "Desenvolvimento gradual e estruturado das habilidades"
  },
  {
    title: "Resultados Mensuráveis",
    description: "Acompanhamento objetivo do progresso do aluno"
  },
  {
    title: "Base Neurológica",
    description: "Alinhado com o funcionamento do cérebro na leitura"
  }
];

const benefits = [
  {
    icon: LineChart,
    title: "Progresso Acelerado",
    description: "Desenvolvimento 40% mais rápido que métodos tradicionais",
    result: "85% dos alunos alfabetizados no tempo esperado"
  },
  {
    icon: Brain,
    title: "Compreensão Profunda",
    description: "Entendimento real do sistema alfabético",
    result: "93% de precisão na decodificação de palavras"
  },
  {
    icon: Heart,
    title: "Motivação Elevada",
    description: "Alunos engajados e confiantes",
    result: "95% de satisfação entre pais e professores"
  }
];

const testimonials = [
  {
    image: "/images/teacher-1.webp",
    name: "Profa. Maria Silva",
    role: "Professora há 15 anos",
    text: "Finalmente um método que realmente funciona! Os resultados são visíveis desde as primeiras semanas.",
    result: "Turma 100% alfabetizada em 8 meses"
  },
  {
    image: "/images/director-1.webp",
    name: "Dr. João Santos",
    role: "Diretor Pedagógico",
    text: "A diferença entre este método e os anteriores é a base científica sólida e os resultados consistentes.",
    result: "Melhoria de 60% nos índices de alfabetização"
  },
  {
    image: "/images/parent-1.webp",
    name: "Ana Costa",
    role: "Mãe de aluno",
    text: "Ver meu filho progredindo com confiança e entusiasmo é incrível. A diferença é notável!",
    result: "Filho lendo fluentemente em 6 meses"
  }
];

const plans = [
  {
    title: "Escola Iniciante",
    description: "Para escolas começando a transformação",
    price: "997",
    features: [
      "Até 100 alunos",
      "Método fônico estruturado",
      "Relatórios básicos",
      "Suporte por email"
    ]
  },
  {
    title: "Escola Transformadora",
    description: "Para escolas comprometidas",
    price: "1.997",
    features: [
      "Até 500 alunos",
      "Método fônico completo",
      "Relatórios avançados",
      "Suporte prioritário",
      "Treinamento da equipe",
      "Consultoria pedagógica"
    ]
  },
  {
    title: "Rede de Ensino",
    description: "Para redes de escolas",
    price: "4.997",
    features: [
      "Alunos ilimitados",
      "Sistema completo",
      "Relatórios personalizados",
      "Suporte 24/7",
      "Treinamento completo",
      "Consultoria dedicada"
    ]
  }
];

const faqItems = [
  {
    question: "Por que métodos baseados em evidências são superiores?",
    answer: "Métodos baseados em evidências são fundamentados em pesquisas científicas rigorosas, com resultados comprovados em diversos contextos educacionais."
  },
  {
    question: "Como é feito o acompanhamento do progresso?",
    answer: "Utilizamos métricas objetivas e avaliações sistemáticas, permitindo visualizar o progresso real de cada aluno em diferentes aspectos da alfabetização."
  },
  {
    question: "Qual é o papel da tecnologia no método?",
    answer: "A tecnologia atua como facilitadora, permitindo personalização do ensino, coleta de dados precisos e adaptação contínua às necessidades de cada aluno."
  },
  {
    question: "Como os professores são preparados?",
    answer: "Oferecemos treinamento completo baseado em evidências, com suporte contínuo e materiais estruturados para implementação eficaz do método."
  }
];

const footerLinks = [
  {
    title: "Produto",
    links: [
      { text: "Método Científico", href: "#metodo" },
      { text: "Resultados", href: "#resultados" },
      { text: "Planos", href: "#planos" },
      { text: "Cases", href: "#cases" }
    ]
  },
  {
    title: "Recursos",
    links: [
      { text: "Base Científica", href: "#ciencia" },
      { text: "Estudos", href: "#estudos" },
      { text: "Blog", href: "#blog" },
      { text: "Webinars", href: "#webinars" }
    ]
  },
  {
    title: "Empresa",
    links: [
      { text: "Sobre", href: "#sobre" },
      { text: "Contato", href: "#contato" },
      { text: "Carreiras", href: "#carreiras" },
      { text: "Imprensa", href: "#imprensa" }
    ]
  }
];

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