<?php
if (! function_exists('ps_e')) {
    function ps_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 = 'STORE.com – ' . $subcategory . ' Problem to Solution';
$year = date('Y');
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= ps_e($pageTitle) ?></title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body class="bg-light-gradient">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <header class="header">
        <div class="container-fluid header-row">
            <a href="#" class="logo"><?= ps_e($brand) ?></a>
            <span class="header-pill">Problem → Solution</span>
        </div>
    </header>

    <div class="main-container custom-container">
        <section class="card border border-color radius-18 card-shadow bg-color-white p-4">
            <?php if ($updated !== ''): ?>
                <p class="sp-eyebrow text-xs">Updated <?= ps_e($updated) ?> · <?= ps_e($brand) ?></p>
            <?php endif; ?>
            <h1 class="sp-h1 heading-lg color-content fw-800">The problem, then the <?= ps_e(strtolower($subcategory)) ?> that fits it</h1>
            <p class="text-md color-muted">Start from the buying issue, then match the product built to solve it.</p>
        </section>

        <section id="products" class="mb-3 mt-4">
            <?php foreach ($products as $index => $product):
                $name = $product['name'] ?? 'Untitled product';
                $image = $product['image_url'] ?? '';
                $url = $product['retailer_url'] ?? '#';
                $bestFor = $product['best_for'] ?? '';
                $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'] ?? ($bestFor !== '' ? $bestFor : 'A better fit');
                $solutionCopy = $product['why_it_stands_out'] ?? ($product['summary_short'] ?? '');
                $price = $product['price'] ?? '';
                $rating = $product['rating'] ?? '';
                $reviews = $product['review_count'] ?? '';
            ?>
            <div class="bg-color-white border border-color radius-18 p-0 mb-3 shadow1-sm">
                <div class="product-body story-split">
                    <div class="row g-2 mb-3">
                        <div class="col-md-6">
                            <div class="bg-color-gray-50 border border-color p-3 rounded-3 h-100 story-box">
                                <p class="product-kicker text-xs mb-2">The problem</p>
                                <h3 class="text-lg fw-700 color-content mb-1"><?= ps_e($problemTitle) ?></h3>
                                <?php if ($problemCopy !== ''): ?>
                                    <p class="text-sm color-muted"><?= ps_e($problemCopy) ?></p>
                                <?php endif; ?>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="bg-color-green-100 border border-color-green-50 p-3 rounded-3 h-100 story-box">
                                <p class="product-kicker text-color-green text-xs mb-2">The solution</p>
                                <h3 class="text-lg fw-700 color-content mb-1"><?= ps_e($solutionTitle) ?></h3>
                                <?php if ($solutionCopy !== ''): ?>
                                    <p class="text-sm color-muted"><?= ps_e($solutionCopy) ?></p>
                                <?php endif; ?>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="product-img">
                    <?php if ($image !== ''): ?>
                        <img src="<?= ps_e($image) ?>" alt="<?= ps_e($name) ?>" loading="lazy">
                    <?php endif; ?>
                </div>
                <div class="product-body">
                    <?php if ($bestFor !== ''): ?>
                        <p class="product-kicker text-color-green text-xs"><?= ps_e($bestFor) ?></p>
                    <?php endif; ?>
                    <div class="product-top">
                        <h2 class="product-name"><?= ps_e($name) ?></h2>
                        <div class="price-block">
                            <?php if ($price !== ''): ?>
                                <div class="price"><?= ps_e($price) ?></div>
                            <?php endif; ?>
                            <?php if ($rating !== '' || $reviews !== ''): ?>
                                <div class="rating"><?= ps_e(trim($rating . ($rating !== '' ? '/5' : '') . ($reviews !== '' ? ' · ' . $reviews . ' reviews' : ''))) ?></div>
                            <?php endif; ?>
                        </div>
                    </div>
                    <?php if ($pros): ?>
                        <ul class="pro-list mb-3">
                            <?php foreach ($pros as $pro): ?>
                                <li><?= ps_e($pro) ?></li>
                            <?php endforeach; ?>
                        </ul>
                    <?php endif; ?>
                    <div class="row g-2 mb-0">
                        <div class="col-md-6">
                            <a href="<?= ps_e($url) ?>" class="btn-amazon mt-0" target="_blank" rel="noopener noreferrer">Shop this solution on <?= ps_e($brand) ?></a>
                        </div>
                    </div>
                </div>
            </div>
            <?php endforeach; ?>
        </section>

        <div class="card border border-color radius-18 card-shadow bg-color-white p-md-4 p-3 mt-4">
            <p class="mb-2 text-md color-content fw-700">How this page is built</p>
            <p class="text-sm color-muted">store.com aggregates and summarizes published insights from multiple product review sources to help shoppers compare products faster. Pricing, ratings, and retailer details may change, so always confirm the latest information on the retailer page before buying.</p>
        </div>
    </div>

    <footer class="footer text-center">
        © <?= (int) $year ?> STORE.com · <a href="#" class="text-decoration-underline">Privacy policy</a> · <a href="#" class="text-decoration-underline"> Terms of Use </a>
    </footer>
    <script src="script.js"></script>
</body>
</html>
