{% extends 'rental_app/base_rental.html' %}
{% load static %}

{% block title %}Sri Lanka Rentals | Verified Homes for Expats, Digital Nomads & Long Stays{% endblock %}

{% block content %}

<!-- HERO SECTION -->
<section class="rental-hero-section py-5 py-lg-6 position-relative overflow-hidden bg-light">
    <div class="container">
        <div class="row align-items-center g-5">
            <div class="col-lg-7">
                <span class="hero-mini-title text-uppercase fw-semibold text-primary">
                    Sri Lanka Rental Living
                </span>

                <h1 class="display-4 fw-bold mt-3 mb-3">
                    Premium Rental Homes in Sri Lanka for Foreigners, Digital Nomads & Long-Stay Visitors
                </h1>

                <p class="lead text-muted mb-4">
                    Explore verified apartments, annexes, villas, guesthouses, and private homes
                    suited for comfortable living in Sri Lanka. Whether you are relocating, working remotely,
                    or planning retirement, we help you discover rental options with greater trust and clarity.
                </p>

                <div class="d-flex flex-wrap gap-3 mb-4">
                    <a href="{% url 'rental_app:public_rental_list' %}" class="btn btn-primary btn-lg px-4">
                        Explore Rentals
                    </a>
                    {% if is_foreigner_user %}
                        <a href="{% url 'expat_life:foreigner_dashboard' %}" class="btn btn-outline-dark btn-lg px-4">
                            My Dashboard
                        </a>
                    {% else %}
                        <a href="{% url 'expat_life:foreigner_signup' %}" class="btn btn-outline-dark btn-lg px-4">
                            Free Foreigner Signup
                        </a>
                    {% endif %}
                </div>

                <div class="row g-3 mt-2">
                    <div class="col-sm-4">
                        <div class="hero-stat-box bg-white shadow-sm rounded-4 p-3 h-100">
                            <div class="fw-bold fs-4 text-primary">Verified</div>
                            <div class="text-muted small">Property owners and listings reviewed for quality and trust</div>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="hero-stat-box bg-white shadow-sm rounded-4 p-3 h-100">
                            <div class="fw-bold fs-4 text-primary">Foreigner-Friendly</div>
                            <div class="text-muted small">Suitable options for expats, retirees, and digital nomads</div>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="hero-stat-box bg-white shadow-sm rounded-4 p-3 h-100">
                            <div class="fw-bold fs-4 text-primary">Guided</div>
                            <div class="text-muted small">A smoother process with local support and rental guidance</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-5">
                <div class="hero-side-card bg-white shadow-lg rounded-4 overflow-hidden">
                    <img src="{% static 'expat_life/images/rentals_hero.webp' %}"
                         alt="Sri Lanka rental lifestyle"
                         class="img-fluid w-100"
                         style="height: 320px; object-fit: cover;">

                    <div class="p-4">
                        <h4 class="fw-bold mb-3">Why foreigners love this rental path</h4>

                        <div class="d-flex mb-3">
                            <div class="me-3 text-primary fs-4">•</div>
                            <div>
                                <strong>Quality property options</strong><br>
                                <span class="text-muted">From simple apartments to premium villas and peaceful long-stay homes.</span>
                            </div>
                        </div>

                        <div class="d-flex mb-3">
                            <div class="me-3 text-primary fs-4">•</div>
                            <div>
                                <strong>Better peace of mind</strong><br>
                                <span class="text-muted">We focus on safer, more transparent listings for international visitors.</span>
                            </div>
                        </div>

                        <div class="d-flex">
                            <div class="me-3 text-primary fs-4">•</div>
                            <div>
                                <strong>Ideal for relocation planning</strong><br>
                                <span class="text-muted">Useful whether you are arriving for work, lifestyle, business, or retirement.</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- TRUST STRIP -->
<section class="py-4 bg-white border-top border-bottom">
    <div class="container">
        <div class="row text-center g-4">
            <div class="col-md-3">
                <div class="fw-semibold">Verified Listings</div>
            </div>
            <div class="col-md-3">
                <div class="fw-semibold">Flexible Rental Types</div>
            </div>
            <div class="col-md-3">
                <div class="fw-semibold">Foreigner-Oriented Support</div>
            </div>
            <div class="col-md-3">
                <div class="fw-semibold">Lifestyle & Relocation Friendly</div>
            </div>
        </div>
    </div>
</section>

<!-- FEATURED PROPERTIES -->
<section id="featured-properties" class="py-5 py-lg-6">
    <div class="container">
        <div class="d-flex flex-column flex-lg-row justify-content-between align-items-lg-end mb-4">
            <div>
                <span class="text-uppercase text-primary fw-semibold">Featured Collection</span>
                <h2 class="fw-bold mt-2 mb-2">Featured Rental Properties</h2>
                <p class="text-muted mb-0">
                    Handpicked listings suitable for foreigners looking for comfort, convenience, and a better living experience in Sri Lanka.
                </p>
            </div>
            <div class="mt-3 mt-lg-0">
                <a href="{% url 'rental_app:public_rental_list' %}" class="btn btn-outline-primary">View All Rentals</a>
            </div>
        </div>

        <div class="row g-4">
            {% for property in featured_properties %}
                <div class="col-md-6 col-xl-4">
                    <div class="card rental-card border-0 shadow-sm rounded-4 overflow-hidden h-100">
                        <div class="position-relative">
                            {% if property.images.first %}
                                <img src="{{ property.images.first.image.url }}"
                                    class="card-img-top"
                                    alt="{{ property.title }}"
                                    style="height: 260px; object-fit: cover;">
                            {% else %}
                                <img src="{% static 'expat_life/images/default-property.jpg' %}"
                                    class="card-img-top"
                                    alt="{{ property.title }}"
                                    style="height: 260px; object-fit: cover;">
                            {% endif %}

                            <div class="position-absolute top-0 start-0 m-3">
                                <span class="badge bg-white text-dark shadow-sm px-3 py-2 rounded-pill">
                                    {{ property.get_property_type_display|default:"Rental Property" }}
                                </span>
                            </div>
                        </div>

                        <div class="card-body p-4 d-flex flex-column">
                            <div class="mb-2 text-muted small">
                                <i class="bi bi-geo-alt me-1"></i>
                                {{ property.city }}{% if property.area %}, {{ property.area }}{% endif %}
                            </div>

                            <div class="d-flex justify-content-between align-items-center mt-auto">
                                <div>
                                    <div class="fw-bold fs-5 text-primary">${{ property.monthly_rent_usd }}</div>
                                    <div class="small text-muted">per month</div>
                                </div>
                                {% if request.user.is_authenticated and request.user.foreigner_profile %}
                                    <a href="{% url 'rental_app:rental_detail' property.slug %}" class="btn btn-primary px-3">
                                        View Details
                                    </a>
                                {% elif request.user.is_authenticated %}
                                    <a href="{% url 'expat_life:foreigner_signup' %}" class="btn btn-outline-primary px-3">
                                        Sign Up to View More
                                    </a>
                                {% else %}
                                    <a href="{% url 'expat_life:foreigner_signup' %}" class="btn btn-outline-primary px-3">
                                        Sign Up to View More
                                    </a>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
            {% empty %}
                <div class="col-12">
                    <div class="bg-light rounded-4 p-5 text-center shadow-sm">
                        <h5 class="fw-bold mb-2">Featured rentals will appear here soon</h5>
                        <p class="text-muted mb-0">
                            We are preparing quality rental listings for foreigners, digital nomads, and long-stay visitors.
                        </p>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
</section>

<!-- HOW IT WORKS -->
<section class="py-5 bg-light">
    <div class="container">
        <div class="text-center mb-5">
            <span class="text-uppercase text-primary fw-semibold">Simple Process</span>
            <h2 class="fw-bold mt-2">How It Works</h2>
            <p class="text-muted mb-0">
                A more guided way for foreigners to explore rental living in Sri Lanka.
            </p>
        </div>

        <div class="row g-4">
            <div class="col-md-4">
                <div class="bg-white rounded-4 shadow-sm p-4 h-100 text-center">
                    <div class="fs-2 fw-bold text-primary mb-3">1</div>
                    <h5 class="fw-bold">Explore Rentals</h5>
                    <p class="text-muted mb-0">
                        Browse selected apartments, villas, annexes, and other living spaces based on your preferred lifestyle and budget.
                    </p>
                </div>
            </div>

            <div class="col-md-4">
                <div class="bg-white rounded-4 shadow-sm p-4 h-100 text-center">
                    <div class="fs-2 fw-bold text-primary mb-3">2</div>
                    <h5 class="fw-bold">Register as a Foreigner</h5>
                    <p class="text-muted mb-0">
                        Create your free profile to start your guided journey with better access to services and relocation support.
                    </p>
                </div>
            </div>

            <div class="col-md-4">
                <div class="bg-white rounded-4 shadow-sm p-4 h-100 text-center">
                    <div class="fs-2 fw-bold text-primary mb-3">3</div>
                    <h5 class="fw-bold">Move Forward with Confidence</h5>
                    <p class="text-muted mb-0">
                        Continue with a clearer rental process designed to reduce confusion and improve trust for international visitors.
                    </p>
                </div>
            </div>
        </div>
    </div>
</section>


<!-- FINAL CTA -->
<section class="py-5">
    <div class="container">
        <div class="final-rental-cta rounded-4 p-4 p-lg-5 text-white"
             style="background: linear-gradient(135deg, #0d6efd 0%, #0b3d91 100%);">
            <div class="row align-items-center g-4">
                <div class="col-lg-8">
                    <h2 class="fw-bold mb-3">Start Your Sri Lanka Rental Journey with More Confidence</h2>
                    <p class="lead mb-0">
                        Discover living options, create your foreigner profile, and move closer to a smoother relocation or long-stay lifestyle in Sri Lanka.
                    </p>
                </div>
               <div class="col-lg-4 text-lg-end">
                    <div class="d-grid gap-3 d-lg-flex justify-content-lg-end">
                        <a href="{% url 'rental_app:public_rental_list' %}" class="btn btn-warning btn-lg w-100 w-lg-auto">
                            Browse Rentals
                        </a>

                        {% if is_foreigner_user %}
                            <a href="{% url 'expat_life:foreigner_dashboard' %}" class="btn btn-light btn-lg w-100 w-lg-auto">
                                My Dashboard
                            </a>
                        {% else %}
                            <a href="{% url 'expat_life:foreigner_signup' %}" class="btn btn-light btn-lg w-100 w-lg-auto">
                                Free Signup
                            </a>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

{% endblock %}