export default function FestivalBarraLuz() {
  return (
    <div className="min-h-screen bg-gradient-to-b from-[#0f2a1d] via-[#123524] to-[#1b4a34] text-white font-sans">
      {/* HERO */}
      <section className="relative overflow-hidden">
        <div className="absolute inset-0 opacity-20 bg-[radial-gradient(circle_at_top,rgba(255,215,0,0.4),transparent_60%)]" />

        <div className="max-w-7xl mx-auto px-6 py-24 text-center relative z-10">
          <div className="flex justify-center mb-8">
            <div className="text-7xl text-yellow-400">✦</div>
          </div>

          <h1 className="text-6xl md:text-8xl font-light tracking-[10px] text-yellow-300">
            BARRA
          </h1>

          <h2 className="text-5xl md:text-7xl font-bold tracking-[6px] mt-2 text-white">
            LUZ
          </h2>

          <p className="mt-8 text-2xl md:text-3xl italic text-yellow-200">
            A cidade que acende emoções.
          </p>

          <p className="max-w-3xl mx-auto mt-10 text-lg md:text-xl text-gray-200 leading-relaxed">
            Um movimento urbano e participativo que transforma Barra do Garças em um grande espetáculo de luz, criatividade, turismo e espírito natalino.
          </p>

          <div className="mt-12 flex flex-wrap justify-center gap-4">
            <button className="bg-yellow-400 hover:bg-yellow-300 text-[#123524] font-bold px-8 py-4 rounded-full transition-all shadow-2xl">
              Quero Participar
            </button>

            <button className="border border-yellow-300 hover:bg-yellow-300 hover:text-[#123524] text-yellow-200 px-8 py-4 rounded-full transition-all">
              Ver Regulamento
            </button>
          </div>
        </div>
      </section>

      {/* SOBRE */}
      <section className="max-w-7xl mx-auto px-6 py-20 grid md:grid-cols-2 gap-14 items-center">
        <div>
          <h3 className="text-4xl font-bold text-yellow-300 mb-6">
            Um festival que ilumina a cidade inteira
          </h3>

          <p className="text-lg text-gray-200 leading-relaxed mb-6">
            O Festival Barra Luz convida moradores e empresas a decorarem suas residências, vitrines e fachadas, criando um roteiro iluminado que valoriza o turismo, fortalece o comércio e desperta o espírito natalino.
          </p>

          <p className="text-lg text-gray-300 leading-relaxed">
            Durante outubro, novembro e dezembro, Barra do Garças ganha vida através da criatividade da própria comunidade.
          </p>
        </div>

        <div className="bg-white/10 backdrop-blur-lg border border-yellow-300/20 rounded-[30px] p-10 shadow-2xl">
          <div className="grid grid-cols-2 gap-6 text-center">
            <div>
              <div className="text-5xl mb-4">🏠</div>
              <h4 className="font-bold text-yellow-200">Casas</h4>
            </div>

            <div>
              <div className="text-5xl mb-4">🏬</div>
              <h4 className="font-bold text-yellow-200">Comércio</h4>
            </div>

            <div>
              <div className="text-5xl mb-4">📸</div>
              <h4 className="font-bold text-yellow-200">Turismo</h4>
            </div>

            <div>
              <div className="text-5xl mb-4">✨</div>
              <h4 className="font-bold text-yellow-200">Criatividade</h4>
            </div>
          </div>
        </div>
      </section>

      {/* PREMIAÇÃO */}
      <section className="bg-black/20 py-20">
        <div className="max-w-7xl mx-auto px-6 text-center">
          <h3 className="text-5xl font-bold text-yellow-300 mb-14">
            Premiação Oficial
          </h3>

          <div className="grid md:grid-cols-4 gap-8">
            <div className="bg-white/10 border border-yellow-300/20 rounded-[25px] p-8 backdrop-blur-lg shadow-xl">
              <div className="text-5xl mb-5">🏆</div>
              <h4 className="text-2xl font-bold text-yellow-200 mb-3">R$ 5 Mil</h4>
              <p className="text-gray-200">
                Premiação para o vencedor de cada categoria.
              </p>
            </div>

            <div className="bg-white/10 border border-yellow-300/20 rounded-[25px] p-8 backdrop-blur-lg shadow-xl">
              <div className="text-5xl mb-5">🏠</div>
              <h4 className="text-2xl font-bold text-yellow-200 mb-3">IPTU 2027</h4>
              <p className="text-gray-200">
                O primeiro lugar terá 100% de desconto.
              </p>
            </div>

            <div className="bg-white/10 border border-yellow-300/20 rounded-[25px] p-8 backdrop-blur-lg shadow-xl">
              <div className="text-5xl mb-5">🎖️</div>
              <h4 className="text-2xl font-bold text-yellow-200 mb-3">Troféus</h4>
              <p className="text-gray-200">
                Reconhecimento oficial para os destaques.
              </p>
            </div>

            <div className="bg-white/10 border border-yellow-300/20 rounded-[25px] p-8 backdrop-blur-lg shadow-xl">
              <div className="text-5xl mb-5">🎁</div>
              <h4 className="text-2xl font-bold text-yellow-200 mb-3">Brindes</h4>
              <p className="text-gray-200">
                Certificados e brindes para participantes.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* PATROCINADORES */}
      <section className="py-20 max-w-7xl mx-auto px-6 text-center">
        <h3 className="text-5xl font-bold text-yellow-300 mb-10">
          Seja um patrocinador
        </h3>

        <p className="max-w-4xl mx-auto text-lg text-gray-200 leading-relaxed mb-12">
          Associe sua marca a um dos projetos urbanos e turísticos mais encantadores da região. O Festival Barra Luz conecta empresas à emoção, à cultura, ao turismo e ao espírito natalino da cidade.
        </p>

        <div className="grid md:grid-cols-3 gap-8">
          <div className="bg-white/10 border border-yellow-300/20 rounded-[30px] p-10 shadow-2xl">
            <h4 className="text-3xl font-bold text-yellow-200 mb-4">OURO</h4>
            <p className="text-5xl font-black text-white mb-6">R$ 20 mil</p>
            <ul className="space-y-3 text-gray-200 text-left">
              <li>✔ Destaque master</li>
              <li>✔ Redes sociais</li>
              <li>✔ Vídeos oficiais</li>
              <li>✔ Site do festival</li>
            </ul>
          </div>

          <div className="bg-white/10 border border-yellow-300/20 rounded-[30px] p-10 shadow-2xl">
            <h4 className="text-3xl font-bold text-yellow-200 mb-4">PRATA</h4>
            <p className="text-5xl font-black text-white mb-6">R$ 10 mil</p>
            <ul className="space-y-3 text-gray-200 text-left">
              <li>✔ Divulgação digital</li>
              <li>✔ Site oficial</li>
              <li>✔ Stories patrocinados</li>
              <li>✔ Materiais gráficos</li>
            </ul>
          </div>

          <div className="bg-white/10 border border-yellow-300/20 rounded-[30px] p-10 shadow-2xl">
            <h4 className="text-3xl font-bold text-yellow-200 mb-4">BRONZE</h4>
            <p className="text-5xl font-black text-white mb-6">R$ 5 mil</p>
            <ul className="space-y-3 text-gray-200 text-left">
              <li>✔ Logo coletiva</li>
              <li>✔ Menções oficiais</li>
              <li>✔ Participação institucional</li>
              <li>✔ Painel de apoiadores</li>
            </ul>
          </div>
        </div>
      </section>

      {/* FOOTER */}
      <footer className="border-t border-yellow-300/20 py-10 text-center text-gray-300">
        <p className="text-lg">Festival Barra Luz 2026</p>
        <p className="mt-2 text-yellow-200 italic">
          Quando as luzes se acendem, Barra do Garças ganha vida.
        </p>
      </footer>
    </div>
  )
}