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

$brand = $data['Brand'] ?? 'Retailer';
$subcategory = $data['subcategory'] ?? 'Products';
$category = $data['category'] ?? $subcategory;
$updated = $data['updated'] ?? '';
$heroTitle = $data['hero_title'] ?? ('Find the right ' . strtolower($subcategory));
$reviewSources = is_array($data['review_sources'] ?? null) ? $data['review_sources'] : [];
$products = is_array($data['products'] ?? null) ? $data['products'] : [];
$pageTitle = 'STORE.com – ' . $subcategory;
$year = date('Y');

$winnerIndex = 0;
foreach ($products as $i => $product) {
    if (strcasecmp((string) ($product['best_for'] ?? ''), 'Best Overall') === 0) {
        $winnerIndex = $i;
        break;
    }
}

$featured = $products[$winnerIndex] ?? null;
$quickOthers = [];
foreach ($products as $i => $product) {
    if ($i === $winnerIndex) {
        continue;
    }
    if (count($quickOthers) < 2) {
        $quickOthers[] = $product;
    }
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= ben_e($brand) ?></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 -->
    <header class="header">
        <div class="container-fluid">
            <a href="#" class="logo"><?= ben_e($brand) ?></a>
        </div>
    </header>

    <!-- MAIN WRAPPER -->
    <div class="main-container custom-container">
        <section class="card border border-color radius-18 card-shadow bg-color-white p-4">
            <p class="sp-eyebrow text-xs"><?= ben_e($subcategory) ?> - Top picks<?= $updated !== '' ? ' · Updated ' . ben_e($updated) : '' ?></p>
            <h1 class="sp-h1 heading-lg color-content fw-800"><?= ben_e($heroTitle) ?></h1>
            <p class="text-md color-muted">
                Fast comparisons for <?= ben_e(strtolower($category)) ?> — without the tab explosion.
            </p>

            <div class="row">
                <div class="col-xl-6 col-md-6 col-sm-12">
                    <a href="#quickPicks" class="button-style bg-color-white border border-color color-content text-sm fw-800">Shop Top Picks</a>
                </div>
                <div class="col-xl-6 col-md-6 col-sm-12">
                    <a href="#comparison" class="button-style bg-color-white border border-color color-content text-sm fw-800 mt-md-0 mt-2">Compare</a>
                </div>
            </div>
        </section>

        <section id="quickPicks" class="my-3">
            <?php if ($featured):
                $name = $featured['name'] ?? 'Untitled product';
                $image = $featured['image_url'] ?? '';
                $url = $featured['retailer_url'] ?? '#';
                $bestFor = $featured['best_for'] ?? '';
                $price = $featured['price'] ?? '';
                $listPrice = $featured['list_price'] ?? null;
                $rating = $featured['rating'] ?? '';
                $reviews = $featured['review_count'] ?? '';
                $lead = $featured['why_short'] ?? ($featured['summary_short'] ?? '');
            ?>
            <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="<?= ben_e($image) ?>" alt="<?= ben_e($name) ?>" loading="lazy">
                    <?php endif; ?>
                </div>
                <div class="product-body">
                    <?php if ($bestFor !== ''): ?>
                        <p class="product-kicker text-color-green text-xs"><?= ben_e($bestFor) ?></p>
                    <?php endif; ?>
                    <h2 class="product-name"><?= ben_e($name) ?></h2>
                    <div class="quick-meta">
                        <?php if ($price !== ''): ?>
                            <span class="price-tag"><?= ben_e($price) ?><?php if (!empty($listPrice)): ?> <span class="old-price2"><?= ben_e($listPrice) ?></span><?php endif; ?></span>
                        <?php endif; ?>
                        <?php if ($rating !== '' || $reviews !== ''): ?>
                            <span class="rating-tag"><?= ben_e(trim($rating . ($rating !== '' ? '/5' : '') . ($reviews !== '' ? ' · ' . $reviews . ' reviews' : ''))) ?></span>
                        <?php endif; ?>
                    </div>
                    <?php if ($lead !== ''): ?>
                        <p class="text-sm color-muted my-3"><?= ben_e($lead) ?></p>
                    <?php endif; ?>
                    <a href="<?= ben_e($url) ?>" class="btn-amazon" target="_blank" rel="noopener noreferrer">View on <?= ben_e($brand) ?></a>
                </div>
            </div>
            <?php endif; ?>

            <?php if ($quickOthers): ?>
            <div class="row g-3">
                <?php foreach ($quickOthers as $product):
                    $name = $product['name'] ?? 'Untitled product';
                    $image = $product['image_url'] ?? '';
                    $url = $product['retailer_url'] ?? '#';
                    $bestFor = $product['best_for'] ?? '';
                    $price = $product['price'] ?? '';
                    $listPrice = $product['list_price'] ?? null;
                    $rating = $product['rating'] ?? '';
                    $reviews = $product['review_count'] ?? '';
                    $lead = $product['why_short'] ?? ($product['summary_short'] ?? '');
                ?>
                <div class="col-md-6">
                    <div class="bg-color-white border border-color radius-18 p-0 h-100 shadow1-sm d-flex justify-content-between flex-column">
                        <div class="product-img">
                            <?php if ($image !== ''): ?>
                                <img src="<?= ben_e($image) ?>" alt="<?= ben_e($name) ?>" loading="lazy">
                            <?php endif; ?>
                        </div>
                        <div class="product-body">
                            <?php if ($bestFor !== ''): ?>
                                <p class="fw-700 mb-2 product-kicker text-color-green text-xs"><?= ben_e($bestFor) ?></p>
                            <?php endif; ?>
                            <h2 class="product-name"><?= ben_e($name) ?></h2>
                            <div class="quick-meta">
                                <?php if ($price !== ''): ?>
                                    <span class="price-tag"><?= ben_e($price) ?><?php if (!empty($listPrice)): ?> <span class="old-price2"><?= ben_e($listPrice) ?></span><?php endif; ?></span>
                                <?php endif; ?>
                                <?php if ($rating !== '' || $reviews !== ''): ?>
                                    <span class="rating-tag"><?= ben_e(trim($rating . ($rating !== '' ? '/5' : '') . ($reviews !== '' ? ' · ' . $reviews . ' reviews' : ''))) ?></span>
                                <?php endif; ?>
                            </div>
                            <?php if ($lead !== ''): ?>
                                <p class="text-sm color-muted my-3"><?= ben_e($lead) ?></p>
                            <?php endif; ?>
                            <a href="<?= ben_e($url) ?>" class="btn-amazon" target="_blank" rel="noopener noreferrer">View on <?= ben_e($brand) ?></a>
                        </div>
                    </div>
                </div>
                <?php endforeach; ?>
            </div>
            <?php endif; ?>
        </section>

        <!-- ── PRODUCT DETAIL CARDS ── -->
        <section id="products" class="mb-3">
            <?php foreach ($products as $product):
                $name = $product['name'] ?? 'Untitled product';
                $image = $product['image_url'] ?? '';
                $url = $product['retailer_url'] ?? '#';
                $bestFor = $product['best_for'] ?? '';
                $price = $product['price'] ?? '';
                $listPrice = $product['list_price'] ?? null;
                $discount = $product['discount'] ?? null;
                $rating = $product['rating'] ?? '';
                $reviews = $product['review_count'] ?? '';
                $summary = $product['summary'] ?? ($product['summary_short'] ?? '');
                $chips = is_array($product['chips'] ?? null) ? $product['chips'] : [];
                $why = $product['why_it_stands_out'] ?? '';
                $tradeoff = $product['tradeoff_note'] ?? '';
            ?>
            <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="<?= ben_e($image) ?>" alt="<?= ben_e($name) ?>" loading="lazy">
                    <?php endif; ?>
                </div>
                <div class="product-body">
                    <div>
                        <div class="product-top">
                            <div>
                                <?php if ($bestFor !== ''): ?>
                                    <p class="product-kicker text-color-green text-xs"><?= ben_e($bestFor) ?></p>
                                <?php endif; ?>
                                <h2 class="product-name"><?= ben_e($name) ?></h2>
                            </div>
                            <div class="price-block">
                                <?php if ($price !== ''): ?>
                                    <div class="price"><?= ben_e($price) ?><?php if (!empty($listPrice)): ?> <span class="old-price"><?= ben_e($listPrice) ?></span><?php endif; ?></div>
                                <?php endif; ?>
                                <?php if ($rating !== '' || $reviews !== ''): ?>
                                    <div class="rating"><?= ben_e(trim($rating . ($rating !== '' ? '/5' : '') . ($reviews !== '' ? ' · ' . $reviews . ' reviews' : ''))) ?></div>
                                <?php endif; ?>
                            </div>
                        </div>
                        <?php if ($summary !== ''): ?>
                            <p class="product-summary"><?= ben_e($summary) ?></p>
                        <?php endif; ?>
                        <?php if ($chips): ?>
                            <div class="chip-row">
                                <?php foreach ($chips as $chip): ?>
                                    <span class="chip"><?= ben_e($chip) ?></span>
                                <?php endforeach; ?>
                            </div>
                        <?php endif; ?>
                    </div>
                    <div class="row g-2 mb-3">
                        <?php if ($why !== ''): ?>
                            <div class="col-md-6">
                                <div class="bg-color-gray-50 border border-color p-3 rounded-3 h-100">
                                    <p class="text-lg fw-700 color-content mb-1">Why it shows up often</p>
                                    <p class="text-sm color-muted"><?= ben_e($why) ?></p>
                                </div>
                            </div>
                        <?php endif; ?>
                        <?php if ($tradeoff !== ''): ?>
                            <div class="col-md-6">
                                <div class="bg-color-gray-50 border border-color p-3 rounded-3 h-100">
                                    <p class="text-lg fw-700 color-content mb-1">Tradeoff to know</p>
                                    <p class="text-sm color-muted"><?= ben_e($tradeoff) ?></p>
                                </div>
                            </div>
                        <?php endif; ?>
                    </div>
                    <?php if (!empty($discount)): ?>
                        <div class="price-note">✓ <?= ben_e($discount) ?> — a good time to buy</div>
                    <?php endif; ?>
                    <div class="row g-2 mb-0 mt-0">
                        <div class="col-md-6 mt-0">
                            <a href="<?= ben_e($url) ?>" class="btn-amazon mt-0" target="_blank" rel="noopener noreferrer">View on <?= ben_e($brand) ?></a>
                        </div>
                    </div>
                </div>
            </div>
            <?php endforeach; ?>
        </section>

        <!-- ── COMPARISON ── -->
        <section class="mt-0" id="comparison">
            <p class="sp-section-eyebrow mb-2 product-kicker">Quick comparison</p>
            <h2 class="sp-section-title text-md fw-700 color-content">Compare all options</h2>
            <div class="compare-card-main row g-3">
                <?php foreach ($products as $index => $product):
                    $name = $product['name'] ?? 'Untitled product';
                    $bestFor = $product['best_for'] ?? '—';
                    $chips = is_array($product['chips'] ?? null) ? $product['chips'] : [];
                    $highlight = $product['convertibility'] ?? ($chips[0] ?? '—');
                    $extra = $product['certification'] ?? ($chips[1] ?? '—');
                    $rating = $product['rating'] ?? '—';
                    $price = $product['price'] ?? '—';
                    $colClass = ($index === count($products) - 1 && count($products) % 3 !== 0) ? 'col-md-4 col-sm-12' : 'col-md-4 col-sm-6';
                ?>
                <div class="<?= $colClass ?>">
                    <article class="compare-card">
                        <h3 class="text-md color-content fw-700 mb-3"><?= ben_e($name) ?></h3>
                        <ul class="list ps-3 d-flex flex-column mb-0">
                            <li class="text-md color-muted mb-0"><strong>Often recommended for: </strong><?= ben_e($bestFor) ?></li>
                            <li class="text-md color-muted mb-0"><strong>Standout: </strong><?= ben_e($highlight) ?></li>
                            <li class="text-md color-muted mb-0"><strong>Extra: </strong><?= ben_e($extra) ?></li>
                            <li class="text-md color-muted mb-0"><strong>Rating: </strong><?= ben_e($rating) ?>/5</li>
                            <li class="text-md color-muted mb-0"><strong>Price: </strong><?= ben_e($price) ?></li>
                        </ul>
                    </article>
                </div>
                <?php endforeach; ?>
            </div>
        </section>

        <?php if ($reviewSources): ?>
        <section class="mt-4">
            <div class="card border-0 border-color radius-18 bg-color-white p-md-4 p-3">
                <h6 class="mb-3 text-sm color-content fw-700">Sources we reviewed</h6>
                <ul class="ps-0 d-flex flex-column gap-2 mb-0">
                    <?php foreach ($reviewSources as $source): ?>
                        <li class="color-muted text-xs"><?= ben_e(is_array($source) ? implode(' — ', $source) : $source) ?></li>
                    <?php endforeach; ?>
                </ul>
            </div>
        </section>
        <?php endif; ?>

        <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 -->
    <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>
