<?php
require_once __DIR__ . '/config/database.php';

$defaultHeroSlides = [
    [
        'label' => 'Luxury Accommodation',
        'title' => 'Experience Premium Comfort',
        'description' => 'Discover spacious suites with modern amenities, premium bedding, and stunning city views.',
        'button_text' => 'Explore Rooms',
        'button_url' => 'rooms.php',
        'image_url' => 'images/background/1.webp',
    ],
    [
        'label' => 'Culinary Delight',
        'title' => 'Savor Exquisite Flavors',
        'description' => 'Indulge in world-class dining experiences prepared by our renowned chefs.',
        'button_text' => 'See Dining Options',
        'button_url' => 'facilities.php',
        'image_url' => 'images/background/8.webp',
    ],
    [
        'label' => 'Wellness Retreat',
        'title' => 'Relax & Rejuvenate',
        'description' => 'Unwind with our premium spa services and wellness facilities designed for your well-being.',
        'button_text' => 'Explore Spa',
        'button_url' => 'facilities.php',
        'image_url' => 'images/background/10.webp',
    ],
    [
        'label' => 'Exclusive Deals',
        'title' => 'Save on Your Getaway',
        'description' => 'Enjoy special rates and flexible booking options for your perfect stay.',
        'button_text' => 'View Offers',
        'button_url' => 'offer.php',
        'image_url' => 'images/misc/4.webp',
    ],
];

$heroSlides = $defaultHeroSlides;

try {
    $conn->query(
        "CREATE TABLE IF NOT EXISTS hero_slides (
            id INT AUTO_INCREMENT PRIMARY KEY,
            label VARCHAR(120) NOT NULL,
            title VARCHAR(255) NOT NULL,
            description TEXT,
            button_text VARCHAR(120) NOT NULL DEFAULT 'Explore',
            button_url VARCHAR(255) NOT NULL DEFAULT 'rooms.php',
            image_url VARCHAR(255) NOT NULL,
            sort_order INT NOT NULL DEFAULT 0,
            is_active TINYINT(1) NOT NULL DEFAULT 1,
            created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
            updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
            INDEX idx_active_sort (is_active, sort_order, id)
        )"
    );

    $heroColorColumns = [
        'label_color' => "ALTER TABLE hero_slides ADD COLUMN label_color CHAR(7) NOT NULL DEFAULT '#FCBF49' AFTER image_url",
        'title_color' => "ALTER TABLE hero_slides ADD COLUMN title_color CHAR(7) NOT NULL DEFAULT '#FFFFFF' AFTER label_color",
        'description_color' => "ALTER TABLE hero_slides ADD COLUMN description_color CHAR(7) NOT NULL DEFAULT '#E5E7EB' AFTER title_color",
        'button_text_color' => "ALTER TABLE hero_slides ADD COLUMN button_text_color CHAR(7) NOT NULL DEFAULT '#10243D' AFTER description_color",
        'button_bg_color' => "ALTER TABLE hero_slides ADD COLUMN button_bg_color CHAR(7) NOT NULL DEFAULT '#FCBF49' AFTER button_text_color",
    ];
    foreach ($heroColorColumns as $heroColorColumn => $heroColorSql) {
        $heroColorCheck = $conn->query("SHOW COLUMNS FROM hero_slides LIKE '{$heroColorColumn}'");
        if (!($heroColorCheck instanceof mysqli_result) || $heroColorCheck->num_rows === 0) {
            $conn->query($heroColorSql);
        }
        if ($heroColorCheck instanceof mysqli_result) {
            $heroColorCheck->free();
        }
    }

    $seedCheck = $conn->query("SELECT COUNT(*) AS total FROM hero_slides");
    $seedRow = $seedCheck ? $seedCheck->fetch_assoc() : null;
    $totalSlides = (int)($seedRow['total'] ?? 0);
    if ($totalSlides === 0) {
        $insertStmt = $conn->prepare(
            "INSERT INTO hero_slides (label, title, description, button_text, button_url, image_url, sort_order, is_active)
             VALUES (?, ?, ?, ?, ?, ?, ?, 1)"
        );
        if ($insertStmt) {
            foreach ($defaultHeroSlides as $index => $slide) {
                $sortOrder = $index + 1;
                $insertStmt->bind_param(
                    'ssssssi',
                    $slide['label'],
                    $slide['title'],
                    $slide['description'],
                    $slide['button_text'],
                    $slide['button_url'],
                    $slide['image_url'],
                    $sortOrder
                );
                $insertStmt->execute();
            }
            $insertStmt->close();
        }
    }

    $slidesResult = $conn->query(
        "SELECT label, title, description, button_text, button_url, image_url,
                label_color, title_color, description_color, button_text_color, button_bg_color
         FROM hero_slides
         WHERE is_active = 1
         ORDER BY sort_order ASC, id ASC
         LIMIT 8"
    );
    if ($slidesResult instanceof mysqli_result) {
        $rows = $slidesResult->fetch_all(MYSQLI_ASSOC);
        if (!empty($rows)) {
            $heroSlides = $rows;
        }
    }
} catch (Throwable $e) {
    $heroSlides = $defaultHeroSlides;
}
?>
<!DOCTYPE html>
<html lang="zxx">

<head>
    <title>zemaraim</title>
    <link rel="icon" href="images/zt_history_logo.png" type="image/gif" sizes="16x16">
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta content="zemaraim" name="description">
    <meta content="" name="keywords">
    <meta content="" name="author">
    <!-- CSS Files
    ================================================== -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" id="bootstrap">
    <link href="css/plugins.css" rel="stylesheet" type="text/css">
    <link href="css/swiper.css" rel="stylesheet" type="text/css">
    <link href="css/style.css" rel="stylesheet" type="text/css">
    <link href="css/coloring.css" rel="stylesheet" type="text/css">
    <!-- color scheme -->
    <link id="colors" href="css/colors/scheme-01.css" rel="stylesheet" type="text/css">

    <!-- Override plugin inline styles -->
    <style>
        body {
            height: auto !important;
            background-size: auto !important;
            background-repeat: repeat !important;
        }
    </style>

</head>

<body>
    <div id="wrapper">
        <a href="#" id="back-to-top"></a>

        <!-- page preloader begin -->
        <div id="de-loader"></div>
        <!-- page preloader close -->

        <!-- header begin -->
        <?php include 'header.php'; ?>
        <!-- header close -->
        <!-- content begin -->
        <div class="no-bottom no-top" id="content">

            <div id="top"></div>

            <!-- RESPONSIVE HERO SLIDER SECTION -->
            <section class="hero-responsive-section">
                <!-- Swiper Slider Container -->
                <div class="hero-slider-container">
                    <div class="swiper hero-slider-swiper">
                        <div class="swiper-wrapper">
                            <?php foreach ($heroSlides as $slide): ?>
                                <?php
                                    $imageUrl = str_replace('\\', '/', trim((string)($slide['image_url'] ?? '')));
                                    if ($imageUrl === '') {
                                        $imageUrl = 'images/background/1.webp';
                                    }
                                    $label = trim((string)($slide['label'] ?? 'Featured Stay'));
                                    $title = trim((string)($slide['title'] ?? 'Welcome to Zemaraim'));
                                    $description = trim((string)($slide['description'] ?? 'Book your perfect stay with us.'));
                                    $buttonText = trim((string)($slide['button_text'] ?? 'Explore'));
                                    $buttonUrl = trim((string)($slide['button_url'] ?? 'rooms.php'));
                                    $labelColor = trim((string)($slide['label_color'] ?? '#FCBF49'));
                                    $titleColor = trim((string)($slide['title_color'] ?? '#FFFFFF'));
                                    $descriptionColor = trim((string)($slide['description_color'] ?? '#E5E7EB'));
                                    $buttonTextColor = trim((string)($slide['button_text_color'] ?? '#10243D'));
                                    $buttonBgColor = trim((string)($slide['button_bg_color'] ?? '#FCBF49'));
                                ?>
                                <div class="swiper-slide hero-responsive-slide">
                                    <div class="hero-slide-bg" style="background-image: url('<?php echo htmlspecialchars($imageUrl, ENT_QUOTES, 'UTF-8'); ?>')"></div>
                                    <div class="hero-slide-content">
                                        <div class="container">
                                            <div class="hero-content-block">
                                                <span class="hero-label" style="color: <?php echo htmlspecialchars($labelColor, ENT_QUOTES, 'UTF-8'); ?>;"><?php echo htmlspecialchars($label, ENT_QUOTES, 'UTF-8'); ?></span>
                                                <h1 class="hero-slide-title" style="color: <?php echo htmlspecialchars($titleColor, ENT_QUOTES, 'UTF-8'); ?>;"><?php echo htmlspecialchars($title, ENT_QUOTES, 'UTF-8'); ?></h1>
                                                <p class="hero-slide-description" style="color: <?php echo htmlspecialchars($descriptionColor, ENT_QUOTES, 'UTF-8'); ?>;"><?php echo htmlspecialchars($description, ENT_QUOTES, 'UTF-8'); ?></p>
                                                <a href="<?php echo htmlspecialchars($buttonUrl, ENT_QUOTES, 'UTF-8'); ?>"
                                                   class="hero-slide-link"
                                                   style="color: <?php echo htmlspecialchars($buttonTextColor, ENT_QUOTES, 'UTF-8'); ?>; background-color: <?php echo htmlspecialchars($buttonBgColor, ENT_QUOTES, 'UTF-8'); ?>;"><?php echo htmlspecialchars($buttonText, ENT_QUOTES, 'UTF-8'); ?></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            <?php endforeach; ?>
                        </div>

                        <!-- Navigation Buttons - Side buttons -->
                        <button class="hero-slider-btn hero-slider-prev" aria-label="Previous slide">
                            <i class="icofont-pointer-left">⮜</i>
                        </button>
                        <button class="hero-slider-btn hero-slider-next" aria-label="Next slide">
                            <i class="icofont-pointer-right">⮞</i>
                        </button>

                        <!-- Pagination Dots -->
                        <div class="hero-slider-pagination"></div>
                    </div>

                    <!-- Booking Form Section - Inside Slider -->
                    <div class="hero-booking-fixed">
                        <div class="booking-form-wrapper">
                            <h3 class="booking-form-title">Plan Your Stay</h3>
                            <form id="heroBookingForm" class="responsive-booking-form" onsubmit="handleHeroBooking(event)">
                                <div class="booking-fields-grid">
                                    <div class="booking-field-group">
                                        <label for="heroCheckIn">Check In</label>
                                        <input type="date" id="heroCheckIn" class="booking-input" required />
                                    </div>

                                    <div class="booking-field-group">
                                        <label for="heroCheckOut">Check Out</label>
                                        <input type="date" id="heroCheckOut" class="booking-input" required />
                                    </div>

                                    <div class="booking-field-group">
                                        <label for="heroGuests">Guests</label>
                                        <select id="heroGuests" class="booking-input" required>
                                            <option value="1">1 Guest</option>
                                            <option value="2" selected>2 Guests</option>
                                            <option value="3">3 Guests</option>
                                            <option value="4">4 Guests</option>
                                            <option value="5">5 Guests</option>
                                            <option value="6+">6+ Guests</option>
                                        </select>
                                    </div>

                                    <div class="booking-field-group">
                                        <label for="heroRooms">Rooms</label>
                                        <select id="heroRooms" class="booking-input" required>
                                            <option value="1" selected>1 Room</option>
                                            <option value="2">2 Rooms</option>
                                            <option value="3">3 Rooms</option>
                                            <option value="4">4 Rooms</option>
                                            <option value="5">5 Rooms</option>
                                        </select>
                                    </div>

                                    <button type="submit" class="booking-btn-submit">Search Availability</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </section>
            <!-- END RESPONSIVE HERO SLIDER SECTION -->

            <style>
                /* ================================ */
                /* RESPONSIVE HERO SLIDER STYLES */
                /* ================================ */
                .hero-responsive-section {
                    position: relative;
                    width: 100%;
                    /* min-height: 100vh; */
                    overflow: visible;
                }

                .hero-slider-container {
                    position: relative;
                    width: 100%;
                    height: 100vh;
                    max-height: 100vh;
                }

                .hero-slider-swiper {
                    width: 100%;
                    height: 100%;
                }

                /* Slide Styling */
                .hero-responsive-slide {
                    position: relative;
                    width: 100%;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: flex-start;
                }

                .hero-slide-bg {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background-size: cover;
                    background-position: center;
                    background-repeat: no-repeat;
                }

                .hero-slide-overlay {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background: linear-gradient(135deg, rgba(15, 41, 66, 0.5) 0%, rgba(44, 77, 116, 0.3) 100%);
                    z-index: 1;
                }

                .hero-slide-content {
                    position: relative;
                    z-index: 2;
                    width: 100%;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: flex-start;
                    padding: 40px 40px 150px 40px;
                }

                .hero-slide-content .container {
                    max-width: 100%;
                    padding: 0;
                }

                .hero-content-block {
                    max-width: auto;
                    color: #ffffff;
                    text-align: center;
                    animation: fadeInUp 0.8s ease-out forwards;
                }

                @keyframes fadeInUp {
                    from {
                        opacity: 0;
                        transform: translateY(30px);
                    }
                    to {
                        opacity: 1;
                        transform: translateY(0);
                    }
                }

                .hero-label {
                    background: black;
                    /* border-radius: 20%; */
                    display: inline-block;
                    font-size: 14px;
                    font-weight: 600;
                    color: #ff8c42;
                    text-transform: uppercase;
                    letter-spacing: 1px;
                    margin-bottom: 15px;
                }

                .hero-slide-title {
                    font-size: 48px;
                    font-weight: 700;
                    line-height: 1.2;
                    margin-bottom: 20px;
                    color: #ffffff;
                }

                .hero-slide-description {
                    font-size: 18px;
                    line-height: 1.6;
                    margin-bottom: 30px;
                    color: #ffffff;
                }

                .hero-slide-link {
                    display: inline-block;
                    padding: 12px 30px;
                    background: #ff8c42;
                    color: #ffffff;
                    text-decoration: none;
                    border-radius: 6px;
                    font-weight: 600;
                    transition: all 0.3s ease;
                }

                .hero-slide-link:hover {
                    background: #ff7024;
                    transform: translateX(5px);
                }

                /* Navigation Buttons - Responsive Side Buttons */
                .hero-slider-btn {
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    width: 50px;
                    height: 50px;
                    border-radius: 50%;
                    background: rgba(255, 255, 255, 0.2);
                    border: 2px solid rgba(255, 255, 255, 0.4);
                    color: #ffffff;
                    cursor: pointer;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 22px;
                    line-height: 1;
                    transition: all 0.3s ease;
                    backdrop-filter: blur(10px);
                    z-index: 15;
                    padding: 0;
                    outline: none;
                }

                .hero-slider-btn i {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 22px;
                    color: #ffffff;
                }

                .hero-slider-prev {
                    left: 20px;
                }

                .hero-slider-next {
                    right: 20px;
                }

                .hero-slider-btn:hover {
                    background: rgba(255, 140, 66, 0.8);
                    border-color: #ff8c42;
                    transform: translateY(-50%) scale(1.1);
                    box-shadow: 0 0 20px rgba(255, 140, 66, 0.5);
                }

                .hero-slider-btn:active {
                    transform: translateY(-50%) scale(0.95);
                }

                /* Pagination Dots */
                .hero-slider-pagination {
                    position: absolute;
                    bottom: 100px;
                    left: 50%;
                    transform: translateX(-50%);
                    display: flex;
                    gap: 10px;
                    z-index: 15;
                }

                .swiper-pagination-bullet {
                    width: 12px;
                    height: 12px;
                    background: rgba(255, 255, 255, 0.4);
                    border-radius: 50%;
                    cursor: pointer;
                    transition: all 0.3s ease;
                }

                .swiper-pagination-bullet-active {
                    background: #ff8c42;
                    width: 30px;
                    border-radius: 6px;
                }

                /* Booking Form Section - Inside Slider */
                .hero-booking-fixed {
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    padding: 0px 0px 10px;
                    z-index: 12;
                    width: 100%;
                }

                .booking-form-wrapper {
                    max-width: 1200px;
                    margin: 0 auto;
                    width: 100%;
                }

                .booking-form-title {
                    font-size: 24px;
                    font-weight: 700;
                    color: #ffffff;
                    margin-bottom: 20px;
                    text-align: center;
                }

                .responsive-booking-form {
                    width: 100%;
                }

                .booking-fields-grid {
                    display: grid;
                    grid-template-columns: repeat(4, 1fr);
                    gap: 15px;
                    align-items: flex-end;
                }

                .booking-field-group {
                    display: flex;
                    flex-direction: column;
                }

                .booking-field-group label {
                    font-size: 12px;
                    font-weight: 600;
                    color: #ffffff;
                    margin-bottom: 8px;
                    text-transform: uppercase;
                    letter-spacing: 0.5px;
                }

                .booking-input {
                    padding: 12px 15px;
                    border: 1px solid rgba(255, 255, 255, 0.2);
                    border-radius: 6px;
                    background: rgba(255, 255, 255, 0.1);
                    color: #ffffff;
                    font-size: 14px;
                    font-weight: 500;
                    transition: all 0.3s ease;
                    backdrop-filter: blur(10px);
                }

                .booking-input:focus {
                    outline: none;
                    background: rgba(255, 255, 255, 0.15);
                    border-color: #ff8c42;
                    box-shadow: 0 0 10px rgba(255, 140, 66, 0.3);
                }

                .booking-input::placeholder {
                    color: rgba(255, 255, 255, 0.6);
                }

                .booking-btn-submit {
                    text-align: center;
                    width: fit-content;
                    padding: 12px 20px;
                    background: linear-gradient(135deg, #ff8c42 0%, #ff7024 100%);
                    color: #ffffff;
                    border: none;
                    border-radius: 6px;
                    font-size: 14px;
                    font-weight: 700;
                    cursor: pointer;
                    transition: all 0.3s ease;
                    text-transform: uppercase;
                    letter-spacing: 1px;
                    grid-column: 1 / -1;
                    justify-self: center;
                    margin-top: 5px;
                }

                .booking-btn-submit:hover {
                    transform: translateY(-2px);
                    box-shadow: 0 10px 30px rgba(255, 140, 66, 0.4);
                }

                .booking-btn-submit:active {
                    transform: translateY(0);
                }

                /* Responsive Design */
                @media (max-width: 1200px) {
                    .hero-slider-container {
                        height: 100vh;
                    }

                    .hero-slide-content {
                        padding: 40px 30px 150px 30px;
                    }

                    .hero-slide-title {
                        font-size: 40px;
                    }

                    .hero-slide-description {
                        font-size: 15px;
                    }

                    .hero-slider-btn {
                        width: 45px;
                        height: 45px;
                        font-size: 18px;
                    }

                    .hero-slider-prev {
                        left: 15px;
                    }

                    .hero-slider-next {
                        right: 15px;
                    }

                    .booking-fields-grid {
                        grid-template-columns: repeat(2, 1fr);
                    }
                }

                @media (max-width: 1024px) {
                    .hero-slider-container {
                        height: 90vh;
                    }

                    .hero-slide-content {
                        padding: 35px 25px 140px 25px;
                    }

                    .hero-content-block {
                        margin-top: -140px;
                        max-width: auto;
                    }

                    .hero-slide-title {
                        font-size: 36px;
                    }

                    .hero-slide-description {
                        font-size: 14px;
                    }

                    .hero-slider-btn {
                        width: 44px;
                        height: 44px;
                        font-size: 17px;
                    }

                    .booking-fields-grid {
                        grid-template-columns: repeat(2, 1fr);
                    }

                    .hero-slider-pagination {
                        bottom: 70px;
                    }

                    .hero-booking-fixed {
                        padding: 30px 15px 25px;
                    }
                }

                @media (max-width: 768px) {
                    .hero-slider-container {
                        height: 100vh;
                    }

                    .hero-responsive-section {
                        min-height: auto;
                    }

                    .hero-slide-content {
                        padding: 30px 15px 130px 20px;
                        justify-content: center;
                    }

                    .hero-content-block {
                        text-align: center;
                        max-width: 100%;
                    }

                    .hero-label {
                        font-size: 12px;
                        margin-bottom: 10px;
                    }

                    .hero-slide-title {
                        font-size: 26px;
                        margin-bottom: 12px;
                        line-height: 1.3;
                    }

                    .hero-slide-description {
                        font-size: 13px;
                        margin-bottom: 15px;
                    }

                    .hero-slide-link {
                        padding: 9px 20px;
                        font-size: 12px;
                    }

                    .hero-slider-btn {
                        width: 40px;
                        height: 40px;
                        font-size: 15px;
                    }

                    .hero-slider-prev {
                        left: 10px;
                    }

                    .hero-slider-next {
                        right: 10px;
                    }

                    .hero-slider-pagination {
                        bottom: 115px;
                        gap: 8px;
                    }

                    .hero-booking-fixed {
                        padding: 20px 12px 18px;
                    }

                    .booking-form-wrapper {
                        max-width: 100%;
                    }

                    .booking-form-title {
                        font-size: 16px;
                        margin-bottom: 12px;
                    }

                    .booking-fields-grid {
                        grid-template-columns: 1fr;
                        gap: 10px;
                    }

                    .booking-input,
                    .booking-btn-submit {
                        padding: 9px 10px;
                        font-size: 12px;
                    }

                    .booking-field-group label {
                        font-size: 11px;
                        margin-bottom: 5px;
                    }
                }

                @media (max-width: 599px) {
                    .hero-slider-container {
                        height: 100vh;
                    }

                    .hero-slide-content {
                        padding: 25px 12px 110px 15px;
                    }

                    .hero-content-block {
                        max-width: 90%;
                    }

                    .hero-label {
                        font-size: 11px;
                        margin-bottom: 8px;
                        letter-spacing: 0.5px;
                    }

                    .hero-slide-title {
                        font-size: 20px;
                        margin-bottom: 10px;
                        font-weight: 600;
                    }

                    .hero-slide-description {
                        font-size: 12px;
                        margin-bottom: 12px;
                        line-height: 1.4;
                    }

                    .hero-slide-link {
                        padding: 8px 16px;
                        font-size: 11px;
                        display: inline-flex;
                        align-items: center;
                    }

                    .hero-slider-btn {
                        width: 36px;
                        height: 36px;
                        font-size: 13px;
                    }

                    .hero-slider-prev {
                        left: 8px;
                    }

                    .hero-slider-next {
                        right: 8px;
                    }

                    .hero-slider-pagination {
                        bottom: 105px;
                        gap: 6px;
                    }

                    .swiper-pagination-bullet {
                        width: 10px;
                        height: 10px;
                    }

                    .swiper-pagination-bullet-active {
                        width: 24px;
                    }

                    .hero-booking-fixed {
                        padding: 0px 0px 5px;
                       
                    }

                    .booking-form-wrapper {
                        max-width: 100%;
                    }

                    .booking-form-title {
                        font-size: 14px;
                        margin-bottom: 10px;
                    }

                    .booking-fields-grid {
                        grid-template-columns: 1fr 1fr;
                        gap: 8px;
                    }

                    .booking-input,
                    .booking-btn-submit {
                        padding: 8px 10px;
                        font-size: 11px;
                    }

                    .booking-field-group label {
                        font-size: 10px;
                        margin-bottom: 4px;
                    }
                }

                @media (max-width: 380px) {
                    .hero-slider-container {
                        height: 90vh;
                    }

                    .hero-slider-btn {
                        width: 32px;
                        height: 32px;
                        font-size: 11px;
                    }

                    .hero-slider-prev {
                        left: 5px;
                    }

                    .hero-slider-next {
                        right: 5px;
                    }

                    .hero-slider-pagination {
                        bottom: 95px;
                    }

                    .swiper-pagination-bullet {
                        width: 8px;
                        height: 8px;
                    }

                    .swiper-pagination-bullet-active {
                        width: 20px;
                    }

                    .hero-slide-title {
                        font-size: 18px;
                    }

                    .hero-slide-description {
                        font-size: 11px;
                    }

                    .hero-booking-fixed {
                        padding: 12px 8px 10px;
                    }

                    .booking-form-title {
                        font-size: 12px;
                        margin-bottom: 8px;
                    }

                    .booking-fields-grid {
                        gap: 6px;
                    }

                    .booking-input,
                    .booking-btn-submit {
                        padding: 7px 8px;
                        font-size: 10px;
                    }
                }

            </style>

            <script>
                // Initialize Hero Slider with enhanced responsiveness
                document.addEventListener('DOMContentLoaded', function() {
                    const heroSlider = new Swiper('.hero-slider-swiper', {
                        loop: true,
                        autoplay: {
                            delay: 5000,
                            disableOnInteraction: false,
                            pauseOnMouseEnter: true,
                        },
                        pagination: {
                            el: '.hero-slider-pagination',
                            clickable: true,
                            dynamicBullets: false,
                        },
                        navigation: {
                            nextEl: '.hero-slider-next',
                            prevEl: '.hero-slider-prev',
                        },
                        effect: 'fade',
                        fadeEffect: {
                            crossFade: true,
                        },
                        speed: 800,
                        touchEventsTarget: 'container',
                        keyboard: {
                            enabled: true,
                            onlyInViewport: true,
                        },
                        a11y: {
                            enabled: true,
                            prevSlideMessage: 'Previous slide',
                            nextSlideMessage: 'Next slide',
                        },
                    });

                    // Set min dates for check-in/check-out
                    const today = new Date().toISOString().split('T')[0];
                    const checkInInput = document.getElementById('heroCheckIn');
                    const checkOutInput = document.getElementById('heroCheckOut');
                    
                    if (checkInInput) checkInInput.setAttribute('min', today);
                    if (checkOutInput) checkOutInput.setAttribute('min', today);

                    // Update checkout min date when checkin changes
                    if (checkInInput) {
                        checkInInput.addEventListener('change', function() {
                            if (checkOutInput) {
                                checkOutInput.setAttribute('min', this.value || today);
                            }
                        });
                    }
                });

                // Handle hero booking form
                function handleHeroBooking(event) {
                    event.preventDefault();
                    const checkIn = document.getElementById('heroCheckIn').value;
                    const checkOut = document.getElementById('heroCheckOut').value;
                    const guests = document.getElementById('heroGuests').value;
                    const rooms = document.getElementById('heroRooms').value;

                    if (!checkIn || !checkOut) {
                        alert('Please select check-in and check-out dates');
                        return;
                    }

                    if (new Date(checkOut) <= new Date(checkIn)) {
                        alert('Check-out date must be after check-in date');
                        return;
                    }

                    // Redirect to reservation page with parameters
                    window.location.href = `reservation.php?checkIn=${checkIn}&checkOut=${checkOut}&guests=${guests}&rooms=${rooms}`;
                }
            </script>

            <!-- About Section -->
            <section class="about-modern-section">
                <div class="container">
                    <div class="about-modern-card">
                        <div class="row g-4 g-lg-5 align-items-center">
                            <div class="col-lg-6 wow fadeInUp" data-wow-delay="0s">
                                <span class="about-modern-kicker">About zemaraim</span>
                                <h2 class="about-modern-title">Stay in comfort, wake up inspired, and book with
                                    confidence.</h2>
                                <p class="about-modern-text">zemaraim combines elegant rooms, warm service, and prime
                                    city access for business and leisure travelers. From curated dining to wellness
                                    spaces, every detail is crafted to make your stay effortless.</p>

                                <div class="about-modern-points">
                                    <div class="about-point-item">
                                        <span class="about-point-icon"><i class="icofont-check-circled"></i></span>
                                        <span>Flexible check-in and seamless online booking</span>
                                    </div>
                                    <div class="about-point-item">
                                        <span class="about-point-icon"><i class="icofont-check-circled"></i></span>
                                        <span>Premium rooms with modern amenities and city views</span>
                                    </div>
                                    <div class="about-point-item">
                                        <span class="about-point-icon"><i class="icofont-check-circled"></i></span>
                                        <span>Top-rated guest support available every day</span>
                                    </div>
                                </div>

                                <div class="about-modern-cta">
                                    <a href="reservation.php" class="btn-main">Book Your Stay</a>
                                    <a href="about.php" class="btn-main btn-line">Learn More</a>
                                </div>

                                <div class="about-modern-stats">
                                    <div class="about-stat-box">
                                        <strong>4.9/5</strong>
                                        <span>Guest Rating</span>
                                    </div>
                                    <div class="about-stat-box">
                                        <strong>25K+</strong>
                                        <span>Happy Visitors</span>
                                    </div>
                                    <div class="about-stat-box">
                                        <strong>24/7</strong>
                                        <span>Support Team</span>
                                    </div>
                                </div>
                            </div>

                            <div class="col-lg-6 wow fadeInUp" data-wow-delay="0.2s">
                                <div class="about-modern-gallery">
                                    <div class="about-gallery-main soft-shadow">
                                        <img src="images/background/1.webp" alt="zemaraim Hotel Exterior">
                                        <div class="about-gallery-badge">
                                            <span>Best Value</span>
                                            <strong>From $129/night</strong>
                                        </div>
                                    </div>
                                    <div class="about-gallery-sub-wrap">
                                        <div class="about-gallery-sub soft-shadow">
                                            <img src="images/misc/4.webp" alt="Luxury Room">
                                        </div>
                                        <div class="about-gallery-sub soft-shadow">
                                            <img src="images/misc/11.webp" alt="Fine Dining">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- Features Section -->
            <section class="features-modern-section">
                <div class="container">
                    <div class="features-modern-head text-center wow fadeInUp">
                        <span class="features-kicker">Why Guests Choose Us</span>
                        <h2 class="features-title">Everything you need for a memorable and effortless stay.</h2>
                        <p class="features-subtitle">Explore premium hospitality experiences designed to help guests
                            book faster and stay longer.</p>
                    </div>

                    <div class="row g-3 g-md-4">
                        <div class="col-lg-3 col-sm-6 wow fadeInUp" data-wow-delay="0s">
                            <article class="feature-modern-card h-100">
                                <div class="feature-modern-icon"><i class="icofont-hotel-boy"></i></div>
                                <h3>Premium Rooms</h3>
                                <p>Spacious rooms with modern comforts, premium bedding, and city-view options.</p>
                                <a href="rooms.php">View Rooms</a>
                            </article>
                        </div>
                        <div class="col-lg-3 col-sm-6 wow fadeInUp" data-wow-delay="0.15s">
                            <article class="feature-modern-card h-100">
                                <div class="feature-modern-icon"><i class="icofont-restaurant"></i></div>
                                <h3>Fine Dining</h3>
                                <p>Curated menus and signature dishes prepared by experienced chefs every day.</p>
                                <a href="facilities.php">See Dining</a>
                            </article>
                        </div>
                        <div class="col-lg-3 col-sm-6 wow fadeInUp" data-wow-delay="0.3s">
                            <article class="feature-modern-card h-100">
                                <div class="feature-modern-icon"><i class="icofont-tags"></i></div>
                                <h3>Best Offers</h3>
                                <p>Flexible promos and exclusive rates to help you save more on every booking.</p>
                                <a href="offer.php">Get Offers</a>
                            </article>
                        </div>
                        <div class="col-lg-3 col-sm-6 wow fadeInUp" data-wow-delay="0.45s">
                            <article class="feature-modern-card h-100">
                                <div class="feature-modern-icon"><i class="icofont-spa"></i></div>
                                <h3>Spa &amp; Wellness</h3>
                                <p>Relaxation spaces and treatment services to recharge during your stay.</p>
                                <a href="facilities.php">Discover Spa</a>
                            </article>
                        </div>
                    </div>

                    <div class="features-modern-cta wow fadeInUp" data-wow-delay="0.55s">
                        <div class="features-cta-copy">
                            <h3>Ready to plan your stay?</h3>
                            <p>Book now and unlock member-only perks, flexible reservations, and instant confirmation.
                            </p>
                        </div>
                        <div class="features-cta-actions">
                            <a href="reservation.php" class="btn-main">Book Now</a>
                            <a href="rooms.php" class="btn-main btn-line">Browse Rooms</a>
                        </div>
                    </div>
                </div>
            </section>

            <!-- Video Section -->
            <section class="video-modern-section" aria-label="video section">
                <div class="container">
                    <div class="video-modern-wrap wow fadeInUp">
                        <div class="video-modern-copy">
                            <span class="video-modern-kicker">See The Experience</span>
                            <h2 class="video-modern-title">Take a quick hotel tour before you book.</h2>
                            <p class="video-modern-text">Discover our rooms, dining, and wellness spaces in under a
                                minute. Get a feel for the atmosphere and reserve your stay with confidence.</p>
                            <div class="video-modern-cta">
                                <a href="reservation.php" class="btn-main">Book Your Stay</a>
                                <a href="rooms.php" class="btn-main btn-line">View Rooms</a>
                            </div>
                            <div class="video-modern-tags">
                                <span>Instant confirmation</span>
                                <span>Flexible dates</span>
                                <span>Best rate guarantee</span>
                            </div>
                        </div>

                        <a class="video-modern-player popup-youtube soft-shadow"
                            href="https://www.youtube.com/watch?v=C6rf51uHWJg">
                            <img src="images/background/9.webp" class="video-modern-image" alt="Hotel Video Preview">
                            <span class="video-modern-overlay"></span>
                            <span class="video-modern-play">
                                <i class="icofont-ui-play"></i>
                            </span>
                            <span class="video-modern-caption">Watch 58s Hotel Tour</span>
                        </a>
                    </div>
                </div>
            </section>

            <!-- Facilities Section -->
            <section id="section-about" class="facilities-modern-section">
                <div class="container">
                    <div class="facilities-modern-head text-center wow fadeInUp">
                        <span class="facilities-kicker">Guest Amenities</span>
                        <h2 class="facilities-title">Everything on-site to make your stay exceptional.</h2>
                        <p class="facilities-subtitle">From wellness to business services, our facilities are designed
                            for comfort, convenience, and a better booking experience.</p>
                    </div>

                    <div class="row g-3 g-md-4">
                        <div class="col-lg-4 col-sm-6 wow fadeInUp" data-wow-delay="0s">
                            <article class="facility-modern-card h-100">
                                <div class="facility-modern-icon"><img src="images/svg/restaurant-svgrepo-com.svg"
                                        alt="Restaurant"></div>
                                <h4>Restaurant</h4>
                                <p>Award-winning dishes and all-day dining for every guest.</p>
                            </article>
                        </div>
                        <div class="col-lg-4 col-sm-6 wow fadeInUp" data-wow-delay="0.15s">
                            <article class="facility-modern-card h-100">
                                <div class="facility-modern-icon"><img src="images/svg/swimming-pool-svgrepo-com.svg"
                                        alt="Swimming Pool"></div>
                                <h4>Swimming Pool</h4>
                                <p>Relax in a spacious pool area with panoramic views.</p>
                            </article>
                        </div>
                        <div class="col-lg-4 col-sm-6 wow fadeInUp" data-wow-delay="0.3s">
                            <article class="facility-modern-card h-100">
                                <div class="facility-modern-icon"><img src="images/svg/fitness-gym-svgrepo-com.svg"
                                        alt="Fitness Center"></div>
                                <h4>Fitness Center</h4>
                                <p>Modern equipment and professional support for your routine.</p>
                            </article>
                        </div>
                        <div class="col-lg-4 col-sm-6 wow fadeInUp" data-wow-delay="0.45s">
                            <article class="facility-modern-card h-100">
                                <div class="facility-modern-icon"><img
                                        src="images/svg/flower-lotus-thin-svgrepo-com.svg" alt="Spa and Massage"></div>
                                <h4>Spa &amp; Massage</h4>
                                <p>Rejuvenating treatments to unwind after travel or meetings.</p>
                            </article>
                        </div>
                        <div class="col-lg-4 col-sm-6 wow fadeInUp" data-wow-delay="0.6s">
                            <article class="facility-modern-card h-100">
                                <div class="facility-modern-icon"><img src="images/svg/meeting-explain-svgrepo-com.svg"
                                        alt="Meeting Room"></div>
                                <h4>Meeting Rooms</h4>
                                <p>Business-ready spaces with fast connectivity and presentation tools.</p>
                            </article>
                        </div>
                        <div class="col-lg-4 col-sm-6 wow fadeInUp" data-wow-delay="0.75s">
                            <article class="facility-modern-card h-100">
                                <div class="facility-modern-icon"><img src="images/svg/laundry-machine-svgrepo-com.svg"
                                        alt="Laundry Service"></div>
                                <h4>Laundry Service</h4>
                                <p>Same-day care options to keep your stay comfortable and easy.</p>
                            </article>
                        </div>
                    </div>

                    <div class="facilities-modern-cta wow fadeInUp" data-wow-delay="0.9s">
                        <div class="facilities-cta-copy">
                            <h3>Ready to enjoy these facilities?</h3>
                            <p>Reserve today and get instant booking confirmation with flexible stay options.</p>
                        </div>
                        <div class="facilities-cta-actions">
                            <a href="reservation.php" class="btn-main">Book Your Stay</a>
                            <a href="facilities.php" class="btn-main btn-line">Explore More</a>
                        </div>
                    </div>
                </div>
            </section>

            <!-- Rooms Section -->
            <section id="section-rooms" class="rooms-modern-section">
                <div class="container">
                    <div class="rooms-modern-head text-center wow fadeInUp">
                        <span class="rooms-kicker">Stay Your Way</span>
                        <h2 class="rooms-title">Choose the perfect room for your next trip.</h2>
                        <p class="rooms-subtitle">From cozy stays to premium suites, each room is crafted for comfort
                            and easy online booking.</p>
                    </div>

                    <div class="row g-3 g-md-4">
                        <div class="col-lg-4 col-md-6 wow fadeInUp" data-wow-delay="0s">
                            <article class="room-modern-card h-100">
                                <a href="rooms.php" class="room-modern-image-wrap">
                                    <img src="images/room/1.webp" class="room-modern-image" alt="Standard Room">
                                    <span class="room-modern-price">From $129</span>
                                </a>
                                <div class="room-modern-body">
                                    <h3>Standard Room</h3>
                                    <p>Comfortable essentials with modern styling for business and leisure guests.</p>
                                    <div class="room-modern-meta">
                                        <span>2 Guests</span>
                                        <span>30 ft</span>
                                    </div>
                                    <a href="reservation.php" class="btn-main room-modern-btn">Book Now</a>
                                </div>
                            </article>
                        </div>

                        <div class="col-lg-4 col-md-6 wow fadeInUp" data-wow-delay="0.15s">
                            <article class="room-modern-card h-100">
                                <a href="rooms.php" class="room-modern-image-wrap">
                                    <img src="images/room/2.webp" class="room-modern-image" alt="Deluxe Room">
                                    <span class="room-modern-price">From $149</span>
                                </a>
                                <div class="room-modern-body">
                                    <h3>Deluxe Room</h3>
                                    <p>Extra space, premium bedding, and refined details for a restful stay.</p>
                                    <div class="room-modern-meta">
                                        <span>2 Guests</span>
                                        <span>35 ft</span>
                                    </div>
                                    <a href="reservation.php" class="btn-main room-modern-btn">Book Now</a>
                                </div>
                            </article>
                        </div>

                        <div class="col-lg-4 col-md-6 wow fadeInUp" data-wow-delay="0.3s">
                            <article class="room-modern-card h-100">
                                <a href="rooms.php" class="room-modern-image-wrap">
                                    <img src="images/room/3.webp" class="room-modern-image" alt="Premier Room">
                                    <span class="room-modern-price">From $159</span>
                                </a>
                                <div class="room-modern-body">
                                    <h3>Premier Room</h3>
                                    <p>Stylish interiors with upgraded amenities and an elevated stay experience.</p>
                                    <div class="room-modern-meta">
                                        <span>2 Guests</span>
                                        <span>35 ft</span>
                                    </div>
                                    <a href="reservation.php" class="btn-main room-modern-btn">Book Now</a>
                                </div>
                            </article>
                        </div>

                        <div class="col-lg-4 col-md-6 wow fadeInUp" data-wow-delay="0.45s">
                            <article class="room-modern-card h-100">
                                <a href="rooms.php" class="room-modern-image-wrap">
                                    <img src="images/room/4.webp" class="room-modern-image" alt="Family Suite">
                                    <span class="room-modern-price">From $179</span>
                                </a>
                                <div class="room-modern-body">
                                    <h3>Family Suite</h3>
                                    <p>Perfect for group stays with generous room layout and flexible comfort.</p>
                                    <div class="room-modern-meta">
                                        <span>4 Guests</span>
                                        <span>60 ft</span>
                                    </div>
                                    <a href="reservation.php" class="btn-main room-modern-btn">Book Now</a>
                                </div>
                            </article>
                        </div>

                        <div class="col-lg-4 col-md-6 wow fadeInUp" data-wow-delay="0.6s">
                            <article class="room-modern-card h-100">
                                <a href="rooms.php" class="room-modern-image-wrap">
                                    <img src="images/room/5.webp" class="room-modern-image" alt="Luxury Suite">
                                    <span class="room-modern-price">From $199</span>
                                </a>
                                <div class="room-modern-body">
                                    <h3>Luxury Suite</h3>
                                    <p>Premium comfort and curated design for guests seeking extra indulgence.</p>
                                    <div class="room-modern-meta">
                                        <span>4 Guests</span>
                                        <span>60 ft</span>
                                    </div>
                                    <a href="reservation.php" class="btn-main room-modern-btn">Book Now</a>
                                </div>
                            </article>
                        </div>

                        <div class="col-lg-4 col-md-6 wow fadeInUp" data-wow-delay="0.75s">
                            <article class="room-modern-card h-100">
                                <a href="rooms.php" class="room-modern-image-wrap">
                                    <img src="images/room/6.webp" class="room-modern-image" alt="Presidential Suite">
                                    <span class="room-modern-price">From $249</span>
                                </a>
                                <div class="room-modern-body">
                                    <h3>Presidential Suite</h3>
                                    <p>Top-tier luxury with spacious living, privacy, and signature service.</p>
                                    <div class="room-modern-meta">
                                        <span>4 Guests</span>
                                        <span>60 ft</span>
                                    </div>
                                    <a href="reservation.php" class="btn-main room-modern-btn">Book Now</a>
                                </div>
                            </article>
                        </div>
                    </div>

                    <div class="rooms-modern-cta wow fadeInUp" data-wow-delay="0.9s">
                        <div class="rooms-cta-copy">
                            <h3>Need help choosing a room?</h3>
                            <p>Explore full room details, compare options, and reserve in just a few clicks.</p>
                        </div>
                        <div class="rooms-cta-actions">
                            <a href="rooms.php" class="btn-main">Explore All Rooms</a>
                            <a href="reservation.php" class="btn-main btn-line">Book Direct</a>
                        </div>
                    </div>
                </div>
            </section>

        </div>
        <!-- content close -->

        <!-- footer begin -->
        <?php include 'footer.php'; ?>
        <!-- footer close -->
    </div>



    <!-- Javascript Files
    ================================================== -->
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
    <script src="js/plugins.js"></script>
    <script src="js/designesia.js"></script>
    <script src="js/swiper.js"></script>
    <script src="js/custom-marquee.js"></script>
    <script src="js/custom-swiper-3.js"></script>
    <script src='../../recaptcha/api.js' async="" defer=""></script>
    <script src="contact.js"></script>

    <script>
        document.addEventListener("DOMContentLoaded", function () {
            // Initialize Hero Slider
            new Swiper(".hero-swiper", {
                loop: true,
                speed: 1200,
                autoplay: {
                    delay: 8000,
                    disableOnInteraction: false,
                    pauseOnMouseEnter: true,
                },
                effect: "fade",
                fadeEffect: { crossFade: true },
                pagination: {
                    el: ".swiper-pagination",
                    clickable: true,
                },
                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev",
                },
            });

            // Booking Form Stepper Functionality
            const stepperBtns = document.querySelectorAll(".stepper-btn");
            stepperBtns.forEach(btn => {
                btn.addEventListener("click", function () {
                    const input = this.parentElement.querySelector("input");
                    const currentValue = parseInt(input.value) || 0;
                    const step = this.dataset.step;

                    if (step === "up") {
                        input.value = currentValue + 1;
                    } else if (step === "down" && currentValue > 1) {
                        input.value = currentValue - 1;
                    }
                });
            });

            // Date Picker Setup (using HTML5 date input)
            const checkInInput = document.getElementById("check-in");
            const checkOutInput = document.getElementById("check-out");

            if (checkInInput) {
                checkInInput.addEventListener("change", function () {
                    if (checkOutInput) {
                        const checkInDate = new Date(this.value);
                        checkInDate.setDate(checkInDate.getDate() + 1);
                        const minDate = checkInDate.toISOString().split("T")[0];
                        checkOutInput.setAttribute("min", minDate);
                    }
                });
            }

            // Booking Form Submission
            const bookingForm = document.querySelector(".booking-form-modern");
            if (bookingForm) {
                bookingForm.addEventListener("submit", function (e) {
                    e.preventDefault();

                    const checkIn = document.getElementById("check-in")?.value || "";
                    const checkOut = document.getElementById("check-out")?.value || "";
                    const adults = document.getElementById("adults")?.value || "1";
                    const children = document.getElementById("children")?.value || "0";
                    const roomType = document.getElementById("room-type")?.value || "standard";

                    // Validation
                    if (!checkIn || !checkOut) {
                        alert("Please select check-in and check-out dates");
                        return;
                    }

                    if (new Date(checkOut) <= new Date(checkIn)) {
                        alert("Check-out date must be after check-in date");
                        return;
                    }

                    // Redirect to rooms page with query parameters
                    const params = new URLSearchParams({
                        checkIn: checkIn,
                        checkOut: checkOut,
                        adults: adults,
                        children: children,
                        roomType: roomType
                    });

                    window.location.href = "rooms.php?" + params.toString();
                });
            }
        });
    </script>

    <!-- Clean up plugin inline styles on body -->
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            // Remove unwanted inline styles from body that plugins add
            const body = document.body;
            const stylesToRemove = ['height', 'background-size', 'background-repeat', 'background-image'];
            
            // Initial cleanup
            stylesToRemove.forEach(style => {
                body.style.removeProperty(style);
            });
            
            // Watch for changes and remove them
            const observer = new MutationObserver(function(mutations) {
                mutations.forEach(function(mutation) {
                    if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
                        stylesToRemove.forEach(style => {
                            body.style.removeProperty(style);
                        });
                    }
                });
            });
            
            observer.observe(body, {
                attributes: true,
                attributeFilter: ['style']
            });
        });
    </script>
</body>

</html>
