<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Nigeria's Premier Shortlet Provider - Your Perfect Stay Awaits.">
    <meta name="keywords" content="short stay lagos, shortlet lagos, short lease lagos, vacation rentals lagos, home rentals lagos, short term accommodation lagos, luxury stays lagos, serviced apartments lagos, shortlet Abuja, shortlet Nigeria,short stay Nigeria, home rentals Nigeria, luxury stays Nigeria, short lease Nigeria, service apartments Nigeria, vacation homes Nigeria, real estate Nigeria, property management Nigeria, real estate investment Nigeria, property development Nigeria">
    <title>Shortlet Key | Premium Shortlet Accommodations in Nigeria</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="agent-styles.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Poppins:wght@400;500;600;700&family=Open+Sans:wght@300;400;500;600&display=swap" rel="stylesheet">
    <link rel="icon" type="image/png" href="shortlet_logo.png">
    <!-- Paystack Inline JS -->
    <script src="https://js.paystack.co/v1/inline.js"></script>
</head>
<body>
    <!-- Guest View Banner (shown when ?agent_id= param is present) -->
    <div id="guestViewBanner" style="display:none; background:var(--primary,#1a5490); color:#fff; text-align:center; padding:0.6rem 1rem; position:fixed; top:0; left:0; right:0; z-index:10000; font-size:0.88rem;">
        You are viewing properties shared by your agent. Contact your agent to make a reservation.
        <button onclick="this.parentElement.style.display='none'" style="background:none;border:none;color:#fff;font-size:1.2rem;cursor:pointer;float:right;line-height:1;">&times;</button>
    </div>

    <!-- Theme Toggle Button -->
    <button class="theme-toggle" id="themeToggle" aria-label="Toggle dark mode">
        <svg class="sun-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <circle cx="12" cy="12" r="5"></circle>
            <line x1="12" y1="1" x2="12" y2="3"></line>
            <line x1="12" y1="21" x2="12" y2="23"></line>
            <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
            <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
            <line x1="1" y1="12" x2="3" y2="12"></line>
            <line x1="21" y1="12" x2="23" y2="12"></line>
            <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
            <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
        </svg>
        <svg class="moon-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
        </svg>
    </button>

    <!-- Navigation -->
    <nav class="navbar">
        <div class="container">
            <div class="nav-wrapper">
                <div class="logo">
    <a href="#home">
        <img src="shortlet_blue_logo.png" alt="Shortlet Keys - Your Perfect Stay Awaits" class="logo-image">
    </a>
</div>
                <button class="mobile-menu-toggle" id="mobileMenuToggle" aria-label="Toggle menu">
                    <span></span>
                    <span></span>
                    <span></span>
                </button>
                <ul class="nav-menu" id="navMenu">
                    <li><a href="#home" class="active">Home</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#services">Services</a></li>
                    <li><a href="#properties">Properties</a></li>
                    <li><a href="#why-us">Why Us</a></li>
                    <li><a href="#contact">Contact</a></li>
                    <li><a href="javascript:void(0)" onclick="requestAgentCode()" style="color: #FF6B35; font-weight: 600;">🔑 Agent Login</a></li>
                    <li><a href="#contact" class="cta-button">Get Started</a></li>
                    <li><a href="/agent/dashboard" onclick="handleAgentPortalClick(event)" class="cta-button" id="agentPortalNavBtn" style="background:transparent;border:2px solid var(--primary);color:var(--primary);">Agent Portal</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <section class="hero" id="home">
        <div class="hero-overlay"></div>
        <div class="hero-content">
            <div class="container">
                <div class="hero-text">
                    <span class="hero-badge">Nigeria's Premier Shortlet Provider</span>
                    <h1 class="hero-title">Unlock Your <span class="highlight">Perfect Shortlet</span> in Nigeria</h1>
                    <p class="hero-subtitle">Premium serviced apartments and home rentals across Nigeria. Comfortable, convenient, and perfectly located for business or leisure.</p>
                    <div class="hero-buttons">
    <a href="#properties" class="btn btn-primary">
        <span>Explore Properties and Shortlets</span>
    </a>

    <button class="btn btn-secondary" onclick="openListPropertyModal()">
        <span>List or Lease Your Property</span>
    </button>

    <button class="btn btn-secondary-alt" onclick="openBookingAgentModal()">
        <span>Become a Booking Agent</span>
    </button>

    <button class="btn btn-secondary-alt" id="agentResaleBtn" onclick="openAgentListingModal()" style="display:none;">
        <span>🏠 List Unit for Resale (Agents Only)</span>
    </button>
</div>
                    <div class="hero-stats" style="display:none;">
                        <div class="stat">
                            <h3>50+</h3>
                            <p>Properties Managed</p>
                        </div>
                        <div class="stat">
                            <h3>&#8358;3B+</h3>
                            <p>Assets Under Management</p>
                        </div>
                        <div class="stat">
                            <h3>95%</h3>
                            <p>Client Satisfaction</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="scroll-indicator">
            <span>Scroll</span>
            <div class="scroll-line"></div>
        </div>
    </section>

    <!-- Trust Badges Section -->
    <section class="trust-badges">
        <div class="container">
            <div class="badges-grid">
                <div class="badge">
                    <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
                    </svg>
                    <p>Secure Payment Handling</p>
                </div>
                <div class="badge">
                    <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
                        <polyline points="22 4 12 14.01 9 11.01"></polyline>
                    </svg>
                    <p>CAC Certified</p>
                </div>
                <div class="badge">
                    <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
                        <line x1="8" y1="21" x2="16" y2="21"></line>
                        <line x1="12" y1="17" x2="12" y2="21"></line>
                    </svg>
                    <p>SCUML Compliant</p>
                </div>
                <div class="badge">
                    <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
                    </svg>
                    <p>Exceptional Customer Service</p>
                </div>
            </div>
        </div>
    </section>

    <!-- About Section -->
    <section class="about-section" id="about">
        <div class="container">
            <div class="section-header">
                <span class="section-tag">About Us</span>
                <h2>Nigeria's Premier <span class="highlight">Shortlet Services</span></h2>
                <p>Your trusted partner for comfortable, convenient shortlet accommodations across Nigeria.</p>
            </div>
            <div class="about-image">
                    <img src="about-section-image.jpg" alt="Shortlet Keys - Your Perfect Stay Awaits" loading="lazy">
                </div>
            </div>
        </div>
    </section>

    <!-- Services Section -->
    <section class="services-section" id="services">
        <div class="container">
            <div class="section-header">
                <span class="section-tag">Our Services</span>
                <h2>Comprehensive <span class="highlight">Hospitality Solutions</span></h2>
                <p>From short stay rentals to property management, we offer end-to-end accommodation services.</p>
            </div>
            <div class="service-image">
                    <img src="services-section-image.jpg" alt="Shortlet Keys - Your Perfect Stay Awaits" loading="lazy">
        </div>
            </div>
        </div>
    </section>

    <!-- Properties Section -->
    <section class="properties-section" id="properties">
        <div class="container">
            <div class="section-header">
                <span class="section-tag">Our Properties</span>
                <h2>Explore Our <span class="highlight">Premium Portfolio</span></h2>
                <p>Discover exceptional properties and shortlet accommodations across Nigeria.</p>
            </div>
            
                        <div class="property-search">
                <input type="text" id="propertySearch" placeholder="Search by type, location, price, features..." aria-label="Search properties" />
            </div>
            <div class="property-filters">
    <button class="filter-btn active" data-filter="all">All Properties</button>
    <button class="filter-btn" data-filter="1bed">1 Bedroom</button>
    <button class="filter-btn" data-filter="2bed">2 Bedroom</button>
    <button class="filter-btn" data-filter="3bed">3 Bedroom</button>
    <button class="filter-btn" data-filter="4bed">4 Bedroom+</button>
    <button class="filter-btn" data-filter="shortstay">Shortlet</button>
    <button class="filter-btn" data-filter="sale">For Sale</button>
    <button class="filter-btn" data-filter="rent">For Rent</button>
    <button class="filter-btn" data-filter="investment">Investment</button>
</div>

            <div class="properties-grid" id="propertiesGrid"></div>

    <!-- Property Details Modal -->
    <div id="propertyModal" class="modal">
        <div class="modal-content property-modal-content">
            <div class="modal-header">
                <h2 id="propertyModalTitle"></h2>
                <button class="modal-close" onclick="closePropertyModal()">&times;</button>
            </div>
            <div class="property-modal-body">
                <div class="property-carousel">
                    <button class="carousel-btn prev" onclick="changePropertyImage(-1)">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <polyline points="15 18 9 12 15 6"></polyline>
                        </svg>
                    </button>
                    <div class="carousel-image-container">
                        <img id="propertyModalImage" src="" alt="Property Image" onclick="openImageLightbox()">
                    </div>
                    <button class="carousel-btn next" onclick="changePropertyImage(1)">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <polyline points="9 18 15 12 9 6"></polyline>
                        </svg>
                    </button>
                    <div class="carousel-indicators" id="carouselIndicators"></div>
                </div>
                <div class="property-modal-details">
                    <div class="property-modal-location" id="propertyModalLocation"></div>
                    <div class="property-modal-price" id="propertyModalPrice"></div>
                    <div class="property-modal-description" id="propertyModalDescription"></div>
                    <div class="modal-meta-row" id="modalSecurityDepositRow" style="display:none;">
                        <span>Refundable Security Deposit:</span>
                        <strong id="modalSecurityDeposit">₦0</strong>
                    </div>
                    <div class="property-modal-features" id="propertyModalFeatures"></div>
                    <div class="property-modal-actions" id="propertyModalActions"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- Image Lightbox Modal -->
    <div id="imageLightbox" class="lightbox-modal">
        <button class="lightbox-close" onclick="closeLightbox()">&times;</button>
        <button class="lightbox-btn prev" onclick="changeLightboxImage(-1)">
            <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <polyline points="15 18 9 12 15 6"></polyline>
            </svg>
        </button>
        <img id="lightboxImage" src="" alt="Property Image">
        <button class="lightbox-btn next" onclick="changeLightboxImage(1)">
            <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <polyline points="9 18 15 12 9 6"></polyline>
            </svg>
        </button>
        <div class="lightbox-counter" id="lightboxCounter"></div>
    </div>

    <!-- Reservation Modal -->
    <div id="reservationModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2>Reserve Your Stay</h2>
                <button class="modal-close" onclick="closeReservationModal()">&times;</button>
            </div>
            <form action='/success' class='reservation-form' id='reservationForm' method='POST' name='reservation'>
                <input type="hidden" name="form-name" value="reservation">
                <input type="hidden" name="bot-field">
                <input type="hidden" id="propertyId" name="property-id">
                <input type="hidden" id="propertyName" name="property-name">
                <input type="hidden" id="pricePerNight" name="price-per-night">
                <input type="hidden" name="number-of-nights">
                <input type="hidden" name="total-amount">
                <input type="hidden" name="payment-status">
                <input type="hidden" name="payment-reference">
                
                <div class="form-group">
                    <label>Selected Property</label>
                    <p id="displayPropertyName" class="property-display"></p>
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <label for="guestName">Full Name *</label>
                        <input type="text" id="guestName" name="guest-name" placeholder="Enter your full name" required>
                    </div>
                    <div class="form-group">
                        <label for="guestEmail">Email Address *</label>
                        <input type="email" id="guestEmail" name="guest-email" placeholder="your@email.com" required>
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <label for="guestPhone">Phone Number *</label>
                        <div style="display: flex; gap: 8px;">
                            <select id="guestPhoneCode" name="guest-phone-code" style="width: 120px;" required>
                                <option value="+234">ðŸ‡³ðŸ‡¬ +234</option>
                                <option value="+1">ðŸ‡ºðŸ‡¸ +1</option>
                                <option value="+44">ðŸ‡¬ðŸ‡§ +44</option>
                                <option value="+971">ðŸ‡¦ðŸ‡ª +971</option>
                                <option value="+91">ðŸ‡®ðŸ‡³ +91</option>
                                <option value="+86">ðŸ‡¨ðŸ‡³ +86</option>
                                <option value="+233">ðŸ‡¬ðŸ‡­ +233</option>
                                <option value="+254">ðŸ‡°ðŸ‡ª +254</option>
                                <option value="+27">ðŸ‡¿ðŸ‡¦ +27</option>
                            </select>
                            <input type="tel" id="guestPhone" name="guest-phone" placeholder="800 000 0000" style="flex: 1;" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="contactMethod">Preferred Contact Method *</label>
                        <select id="contactMethod" name="contact-method" required>
                            <option value="">Select contact method</option>
                            <option value="Call">Call</option>
                            <option value="Email">Email</option>
                            <option value="Text">Text Message</option>
                            <option value="WhatsApp">WhatsApp</option>
                        </select>
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <label for="guestCountry">Country of Residence</label>
                        <select id="guestCountry" name="guest-country">
                            <option value="">Select your country</option>
                            <option value="Nigeria">Nigeria</option>
                            <option value="">---</option>
                        </select>
                    </div>
                    <div class="form-group form-group-split">
                        <div class="form-split-item" style="width: 40%;">
                            <label for="guestCount"># of Guests *</label>
                            <input type="number" id="guestCount" name="guest-count" min="1" max="10" value="1" required>
                        </div>
                        <div class="form-split-item" style="width: 60%;">
                            <label for="bookingAgent">Booking Agent ID</label>
                            <input type="text" id="bookingAgent" name="booking-agent" placeholder="Enter ID for discount">
                        </div>
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <label for="checkInDate">Check-in Date *</label>
                        <input type="date" id="checkInDate" name="check-in-date" required>
                    </div>
                    <div class="form-group">
                        <label for="checkOutDate">Check-out Date *</label>
                        <input type="date" id="checkOutDate" name="check-out-date" required>
                    </div>
                </div>

                <div class="booking-summary">
                    <div class="summary-row">
                        <span>Nightly Rate:</span>
                        <span id="displayRate">&#8358;0</span>
                    </div>
                    <div class="summary-row">
                        <span>Number of Nights:</span>
                        <span id="numberOfNights">0</span>
                    </div>
                                        <div class="summary-row" id="depositRow">
                        <span>Refundable Security Deposit:</span>
                        <span id="securityDeposit">&#8358;0</span>
                    </div>
                    <div class="summary-row total">
                        <span>Total Amount:</span>
                        <span id="totalAmount">&#8358;0</span>
                    </div>
                </div>

                <div class="legal-link">
    <button type="button" onclick="openTermsModal(event)">
        Terms & Cancellation Policy
    </button>
</div>

                <div class="form-group">
                    <label for="specialRequests">Special Requests (Optional)</label>
                    <textarea id="specialRequests" name="special-requests" rows="3" placeholder="Any special requirements or preferences..."></textarea>
                </div>

                <div class="modal-actions">
                            <button type="button" class="btn btn-primary btn-lg" onclick="bookAndPayNow()" style="display:none">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <rect x="1" y="4" width="22" height="16" rx="2" ry="2"></rect>
                            <line x1="1" y1="10" x2="23" y2="10"></line>
                        </svg>
                        Book & Pay Now
                    </button>
                    <button type="button" class="btn btn-secondary-alt btn-lg" onclick="bookAndPayLater()">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
                            <polyline points="22 4 12 14.01 9 11.01"></polyline>
                        </svg>
                        Send Reservation Request
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- List Property Modal -->
    <div id="listPropertyModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2>List Your Property</h2>
                <button class="modal-close" onclick="closeListPropertyModal()">&times;</button>
            </div>
            <form action='/success' class='reservation-form' id='listPropertyForm' method='POST' name='list-property'>
                <input type="hidden" name="form-name" value="list-property">
                <input type="hidden" name="bot-field">
                
                <div class="form-row">
                    <div class="form-group">
                        <label for="ownerName">Full Name *</label>
                        <input type="text" id="ownerName" name="owner-name" placeholder="Enter your full name" required>
                    </div>
                    <div class="form-group">
                        <label for="ownerEmail">Email Address *</label>
                        <input type="email" id="ownerEmail" name="owner-email" placeholder="your@email.com" required>
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <label for="ownerPhone">Phone Number *</label>
                        <div style="display: flex; gap: 8px;">
                            <select id="ownerPhoneCode" name="owner-phone-code" style="width: 120px;" required>
                                <option value="+234">ðŸ‡³ðŸ‡¬ +234</option>
                                <option value="+1">ðŸ‡ºðŸ‡¸ +1</option>
                                <option value="+44">ðŸ‡¬ðŸ‡§ +44</option>
                                <option value="+971">ðŸ‡¦ðŸ‡ª +971</option>
                                <option value="+91">ðŸ‡®ðŸ‡³ +91</option>
                                <option value="+86">ðŸ‡¨ðŸ‡³ +86</option>
                                <option value="+233">ðŸ‡¬ðŸ‡­ +233</option>
                                <option value="+254">ðŸ‡°ðŸ‡ª +254</option>
                                <option value="+27">ðŸ‡¿ðŸ‡¦ +27</option>
                            </select>
                            <input type="tel" id="ownerPhone" name="owner-phone" placeholder="800 000 0000" style="flex: 1;" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="ownerCountry">Country of Residence *</label>
                        <select id="ownerCountry" name="owner-country" required>
                            <option value="">Select your country</option>
                            <option value="Nigeria">Nigeria</option>
                            <option value="">---</option>
                        </select>
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <label for="listingType">Listing Type *</label>
                        <select id="listingType" name="listing-type" required>
                            <option value="">Select listing type</option>
                            <option value="For Sale">For Sale</option>
                            <option value="For Rent">For Rent</option>
                            <option value="For Lease">For Lease</option>
                            <option value="Investment">Investment</option>
                            <option value="Short Stay">Short Stay</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="propertyTypeList">Property Type *</label>
                        <select id="propertyTypeList" name="property-type" required>
                            <option value="">Select property type</option>
                            <option value="Apartment">Apartment</option>
                            <option value="House">House</option>
                            <option value="Duplex">Duplex</option>
                            <option value="Bungalow">Bungalow</option>
                            <option value="Villa">Villa</option>
                            <option value="Penthouse">Penthouse</option>
                            <option value="Studio">Studio</option>
                            <option value="Commercial">Commercial Building</option>
                            <option value="Office Space">Office Space</option>
                            <option value="Warehouse">Warehouse</option>
                            <option value="Land">Land</option>
                            <option value="Other">Other</option>
                        </select>
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <label for="assetClassList">Asset Class *</label>
                        <select id="assetClassList" name="asset-class" required>
                            <option value="">Select asset class</option>
                            <option value="Residential">Residential</option>
                            <option value="Commercial">Commercial</option>
                            <option value="Land">Land</option>
                            <option value="Mixed-Use">Mixed-Use</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="propertyPrice">Expected Price/Rent (Include Currency) *</label>
                        <input type="text" id="propertyPrice" name="property-price" placeholder="Enter amount" required>
                    </div>
                </div>

                <div class="form-group">
                    <label for="propertyAddress">Property Address *</label>
                    <input type="text" id="propertyAddress" name="property-address" placeholder="Enter full property address" required>
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <label for="propertyCity">City *</label>
                        <input type="text" id="propertyCity" name="property-city" placeholder="Enter city" required>
                    </div>
                    <div class="form-group">
                        <label for="propertyState">State *</label>
                        <input type="text" id="propertyState" name="property-state" placeholder="Enter state" required>
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <label for="bedrooms">Number of Bedrooms</label>
                        <input type="number" id="bedrooms" name="bedrooms" min="0" placeholder="Enter number">
                    </div>
                    <div class="form-group">
                        <label for="bathrooms">Number of Bathrooms</label>
                        <input type="number" id="bathrooms" name="bathrooms" min="0" placeholder="Enter number">
                    </div>
                </div>

                <div class="form-group">
                    <label for="propertySize">Property Size (sqm)</label>
                    <input type="text" id="propertySize" name="property-size" placeholder="Enter property size">
                </div>

                <div class="form-group">
                    <label for="propertyDescription">Property Description *</label>
                    <textarea id="propertyDescription" name="property-description" rows="4" placeholder="Describe your property, its features, and any special amenities..." required></textarea>
                </div>

                <div class="form-group">
                    <label for="additionalInfo">Additional Information</label>
                    <textarea id="additionalInfo" name="additional-info" rows="3" placeholder="Any other details you'd like to share..."></textarea>
                </div>

                <div class="modal-actions">
                    <button type="submit" class="btn btn-primary btn-lg">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
                            <polyline points="22 4 12 14.01 9 11.01"></polyline>
                        </svg>
                        Submit Listing
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Booking Agent Registration Modal -->
<div id="bookingAgentModal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h2>Become a Booking Agent</h2>
            <button class="modal-close" onclick="closeBookingAgentModal()">&times;</button>
        </div>

        <form action='/success' class='reservation-form' id='bookingAgentForm' method='POST' name='booking-agent'>

            <input type="hidden" name="form-name" value="booking-agent">
            <input type="hidden" name="bot-field">

            <div class="form-row">
                <div class="form-group">
                    <label for="agentName">Full Name *</label>
                    <input type="text" id="agentName" name="agent-name"
                           placeholder="Enter your full name" required>
                </div>
                <div class="form-group">
                    <label for="agentEmail">Email Address *</label>
                    <input type="email" id="agentEmail" name="agent-email"
                           placeholder="you@email.com" required>
                </div>
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label for="agentPhone">Phone Number *</label>
                    <div style="display:flex; gap:8px;">
                        <input type="tel" id="agentPhone" name="agent-phone"
                               placeholder="0800 000 0000" style="flex:1;" required>
                    </div>
                </div>
                <div class="form-group">
    <label for="agentState">State *</label>
    <select id="agentState" name="agent-state" required>
        <option value="">Select your state</option>

        <option value="Abia">Abia</option>
        <option value="FCT Abuja">Abuja</option>
        <option value="Adamawa">Adamawa</option>
        <option value="Akwa Ibom">Akwa Ibom</option>
        <option value="Anambra">Anambra</option>
        <option value="Bauchi">Bauchi</option>
        <option value="Bayelsa">Bayelsa</option>
        <option value="Benue">Benue</option>
        <option value="Borno">Borno</option>
        <option value="Cross River">Cross River</option>
        <option value="Delta">Delta</option>
        <option value="Ebonyi">Ebonyi</option>
        <option value="Edo">Edo</option>
        <option value="Ekiti">Ekiti</option>
        <option value="Enugu">Enugu</option>
        <option value="Gombe">Gombe</option>
        <option value="Imo">Imo</option>
        <option value="Jigawa">Jigawa</option>
        <option value="Kaduna">Kaduna</option>
        <option value="Kano">Kano</option>
        <option value="Katsina">Katsina</option>
        <option value="Kebbi">Kebbi</option>
        <option value="Kogi">Kogi</option>
        <option value="Kwara">Kwara</option>
        <option value="Lagos">Lagos</option>
        <option value="Nasarawa">Nasarawa</option>
        <option value="Niger">Niger</option>
        <option value="Ogun">Ogun</option>
        <option value="Ondo">Ondo</option>
        <option value="Osun">Osun</option>
        <option value="Oyo">Oyo</option>
        <option value="Plateau">Plateau</option>
        <option value="Rivers">Rivers</option>
        <option value="Sokoto">Sokoto</option>
        <option value="Taraba">Taraba</option>
        <option value="Yobe">Yobe</option>
        <option value="Zamfara">Zamfara</option>
    </select>
</div>
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label for="agentCity">City/Area/LGA *</label>
                    <input type="text" id="agentCity" name="agent-city"
                           placeholder="e.g. Lekki, Lagos" required>
                </div>
                <div class="form-group">
                    <label for="agentType">Registration Type *</label>
                    <select id="agentType" name="agent-type" required>
                        <option value="">Select option</option>
                        <option value="Individual">Individual Agent</option>
                        <option value="Agency">Agency/Company</option>
                    </select>
                </div>
            </div>

            <div class="form-group">
                <label for="agentBrand">Brand/Agency Name (Optional)</label>
                <input type="text" id="agentBrand" name="agent-brand"
                       placeholder="Your brand or agency name">
            </div>

            <div class="form-group">
                <label for="agentExperience">Tell us briefly about your experience *</label>
                <textarea id="agentExperience" name="agent-experience" rows="4"
                          placeholder="How long have you been booking stays, what locations do you focus on, etc."
                          required></textarea>
            </div>

            <div class="form-group">
                <label for="agentNotes">Anything else we should know? (Optional)</label>
                <textarea id="agentNotes" name="agent-notes" rows="3"
                          placeholder="Share any links, preferred areas, or special requests..."></textarea>
            </div>

            <div class="modal-actions">
                <button type="submit" class="btn btn-primary btn-lg">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
                         viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
                        <polyline points="22 4 12 14.01 9 11.01"></polyline>
                    </svg>
                    Submit Agent Application
                </button>
            </div>
        </form>
    </div>
</div>

    <script>
        // Populate country dropdown for list property modal
        document.addEventListener('DOMContentLoaded', function() {
            const countrySelects = [document.getElementById('guestCountry'), document.getElementById('ownerCountry')];
            countrySelects.forEach(countrySelect => {
                if (countrySelect && window.countries) {
                    window.countries.forEach(country => {
                        if (country !== 'Nigeria') {
                            const option = document.createElement('option');
                            option.value = country;
                            option.textContent = country;
                            countrySelect.appendChild(option);
                        }
                    });
                }
            });
        });
    </script>

    <!-- Why Choose Us Section -->
    <section class="why-us-section" id="why-us">
        <div class="container">
            <div class="section-header">
                <span class="section-tag">Why Choose Us</span>
                <h2>Your Comfort is <span class="highlight">Our Priority</span></h2>
                <p>Experience the Empirean Heights standard in every service and transaction.</p>
            </div>
            <div class="why-us-image">
                    <img src="why-us-section-image.jpg" alt="Shortlet Key - Your Perfect Stay Awaits" loading="lazy">
        </div>
            </div>
        </div>
    </section>

    <!-- Contact Section -->
    <section class="contact-section" id="contact">
        <div class="container">
            <div class="section-header">
                <span class="section-tag">Get In Touch</span>
                <h2>Your Perfect Stay <span class="highlight">Starts Here</span></h2>
                <p>We make booking and hosting a simple and seamless experience.</p>
            </div>
            <div class="contact-grid">
                <div class="contact-info">
                    <h3>Contact Information</h3>
                    <p>Have questions? We're here to help. Reach out to us through any of the following channels:</p>
                    <div class="contact-details">
                        <div class="contact-item">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
                                <circle cx="12" cy="10" r="3"></circle>
                            </svg>
                            <div>
                                <h4>Office Address</h4>
                                <p>NO. 10 Osongama Estate Road, Uyo</p>
                                <p>Akwa Ibom State, Nigeria</p>
                            </div>
                        </div>
                        <div class="contact-item">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
                            </svg>
                            <div>
                                <h4>Phone Number</h4>
                                <p>+234 802 142 9974</p>
                            </div>
                        </div>
                        <div class="contact-item">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
                                <polyline points="22,6 12,13 2,6"></polyline>
                            </svg>
                            <div>
                                <h4>Email Address</h4>
                                <p>shortlet@empireanheights.com</p>
                                <p>support@empireanheights.com</p>
                            </div>
                        </div>
                    </div>
                    <div class="social-links">
                        <a href="https://facebook.com/empireanheightsltd" aria-label="Facebook" target="_blank">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path>
                            </svg>
                        </a>
                        <a href="https://instagram.com/shortletkey.ng" aria-label="Instagram" target="_blank">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect>
                                <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
                                <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line>
                            </svg>
                        </a>
                        <a href="https://twitter.com/empireanheights" aria-label="Twitter" target="_blank">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path>
                            </svg>
                        </a>
                        <a href="https://linkedin.com/company/empireanheights" aria-label="LinkedIn" target="_blank">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path>
                                <rect x="2" y="9" width="4" height="12"></rect>
                                <circle cx="4" cy="4" r="2"></circle>
                            </svg>
                        </a>
                        <a href="https://wa.me/2348021429974" aria-label="WhatsApp" target="_blank">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path>
                            </svg>
                        </a>
                    </div>
                </div>
                <div class="contact-form">
                    <!-- NETLIFY FORM with email notification to info.empirean@gmail.com -->
                    <form action='/success' method='POST' name='contact'>
                        <!-- Honeypot field for spam prevention -->
                        <input type="hidden" name="form-name" value="contact">
                        <input type="hidden" name="bot-field">
                        
                        <div class="form-row">
                            <div class="form-group">
                                <label for="name">Full Name *</label>
                                <input type="text" id="name" name="name" required placeholder="Enter your name">
                            </div>
                            <div class="form-group">
                                <label for="email">Email Address *</label>
                                <input type="email" id="email" name="email" required placeholder="your@email.com">
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label for="phone">Phone Number *</label>
                                <div style="display: flex; gap: 8px;">
                                    <select id="contactCountryCode" name="country-code" style="width: 120px;" required>
                                        <option value="+234">ðŸ‡³ðŸ‡¬ +234</option>
                                        <option value="+1">ðŸ‡ºðŸ‡¸ +1</option>
                                        <option value="+44">ðŸ‡¬ðŸ‡§ +44</option>
                                        <option value="+971">ðŸ‡¦ðŸ‡ª +971</option>
                                        <option value="+91">ðŸ‡®ðŸ‡³ +91</option>
                                        <option value="+86">ðŸ‡¨ðŸ‡³ +86</option>
                                        <option value="+233">ðŸ‡¬ðŸ‡­ +233</option>
                                        <option value="+254">ðŸ‡°ðŸ‡ª +254</option>
                                        <option value="+27">ðŸ‡¿ðŸ‡¦ +27</option>
                                    </select>
                                    <input type="tel" id="phone" name="phone" required placeholder="800 000 0000" style="flex: 1;">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="contactCountry">Country of Residence</label>
                                <select id="contactCountry" name="country">
                                    <option value="">Select your country</option>
                                    <option value="Nigeria">Nigeria</option>
                                    <option value="">---</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label for="interest">I'm Interested In *</label>
                                <select id="interest" name="interest" required onchange="toggleAssetClass()">
                                    <option value="">Select an option</option>
                                    <option value="buying">Buying Property</option>
                                    <option value="selling">Selling Property</option>
                                    <option value="investment">Investment Opportunities</option>
                                    <option value="management">Property Management</option>
                                    <option value="shortstay">Short Stay</option>
                                    <option value="other">Other</option>
                                </select>
                            </div>
                            <div class="form-group" id="assetClassGroup" style="display: none;">
                                <label for="assetClass">Asset Class</label>
                                <select id="assetClass" name="asset-class">
                                    <option value="">Select asset class</option>
                                    <option value="Residential">Residential</option>
                                    <option value="Commercial">Commercial</option>
                                    <option value="Land">Land</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="message">Message *</label>
                            <textarea id="message" name="message" rows="5" required placeholder="Tell us about your inquiry..."></textarea>
                        </div>
                        <button type="submit" class="btn btn-primary">Send Message</button>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <script>
        // Populate country dropdown for contact form
        document.addEventListener('DOMContentLoaded', function() {
            const contactCountrySelect = document.getElementById('contactCountry');
            if (contactCountrySelect && window.countries) {
                window.countries.forEach(country => {
                    if (country !== 'Nigeria') {
                        const option = document.createElement('option');
                        option.value = country;
                        option.textContent = country;
                        contactCountrySelect.appendChild(option);
                    }
                });
            }
        });

        // Toggle asset class field visibility
        function toggleAssetClass() {
            const interestSelect = document.getElementById('interest');
            const assetClassGroup = document.getElementById('assetClassGroup');
            
            if (interestSelect.value && interestSelect.value !== 'other' && interestSelect.value !== '') {
                assetClassGroup.style.display = 'block';
            } else {
                assetClassGroup.style.display = 'none';
            }
        }
    </script>

    <!-- Contact Modal -->
    <div id="contactModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2>Get In Touch</h2>
                <button class="modal-close" onclick="closeContactModal()" aria-label="Close modal">&times;</button>
            </div>
            <div class="modal-body">
                <form action='/success' method='POST' name='contact-modal'>
                    <input type="hidden" name="form-name" value="contact-modal">
                    <input type="hidden" name="bot-field">
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label for="contactName">Full Name *</label>
                            <input type="text" id="contactName" name="name" required placeholder="Enter your name">
                        </div>
                        <div class="form-group">
                            <label for="contactEmail">Email Address *</label>
                            <input type="email" id="contactEmail" name="email" required placeholder="your@email.com">
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            <label for="contactPhone">Phone Number *</label>
                            <div style="display: flex; gap: 8px;">
                                <select id="contactPhoneCode" name="country-code" style="width: 120px;" required>
                                    <option value="+234">ðŸ‡³ðŸ‡¬ +234</option>
                                    <option value="+1">ðŸ‡ºðŸ‡¸ +1</option>
                                    <option value="+44">ðŸ‡¬ðŸ‡§ +44</option>
                                    <option value="+971">ðŸ‡¦ðŸ‡ª +971</option>
                                    <option value="+91">ðŸ‡®ðŸ‡³ +91</option>
                                    <option value="+86">ðŸ‡¨ðŸ‡³ +86</option>
                                    <option value="+233">ðŸ‡¬ðŸ‡­ +233</option>
                                    <option value="+254">ðŸ‡°ðŸ‡ª +254</option>
                                    <option value="+27">ðŸ‡¿ðŸ‡¦ +27</option>
                                </select>
                                <input type="tel" id="contactPhone" name="phone" required placeholder="800 000 0000" style="flex: 1;">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="contactModalCountry">Country of Residence</label>
                            <select id="contactModalCountry" name="country">
                                <option value="">Select your country</option>
                                <option value="Nigeria">Nigeria</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            <label for="contactInterest">I'm Interested In *</label>
                            <select id="contactInterest" name="interest" required onchange="toggleModalAssetClass()">
                                <option value="">Select an option</option>
                                <option value="buying">Buying Property</option>
                                <option value="selling">Selling Property</option>
                                <option value="investment">Investment Opportunities</option>
                                <option value="management">Property Management</option>
                                <option value="shortstay">Short Stay</option>
                                <option value="other">Other</option>
                            </select>
                        </div>
                        <div class="form-group" id="modalAssetClassGroup" style="display: none;">
                            <label for="contactAssetClass">Asset Class</label>
                            <select id="contactAssetClass" name="asset-class">
                                <option value="">Select asset class</option>
                                <option value="Residential">Residential</option>
                                <option value="Commercial">Commercial</option>
                                <option value="Land">Land</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="contactMessage">Message *</label>
                        <textarea id="contactMessage" name="message" rows="5" required placeholder="Tell us about your requirements..."></textarea>
                    </div>
                    <button type="submit" class="btn btn-primary btn-lg" style="width: 100%;">Send Message</button>
                </form>
            </div>
        </div>
    </div>

    <script>
        // Populate countries in contact modal
        document.addEventListener('DOMContentLoaded', function() {
            const modalCountrySelect = document.getElementById('contactModalCountry');
            if (modalCountrySelect && window.countries) {
                window.countries.forEach(country => {
                    if (country !== 'Nigeria') {
                        const option = document.createElement('option');
                        option.value = country;
                        option.textContent = country;
                        modalCountrySelect.appendChild(option);
                    }
                });
            }
        });

        // Toggle asset class in modal
        function toggleModalAssetClass() {
            const interestSelect = document.getElementById('contactInterest');
            const assetClassGroup = document.getElementById('modalAssetClassGroup');
            
            if (interestSelect && assetClassGroup) {
                if (interestSelect.value && 
                    interestSelect.value !== 'other' && 
                    interestSelect.value !== 'shortstay' && 
                    interestSelect.value !== '') {
                    assetClassGroup.style.display = 'block';
                } else {
                    assetClassGroup.style.display = 'none';
                }
            }
        }
    </script>

    <!-- Footer -->
    <footer class="footer">
        <div class="container">
            <div class="footer-grid">
                <div class="footer-column footer-brand">
                    <div class="footer-logo-container">
    <a href="#home">
        <img src="shortlet_blue_logo.png" alt="Shortlet Keys - Your Perfect Stay Awaits" class="footer-logo-image">
    </a>
</div>
                    <p class="footer-description">Nigeria's premier property management and short stay rental company. Providing premium shortlet accommodations with comfort, convenience, and exceptional service.</p>
                    <p class="footer-registration"><strong>Empirean Heights Ltd. is fully registered with CAC, FIRS, and SCUML and compliant with all regulatory standards in Nigeria.</strong></p>
                </div>
                <div class="footer-column">
                    <h4>Quick Links</h4>
                    <ul>
                        <li><a href="#home">Home</a></li>
                        <li><a href="#properties">Properties</a></li>
                        <li><a href="#contact">Contact</a></li>
                    </ul>
                </div>
                <div class="footer-column">
                    <h4>Services</h4>
                    <ul>
                        <li><a href="#services">Property Management</a></li>
                        <li><a href="#services">Short Stay Rentals</a></li>
                        <li><a href="#services">Facility Management</a></li>
                    </ul>
                </div>
                <div class="footer-column">
                    <h4>Newsletter</h4>
                    <p>Subscribe to get the latest property listings and market insights.</p>
                    <form class='newsletter-form' method='POST' name='newsletter'>
                        <input type="hidden" name="form-name" value="newsletter">
                        <input type="hidden" name="bot-field">
                        <input type="email" name="newsletter-email" placeholder="Your email address" required>
                        <button type="submit">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <line x1="22" y1="2" x2="11" y2="13"></line>
                                <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
                            </svg>
                        </button>
                    </form>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2025 Empirean Heights Ltd. All rights reserved.</p>
                <div class="footer-links">
                    <a href="#" onclick="openTermsModal(event)">Terms of Service and Policies</a>
                </div>
            </div>
        </div>
    </footer>

    <!-- Terms of Service, Cancellation, Privacy & Cookies Modal -->
<div id="termsModal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h2>Terms of Service and Policies</h2>
            <button class="modal-close" onclick="closeTermsModal()">&times;</button>
        </div>

        <div class="modal-body" style="max-height: 70vh; overflow-y: auto;">

            <!-- CANCELLATION POLICY -->
            <h3>Cancellation & Refund Policy</h3>

            <p><strong>1. Security Deposits</strong><br>
            Empirean Heights guarantees the full refund of the security deposit on all cancellations, provided there are no reported damages, policy breaches, or outstanding balances.</p>

            <p><strong>2. Base Stay Payments</strong><br>
            Nightly, weekly, or monthly stay fees are held on behalf of the property owner or manager and are subject to that party's individual cancellation policy. These amounts are not guaranteed by Empirean Heights.</p>

            <p><strong>3. Early vs. Late Cancellations</strong><br>
            Many owners approve partial or full refunds when cancellations occur well in advance of the check-in date. Closer to check-in, refunds are less likely and fully at owner discretion.</p>

            <p><strong>4. Our Role</strong><br>
            Where applicable, Empirean Heights will assist in communication between guests and property owners to help support a smooth and transparent resolution. However, we cannot guarantee refunds beyond the security deposit.</p>

            <p style="margin-top:1rem; font-size:0.9rem; opacity:0.8;">
                By booking through Empirean Heights, you agree that our direct refund obligation is limited to the security deposit.
            </p>

            <hr style="margin:25px 0; opacity:0.3;">

            <!-- PRIVACY POLICY -->
            <h3>Privacy Policy</h3>

            <p>Empirean Heights collects only the information required to process reservations, manage property listings, and provide customer support. This may include your name, contact details, booking information, and submitted property details.</p>

            <p>We do not sell personal data. Information may be shared only with property owners or service providers strictly as needed to complete your booking or listing. Basic usage data (such as device type, pages visited, or general analytics) may be collected to improve platform performance.</p>

            <p>By using our platform, you consent to the processing of your information as described here.</p>

            <hr style="margin:25px 0; opacity:0.3;">

            <!-- COOKIE POLICY -->
            <h3>Cookie Policy</h3>

            <p>Empirean Heights uses essential cookies to ensure the website functions properly and to improve user experience. These cookies may support features such as booking forms, theme preferences, and basic analytics.</p>

            <p>You may disable cookies in your browser settings, but doing so may affect the performance or usability of certain features on the site.</p>

            <p style="margin-top:1rem; font-size:0.9rem; opacity:0.8;">
                By continuing to use this site, you agree to our limited use of cookies as described above.
            </p>

        </div>
    </div>
</div>

    <!-- ================================================ -->
    <!-- AGENT PORTAL: Login Modal                         -->
    <!-- ================================================ -->
    <div id="agentLoginModal" class="modal">
        <div class="modal-content" style="max-width:460px;">
            <div class="modal-header">
                <h2>Agent Portal Login</h2>
                <button class="modal-close" onclick="closeAgentLoginModal()">&times;</button>
            </div>
            <div class="modal-body" id="agentLoginBody">
                <!-- Rendered dynamically by agent-platform JS -->
            </div>
        </div>
    </div>

    <!-- ================================================ -->
    <!-- AGENT PORTAL: Reserve for Client Modal            -->
    <!-- ================================================ -->
    <div id="reserveClientModal" class="modal">
        <div class="modal-content" style="max-width:660px;">
            <div class="modal-header">
                <h2>Reserve for Client</h2>
                <button class="modal-close" onclick="closeReserveClientModal()">&times;</button>
            </div>
            <div class="modal-body">
                <div class="rc-property-info" style="background:var(--card-bg,#f8f9fa);padding:0.85rem 1rem;border-radius:8px;margin-bottom:1.25rem;border-left:4px solid var(--primary,#1a5490);">
                    <p id="rcPropertyName" style="font-weight:700;font-size:1.05rem;margin:0 0 0.2rem;"></p>
                    <p id="rcPropertyLocation" style="color:var(--text-muted,#666);font-size:0.88rem;margin:0 0 0.3rem;"></p>
                    <p style="margin:0;">Price/Night: <strong id="rcPricePerNight"></strong></p>
                </div>

                <form id="reserveClientForm">
                    <div class="form-row">
                        <div class="form-group">
                            <label for="rcGuestName">Guest Name *</label>
                            <input type="text" id="rcGuestName" placeholder="Full name" required>
                        </div>
                        <div class="form-group">
                            <label for="rcGuestEmail">Guest Email *</label>
                            <input type="email" id="rcGuestEmail" placeholder="guest@email.com" required>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            <label for="rcGuestPhone">Guest Phone *</label>
                            <input type="tel" id="rcGuestPhone" placeholder="+234 800 000 0000" required>
                        </div>
                        <div class="form-group">
                            <label for="rcGuestCount">Number of Guests</label>
                            <input type="number" id="rcGuestCount" min="1" max="20" value="1">
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            <label for="agentCheckIn">Check-in Date *</label>
                            <input type="date" id="agentCheckIn" required onchange="onAgentDateChange()">
                        </div>
                        <div class="form-group">
                            <label for="agentCheckOut">Check-out Date *</label>
                            <input type="date" id="agentCheckOut" required onchange="onAgentDateChange()">
                        </div>
                    </div>

                    <div id="dateAvailabilityStatus" style="margin:0.25rem 0 0.75rem;font-size:0.9rem;min-height:1.4rem;"></div>

                    <div class="booking-summary">
                        <div class="summary-row">
                            <span>Price per Night:</span>
                            <span id="agentRateDisplay">&#8358;0</span>
                        </div>
                        <div class="summary-row">
                            <span>Number of Nights:</span>
                            <span id="agentNightsCount">0</span>
                        </div>
                        <div class="summary-row">
                            <span>Subtotal:</span>
                            <span id="agentSubtotal">&#8358;0</span>
                        </div>
                        <div class="summary-row">
                            <span>Commission (2%):</span>
                            <span id="agentCommission">&#8358;0</span>
                        </div>
                        <div class="summary-row total">
                            <span>Agent Pays:</span>
                            <span id="agentTotalPay">&#8358;0</span>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="rcSpecialRequests">Special Requests (Optional)</label>
                        <textarea id="rcSpecialRequests" rows="3" placeholder="Any special requirements or preferences..."></textarea>
                    </div>
                </form>

                <div class="modal-actions" style="display:flex;gap:0.75rem;flex-wrap:wrap;margin-top:1rem;">
                    <button class="btn btn-secondary-alt btn-lg" onclick="submitReserveWithoutPayment()" style="flex:1;min-width:200px;">
                        Reserve Without Payment
                    </button>
                    <button class="btn btn-primary btn-lg" onclick="submitReserveAndPay()" style="flex:1;min-width:200px;">
                        Reserve &amp; Pay Now
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- ================================================ -->
    <!-- AGENT PORTAL: Request Tour Modal                  -->
    <!-- ================================================ -->
    <div id="tourRequestModal" class="modal">
        <div class="modal-content" style="max-width:640px;">
            <div class="modal-header">
                <h2>Request Property Tour</h2>
                <button class="modal-close" onclick="closeTourRequestModal()">&times;</button>
            </div>
            <div class="modal-body">
                <div class="rc-property-info" style="background:var(--card-bg,#f8f9fa);padding:0.85rem 1rem;border-radius:8px;margin-bottom:1rem;border-left:4px solid var(--primary,#1a5490);">
                    <p id="trPropertyName" style="font-weight:700;font-size:1.05rem;margin:0 0 0.2rem;"></p>
                    <p id="trPropertyLocation" style="color:var(--text-muted,#666);font-size:0.88rem;margin:0 0 0.2rem;"></p>
                    <p style="margin:0;font-size:0.88rem;">Owner: <span id="trOwnerName" style="font-weight:600;"></span></p>
                </div>

                <div class="tr-info-note" style="background:var(--info-bg,#e8f4fd);border-left:3px solid #3b82f6;padding:0.75rem 1rem;border-radius:0 6px 6px 0;margin-bottom:1.25rem;font-size:0.9rem;color:var(--text,#333);">
                    Tours are coordinated by Empirean Heights. The owner/agent will confirm availability within 24 hours.
                </div>

                <form id="tourRequestForm">
                    <div class="form-row">
                        <div class="form-group">
                            <label for="trGuestName">Guest Name *</label>
                            <input type="text" id="trGuestName" placeholder="Full name" required>
                        </div>
                        <div class="form-group">
                            <label for="trGuestEmail">Guest Email *</label>
                            <input type="email" id="trGuestEmail" placeholder="guest@email.com" required>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            <label for="trGuestPhone">Guest Phone *</label>
                            <input type="tel" id="trGuestPhone" placeholder="+234 800 000 0000" required>
                        </div>
                        <div class="form-group">
                            <label for="trGuestCount">Number of Guests</label>
                            <input type="number" id="trGuestCount" min="1" max="20" value="1">
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            <label for="trPreferredDate">Preferred Date * (min. 3 days)</label>
                            <input type="date" id="trPreferredDate" required>
                        </div>
                        <div class="form-group">
                            <label for="trPreferredTime">Preferred Time * (9am – 5pm)</label>
                            <input type="time" id="trPreferredTime" min="09:00" max="17:00" step="1800" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="trGuestRequirements">Guest Requirements (Optional)</label>
                        <textarea id="trGuestRequirements" rows="3" placeholder="e.g. needs wheelchair access, specific floor preference..."></textarea>
                    </div>
                </form>

                <div class="modal-actions">
                    <button class="btn btn-primary btn-lg" onclick="submitTourRequest()">Request Tour</button>
                </div>
            </div>
        </div>
    </div>

    <!-- ================================================ -->
    <!-- GUEST VIEW: Booking Request Modal                  -->
    <!-- ================================================ -->
    <div id="guestBookingModal" class="modal">
        <div class="modal-content" style="max-width:560px;">
            <div class="modal-header">
                <h2>Request Booking</h2>
                <button class="modal-close" onclick="closeGuestBookingModal()">&times;</button>
            </div>
            <div class="modal-body">
                <p style="margin-bottom:1rem;">Property: <strong id="gbPropertyName"></strong></p>
                <input type="hidden" id="gbPropertyId">
                <input type="hidden" id="gbAgentId">

                <div class="form-row">
                    <div class="form-group">
                        <label for="gbGuestName">Your Name *</label>
                        <input type="text" id="gbGuestName" placeholder="Full name" required>
                    </div>
                    <div class="form-group">
                        <label for="gbGuestEmail">Email Address *</label>
                        <input type="email" id="gbGuestEmail" placeholder="your@email.com" required>
                    </div>
                </div>
                <div class="form-group">
                    <label for="gbGuestPhone">Phone Number *</label>
                    <input type="tel" id="gbGuestPhone" placeholder="+234 800 000 0000" required>
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label for="gbCheckIn">Preferred Check-in *</label>
                        <input type="date" id="gbCheckIn" required>
                    </div>
                    <div class="form-group">
                        <label for="gbCheckOut">Preferred Check-out *</label>
                        <input type="date" id="gbCheckOut" required>
                    </div>
                </div>
                <div class="form-group">
                    <label for="gbSpecialRequests">Special Requests (Optional)</label>
                    <textarea id="gbSpecialRequests" rows="3" placeholder="Any special requirements..."></textarea>
                </div>

                <div class="modal-actions">
                    <button class="btn btn-primary btn-lg" style="width:100%;" onclick="submitGuestBookingRequest()">Send Booking Request to Agent</button>
                </div>
            </div>
        </div>
    </div>

    <script src="script.js"></script>

    <!-- Back to Top Button -->
<button id="backToTopBtn" aria-label="Back to top">
  ↑
</button>

    <!-- Agent Resale Listing Modal -->
    <div id="agentListingModal" class="modal">
      <div class="modal-content">
        <div class="modal-header">
          <h2>List Unit for Resale</h2>
          <button class="modal-close" onclick="closeAgentListingModal()">&times;</button>
        </div>
        <form action='/success' class='reservation-form' id='agentListingForm' method='POST' name='agent-listing'>
          <input type="hidden" name="form-name" value="agent-listing">
          <input type="hidden" name="bot-field">
          <input type="hidden" name="agent-code" id="agentCodeInput" value="">

          <div class="form-group">
            <label for="agentPropertySelect">Property to List for Resale *</label>
            <select id="agentPropertySelect" name="property-id" required>
              <option value="">Select a property...</option>
            </select>
            <small style="color: #666; display: block; margin-top: 4px;">You can only list properties from owners, not from other agents</small>
          </div>

          <div class="form-row">
            <div class="form-group">
              <label for="originalPropertyPrice">Original Property Price</label>
              <input type="text" id="originalPropertyPrice" name="original-price" placeholder="Read-only - auto-filled" readonly style="background: #f5f5f5; cursor: not-allowed;">
            </div>
            <div class="form-group">
              <label for="resalePrice">Your Resale Price *</label>
              <input type="text" id="resalePrice" name="resale-price" placeholder="e.g., NGN 120000" required>
            </div>
          </div>

          <div class="form-row">
            <div class="form-group">
              <label for="markupAmount">Your Markup (Auto-calculated)</label>
              <input type="text" id="markupAmount" name="markup-amount" placeholder="Auto-calculated" readonly style="background: #f5f5f5; cursor: not-allowed;">
              <small style="color: #666; display: block; margin-top: 4px;">Markup = Your Price - Original Price</small>
            </div>
          </div>

          <div class="form-group">
            <label for="markupNotes">Markup Justification (Optional)</label>
            <textarea id="markupNotes" name="markup-notes" rows="3" placeholder="Why this markup? (E.g., Added amenities, high-demand location, premium service, etc.)"></textarea>
            <small style="color: #666; display: block; margin-top: 4px;">Visible to other agents only - helps explain your pricing</small>
          </div>

          <div style="background: #f0f8ff; border: 1px solid #1a5490; border-radius: 4px; padding: 12px; margin: 16px 0;">
            <strong style="color: #1a5490;">📋 Review before submitting:</strong>
            <ul style="margin: 8px 0 0 20px; font-size: 14px; color: #333;">
              <li>Property name is correct</li>
              <li>Resale price is competitive</li>
              <li>Markup reflects real value-add</li>
            </ul>
          </div>

          <div class="modal-actions">
            <button type="submit" class="btn btn-primary btn-lg">
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
                <polyline points="22 4 12 14.01 9 11.01"></polyline>
              </svg>
              List Unit for Resale
            </button>
            <button type="button" class="btn btn-secondary btn-lg" onclick="closeAgentListingModal()" style="margin-left: 8px;">Cancel</button>
          </div>
        </form>
      </div>
    </div>

    <script>
      // Close modal with Escape key
      document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') closeAgentListingModal();
      });

      // Close modal when clicking outside
      document.addEventListener('click', function(event) {
        const modal = document.getElementById('agentListingModal');
        if (event.target === modal) closeAgentListingModal();
      });
    </script>


<script async id="netlify-rum-container" src="/.netlify/scripts/rum" data-netlify-rum-site-id="ed777608-b264-4f74-8217-898f9baad9a6" data-netlify-deploy-branch="main" data-netlify-deploy-context="production" data-netlify-cwv-token="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzaXRlX2lkIjoiZWQ3Nzc2MDgtYjI2NC00Zjc0LTgyMTctODk4ZjliYWFkOWE2IiwiYWNjb3VudF9pZCI6IjY4ZmVkMzIwM2NiMDIxYjVmZDIzNzQ0OSIsImRlcGxveV9pZCI6IjZhMTI0YWRmYTczZjM2MDAwOGU3NWNlOCIsImlzc3VlciI6Im5mc2VydmVyIn0.VeRlEwmNQS-6mah3tcG3Y5dAxFbVhY7G56APlYxat3w"></script></body>
</html>