<?php
$variation = 'problem_solution';
/** 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 . ' Problem to Solution';
?>
<!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="problem-theme">
  <header class="topbar">
    <a href="../index.html" class="brand"><span class="brand-store"><?= cmp_e($brand) ?></span></a>
    <span class="state-pill">Problem → Solution</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">The problem, then the <?= cmp_e(strtolower($subcategory)) ?> that fits it</h1>
      <p class="page-intro">Start from the buying issue, then match the <?= cmp_e(strtolower($subcategory)) ?> built to solve it.</p>
    </section>

    <section class="story-list" aria-label="Problem and solution pairings">
      <?php foreach ($products as $index => $product):
          $rank = $index + 1;
          $name = $product['name'] ?? 'Untitled product';
          $image = $product['image_url'] ?? '';
          $url = $product['retailer_url'] ?? '#';
          $cons = is_array($product['cons'] ?? null) ? $product['cons'] : [];
          $pros = is_array($product['pros'] ?? null) ? $product['pros'] : [];
          $problemTitle = $cons[0] ?? ('Choosing the right ' . strtolower($subcategory));
          $problemCopy = $product['tradeoff_note'] ?? ($cons[1] ?? ($product['summary_short'] ?? ''));
          $solutionTitle = $product['why_short'] ?? ($product['best_for'] ?? 'A better fit');
          $solutionCopy = $product['why_it_stands_out'] ?? ($product['summary_short'] ?? '');
      ?>
      <article class="story-card">
        <div class="story-split">
          <div class="story-problem">
            <p class="story-label">The problem</p>
            <h2><?= cmp_e($problemTitle) ?></h2>
            <?php if ($problemCopy !== ''): ?>
              <p><?= cmp_e($problemCopy) ?></p>
            <?php endif; ?>
          </div>
          <div class="story-arrow" aria-hidden="true">→</div>
          <div class="story-solution">
            <p class="story-label">The solution</p>
            <h2><?= cmp_e($solutionTitle) ?></h2>
            <?php if ($solutionCopy !== ''): ?>
              <p><?= cmp_e($solutionCopy) ?></p>
            <?php endif; ?>
          </div>
        </div>
        <div class="story-product">
          <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>
            <h3><span class="story-rank"><?= (int) $rank ?></span><?= cmp_e($name) ?></h3>
            <?php if ($pros): ?>
              <ul class="how-it-works">
                <?php foreach ($pros as $pro): ?>
                  <li><?= cmp_e($pro) ?></li>
                <?php endforeach; ?>
              </ul>
            <?php endif; ?>
            <a class="story-cta" href="<?= cmp_e($url) ?>" target="_blank" rel="noopener noreferrer">Shop this solution at <?= cmp_e($brand) ?> →</a>
          </div>
        </div>
      </article>
      <?php endforeach; ?>
    </section>
  </main>

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


