clube67.com/frontend/app/page.tsx

'use client';

import Link from 'next/link';
import { motion } from 'framer-motion';
import { useAuth } from '@/lib/auth';

const features = [
    { icon: '🎯', title: 'Benefícios Exclusivos', desc: 'Descontos e vantagens em parceiros selecionados da sua região.' },
    { icon: '💳', title: 'Cartão Digital', desc: 'Apresente seu QR Code e resgate benefícios de forma rápida e segura.' },
    { icon: '🏢', title: 'Parceiros Premium', desc: 'Rede de empresas verificadas oferecendo os melhores descontos.' },
    { icon: '📊', title: 'Painel Completo', desc: 'Acompanhe seus resgates, economia e benefícios favoritos em tempo real.' },
];

const stats = [
    { value: '500+', label: 'Benefícios Ativos' },
    { value: '150+', label: 'Parceiros' },
    { value: '10k+', label: 'Membros' },
    { value: 'R$ 2M+', label: 'Economia Gerada' },
];

export default function HomePage() {
    const { user } = useAuth();

    return (
        <div className="min-h-screen bg-dark-950 overflow-hidden">
            {/* Header */}
            <header className="fixed top-0 left-0 right-0 z-50 glass-dark">
                <div className="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
                    <Link href="/" className="flex items-center gap-2">
                        <span className="text-2xl font-bold gradient-text">Clube67</span>
                    </Link>
                    <nav className="hidden md:flex items-center gap-8">
                        <a href="#features" className="text-dark-300 hover:text-white transition-colors text-sm font-medium">Recursos</a>
                        <a href="#partners" className="text-dark-300 hover:text-white transition-colors text-sm font-medium">Parceiros</a>
                        <a href="#pricing" className="text-dark-300 hover:text-white transition-colors text-sm font-medium">Planos</a>
                    </nav>
                    <div className="flex items-center gap-3">
                        {user ? (
                            <Link href="/dashboard" className="px-5 py-2.5 bg-brand-600 hover:bg-brand-700 rounded-xl text-sm font-semibold transition-all">
                                Painel
                            </Link>
                        ) : (
                            <>
                                <Link href="/login" className="px-5 py-2.5 text-dark-300 hover:text-white text-sm font-medium transition-colors">
                                    Entrar
                                </Link>
                                <Link href="/register" className="px-5 py-2.5 bg-brand-600 hover:bg-brand-700 rounded-xl text-sm font-semibold transition-all shadow-lg shadow-brand-600/25">
                                    Criar Conta
                                </Link>
                            </>
                        )}
                    </div>
                </div>
            </header>

            {/* Hero */}
            <section className="relative pt-32 pb-20 px-6">
                {/* Background orbs */}
                <div className="absolute top-20 left-10 w-72 h-72 bg-brand-600/20 rounded-full blur-[100px]" />
                <div className="absolute top-40 right-10 w-96 h-96 bg-purple-600/15 rounded-full blur-[120px]" />
                <div className="absolute bottom-10 left-1/3 w-80 h-80 bg-pink-600/10 rounded-full blur-[100px]" />

                <div className="max-w-5xl mx-auto text-center relative z-10">
                    <motion.div
                        initial={{ opacity: 0, y: 30 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.7 }}
                    >
                        <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full glass text-sm text-brand-400 font-medium mb-8">
                            <span className="w-2 h-2 bg-green-400 rounded-full animate-pulse" />
                            Plataforma ativa — novos parceiros toda semana
                        </div>
                        <h1 className="text-5xl md:text-7xl font-extrabold leading-tight mb-6">
                            Seus benefícios em
                            <br />
                            <span className="gradient-text">um só lugar</span>
                        </h1>
                        <p className="text-xl text-dark-400 max-w-2xl mx-auto mb-10 leading-relaxed">
                            Conectamos você a descontos exclusivos em saúde, educação, gastronomia e muito mais.
                            Tudo em uma plataforma moderna e segura.
                        </p>
                        <div className="flex items-center justify-center gap-4 flex-wrap">
                            <Link href="/register"
                                className="px-8 py-4 bg-brand-600 hover:bg-brand-500 rounded-2xl text-lg font-bold transition-all shadow-2xl shadow-brand-600/30 hover:shadow-brand-500/40 hover:-translate-y-0.5">
                                Começar Agora →
                            </Link>
                            <Link href="#features"
                                className="px-8 py-4 glass hover:bg-white/10 rounded-2xl text-lg font-medium transition-all">
                                Como Funciona
                            </Link>
                        </div>
                    </motion.div>
                </div>
            </section>

            {/* Stats */}
            <section className="py-16 px-6">
                <div className="max-w-5xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-6">
                    {stats.map((s, i) => (
                        <motion.div key={i} initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }}
                            transition={{ delay: i * 0.1 }} viewport={{ once: true }}
                            className="glass rounded-2xl p-6 text-center">
                            <div className="text-3xl md:text-4xl font-extrabold gradient-text">{s.value}</div>
                            <div className="text-dark-400 text-sm mt-1">{s.label}</div>
                        </motion.div>
                    ))}
                </div>
            </section>

            {/* Features */}
            <section id="features" className="py-20 px-6">
                <div className="max-w-6xl mx-auto">
                    <div className="text-center mb-16">
                        <h2 className="text-4xl font-bold mb-4">Tudo que você precisa</h2>
                        <p className="text-dark-400 text-lg">Uma plataforma completa de benefícios para você e sua família.</p>
                    </div>
                    <div className="grid md:grid-cols-2 gap-6">
                        {features.map((f, i) => (
                            <motion.div key={i} initial={{ opacity: 0, x: i % 2 === 0 ? -20 : 20 }}
                                whileInView={{ opacity: 1, x: 0 }} transition={{ delay: i * 0.1 }} viewport={{ once: true }}
                                className="glass rounded-2xl p-8 hover:bg-white/5 transition-all group cursor-default">
                                <div className="text-4xl mb-4">{f.icon}</div>
                                <h3 className="text-xl font-bold mb-2 group-hover:text-brand-400 transition-colors">{f.title}</h3>
                                <p className="text-dark-400 leading-relaxed">{f.desc}</p>
                            </motion.div>
                        ))}
                    </div>
                </div>
            </section>

            {/* CTA */}
            <section className="py-20 px-6">
                <div className="max-w-4xl mx-auto">
                    <motion.div initial={{ opacity: 0, scale: 0.95 }} whileInView={{ opacity: 1, scale: 1 }} viewport={{ once: true }}
                        className="relative overflow-hidden rounded-3xl p-12 md:p-16 text-center"
                        style={{ background: 'linear-gradient(135deg, #1469f5 0%, #7c3aed 50%, #ec4899 100%)' }}>
                        <div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iMiIgY3k9IjIiIHI9IjEiIGZpbGw9InJnYmEoMjU1LDI1NSwyNTUsMC4xKSIvPjwvc3ZnPg==')] opacity-30" />
                        <h2 className="text-4xl md:text-5xl font-extrabold mb-4 relative z-10">
                            Pronto para economizar?
                        </h2>
                        <p className="text-xl text-white/80 mb-8 relative z-10">
                            Junte-se a milhares de membros que já estão aproveitando benefícios exclusivos.
                        </p>
                        <Link href="/register"
                            className="relative z-10 inline-block px-10 py-4 bg-white text-brand-700 font-bold text-lg rounded-2xl hover:bg-gray-100 transition-all shadow-2xl hover:-translate-y-1">
                            Criar Conta Grátis
                        </Link>
                    </motion.div>
                </div>
            </section>

            {/* Footer */}
            <footer className="border-t border-dark-800 py-12 px-6">
                <div className="max-w-6xl mx-auto flex flex-col md:flex-row items-center justify-between gap-6">
                    <span className="text-xl font-bold gradient-text">Clube67</span>
                    <div className="flex items-center gap-6 text-sm text-dark-400">
                        <a href="#" className="hover:text-white transition-colors">Termos</a>
                        <a href="#" className="hover:text-white transition-colors">Privacidade</a>
                        <a href="#" className="hover:text-white transition-colors">Suporte</a>
                    </div>
                    <p className="text-sm text-dark-500">© 2026 Clube67. Todos os direitos reservados.</p>
                </div>
            </footer>
        </div>
    );
}