festa-magica-ia/src/pages/SuccessPage.tsx

import { CheckCircle, Clock, PlayCircle, Star, ArrowRight } from "lucide-react";
import Footer from "../components/Footer";

export default function SuccessPage() {
  return (
    <div className="min-h-screen bg-pink-50 text-indigo-900 selection:bg-pink-300 font-sans flex flex-col">
      <main className="flex-1 py-12 px-4 md:px-6">
        <div className="max-w-4xl mx-auto space-y-12">
          {/* Success Banner */}
          <section className="text-center bg-white rounded-3xl p-8 md:p-12 shadow-xl border border-pink-100">
            <CheckCircle className="w-20 h-20 text-emerald-500 mx-auto mb-6" />
            <h1 className="text-3xl md:text-5xl font-display font-bold text-indigo-950 mb-4">
              Pagamento Confirmado!
            </h1>
            <p className="text-lg text-indigo-600 md:text-xl max-w-2xl mx-auto">
              Seu acesso à plataforma Festa Mágica IA foi enviado para o seu e-mail. 
              Você já pode começar a criar o seu kit exclusivo!
            </p>
          </section>

          {/* Upsell Offer */}
          <section className="relative bg-gradient-to-br from-indigo-950 via-indigo-900 to-violet-900 rounded-3xl p-1 md:p-1.5 shadow-2xl overflow-hidden">
            {/* Animated border effect */}
            <div className="absolute inset-0 bg-gradient-to-r from-amber-400 via-pink-500 to-violet-400 animate-pulse opacity-50" />
            
            <div className="relative bg-white rounded-[1.4rem] md:rounded-[1.3rem] p-6 text-center shadow-inner">
              <div className="inline-flex items-center gap-2 bg-amber-100 text-amber-700 px-4 py-1.5 rounded-full text-sm font-bold tracking-wide uppercase mb-6">
                <Clock className="w-4 h-4" /> Oferta Única
              </div>
              
              <h2 className="text-2xl md:text-4xl font-display font-bold text-indigo-950 mb-4">
                Espere! Leve também o <span className="text-pink-600">Convite Animado</span>
              </h2>
              <p className="text-indigo-600 mb-8 max-w-2xl mx-auto text-lg md:text-xl">
                Quer impressionar ainda mais os convidados? Adicione ao seu pedido um convite em vídeo exclusivo com música, animações e o personagem do seu filho.
              </p>

              <div className="flex flex-col md:flex-row items-center justify-center gap-8 mb-8">
                {/* Mockup ou Imagem - usando um placeholder criativo */}
                <div className="relative w-full max-w-xs aspect-[9/16] bg-indigo-950 rounded-2xl p-2 shadow-2xl overflow-hidden border-4 border-indigo-100">
                  <img 
                    src="https://images.unsplash.com/photo-1541701494587-cb58502866ab?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" 
                    alt="Exemplo Convite Animado" 
                    className="w-full h-full object-cover rounded-xl opacity-80"
                  />
                  <div className="absolute inset-0 flex items-center justify-center">
                    <PlayCircle className="w-16 h-16 text-white/90 drop-shadow-xl" />
                  </div>
                </div>

                <div className="text-left space-y-6 flex-1 max-w-sm">
                  <ul className="space-y-4">
                    <li className="flex items-start gap-3">
                      <Star className="w-6 h-6 text-amber-400 shrink-0" fill="currentColor" />
                      <span className="font-medium text-indigo-900">Perfeito para enviar pelo WhatsApp</span>
                    </li>
                    <li className="flex items-start gap-3">
                      <Star className="w-6 h-6 text-amber-400 shrink-0" fill="currentColor" />
                      <span className="font-medium text-indigo-900">Música e efeitos sonoros super divertidos</span>
                    </li>
                    <li className="flex items-start gap-3">
                      <Star className="w-6 h-6 text-amber-400 shrink-0" fill="currentColor" />
                      <span className="font-medium text-indigo-900">Mantém a mesma temática escolhida da festa</span>
                    </li>
                  </ul>

                  <div className="pt-4 border-t border-indigo-50">
                    <div className="text-sm text-indigo-500 line-through font-medium">De R$ 49,90 por apenas</div>
                    <div className="text-4xl font-black text-indigo-950">R$ 19,90</div>
                  </div>

                  <div className="space-y-3">
                    <a 
                      href="#" 
                      className="group flex w-full justify-center md:inline-flex items-center gap-2 bg-gradient-to-r from-pink-500 to-violet-500 text-white px-8 py-4 rounded-full font-bold text-lg hover:-translate-y-1 hover:shadow-xl hover:shadow-pink-500/20 transition-all"
                    >
                      Adicionar ao Pedido <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
                    </a>
                    
                    <a 
                      href="#" 
                      className="block text-center text-sm font-medium text-indigo-400 hover:text-indigo-600 transition-colors uppercase tracking-wider"
                    >
                      Não, quero apenas o Kit Festa.
                    </a>
                  </div>
                </div>
              </div>
              
            </div>
          </section>
        </div>
      </main>
      <Footer />
    </div>
  );
}