{% extends 'dating_app/base_dating.html' %}
{% load static %}

{% block title %}Guest Profiles | Local Dating Partner Portal{% endblock %}

{% block content %}

<style>
    :root {
        --dating-deep: #2a0d1f;
        --dating-deeper: #170712;
        --dating-pink: #c2185b;
        --dating-pink-soft: #fff1f6;
        --dating-rose: #ff4d88;
        --dating-gold: #ffc107;
        --dating-muted: #64748b;
        --dating-card-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
        --dating-premium-shadow: 0 28px 70px rgba(42, 13, 31, 0.28);
    }

    .guest-premium-hero {
        position: relative;
        min-height: 690px;
        background-color: var(--dating-deep);
        overflow: hidden;
    }

    .guest-premium-hero-bg {
        position: absolute;
        inset: 0;
        background:
            radial-gradient(circle at 18% 18%, rgba(255, 193, 7, 0.18), transparent 28%),
            radial-gradient(circle at 82% 20%, rgba(255, 77, 136, 0.18), transparent 30%),
            linear-gradient(
                90deg,
                rgba(36, 9, 27, 0.94) 0%,
                rgba(36, 9, 27, 0.82) 42%,
                rgba(36, 9, 27, 0.58) 72%,
                rgba(36, 9, 27, 0.42) 100%
            ),
            url("{% static 'expat_life/images/foreigner_community_hero.webp' %}") center center / cover no-repeat;
        transform: scale(1.03);
        z-index: 0;
    }

    .guest-premium-hero::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -1px;
        height: 110px;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
        z-index: 1;
    }

    .guest-premium-hero-content {
        position: relative;
        z-index: 2;
        padding-top: 90px;
        padding-bottom: 115px;
    }

    .guest-hero-badge,
    .guest-section-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        background: rgba(255, 193, 7, 0.16);
        color: var(--dating-gold);
        border: 1px solid rgba(255, 193, 7, 0.34);
        padding: 8px 16px;
        border-radius: 999px;
        font-weight: 800;
        font-size: 0.78rem;
        letter-spacing: 0.055em;
        text-transform: uppercase;
    }

    .guest-section-badge {
        background: var(--dating-pink-soft);
        color: var(--dating-pink);
        border-color: rgba(194, 24, 91, 0.13);
    }

    .guest-hero-title {
        max-width: 820px;
        letter-spacing: -0.045em;
        line-height: 1.02;
    }

    .guest-hero-copy {
        max-width: 760px;
        color: rgba(255, 255, 255, 0.82);
    }

    .guest-hero-action-primary {
        background: var(--dating-gold);
        border-color: var(--dating-gold);
        color: #2a0d1f;
        font-weight: 800;
        border-radius: 999px;
        box-shadow: 0 18px 34px rgba(255, 193, 7, 0.20);
    }

    .guest-hero-action-primary:hover {
        background: #ffd24d;
        border-color: #ffd24d;
        color: #2a0d1f;
        transform: translateY(-2px);
    }

    .guest-hero-action-secondary {
        border-color: rgba(255, 255, 255, 0.42);
        color: #fff;
        font-weight: 800;
        border-radius: 999px;
    }

    .guest-hero-action-secondary:hover {
        background: #fff;
        color: var(--dating-deep);
        transform: translateY(-2px);
    }

    .guest-hero-pill {
        background: rgba(255, 255, 255, 0.11);
        border: 1px solid rgba(255, 255, 255, 0.16);
        border-radius: 18px;
        padding: 14px 16px;
        color: #fff;
        height: 100%;
        display: flex;
        align-items: center;
        gap: 11px;
        backdrop-filter: blur(12px);
    }

    .guest-hero-pill i {
        color: var(--dating-gold);
        font-size: 1.25rem;
    }

    .guest-premium-side-card {
        border-radius: 30px;
        overflow: hidden;
        background: #fff;
        box-shadow: var(--dating-premium-shadow);
    }

    .guest-side-image-wrap {
        position: relative;
        height: 245px;
        overflow: hidden;
    }

    .guest-side-image-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform: scale(1.02);
    }

    .guest-side-image-wrap::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(42, 13, 31, 0.06) 0%, rgba(42, 13, 31, 0.78) 100%);
    }

    .guest-side-image-label {
        position: absolute;
        left: 22px;
        right: 22px;
        bottom: 20px;
        z-index: 2;
        color: #fff;
    }

    .guest-side-card-body {
        padding: 30px;
    }

    .guest-mini-row {
        display: flex;
        gap: 14px;
        padding-bottom: 18px;
        margin-bottom: 18px;
        border-bottom: 1px solid #edf0f2;
    }

    .guest-mini-row:last-child {
        border-bottom: 0;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .guest-mini-icon {
        width: 44px;
        height: 44px;
        min-width: 44px;
        border-radius: 15px;
        background: var(--dating-pink-soft);
        color: var(--dating-pink);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
    }

    .guest-stat-strip {
        position: relative;
        z-index: 3;
        margin-top: -58px;
    }

    .guest-stat-box {
        background: #fff;
        border: 1px solid rgba(226, 232, 240, 0.85);
        border-radius: 22px;
        padding: 24px;
        box-shadow: var(--dating-card-shadow);
        height: 100%;
    }

    .guest-stat-box h3 {
        color: var(--dating-pink);
        font-weight: 900;
        margin-bottom: 6px;
        font-size: 1.55rem;
    }

    .guest-section-heading {
        max-width: 820px;
    }

    .guest-profile-card {
        background: #fff;
        border: 1px solid rgba(226, 232, 240, 0.85);
        border-radius: 28px;
        overflow: hidden;
        box-shadow: var(--dating-card-shadow);
        transition: all 0.28s ease;
        height: 100%;
    }

    .guest-profile-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 24px 60px rgba(42, 13, 31, 0.16);
    }

    .guest-profile-image-wrap {
        position: relative;
        height: 285px;
        overflow: hidden;
        background: var(--dating-pink-soft);
    }

    .guest-profile-image-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.35s ease;
    }

    .guest-profile-card:hover .guest-profile-image-wrap img {
        transform: scale(1.05);
    }

    .guest-profile-image-wrap::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 44%, rgba(42, 13, 31, 0.68) 100%);
    }

    .guest-featured-badge {
        position: absolute;
        top: 18px;
        left: 18px;
        z-index: 2;
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        background: rgba(255, 255, 255, 0.94);
        color: var(--dating-deep);
        box-shadow: 0 14px 26px rgba(15, 23, 42, 0.16);
        padding: 8px 13px;
        border-radius: 999px;
        font-size: 0.78rem;
        font-weight: 800;
    }

    .guest-privacy-badge {
        position: absolute;
        right: 18px;
        bottom: 18px;
        z-index: 2;
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        background: rgba(255, 193, 7, 0.94);
        color: var(--dating-deep);
        padding: 8px 13px;
        border-radius: 999px;
        font-size: 0.78rem;
        font-weight: 900;
    }

    .guest-profile-body {
        padding: 26px;
    }

    .guest-meta-line {
        color: var(--dating-muted);
        font-size: 0.86rem;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        align-items: center;
    }

    .guest-info-chip-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        margin: 18px 0;
    }

    .guest-info-chip {
        background: #fff7fa;
        border: 1px solid rgba(194, 24, 91, 0.10);
        border-radius: 16px;
        padding: 12px;
        min-height: 74px;
    }

    .guest-info-chip span {
        display: block;
        color: var(--dating-muted);
        font-size: 0.72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        margin-bottom: 4px;
    }

    .guest-info-chip strong {
        display: block;
        color: #1f2937;
        font-size: 0.88rem;
        line-height: 1.25;
    }

    .guest-protection-note {
        background: linear-gradient(135deg, #fff8df 0%, #fff1f6 100%);
        border: 1px solid rgba(255, 193, 7, 0.25);
        border-radius: 18px;
        padding: 14px 15px;
        color: #5b3b05;
        font-size: 0.88rem;
        display: flex;
        gap: 10px;
    }

    .guest-protection-note i {
        color: var(--dating-pink);
        font-size: 1.05rem;
        margin-top: 1px;
    }

    .guest-btn-primary {
        background: linear-gradient(135deg, var(--dating-rose) 0%, var(--dating-pink) 100%);
        border: 0;
        color: #fff;
        border-radius: 999px;
        font-weight: 800;
        box-shadow: 0 14px 28px rgba(194, 24, 91, 0.18);
    }

    .guest-btn-primary:hover {
        color: #fff;
        transform: translateY(-2px);
        box-shadow: 0 18px 36px rgba(194, 24, 91, 0.25);
    }

    .guest-btn-outline {
        border: 1px solid rgba(194, 24, 91, 0.24);
        color: var(--dating-pink);
        border-radius: 999px;
        font-weight: 800;
        background: #fff;
    }

    .guest-btn-outline:hover {
        background: var(--dating-pink);
        color: #fff;
        transform: translateY(-2px);
    }

    .guest-process-card {
        background: #fff;
        border: 1px solid rgba(226, 232, 240, 0.88);
        border-radius: 24px;
        padding: 32px;
        height: 100%;
        box-shadow: var(--dating-card-shadow);
        text-align: center;
        transition: all 0.25s ease;
    }

    .guest-process-card:hover {
        transform: translateY(-4px);
    }

    .guest-process-number {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--dating-rose) 0%, var(--dating-pink) 100%);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 900;
        margin: 0 auto 18px;
        box-shadow: 0 14px 26px rgba(194, 24, 91, 0.18);
    }

    .guest-trust-panel {
        background: linear-gradient(135deg, var(--dating-deep) 0%, var(--dating-pink) 100%);
        color: #fff;
        border-radius: 34px;
        padding: 42px;
        box-shadow: var(--dating-premium-shadow);
        overflow: hidden;
        position: relative;
    }

    .guest-trust-panel::before {
        content: "";
        position: absolute;
        width: 280px;
        height: 280px;
        border-radius: 50%;
        right: -90px;
        top: -120px;
        background: rgba(255, 193, 7, 0.16);
    }

    .guest-trust-item {
        position: relative;
        background: rgba(255, 255, 255, 0.10);
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 18px;
        padding: 16px;
        height: 100%;
        backdrop-filter: blur(10px);
    }

    .guest-trust-item i {
        color: var(--dating-gold);
        font-size: 1.35rem;
        margin-right: 8px;
    }

    .guest-empty-state {
        background: linear-gradient(135deg, #fff 0%, #fff1f6 100%);
        border: 1px dashed rgba(194, 24, 91, 0.24);
        border-radius: 28px;
        padding: 58px 30px;
        text-align: center;
        box-shadow: var(--dating-card-shadow);
    }

    .guest-empty-icon {
        width: 74px;
        height: 74px;
        margin: 0 auto 18px;
        border-radius: 24px;
        background: #fff;
        color: var(--dating-pink);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2rem;
        box-shadow: 0 14px 34px rgba(194, 24, 91, 0.10);
    }

    .guest-final-cta {
        background:
            radial-gradient(circle at 15% 20%, rgba(255, 193, 7, 0.18), transparent 28%),
            linear-gradient(135deg, var(--dating-deep) 0%, var(--dating-pink) 100%);
        border-radius: 34px;
        padding: 54px 34px;
        color: #fff;
        box-shadow: var(--dating-premium-shadow);
    }

    @media (max-width: 991.98px) {
        .guest-premium-hero {
            min-height: auto;
        }

        .guest-premium-hero-content {
            padding-top: 70px;
            padding-bottom: 90px;
        }

        .guest-stat-strip {
            margin-top: -42px;
        }
    }

    @media (max-width: 767.98px) {
        .guest-premium-hero-content {
            padding-top: 56px;
        }

        .guest-hero-title {
            font-size: 2.35rem;
        }

        .guest-info-chip-grid {
            grid-template-columns: 1fr;
        }

        .guest-trust-panel,
        .guest-final-cta {
            border-radius: 24px;
            padding: 32px 22px;
        }
    }

    .guest-visit-stage-badge {
        position: absolute;
        left: 14px;
        bottom: 14px;
        z-index: 4;

        display: inline-flex;
        align-items: center;
        gap: 0.4rem;

        max-width: calc(100% - 28px);
        padding: 0.48rem 0.78rem;
        border-radius: 999px;

        font-size: 0.78rem;
        font-weight: 900;
        letter-spacing: 0.01em;
        line-height: 1;

        color: #fff;
        border: 1px solid rgba(255, 255, 255, 0.28);
        backdrop-filter: blur(12px);
        box-shadow: 0 12px 28px rgba(15, 23, 42, 0.24);
    }

    .guest-visit-stage-badge i {
        font-size: 0.9rem;
    }

    .guest-visit-stage-planning {
        background: rgba(71, 85, 105, 0.88);
    }

    .guest-visit-stage-confirmed {
        background: rgba(22, 163, 74, 0.9);
    }

    .guest-visit-stage-on_the_way {
        background: rgba(245, 158, 11, 0.94);
        color: #111827;
        border-color: rgba(255, 255, 255, 0.38);
    }

    .guest-visit-stage-arrived {
        background: rgba(37, 99, 235, 0.92);
    }

    .guest-visit-stage-completed {
        background: rgba(15, 23, 42, 0.9);
    }
</style>

<!-- HERO SECTION -->
<section class="guest-premium-hero">
    <div class="guest-premium-hero-bg"></div>

    <div class="container guest-premium-hero-content">
        <div class="row align-items-center g-5">
            <div class="col-lg-7 text-white">
                <span class="guest-hero-badge mb-3">
                    <i class="bi bi-stars"></i>
                    Guest Community
                </span>

                <h1 class="display-4 fw-bold mb-4 guest-hero-title">
                    Featured International Guest Profiles
                </h1>

                <p class="lead mb-4 guest-hero-copy">
                    Explore selected guest profiles connected with Sri Lanka lifestyle, relocation,
                    long stays, and meaningful local connections. Public visitors can view limited featured profiles,
                    while approved local dating partners may access more guest profiles based on their permission level.
                </p>

                <div class="d-flex flex-wrap gap-3 mb-4">
                    <a href="{% url 'dating_app:public_foreigners_list' %}"
                       class="btn btn-lg px-4 guest-hero-action-primary">
                        Explore Guest Profiles
                    </a>

                    {% if dating_profile %}
                        <a href="{% url 'dating_app:dating_partner_dashboard' %}"
                           class="btn btn-lg px-4 guest-hero-action-secondary">
                            My Dating Dashboard
                        </a>
                    {% else %}
                        <a href="{% url 'dating_app:partner_register' %}"
                           class="btn btn-lg px-4 guest-hero-action-secondary">
                            Dating Partner Signup
                        </a>
                    {% endif %}
                </div>

                <div class="row g-3 mt-2">
                    <div class="col-sm-4">
                        <div class="guest-hero-pill">
                            <i class="bi bi-star-fill"></i>
                            <span>Selected profiles highlighted for better visibility</span>
                        </div>
                    </div>

                    <div class="col-sm-4">
                        <div class="guest-hero-pill">
                            <i class="bi bi-person-check-fill"></i>
                            <span>Guest profiles reviewed before platform visibility</span>
                        </div>
                    </div>

                    <div class="col-sm-4">
                        <div class="guest-hero-pill">
                            <i class="bi bi-lock-fill"></i>
                            <span>Contact access depends on confirmation and mutual interest</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-5">
                <div class="guest-premium-side-card">
                    <div class="guest-side-image-wrap">
                        <img src="{% static 'expat_life/images/foreigner_community_hero.webp' %}"
                             alt="Guests in Sri Lanka">

                        <div class="guest-side-image-label">
                            <span class="guest-hero-badge mb-2">
                                <i class="bi bi-shield-heart-fill"></i>
                                Protected Discovery
                            </span>
                            <h4 class="fw-bold mb-0">Why this section matters</h4>
                        </div>
                    </div>

                    <div class="guest-side-card-body">
                        <div class="guest-mini-row">
                            <div class="guest-mini-icon">
                                <i class="bi bi-search-heart-fill"></i>
                            </div>
                            <div>
                                <h6 class="fw-bold mb-1">Guest discovery</h6>
                                <p class="text-muted small mb-0">
                                    Local dating partners can understand the type of guests joining the Sri Lanka lifestyle platform.
                                </p>
                            </div>
                        </div>

                        <div class="guest-mini-row">
                            <div class="guest-mini-icon">
                                <i class="bi bi-sliders2-vertical"></i>
                            </div>
                            <div>
                                <h6 class="fw-bold mb-1">Guided access</h6>
                                <p class="text-muted small mb-0">
                                    The platform controls visibility, contact access, and next-step communication for safety.
                                </p>
                            </div>
                        </div>

                        <div class="guest-mini-row">
                            <div class="guest-mini-icon">
                                <i class="bi bi-heart-arrow"></i>
                            </div>
                            <div>
                                <h6 class="fw-bold mb-1">Mutual interest flow</h6>
                                <p class="text-muted small mb-0">
                                    Contact access can be unlocked only when the required confirmation and mutual-interest conditions are met.
                                </p>
                            </div>
                        </div>

                        <div class="mt-4 d-grid">
                            {% if dating_profile %}
                                <a href="{% url 'dating_app:dating_partner_dashboard' %}" class="btn btn-dark btn-lg rounded-pill fw-bold">
                                    Open My Dashboard
                                </a>
                            {% else %}
                                <a href="{% url 'dating_app:partner_register' %}" class="btn btn-dark btn-lg rounded-pill fw-bold">
                                    Register as Dating Partner
                                </a>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- TRUST STRIP -->
<section class="guest-stat-strip pb-5">
    <div class="container">
        <div class="row g-3">
            <div class="col-6 col-lg-3">
                <div class="guest-stat-box text-center">
                    <h3>Approved</h3>
                    <p class="mb-0 text-muted">Guest Profiles</p>
                </div>
            </div>

            <div class="col-6 col-lg-3">
                <div class="guest-stat-box text-center">
                    <h3>Featured</h3>
                    <p class="mb-0 text-muted">Visibility</p>
                </div>
            </div>

            <div class="col-6 col-lg-3">
                <div class="guest-stat-box text-center">
                    <h3>Protected</h3>
                    <p class="mb-0 text-muted">Contact Access</p>
                </div>
            </div>

            <div class="col-6 col-lg-3">
                <div class="guest-stat-box text-center">
                    <h3>Partner</h3>
                    <p class="mb-0 text-muted">Focused Process</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- FEATURED GUESTS -->
<section class="py-5 bg-white">
    <div class="container">
        <div class="d-flex flex-column flex-lg-row justify-content-between align-items-lg-end gap-3 mb-5">
            <div class="guest-section-heading">
                <span class="guest-section-badge">
                    <i class="bi bi-gem"></i>
                    Featured Collection
                </span>
                <h2 class="fw-bold mt-3 mb-2">Featured Guest Profiles</h2>
                <p class="text-muted mb-0">
                    Selected approved guest profiles visible according to your current access level.
                </p>
            </div>

            <div>
                <a href="{% url 'dating_app:public_foreigners_list' %}" class="btn guest-btn-outline px-4 py-2">
                    View All Guest Profiles
                </a>
            </div>
        </div>

        <div class="row g-4">
            {% for profile in featured_profiles %}
                <div class="col-md-6 col-xl-4">
                    <div class="guest-profile-card">
                        <div class="guest-profile-image-wrap">
                            {% if profile.profile_image %}
                                <img src="{{ profile.profile_image.url }}"
                                     alt="{% if dating_profile %}{{ profile.lead.full_name|default:profile.user.username }}{% else %}Guest profile{% endif %}">
                            {% else %}
                                <img src="{% static 'expat_life/images/default-profile.jpg' %}"
                                     alt="Guest profile">
                            {% endif %}

                            <div class="guest-featured-badge">
                                <i class="bi bi-star-fill text-warning"></i>
                                Featured Guest
                            </div>

                            <div class="guest-privacy-badge">
                                <i class="bi bi-lock-fill"></i>
                                Protected
                            </div>
                            {% if request.user.is_authenticated and is_approved_dating_partner %}
                                <div class="guest-visit-stage-badge guest-visit-stage-{{ profile.visit_stage }}">
                                    {% if profile.visit_stage == 'planning' %}
                                        <i class="bi bi-calendar-heart"></i>
                                    {% elif profile.visit_stage == 'confirmed' %}
                                        <i class="bi bi-patch-check-fill"></i>
                                    {% elif profile.visit_stage == 'on_the_way' %}
                                        <i class="bi bi-airplane-engines-fill"></i>
                                    {% elif profile.visit_stage == 'arrived' %}
                                        <i class="bi bi-geo-alt-fill"></i>
                                    {% elif profile.visit_stage == 'completed' %}
                                        <i class="bi bi-check-circle-fill"></i>
                                    {% else %}
                                        <i class="bi bi-info-circle-fill"></i>
                                    {% endif %}

                                    {{ profile.get_visit_stage_display }}
                                </div>
                            {% endif %}
                        </div>

                        <div class="guest-profile-body d-flex flex-column">
                            <div class="guest-meta-line mb-2">
                                {% if profile.lead.nationality %}
                                    <span><i class="bi bi-globe2 me-1"></i>{{ profile.lead.nationality }}</span>
                                {% endif %}

                                {% if profile.lead.country %}
                                    <span><i class="bi bi-geo-alt me-1"></i>{{ profile.lead.country }}</span>
                                {% endif %}
                            </div>

                            <h5 class="fw-bold mb-1">
                                {% if dating_profile %}
                                    {{ profile.lead.full_name|default:profile.user.get_full_name|default:profile.user.username }}
                                {% else %}
                                    International Guest
                                {% endif %}
                            </h5>

                            <p class="text-muted small mb-0">
                                Guest profile preview with protected private information.
                            </p>

                            <div class="guest-info-chip-grid">
                                <div class="guest-info-chip">
                                    <span>Gender</span>
                                    <strong>
                                        {% if profile.lead.gender %}
                                            {{ profile.lead.get_gender_display }}
                                        {% else %}
                                            Private
                                        {% endif %}
                                    </strong>
                                </div>

                                <div class="guest-info-chip">
                                    <span>Budget</span>
                                    <strong>
                                        {% if profile.lead.monthly_budget %}
                                            {{ profile.lead.get_monthly_budget_display }}
                                        {% else %}
                                            Not shown
                                        {% endif %}
                                    </strong>
                                </div>

                                <div class="guest-info-chip">
                                    <span>Stay</span>
                                    <strong>
                                        {% if profile.lead.duration_of_stay %}
                                            {{ profile.lead.duration_of_stay }}
                                        {% else %}
                                            Flexible
                                        {% endif %}
                                    </strong>
                                </div>
                            </div>

                            <div class="guest-protection-note mb-3">
                                <i class="bi bi-shield-lock-fill"></i>
                                <span>
                                    Contact details are protected and depend on confirmation plus mutual interest.
                                </span>
                            </div>

                            <div class="mt-auto d-grid gap-2">
                                {% if is_approved_dating_partner %}
                                    <a href="{% url 'dating_app:public_foreigner_detail' profile.pk %}"
                                       class="btn guest-btn-primary px-3 py-2">
                                        View Guest Details
                                    </a>
                                {% elif dating_profile %}
                                    <a href="{% url 'dating_app:dating_partner_dashboard' %}"
                                       class="btn guest-btn-outline px-3 py-2">
                                        Await Profile Approval
                                    </a>
                                {% else %}
                                    <a href="{% url 'dating_app:partner_register' %}"
                                       class="btn guest-btn-outline px-3 py-2">
                                        Sign Up to View More
                                    </a>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
            {% empty %}
                <div class="col-12">
                    <div class="guest-empty-state">
                        <div class="guest-empty-icon">
                            <i class="bi bi-person-hearts"></i>
                        </div>
                        <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 guest profiles for this section.
                        </p>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
</section>

<!-- TRUST AND ACCESS STRUCTURE -->
<section class="py-5 bg-light">
    <div class="container">
        <div class="guest-trust-panel">
            <div class="row align-items-center g-5 position-relative">
                <div class="col-lg-6">
                    <span class="guest-hero-badge mb-3">
                        <i class="bi bi-shield-heart-fill"></i>
                        Trust & Privacy
                    </span>
                    <h2 class="fw-bold mb-3">Profile Access with a Safer, Step-by-Step Structure</h2>
                    <p class="mb-0 text-white-50">
                        This guest profile area is designed to protect both international guests and local dating partners.
                        Public visitors see only limited previews, while approved dating partners receive access based on
                        the platform’s permission structure.
                    </p>
                </div>

                <div class="col-lg-6">
                    <div class="row g-3">
                        <div class="col-sm-6">
                            <div class="guest-trust-item">
                                <i class="bi bi-eye-fill"></i>
                                Limited public previews
                            </div>
                        </div>

                        <div class="col-sm-6">
                            <div class="guest-trust-item">
                                <i class="bi bi-person-check-fill"></i>
                                Approved partner access
                            </div>
                        </div>

                        <div class="col-sm-6">
                            <div class="guest-trust-item">
                                <i class="bi bi-lock-fill"></i>
                                Protected contact details
                            </div>
                        </div>

                        <div class="col-sm-6">
                            <div class="guest-trust-item">
                                <i class="bi bi-heart-fill"></i>
                                Mutual interest flow
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- HOW IT WORKS -->
<section class="py-5 bg-white">
    <div class="container">
        <div class="text-center mb-5 mx-auto guest-section-heading">
            <span class="guest-section-badge">
                <i class="bi bi-signpost-split-fill"></i>
                How This Works
            </span>
            <h2 class="fw-bold mt-3">Guest Profile Access Structure</h2>
            <p class="text-muted mb-0">
                A safer way for local dating partners to browse guest profiles and move through the correct connection process.
            </p>
        </div>

        <div class="row g-4">
            <div class="col-md-4">
                <div class="guest-process-card">
                    <div class="guest-process-number">01</div>
                    <h5 class="fw-bold">Public Preview</h5>
                    <p class="text-muted mb-0">
                        Public visitors can view selected featured guest previews only.
                    </p>
                </div>
            </div>

            <div class="col-md-4">
                <div class="guest-process-card">
                    <div class="guest-process-number">02</div>
                    <h5 class="fw-bold">Dating Partner Access</h5>
                    <p class="text-muted mb-0">
                        Signed-in dating partners can access guest profiles according to their approval and permission level.
                    </p>
                </div>
            </div>

            <div class="col-md-4">
                <div class="guest-process-card">
                    <div class="guest-process-number">03</div>
                    <h5 class="fw-bold">Mutual Interest</h5>
                    <p class="text-muted mb-0">
                        Contact access is protected until confirmation and mutual interest conditions are satisfied.
                    </p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- CTA -->
<section class="py-5 bg-light">
    <div class="container">
        <div class="guest-final-cta">
            <div class="row align-items-center g-4">
                <div class="col-lg-8">
                    {% if dating_profile %}
                        <span class="guest-hero-badge mb-3">
                            <i class="bi bi-speedometer2"></i>
                            Continue Your Journey
                        </span>
                        <h2 class="fw-bold mb-3">Continue from Your Dating Partner Dashboard</h2>
                        <p class="lead mb-0 text-white-50">
                            Manage your profile, review guest interest, and continue through the trusted dating partner process.
                        </p>
                    {% else %}
                        <span class="guest-hero-badge mb-3">
                            <i class="bi bi-person-plus-fill"></i>
                            Become a Local Partner
                        </span>
                        <h2 class="fw-bold mb-3">Join as a Local Dating Partner</h2>
                        <p class="lead mb-0 text-white-50">
                            Create your profile and access guest profile previews through the correct dating partner pathway.
                        </p>
                    {% endif %}
                </div>

                <div class="col-lg-4 text-lg-end">
                    <div class="d-flex flex-wrap justify-content-lg-end gap-3">
                        <a href="{% url 'dating_app:public_foreigners_list' %}"
                           class="btn btn-warning btn-lg px-4 rounded-pill fw-bold">
                            Browse Profiles
                        </a>

                        {% if dating_profile %}
                            <a href="{% url 'dating_app:dating_partner_dashboard' %}"
                               class="btn btn-light btn-lg px-4 rounded-pill fw-bold">
                                My Dashboard
                            </a>
                        {% else %}
                            <a href="{% url 'dating_app:partner_register' %}"
                               class="btn btn-light btn-lg px-4 rounded-pill fw-bold">
                                Dating Partner Signup
                            </a>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

{% endblock %}