export default function VuProEliteSite() {
  return (
    <div className="min-h-screen bg-[#050505] text-white overflow-hidden">
      {/* BACKGROUND */}
      <div className="fixed inset-0 opacity-20 pointer-events-none">
        <div className="absolute top-0 left-0 w-[500px] h-[500px] bg-red-600 blur-[180px]"></div>
        <div className="absolute bottom-0 right-0 w-[500px] h-[500px] bg-red-800 blur-[180px]"></div>
      </div>

      {/* HERO */}
      <section className="relative z-10 max-w-7xl mx-auto px-6 pt-10 pb-24">
        {/* NAVBAR */}
        <div className="flex items-center justify-between mb-24">
          <div>
            <h1 className="text-3xl font-black tracking-tight">
              VU<span className="text-red-500">PRO</span> ELITE
            </h1>
          </div>

          <div className="hidden md:flex items-center gap-10 text-zinc-400 font-medium">
            <a href="#" className="hover:text-white transition-all">Início</a>
            <a href="#" className="hover:text-white transition-all">Recursos</a>
            <a href="#" className="hover:text-white transition-all">Planos</a>
            <a href="#" className="hover:text-white transition-all">Contato</a>
          </div>

          <button className="bg-red-600 hover:bg-red-500 transition-all px-6 py-3 rounded-2xl font-bold shadow-[0_0_40px_rgba(239,68,68,0.5)]">
            Comprar
          </button>
        </div>

        <div className="grid lg:grid-cols-2 gap-16 items-center">
          {/* TEXT */}
          <div>
            <div className="inline-flex items-center gap-2 bg-zinc-900 border border-red-500/20 px-4 py-2 rounded-full mb-8">
              <div className="w-2 h-2 rounded-full bg-red-500 animate-pulse"></div>
              <span className="text-sm text-red-400 font-semibold">
                IPTV PREMIUM PLAYER
              </span>
            </div>

            <h2 className="text-6xl md:text-8xl font-black leading-[0.95] tracking-tight mb-8">
              PLAYER
              <br />
              <span className="text-red-500">IPTV</span>
              <br />
              DO FUTURO
            </h2>

            <p className="text-zinc-400 text-xl leading-relaxed max-w-xl mb-10">
              Aplicativo premium otimizado para Android TV, Fire TV e TV Box.
              Interface moderna, carregamento ultra rápido e máxima estabilidade.
            </p>

            <div className="flex flex-wrap gap-5 mb-12">
              <button className="bg-red-600 hover:bg-red-500 transition-all px-10 py-5 rounded-3xl text-lg font-black shadow-[0_0_60px_rgba(239,68,68,0.45)]">
                Comprar Agora
              </button>

              <button className="border border-zinc-700 hover:border-red-500 hover:bg-red-500/10 transition-all px-10 py-5 rounded-3xl text-lg font-bold">
                Ver Demonstração
              </button>
            </div>

            <div className="flex flex-wrap gap-8 text-zinc-300">
              <div>
                <h3 className="text-4xl font-black text-white">+10K</h3>
                <p>Usuários</p>
              </div>

              <div>
                <h3 className="text-4xl font-black text-white">99%</h3>
                <p>Estabilidade</p>
              </div>

              <div>
                <h3 className="text-4xl font-black text-white">24H</h3>
                <p>Suporte</p>
              </div>
            </div>
          </div>

          {/* MOCKUP */}
          <div className="relative flex justify-center">
            <div className="absolute inset-0 bg-red-600 opacity-20 blur-[120px] rounded-full"></div>

            <div className="relative w-full max-w-[420px] bg-gradient-to-b from-zinc-900 to-black border border-zinc-800 rounded-[40px] p-5 shadow-2xl">
              <div className="bg-black rounded-[30px] overflow-hidden border border-zinc-800">
                <div className="h-12 border-b border-zinc-800 flex items-center px-5 gap-2 bg-zinc-950">
                  <div className="w-3 h-3 rounded-full bg-red-500"></div>
                  <div className="w-3 h-3 rounded-full bg-yellow-500"></div>
                  <div className="w-3 h-3 rounded-full bg-green-500"></div>
                </div>

                <div className="p-6 space-y-5">
                  <div className="bg-gradient-to-r from-red-600 to-red-800 rounded-3xl p-8">
                    <h3 className="text-3xl font-black mb-2">VU PRO ELITE</h3>
                    <p className="text-red-100">Streaming Premium</p>
                  </div>

                  <div className="grid grid-cols-2 gap-4">
                    <div className="bg-zinc-900 border border-zinc-800 rounded-2xl p-5">
                      <p className="text-zinc-400 text-sm mb-2">Canais</p>
                      <h4 className="text-3xl font-black">5.8K</h4>
                    </div>

                    <div className="bg-zinc-900 border border-zinc-800 rounded-2xl p-5">
                      <p className="text-zinc-400 text-sm mb-2">Filmes</p>
                      <h4 className="text-3xl font-black">31K</h4>
                    </div>
                  </div>

                  <div className="space-y-3">
                    <div className="bg-zinc-900 border border-zinc-800 rounded-2xl p-4 flex justify-between items-center">
                      <span>Streaming HD/FHD</span>
                      <span className="text-green-400 font-bold">ONLINE</span>
                    </div>

                    <div className="bg-zinc-900 border border-zinc-800 rounded-2xl p-4 flex justify-between items-center">
                      <span>Player Avançado</span>
                      <span className="text-green-400 font-bold">ATIVO</span>
                    </div>

                    <div className="bg-zinc-900 border border-zinc-800 rounded-2xl p-4 flex justify-between items-center">
                      <span>Atualizações</span>
                      <span className="text-green-400 font-bold">OK</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* FEATURES */}
      <section className="relative z-10 max-w-7xl mx-auto px-6 py-24">
        <div className="text-center mb-16">
          <h2 className="text-5xl font-black mb-5">
            Recursos Premium
          </h2>

          <p className="text-zinc-400 text-lg max-w-2xl mx-auto">
            Tudo que você precisa em um aplicativo IPTV moderno e profissional.
          </p>
        </div>

        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
          {[
            'Ultra Rápido',
            'Visual Premium',
            'Android TV',
            'Player Estável',
            'Atualizações',
            'Suporte VIP',
            'Multi DNS',
            'Login Fácil'
          ].map((item, index) => (
            <div
              key={index}
              className="bg-zinc-900/70 backdrop-blur-xl border border-zinc-800 hover:border-red-500 transition-all rounded-3xl p-8 group"
            >
              <div className="w-14 h-14 rounded-2xl bg-red-600/20 border border-red-500/30 flex items-center justify-center mb-6 group-hover:scale-110 transition-all">
                <div className="w-6 h-6 rounded-full bg-red-500"></div>
              </div>

              <h3 className="text-2xl font-black mb-3">
                {item}
              </h3>

              <p className="text-zinc-400 leading-relaxed">
                Sistema otimizado para melhor desempenho e estabilidade.
              </p>
            </div>
          ))}
        </div>
      </section>

      {/* PLANS */}
      <section className="relative z-10 py-24 px-6 border-y border-zinc-800 bg-zinc-950/40 backdrop-blur-xl">
        <div className="max-w-6xl mx-auto">
          <div className="text-center mb-16">
            <h2 className="text-5xl font-black mb-5">
              Escolha Seu Plano
            </h2>

            <p className="text-zinc-400 text-lg">
              Planos acessíveis com suporte completo.
            </p>
          </div>

          <div className="grid lg:grid-cols-3 gap-8">
            {[
              {
                title: 'Mensal',
                price: 'R$ 25',
                featured: false,
              },
              {
                title: 'Trimestral',
                price: 'R$ 65',
                featured: true,
              },
              {
                title: 'Anual',
                price: 'R$ 199',
                featured: false,
              },
            ].map((plan, index) => (
              <div
                key={index}
                className={`rounded-[35px] p-10 border transition-all ${
                  plan.featured
                    ? 'bg-red-600 border-red-500 scale-105 shadow-[0_0_70px_rgba(239,68,68,0.4)]'
                    : 'bg-zinc-900 border-zinc-800'
                }`}
              >
                <h3 className="text-3xl font-black mb-4">
                  {plan.title}
                </h3>

                <div className="text-6xl font-black mb-8">
                  {plan.price}
                </div>

                <div className="space-y-4 mb-10 text-lg">
                  <div>✔ App Premium</div>
                  <div>✔ Atualizações</div>
                  <div>✔ Suporte</div>
                  <div>✔ Multi DNS</div>
                  <div>✔ Alta Performance</div>
                </div>

                <button className={`w-full py-5 rounded-2xl font-black text-lg transition-all ${
                  plan.featured
                    ? 'bg-white text-black hover:bg-zinc-200'
                    : 'bg-red-600 hover:bg-red-500'
                }`}>
                  Comprar Agora
                </button>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="relative z-10 max-w-5xl mx-auto px-6 py-24">
        <div className="relative overflow-hidden rounded-[40px] bg-gradient-to-r from-red-600 to-red-800 p-16 text-center shadow-[0_0_100px_rgba(239,68,68,0.4)]">
          <div className="absolute inset-0 bg-black/10"></div>

          <div className="relative z-10">
            <h2 className="text-5xl md:text-6xl font-black mb-6 leading-tight">
              Tenha Seu IPTV
              <br />
              Premium Agora
            </h2>

            <p className="text-red-100 text-xl max-w-2xl mx-auto mb-10">
              Aplicativo moderno, rápido e otimizado para a melhor experiência.
            </p>

            <div className="flex flex-wrap justify-center gap-5">
              <button className="bg-white text-black hover:bg-zinc-200 transition-all px-10 py-5 rounded-3xl text-lg font-black">
                Comprar Aplicativo
              </button>

              <button className="border border-white hover:bg-white hover:text-black transition-all px-10 py-5 rounded-3xl text-lg font-black">
                WhatsApp
              </button>
            </div>
          </div>
        </div>
      </section>

      {/* FOOTER */}
      <footer className="relative z-10 border-t border-zinc-800 py-10 text-center text-zinc-500">
        <h3 className="text-3xl font-black text-white mb-3">
          VU<span className="text-red-500">PRO</span> ELITE
        </h3>

        <p>
          © 2026 Todos os direitos reservados.
        </p>
      </footer>
    </div>
  );
}