<?php include('config.php'); ?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Luxury Sites - Explorer</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        body { background: #0f172a; color: white; font-family: sans-serif; text-align: center; margin: 0; }
        .header { padding: 30px; background: #1e293b; border-bottom: 2px solid #fbbf24; }
        .btn { background: none; border: 1px solid #fbbf24; color: #fbbf24; padding: 10px 20px; cursor: pointer; margin: 5px; border-radius: 5px; font-weight: bold; }
        .btn:hover { background: #fbbf24; color: #1e293b; }
        .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; padding: 30px; }
        .card { background: #1e293b; border-radius: 10px; overflow: hidden; border: 1px solid #334155; }
        .card img { width: 100%; height: 250px; object-fit: cover; }
    </style>
</head>
<body>
<div class="header">
    <a href="api.php" style="float:left; color:#fbbf24; text-decoration:none;">← Home</a>
    <h1>💎 Luxury Sites Viewer</h1>
    <button class="btn" onclick="fetchImages('Luxury Resort Maldives')">Maldives</button>
    <button class="btn" onclick="fetchImages('Paris Luxury Hotel')">Paris</button>
    <button class="btn" onclick="fetchImages('Dubai Marina Luxury')">Dubai</button>
    <button class="btn" onclick="fetchImages('Switzerland Alpine')">Switzerland</button>
</div>

<div class="gallery" id="gallery_area"></div>

<script>
async function fetchImages(query) {
    const apiKey = 'JZQcQc92r3hDonRJGpMmI7x01Bk080BTPbzhQyX0TLG2yE6HSSR64p50';
    $('#gallery_area').html('<p>Loading Luxury Views...</p>');

    try {
        const res = await fetch(`https://api.pexels.com/v1/search?query=${query}&per_page=12`, {
            headers: { Authorization: apiKey }
        });
        const data = await res.json();
        let html = '';
        data.photos.forEach(p => {
            html += `<div class="card"><img src="${p.src.large}"><p style="padding:10px;">${p.photographer}</p></div>`;
        });
        $('#gallery_area').html(html);

        // Database mein save karne ke liye
        $.post('save_log.php', { dest: query });

    } catch (e) { $('#gallery_area').html('Error loading images.'); }
}
fetchImages('Luxury Travel');
</script>
</body>
</html>