// LANDING PAGE OTIMIZADA PARA WORDPRESS
// DOMÍNIO: nexvisionhub.com
// RECOMENDADO USAR NO WORDPRESS COM:
// - Elementor HTML Widget
// - Plugin Code Snippets
// - Tema Hello Elementor
// - OU COMO TEMPLATE PERSONALIZADO

export default function MetodoProtecaoLanding() {
  return (
    <div className="min-h-screen bg-[#F5F2E9] text-[#233321] font-serif">
      {/* HEADER */}
      <header className="border-b border-[#e7e1d3]">
        <div className="max-w-[1280px] mx-auto px-10 py-7 flex items-center justify-between">
          <div className="flex items-center gap-3">
            {/* LOGO */}
            {/* ANEXAR EM: public/images/logo.png */}
            <img
              src="/images/logo.png"
              alt="NexVision Hub"
              className="h-12 object-contain"
            />
          </div>

          <nav className="flex items-center gap-14 text-[14px] font-medium text-[#2d3c2a]">
            <a href="#">Início</a>
            <a href="#">O Método</a>
            <a href="#">Depoimentos</a>
            <a href="#">Perguntas</a>
          </nav>

          <button className="bg-[#D8A73B] hover:bg-[#c9982e] transition-colors text-[#1f2a1d] font-bold text-[13px] px-7 py-3 rounded-xl tracking-wide">
            QUERO PROTEGER
          </button>
        </div>
      </header>

      {/* HERO */}
      <section className="max-w-[1280px] mx-auto px-10 pt-10">
        <div className="relative overflow-hidden rounded-[18px] min-h-[660px] bg-[#173818]">
          {/* BACKGROUND */}
          {/* ANEXAR EM: public/images/hero-bg.jpg */}
          <img
            src="/images/hero-bg.jpg"
            alt="Casal"
            className="absolute inset-0 w-full h-full object-cover opacity-40"
          />

          <div className="absolute inset-0 bg-gradient-to-r from-[#143313]/95 via-[#173818]/80 to-[#173818]/40" />

          <div className="relative z-10 h-full grid grid-cols-2 items-center px-14 py-16">
            <div className="max-w-[560px]">
              {/* BLOCO BRANCO */}
              <div className="w-[210px] h-[120px] bg-white mb-10" />

              <h1 className="text-[74px] leading-[1.08] tracking-[-2px] text-[#F5F0E6] mb-8">
                Proteja seu patrimônio e tome decisões financeiras com mais segurança.
              </h1>

              <p className="text-[20px] leading-[1.9] text-[#E9E2D2] max-w-[540px] mb-10 font-sans">
                Um método moderno criado para ajudar pessoas acima de 50 anos a proteger patrimônio, evitar golpes financeiros e viver com mais tranquilidade e estabilidade.
              </p>

              <button className="bg-[#D8A73B] hover:bg-[#c9982e] transition-colors text-[#1f2a1d] font-bold text-[15px] px-10 py-5 rounded-xl font-sans tracking-wide shadow-lg">
                QUERO ME PROTEGER AGORA!
              </button>
            </div>

            <div className="flex justify-center items-center">
              {/* MOCKUP LIVRO */}
              {/* ANEXAR EM: public/images/book.png */}
              <img
                src="/images/book.png"
                alt="Livro"
                className="w-[470px] object-contain drop-shadow-[0_30px_50px_rgba(0,0,0,0.45)]"
              />
            </div>
          </div>
        </div>

        {/* FEATURES */}
        <div className="grid grid-cols-2 gap-10 pt-10 pb-20 px-2">
          <div className="flex items-start gap-4">
            <div className="w-10 h-10 rounded-full border border-[#2e422a] flex items-center justify-center text-[#2e422a]">
              🛡️
            </div>

            <div>
              <h3 className="text-[18px] text-[#223121] font-semibold">
                Mais segurança
              </h3>
              <p className="text-[15px] text-[#6e7567] font-sans">
                para você e sua família
              </p>
            </div>
          </div>

          <div className="flex items-start gap-4 justify-self-center">
            <div className="w-10 h-10 rounded-full border border-[#2e422a] flex items-center justify-center text-[#2e422a]">
              🔒
            </div>

            <div>
              <h3 className="text-[18px] text-[#223121] font-semibold">
                Conteúdo prático
              </h3>
              <p className="text-[15px] text-[#6e7567] font-sans">
                e direto ao ponto
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* PILARES */}
      <section className="max-w-[1280px] mx-auto px-10 pb-24">
        <div className="text-center mb-16">
          <h2 className="text-[56px] leading-tight text-[#223121] mb-4">
            Os pilares da NexVision Hub"text-[18px] text-[#70766a] font-sans max-w-[760px] mx-auto leading-relaxed">
            Seis frentes de proteção pensadas para quem quer atravessar qualquer cenário com mais tranquilidade.
          </p>
        </div>

        <div className="grid grid-cols-3 gap-8">
          {[
            {
              title: 'Proteção da renda',
              text: 'Entenda como se preparar para momentos de instabilidade, aumento de preços, mudanças econômicas e riscos que podem afetar sua renda.',
            },
            {
              title: 'Proteção da aposentadoria',
              text: 'Organize sua vida financeira com mais clareza para preservar melhor o dinheiro que sustenta sua tranquilidade.',
            },
            {
              title: 'Proteção contra golpes',
              text: 'Descubra como reconhecer promessas falsas, armadilhas financeiras e ofertas perigosas que miram principalmente pessoas mais velhas.',
            },
          ].map((item, index) => (
            <div
              key={index}
              className="bg-white rounded-[22px] border border-[#e5dfd2] p-8 min-h-[250px] shadow-sm"
            >
              <div className="w-12 h-12 rounded-full bg-[#F5F2E9] border border-[#e7e1d3] flex items-center justify-center mb-8 text-[18px]">
                ✦
              </div>

              <h3 className="text-[30px] leading-tight text-[#233321] mb-5">
                {item.title}
              </h3>

              <p className="text-[17px] leading-[1.9] text-[#6b7166] font-sans">
                {item.text}
              </p>
            </div>
          ))}
        </div>

        {/* PAGINAÇÃO */}
        <div className="flex items-center justify-center gap-6 pt-10">
          <button className="w-12 h-12 rounded-full border border-[#d8d2c4] flex items-center justify-center text-[#233321]">
            ←
          </button>

          <div className="flex items-center gap-3">
            <div className="w-12 h-3 rounded-full bg-[#294127]" />
            <div className="w-3 h-3 rounded-full bg-[#cfc8ba]" />
            <div className="w-3 h-3 rounded-full bg-[#cfc8ba]" />
            <div className="w-3 h-3 rounded-full bg-[#cfc8ba]" />
            <div className="w-3 h-3 rounded-full bg-[#cfc8ba]" />
          </div>

          <button className="w-12 h-12 rounded-full border border-[#d8d2c4] flex items-center justify-center text-[#233321]">
            →
          </button>
        </div>
      </section>

      {/* DEPOIMENTOS */}
      <section className="bg-[#F1EEE4] py-24">
        <div className="max-w-[1280px] mx-auto px-10">
          <div className="text-center mb-16">
            <h2 className="text-[56px] text-[#223121]">
              O que dizem nossos clientes
            </h2>
          </div>

          <div className="grid grid-cols-2 gap-8">
            {[1, 2].map((item) => (
              <div
                key={item}
                className="bg-white rounded-[22px] border border-[#e5dfd2] p-10 min-h-[240px]"
              >
                <p className="text-[19px] leading-[1.9] text-[#62685f] italic mb-10 font-sans">
                  “Depois que me aposentei, comecei a sentir que meu dinheiro rendia cada vez menos. Esse método me deu uma visão muito mais clara sobre gastos, riscos e decisões que eu precisava tomar com mais cuidado.”
                </p>

                <div className="flex items-center gap-4">
                  {/* FOTO */}
                  {/* ANEXAR EM: public/images/avatar.jpg */}
                  <img
                    src="/images/avatar.jpg"
                    alt="Pessoa"
                    className="w-14 h-14 rounded-full object-cover"
                  />

                  <div>
                    <h4 className="text-[18px] text-[#233321] font-semibold font-sans">
                      Roberto Carvalho
                    </h4>
                  </div>
                </div>
              </div>
            ))}
          </div>

          <div className="flex items-center justify-center gap-6 pt-10">
            <button className="w-12 h-12 rounded-full border border-[#d8d2c4] flex items-center justify-center text-[#233321]">
              ←
            </button>

            <div className="flex items-center gap-3">
              <div className="w-12 h-3 rounded-full bg-[#294127]" />
              <div className="w-3 h-3 rounded-full bg-[#cfc8ba]" />
              <div className="w-3 h-3 rounded-full bg-[#cfc8ba]" />
              <div className="w-3 h-3 rounded-full bg-[#cfc8ba]" />
            </div>

            <button className="w-12 h-12 rounded-full border border-[#d8d2c4] flex items-center justify-center text-[#233321]">
              →
            </button>
          </div>
        </div>
      </section>
    </div>
  );
}