        <?php $topannonces = $_SESSION['topannonces']; ?>

        <?php if(count($topannonces)>0){ ?>

<section class="results">
    <h3><?= trad('Top listing'); ?></h3>

    <p>

 
        <?php if($keyword) echo trad('for')." <b>".htmlspecialchars($keyword)."</b>"; ?>
        <?php if($location && $location != "Localisation") echo trad('to')." <b>".htmlspecialchars($location)."</b>"; ?>
    </p>
</section>

<style>
.listings {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 15px;
    margin-top: 10px;
}

.listing {
    display: block;
    text-decoration: none;
    color: inherit;
    border: 1px solid #ddd;
    border-radius: 10px;
    overflow: hidden;
    transition: box-shadow 0.2s, transform 0.1s;
    background: #fff;
}

.listing:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transform: translateY(-2px);
}

.thumb img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    background: #f0f0f0;
}

.listing .title {
    font-size: 16px;
    font-weight: 700;
    margin: 8px 10px 4px 10px;
}

.listing .desc {
    font-size: 14px;
    color: #444;
    margin: 0 10px 8px 10px;
    height: 35px;
    overflow: hidden;
}

.meta {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    font-size: 14px;
}

.price {
    font-weight: 700;
    color: #d9534f;
}

.ville {
    color: #555;
}
</style>

<style>
.badge-photos {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0,0,0,0.7);
    color: #fff;
    padding: 3px 7px;
    font-size: 12px;
    border-radius: 6px;
}
.thumb {
    position: relative;
}
</style>

<section class="featured-section">
    <div class="listings">
        <?php foreach($topannonces as $annonce){

            // --- Gestion photos multiples ---
            $photos = [];
            $field = trim($annonce['photo'] ?? '');
            if ($field !== '') {
                $photos = array_map('trim', explode(',', $field));
            }

            $mainPhoto = $photos[0] ?? "/img/default-ad.webp";
            $extraCount = count($photos) - 1; // nombre de photos restantes
        ?>
            <a href="index.php?p=details&ref=<?= urlencode($annonce['ref']) ?>" class="listing">

                <div class="thumb">
                    <img id="mainPhoto<?= $annonce['ref'] ?>" 
                         src="<?= htmlspecialchars($mainPhoto) ?>" 
                         alt="">

                    <?php if ($extraCount > 0): ?>
                        <div class="badge-photos">+<?= $extraCount ?></div>

                      
                    <?php endif; ?>
                </div>

                <div class="title"><?= htmlspecialchars($annonce['titre']) ?></div>

                <div class="meta">
                    <div class="price">
                        <?= htmlspecialchars($annonce['prix']) ?> <?= $_SESSION['devise'] ?>
                    </div>
                    <div class="ville"><?= htmlspecialchars($annonce['ville']) ?></div>
                </div>

            </a>
        <?php } ?>
    </div>
</section>

        <?php } ?>
