import React from 'react';
import { ArrowRight, BookOpen, Brain, Target, Clock, Shield, Check, X } from 'lucide-react';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
import { useNavigate } from 'react-router-dom';
import { Footer } from '@/components/ui/footer';
import { PlanForParents } from '@/components/ui/plan-for-parents';

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

  return (
    <div className="min-h-screen bg-gradient-to-b from-purple-50 via-white to-purple-50">
      {/* 1. Hero Section */}
      <section className="relative overflow-hidden">
        <div className="absolute inset-0 bg-[url('/patterns/grid.svg')] opacity-5" />
        <div className="px-4 py-24 mx-auto max-w-7xl relative">
          <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">
                Transforme a Leitura do Seu Filho em uma
                <span className="bg-gradient-to-r from-purple-600 to-indigo-600 bg-clip-text text-transparent"> 
                  Jornada Mágica
                </span>
              </h1>
              
              <p className="text-xl text-gray-600 leading-relaxed">
                Uma plataforma educacional que combina tecnologia e pedagogia para 
                desenvolver habilidades essenciais de leitura de forma divertida e envolvente.
              </p>

              <div className="flex gap-4">
                <button
                  onClick={() => navigate('/register/parent')}
                  className="px-8 py-4 bg-gradient-to-r from-purple-600 to-indigo-600 text-white rounded-xl 
                    hover:from-purple-700 hover:to-indigo-700 transform hover:scale-105 transition-all shadow-lg"
                >
                  Começar Gratuitamente
                  <ArrowRight className="inline-block ml-2 h-5 w-5" />
                </button>
                
                <button
                  onClick={() => navigate('/demo')}
                  className="px-8 py-4 border-2 border-purple-600 text-purple-600 rounded-xl 
                    hover:bg-purple-50 transform hover:scale-105 transition-all"
                >
                  Ver Demonstração
                </button>
              </div>
            </div>

            <div className="flex-1">
              <div className="relative">
                <div className="absolute -inset-4 bg-gradient-to-r from-purple-600 to-indigo-600 rounded-2xl blur-lg opacity-20" />
                <img
                  src="/images/reading-kid.webp"
                  alt="Criança lendo com entusiasmo"
                  className="relative rounded-2xl shadow-2xl transform hover:scale-[1.02] transition-transform"
                />
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* 2. Por que escolher */}
      <section className="px-4 py-24 bg-white relative overflow-hidden">
        <div className="absolute inset-0 bg-[url('/patterns/dots.svg')] opacity-5" />
        <div className="mx-auto max-w-7xl relative">
          <h2 className="text-3xl font-bold text-center text-gray-900 mb-16">
            Por que escolher o Histórias Mágicas?
          </h2>

          <div className="grid md:grid-cols-3 gap-8">
            <div className="p-6 bg-purple-50 rounded-xl">
              <BookOpen className="h-12 w-12 text-purple-600 mb-4" />
              <h3 className="text-xl font-bold text-gray-900 mb-2">
                Leitura Personalizada
              </h3>
              <p className="text-gray-600">
                Histórias adaptadas ao nível e interesses do seu filho, 
                garantindo engajamento e progresso contínuo.
              </p>
            </div>

            <div className="p-6 bg-purple-50 rounded-xl">
              <Brain className="h-12 w-12 text-purple-600 mb-4" />
              <h3 className="text-xl font-bold text-gray-900 mb-2">
                Análise em Tempo Real
              </h3>
              <p className="text-gray-600">
                Feedback instantâneo sobre fluência, compreensão e 
                pronúncia para identificar áreas de melhoria.
              </p>
            </div>

            <div className="p-6 bg-purple-50 rounded-xl">
              <Target className="h-12 w-12 text-purple-600 mb-4" />
              <h3 className="text-xl font-bold text-gray-900 mb-2">
                Progresso Mensurável
              </h3>
              <p className="text-gray-600">
                Acompanhe o desenvolvimento do seu filho com métricas 
                claras e relatórios detalhados.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* 3. Como Funciona */}
      <section className="px-4 py-24">
        <div className="mx-auto max-w-7xl">
          <h2 className="text-3xl font-bold text-center text-gray-900 mb-16">
            Como Funciona
          </h2>

          <div className="grid md:grid-cols-2 gap-12 items-center">
            <div className="space-y-8">
              <div className="flex gap-4">
                <div className="flex-shrink-0 w-8 h-8 bg-purple-600 text-white rounded-full flex items-center justify-center">
                  1
                </div>
                <div>
                  <h3 className="text-xl font-bold text-gray-900 mb-2">
                    Escolha uma História
                  </h3>
                  <p className="text-gray-600">
                    Biblioteca diversificada com conteúdo educativo e adequado 
                    para cada idade e nível de leitura.
                  </p>
                </div>
              </div>

              <div className="flex gap-4">
                <div className="flex-shrink-0 w-8 h-8 bg-purple-600 text-white rounded-full flex items-center justify-center">
                  2
                </div>
                <div>
                  <h3 className="text-xl font-bold text-gray-900 mb-2">
                    Pratique a Leitura
                  </h3>
                  <p className="text-gray-600">
                    Interface interativa que incentiva a leitura em voz alta 
                    e fornece suporte quando necessário.
                  </p>
                </div>
              </div>

              <div className="flex gap-4">
                <div className="flex-shrink-0 w-8 h-8 bg-purple-600 text-white rounded-full flex items-center justify-center">
                  3
                </div>
                <div>
                  <h3 className="text-xl font-bold text-gray-900 mb-2">
                    Receba Feedback
                  </h3>
                  <p className="text-gray-600">
                    Análise detalhada do desempenho com sugestões 
                    personalizadas para melhorar.
                  </p>
                </div>
              </div>
            </div>

            <div className="bg-white p-8 rounded-xl shadow-xl">
              <img
                src="/images/app-demo.webp"
                alt="Demonstração da plataforma"
                className="rounded-lg"
              />
            </div>
          </div>
        </div>
      </section>

      {/* 4. Análise Detalhada */}
      <section className="px-4 py-24 bg-gray-50">
        <div className="mx-auto max-w-7xl">
          <h2 className="text-3xl font-bold text-center text-gray-900 mb-16">
            Análise Detalhada do Progresso
          </h2>

          <div className="grid md:grid-cols-2 gap-12">
            {/* Métricas */}
            <div className="bg-white p-8 rounded-xl shadow-sm">
              <h3 className="text-xl font-bold text-gray-900 mb-6">
                Exemplo de Análise de Leitura
              </h3>

              <div className="grid grid-cols-2 gap-6">
                <div className="space-y-2">
                  <p className="text-sm text-gray-500">Fluência</p>
                  <div className="flex items-center gap-2">
                    <div className="flex-1 h-4 bg-gray-100 rounded-full overflow-hidden">
                      <div className="h-full bg-green-500 rounded-full" style={{ width: '85%' }} />
                    </div>
                    <span className="text-sm font-medium">85%</span>
                  </div>
                </div>

                <div className="space-y-2">
                  <p className="text-sm text-gray-500">Pronúncia</p>
                  <div className="flex items-center gap-2">
                    <div className="flex-1 h-4 bg-gray-100 rounded-full overflow-hidden">
                      <div className="h-full bg-blue-500 rounded-full" style={{ width: '92%' }} />
                    </div>
                    <span className="text-sm font-medium">92%</span>
                  </div>
                </div>

                <div className="space-y-2">
                  <p className="text-sm text-gray-500">Compreensão</p>
                  <div className="flex items-center gap-2">
                    <div className="flex-1 h-4 bg-gray-100 rounded-full overflow-hidden">
                      <div className="h-full bg-purple-500 rounded-full" style={{ width: '88%' }} />
                    </div>
                    <span className="text-sm font-medium">88%</span>
                  </div>
                </div>

                <div className="space-y-2">
                  <p className="text-sm text-gray-500">Ritmo</p>
                  <div className="flex items-center gap-2">
                    <div className="flex-1 h-4 bg-gray-100 rounded-full overflow-hidden">
                      <div className="h-full bg-yellow-500 rounded-full" style={{ width: '78%' }} />
                    </div>
                    <span className="text-sm font-medium">78%</span>
                  </div>
                </div>
              </div>

              <div className="mt-8 p-4 bg-purple-50 rounded-lg">
                <h4 className="font-medium text-purple-900 mb-2">Sugestões de Melhoria</h4>
                <ul className="text-sm text-purple-700 space-y-2">
                  <li>• Praticar palavras mais complexas</li>
                  <li>• Manter ritmo constante durante a leitura</li>
                  <li>• Fazer pausas adequadas na pontuação</li>
                </ul>
              </div>
            </div>

            {/* Gráfico */}
            <div className="bg-white p-8 rounded-xl shadow-sm">
              <h3 className="text-xl font-bold text-gray-900 mb-6">
                Evolução da Leitura
              </h3>

              <div className="h-[300px]">
                <ResponsiveContainer width="100%" height="100%">
                  <LineChart
                    data={progressData}
                    margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
                  >
                    <CartesianGrid strokeDasharray="3 3" />
                    <XAxis dataKey="month" />
                    <YAxis />
                    <Tooltip />
                    <Line 
                      type="monotone" 
                      dataKey="fluency" 
                      stroke="#8b5cf6" 
                      strokeWidth={2}
                      name="Fluência"
                    />
                    <Line 
                      type="monotone" 
                      dataKey="comprehension" 
                      stroke="#10b981" 
                      strokeWidth={2}
                      name="Compreensão"
                    />
                  </LineChart>
                </ResponsiveContainer>
              </div>
            </div>
          </div>
        </div>
      </section>



      {/* 5. A Diferença que Faz */}
      <section className="px-4 py-24">
        <div className="mx-auto max-w-7xl">
          <h2 className="text-3xl font-bold text-center text-gray-900 mb-16">
            A Diferença que Faz
          </h2>

          <div className="grid md:grid-cols-2 gap-8">
            {/* Sem o Histórias Mágicas */}
            <div className="p-8 bg-gray-50 rounded-xl">
              <h3 className="text-xl font-bold text-gray-900 mb-6 flex items-center gap-2">
                <X className="text-red-500" />
                Sem o Histórias Mágicas
              </h3>

              <ul className="space-y-4">
                <li className="flex items-start gap-2">
                  <X className="h-5 w-5 text-red-500 flex-shrink-0 mt-1" />
                  <span className="text-gray-600">
                    Leitura monótona e desmotivadora
                  </span>
                </li>
                <li className="flex items-start gap-2">
                  <X className="h-5 w-5 text-red-500 flex-shrink-0 mt-1" />
                  <span className="text-gray-600">
                    Sem feedback sobre o progresso
                  </span>
                </li>
                <li className="flex items-start gap-2">
                  <X className="h-5 w-5 text-red-500 flex-shrink-0 mt-1" />
                  <span className="text-gray-600">
                    Dificuldade em manter consistência
                  </span>
                </li>
                <li className="flex items-start gap-2">
                  <X className="h-5 w-5 text-red-500 flex-shrink-0 mt-1" />
                  <span className="text-gray-600">
                    Erros passam despercebidos
                  </span>
                </li>
                <li className="flex items-start gap-2">
                  <X className="h-5 w-5 text-red-500 flex-shrink-0 mt-1" />
                  <span className="text-gray-600">
                    Falta de direcionamento pedagógico
                  </span>
                </li>
              </ul>
            </div>

            {/* Com o Histórias Mágicas */}
            <div className="p-8 bg-purple-50 rounded-xl">
              <h3 className="text-xl font-bold text-gray-900 mb-6 flex items-center gap-2">
                <Check className="text-green-500" />
                Com o Histórias Mágicas
              </h3>

              <ul className="space-y-4">
                <li className="flex items-start gap-2">
                  <Check className="h-5 w-5 text-green-500 flex-shrink-0 mt-1" />
                  <span className="text-gray-600">
                    Histórias interativas e envolventes
                  </span>
                </li>
                <li className="flex items-start gap-2">
                  <Check className="h-5 w-5 text-green-500 flex-shrink-0 mt-1" />
                  <span className="text-gray-600">
                    Análise detalhada do desempenho
                  </span>
                </li>
                <li className="flex items-start gap-2">
                  <Check className="h-5 w-5 text-green-500 flex-shrink-0 mt-1" />
                  <span className="text-gray-600">
                    Gamificação que incentiva a prática diária
                  </span>
                </li>
                <li className="flex items-start gap-2">
                  <Check className="h-5 w-5 text-green-500 flex-shrink-0 mt-1" />
                  <span className="text-gray-600">
                    Correção em tempo real e sugestões
                  </span>
                </li>
                <li className="flex items-start gap-2">
                  <Check className="h-5 w-5 text-green-500 flex-shrink-0 mt-1" />
                  <span className="text-gray-600">
                    Acompanhamento pedagógico personalizado
                  </span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* 6. O que os Pais Dizem */}
      <section className="px-4 py-24 bg-purple-50">
        <div className="mx-auto max-w-7xl">
          <h2 className="text-3xl font-bold text-center text-gray-900 mb-16">
            O Que os Pais Dizem
          </h2>

          <div className="grid md:grid-cols-3 gap-8">
            {testimonials.map((testimonial, index) => (
              <div key={index} className="bg-white p-6 rounded-xl shadow-sm">
                <p className="text-gray-600 mb-4">"{testimonial.text}"</p>
                <div className="flex items-center gap-4">
                  <img
                    src={testimonial.avatar}
                    alt={testimonial.name}
                    className="w-12 h-12 rounded-full"
                  />
                  <div>
                    <p className="font-medium text-gray-900">{testimonial.name}</p>
                    <p className="text-sm text-gray-500">{testimonial.role}</p>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 5. Planos */}
      <PlanForParents />

      {/* 7. CTA Final */}
      <section className="px-4 py-24 relative overflow-hidden">
        <div className="absolute inset-0 bg-gradient-to-b from-purple-50 to-purple-100 opacity-50" />
        <div className="mx-auto max-w-3xl text-center relative">
          <h2 className="text-5xl font-bold text-gray-900 mb-8 leading-tight">
            Comece a Jornada de Leitura do Seu Filho
            <span className="bg-gradient-to-r from-purple-600 to-indigo-600 bg-clip-text text-transparent"> 
              Hoje
            </span>
          </h2>
          
          <p className="text-xl text-gray-600 mb-12 leading-relaxed">
            Junte-se a milhares de pais que já transformaram a experiência 
            de leitura de seus filhos com o Histórias Mágicas.
          </p>

          <button
            onClick={() => navigate('/register/parent')}
            className="px-10 py-5 bg-gradient-to-r from-purple-600 to-indigo-600 text-white text-lg 
              rounded-xl hover:from-purple-700 hover:to-indigo-700 transform hover:scale-105 
              transition-all shadow-lg"
          >
            Criar Conta Gratuita
            <ArrowRight className="inline-block ml-2 h-6 w-6" />
          </button>
        </div>
      </section>

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

const testimonials = [
  {
    text: "Minha filha melhorou muito sua leitura em apenas 3 meses. Ela adora as histórias e sempre pede para ler mais!",
    name: "Ana Silva",
    role: "Mãe da Maria, 8 anos",
    avatar: "/avatars/parent-1.webp"
  },
  {
    text: "O feedback em tempo real ajuda muito a identificar onde meu filho precisa melhorar. É como ter um professor particular.",
    name: "Carlos Santos",
    role: "Pai do Pedro, 10 anos",
    avatar: "/avatars/parent-2.webp"
  },
  {
    text: "As histórias são envolventes e educativas. É ótimo ver meu filho animado para ler todos os dias.",
    name: "Juliana Costa",
    role: "Mãe do Lucas, 7 anos",
    avatar: "/avatars/parent-3.webp"
  }
];

const progressData = [
  { month: 'Jan', fluency: 45, comprehension: 40 },
  { month: 'Fev', fluency: 52, comprehension: 48 },
  { month: 'Mar', fluency: 58, comprehension: 55 },
  { month: 'Abr', fluency: 65, comprehension: 62 },
  { month: 'Mai', fluency: 75, comprehension: 70 },
  { month: 'Jun', fluency: 85, comprehension: 82 }
];