<?php /** /app/views/public/produto.php */
$imagens = $produto['imagens'] ?? [];
$principal = $imagens[0] ?? null;
?>

<section style="padding: 48px 0">
  <div class="container">

    <div style="font-size:.82rem;color:var(--color-muted);margin-bottom:32px">
      <a href="<?= url() ?>">Home</a> /
      <a href="<?= url('catalogo') ?>">Catálogo</a>
      <?php if (!empty($produto['categoria_slug'])): ?>
      / <a href="<?= url('catalogo?categoria=' . $produto['categoria_slug']) ?>"><?= e($produto['categoria_nome']) ?></a>
      <?php endif; ?>
      / <?= e($produto['nome']) ?>
    </div>

    <div class="product-detail">

      <!-- GALERIA -->
      <div>
        <div class="gallery-main">
          <?php if ($principal): ?>
            <img id="gallery-main-img" src="<?= upload_url($principal['arquivo']) ?>" alt="<?= e($produto['nome']) ?>">
          <?php else: ?>
            <div style="height:100%;display:flex;align-items:center;justify-content:center;color:#c3bcad;font-size:5rem">◎</div>
          <?php endif; ?>
        </div>

        <?php if (count($imagens) > 1): ?>
          <div class="gallery-thumbs">
            <?php foreach ($imagens as $i => $img): ?>
              <img class="<?= $i === 0 ? 'active' : '' ?>"
                   src="<?= upload_url($img['arquivo']) ?>"
                   data-full="<?= upload_url($img['arquivo']) ?>"
                   alt="">
            <?php endforeach; ?>
          </div>
        <?php endif; ?>
      </div>

      <!-- INFO -->
      <div class="product-info">
        <div class="product-info__sku">
          <?= e($produto['sku']) ?>
          <?php if (!empty($produto['colecao_nome'])): ?> · <?= e($produto['colecao_nome']) ?><?php endif; ?>
        </div>
        <h1><?= e($produto['nome']) ?></h1>

        <?php if (!empty($produto['mostrar_preco']) && !empty($produto['preco'])): ?>
          <div class="product-info__price"><?= price((float)$produto['preco']) ?></div>
        <?php endif; ?>

        <?php if (!empty($produto['descricao_curta'])): ?>
          <div class="product-info__desc"><?= nl2br(e($produto['descricao_curta'])) ?></div>
        <?php endif; ?>

        <?php if (!empty($produto['variacoes'])): ?>
          <div style="margin-bottom:12px;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase">
            Cores disponíveis
          </div>
          <div class="color-swatches">
            <?php foreach ($produto['variacoes'] as $v): ?>
              <div class="color-swatch"
                   data-id="<?= (int)$v['id'] ?>"
                   title="<?= e(($v['cor'] ?? '') . ($v['cor_lente'] ? ' / ' . $v['cor_lente'] : '')) ?>"
                   style="background: <?= e($v['cor_hex'] ?? '#ddd') ?>"></div>
            <?php endforeach; ?>
          </div>
        <?php endif; ?>

        <form action="<?= url('carrinho/adicionar') ?>" method="post" style="margin-top:24px">
          <?= csrf_field() ?>
          <input type="hidden" name="produto_id" value="<?= (int)$produto['id'] ?>">
          <input type="hidden" name="variacao_id" id="variacao_id" value="">
          <input type="hidden" name="quantidade" value="1">
          <button type="submit" class="btn btn-block">+ Adicionar ao meu pedido</button>
        </form>

        <?php if (!empty($config['contato_whatsapp'])):
          $msg = "Olá! Tenho interesse no modelo {$produto['nome']} (código {$produto['sku']}).";
        ?>
          <a href="<?= e(whatsapp_link($config['contato_whatsapp'], $msg)) ?>"
             target="_blank" class="btn btn-whatsapp btn-block" style="margin-top:12px">
            Falar no WhatsApp
          </a>
        <?php endif; ?>

        <div class="product-info__specs">
          <dl>
            <?php if (!empty($produto['material_armacao'])): ?>
              <dt>Armação</dt><dd><?= e($produto['material_armacao']) ?></dd>
            <?php endif; ?>
            <?php if (!empty($produto['tipo_lente'])): ?>
              <dt>Lente</dt><dd><?= e($produto['tipo_lente']) ?></dd>
            <?php endif; ?>
            <?php if (!empty($produto['protecao_uv'])): ?>
              <dt>Proteção UV</dt><dd><?= e($produto['protecao_uv']) ?></dd>
            <?php endif; ?>
            <dt>Polarizado</dt><dd><?= !empty($produto['polarizado']) ? 'Sim' : 'Não' ?></dd>
            <?php if (!empty($produto['medidas'])): ?>
              <dt>Medidas</dt><dd><?= e($produto['medidas']) ?></dd>
            <?php endif; ?>
          </dl>
        </div>

        <?php if (!empty($produto['descricao_completa'])): ?>
          <div>
            <h3 style="font-size:1.15rem">Sobre o modelo</h3>
            <div style="color:var(--color-muted)"><?= nl2br(e($produto['descricao_completa'])) ?></div>
          </div>
        <?php endif; ?>
      </div>
    </div>
  </div>
</section>

<?php if (!empty($relacionados)): ?>
<section style="background: var(--color-soft)">
  <div class="container">
    <div class="section-title">
      <span class="tag">Você também pode gostar</span>
      <h2>Modelos relacionados</h2>
    </div>
    <div class="products-grid">
      <?php foreach ($relacionados as $p): ?>
        <a class="product-card" href="<?= url('produto/' . $p['slug']) ?>">
          <div class="product-card__img">
            <?php if (!empty($p['imagem_principal'])): ?>
              <img src="<?= upload_url($p['imagem_principal']) ?>" alt="<?= e($p['nome']) ?>">
            <?php else: ?>
              <div class="empty">◎</div>
            <?php endif; ?>
          </div>
          <div class="product-card__body">
            <div class="product-card__sku"><?= e($p['sku']) ?></div>
            <div class="product-card__name"><?= e($p['nome']) ?></div>
          </div>
        </a>
      <?php endforeach; ?>
    </div>
  </div>
</section>
<?php endif; ?>
