export default function NiseLandingPage() {
  const openModal = () => {
    document.getElementById('buyModal').classList.remove('hidden')
  }

  const closeModal = () => {
    document.getElementById('buyModal').classList.add('hidden')
  }

  return (
    <div className="bg-black text-white min-h-screen font-sans overflow-x-hidden scroll-smooth">
      {/* HERO */}
      <section className="relative h-screen flex items-center justify-center px-6 border-b border-pink-500/20">
        <div className="absolute inset-0 bg-gradient-to-b from-pink-900/20 via-black to-black" />

        <div className="absolute inset-0 opacity-20">
          <div className="absolute top-0 left-0 w-full h-full bg-[radial-gradient(circle_at_top,rgba(236,72,153,0.25),transparent_50%)]" />
        </div>

        <div className="max-w-7xl mx-auto grid md:grid-cols-2 gap-10 items-center relative z-10">
          <div>
            <div className="inline-block px-4 py-2 rounded-full border border-pink-500/40 text-pink-400 text-sm mb-6 backdrop-blur-sm bg-pink-500/5">
              Tecnologia silenciosa que pode salvar vidas
            </div>

            <h1 className="text-5xl md:text-7xl font-bold leading-tight mb-6 tracking-tight">
              NICE
            </h1>

            <p className="text-gray-300 text-lg md:text-xl leading-relaxed mb-8 max-w-xl">
              Um dispositivo ultrafino conectado ao aplicativo que permite acionamento discreto,
              envio de localização em tempo real e proteção inteligente para mulheres.
            </p>

            <div className="flex gap-4 flex-wrap">
              <button
                onClick={openModal}
                className="bg-pink-500 hover:bg-pink-400 transition px-8 py-4 rounded-2xl text-lg font-semibold shadow-2xl shadow-pink-500/20 hover:scale-[1.02] animate-pulse"
              >
                🛒 Comprar
              </button>

              <a
                href="#tecnologia"
                className="border border-white/20 hover:border-pink-500 px-8 py-4 rounded-2xl text-lg transition hover:bg-white/5"
              >
                Conhecer Tecnologia
              </a>
            </div>
          </div>

          <div>
            <div className="relative rounded-3xl overflow-hidden border border-pink-500/20 bg-zinc-900 aspect-video flex items-center justify-center shadow-2xl shadow-pink-500/10">
              <video
                className="w-full h-full object-cover"
                controls
                poster="https://images.unsplash.com/photo-1516321318423-f06f85e504b3?q=80&w=1200&auto=format&fit=crop"
              >
                <source src="" type="video/mp4" />
              </video>

              <div className="absolute bottom-4 left-4 bg-black/70 backdrop-blur px-4 py-2 rounded-xl text-sm border border-pink-500/20">
                Espaço para vídeo oficial da NISE
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* TECNOLOGIA */}
      <section
        id="tecnologia"
        className="py-28 px-6 border-b border-pink-500/10"
      >
        <div className="max-w-7xl mx-auto grid md:grid-cols-2 gap-16 items-center">
          <div>
            <div className="rounded-3xl bg-zinc-900 border border-pink-500/20 h-[500px] flex items-center justify-center relative overflow-hidden shadow-xl shadow-pink-500/10">
              <div className="absolute inset-0 bg-gradient-to-br from-pink-500/10 to-transparent" />

              <div className="text-center relative z-10 px-10">
                <div className="text-pink-400 text-xl mb-4 font-semibold">
                  Espaço para imagem do produto
                </div>

                <p className="text-gray-400">
                  Insira aqui mockup, imagem do chip ou render futurista da NISE.
                </p>
              </div>
            </div>
          </div>

          <div>
            <div className="inline-block px-4 py-2 rounded-full border border-pink-500/40 text-pink-400 text-sm mb-6">
              Tecnologia & Proteção
            </div>

            <h2 className="text-4xl md:text-5xl font-bold mb-8 leading-tight tracking-tight">
              Proteção discreta.
              <br />
              Inteligência em tempo real.
            </h2>

            <div className="space-y-6 text-gray-300 text-lg leading-relaxed">
              <div className="p-6 rounded-2xl bg-zinc-900 border border-white/5 hover:border-pink-500/20 transition hover:bg-zinc-800/80">
                Chip ultrafino conectado ao aplicativo com acionamento silencioso.
              </div>

              <div className="p-6 rounded-2xl bg-zinc-900 border border-white/5 hover:border-pink-500/20 transition hover:bg-zinc-800/80">
                Envio de localização em tempo real e atualização contínua.
              </div>

              <div className="p-6 rounded-2xl bg-zinc-900 border border-white/5 hover:border-pink-500/20 transition hover:bg-zinc-800/80">
                Tecnologia desenvolvida para facilitar pedidos de socorro discretos.
              </div>

              <div className="p-6 rounded-2xl bg-zinc-900 border border-white/5 hover:border-pink-500/20 transition hover:bg-zinc-800/80">
                Sistema integrado com aplicativo e ecossistema de proteção.
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* IMPACTO */}
      <section className="py-28 px-6 border-b border-pink-500/10">
        <div className="max-w-6xl mx-auto text-center">
          <div className="inline-block px-4 py-2 rounded-full border border-pink-500/40 text-pink-400 text-sm mb-6">
            Impacto Real
          </div>

          <h2 className="text-4xl md:text-6xl font-bold mb-16 tracking-tight">
            Tecnologia criada para proteger vidas.
          </h2>

          <div className="flex flex-row flex-wrap md:flex-nowrap gap-8 justify-center items-stretch">
            <div className="flex-1 min-w-\[260px\] bg-zinc-900 rounded-3xl p-10 border border-pink-500/10 hover:border-pink-500/30 transition shadow-xl shadow-pink-500/5">
              <div className="text-5xl font-bold text-pink-400 mb-4">15K+</div>
              <div className="text-gray-400 text-lg">Mulheres impactadas</div>
            </div>

            <div className="flex-1 min-w-\[260px\] bg-zinc-900 rounded-3xl p-10 border border-pink-500/10 hover:border-pink-500/30 transition shadow-xl shadow-pink-500/5">
              <div className="text-5xl font-bold text-pink-400 mb-4">51K+</div>
              <div className="text-gray-400 text-lg">Pedidos registrados</div>
            </div>

            <div className="flex-1 min-w-\[260px\] bg-zinc-900 rounded-3xl p-10 border border-pink-500/10 hover:border-pink-500/30 transition shadow-xl shadow-pink-500/5">
              <div className="text-5xl font-bold text-pink-400 mb-4">30+</div>
              <div className="text-gray-400 text-lg">Países ativos</div>
            </div>
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="py-28 px-6 text-center">
        <div className="max-w-4xl mx-auto">
          <h2 className="text-4xl md:text-6xl font-bold mb-8 tracking-tight">
            Escolha onde deseja comprar sua NISE.
          </h2>

          <p className="text-gray-400 text-lg mb-10 max-w-2xl mx-auto">
            Tecnologia inovadora criada para conectar proteção, segurança e praticidade.
          </p>

          <button
            onClick={openModal}
            className="bg-pink-500 hover:bg-pink-400 transition px-10 py-5 rounded-2xl text-xl font-semibold shadow-2xl shadow-pink-500/20 hover:scale-[1.02] animate-pulse"
          >
            🛒 Comprar
          </button>
        </div>
      </section>

      {/* FOOTER */}
      <footer className="border-t border-pink-500/10 py-12 px-6 bg-black">
        <div className="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center gap-6">
          <div>
            <div className="text-2xl font-bold text-pink-400">NISE</div>
            <div className="text-gray-500 mt-2">
              Tecnologia e proteção em tempo real.
            </div>
          </div>

          <div className="flex gap-8 text-gray-400 flex-wrap justify-center">
            <a href="#" className="hover:text-pink-400 transition">
              Instagram
            </a>

            <a href="#" className="hover:text-pink-400 transition">
              Contato
            </a>

            <a href="#" className="hover:text-pink-400 transition">
              Download do App
            </a>
          </div>
        </div>
      </footer>

      {/* MODAL */}
      <div
        id="buyModal"
        className="hidden fixed inset-0 bg-black/80 backdrop-blur-sm z-50 flex items-center justify-center px-6"
      >
        <div className="bg-zinc-950 border border-pink-500/20 rounded-3xl p-10 max-w-md w-full relative shadow-2xl shadow-pink-500/10">
          <button
            onClick={closeModal}
            className="absolute top-4 right-4 text-gray-500 hover:text-white text-2xl"
          >
            ×
          </button>

          <h3 className="text-3xl font-bold mb-8 text-center">
            Escolha sua loja
          </h3>

          <div className="space-y-4">
            <a
              href="https://www.mercadolivre.com.br"
              target="_blank"
              className="block w-full bg-yellow-400 text-black text-center py-4 rounded-2xl font-semibold hover:scale-[1.02] transition"
            >
              <div className="flex items-center justify-center">
                <img
                  src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 80'%3E%3Ctext x='150' y='52' font-size='34' text-anchor='middle' fill='%232E3192' font-family='Arial' font-weight='bold'%3EMercado Livre%3C/text%3E%3C/svg%3E"
                  className="h-10 w-auto"
                  alt="Mercado Livre"
                />
              </div>
            </a>

            <a
              href="https://www.amazon.com.br"
              target="_blank"
              className="block w-full bg-white text-black text-center py-4 rounded-2xl font-semibold hover:scale-[1.02] transition"
            >
              <div className="flex items-center justify-center">
                <img
                  src="https://upload.wikimedia.org/wikipedia/commons/a/a9/Amazon_logo.svg"
                  className="h-6 w-auto"
                  alt="Amazon"
                />
              </div>
            </a>

            <a
              href="https://shopee.com.br"
              target="_blank"
              className="block w-full bg-orange-500 text-white text-center py-4 rounded-2xl font-semibold hover:scale-[1.02] transition"
            >
              <div className="flex items-center justify-center">
                <img
                  src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 80'%3E%3Ctext x='120' y='52' font-size='38' text-anchor='middle' fill='white' font-family='Arial' font-weight='bold'%3EShopee%3C/text%3E%3C/svg%3E"
                  className="h-8 w-auto"
                  alt="Shopee"
                />
              </div>
            </a>
          </div>
        </div>
      </div>
    </div>
  )
}