<%- include('partials/head', {
  title,
  pageDescription,
  bodyClass,
  canonical,
  noindex: false
}) %>
<%- include('partials/home-header', { whatsappUrl }) %>

<main id="conteudo">
  <section class="home-hero">
    <div class="home-hero__halo" aria-hidden="true"></div>
    <div class="home-hero__arch" aria-hidden="true"></div>
    <div class="container home-hero__grid">
      <div class="home-hero__copy">
        <p class="eyebrow eyebrow--line reveal">Catálogo digital • Atacado &amp; Varejo</p>
        <h1 class="reveal reveal--delay-1">Duas vitrines.<br><em>Uma só oportunidade.</em></h1>
        <p class="home-hero__lead reveal reveal--delay-2">Do atacado ao varejo, tudo o que você procura está aqui. Escolha a sua modalidade, encontre preços especiais e fale com a gente.</p>
        <div class="home-hero__actions reveal reveal--delay-3">
          <a class="text-link" href="#modalidades">
            Escolher minha vitrine
            <span class="text-link__arrow"><%- icon('arrow-right') %></span>
          </a>
          <a class="home-hero__wa" href="<%= whatsappUrl %>" target="_blank" rel="noopener">
            <%- icon('whatsapp') %>
            Atendimento direto
          </a>
        </div>
        <dl class="hero-stats reveal reveal--delay-3">
          <div>
            <dt><%= formatNumber(stats.activeProducts) %></dt>
            <dd>produtos no catálogo</dd>
          </div>
          <div>
            <dt><%= String(stats.categories).padStart(2, '0') %></dt>
            <dd>categorias</dd>
          </div>
          <div>
            <dt>02</dt>
            <dd>modalidades</dd>
          </div>
        </dl>
      </div>
      <div class="home-hero__art reveal reveal--delay-2">
        <div class="home-logo-plaque">
          <img src="<%= url('/images/logo.jpg') %>" alt="<%= settings.nomeLoja %>" width="1600" height="1285" fetchpriority="high">
        </div>
        <span class="home-hero__script" aria-hidden="true">Oportunidades para todos os dias</span>
        <div class="home-hero__seal" aria-hidden="true">
          <span>Atacado</span>
          <i></i>
          <span>Varejo</span>
        </div>
      </div>
    </div>
  </section>

  <section class="home-showcase" aria-label="Destaques e promoções">
    <div class="container">
      <div class="section-heading section-heading--split">
        <div>
          <p class="eyebrow eyebrow--line">No ar agora</p>
          <h2>Ofertas que valem a visita.</h2>
        </div>
        <p class="section-heading__aside">Promoções do dia, ofertas da semana e novidades selecionadas para você.</p>
      </div>

      <div class="carousel" data-carousel data-autoplay="6500">
        <div class="carousel__track">
          <% if (banners.length) { %>
            <% banners.forEach(function(banner, index) { %>
            <article class="carousel__slide <%= index === 0 ? 'is-active' : '' %>" data-slide aria-hidden="<%= index === 0 ? 'false' : 'true' %>">
              <img class="carousel__image" src="<%= url(banner.imagem) %>" alt="<%= banner.alt || '' %>" style="object-position: <%= banner.foco || 'center' %>" <%= index === 0 ? 'fetchpriority="high"' : 'loading="lazy"' %> decoding="async" width="2400" height="1000">
              <span class="carousel__shade" aria-hidden="true"></span>
              <div class="carousel__content">
                <p class="carousel__eyebrow"><%= banner.etiqueta %></p>
                <h3><%= banner.titulo %></h3>
                <p><%= banner.subtitulo %></p>
                <% if (banner.cta && banner.link) { %>
                <a class="btn btn--cream" href="<%= url(banner.link) %>"><%= banner.cta %><%- icon('arrow-right') %></a>
                <% } %>
              </div>
            </article>
            <% }); %>
          <% } else { %>
            <article class="carousel__slide is-active" data-slide>
              <span class="carousel__fallback" aria-hidden="true"></span>
              <div class="carousel__content">
                <p class="carousel__eyebrow">Bem-vindo</p>
                <h3>Uma vitrine de oportunidades para você.</h3>
                <p>Explore nosso catálogo de atacado e varejo.</p>
                <a class="btn btn--cream" href="<%= url('/varejo') %>">Ver catálogo<%- icon('arrow-right') %></a>
              </div>
            </article>
          <% } %>
        </div>

        <% if (banners.length > 1) { %>
        <div class="carousel__footer">
          <div class="carousel__dots" role="tablist" aria-label="Selecionar destaque">
            <% banners.forEach(function(banner, index) { %>
            <button class="carousel__dot <%= index === 0 ? 'is-active' : '' %>" type="button" data-carousel-dot="<%= index %>" role="tab" aria-selected="<%= index === 0 ? 'true' : 'false' %>" aria-label="<%= index + 1 %>: <%= banner.etiqueta %>"></button>
            <% }); %>
          </div>
          <div class="carousel__controls">
            <button class="carousel__arrow" type="button" data-carousel-prev aria-label="Destaque anterior"><%- icon('arrow-left') %></button>
            <span class="carousel__counter" data-carousel-counter>01 / <%= String(banners.length).padStart(2, '0') %></span>
            <button class="carousel__arrow" type="button" data-carousel-next aria-label="Próximo destaque"><%- icon('arrow-right') %></button>
          </div>
        </div>
        <% } %>
      </div>
    </div>
  </section>

  <section class="modes-section" id="modalidades">
    <div class="container">
      <div class="section-heading section-heading--center">
        <p class="eyebrow eyebrow--line">Escolha como comprar</p>
        <h2>Qual vitrine combina com você?</h2>
        <p class="section-heading__lead">Você escolhe. A gente prepara os preços e o atendimento do jeito que você precisa.</p>
      </div>

      <div class="mode-grid">
        <a class="mode-card mode-card--atacado reveal" href="<%= url('/atacado') %>">
          <div class="mode-card__top">
            <span class="mode-card__number">01</span>
            <span class="mode-card__badge"><%- icon('package') %> Compra em quantidade</span>
          </div>
          <div class="mode-card__content">
            <h3>Atacado</h3>
            <p>Para revender, abastecer ou comprar em quantidade. Preços por unidade com pedido mínimo em cada produto.</p>
          </div>
          <div class="mode-card__bottom">
            <span>Entrar no catálogo<small>Mínimo a partir de 2 unidades</small></span>
            <span class="mode-card__arrow"><%- icon('arrow-up-right') %></span>
          </div>
          <span class="mode-card__pattern" aria-hidden="true"></span>
        </a>

        <a class="mode-card mode-card--varejo reveal reveal--delay-1" href="<%= url('/varejo') %>">
          <div class="mode-card__top">
            <span class="mode-card__number">02</span>
            <span class="mode-card__badge"><%- icon('tag') %> Compra unitária</span>
          </div>
          <div class="mode-card__content">
            <h3>Varejo</h3>
            <p>Para a sua casa, para presentear ou repor o que faltou. Preços de vitrine, sem pedido mínimo.</p>
          </div>
          <div class="mode-card__bottom">
            <span>Entrar no catálogo<small>Compre a partir de 1 unidade</small></span>
            <span class="mode-card__arrow"><%- icon('arrow-up-right') %></span>
          </div>
          <span class="mode-card__pattern" aria-hidden="true"></span>
        </a>
      </div>
    </div>
  </section>

  <section class="about-section" id="sobre">
    <div class="container about-grid">
      <div class="about-copy">
        <p class="eyebrow eyebrow--line">Sobre a loja</p>
        <h2><%= settings.sobreTitulo %></h2>
        <p class="about-copy__text"><%= settings.sobreTexto %></p>
        <ul class="feature-list">
          <li>
            <span class="feature-list__icon"><%- icon('sparkles') %></span>
            <span><strong>Seleção que faz sentido</strong>Produtos de utilidade, presentes e itens para o dia a dia em um só catálogo.</span>
          </li>
          <li>
            <span class="feature-list__icon"><%- icon('store') %></span>
            <span><strong>Atacado e varejo, de verdade</strong>Duas formas de comprar, com preços e condições pensados para cada perfil.</span>
          </li>
          <li>
            <span class="feature-list__icon"><%- icon('whatsapp') %></span>
            <span><strong>Atendimento próximo</strong>Fale diretamente com a equipe pelo WhatsApp e combine os detalhes do seu pedido.</span>
          </li>
        </ul>
        <a class="text-link" href="<%= whatsappUrl %>" target="_blank" rel="noopener">
          Falar com a loja
          <span class="text-link__arrow"><%- icon('arrow-right') %></span>
        </a>
      </div>

      <aside class="store-card">
        <div class="store-card__glow" aria-hidden="true"></div>
        <div class="store-card__head">
          <span class="store-card__emblem"><img src="<%= url('/images/logo-emblem.jpg') %>" alt="" width="96" height="96" loading="lazy"></span>
          <div>
            <p class="eyebrow">Informações</p>
            <h3>Venha nos conhecer.</h3>
          </div>
        </div>
        <div class="store-card__info">
          <div class="store-card__row">
            <span class="store-card__icon"><%- icon('map-pin') %></span>
            <div>
              <small>Endereço</small>
              <p><%= settings.endereco %><br><%= settings.cidade %></p>
            </div>
          </div>
          <div class="store-card__row">
            <span class="store-card__icon"><%- icon('clock') %></span>
            <div>
              <small>Horário de atendimento</small>
              <p class="pre-line"><%= settings.horario %></p>
            </div>
          </div>
          <div class="store-card__row">
            <span class="store-card__icon"><%- icon('whatsapp') %></span>
            <div>
              <small>WhatsApp</small>
              <p><a href="<%= whatsappUrl %>" target="_blank" rel="noopener"><%= settings.whatsappExibicao %></a></p>
            </div>
          </div>
          <% if (settings.email) { %>
          <div class="store-card__row">
            <span class="store-card__icon"><%- icon('mail') %></span>
            <div>
              <small>E-mail</small>
              <p><a href="mailto:<%= settings.email %>"><%= settings.email %></a></p>
            </div>
          </div>
          <% } %>
        </div>
        <a class="btn btn--gold store-card__cta" href="<%= whatsappUrl %>" target="_blank" rel="noopener">
          <%- icon('whatsapp') %>
          Tirar dúvidas no WhatsApp
        </a>
      </aside>
    </div>
  </section>

  <section class="closing-band">
    <div class="container closing-band__inner">
      <div>
        <p class="eyebrow">Pronto para escolher?</p>
        <h2>A sua próxima oportunidade está a um clique.</h2>
      </div>
      <div class="closing-band__actions">
        <a class="btn btn--cream" href="<%= url('/atacado') %>">Comprar no atacado<%- icon('arrow-right') %></a>
        <a class="btn btn--ghost-light" href="<%= url('/varejo') %>">Comprar no varejo</a>
      </div>
    </div>
  </section>
</main>

<%- include('partials/footer', { whatsappUrl }) %>
<script src="<%= url('/js/home.js') %>?v=<%= assetVersion %>" defer></script>
</body>
</html>
