<?php
$variation = 'benefits';
/**
 * product-roundup-template.php
 *
 * Dynamic version of the "Top 5" product roundup page.
 * Expects a $data array (already json_decode($json, true)) shaped like:
 *
 * {
 *   "Brand": "Office Depot",              // retailer name shown in CTA buttons
 *   "category": "Office Furniture",
 *   "subcategory": "Corner & L-Shaped Desks",
 *   "updated": "March 2026",
 *   "hero_title": "The Best L-Shaped Desks ...",
 *   "products": [
 *     {
 *       "name": "...", "brand": "...", "best_for": "Best Overall",
 *       "price": "$379.99", "rating": "4.3", "review_count": "1,834",
 *       "image_url": "...", "retailer_url": "...",
 *       "chips": ["...","...","..."],
 *       "summary": "...", "summary_short": "...",
 *       "pros": ["...","...","..."], "cons": ["...","..."]
 *     },
 *     ...
 *   ]
 * }
 *
 * Usage:
 *   $json = file_get_contents('data.json');
 *   $data = json_decode($json, true);
 *   include 'product-roundup-template.php';
 */

if (!isset($data) || !is_array($data)) {
    throw new InvalidArgumentException('product-roundup-template.php requires a $data array before it is included.');
}

// ---- Helpers -------------------------------------------------------------

if (! function_exists('ro_e')) {
    /** Escape for safe HTML output */
    function ro_e($value) {
        return htmlspecialchars((string) ($value ?? ''), ENT_QUOTES, 'UTF-8');
    }

    /** Pull a value out of an array with a fallback */
    function ro_get($arr, $key, $fallback = '') {
        return (isset($arr[$key]) && $arr[$key] !== null && $arr[$key] !== '') ? $arr[$key] : $fallback;
    }

    function ro_badge_class($index, $best_for, $classes) {
        $text = strtolower((string) $best_for);
        if (strpos($text, 'overall') !== false || strpos($text, 'top') !== false) return 'top-pick';
        if (strpos($text, 'value') !== false || strpos($text, 'rated') !== false) return 'highest-rated';
        if (strpos($text, 'premium') !== false || strpos($text, 'modern') !== false) return 'premium';
        return $classes[$index % count($classes)] === 'top-pick' ? 'best-for' : $classes[$index % count($classes)];
    }
}

// Badge styling cycles through these classes based on rank / best_for text
$ro_badge_classes = ['top-pick', 'highest-rated', 'best-for', 'premium'];

$retailer   = ro_get($data, 'Brand', 'Retailer');
$category   = ro_get($data, 'category', '');
$subcat     = ro_get($data, 'subcategory', $category);
$updated    = ro_get($data, 'updated', '');
$heroTitle  = ro_get($data, 'hero_title', 'The Top Picks');
$pageIntro  = ro_get(
    $data,
    'page_intro',
    'A ranked, reviewed roundup of the best ' . strtolower($subcat) . ' — updated with current pricing and shopper ratings.'
);
$products   = ro_get($data, 'products', []);
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title><?= ro_e($retailer) ?> – <?= ro_e($subcat) ?></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="dermstore-theme aggressive-variant">
  <header class="topbar">
    <a href="#" class="brand"><span class="brand-store"><?= ro_e($retailer) ?></span></a>
    <span class="state-pill"><?= ro_e($subcat) ?></span>
  </header>

  <main class="page-shell">

    <section class="page-header" aria-label="Category overview">
      <p class="page-eyebrow">Updated <?= ro_e($updated) ?></p>
      <h1 class="page-title"><?= ro_e($heroTitle) ?></h1>
      <p class="page-intro"><?= ro_e($pageIntro) ?></p>
    </section>

    <section class="product-rows" aria-label="Top <?= ro_e(count($products)) ?> <?= ro_e($subcat) ?>">

      <?php foreach ($products as $i => $p):
          $rank        = $i + 1;
          $name        = ro_get($p, 'name');
          $image       = ro_get($p, 'image_url');
          $url         = ro_get($p, 'retailer_url', '#');
          $bestFor     = ro_get($p, 'best_for', '');
          $badgeClass  = ro_badge_class($i, $bestFor, $ro_badge_classes);
          $rating      = ro_get($p, 'rating', null);
          $reviewCount = ro_get($p, 'review_count', null);
          $summary     = ro_get($p, 'summary_short', ro_get($p, 'summary', ''));
          $chips       = ro_get($p, 'chips', []);
          $pros        = ro_get($p, 'pros', []);
          $price       = ro_get($p, 'price', null);
      ?>
      <details class="product-row">
        <summary class="product-row-summary">
          <a class="row-overlay-link" href="<?= ro_e($url) ?>" target="_blank" rel="noopener noreferrer" aria-label="Open <?= ro_e($name) ?> on Shop at <?= ro_e($retailer) ?>" tabindex="-1"></a>
          <div class="row-thumb-wrap">
            <span class="row-rank"><?= ro_e($rank) ?></span>
            <a class="row-thumb-link" href="<?= ro_e($url) ?>" target="_blank" rel="noopener noreferrer" aria-label="Open <?= ro_e($name) ?> retailer page">
              <?php if ($image): ?>
              <img class="row-thumb" src="<?= ro_e($image) ?>" alt="<?= ro_e($name) ?>" loading="lazy" />
              <?php endif; ?>
            </a>
          </div>
          <div class="row-meta">
            <h3 class="row-name"><?= ro_e($name) ?></h3>
            <p class="row-badges">
              <?php if ($bestFor): ?>
              <span class="row-best-for <?= ro_e($badgeClass) ?>"><?= ro_e($bestFor) ?></span>
              <?php endif; ?>
              <span class="row-chevron row-chevron-inline" aria-label="Show details">
                <span class="row-chevron-label">Show details</span>
                <span class="row-chevron-arrow" aria-hidden="true">▾</span>
              </span>
            </p>
          </div>
          <a href="<?= ro_e($url) ?>" class="row-cta-amazon" target="_blank" rel="noopener noreferrer" aria-label="Shop <?= ro_e($name) ?> at <?= ro_e($retailer) ?>">Shop at <?= ro_e($retailer) ?></a>
          <span class="row-chevron row-chevron-bottom" aria-hidden="true">
            <span class="row-chevron-label">Show details</span>
            <span class="row-chevron-arrow" aria-hidden="true">▾</span>
          </span>
        </summary>
        <div class="product-row-details">
          <?php if ($rating || $reviewCount): ?>
          <div class="row-expanded-stats">
            <div class="row-stats-text">
              <?php if ($rating): ?><span class="row-star" aria-hidden="true">★</span><span class="row-rating"><?= ro_e($rating) ?></span><?php endif; ?>
              <?php if ($rating && $reviewCount): ?><span class="row-stats-sep" aria-hidden="true">·</span><?php endif; ?>
              <?php if ($reviewCount): ?>
              <a class="row-reviews-link" href="<?= ro_e($url) ?>" target="_blank" rel="noopener noreferrer" aria-label="Read <?= ro_e($name) ?> reviews"><?= ro_e($reviewCount) ?> reviews <span class="row-reviews-arrow" aria-hidden="true">↗</span></a>
              <?php endif; ?>
              <?php if ($price): ?><span class="row-stats-sep" aria-hidden="true">·</span><span class="row-price"><?= ro_e($price) ?></span><?php endif; ?>
            </div>
          </div>
          <?php endif; ?>

          <?php if ($summary): ?>
          <p class="row-summary-text"><?= ro_e($summary) ?></p>
          <?php endif; ?>

          <?php if (!empty($chips)): ?>
          <ul class="row-chips">
            <?php foreach ($chips as $chip): ?>
            <li><?= ro_e($chip) ?></li>
            <?php endforeach; ?>
          </ul>
          <?php endif; ?>

          <?php if (!empty($pros)): ?>
          <ul class="row-pros">
            <?php foreach ($pros as $pro): ?>
            <li><?= ro_e($pro) ?></li>
            <?php endforeach; ?>
          </ul>
          <?php endif; ?>

          <a href="<?= ro_e($url) ?>" class="row-cta-amazon-large" target="_blank" rel="noopener noreferrer">Shop at <?= ro_e($retailer) ?> →</a>
        </div>
      </details>

      <?php endforeach; ?>

    </section>

  </main>

  <footer class="site-footer">
    <p>© <?= ro_e(date('Y')) ?> <?= ro_e($retailer) ?></p>
  </footer>

</body>
</html>

