<?php
require __DIR__ . '/inc/bootstrap.php';

$banners = db()->query('SELECT * FROM banners WHERE ativo = 1 ORDER BY ordem, id')->fetchAll();
$destaques = buscar_produtos(['destaque' => 1], 8);
$promocoes = buscar_produtos(['promocao' => 1], 4);
$novidades = buscar_produtos([], 8);
$categoriasHome = categorias_ativas();

require __DIR__ . '/inc/header.php';

$heroLink = cfg('hero_link') ?: url('produtos.php');
$heroImg = cfg('hero_imagem') ?: 'assets/hero-lingerie.webp';
?>

<?php if (!$banners): ?>
<!-- Banner principal (textos e foto editáveis em Configurações > Página inicial) -->
<section class="cetim relative overflow-hidden">
  <img src="<?= e(img_url($heroImg)) ?>" alt="" class="absolute right-0 top-0 h-full w-[40%] lg:w-[38%] object-cover object-[center_35%]"
       style="-webkit-mask-image: linear-gradient(to right, transparent 0, #000 22%); mask-image: linear-gradient(to right, transparent 0, #000 22%);">
  <div class="relative max-w-7xl mx-auto px-4 sm:px-8 py-12 sm:py-20 lg:py-24">
    <a href="<?= e($heroLink) ?>" class="block w-[66%] lg:w-[52%] text-center">
      <?php if (cfg('hero_topo')): ?>
        <p class="flex items-center gap-3 sm:gap-5 justify-center text-[13px] sm:text-lg lg:text-xl tracking-[.45em] font-medium">
          <span class="h-px flex-1 max-w-[90px] bg-pk/70"></span><?= e(cfg('hero_topo')) ?><span class="h-px flex-1 max-w-[90px] bg-pk/70"></span>
        </p>
      <?php endif; ?>
      <h1 class="font-display font-extrabold text-[44px] leading-none sm:text-7xl lg:text-8xl mt-2 sm:mt-3 tracking-tight"><?= e(cfg('hero_titulo')) ?></h1>
      <?php if (cfg('hero_script1')): ?>
        <p class="font-script text-[34px] sm:text-6xl lg:text-7xl leading-tight mt-1 sm:mt-2"><?= e(cfg('hero_script1')) ?></p>
        <svg class="mx-auto -mt-1 w-[75%] h-6 sm:h-8 text-pk" viewBox="0 0 300 30" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true">
          <path d="M10 18c60 0 100 1 128 0M162 18c40-1 90-4 130-12"/><path d="M150 26s-12-7-12-13a6 6 0 0 1 12-2 6 6 0 0 1 12 2c0 6-12 13-12 13Z"/>
        </svg>
      <?php endif; ?>
      <?php if (cfg('hero_meio')): ?><p class="font-display text-[30px] sm:text-5xl lg:text-6xl mt-2 sm:mt-4 tracking-wide"><?= e(cfg('hero_meio')) ?></p><?php endif; ?>
      <?php if (cfg('hero_script2')): ?>
        <p class="font-script text-[78px] sm:text-[130px] lg:text-[150px] leading-[.9] mt-1 relative inline-block">
          <?= e(cfg('hero_script2')) ?>
          <svg class="absolute -right-10 sm:-right-16 top-2 w-10 h-10 sm:w-16 sm:h-16" viewBox="0 0 40 40" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><path d="M20 34S5 25 5 14a8 8 0 0 1 15-4 8 8 0 0 1 15 4c0 11-15 20-15 20Z"/></svg>
        </p>
      <?php endif; ?>
      <?php if (cfg('hero_botao')): ?>
        <span class="block"></span>
        <span class="mt-5 sm:mt-8 inline-flex items-center gap-3 bg-pk text-white rounded-full px-8 sm:px-12 py-3.5 sm:py-4 text-sm sm:text-lg font-semibold tracking-wide shadow-lg shadow-pk/20 hover:opacity-90 transition">
          <?= e(cfg('hero_botao')) ?>
          <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2.2" viewBox="0 0 24 24"><path d="m9 6 6 6-6 6"/></svg>
        </span>
      <?php endif; ?>
    </a>
  </div>
</section>

<?php else: ?>
<!-- Banners enviados pelo painel -->
<section class="relative" data-carrossel>
  <div class="relative w-full aspect-[4/5] sm:aspect-[16/7] lg:aspect-[16/6] overflow-hidden bg-pk2">
    <?php foreach ($banners as $n => $b): ?>
      <div data-slide class="absolute inset-0 transition-opacity duration-1000 <?= $n === 0 ? 'opacity-100' : 'opacity-0' ?>">
        <?php if ($b['link']): ?><a href="<?= e($b['link']) ?>" class="absolute inset-0 z-10" aria-label="<?= e($b['titulo'] ?: 'Banner') ?>"></a><?php endif; ?>
        <picture>
          <?php if ($b['imagem_mobile']): ?><source media="(max-width: 640px)" srcset="<?= e(img_url($b['imagem_mobile'])) ?>"><?php endif; ?>
          <img src="<?= e(img_url($b['imagem'])) ?>" alt="<?= e($b['titulo']) ?>" class="w-full h-full object-cover" <?= $n ? 'loading="lazy"' : '' ?>>
        </picture>
        <?php if ($b['titulo'] || $b['subtitulo']): ?>
          <div class="absolute inset-0 bg-gradient-to-t sm:bg-gradient-to-r from-black/40 via-black/5 to-transparent"></div>
          <div class="absolute inset-x-0 bottom-0 sm:inset-y-0 sm:right-auto flex flex-col justify-end sm:justify-center p-8 sm:p-16 max-w-xl text-white">
            <?php if ($b['titulo']): ?><h2 class="font-display font-bold text-4xl sm:text-6xl leading-[1.05]"><?= e($b['titulo']) ?></h2><?php endif; ?>
            <?php if ($b['subtitulo']): ?><p class="mt-3 text-sm sm:text-lg text-white/90"><?= e($b['subtitulo']) ?></p><?php endif; ?>
            <?php if ($b['texto_botao'] && $b['link']): ?>
              <span class="mt-6 inline-flex self-start items-center gap-2 bg-pk text-white text-sm font-semibold px-8 py-3.5 rounded-full"><?= e($b['texto_botao']) ?> ›</span>
            <?php endif; ?>
          </div>
        <?php endif; ?>
      </div>
    <?php endforeach; ?>
  </div>
  <?php if (count($banners) > 1): ?>
    <button data-prev class="hidden sm:flex absolute z-20 left-4 top-1/2 -translate-y-1/2 w-11 h-11 rounded-full bg-white/80 items-center justify-center hover:bg-white text-xl" aria-label="Anterior">‹</button>
    <button data-next class="hidden sm:flex absolute z-20 right-4 top-1/2 -translate-y-1/2 w-11 h-11 rounded-full bg-white/80 items-center justify-center hover:bg-white text-xl" aria-label="Próximo">›</button>
    <div class="absolute z-20 bottom-4 inset-x-0 flex justify-center gap-2">
      <?php foreach ($banners as $n => $b): ?>
        <button data-dot class="h-2 w-2 rounded-full bg-white/50 transition-all <?= $n === 0 ? '!bg-white w-6' : '' ?>" aria-label="Banner <?= $n + 1 ?>"></button>
      <?php endforeach; ?>
    </div>
  <?php endif; ?>
</section>
<?php endif; ?>

<!-- Benefícios -->
<section class="bg-pk2 border-y border-pk/10">
  <div class="max-w-5xl mx-auto px-2 py-5 sm:py-6 grid grid-cols-3 divide-x divide-pk/30">
    <?php
    $icones = [
      '<path d="M12 3 4.5 6v5.5c0 4.6 3.2 8.4 7.5 9.5 4.3-1.1 7.5-4.9 7.5-9.5V6L12 3Z"/><path d="m8.8 12 2.2 2.2 4.2-4.4"/>',
      '<path d="M8 6h9v9H8zM17 9h3l2.5 3v3H17M1 8h5M2.5 11h4M4 14h3"/><circle cx="10.5" cy="17" r="1.8"/><circle cx="19.5" cy="17" r="1.8"/>',
      '<rect x="2.5" y="5.5" width="19" height="13" rx="2"/><path d="M2.5 10h19M6 15h4"/>',
    ];
    for ($i = 1; $i <= 3; $i++): ?>
      <div class="flex flex-col sm:flex-row items-center justify-center gap-2 sm:gap-4 px-2 text-center sm:text-left">
        <svg class="w-9 h-9 sm:w-11 sm:h-11 shrink-0" fill="none" stroke="currentColor" stroke-width="1.4" viewBox="0 0 24 24" aria-hidden="true"><?= $icones[$i - 1] ?></svg>
        <p class="text-[10px] sm:text-sm leading-tight uppercase tracking-wide">
          <span class="font-semibold block"><?= e(cfg("beneficio{$i}_titulo")) ?></span><?= e(cfg("beneficio{$i}_texto")) ?>
        </p>
      </div>
    <?php endfor; ?>
  </div>
</section>

<!-- Coleção / categorias -->
<?php if ($categoriasHome): ?>
<section class="max-w-7xl mx-auto px-4 pt-8 sm:pt-12">
  <div class="rounded-[2.5rem] bg-pk2 px-4 sm:px-10 pt-8 pb-10 shadow-[0_10px_40px_-20px_rgb(var(--pk)/.35)]">
    <h2 class="font-script text-[38px] sm:text-6xl text-center flex w-full justify-center items-end whitespace-nowrap">
      <?= e(cfg('titulo_colecao', 'Descubra nossa coleção')) ?>
      <svg class="w-10 h-8 sm:w-20 sm:h-12 -ml-1 shrink-0" viewBox="0 0 80 40" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M2 30c20 4 40 2 60-6M30 18s-8-5-8-10a4.5 4.5 0 0 1 8-2.5A4.5 4.5 0 0 1 38 8c0 5-8 10-8 10Z"/></svg>
    </h2>
    <div class="mt-7 flex gap-5 sm:gap-8 overflow-x-auto no-scrollbar snap-x pb-2 <?= count($categoriasHome) <= 5 ? 'sm:justify-center' : '' ?>">
      <?php foreach ($categoriasHome as $cat): ?>
        <a href="<?= url('produtos.php?cat=' . urlencode($cat['slug'])) ?>" class="group shrink-0 snap-start w-[30%] sm:w-40 text-center">
          <div class="aspect-square rounded-full p-1 bg-gradient-to-b from-pk/70 to-pk/20 group-hover:from-pk group-hover:to-pk/50 transition">
            <div class="w-full h-full rounded-full overflow-hidden bg-pk2 flex items-center justify-center ring-4 ring-pk2">
              <?php if ($cat['imagem']): ?>
                <img src="<?= e(img_url($cat['imagem'])) ?>" alt="<?= e($cat['nome']) ?>" class="w-full h-full object-cover group-hover:scale-105 transition duration-500" loading="lazy">
              <?php else: ?>
                <span class="font-script text-5xl sm:text-6xl"><?= e(mb_substr($cat['nome'], 0, 1)) ?></span>
              <?php endif; ?>
            </div>
          </div>
          <p class="mt-3 text-xs sm:text-sm uppercase tracking-wider font-semibold"><?= e($cat['nome']) ?></p>
        </a>
      <?php endforeach; ?>
    </div>
  </div>
</section>
<?php endif; ?>

<?php
function secao_produtos(string $titulo, array $lista, string $link, string $sub = ''): void
{
    if (!$lista) return; ?>
  <section class="max-w-7xl mx-auto px-4 pt-14">
    <div class="text-center mb-8">
      <?php if ($sub): ?><p class="font-script text-3xl sm:text-4xl leading-none"><?= e($sub) ?></p><?php endif; ?>
      <h2 class="font-display font-bold text-3xl sm:text-4xl uppercase tracking-wide mt-1"><?= e($titulo) ?></h2>
      <div class="flex items-center justify-center gap-3 mt-3 text-pk/70"><span class="h-px w-14 bg-current"></span>♥<span class="h-px w-14 bg-current"></span></div>
    </div>
    <div class="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-6">
      <?php foreach ($lista as $p) include __DIR__ . '/inc/card_produto.php'; ?>
    </div>
    <div class="text-center mt-8">
      <a href="<?= e($link) ?>" class="inline-flex items-center gap-2 border-2 border-pk rounded-full px-8 py-3 text-sm font-semibold uppercase tracking-wide hover:bg-pk hover:text-white transition">Ver todos ›</a>
    </div>
  </section>
<?php }

secao_produtos('Destaques', $destaques, url('produtos.php'), 'escolhidos com carinho');
secao_produtos('Promoções', $promocoes, url('produtos.php?promo=1'), 'aproveite');
if (!$destaques) secao_produtos('Novidades', $novidades, url('produtos.php'), 'acabou de chegar');
?>

<?php if (cfg('instagram')): ?>
<section class="max-w-7xl mx-auto px-4 pt-16 text-center">
  <p class="font-script text-4xl">siga a gente</p>
  <a href="https://instagram.com/<?= e(ltrim(cfg('instagram'), '@')) ?>" target="_blank" rel="noopener" class="font-display font-bold text-2xl sm:text-3xl hover:opacity-70">@<?= e(ltrim(cfg('instagram'), '@')) ?></a>
</section>
<?php endif; ?>

<?php require __DIR__ . '/inc/footer.php'; ?>
