<%- include('partials/head', {
  title,
  pageDescription,
  bodyClass,
  canonical,
  noindex: false,
  ogImage: typeof ogImage !== 'undefined' ? ogImage : null
}) %>
<%- include('partials/catalog-hero', { modo, outroModo, banners, categorias, filtros }) %>
<%- include('partials/store-bar', { modo, outroModo, categorias, filtros }) %>

<main id="conteudo" class="product-main">
  <div class="container">
    <nav class="breadcrumb" aria-label="Você está aqui">
      <a href="<%= url('/') %>">Início</a>
      <span aria-hidden="true">/</span>
      <a href="<%= url('/' + modo) %>"><%= modeLabel(modo) %></a>
      <span aria-hidden="true">/</span>
      <a href="<%= url('/' + modo + '?categoria=' + produto.categoria) %>"><%= categoria ? categoria.nome : 'Produtos' %></a>
      <span aria-hidden="true">/</span>
      <span aria-current="page"><%= produto.nome %></span>
    </nav>

    <div class="product-layout">
      <section class="product-gallery" data-gallery aria-label="Fotos do produto">
        <div class="product-gallery__stage">
          <span class="product-gallery__mode"><%= modeLabel(modo) %></span>
          <img src="<%= url(produto.imagens[0]) %>" alt="<%= produto.nome %>" width="1000" height="1000" fetchpriority="high" decoding="async" data-gallery-main>
          <% if (produto.imagens.length > 1) { %>
          <button class="gallery-arrow gallery-arrow--prev" type="button" data-gallery-prev aria-label="Foto anterior"><%- icon('chevron-left') %></button>
          <button class="gallery-arrow gallery-arrow--next" type="button" data-gallery-next aria-label="Próxima foto"><%- icon('chevron-right') %></button>
          <% } %>
        </div>
        <% if (produto.imagens.length > 1) { %>
        <div class="product-gallery__thumbs" role="group" aria-label="Selecionar foto">
          <% produto.imagens.forEach(function(image, index) { %>
          <button type="button" class="<%= index === 0 ? 'is-active' : '' %>" data-gallery-thumb data-src="<%= url(image) %>" aria-label="Foto <%= index + 1 %>" aria-pressed="<%= index === 0 ? 'true' : 'false' %>">
            <img src="<%= url(image) %>" alt="" width="180" height="180" loading="lazy" decoding="async">
          </button>
          <% }); %>
        </div>
        <% } %>
      </section>

      <section class="product-info">
        <div class="product-info__top">
          <div class="product-info__badges">
            <a class="product-category" href="<%= url('/' + modo + '?categoria=' + produto.categoria) %>"><%- categoryIcon(produto.categoria) %> <%= categoria ? categoria.nome : 'Produto' %></a>
            <% if (produto.destaque) { %><span class="product-highlight"><%- icon('sparkles') %> Destaque</span><% } %>
          </div>
          <div class="product-info__title-row">
            <h1><%= produto.nome %></h1>
            <button class="icon-btn product-share" type="button" data-share aria-label="Compartilhar este produto"><%- icon('share') %></button>
          </div>
          <p class="product-info__short"><%= produto.descricaoCurta %></p>
          <div class="product-sku">
            <span>Código <strong><%= produto.sku %></strong></span>
            <button type="button" class="copy-button" data-copy="<%= produto.sku %>" aria-label="Copiar código do produto"><%- icon('copy') %> Copiar</button>
          </div>
        </div>

        <div class="price-panel">
          <div class="price-panel__head">
            <div>
              <span class="price-panel__label"><%= modo === 'atacado' ? 'Preço no atacado' : 'Preço no varejo' %></span>
              <strong class="price-panel__value"><%= formatBRL(priceFor(produto, modo)) %></strong>
            </div>
            <span class="price-panel__mode"><%- icon(modo === 'atacado' ? 'package' : 'tag') %><%= modo === 'atacado' ? 'Mín. ' + produto.minimoAtacado + ' un.' : 'Sem mínimo' %></span>
          </div>
          <p class="price-panel__note">
            <% if (modo === 'atacado') { %>
              Pedido mínimo de <strong><%= produto.minimoAtacado %> unidades</strong>. Total mínimo de <strong><%= formatBRL(priceFor(produto, modo) * produto.minimoAtacado) %></strong>.
            <% } else { %>
              Compre a partir de <strong>1 unidade</strong>. Preço válido para esta modalidade.
            <% } %>
          </p>
          <div class="price-panel__actions">
            <a class="btn btn--green btn--lg btn--full" href="<%= whatsappUrl %>" target="_blank" rel="noopener">
              <%- icon('whatsapp') %>
              Pedir informações no WhatsApp
            </a>
            <a class="btn btn--ghost btn--full" href="<%= url(switchUrl) %>">
              Ver preço no <%= modeLabel(outroModo).toLowerCase() %>
              <%- icon('arrow-right') %>
            </a>
          </div>
          <p class="price-panel__help"><%- icon('info') %> Ao falar com a loja, informe o código <strong><%= produto.sku %></strong>.</p>
        </div>

        <ul class="product-perks">
          <li><span><%- icon('whatsapp') %></span><strong>Atendimento direto</strong><small>Fale com uma pessoa de verdade</small></li>
          <li><span><%- icon('truck') %></span><strong>Retirada ou entrega</strong><small>Combine com a loja</small></li>
          <li><span><%- icon('shield') %></span><strong>Compra combinada</strong><small>Condições confirmadas no atendimento</small></li>
        </ul>
      </section>
    </div>

    <div class="product-details">
      <section class="product-description">
        <p class="eyebrow eyebrow--line">Conheça melhor</p>
        <h2>Sobre este produto</h2>
        <p><%= produto.descricaoCompleta %></p>
        <% if (produto.caracteristicas && produto.caracteristicas.length) { %>
        <ul class="product-features">
          <% produto.caracteristicas.forEach(function(feature) { %>
          <li><span><%- icon('check') %></span><%= feature %></li>
          <% }); %>
        </ul>
        <% } %>
      </section>

      <aside class="product-specs">
        <h2>Detalhes</h2>
        <dl>
          <div><dt>Código</dt><dd><%= produto.sku %></dd></div>
          <div><dt>Categoria</dt><dd><%= categoria ? categoria.nome : '—' %></dd></div>
          <div><dt>Modalidade</dt><dd><%= modeLabel(modo) %></dd></div>
          <div><dt>Pedido mínimo</dt><dd><%= modo === 'atacado' ? produto.minimoAtacado + ' unidades' : '1 unidade' %></dd></div>
        </dl>
        <p class="product-specs__note">Preços e disponibilidade sujeitos à confirmação no atendimento.</p>
      </aside>
    </div>

    <% const video = videoEmbed(produto.video); %>
    <% if (video) { %>
    <section class="product-video">
      <p class="eyebrow eyebrow--line">Veja de perto</p>
      <h2>Produto em movimento</h2>
      <div class="product-video__frame">
        <iframe src="<%= video.src %>" title="Vídeo do produto <%= produto.nome %>" loading="lazy" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      </div>
    </section>
    <% } %>

    <section class="how-to-buy">
      <div class="section-heading section-heading--center">
        <p class="eyebrow eyebrow--line">Simples assim</p>
        <h2>Como comprar</h2>
      </div>
      <div class="steps">
        <article class="step">
          <span class="step__number">01</span>
          <h3>Escolha os produtos</h3>
          <p>Navegue pelo catálogo de <%= modeLabel(modo).toLowerCase() %> e anote os códigos dos itens que deseja.</p>
        </article>
        <article class="step">
          <span class="step__number">02</span>
          <h3>Fale com a gente</h3>
          <p>Envie a sua lista pelo WhatsApp. A equipe confirma preços, quantidades e disponibilidade.</p>
        </article>
        <article class="step">
          <span class="step__number">03</span>
          <h3>Combine os detalhes</h3>
          <p>Defina a forma de pagamento e a retirada ou entrega do pedido diretamente com a loja.</p>
        </article>
      </div>
    </section>

    <% if (related && related.length) { %>
    <section class="related-section">
      <div class="section-heading section-heading--split">
        <div>
          <p class="eyebrow eyebrow--line">Continue explorando</p>
          <h2>Você também pode gostar</h2>
        </div>
        <a class="text-link" href="<%= url('/' + modo + '?categoria=' + produto.categoria) %>">Ver categoria<span class="text-link__arrow"><%- icon('arrow-right') %></span></a>
      </div>
      <div class="product-grid product-grid--related">
        <%- include('partials/product-cards', { produtos: related, modo, startIndex: 99 }) %>
      </div>
    </section>
    <% } %>
  </div>

  <div class="product-mobile-cta">
    <div>
      <span><%= modo === 'atacado' ? 'No atacado' : 'No varejo' %></span>
      <strong><%= formatBRL(priceFor(produto, modo)) %></strong>
    </div>
    <a class="btn btn--green" href="<%= whatsappUrl %>" target="_blank" rel="noopener"><%- icon('whatsapp') %> Falar no WhatsApp</a>
  </div>
</main>

<%- include('partials/footer', { whatsappUrl }) %>
<script type="application/ld+json"><%- JSON.stringify(jsonLd).replace(/</g, '\\u003c') %></script>
<script src="<%= url('/js/product.js') %>?v=<%= assetVersion %>" defer></script>
</body>
</html>
