import React from ‘react’;

import { motion } from ‘framer-motion’;

import { Button } from ‘@/components/ui/button’;

import { Sparkles, ArrowRight } from ‘lucide-react’;

export default function HeroSection({ onCtaClick }) {

return (

<section className=”relative min-h-screen flex items-center justify-center overflow-hidden bg-black”>

{/* Efeitos de fundo decorativos */}

<div className=”absolute inset-0 overflow-hidden”>

<motion.div

initial={{ opacity: 0, scale: 0.8 }}

animate={{ opacity: 0.15, scale: 1 }}

transition={{ duration: 2, repeat: Infinity, repeatType: “reverse” }}

className=”absolute top-20 -left-20 w-96 h-96 rounded-full blur-3xl”

style={{ backgroundColor: ‘#F3E38A’ }}

/>

<motion.div

initial={{ opacity: 0, scale: 0.8 }}

animate={{ opacity: 0.15, scale: 1 }}

transition={{ duration: 2.5, repeat: Infinity, repeatType: “reverse”, delay: 0.5 }}

className=”absolute bottom-20 -right-20 w-96 h-96 rounded-full blur-3xl”

style={{ backgroundColor: ‘#DFAB58’ }}

/>

</div>

<div className=”relative z-10 container mx-auto px-4 py-20″>

<div className=”max-w-6xl mx-auto”>

<div className=”grid lg:grid-cols-2 gap-12 items-center”>

{/* Conteúdo à esquerda */}

<motion.div

initial={{ opacity: 0, y: 30 }}

animate={{ opacity: 1, y: 0 }}

transition={{ duration: 0.8 }}

className=”text-center lg:text-left”

>

<motion.div

initial={{ opacity: 0, scale: 0.9 }}

animate={{ opacity: 1, scale: 1 }}

transition={{ delay: 0.2, duration: 0.6 }}

className=”inline-flex items-center gap-2 px-4 py-2 backdrop-blur-sm rounded-full mb-6 shadow-lg”

style={{ backgroundColor: ‘rgba(253, 244, 219, 0.15)’ }}

>

<Sparkles className=”w-4 h-4″ style={{ color: ‘#F3E38A’ }} />

<span className=”text-sm font-medium” style={{ color: ‘#FDF4DB’ }}>Transformação em 7 dias</span>

</motion.div>

<motion.h1

initial={{ opacity: 0, y: 20 }}

animate={{ opacity: 1, y: 0 }}

transition={{ delay: 0.3, duration: 0.7 }}

className=”text-4xl md:text-5xl lg:text-6xl font-bold mb-6 leading-tight”

style={{ color: ‘#FDF4DB’ }}

>

Você se esforça, mas o dinheiro{‘ ‘}

<span className=”relative inline-block”>

<span className=”relative z-10″ style={{ color: ‘#F3E38A’ }}>

parece nunca acompanhar

</span>

</span>{‘ ‘}

seu empenho?

</motion.h1>

<motion.p

initial={{ opacity: 0, y: 20 }}

animate={{ opacity: 1, y: 0 }}

transition={{ delay: 0.4, duration: 0.7 }}

className=”text-lg md:text-xl mb-8 leading-relaxed”

style={{ color: ‘#EBCC75’ }}

>

Descubra como compreender e liberar os bloqueios que impedem o fluxo natural da prosperidade.

Uma jornada de reconexão e clareza para transformar sua relação com o dinheiro.

</motion.p>

<motion.div

initial={{ opacity: 0, y: 20 }}

animate={{ opacity: 1, y: 0 }}

transition={{ delay: 0.5, duration: 0.7 }}

className=”flex flex-col sm:flex-row gap-4 justify-center lg:justify-start”

>

<Button

onClick={onCtaClick}

size=”lg”

className=”font-semibold px-8 py-6 text-lg rounded-full shadow-2xl transition-all duration-300 group border-0″

style={{

backgroundColor: ‘#DA9B49’,

color: ‘#000000’

}}

onMouseEnter={(e) => e.currentTarget.style.backgroundColor = ‘#F3E38A’}

onMouseLeave={(e) => e.currentTarget.style.backgroundColor = ‘#DA9B49’}

>

Quero começar minha jornada de prosperidade

<ArrowRight className=”ml-2 w-5 h-5 group-hover:translate-x-1 transition-transform” />

</Button>

</motion.div>

<motion.p

initial={{ opacity: 0 }}

animate={{ opacity: 1 }}

transition={{ delay: 0.7, duration: 0.7 }}

className=”text-sm mt-6″

style={{ color: ‘#EBCC75’, opacity: 0.7 }}

>

✨ Acesso instantâneo • 🔒 Pagamento seguro • 📚 Garantia de 7 dias

</motion.p>

</motion.div>

{/* Imagem do eBook à direita */}

<motion.div

initial={{ opacity: 0, x: 30 }}

animate={{ opacity: 1, x: 0 }}

transition={{ delay: 0.4, duration: 0.8 }}

className=”relative”

>

<motion.div

animate={{ y: [0, -20, 0] }}

transition={{ duration: 4, repeat: Infinity, ease: “easeInOut” }}

className=”relative”

>

{/* Glow effect */}

<div

className=”absolute inset-0 rounded-3xl blur-3xl opacity-30 animate-pulse”

style={{ backgroundColor: ‘#EBCC75’ }}

/>

{/* Mockup do eBook */}

<div className=”relative rounded-3xl shadow-2xl p-8 backdrop-blur-sm” style={{ backgroundColor: ‘rgba(44, 41, 38, 0.5)’ }}>

<div className=”rounded-2xl aspect-[3/4] flex items-center justify-center overflow-hidden” style={{ backgroundColor: ‘#EBCC75’ }}>

<img

src=”https://images.unsplash.com/photo-1499244571948-7ccddb3583f1?w=600&q=80″

alt=”Código da Prosperidade Instantânea”

className=”w-full h-full object-cover”

/>

<div className=”absolute inset-0 flex flex-col items-center justify-end p-8″ style={{ background: ‘linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.4), transparent)’ }}>

<Sparkles className=”w-12 h-12 mb-4″ style={{ color: ‘#F3E38A’ }} />

<h3 className=”text-2xl font-bold text-center mb-2″ style={{ color: ‘#FDF4DB’ }}>

Código da Prosperidade Instantânea

</h3>

<p className=”text-center” style={{ color: ‘#EBCC75’ }}>Guia Prático de 7 Dias</p>

</div>

</div>

</div>

</motion.div>

</motion.div>

</div>

</div>

</div>

{/* Scroll indicator */}

<motion.div

initial={{ opacity: 0 }}

animate={{ opacity: 1 }}

transition={{ delay: 1.2 }}

className=”absolute bottom-8 left-1/2 transform -translate-x-1/2″

>

<motion.div

animate={{ y: [0, 10, 0] }}

transition={{ duration: 2, repeat: Infinity }}

className=”w-6 h-10 border-2 rounded-full flex justify-center pt-2″

style={{ borderColor: ‘#DA9B49’ }}

>

<div className=”w-1 h-2 rounded-full” style={{ backgroundColor: ‘#DA9B49’ }} />

</motion.div>

</motion.div>

</section>

);

}