<?php
if (! function_exists('feat_e')) {
    function feat_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 . ' Features';
$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><?= feat_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"><img src="../assets/img/logo.png" alt="logo"></a>
            <span class="header-pill"><?= feat_e($subcategory) ?></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 <?= feat_e($updated) ?> · <?= feat_e($brand) ?></p>
            <?php endif; ?>
            <h1 class="sp-h1 heading-lg color-content fw-800">What each <?= feat_e(strtolower($subcategory)) ?> is built to do</h1>
            <p class="text-md color-muted">Each pick broken down by the features that change how it works — size, extras, and what sits alongside the core layout.</p>
            <div class="row">
                <div class="col-xl-6 col-md-6 col-sm-12">
                    <a href="#products" class="button-style bg-color-white border border-color color-content text-sm fw-800">Shop Top Picks</a>
                </div>
            </div>
        </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'] ?? '';
                $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'] : [];
                $kicker = trim($bestFor . ($productBrand !== '' ? ' · ' . $productBrand : ''));
            ?>
            <div class="bg-color-white border border-color radius-18 p-0 mb-3 shadow1-sm">
                <div class="product-img">
                    <?php if ($image !== ''): ?>
                        <img src="<?= feat_e($image) ?>" alt="<?= feat_e($name) ?>" loading="lazy">
                    <?php endif; ?>
                </div>
                <div class="product-body">
                    <?php if ($kicker !== ''): ?>
                        <p class="product-kicker text-color-green text-xs"><?= feat_e($kicker) ?></p>
                    <?php endif; ?>
                    <h2 class="product-name"><?= feat_e($name) ?></h2>
                    <?php if ($lead !== ''): ?>
                        <p class="product-summary"><?= feat_e($lead) ?></p>
                    <?php endif; ?>

                    <?php if ($chips): ?>
                        <div class="row g-2 mb-3">
                            <?php foreach ($chips as $i => $chip): ?>
                                <div class="col-md-4">
                                    <div class="bg-color-gray-50 border border-color p-3 rounded-3 h-100 feature-tile-box">
                                        <p class="text-lg fw-700 color-content mb-1"><?= feat_e($chip) ?></p>
                                        <?php if (!empty($pros[$i])): ?>
                                            <p class="text-sm color-muted"><?= feat_e($pros[$i]) ?></p>
                                        <?php endif; ?>
                                    </div>
                                </div>
                            <?php endforeach; ?>
                        </div>
                    <?php endif; ?>

                    <?php if ($pros): ?>
                        <div class="detail-box">
                            <p class="text-lg fw-700 color-content mb-2">Why these features matter</p>
                            <ul class="pro-list">
                                <?php foreach ($pros as $pro): ?>
                                    <li><?= feat_e($pro) ?></li>
                                <?php endforeach; ?>
                            </ul>
                        </div>
                    <?php endif; ?>

                    <div class="row g-2 mb-0 mt-3">
                        <div class="col-md-6">
                            <a href="<?= feat_e($url) ?>" class="btn-amazon mt-0" target="_blank" rel="noopener noreferrer">View on <?= feat_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>
