<?php
$variation = 'features';
/** Expects $data as already-decoded category JSON. */

if (!function_exists('cmp_e')) {
    function cmp_e($value): string
    {
        return htmlspecialchars((string) $value, ENT_QUOTES, 'UTF-8');
    }
}

$brand       = $data['Brand'] ?? 'Retailer';
$subcategory = $data['subcategory'] ?? 'Products';
$updated     = $data['updated'] ?? '';
$products    = is_array($data['products'] ?? null) ? $data['products'] : [];
$pageTitle   = 'rateit.com – ' . $subcategory . ' Features';
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title><?= cmp_e($pageTitle) ?></title>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400&display=swap" />
  <link rel="stylesheet" href="style.css" />
</head>
<body class="features-theme">
  <header class="topbar">
    <a href="../index.html" class="brand"><span class="brand-store"><?= cmp_e($brand) ?></span></a>
    <span class="state-pill"><?= cmp_e($subcategory) ?></span>
  </header>

  <main class="page-shell">
    <section class="page-header" aria-label="Category overview">
      <?php if ($updated !== ''): ?>
        <p class="page-eyebrow">Updated <?= cmp_e($updated) ?></p>
      <?php endif; ?>
      <h1 class="page-title">What each <?= cmp_e(strtolower($subcategory)) ?> is built to do</h1>
      <p class="page-intro">Each pick broken down by the features that change how it works in a real workspace — size, extras, and what sits alongside the core layout.</p>
    </section>

    <section class="feature-stack" aria-label="Product features">
      <?php foreach ($products as $index => $product):
          $rank = $index + 1;
          $name = $product['name'] ?? 'Untitled product';
          $image = $product['image_url'] ?? '';
          $url = $product['retailer_url'] ?? '#';
          $bestFor = $product['best_for'] ?? '';
          $productBrand = $product['brand'] ?? '';
          $lead = $product['summary_short'] ?? ($product['why_short'] ?? '');
          $chips = is_array($product['chips'] ?? null) ? $product['chips'] : [];
          $pros = is_array($product['pros'] ?? null) ? $product['pros'] : [];
          $kickerParts = array_filter([$bestFor, $productBrand]);
          $tiles = [];
          $tileCount = max(count($chips), 1);
          for ($i = 0; $i < $tileCount; $i++) {
              $chip = $chips[$i] ?? ($product['certification'] ?? 'Feature');
              $tiles[] = [
                  'icon' => substr((string) $chip, 0, 2),
                  'title' => $chip,
                  'copy' => $pros[$i] ?? ($product['why_short'] ?? $lead),
              ];
          }
          if (!$tiles && !empty($product['certification'])) {
              $tiles[] = [
                  'icon' => '✓',
                  'title' => $product['certification'],
                  'copy' => $product['why_short'] ?? $lead,
              ];
          }
      ?>
      <article class="feature-card">
        <div class="feature-card-top">
          <div class="feature-media">
            <span class="feature-rank"><?= (int) $rank ?></span>
            <a href="<?= cmp_e($url) ?>" target="_blank" rel="noopener noreferrer">
              <?php if ($image !== ''): ?>
                <img src="<?= cmp_e($image) ?>" alt="<?= cmp_e($name) ?>" />
              <?php endif; ?>
            </a>
          </div>
          <div>
            <?php if ($kickerParts): ?>
              <p class="feature-kicker"><?= cmp_e(implode(' · ', $kickerParts)) ?></p>
            <?php endif; ?>
            <h2><?= cmp_e($name) ?></h2>
            <?php if ($lead !== ''): ?>
              <p class="lead"><?= cmp_e($lead) ?></p>
            <?php endif; ?>
          </div>
        </div>
        <?php if ($tiles): ?>
          <div class="feature-tiles">
            <?php foreach ($tiles as $tile): ?>
              <div class="feature-tile">
                <span class="icon"><?= cmp_e($tile['icon']) ?></span>
                <h3><?= cmp_e($tile['title']) ?></h3>
                <?php if (!empty($tile['copy'])): ?>
                  <p><?= cmp_e($tile['copy']) ?></p>
                <?php endif; ?>
              </div>
            <?php endforeach; ?>
          </div>
        <?php endif; ?>
        <div class="feature-why">
          <h3>Why these features matter</h3>
          <?php if ($pros): ?>
            <ul>
              <?php foreach ($pros as $pro): ?>
                <li><?= cmp_e($pro) ?></li>
              <?php endforeach; ?>
            </ul>
          <?php elseif (!empty($product['why_it_stands_out'])): ?>
            <ul>
              <li><?= cmp_e($product['why_it_stands_out']) ?></li>
            </ul>
          <?php endif; ?>
          <a class="feature-cta" href="<?= cmp_e($url) ?>" target="_blank" rel="noopener noreferrer">Shop at <?= cmp_e($brand) ?> →</a>
        </div>
      </article>
      <?php endforeach; ?>
    </section>
  </main>

  <footer class="site-footer">
    <p>© <?= date('Y') ?> <?= cmp_e($brand) ?> </p>
  </footer>
</body>
</html>


