<?php /** /app/views/public/home.php */ ?>

<section class="hero">
  <?php if (!empty($config['banner_principal'])): ?>
    <div class="hero__bg" style="background-image:url('<?= upload_url($config['banner_principal']) ?>')"></div>
  <?php endif; ?>
  <div class="container hero__inner">
    <span class="hero__tag"><?= e($config['marca_slogan'] ?? 'Coleção OFFICE') ?></span>
    <h1><?= e($config['banner_titulo'] ?? 'Elegância em cada olhar') ?></h1>
    <p><?= e($config['banner_subtitulo'] ?? 'Descubra a nova coleção — design autoral, materiais premium e proteção máxima.') ?></p>
    <div style="display:flex;gap:14px;flex-wrap:wrap">
      <a href="<?= url('catalogo') ?>" class="btn btn-light">Ver Catálogo</a>
      <a href="<?= url('sobre') ?>" class="btn btn-outline" style="color:#fff;border-color:#fff">Sobre a marca</a>
    </div>
  </div>
</section>

<?php if (!empty($destaques)): ?>
<section>
  <div class="container">
    <div class="section-title">
      <span class="tag">Selecionados</span>
      <h2>Destaques da coleção</h2>
    </div>
    <div class="products-grid">
      <?php foreach ($destaques as $p): ?>
        <a class="product-card" href="<?= url('produto/' . $p['slug']) ?>">
          <div class="product-card__img">
            <?php if ($p['destaque']): ?><span class="product-card__badge">Destaque</span><?php endif; ?>
            <?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>
            <?php if (!empty($p['mostrar_preco']) && !empty($p['preco'])): ?>
              <div class="product-card__price"><?= price((float)$p['preco']) ?></div>
            <?php endif; ?>
          </div>
        </a>
      <?php endforeach; ?>
    </div>
    <div style="text-align:center;margin-top:40px">
      <a href="<?= url('catalogo') ?>" class="btn">Ver todos os modelos</a>
    </div>
  </div>
</section>
<?php endif; ?>

<?php if (!empty($categorias)): ?>
<section style="background: var(--color-soft)">
  <div class="container">
    <div class="section-title">
      <span class="tag">Navegue</span>
      <h2>Explore por categoria</h2>
    </div>
    <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px">
      <?php foreach (array_slice($categorias, 0, 4) as $cat): ?>
        <a href="<?= url('catalogo?categoria=' . $cat['slug']) ?>"
           style="display:block;padding:48px 24px;background:#fff;text-align:center;transition:.3s"
           onmouseover="this.style.boxShadow='0 12px 40px rgba(0,0,0,.08)'"
           onmouseout="this.style.boxShadow='none'">
          <div style="font-family:'Cormorant Garamond',serif;font-size:1.6rem"><?= e($cat['nome']) ?></div>
          <div style="color:var(--color-muted);margin-top:8px;font-size:.85rem;letter-spacing:.2em;text-transform:uppercase">Ver modelos</div>
        </a>
      <?php endforeach; ?>
    </div>
  </div>
</section>
<?php endif; ?>

<section>
  <div class="container" style="max-width:820px;text-align:center">
    <span class="tag" style="font-size:.78rem;letter-spacing:.32em;text-transform:uppercase;color:var(--color-gold);margin-bottom:12px;display:block">Sobre a OFFICE</span>
    <h2><?= e($config['sobre_titulo'] ?? 'Sobre a OFFICE') ?></h2>
    <p style="font-size:1.05rem;color:var(--color-muted);max-width:640px;margin:24px auto 32px">
      <?= nl2br(e($config['sobre_texto'] ?? '')) ?>
    </p>
    <a href="<?= url('catalogo') ?>" class="btn btn-gold">Conheça a coleção</a>
  </div>
</section>
