import { Button } from "@/components/ui/button";
import { CheckCircle2, Zap, Award, Clock, ShoppingCart, Star, Shield, ChevronLeft, ChevronRight } from "lucide-react";
import { useState, useEffect } from "react";

/**
 * Design Philosophy: Elegância Educativa
 * - Paleta: Azul profundo (#1E3A8A) + Amarelo quente (#FCD34D) + Verde (#10B981)
 * - Layout: Cascata assimétrica com espaçamento generoso
 * - Tipografia: Poppins em camadas (display, heading, body)
 * - Interação: Hover effects sutis e transições fluidas
 */

const PURCHASE_LINK = "https://pay.cakto.com.br/3ddue35_696723";

interface BenefitItem {
  text: string;
  icon: "check" | "zap" | "award";
}

const benefits: BenefitItem[] = [
  { text: "Economize horas de planejamento", icon: "zap" },
  { text: "Sequência didática organizada", icon: "check" },
  { text: "Melhore o traçado dos alunos", icon: "award" },
  { text: "Fortalece a coordenação motora ganhando segurança", icon: "check" },
  { text: "Aplicação imediata em sala ou em casa", icon: "check" },
];

const contents = [
  "Caderno completo de Letra Cursiva",
  "Treino de Letra Script e Bastão",
  "Palavras, frases e textos progressivos",
  "Treinando o alfabeto",
  "Fichas de leitura organizadas",
  "Treino completo de números",
];

interface Testimonial {
  name: string;
  role: string;
  content: string;
  rating: number;
  image?: string;
}

const testimonials: Testimonial[] = [
  {
    name: "Professora Maria Silva",
    role: "Professora de Educação Infantil",
    content:
      "Esse material mudou completamente minha forma de ensinar caligrafia! As crianças evoluem muito mais rápido com a sequência didática bem organizada. Já recomendei para todas as colegas da minha escola.",
    rating: 5,
    image: "https://private-us-east-1.manuscdn.com/sessionFile/zdmbkDzs96MJEzDutA9ZZQ/sandbox/ugj607k1SJsT6bidLfESCZ-img-1_1770847320000_na1fn_dGVzdGltb25pYWwtMS1jYXN1YWw.jpg?x-oss-process=image/resize,w_1920,h_1920/format,webp/quality,q_80&Expires=1798761600&Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9wcml2YXRlLXVzLWVhc3QtMS5tYW51c2Nkbi5jb20vc2Vzc2lvbkZpbGUvemRtYmtEenM5Nk1KRXpEdXRBOVpaUS9zYW5kYm94L3VnajYwN2sxU0pzVDZiaWRMZkVTQ1otaW1nLTFfMTc3MDg0NzMyMDAwMF9uYTFmbl9kR1Z6ZEdsdGIyNXBZV3d0TVMxallYTjFZV3cuanBnP3gtb3NzLXByb2Nlc3M9aW1hZ2UvcmVzaXplLHdfMTkyMCxoXzE5MjAvZm9ybWF0LHdlYnAvcXVhbGl0eSxxXzgwIiwiQ29uZGl0aW9uIjp7IkRhdGVMZXNzVGhhbiI6eyJBV1M6RXBvY2hUaW1lIjoxNzk4NzYxNjAwfX19XX0_&Key-Pair-Id=K2HSFNDJXOU9YS&Signature=YP0NKlliHZtOPnqOGOEzL81eRRpbgj29oS5XIt309tcX1qTabJBUx08trHwj23CKk9H5yQ2cpHNgDgCNqiOos4eupWo7wHO7XNRP8-nUe3QkxKWMk-ejt8hVwR3bJo5mAmbJqaYOc3TpCq3RwdG4qlYnvyAubgTgI3yy4H~QyW3-SzLZRJTwzDMhKfBogidzCSqmRPrhqfrgkl3DHMhJozmPeR9NsA7m49Lq1XLSoi65MJqLFIovWyqtnMYHVvVNkgQ~herdWAjMlXH6c7z-LWZXCw1~BCO4PSo-3VZCaSdr7y0IbhYQHqENmuEyIockBusBQWDERodCCvMd2eKFfQ__",
  },
  {
    name: "Mãe Juliana Costa",
    role: "Mãe de 2 filhos",
    content:
      "Meu filho tinha muita dificuldade com a letra cursiva e estava ficando frustrado. Após a aplicação do material, ele começou a melhorar em apenas 2 semanas! Ele é claro, progressivo e muito bem pensado.",
    rating: 5,
    image: "https://private-us-east-1.manuscdn.com/sessionFile/zdmbkDzs96MJEzDutA9ZZQ/sandbox/ugj607k1SJsT6bidLfESCZ-img-2_1770847323000_na1fn_dGVzdGltb25pYWwtMi1jYXN1YWw.jpg?x-oss-process=image/resize,w_1920,h_1920/format,webp/quality,q_80&Expires=1798761600&Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9wcml2YXRlLXVzLWVhc3QtMS5tYW51c2Nkbi5jb20vc2Vzc2lvbkZpbGUvemRtYmtEenM5Nk1KRXpEdXRBOVpaUS9zYW5kYm94L3VnajYwN2sxU0pzVDZiaWRMZkVTQ1otaW1nLTJfMTc3MDg0NzMyMzAwMF9uYTFmbl9kR1Z6ZEdsdGIyNXBZV3d0TWkxallYTjFZV3cuanBnP3gtb3NzLXByb2Nlc3M9aW1hZ2UvcmVzaXplLHdfMTkyMCxoXzE5MjAvZm9ybWF0LHdlYnAvcXVhbGl0eSxxXzgwIiwiQ29uZGl0aW9uIjp7IkRhdGVMZXNzVGhhbiI6eyJBV1M6RXBvY2hUaW1lIjoxNzk4NzYxNjAwfX19XX0_&Key-Pair-Id=K2HSFNDJXOU9YS&Signature=HlF44L3HVpchV9Ax2uAM1dd4ieDIUZxzTg5HmLN45oVmboIJq7ROThRCto7b5huSLTnUF1eRcT2xGtAkRmuj2~eFJCbhXQSzVO~W16PXRLPb-FsPSVrrCYqQtB9l0JEGY3VHl5fANVDT5QIDRRPHUpPFkZnGg2WvrogoGq~rsYMJUZGgfmRESLuK2fA5BTR4CGNWN22wt96IsombKF4Ph2zkWsKyWmL~QkFEwG9cbrNzflPgyd1-rN45c9HH2WBHVOQx5HtzQcA2aqbI5IwiU4xP7alJcRXoXnpQgNlPEfGmYaXW~iFfmowIC3lk-zJGAfPS5fs1R7Ox5ayf76At5g__",
  },
  {
    name: "Professor Carlos Mendes",
    role: "Professor de 1º e 2º ano",
    content:
      "Excelente custo-benefício! Páginas prontas para usar, economizei horas de planejamento. Meus alunos estão com muito mais segurança na escrita. Super recomendo!",
    rating: 5,
    image: "https://private-us-east-1.manuscdn.com/sessionFile/zdmbkDzs96MJEzDutA9ZZQ/sandbox/ugj607k1SJsT6bidLfESCZ-img-3_1770847324000_na1fn_dGVzdGltb25pYWwtMy1jYXN1YWw.jpg?x-oss-process=image/resize,w_1920,h_1920/format,webp/quality,q_80&Expires=1798761600&Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9wcml2YXRlLXVzLWVhc3QtMS5tYW51c2Nkbi5jb20vc2Vzc2lvbkZpbGUvemRtYmtEenM5Nk1KRXpEdXRBOVpaUS9zYW5kYm94L3VnajYwN2sxU0pzVDZiaWRMZkVTQ1otaW1nLTNfMTc3MDg0NzMyNDAwMF9uYTFmbl9kR1Z6ZEdsdGIyNXBZV3d0TXkxallYTjFZV3cuanBnP3gtb3NzLXByb2Nlc3M9aW1hZ2UvcmVzaXplLHdfMTkyMCxoXzE5MjAvZm9ybWF0LHdlYnAvcXVhbGl0eSxxXzgwIiwiQ29uZGl0aW9uIjp7IkRhdGVMZXNzVGhhbiI6eyJBV1M6RXBvY2hUaW1lIjoxNzk4NzYxNjAwfX19XX0_&Key-Pair-Id=K2HSFNDJXOU9YS&Signature=qBgDBEVGaYNe~1vw36hDqaMNPMUFEYVEoYOunaEvjww097VMCoMWdAcrCM6tkvkKojVaem7AHZZMnYzWk-hg3niLOQ5hf53m6z4D5RdkEgarLkHNPerrLPqaBxLY7n6xlkYHM5-92g0Pao4NjRPCgJ9mHEZM7CGH8AaEeO4wM9vr-eUu9UgmIzmXVWmNktyw5RFCnO19PHDPgPvzVoT8Vs40rW1NziYEFX2zihU82d-7FtLSdR~yV~qIjFfR7xY-sD804061PZZ-OtiZ9T~xh2h9SD8llVpbRuHVksffVR1nN~liGxLx4ks-Hv2snl2lb1jHwG25HXa8iWRAPwq5HA__",
  },
];

function BenefitIcon({ type }: { type: "check" | "zap" | "award" }) {
  switch (type) {
    case "check":
      return <CheckCircle2 className="w-5 h-5 text-green-600" />;
    case "zap":
      return <Zap className="w-5 h-5 text-blue-700" />;
    case "award":
      return <Award className="w-5 h-5 text-amber-500" />;
  }
}


function StarRating({ rating }: { rating: number }) {
  return (
    <div className="flex gap-1">
      {Array.from({ length: 5 }).map((_, i) => (
        <Star
          key={i}
          className={`w-4 h-4 ${
            i < rating
              ? "fill-amber-400 text-amber-400"
              : "text-slate-300"
          }`}
        />
      ))}
    </div>
  );
}

function SalesCounter() {
  const [salesCount, setSalesCount] = useState(0);

  useEffect(() => {
    const calculateDayProgress = () => {
      const now = new Date();
      const startOfDay = new Date(now.getFullYear(), now.getMonth(), now.getDate());
      const msInDay = 24 * 60 * 60 * 1000;
      const progress = (now.getTime() - startOfDay.getTime()) / msInDay;
      return progress;
    };

    const calculateSalesCount = () => {
      const progress = calculateDayProgress();
      const hour = progress * 24;
      
      let count = 0;
      if (hour < 6) {
        count = Math.round((hour / 6) * 10);
      } else if (hour < 12) {
        count = Math.round(10 + ((hour - 6) / 6) * 40);
      } else if (hour < 18) {
        count = Math.round(50 + ((hour - 12) / 6) * 50);
      } else if (hour < 24) {
        count = Math.round(100 - ((hour - 18) / 6) * 80);
      }
      
      const variation = Math.floor(Math.random() * 5) - 2;
      return Math.max(0, Math.min(100, count + variation));
    };

    setSalesCount(calculateSalesCount());
    const interval = setInterval(() => {
      setSalesCount(calculateSalesCount());
    }, 5000);

    return () => clearInterval(interval);
  }, []);

  return (
    <div className="bg-gradient-to-r from-green-50 to-emerald-50 border-2 border-green-300 rounded-lg p-6 mb-8">
      <div className="flex items-center gap-3 mb-4">
        <ShoppingCart className="w-6 h-6 text-green-600 animate-bounce" />
        <p className="text-green-700 font-bold text-lg">Pessoas Comprando Hoje!</p>
      </div>
      <div className="flex items-baseline gap-2">
        <span className="text-5xl font-bold text-green-600">{salesCount}</span>
      </div>
      <p className="text-sm text-green-700 font-medium mt-4">✓ Compra 100% segura • Acesso imediato</p>
    </div>
  );
}

function PDFFlipbook() {
  const [currentPage, setCurrentPage] = useState(1);
  const totalPages = 83;

  const goToPreviousPage = () => {
    if (currentPage > 1) {
      setCurrentPage(currentPage - 1);
    }
  };

  const goToNextPage = () => {
    if (currentPage < totalPages) {
      setCurrentPage(currentPage + 1);
    }
  };

  const getPageNumber = (page: number) => {
    return String(page).padStart(2, '0');
  };

  const getImageExtension = () => {
    // Usar WEBP para melhor compressão, com fallback para PNG
    return 'webp';
  };

  return (
    <div className="bg-white rounded-lg shadow-lg p-8 mb-12">
      <h3 className="text-2xl font-bold text-slate-900 mb-6 text-center">Veja uma Amostra do seu Material (para imprimir)</h3>
      <div className="flex flex-col items-center gap-6">
        {/* Flipbook Container */}
        <div className="w-full max-w-4xl bg-slate-100 rounded-lg overflow-hidden shadow-md">
          <div className="flex justify-center items-center bg-slate-50 p-4 min-h-96">
            <div className="flex gap-2 justify-center items-start w-full">
              {/* Left Page */}
              {currentPage > 1 && (
                <div className="flex-1 border-r-4 border-slate-300 pr-2">
                  <img
                    src={`/pdf-pages/page-${getPageNumber(currentPage - 1)}.${getImageExtension()}`}
                    alt={`Pagina ${currentPage - 1}`}
                    className="w-full h-auto rounded shadow-sm"
                  />
                </div>
              )}
              {/* Right Page */}
              <div className="flex-1">
                <img
                  src={`/pdf-pages/page-${getPageNumber(currentPage)}.${getImageExtension()}`}
                  alt={`Pagina ${currentPage}`}
                  className="w-full h-auto rounded shadow-sm"
                />
              </div>
            </div>
          </div>
        </div>

        {/* Navigation Controls */}
        <div className="flex items-center justify-center gap-6 w-full flex-wrap">
          <button
            onClick={goToPreviousPage}
            disabled={currentPage === 1}
            className="flex items-center gap-2 px-4 py-2 bg-blue-700 hover:bg-blue-800 disabled:bg-slate-300 text-white font-semibold rounded-lg transition-colors"
          >
            <ChevronLeft className="w-5 h-5" />
            Anterior
          </button>

          <div className="text-center">
            <p className="text-slate-700 font-semibold">
              Pagina {currentPage} de {totalPages}
            </p>
            <p className="text-sm text-slate-600">Flipbook interativo - Navegue pelas paginas</p>
          </div>

          <button
            onClick={goToNextPage}
            disabled={currentPage >= totalPages}
            className="flex items-center gap-2 px-4 py-2 bg-blue-700 hover:bg-blue-800 disabled:bg-slate-300 text-white font-semibold rounded-lg transition-colors"
          >
            Proximo
            <ChevronRight className="w-5 h-5" />
          </button>
        </div>

        {/* Info Message */}
        <p className="text-center text-slate-600 text-sm mt-4" style={{fontSize: '18px'}}>
          Este é apenas um exemplo do material. Ele completo contem mais de 300 paginas de atividades estruturadas.
        </p>
      </div>
    </div>
  );
}

function GuaranteeSeals() {
  return (
    <div className="flex flex-col md:flex-row items-center justify-center gap-6 mt-8">
      {/* Premium Gold Guarantee Seal */}
      <div className="flex flex-col items-center gap-2">
        <img src="https://files.manuscdn.com/user_upload_by_module/session_file/310519663251489957/mLUnqXUadmZrLEoI.png" alt="Garantia de 7 Dias" className="w-32 h-32 object-contain drop-shadow-lg" />
        <p className="text-center text-sm font-semibold text-slate-700">Garantia de Reembolso</p>
      </div>

      {/* Risk-Free Badge */}
      <div className="flex flex-col items-center gap-2">
        <div className="bg-gradient-to-r from-amber-400 to-amber-500 rounded-full p-4 shadow-lg">
          <CheckCircle2 className="w-10 h-10 text-white" />
        </div>
        <p className="text-center text-sm font-semibold text-slate-700">Risco Zero</p>
      </div>

      {/* Instant Access Badge */}
      <div className="flex flex-col items-center gap-2">
        <div className="bg-gradient-to-r from-blue-500 to-blue-600 rounded-full p-4 shadow-lg">
          <Clock className="w-10 h-10 text-white" />
        </div>
        <p className="text-center text-sm font-semibold text-slate-700">Acesso Imediato</p>
      </div>
    </div>
  );
}

function TestimonialsSection() {
  return (
    <section className="py-16 px-4 md:px-8 bg-gradient-to-b from-white to-slate-50">
      <div className="max-w-4xl mx-auto">
        <h2 className="text-3xl font-bold text-slate-900 mb-4 text-center">O Que Dizem Nossos Clientes</h2>
        <p className="text-center text-slate-600 mb-12">Confira as experiências de professores e pais que já transformaram a aprendizagem de seus alunos.</p>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          {testimonials.map((testimonial, index) => (
            <div key={index} className="bg-white rounded-lg border-l-4 border-blue-700 p-6 shadow-md hover:shadow-lg transition-shadow">
              {testimonial.image && (
                <div className="mb-4 flex justify-center">
                  <img src={testimonial.image} alt={testimonial.name} className="w-20 h-20 rounded-full object-cover border-2 border-blue-700" />
                </div>
              )}
              <StarRating rating={testimonial.rating} />
              <p className="text-slate-700 italic my-4">"{testimonial.content}"</p>
              <p className="font-semibold text-slate-900">{testimonial.name}</p>
              <p className="text-sm text-slate-600">{testimonial.role}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

export default function Home() {
  const [hoveredButton, setHoveredButton] = useState<string | null>(null);

  return (
    <div className="min-h-screen" style={{backgroundColor: '#cadfff'}}>
      {/* Hero Section */}
      <section className="pt-16 pb-12 px-4 md:px-8">
        <div className="max-w-4xl mx-auto">
          <div className="flex flex-col md:flex-row items-start md:items-start gap-8">
            {/* Sabedu Kids Logo */}
            <div className="flex-shrink-0 hidden md:block">
              <img src="https://files.manuscdn.com/user_upload_by_module/session_file/310519663251489957/zOzaIHRfYlQQctAN.png" alt="Sabedu Kids" className="w-80 h-auto" />
            </div>
            
            {/* Title and Subtitle */}
            <div className="flex-1">
              <h1 className="text-4xl md:text-5xl font-bold text-slate-900 mb-6 leading-tight" style={{textShadow: '2px 2px 4px rgba(0, 0, 0, 0.1)'}}>
                Falta de tempo? Com este método, seus alunos evoluem da letra bastão para a cursiva de forma natural, progressiva e estruturada.
              </h1>
              <p className="text-lg md:text-xl text-slate-700 mb-8 leading-relaxed" style={{fontFamily: 'POPPINS', fontSize: '28px'}}>
                Material completo com + 300 páginas prontas para aplicar em sala ou em casa — organizado, didático e alinhado à <span className="font-semibold text-blue-700">BNCC</span>.
              </p>
            </div>
          </div>
          
          {/* Mobile Logo */}
          <div className="flex justify-center mt-8 mb-8 md:hidden">
            <img src="https://files.manuscdn.com/user_upload_by_module/session_file/310519663251489957/zOzaIHRfYlQQctAN.png" alt="Sabedu Kids" className="w-80 h-auto" />
          </div>

        </div>
      </section>

      {/* PDF Flipbook Section */}
      <section className="py-12 px-4 md:px-8" style={{backgroundColor: '#cadfff'}}>
        <div className="max-w-4xl mx-auto">
          <PDFFlipbook />
          
          {/* CTA Button after Flipbook */}
          <div className="text-center mt-8">
            <a
              href={PURCHASE_LINK}
              onMouseEnter={() => setHoveredButton("flipbook")}
              onMouseLeave={() => setHoveredButton(null)}
              className={`in
(Content truncated due to size limit. Use line ranges to read remaining content)