import Link from 'next/link'
import { Button } from '@/components/ui/button'
import { Heart, Users, Shield, MessageCircle, Calendar, Star } from 'lucide-react'

export default function HomePage() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-pink-50 via-purple-50 to-indigo-50 dark:from-gray-900 dark:via-purple-900 dark:to-pink-900">
      {/* Header */}
      <header className="fixed top-0 w-full bg-white/80 dark:bg-gray-900/80 backdrop-blur-md z-50 border-b">
        <div className="container mx-auto px-4 h-16 flex items-center justify-between">
          <Link href="/" className="flex items-center space-x-2">
            <Heart className="h-8 w-8 text-primary-500 fill-primary-500" />
            <span className="text-2xl font-bold bg-gradient-to-r from-primary-500 to-pink-600 bg-clip-text text-transparent">
              HotWives
            </span>
          </Link>
          
          <nav className="hidden md:flex items-center space-x-6">
            <Link href="/explore" className="hover:text-primary-500 transition">
              Explorar
            </Link>
            <Link href="/events" className="hover:text-primary-500 transition">
              Eventos
            </Link>
            <Link href="/about" className="hover:text-primary-500 transition">
              Sobre
            </Link>
          </nav>

          <div className="flex items-center space-x-4">
            <Link href="/login">
              <Button variant="ghost">Entrar</Button>
            </Link>
            <Link href="/register">
              <Button className="bg-primary-500 hover:bg-primary-600">
                Cadastrar
              </Button>
            </Link>
          </div>
        </div>
      </header>

      {/* Hero Section */}
      <section className="pt-32 pb-20 px-4">
        <div className="container mx-auto text-center">
          <h1 className="text-5xl md:text-7xl font-bold mb-6 bg-gradient-to-r from-primary-500 via-pink-500 to-purple-600 bg-clip-text text-transparent">
            Conecte-se com Casais<br />de Forma Segura
          </h1>
          <p className="text-xl md:text-2xl text-gray-600 dark:text-gray-300 mb-8 max-w-3xl mx-auto">
            A plataforma mais completa e discreta para casais que buscam novas experiências e conexões autênticas.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Link href="/register">
              <Button size="lg" className="bg-primary-500 hover:bg-primary-600 text-lg px-8 py-6">
                Começar Agora
              </Button>
            </Link>
            <Link href="/explore">
              <Button size="lg" variant="outline" className="text-lg px-8 py-6">
                Explorar Perfis
              </Button>
            </Link>
          </div>
        </div>
      </section>

      {/* Features */}
      <section className="py-20 px-4 bg-white/50 dark:bg-gray-800/50">
        <div className="container mx-auto">
          <h2 className="text-4xl font-bold text-center mb-16">
            Por que escolher o HotWives?
          </h2>
          
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            <div className="p-6 rounded-xl bg-white dark:bg-gray-900 shadow-lg hover:shadow-xl transition">
              <Users className="h-12 w-12 text-primary-500 mb-4" />
              <h3 className="text-xl font-bold mb-2">Perfis Verificados</h3>
              <p className="text-gray-600 dark:text-gray-400">
                Sistema de verificação rigoroso para garantir perfis autênticos e seguros.
              </p>
            </div>

            <div className="p-6 rounded-xl bg-white dark:bg-gray-900 shadow-lg hover:shadow-xl transition">
              <Shield className="h-12 w-12 text-primary-500 mb-4" />
              <h3 className="text-xl font-bold mb-2">Privacidade Total</h3>
              <p className="text-gray-600 dark:text-gray-400">
                Controle completo sobre quem pode ver suas fotos e informações pessoais.
              </p>
            </div>

            <div className="p-6 rounded-xl bg-white dark:bg-gray-900 shadow-lg hover:shadow-xl transition">
              <MessageCircle className="h-12 w-12 text-primary-500 mb-4" />
              <h3 className="text-xl font-bold mb-2">Chat em Tempo Real</h3>
              <p className="text-gray-600 dark:text-gray-400">
                Converse instantaneamente com outros casais de forma segura e privada.
              </p>
            </div>

            <div className="p-6 rounded-xl bg-white dark:bg-gray-900 shadow-lg hover:shadow-xl transition">
              <Calendar className="h-12 w-12 text-primary-500 mb-4" />
              <h3 className="text-xl font-bold mb-2">Eventos Exclusivos</h3>
              <p className="text-gray-600 dark:text-gray-400">
                Participe de eventos e encontros organizados pela comunidade.
              </p>
            </div>

            <div className="p-6 rounded-xl bg-white dark:bg-gray-900 shadow-lg hover:shadow-xl transition">
              <Star className="h-12 w-12 text-primary-500 mb-4" />
              <h3 className="text-xl font-bold mb-2">Busca Avançada</h3>
              <p className="text-gray-600 dark:text-gray-400">
                Encontre exatamente o que você procura com filtros inteligentes.
              </p>
            </div>

            <div className="p-6 rounded-xl bg-white dark:bg-gray-900 shadow-lg hover:shadow-xl transition">
              <Heart className="h-12 w-12 text-primary-500 mb-4 fill-primary-500" />
              <h3 className="text-xl font-bold mb-2">Comunidade Ativa</h3>
              <p className="text-gray-600 dark:text-gray-400">
                Milhares de casais conectados e novas oportunidades todos os dias.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-20 px-4">
        <div className="container mx-auto text-center">
          <h2 className="text-4xl md:text-5xl font-bold mb-6">
            Pronto para começar sua jornada?
          </h2>
          <p className="text-xl text-gray-600 dark:text-gray-300 mb-8 max-w-2xl mx-auto">
            Junte-se a milhares de casais que já estão explorando novas possibilidades de forma segura e discreta.
          </p>
          <Link href="/register">
            <Button size="lg" className="bg-primary-500 hover:bg-primary-600 text-lg px-12 py-6">
              Criar Conta Grátis
            </Button>
          </Link>
        </div>
      </section>

      {/* Footer */}
      <footer className="py-12 px-4 bg-gray-900 text-white">
        <div className="container mx-auto">
          <div className="grid md:grid-cols-4 gap-8">
            <div>
              <div className="flex items-center space-x-2 mb-4">
                <Heart className="h-6 w-6 text-primary-500 fill-primary-500" />
                <span className="text-xl font-bold">HotWives</span>
              </div>
              <p className="text-gray-400">
                A plataforma mais completa para casais.
              </p>
            </div>

            <div>
              <h4 className="font-bold mb-4">Plataforma</h4>
              <ul className="space-y-2 text-gray-400">
                <li><Link href="/explore" className="hover:text-white">Explorar</Link></li>
                <li><Link href="/events" className="hover:text-white">Eventos</Link></li>
                <li><Link href="/premium" className="hover:text-white">Premium</Link></li>
              </ul>
            </div>

            <div>
              <h4 className="font-bold mb-4">Suporte</h4>
              <ul className="space-y-2 text-gray-400">
                <li><Link href="/help" className="hover:text-white">Ajuda</Link></li>
                <li><Link href="/safety" className="hover:text-white">Segurança</Link></li>
                <li><Link href="/contact" className="hover:text-white">Contato</Link></li>
              </ul>
            </div>

            <div>
              <h4 className="font-bold mb-4">Legal</h4>
              <ul className="space-y-2 text-gray-400">
                <li><Link href="/terms" className="hover:text-white">Termos de Uso</Link></li>
                <li><Link href="/privacy" className="hover:text-white">Privacidade</Link></li>
                <li><Link href="/cookies" className="hover:text-white">Cookies</Link></li>
              </ul>
            </div>
          </div>

          <div className="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
            <p>&copy; 2025 HotWives. Todos os direitos reservados.</p>
          </div>
        </div>
      </footer>
    </div>
  )
}