<?php 
error_reporting(E_ALL);
ini_set('display_errors', 1);
include 'includes/header.php'; 
include 'includes/navbar.php'; 
?>

<!-- Local Tours Hero -->
<div class="local-hero" style="min-height: 40vh; background: var(--secondary); display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; padding-top: 100px; padding-bottom: 50px;">
    <div class="container">
        <h6 class="reveal-up" style="letter-spacing: 5px; text-transform: uppercase; color: var(--primary); font-size: 18px;">Discover Sri Lanka</h6>
        <h1 class="fw-bold reveal-up" style="letter-spacing: -2px; font-size: clamp(40px, 8vw, 80px);">SRI LANKA TOURS</h1>
        <p class="lead reveal-up" style="max-width: 600px; margin: 20px auto 0;">Explore the ancient heritage and natural wonders of the Pearl of the Indian Ocean.</p>
    </div>
</div>

<section class="py-5" style="background: #fdfcfb;">
    <div class="container">
        <div class="section-title text-center mb-5">
            <h6 class="reveal-up" style="color: var(--primary); text-transform: uppercase; letter-spacing: 3px;">Ancient Wonders</h6>
            <h2 class="reveal-up" style="font-size: 42px; font-weight: 800;">Sri Lankan Heritage</h2>
        </div>

        <div class="row g-4 justify-content-center">
            <?php
            $local_res = $conn->query("SELECT * FROM local_tours ORDER BY id ASC");
            if($local_res && $local_res->num_rows > 0):
                while($t = $local_res->fetch_assoc()):
                $wa_link = "https://wa.me/" . (!empty($settings['whatsapp_number']) ? $settings['whatsapp_number'] : '94771957420') . "?text=" . urlencode("Interested in " . $t['title'] . " local tour.");
                $t_img = !empty($t['main_image']) ? "uploads/".$t['main_image'] : "";
            ?>
            <div class="col-md-6 col-lg-4 reveal-up">
                <a href="local-tour-detail.php?id=<?= $t['id'] ?>" style="text-decoration: none; color: inherit;">
                <div class="card border-0 shadow-sm overflow-hidden h-100" style="border-radius: 35px; transition: 0.4s; border-top: 5px solid var(--primary);">
                    <?php if($t_img): ?>
                    <div style="position: relative; height: 250px; overflow: hidden;">
                        <img src="<?= $t_img ?>" class="w-100 h-100" style="object-fit: cover;">
                    </div>
                    <?php endif; ?>
                    <div class="card-body p-5 d-flex flex-column">
                        <div class="mb-2 text-primary fw-bold small text-uppercase" style="letter-spacing: 2px;"><?= htmlspecialchars($t['location']) ?></div>
                        <h4 class="fw-bold mb-3"><?= htmlspecialchars($t['title']) ?></h4>
                        <p class="text-muted mb-4" style="line-height: 1.8;"><?= htmlspecialchars($t['description']) ?></p>
                        <div class="mt-auto">
                            <div class="d-flex justify-content-between align-items-center mb-4 pt-4 border-top">
                                <div>
                                    <span class="text-muted small d-block">Starting from</span>
                                    <span class="text-primary fw-bold h4 mb-0">LKR <?= number_format($t['price'], 0) ?></span>
                                </div>
                            </div>
                            <div class="d-flex gap-2">
                                <a href="local-tour-detail.php?id=<?= $t['id'] ?>" class="btn btn-outline-primary rounded-pill flex-grow-1 py-3 fw-bold" style="font-size: 14px;">View Details</a>
                                <a href="<?= $wa_link ?>" target="_blank" class="btn btn-success rounded-pill flex-grow-1 py-3 fw-bold" style="background: #25D366; border: none; font-size: 14px;">
                                    <i class="fab fa-whatsapp me-2"></i> Inquiry
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                </a>
            </div>
            <?php 
                endwhile;
            else:
            ?>
            <div class="col-12 text-center py-5">
                <p class="text-muted">No local tours available at the moment. Please check back later.</p>
            </div>
            <?php endif; ?>
        </div>
    </div>
</section>

<style>
.local-hero {
    position: relative;
    overflow: hidden;
}
.card:hover {
    transform: translateY(-10px);
    box-shadow: 0 30px 60px rgba(0,0,0,0.08) !important;
}
@media (max-width: 768px) {
    .local-hero {
        margin-top: 150px !important;
        min-height: auto !important;
    }
}
</style>

<script>
    gsap.registerPlugin(ScrollTrigger);

    // fadeInUp with Stagger
    const revealUp = document.querySelectorAll('.reveal-up');
    revealUp.forEach((el, i) => {
        gsap.fromTo(el,
            { opacity: 0, y: 100 },
            {
                scrollTrigger: {
                    trigger: el,
                    start: "top 90%",
                    toggleActions: "play none none none"
                },
                opacity: 1,
                y: 0,
                duration: 1.5,
                ease: "expo.out",
                delay: i * 0.05
            }
        );
    });
</script>

<?php include 'includes/footer.php'; ?>
