/* ============================================
   PRODUZ SITE — Page Sections (part 2)
   Included, Audience, Authority, Cases
   ============================================ */

/* ===== INCLUDED (benefits grid) ===== */
const Included = () => {
  const items = [
    { icon: "design", title: "Sua marca com a cara que ela merece", body: "Um site único, do jeito que seu negócio é. Nada de template genérico que outros 500 estão usando por aí." },
    { icon: "globe", title: "Um endereço só seu na internet", body: "seunome.com.br registrado no seu nome. Seu cartão de visitas digital, profissional e fácil de divulgar." },
    { icon: "bolt", title: "Cliente impaciente não espera", body: "Site que carrega rápido em qualquer celular ou computador. Você não perde venda por demora de carregamento." },
    { icon: "wrench", title: "Seu site sempre atualizado", body: "Mudou o telefone? Novo serviço? Promoção? A gente atualiza por você. É só mandar no WhatsApp e pronto." },
    { icon: "search", title: "Apareça quando procurarem por você", body: "Configurações que ajudam o Google a te encontrar quando alguém busca o que você oferece na sua região." },
    { icon: "chat", title: "Fale com gente de verdade", body: "Sem abrir chamado, sem esperar 3 dias úteis, sem robô. Manda zap, a gente resolve. Simples assim." },
    { icon: "shield", title: 'Você nunca vai ouvir "saiu do ar"', body: "Atualizações, backups e monitoramento rodam sozinhos. Seu site funcionando 24h, todo dia, sem você se preocupar." },
    { icon: "phone", title: "Bonito em qualquer tela", body: "70% dos seus clientes vão te ver pelo celular. Seu site precisa funcionar perfeito ali — e o nosso funciona." },
  ];
  return (
    <section id="included">
      <div className="container">
        <div className="section-head">
          <Reveal><span className="tag-pill"><Icon name="sparkle" size={12} /> O que você ganha</span></Reveal>
          <Reveal delay={80}><h2 className="gradient-text">Tudo que seu negócio precisa<br/>para ser encontrado e crescer.</h2></Reveal>
          <Reveal delay={160}>
            <p className="lead">
              Você não precisa entender de tecnologia. A gente cuida de tudo
              para o seu site trabalhar por você — atraindo clientes, transmitindo
              autoridade e fechando vendas todos os dias.
            </p>
          </Reveal>
        </div>
        <div className="benefits-grid" style={{ gridTemplateColumns: "repeat(4, 1fr)" }}>
          {items.map((it, i) => (
            <Reveal key={i} delay={i * 60}>
              <div className="card benefit-card">
                <div className="icon-wrap"><Icon name={it.icon} size={22} /></div>
                <h3>{it.title}</h3>
                <p>{it.body}</p>
              </div>
            </Reveal>
          ))}
        </div>

        <Reveal delay={200}>
          <div className="gmb-highlight">
            <div className="gmb-content">
              <div className="gmb-tag">
                <Icon name="sparkle" size={12} /> Bônus exclusivo
              </div>
              <h3>
                Apareça no Google Maps quando<br/>
                <span className="violet-text">alguém buscar "perto de mim"</span>
              </h3>
              <p>
                A gente cadastra e otimiza seu Google Meu Negócio do zero — gratuito e
                já incluído no pacote. É o que faz seu negócio aparecer no mapa, no horário
                comercial, com fotos, telefone e direção. <strong>É de longe o que mais traz
                cliente para negócio local hoje.</strong>
              </p>
              <ul className="gmb-list">
                <li><span className="check"><Icon name="check" size={12} stroke={2.6} /></span> Cadastro completo do perfil</li>
                <li><span className="check"><Icon name="check" size={12} stroke={2.6} /></span> Categorização otimizada para SEO local</li>
                <li><span className="check"><Icon name="check" size={12} stroke={2.6} /></span> Endereço, horário, telefone e site</li>
                <li><span className="check"><Icon name="check" size={12} stroke={2.6} /></span> Descrição com palavras-chave da sua região</li>
                <li><span className="check"><Icon name="check" size={12} stroke={2.6} /></span> Configuração de fotos e atributos</li>
                <li><span className="check"><Icon name="check" size={12} stroke={2.6} /></span> Verificação da conta junto ao Google</li>
              </ul>
            </div>
            <div className="gmb-visual">
              <div className="gmb-mockup">
                <div className="gmb-mockup-header">
                  <div className="gmb-search-bar">
                    <Icon name="search" size={14} />
                    <span>perto de mim</span>
                  </div>
                </div>
                <div className="gmb-pin-wrap">
                  <div className="gmb-map-grid"></div>
                  <div className="gmb-pin">
                    <Icon name="map-pin" size={28} />
                  </div>
                  <div className="gmb-pulse"></div>
                </div>
                <div className="gmb-card-mini">
                  <div className="gmb-card-title">Seu Negócio</div>
                  <div className="gmb-stars">
                    ★★★★★ <span className="gmb-reviews">(124)</span>
                  </div>
                  <div className="gmb-info">
                    <span className="gmb-open">Aberto agora</span>
                    <span> · Fecha às 18h</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </Reveal>
      </div>
      <style>{`
        @media (max-width: 1100px) { #included .benefits-grid { grid-template-columns: repeat(3, 1fr) !important; } }
        @media (max-width: 880px) { #included .benefits-grid { grid-template-columns: repeat(2, 1fr) !important; } }
        @media (max-width: 540px) { #included .benefits-grid { grid-template-columns: 1fr !important; } }

        /* Google My Business highlight card */
        .gmb-highlight {
          margin-top: 32px;
          display: grid;
          grid-template-columns: 1.2fr 1fr;
          gap: 40px;
          align-items: center;
          padding: 40px;
          border-radius: var(--r-xl);
          background: linear-gradient(135deg,
            rgba(66, 133, 244, 0.12) 0%,
            rgba(123, 92, 255, 0.10) 50%,
            rgba(15, 15, 28, 0.5) 100%);
          border: 1px solid rgba(66, 133, 244, 0.3);
          position: relative;
          overflow: hidden;
          backdrop-filter: blur(12px);
          box-shadow: 0 30px 80px rgba(66, 133, 244, 0.15);
        }
        .gmb-highlight::before {
          content: "";
          position: absolute;
          width: 500px; height: 400px;
          top: -150px; right: -150px;
          background: radial-gradient(ellipse at center,
            rgba(66, 133, 244, 0.25) 0%,
            rgba(123, 92, 255, 0.10) 50%,
            transparent 70%);
          filter: blur(30px);
          pointer-events: none;
        }
        .gmb-content {
          position: relative;
          z-index: 2;
        }
        .gmb-tag {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          padding: 6px 14px;
          border-radius: 999px;
          background: linear-gradient(90deg, rgba(66,133,244,0.2), rgba(123,92,255,0.2));
          border: 1px solid rgba(66,133,244,0.4);
          font-size: 11px;
          font-weight: 600;
          color: #8ab4f8;
          letter-spacing: 0.06em;
          text-transform: uppercase;
          margin-bottom: 18px;
        }
        .gmb-content h3 {
          font-size: clamp(22px, 2.4vw, 32px);
          font-weight: 600;
          letter-spacing: -0.02em;
          line-height: 1.2;
          margin-bottom: 16px;
        }
        .gmb-content p {
          color: var(--text-2);
          line-height: 1.65;
          margin-bottom: 20px;
          font-size: 15px;
        }
        .gmb-content p strong { color: var(--text-1); font-weight: 500; }
        .gmb-list {
          list-style: none;
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 10px 18px;
        }
        .gmb-list li {
          display: flex;
          align-items: center;
          gap: 10px;
          font-size: 14px;
          color: var(--text-2);
        }
        .gmb-list .check {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: 20px;
          height: 20px;
          border-radius: 50%;
          background: rgba(66, 133, 244, 0.2);
          color: #8ab4f8;
          flex-shrink: 0;
        }

        /* Mockup visual (Google Maps style) */
        .gmb-visual {
          position: relative;
          z-index: 2;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .gmb-mockup {
          width: 100%;
          max-width: 360px;
          background: #1a1a2e;
          border-radius: 20px;
          border: 1px solid rgba(255,255,255,0.1);
          overflow: hidden;
          box-shadow: 0 30px 60px rgba(0,0,0,0.5);
        }
        .gmb-mockup-header {
          padding: 14px;
          background: rgba(255,255,255,0.03);
          border-bottom: 1px solid rgba(255,255,255,0.06);
        }
        .gmb-search-bar {
          display: flex;
          align-items: center;
          gap: 10px;
          padding: 10px 14px;
          background: #fff;
          border-radius: 999px;
          color: #5f6368;
          font-size: 14px;
        }
        .gmb-pin-wrap {
          position: relative;
          height: 180px;
          background:
            linear-gradient(135deg, #2a3447 0%, #1a2238 100%);
          display: flex;
          align-items: center;
          justify-content: center;
          overflow: hidden;
        }
        .gmb-map-grid {
          position: absolute;
          inset: 0;
          background-image:
            linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
          background-size: 30px 30px;
        }
        .gmb-pin {
          position: relative;
          z-index: 2;
          color: #ea4335;
          filter: drop-shadow(0 4px 8px rgba(234, 67, 53, 0.5));
          animation: gmb-bounce 2.5s ease-in-out infinite;
        }
        @keyframes gmb-bounce {
          0%, 100% { transform: translateY(0); }
          50% { transform: translateY(-8px); }
        }
        .gmb-pulse {
          position: absolute;
          width: 60px;
          height: 60px;
          border-radius: 50%;
          background: rgba(234, 67, 53, 0.3);
          animation: gmb-pulse 2s ease-out infinite;
        }
        @keyframes gmb-pulse {
          0% { transform: scale(0.5); opacity: 1; }
          100% { transform: scale(2); opacity: 0; }
        }
        .gmb-card-mini {
          padding: 16px;
          background: rgba(255,255,255,0.03);
        }
        .gmb-card-title {
          font-weight: 600;
          color: var(--text-1);
          font-size: 16px;
          margin-bottom: 4px;
        }
        .gmb-stars {
          color: #fbbc04;
          font-size: 13px;
          margin-bottom: 6px;
        }
        .gmb-reviews { color: var(--text-3); margin-left: 4px; }
        .gmb-info {
          font-size: 13px;
          color: var(--text-3);
        }
        .gmb-open {
          color: #34a853;
          font-weight: 500;
        }

        @media (max-width: 880px) {
          .gmb-highlight { grid-template-columns: 1fr; gap: 32px; padding: 28px; }
          .gmb-list { grid-template-columns: 1fr; }
        }
      `}</style>
    </section>
  );
};

/* ===== AUDIENCE ===== */
const Audience = () => {
  const items = [
    { icon: "stethoscope", title: "Quer transmitir autoridade e atrair os clientes certos", body: "Médicos, advogados, dentistas, psicólogos, contadores. Quando alguém pesquisar seu nome, vai encontrar um profissional sério." },
    { icon: "store", title: 'Quer aparecer quando alguém busca "perto de mim"', body: "Restaurantes, salões, lojas, oficinas. Seu cliente está procurando agora — e indo no concorrente que aparece. Esteja você lá da próxima vez." },
    { icon: "briefcase", title: "Quer parar de explicar seu trabalho no zap toda vez", body: "Consultores, técnicos, autônomos. Mande o link do seu site e ganhe credibilidade na hora, sem precisar repetir o que faz." },
    { icon: "seedling", title: "Está começando e quer competir de igual para igual", body: "Abriu o CNPJ ontem? Não importa. Comece já com cara de empresa estabelecida e dispute clientes com quem está há anos no mercado." },
  ];
  return (
    <section id="audience">
      <div className="container">
        <div className="section-head">
          <Reveal><span className="tag-pill"><Icon name="sparkle" size={12} /> Para quem é</span></Reveal>
          <Reveal delay={80}><h2 className="gradient-text">Você se identifica com<br/>algum desses cenários?</h2></Reveal>
          <Reveal delay={160}>
            <p className="lead">
              A gente atende quem tem um negócio para tocar e não tem tempo (nem paciência)
              de virar especialista em tecnologia. Se você se vê em alguma das situações abaixo,
              estamos falando a mesma língua.
            </p>
          </Reveal>
        </div>
        <div className="audience-grid">
          {items.map((it, i) => (
            <Reveal key={i} delay={i * 80}>
              <div className="card audience-card">
                <div className="icon-wrap" style={{
                  width: 48, height: 48, borderRadius: 14,
                  background: "rgba(255,255,255,0.04)",
                  border: "1px solid var(--line-strong)",
                  display: "grid", placeItems: "center",
                  marginBottom: 14, color: "var(--brand-violet-2)"
                }}>
                  <Icon name={it.icon} size={22} />
                </div>
                <h3>{it.title}</h3>
                <p>{it.body}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ===== AUTHORITY ===== */
const Authority = () => {
  return (
    <section id="authority">
      <div className="container">
        <div className="section-head">
          <Reveal><span className="tag-pill"><Icon name="sparkle" size={12} /> Autoridade</span></Reveal>
          <Reveal delay={80}><h2 className="gradient-text">Por que confiar<br/>na Produz Site?</h2></Reveal>
        </div>
        <Reveal delay={160}>
          <div className="card authority-block highlight">
            <h3 className="violet-text" style={{ fontSize: "clamp(28px, 3.5vw, 44px)", letterSpacing: "-0.03em", fontWeight: 600 }}>
              +15 anos de experiência. Centenas de negócios online. Zero achismo.
            </h3>
            <p>
              A Produz Site é a marca, mas por trás dela tem um time de especialistas com mais
              de 15 anos colocando negócio na internet — desenvolvedores, estrategistas digitais
              e profissionais que já viram tendência ir, voltar e ir de novo. A gente sabe o que
              funciona — e principalmente, o que não funciona. Você não vai pagar pela nossa
              curva de aprendizado.
            </p>
          </div>
        </Reveal>
        <div className="pillars">
          {[
            { icon: "bolt", title: "Agilidade real", body: "Site no ar em 7 dias. Sem enrolação, sem \"te retorno semana que vem\". A gente cumpre prazo porque nosso modelo depende disso." },
            { icon: "handshake", title: "Comprometimento de verdade", body: "Seu sucesso é o nosso. Cliente que cresce, fica. Por isso a gente trabalha para você vender mais, ser encontrado mais — não só para entregar um site bonito." },
            { icon: "check-circle", title: "Garantia de satisfação", body: "Não gostou? Sem fidelidade, sem multa, sem drama. Mas vamos trabalhar para você nem cogitar sair." },
          ].map((p, i) => (
            <Reveal key={i} delay={i * 100}>
              <div className="card pillar">
                <div className="icon-wrap"><Icon name={p.icon} size={22} /></div>
                <h3>{p.title}</h3>
                <p>{p.body}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ===== CASES ===== */
const Cases = () => {
  const cases = [
    {
      img: "produzsite/assets/case-redemei.png",
      url: "redemeidobrasil.com.br",
      tag: "Contabilidade para MEI",
      title: "Redemei do Brasil",
      body: "Site institucional com captura de leads, foco em conversão e linguagem que conversa direto com o microempreendedor. Presença digital que transmite a autoridade que o serviço exige.",
    },
    {
      img: "produzsite/assets/case-imprensa.png",
      url: "imprensaonline.com.br",
      tag: "Portal de notícias",
      title: "Imprensa Online",
      body: "Portal completo com publicação dinâmica, área de anunciantes e múltiplas editorias. Performance e organização para quem precisa publicar todo dia, sem complicação.",
    },
    {
      img: "produzsite/assets/case-priston.png",
      url: "pristonvendas.com.br",
      tag: "E-commerce de games",
      title: "Priston Vendas",
      body: "Loja online com identidade forte do nicho, integração de pagamento e atendimento via WhatsApp. Mais de 5 mil clientes atendidos pela operação que confia na gente.",
    },
  ];
  return (
    <section id="cases">
      <div className="container">
        <div className="section-head">
          <Reveal><span className="tag-pill"><Icon name="sparkle" size={12} /> Prova social</span></Reveal>
          <Reveal delay={80}><h2 className="gradient-text">Quem confia na gente, fica.</h2></Reveal>
          <Reveal delay={160}>
            <p className="lead">
              Nichos diferentes, desafios diferentes, sites no ar e funcionando. Veja alguns
              negócios que a gente coloca para rodar todo dia.
            </p>
          </Reveal>
        </div>
        <div className="cases-grid">
          {cases.map((c, i) => (
            <Reveal key={i} delay={i * 100}>
              <div className="card case-card">
                <div className="case-frame">
                  <div className="browser-bar">
                    <span className="dot"></span>
                    <span className="dot"></span>
                    <span className="dot"></span>
                    <span className="url">{c.url}</span>
                  </div>
                  <img src={c.img} alt={c.title} />
                </div>
                <div className="case-body">
                  <div className="tag">{c.tag}</div>
                  <h3>{c.title}</h3>
                  <p>{c.body}</p>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
        <Reveal delay={300}>
          <p className="cases-conclusion">
            Do contador ao gamer, do jornalista ao dentista — a gente entende seu negócio
            antes de codar a primeira linha.
          </p>
        </Reveal>
      </div>
    </section>
  );
};

window.Included = Included;
window.Audience = Audience;
window.Authority = Authority;
window.Cases = Cases;