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

<style>
.hero-content h1 { 
    text-shadow: 0 10px 30px rgba(0,0,0,0.3); 
    overflow: hidden;
}
    .hero-progress-bar {
        position: absolute;
        bottom: 0;
        left: 0;
        height: 4px;
        background: var(--primary);
        width: 0;
        z-index: 1000;
    }
    /* Fix global centering and overflow */
    section {
        padding: 80px 20px !important;
        overflow: hidden;
    }
    .row {
        margin-right: 0 !important;
        margin-left: 0 !important;
        justify-content: center;
    }
    .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    @media (max-width: 768px) {
        section {
            padding: 50px 15px !important;
        }
        .inquiry-bar {
            margin: 20px 15px !important;
            padding: 20px !important;
            grid-template-columns: 1fr !important;
        }
    }
</style>

<!-- Premium Video Hero Section -->
<section class="hero" style="position: relative; overflow: hidden; height: 100vh; width: 100%; background: #000;">
    <!-- Background Video -->
    <video autoplay muted loop playsinline style="position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: 1; transform: translate(-50%, -50%); object-fit: cover; filter: brightness(0.5);">
        <source src="assets/video/hero.mp4" type="video/mp4">
        <source src="https://assets.mixkit.co/videos/preview/mixkit-top-view-of-a-blue-ocean-with-waves-4131-large.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>

    <!-- Content Overlay -->
    <div class="hero-content" style="position: relative; z-index: 10; height: 100%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #fff; padding: 0 20px;">
        <h6 style="letter-spacing: 8px; font-weight: 500; text-transform: uppercase; margin-bottom: 20px; color: var(--primary); opacity: 1;" class="slide-up">Discover the World</h6>
        <h1 style="font-size: clamp(40px, 8vw, 110px); line-height: 0.9; font-weight: 900; margin-bottom: 30px; letter-spacing: -3px; opacity: 1;" class="slide-up">EXPLORE THE <br> <span style="color: var(--primary);">UNEXPECTED</span></h1>
        <div style="display: flex; gap: 20px; justify-content: center; margin-top: 40px; opacity: 1;" class="slide-up">
            <a href="packages.php" class="btn-inquiry" style="padding: 20px 50px; border-radius: 50px; font-weight: 700; box-shadow: 0 20px 40px rgba(255,107,0,0.3); text-decoration: none; color: #fff; background: var(--primary);">Explore Destinations</a>
        </div>
    </div>

    <!-- Mouse Scroll Indicator -->
    <div style="position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); z-index: 20; opacity: 0.7;" class="reveal-up hide-mobile">
        <div style="width: 25px; height: 45px; border: 2px solid #fff; border-radius: 15px; position: relative;">
            <div style="width: 5px; height: 10px; background: #fff; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); border-radius: 10px; animation: mouseScroll 2s infinite;"></div>
        </div>
    </div>
</section>

<style>
@keyframes mouseScroll {
    0% { transform: translate(-50%, 0); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translate(-50%, 15px); opacity: 0; }
}
</style>
</section>

<!-- Inquiry Bar (Dynamic Destinations) -->
<div class="inquiry-bar reveal-up">
    <form action="packages.php" method="GET" style="display: contents;">
        <div class="inquiry-item">
            <label>Choose Destinations</label>
            <select name="destination">
                <option value="">Anywhere</option>
                <?php
                $dests_list = $conn->query("SELECT * FROM destinations ORDER BY name ASC");
                if ($dests_list) {
                    while ($dl = $dests_list->fetch_assoc()) {
                        echo "<option value='" . $dl['id'] . "'>" . $dl['name'] . "</option>";
                    }
                } else {
                    echo "<!-- Query error: " . $conn->error . " -->";
                }
                ?>
            </select>
        </div>
        <div class="inquiry-item">
            <label>Pax Number</label>
            <input type="number" name="pax" placeholder="1" value="1" min="1">
        </div>
        <div class="inquiry-item">
            <label>Date of Travel</label>
            <input type="date" name="travel_date">
        </div>
        <div class="inquiry-item">
            <label>Phone</label>
            <input type="tel" name="phone" placeholder="Tel">
        </div>
        <button type="submit" class="btn-inquiry">Inquiry Now</button>
    </form>
</div>

<!-- Welcome Section -->
<section id="welcome" style="overflow: hidden;">
    <div class="grid-2">
        <div class="welcome-text">
            <div class="section-title" style="text-align: left;">
                <h6 class="reveal-left">Experience the World</h6>
                <h2 class="reveal-left">Your Gateway to Global Destinations</h2>
            </div>
            <p class="reveal-left">“The world is more than just a destination; it's a collection of stories waiting to be told.” From iconic cityscapes to ancient wonders and vibrant natural landscapes, Methsisila offers an unparalleled journey of discovery. <br><br>
                Since 2008, Methsisila has been crafting unforgettable travel experiences. We enable you to explore the hidden gems of the globe, offering unique itineraries that blend luxury with adventure. Whether you're seeking a tropical escape or a cultural trek, we are your trusted partner in discovering the true spirit of the world.</p>
        </div>
        <div class="welcome-images" style="position: relative; height: 500px;">
            <?php
            // Using new Australian images
            $img1 = "assets/img/welcome_australia_1.png";
            $img2 = "assets/img/welcome_australia_2.png";
            $img3 = "assets/img/welcome_australia_3.png";
            ?>
            <!-- Main Image (Top Right - Rotated) -->
            <div class="memories-img-wrapper reveal-memories-1" style="position: absolute; top: 0; right: 0; width: 75%; z-index: 2; transform: rotate(3deg);">
                <img src="<?= $img1 ?>" style="border: 12px solid #fff; box-shadow: 0 15px 40px rgba(0,0,0,0.2); border-radius: 5px;" onerror="this.src='https://images.pexels.com/photos/2444403/pexels-photo-2444403.jpeg?auto=compress&cs=tinysrgb&w=600'">
            </div>
            <!-- Secondary Image (Bottom Right - Tucked Behind) -->
            <div class="memories-img-wrapper reveal-memories-2" style="position: absolute; bottom: 40px; right: 10%; width: 65%; z-index: 1;">
                <img src="<?= $img2 ?>" style="border: 12px solid #fff; box-shadow: 0 15px 40px rgba(0,0,0,0.15); border-radius: 5px;" onerror="this.src='https://images.pexels.com/photos/4388167/pexels-photo-4388167.jpeg?auto=compress&cs=tinysrgb&w=600'">
            </div>
            <!-- Polaroid Image (Foreground Left - High Tilt) -->
            <div class="memories-img-wrapper reveal-memories-3" style="position: absolute; bottom: 0; left: 0; width: 45%; z-index: 3; transform: rotate(-8deg);">
                <img src="<?= $img3 ?>" style="border: 10px solid #fff; border-bottom: 35px solid #fff; box-shadow: 0 20px 50px rgba(0,0,0,0.25); border-radius: 2px;" onerror="this.src='https://images.pexels.com/photos/1647121/pexels-photo-1647121.jpeg?auto=compress&cs=tinysrgb&w=600'">
            </div>
        </div>
    </div>
</section>

<!-- Plan Section (Weather & Info) -->
<section id="plan" style="background: var(--bg-light); padding: 100px 50px; overflow: hidden;">
    <div class="grid-2">
        <div class="reveal-left">
            <div class="section-title" style="text-align: left;">
                <h6 style="color: var(--primary);">Plan your trip</h6>
                <h2>Discover your next adventure</h2>
            </div>
            <p style="color: #666; font-size: 18px; line-height: 1.8;">Whether you’re chasing adventure, serenity, or cultural connection, Methsisila welcomes you with open arms. Discover the world's most iconic destinations with expert guidance and premium comfort.</p>
        </div>
        <!-- Weather Card (Animated & Live) -->
        <div class="reveal-right weather-card-live"
            style="background: url('https://images.pexels.com/photos/1102915/pexels-photo-1102915.jpeg?auto=compress&cs=tinysrgb&w=600'); background-size: cover; border-radius: 30px; overflow: hidden; height: 400px; position: relative; color: #fff; box-shadow: 0 20px 40px rgba(0,0,0,0.2);">
            <div
                style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.3); backdrop-filter: blur(12px); padding: 50px; display: flex; flex-direction: column; justify-content: center;">
                <div style="display: flex; justify-content: space-between; align-items: center;">
                    <div>
                        <h4 style="margin: 0; display: flex; align-items: center; font-weight: 500; letter-spacing: 1px;" class="float-anim"><i class="fas fa-map-marker-alt" style="margin-right: 12px; color: var(--primary);"></i> CURRENT LOCATION</h4>
                        <h1 style="font-size: 100px; margin: 15px 0; font-weight: 900; line-height: 1;" class="pulse-anim">29°<span style="font-size: 40px; vertical-align: top; font-weight: 300;">C</span></h1>
                    </div>
                    <div style="text-align: right;">
                        <img src="https://cdn-icons-png.flaticon.com/512/1163/1163657.png" style="width: 100px; filter: invert(1);" class="float-anim">
                        <p style="text-transform: uppercase; letter-spacing: 3px; font-weight: 800; margin-top: 15px; color: var(--primary);">LIGHT RAIN</p>
                    </div>
                </div>
                <div style="margin-top: 30px; padding-top: 30px; border-top: 1px solid rgba(255,255,255,0.2); display: flex; gap: 30px;">
                    <div><span style="display: block; font-size: 11px; opacity: 0.7; letter-spacing: 1px;">HUMIDITY</span><span style="font-weight: 700;">78%</span></div>
                    <div><span style="display: block; font-size: 11px; opacity: 0.7; letter-spacing: 1px;">WIND</span><span style="font-weight: 700;">12 km/h</span></div>
                    <div><span style="display: block; font-size: 11px; opacity: 0.7; letter-spacing: 1px;">VISIBILITY</span><span style="font-weight: 700;">10 km</span></div>
                </div>
            </div>
        </div>
                <div style="display: flex; justify-content: space-between; margin-top: 30px; border-top: 1px solid rgba(255,255,255,0.2); padding-top: 20px;">
                    <div style="text-align: center; opacity: 0.8;">5:30 PM <br> <b>29°</b></div>
                    <div style="text-align: center; opacity: 0.8;">8:30 PM <br> <b>28°</b></div>
                    <div style="text-align: center; opacity: 0.8;">11:30 PM <br> <b>27°</b></div>
                    <div style="text-align: center; opacity: 0.8;">2:30 AM <br> <b>26°</b></div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Destinations (Dynamic) -->
<section id="destinations" style="overflow: hidden;">
    <div class="section-title">
        <h6 class="reveal-up">Explore the globe</h6>
        <h2 class="reveal-up">Global Destinations</h2>
<style>
.dest-card {
    position: relative;
    overflow: hidden;
    border-radius: 35px;
    height: 500px;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
}
.dest-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 60px rgba(0,0,0,0.15);
}
.dest-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}
.dest-card:hover img {
    transform: scale(1.1);
}
.dest-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 40px 30px;
    background: linear-gradient(transparent, rgba(0,0,0,0.9));
    color: #fff;
    transition: background 0.4s ease;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 60%;
}
.dest-overlay h3 { 
    margin: 0; 
    font-weight: 800; 
    font-size: 28px; 
    text-transform: uppercase;
    letter-spacing: 1px;
}
.dest-overlay p { 
    margin: 8px 0 0; 
    font-size: 14px; 
    opacity: 0.9; 
    line-height: 1.4;
}

@media (max-width: 768px) {
    .dest-card {
        height: 320px;
        border-radius: 25px;
    }
    .dest-overlay {
        padding: 20px;
        text-align: center;
        height: 100%;
        justify-content: center;
        background: rgba(0,0,0,0.2); /* Lighter overlay */
        backdrop-filter: none; /* Removed blur */
    }
    .dest-overlay h3 {
        font-size: 22px;
    }
    .dest-overlay p {
        font-size: 13px;
        margin-top: 5px;
    }
}
</style>

<div class="container">
    <div class="destinations-grid" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 30px; padding: 20px 0; justify-content: center;">
    <?php
    $dest_imgs = [
        'India' => 'assets/destinations img/WhatsApp Image 2026-05-08 at 15.03.52 (1).jpeg',
        'Dubai' => 'assets/destinations img/WhatsApp Image 2026-05-08 at 15.06.04.jpeg',
        'Egypt' => 'assets/destinations img/WhatsApp Image 2026-05-08 at 15.08.25.jpeg',
        'China' => 'assets/destinations img/WhatsApp Image 2026-05-08 at 15.10.08.jpeg',
        'Vietnam' => 'assets/destinations img/WhatsApp Image 2026-05-08 at 15.10.15.jpeg',
        'Thailand' => 'assets/destinations img/WhatsApp Image 2026-05-08 at 15.12.15.jpeg',
        'Singapore' => 'assets/destinations img/WhatsApp Image 2026-05-08 at 15.10.46.jpeg',
        'Azerbaijan' => 'assets/destinations img/WhatsApp Image 2026-05-08 at 15.13.35.jpeg'
    ];
    $dests = $conn->query("SELECT * FROM destinations LIMIT 8");
    if($dests && $dests->num_rows > 0):
        while($d = $dests->fetch_assoc()):
            $d_name = $d['name'];
            $img = $dest_imgs[$d_name] ?? 'uploads/' . (!empty($d['image']) ? $d['image'] : 'default-dest.jpg');
    ?>
        <a href="packages.php?country=<?= $d['id'] ?>" style="text-decoration: none; color: inherit;">
            <div class="dest-card reveal-up">
                <img src="<?= $img ?>?v=<?= time() ?>" alt="<?= htmlspecialchars($d_name) ?>">
                <div class="dest-overlay">
                    <h3><?= htmlspecialchars($d_name) ?></h3>
                    <p>Explore the beauty and culture of <?= htmlspecialchars($d_name) ?>.</p>
                </div>
            </div>
        </a>
    <?php 
        endwhile;
    endif; 
    ?>
</div>
    </div>
</section>

<!-- Featured Packages (Dynamic) -->
<section id="offers" style="background: #fff; padding: 100px 50px; overflow: hidden;">
    <style>
        @media (max-width: 768px) {
            #offers { padding: 60px 20px !important; }
            #tour-filters { gap: 10px !important; }
            #tour-filters .btn { padding: 8px 15px !important; font-size: 12px !important; }
            .tour-card-item .card-body { padding: 20px !important; }
            .tour-card-item div[style*="height: 400px"] { height: 250px !important; }
            .tour-card-item h5 { font-size: 18px !important; }
        }
        .tour-card-item .card img {
            opacity: 1 !important; /* Ensure full opacity */
        }
    </style>
    <div class="section-title">
        <h6 class="reveal-up">Adventure Awaits</h6>
        <h2 class="reveal-up">Featured Tours</h2>
    </div>

    <!-- Category Filter Bar -->
    <div class="container mb-5">
        <div class="d-flex justify-content-center flex-wrap gap-3 reveal-up" id="tour-filters">
            <a href="packages.php" class="btn btn-outline-primary rounded-pill px-4 py-2 fw-bold" style="font-size: 13px;">All Tours</a>
            <a href="packages.php?country=1" class="btn btn-outline-primary rounded-pill px-4 py-2 fw-bold" style="font-size: 13px;">India Specials</a>
            <a href="packages.php?country=2" class="btn btn-outline-primary rounded-pill px-4 py-2 fw-bold" style="font-size: 13px;">Dubai Specials</a>
            <a href="packages.php?country=3" class="btn btn-outline-primary rounded-pill px-4 py-2 fw-bold" style="font-size: 13px;">Egypt Specials</a>
            <a href="packages.php" class="btn btn-outline-primary rounded-pill px-4 py-2 fw-bold" style="font-size: 13px;">Global Destinations</a>
        </div>
    </div>
    <div class="container">
        <div class="row g-4 justify-content-center">
            <?php
            $curated_sql = "SELECT p.*, d.name as country_name FROM packages p JOIN destinations d ON p.country_id = d.id ORDER BY p.sort_order DESC, p.id DESC LIMIT 6";
            $curated_res = $conn->query($curated_sql);
            if($curated_res && $curated_res->num_rows > 0):
                while($p = $curated_res->fetch_assoc()):
                    $p_title = $p['title'];
                    $p_id = $p['id'];
                    $p_dest = $p['country_name'];
                    $p_price = number_format($p['price'], 0);
                    
                    // === DYNAMIC IMAGE LOGIC ===
                    // Priority 1: Admin-uploaded main_image from DB
                    $db_img = $p['main_image'] ?? '';
                    if (strpos($db_img, 'uploads/') === 0) $db_img = substr($db_img, 8);
                    
                    if (!empty($db_img) && file_exists("uploads/" . $db_img)) {
                        $p_img = "uploads/" . $db_img;
                    } else {
                        // Priority 2: Scan uploads folder for any JPEG and assign by package index
                        $upload_files = array_values(array_filter(scandir("uploads/") ?? [], function($f) {
                            return preg_match('/\.(jpe?g|png|webp)$/i', $f);
                        }));
                        $idx = ($p_id - 1) % max(count($upload_files), 1);
                        $p_img = !empty($upload_files) ? "uploads/" . $upload_files[$idx] : "https://images.pexels.com/photos/1271619/pexels-photo-1271619.jpeg?auto=compress&cs=tinysrgb&w=600";
                    }

                    $wa_msg = urlencode("Hello Methsisila! I am interested in the " . $p_title . " package. Please provide more details.");
                    $wa_link = "https://wa.me/" . (!empty($settings['whatsapp_number']) ? $settings['whatsapp_number'] : '94771957420') . "?text=" . $wa_msg;
            ?>
                <div class="col-md-6 tour-card-item reveal-up" data-category="global">
                    <div class="card border-0 shadow-sm overflow-hidden h-100" style="border-radius: 35px; transition: 0.4s; box-shadow: 0 10px 30px rgba(0,0,0,0.03);">
                        <a href="package-details.php?id=<?= $p_id ?>" style="text-decoration: none; color: inherit;">
                            <div style="position: relative; height: 400px; overflow: hidden;">
                                <img src="<?= str_replace(' ', '%20', $p_img) ?>?v=<?= time() ?>" 
                                     style="width:100%; height:100%; object-fit:cover; transition: 0.6s;" 
                                     onmouseover="this.style.transform='scale(1.1)'" onmouseout="this.style.transform='scale(1)'">
                                <div style="position: absolute; top: 20px; right: 20px; background: var(--primary); color: #fff; padding: 5px 15px; border-radius: 20px; font-size: 11px; font-weight: 700;"><?= $p_dest ?></div>
                            </div>
                            <div class="card-body p-4 pb-0">
                                <h5 class="fw-bold mb-2"><?= $p_title ?></h5>
                                <div class="d-flex align-items-center mb-3 text-muted" style="font-size: 13px;">
                                    <i class="far fa-clock me-2 text-primary"></i> <?= $p['duration'] ?? '7 Days' ?>
                                    <i class="fas fa-user-friends ms-3 me-2 text-primary"></i> Group Tour
                                </div>
                                <h4 class="text-primary fw-bold mb-3">LKR <?= $p_price ?></h4>
                            </div>
                        </a>
                        <div class="card-body p-4 pt-0 mt-auto">
                            <div class="d-flex gap-2">
                                <a href="package-details.php?id=<?= $p_id ?>" class="btn btn-outline-primary rounded-pill flex-grow-1" style="font-size: 12px; font-weight: 700;">View Details</a>
                                <a href="<?= $wa_link ?>" target="_blank" class="btn btn-success rounded-pill px-3" style="font-size: 12px; font-weight: 600; background: #25D366; border: none;">
                                    <i class="fab fa-whatsapp"></i> Inquiry
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            <?php 
                endwhile;
            endif;
            ?>
        </div>
    </div>
</section>

<!-- Testimonials (Dynamic) -->
<!-- Premium Google Reviews Section -->
<section id="google-reviews" style="background: #fff; padding: 100px 20px; overflow: hidden;">
    <div class="container">
        <div class="section-title text-center mb-5">
            <h6 class="reveal-up" style="color: var(--primary); letter-spacing: 5px; text-transform: uppercase;">Real Experiences</h6>
            <h2 class="reveal-up" style="font-size: 42px; font-weight: 800;">Google Reviews</h2>
            <div class="d-flex align-items-center justify-content-center mt-3 reveal-up">
                <img src="https://upload.wikimedia.org/wikipedia/commons/c/c1/Google_\"G\"_Logo.svg" style="width: 25px; margin-right: 15px;">
                <div class="text-warning">
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                </div>
                <span class="ms-3 fw-bold">4.9/5 Rating</span>
            </div>
        </div>

        <div class="review-slider-wrapper" style="position: relative; max-width: 1200px; margin: 0 auto;">
            <div class="review-slider-container" id="review-container" style="display: flex; gap: 30px; transition: 0.5s ease; padding: 20px 0;">
                <?php
                $testimonials_result = $conn->query("SELECT * FROM testimonials ORDER BY id DESC");
                if ($testimonials_result && $testimonials_result->num_rows > 0):
                    while($r = $testimonials_result->fetch_assoc()):
                        $name_encoded = urlencode($r['client_name']);
                ?>
                <div class="review-card reveal-up" style="flex: 0 0 350px; background: #fff; padding: 40px; border-radius: 35px; box-shadow: 0 20px 40px rgba(0,0,0,0.05); border: 1px solid #f0f0f0; transition: 0.4s;">
                    <div class="d-flex align-items-center mb-4">
                        <img src="https://ui-avatars.com/api/?name=<?= $name_encoded ?>&background=random" style="width: 50px; height: 50px; border-radius: 50%; object-fit: cover; margin-right: 15px; border: 2px solid var(--primary);">
                        <div>
                            <h6 class="mb-0 fw-bold"><?= htmlspecialchars($r['client_name']) ?></h6>
                            <div class="text-warning small">
                                <?php for($s=1; $s<=$r['rating']; $s++): ?><i class="fas fa-star"></i><?php endfor; ?>
                            </div>
                        </div>
                        <img src="https://upload.wikimedia.org/wikipedia/commons/c/c1/Google_\"G\"_Logo.svg" style="width: 20px; margin-left: auto; opacity: 0.5;">
                    </div>
                    <p style="color: #666; line-height: 1.8; font-style: italic; font-size: 15px;">"<?= htmlspecialchars($r['message']) ?>"</p>
                    <div class="text-muted small mt-3">Verified Google Review</div>
                </div>
                <?php 
                    endwhile;
                else: 
                ?>
                <div class="text-center text-muted py-5" style="flex: 0 0 100%;">No reviews yet. Check back soon!</div>
                <?php endif; ?>
            </div>
            
            <!-- Slider Navigation -->
            <div class="slider-nav d-flex justify-content-center gap-3 mt-5">
                <button onclick="slideReviews(-1)" style="width: 50px; height: 50px; border-radius: 50%; border: 1px solid #eee; background: #fff; color: #333; transition: 0.3s;"><i class="fas fa-chevron-left"></i></button>
                <button onclick="slideReviews(1)" style="width: 50px; height: 50px; border-radius: 50%; border: 1px solid #eee; background: #fff; color: #333; transition: 0.3s;"><i class="fas fa-chevron-right"></i></button>
            </div>
        </div>
    </div>
</section>

<style>
.review-card:hover {
    transform: translateY(-10px);
    border-color: var(--primary);
    box-shadow: 0 30px 60px rgba(255,107,0,0.1);
}
@media (max-width: 768px) {
    .review-card {
        flex: 0 0 100% !important;
    }
}
</style>

<script>
let currentSlide = 0;
function slideReviews(dir) {
    const container = document.getElementById('review-container');
    const cardWidth = container.querySelector('.review-card').offsetWidth + 30;
    const maxSlides = container.querySelectorAll('.review-card').length;
    const visibleSlides = window.innerWidth > 768 ? 3 : 1;
    
    currentSlide += dir;
    if (currentSlide < 0) currentSlide = 0;
    if (currentSlide > maxSlides - visibleSlides) currentSlide = maxSlides - visibleSlides;
    
    container.style.transform = `translateX(${-currentSlide * cardWidth}px)`;
}
</script>

<!-- Parallax Quote Section -->
<section
    style="height: 60vh; position: relative; overflow: hidden; display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 20px;
    z-index: 10;
    color: #fff;">
    <img src="https://images.pexels.com/photos/2108845/pexels-photo-2108845.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
        style="position: absolute; top: 0; left: 0; width: 100%; height: 120%; object-fit: cover; z-index: -1;"
        class="parallax-bg">
    <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4);"></div>
    <div class="reveal-up" style="position: relative; z-index: 1; max-width: 800px; padding: 20px;">
        <h2
            style="font-size: 40px; font-weight: 700; line-height: 1.2; margin-bottom: 20px; font-family: 'Poppins', sans-serif;">
            “The world is a book and those who do not travel read only one page”</h2>
    </div>
</section>

<!-- Services Section -->
<section id="services" style="background: #fff; padding: 100px 50px; overflow: hidden;">
    <div class="section-title">
        <h6>What we offer</h6>
        <h2>Our Services</h2>
    </div>
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 30px; max-width: 1200px; margin: 0 auto;">
        <div class="reveal-up" style="padding: 40px; background: #fdfcfb; border-radius: 25px; text-align: center; transition: 0.3s; box-shadow: 0 10px 30px rgba(0,0,0,0.03);" onmouseover="this.style.transform='translateY(-10px)'" onmouseout="this.style.transform='translateY(0)'">
            <div style="width: 70px; height: 70px; background: var(--primary); border-radius: 20px; display: flex; align-items: center; justify-content: center; margin: 0 auto 25px; color: #fff; font-size: 30px;"><i class="fas fa-passport"></i></div>
            <h4 style="margin-bottom: 15px;">VISA</h4>
            <p style="color: #888; font-size: 14px;">Hassle-free visa processing for India, Malaysia, Cambodia, China, and Vietnam.</p>
        </div>
        <div class="reveal-up" style="padding: 40px; background: #fdfcfb; border-radius: 25px; text-align: center; transition: 0.3s; box-shadow: 0 10px 30px rgba(0,0,0,0.03);" onmouseover="this.style.transform='translateY(-10px)'" onmouseout="this.style.transform='translateY(0)'">
            <div style="width: 70px; height: 70px; background: var(--primary); border-radius: 20px; display: flex; align-items: center; justify-content: center; margin: 0 auto 25px; color: #fff; font-size: 30px;"><i class="fas fa-plane"></i></div>
            <h4 style="margin-bottom: 15px;">AIR TICKET</h4>
            <p style="color: #888; font-size: 14px;">Worldwide flight bookings with the best competitive rates and comfort.</p>
        </div>
        <div class="reveal-up" style="padding: 40px; background: #fdfcfb; border-radius: 25px; text-align: center; transition: 0.3s; box-shadow: 0 10px 30px rgba(0,0,0,0.03);" onmouseover="this.style.transform='translateY(-10px)'" onmouseout="this.style.transform='translateY(0)'">
            <div style="width: 70px; height: 70px; background: var(--primary); border-radius: 20px; display: flex; align-items: center; justify-content: center; margin: 0 auto 25px; color: #fff; font-size: 30px;"><i class="fas fa-users"></i></div>
            <h4 style="margin-bottom: 15px;">GROUP TOURS</h4>
            <p style="color: #888; font-size: 14px;">Expertly curated group pilgrimages and leisure tours across Asia and beyond.</p>
        </div>
        <div class="reveal-up" style="padding: 40px; background: #fdfcfb; border-radius: 25px; text-align: center; transition: 0.3s; box-shadow: 0 10px 30px rgba(0,0,0,0.03);" onmouseover="this.style.transform='translateY(-10px)'" onmouseout="this.style.transform='translateY(0)'">
            <div style="width: 70px; height: 70px; background: var(--primary); border-radius: 20px; display: flex; align-items: center; justify-content: center; margin: 0 auto 25px; color: #fff; font-size: 30px;"><i class="fas fa-user-shield"></i></div>
            <h4 style="margin-bottom: 15px;">PRIVATE TOURS</h4>
            <p style="color: #888; font-size: 14px;">Customized private itineraries tailored to your unique preferences and pace.</p>
        </div>
        <div class="reveal-up" style="padding: 40px; background: #fdfcfb; border-radius: 25px; text-align: center; transition: 0.3s; box-shadow: 0 10px 30px rgba(0,0,0,0.03);" onmouseover="this.style.transform='translateY(-10px)'" onmouseout="this.style.transform='translateY(0)'">
            <div style="width: 70px; height: 70px; background: var(--primary); border-radius: 20px; display: flex; align-items: center; justify-content: center; margin: 0 auto 25px; color: #fff; font-size: 30px;"><i class="fas fa-hotel"></i></div>
            <h4 style="margin-bottom: 15px;">HOTEL ROOMS</h4>
            <p style="color: #888; font-size: 14px;">Premium handpicked accommodations ensuring maximum comfort during your stay.</p>
        </div>
    </div>
</section>

<!-- Stats Section (As per screenshot) -->
<section id="stats" style="background: #fff; padding: 100px 50px; overflow: hidden;">
    <div
        style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 40px; text-align: center; max-width: 1200px; margin: 0 auto;">
        <div class="stat-item reveal-up" style="padding: 20px; border-right: 1px solid #eee;">
            <h2 style="font-size: 55px; color: var(--primary); font-weight: 800; margin-bottom: 5px;">14K+</h2>
            <p style="text-transform: capitalize; color: #666; font-weight: 600;">Happy traveler</p>
        </div>
        <div class="stat-item reveal-up" style="padding: 20px; border-right: 1px solid #eee;">
            <h2 style="font-size: 55px; color: var(--primary); font-weight: 800; margin-bottom: 5px;">4.8</h2>
            <p style="text-transform: capitalize; color: #666; font-weight: 600;">Review Customer</p>
        </div>
        <div class="stat-item reveal-up" style="padding: 20px; border-right: 1px solid #eee;">
            <h2 style="font-size: 55px; color: var(--primary); font-weight: 800; margin-bottom: 5px;">247+</h2>
            <p style="text-transform: capitalize; color: #666; font-weight: 600;">Destinations</p>
        </div>
        <div class="stat-item reveal-up" style="padding: 20px;">
            <h2 style="font-size: 55px; color: var(--primary); font-weight: 800; margin-bottom: 5px;">55+</h2>
            <p style="text-transform: capitalize; color: #666; font-weight: 600;">Country Place</p>
        </div>
    </div>
</section>

<!-- Contact Section (Added for Australia Redesign) -->
<section id="contact" style="background: #fff; padding: 100px 50px; overflow: hidden;">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-5 reveal-left">
                <div class="section-title" style="text-align: left;">
                    <h6 style="color: var(--primary);">Contact Us</h6>
                    <h2>Plan Your Next Adventure</h2>
                </div>
                <p style="color: #666; font-size: 18px; line-height: 1.8; margin-bottom: 40px;">Ready to explore the wonders of the world? Our travel experts are here to help you create the perfect itinerary. Whether you have questions about visas, flights, or the best time to visit, we're just a message away.</p>
                
                <div style="margin-bottom: 30px;">
                    <div style="display: flex; align-items: center; margin-bottom: 20px;">
                        <div style="width: 50px; height: 50px; background: #fdf5f0; color: var(--primary); border-radius: 15px; display: flex; align-items: center; justify-content: center; font-size: 20px; margin-right: 20px;">
                            <i class="fas fa-phone-alt"></i>
                        </div>
                        <div>
                            <h6 style="margin: 0; font-weight: 700;">Phone</h6>
                            <p style="margin: 0; color: #888;">+94 77 195 7420</p>
                        </div>
                    </div>
                    <div style="display: flex; align-items: center;">
                        <div style="width: 50px; height: 50px; background: #fdf5f0; color: var(--primary); border-radius: 15px; display: flex; align-items: center; justify-content: center; font-size: 20px; margin-right: 20px;">
                            <i class="fas fa-envelope"></i>
                        </div>
                        <div>
                            <h6 style="margin: 0; font-weight: 700;">Email</h6>
                            <p style="margin: 0; color: #888;">methsisilatours@gmail.com / ranga@methsisilatours.com</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-7 reveal-right">
                <div style="background: #fdfcfb; padding: 50px; border-radius: 40px; box-shadow: 0 30px 60px rgba(0,0,0,0.05);">
                    <form action="process-contact.php" method="POST">
                        <div class="row g-4">
                            <div class="col-md-6">
                                <label style="font-weight: 600; margin-bottom: 10px; display: block;">Your Name</label>
                                <input type="text" name="name" class="form-control border-0 p-3" style="border-radius: 15px; background: #fff;" placeholder="John Doe" required>
                            </div>
                            <div class="col-md-6">
                                <label style="font-weight: 600; margin-bottom: 10px; display: block;">Email Address</label>
                                <input type="email" name="email" class="form-control border-0 p-3" style="border-radius: 15px; background: #fff;" placeholder="john@example.com" required>
                            </div>
                            <div class="col-12">
                                <label style="font-weight: 600; margin-bottom: 10px; display: block;">Subject</label>
                                <input type="text" name="subject" class="form-control border-0 p-3" style="border-radius: 15px; background: #fff;" placeholder="Inquiry about Tour Package">
                            </div>
                            <div class="col-12">
                                <label style="font-weight: 600; margin-bottom: 10px; display: block;">Message</label>
                                <textarea name="message" class="form-control border-0 p-3" style="border-radius: 15px; background: #fff;" rows="4" placeholder="How can we help you?" required></textarea>
                            </div>
                            <div class="col-12">
                                <button type="submit" class="btn-inquiry" style="width: 100%; border-radius: 15px; padding: 20px; border: none;">Send Message</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Currency Section (Bottom) -->
<section id="currency" style="background: var(--bg-light); padding: 80px 50px; overflow: hidden;">
    <div style="max-width: 600px; margin: 0 auto;">
        <div class="reveal-up" style="background: #fff; border-radius: 30px; box-shadow: 0 20px 60px rgba(0,0,0,0.05); padding: 50px;">
            <h4 style="margin-bottom: 30px; text-transform: uppercase; letter-spacing: 2px; text-align: center;">Currency Converter</h4>
            <div style="background: #f8f9fa; padding: 25px; border-radius: 15px; margin-bottom: 20px; display: flex; align-items: center; justify-content: space-between;">
                <div style="display: flex; align-items: center;">
                    <img src="https://flagcdn.com/w40/us.png" style="width: 30px; margin-right: 15px;">
                    <span style="font-weight: 600;">USD - US Dollar</span>
                </div>
                <input type="text" value="1" style="width: 80px; text-align: right; border: none; background: transparent; font-weight: 700; font-size: 18px;">
            </div>
            <div style="background: #f8f9fa; padding: 25px; border-radius: 15px; margin-bottom: 40px; display: flex; align-items: center; justify-content: space-between;">
                <div style="display: flex; align-items: center;">
                    <img src="https://flagcdn.com/w40/lk.png" style="width: 30px; margin-right: 15px;">
                    <span style="font-weight: 600;">LKR - Sri Lankan Rupee</span>
                </div>
                <input type="text" value="210.45" style="width: 120px; text-align: right; border: none; background: transparent; font-weight: 700; font-size: 18px;">
            </div>
            <button class="btn-inquiry" style="width: 100%; border-radius: 15px; padding: 20px;">Free Currency Converter Widget</button>
        </div>
    </div>
</section>

<!-- Lenis Smooth Scroll -->
<script src="https://unpkg.com/@studio-freight/lenis@1.0.34/dist/lenis.min.js"></script>

<script>
    // Initialize Lenis for smooth scrolling
    const lenis = new Lenis();
    function raf(time) {
        lenis.raf(time);
        requestAnimationFrame(raf);
    }
    requestAnimationFrame(raf);

    gsap.registerPlugin(ScrollTrigger);

    // Header Scroll Effect
    window.addEventListener('scroll', () => {
        const header = document.getElementById('main-header');
        if (window.scrollY > 50) {
            header.classList.add('scrolled');
        } else {
            header.classList.remove('scrolled');
        }
    });

    // Premium Reveal Animations

    // 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
            }
        );
    });

    // Side Reveals (Left/Right)
    const revealSide = document.querySelectorAll('.reveal-left, .reveal-right');
    revealSide.forEach((el) => {
        const xVal = el.classList.contains('reveal-left') ? -100 : 100;
        gsap.fromTo(el,
            { opacity: 0, x: xVal },
            {
                scrollTrigger: {
                    trigger: el,
                    start: "top 85%"
                },
                opacity: 1,
                x: 0,
                duration: 1.8,
                ease: "power4.out"
            }
        );
    });

    // Image Mask Reveal (Premium look)
    const imageWrappers = document.querySelectorAll('.img-reveal-wrapper');
    imageWrappers.forEach((wrapper) => {
        const img = wrapper.querySelector('img');
        gsap.fromTo(wrapper,
            { clipPath: "inset(0 100% 0 0)" },
            {
                scrollTrigger: {
                    trigger: wrapper,
                    start: "top 80%"
                },
                clipPath: "inset(0 0% 0 0)",
                duration: 1.5,
                ease: "expo.inOut"
            }
        );
        gsap.fromTo(img,
            { scale: 1.5 },
            {
                scrollTrigger: {
                    trigger: wrapper,
                    start: "top 80%"
                },
                scale: 1,
                duration: 2,
                ease: "expo.out"
            }
        );
    });

    // Text Reveal (Headings)
    const titles = document.querySelectorAll('.section-title h2');
    titles.forEach((title) => {
        gsap.from(title, {
            scrollTrigger: {
                trigger: title,
                start: "top 90%"
            },
            opacity: 0,
            y: 30,
            skewY: 7,
            duration: 1.2,
            ease: "power4.out"
        });
    });

    // Methsisila Welcome Stagger (Rotate to Place)
    gsap.from(".memories-img-wrapper.reveal-memories-1", { 
        scrollTrigger: { trigger: "#welcome", start: "top 80%" },
        opacity: 0, x: 100, y: 100, rotation: 0, duration: 1.5, ease: "power4.out"
    });
    gsap.from(".memories-img-wrapper.reveal-memories-2", { 
        scrollTrigger: { trigger: "#welcome", start: "top 75%" },
        opacity: 0, x: 50, y: 150, rotation: 0, duration: 1.5, ease: "power4.out", delay: 0.2
    });
    gsap.from(".memories-img-wrapper.reveal-memories-3", { 
        scrollTrigger: { trigger: "#welcome", start: "top 70%" },
        opacity: 0, x: -100, y: 100, rotation: 0, duration: 1.5, ease: "power4.out", delay: 0.4
    });

    // Parallax on Scroll (Backgrounds)
    gsap.to(".parallax-bg", {
        scrollTrigger: {
            trigger: ".parallax-bg",
            start: "top bottom",
            end: "bottom top",
            scrub: true
        },
        y: -150
    });

    // Remove or comment out missing element animations to prevent JS errors
    /*
    gsap.to(".hero-video", {
        scrollTrigger: {
            trigger: ".hero",
            start: "top top",
            end: "bottom top",
            scrub: true
        },
        y: 200
    });
    */

    // Refresh ScrollTrigger on load
    window.addEventListener('load', () => {
        ScrollTrigger.refresh();
    });

</script>

<!-- Global Animations & Responsive Mobile Fixes -->
<style>
img { max-width: 100%; height: auto; }
.card { transition: transform 0.4s ease, box-shadow 0.4s ease; }

@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0px); }
}
@keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.9; }
    100% { transform: scale(1); opacity: 1; }
}
/* Tour Filter Styles */
#tour-filters .btn-outline-primary {
    border-color: var(--primary);
    color: var(--primary);
}
#tour-filters .btn-outline-primary:hover, 
#tour-filters .btn-outline-primary.active {
    background-color: var(--primary);
    border-color: var(--primary);
    color: #fff;
    box-shadow: 0 5px 15px rgba(255,105,0,0.3);
}

.float-anim { animation: float 4s ease-in-out infinite; }
.pulse-anim { animation: pulse 3s ease-in-out infinite; }

/* Fully Mobile Responsive Design */
@media (max-width: 768px) {
    .hero {
        height: 100vh !important;
    }
    .hero-content {
        padding: 80px 20px 40px !important;
        transform: none !important;
        justify-content: center !important;
    }
    .hero-content h1 {
        font-size: 36px !important;
        line-height: 1.1 !important;
        margin-bottom: 20px !important;
        letter-spacing: -1px !important;
    }
    .hero-content h6 {
        font-size: 11px !important;
        letter-spacing: 3px !important;
        margin-bottom: 12px !important;
    }
    .hero-content .slide-up {
        display: flex;
        flex-direction: column;
        gap: 12px !important;
    }
    .btn-inquiry {
        width: 100% !important;
        padding: 16px 20px !important;
        font-size: 14px !important;
        text-align: center;
    }
    .inquiry-bar {
        position: relative !important;
        margin: 20px 15px 0 !important; /* Removed negative margin to prevent overlap */
        grid-template-columns: 1fr !important;
        gap: 15px !important;
        padding: 25px !important;
        z-index: 50 !important;
        border-radius: 25px !important;
        box-shadow: 0 15px 40px rgba(0,0,0,0.12) !important;
    }
    .inquiry-item {
        border-bottom: 1px solid rgba(0,0,0,0.05) !important;
        padding-bottom: 15px !important;
        margin-bottom: 5px !important;
    }
    .inquiry-item label {
        font-size: 10px !important;
        margin-bottom: 5px !important;
    }
    .inquiry-item input, .inquiry-item select {
        border: none !important;
        padding: 5px 0 !important;
        font-weight: 600 !important;
    }
    .inquiry-item {
        border-bottom: 1px solid rgba(0,0,0,0.05) !important;
        padding-bottom: 10px !important;
        margin-bottom: 10px !important;
    }
    .inquiry-item:last-of-type { border-bottom: none !important; }
    
    section {
        padding: 60px 20px !important;
    }
    .grid-2 {
        display: grid;
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }
    .welcome-images {
        height: 350px !important;
        margin-top: 30px;
        position: relative;
        overflow: hidden; /* Added overflow hidden to container */
    }
    .memories-img-wrapper {
        max-width: 90% !important; /* Prevent images from being too wide */
    }
    .memories-img-wrapper.reveal-memories-1 {
        width: 70% !important;
        top: 10% !important;
        right: 5% !important;
    }
    .memories-img-wrapper.reveal-memories-2 {
        width: 60% !important;
        bottom: 20% !important;
        right: 15% !important;
    }
    .memories-img-wrapper.reveal-memories-3 {
        width: 45% !important;
        left: 5% !important;
        bottom: 5% !important;
    }
    .memories-img-wrapper img {
        border-width: 6px !important;
    }
    .weather-card-live {
        height: auto !important;
        min-height: 380px;
        border-radius: 20px !important;
    }
    .weather-card-live > div {
        padding: 30px 20px !important;
    }
    .weather-card-live h1 {
        font-size: 70px !important;
    }
    .dest-card {
        height: 350px !important;
    }
    .stat-item {
        border-right: none !important;
        border-bottom: 1px solid #eee;
        padding: 25px 0 !important;
    }
    .stat-item:last-child {
        border-bottom: none !important;
    }
    .section-title h2 {
        font-size: 32px !important;
        line-height: 1.2;
    }
    .section-title h6 {
        font-size: 12px !important;
        margin-bottom: 10px !important;
    }
    #currency > div > div {
        padding: 30px 20px !important;
    }
    .testimonial-img img {
        height: 300px;
        object-fit: cover;
    }
    .carousel-dot {
        width: 10px !important;
        height: 10px !important;
    }
    #main-footer {
        padding: 60px 20px !important;
    }
}
</style>

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