{% extends 'expat_life/base.html' %}
{% load static %}

{% block title %}Guests in Sri Lanka | Featured Profiles{% endblock %}

{% block content %}

<!-- HERO SECTION -->
<section class="py-5 py-lg-6 bg-light position-relative overflow-hidden">
    <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">
                    Guest Community
                </span>

                <h1 class="display-4 fw-bold mt-3 mb-3">
                    Featured Guest Profiles in Sri Lanka
                </h1>

                <p class="lead text-muted mb-4">
                    Explore selected guest profiles connected with Sri Lanka lifestyle, relocation, long stays,
                    and expat living. Public visitors can view limited featured profiles, while approved dating partners
                    may access a wider set based on permission level.
                </p>

                <div class="d-flex flex-wrap gap-3 mb-4">
                    <a href="{% url 'expat_life:public_foreigners_list' %}" class="btn btn-primary btn-lg px-4">
                        Explore Guest Profiles
                    </a>
                    <a href="{% url 'dating_app:partner_register' %}" class="btn btn-outline-dark btn-lg px-4">
                        Dating Partner Signup
                    </a>
                </div>

                <div class="row g-3 mt-2">
                    <div class="col-sm-4">
                        <div class="bg-white shadow-sm rounded-4 p-3 h-100">
                            <div class="fw-bold fs-4 text-primary">Featured</div>
                            <div class="text-muted small">Selected profiles highlighted for better visibility</div>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="bg-white shadow-sm rounded-4 p-3 h-100">
                            <div class="fw-bold fs-4 text-primary">Approved</div>
                            <div class="text-muted small">Profiles reviewed before becoming visible on the platform</div>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="bg-white shadow-sm rounded-4 p-3 h-100">
                            <div class="fw-bold fs-4 text-primary">Private + Public</div>
                            <div class="text-muted small">Access levels may vary depending on your authenticated role</div>
                        </div>
                    </div>
                </div>
            </div>

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

                    <div class="p-4">
                        <h4 class="fw-bold mb-3">Why this section matters</h4>

                        <div class="d-flex mb-3">
                            <div class="me-3 text-primary fs-4">•</div>
                            <div>
                                <strong>Better visibility</strong><br>
                                <span class="text-muted">Featured profiles can be highlighted in a more organized and trusted environment.</span>
                            </div>
                        </div>

                        <div class="d-flex mb-3">
                            <div class="me-3 text-primary fs-4">•</div>
                            <div>
                                <strong>Guided access</strong><br>
                                <span class="text-muted">The platform can manage visibility levels for different user groups.</span>
                            </div>
                        </div>

                        <div class="d-flex">
                            <div class="me-3 text-primary fs-4">•</div>
                            <div>
                                <strong>Community connection</strong><br>
                                <span class="text-muted">Useful for those exploring lifestyle, dating, support, or expat-related interactions in Sri Lanka.</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">Approved Profiles</div>
            </div>
            <div class="col-md-3">
                <div class="fw-semibold">Featured Visibility</div>
            </div>
            <div class="col-md-3">
                <div class="fw-semibold">Structured Access</div>
            </div>
            <div class="col-md-3">
                <div class="fw-semibold">Expat Lifestyle Focus</div>
            </div>
        </div>
    </div>
</section>

<!-- FEATURED GUESTS -->
<section 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 Guest Profiles</h2>
                <p class="text-muted mb-0">
                    Selected approved profiles visible according to the current viewer’s access level.
                </p>
            </div>
            <div class="mt-3 mt-lg-0">
                <a href="{% url 'expat_life:public_foreigners_list' %}" class="btn btn-outline-primary">
                    View All Profiles
                </a>
            </div>
        </div>

        <div class="row g-4">
            {% for profile in featured_profiles %}
                <div class="col-md-6 col-xl-4">
                    <div class="card border-0 shadow-sm rounded-4 overflow-hidden h-100">
                        <div class="position-relative">
                            {% if profile.profile_image %}
                                <img src="{{ profile.profile_image.url }}"
                                     class="card-img-top"
                                     alt="{{ profile.lead.full_name|default:profile.user.username }}"
                                     style="height: 260px; object-fit: cover;">
                            {% else %}
                                <img src="{% static 'expat_life/images/default-profile.jpg' %}"
                                     class="card-img-top"
                                     alt="{{ profile.user.username }}"
                                     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">
                                    Featured Guest
                                </span>
                            </div>
                        </div>

                        <div class="card-body p-4 d-flex flex-column">
                            <div class="mb-2 text-muted small">
                                {% if profile.lead.nationality %}
                                    <i class="bi bi-globe2 me-1"></i>{{ profile.lead.nationality }}
                                {% endif %}
                                {% if profile.lead.country %}
                                    {% if profile.lead.nationality %} | {% endif %}
                                    <i class="bi bi-geo-alt me-1"></i>{{ profile.lead.country }}
                                {% endif %}
                            </div>

                            <h5 class="fw-bold mb-2">
                                {{ profile.lead.full_name|default:profile.user.get_full_name|default:profile.user.username }}
                            </h5>

                            <ul class="list-unstyled small text-muted mb-3">
                                {% if profile.lead.gender %}
                                    <li class="mb-1"><strong>Gender:</strong> {{ profile.lead.get_gender_display }}</li>
                                {% endif %}
                                {% if profile.lead.monthly_budget %}
                                    <li class="mb-1"><strong>Budget:</strong> {{ profile.lead.get_monthly_budget_display }}</li>
                                {% endif %}
                                {% if profile.lead.duration_of_stay %}
                                    <li><strong>Stay:</strong> {{ profile.lead.duration_of_stay }}</li>
                                {% endif %}
                            </ul>

                            <div class="mt-auto">
                                <a href="{% url 'expat_life:public_foreigner_detail' profile.pk %}" class="btn btn-primary px-3">
                                    View Details
                                </a>
                            </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 guest profiles will appear here soon</h5>
                        <p class="text-muted mb-0">
                            We are preparing approved and featured profiles for this section.
                        </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">How This Works</span>
            <h2 class="fw-bold mt-2">Simple Visibility Structure</h2>
            <p class="text-muted mb-0">
                A cleaner way to manage public and permission-based profile access.
            </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">Public Preview</h5>
                    <p class="text-muted mb-0">
                        Public visitors can view selected approved featured guest profiles.
                    </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">Role-Based Access</h5>
                    <p class="text-muted mb-0">
                        Approved dating partners may receive wider visibility based on platform permissions.
                    </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">More Trusted Flow</h5>
                    <p class="text-muted mb-0">
                        Approval and featured selection help maintain a more organized presentation.
                    </p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- CTA -->
<section class="py-5">
    <div class="container">
        <div class="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">Explore Featured Guest Profiles with Better Structure</h2>
                    <p class="lead mb-0">
                        View public profiles or access more through the appropriate authenticated pathway.
                    </p>
                </div>
                <div class="col-lg-4 text-lg-end">
                    <div class="d-flex flex-wrap justify-content-lg-end gap-3">
                        <a href="{% url 'expat_life:public_foreigners_list' %}" class="btn btn-warning btn-lg px-4">
                            Browse Profiles
                        </a>
                        <a href="{% url 'dating_app:partner_register' %}" class="btn btn-light btn-lg px-4">
                            Dating Partner Signup
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

{% endblock %}