{% extends 'expat_life/base.html' %}
{% load static %}
{% block title %}Packages{% endblock %}

{% block content %}

<style>
    .packages-page {
        background:
            radial-gradient(circle at top left, rgba(255, 193, 7, 0.08), transparent 28%),
            radial-gradient(circle at 88% 18%, rgba(13, 110, 253, 0.08), transparent 30%),
            linear-gradient(180deg, #f5f9ff 0%, #ffffff 48%, #f8fbff 100%);
        overflow: hidden;
    }

    /* =========================
       PAGE HERO
       ========================= */
    .package-list-hero {
        position: relative;
        padding: 6rem 0 8rem;
        background:
            radial-gradient(circle at top left, rgba(255, 193, 7, 0.14), transparent 32%),
            radial-gradient(circle at bottom right, rgba(32, 201, 151, 0.16), transparent 35%),
            linear-gradient(
                90deg,
                rgba(7, 19, 28, 0.94) 0%,
                rgba(7, 19, 28, 0.86) 36%,
                rgba(11, 61, 145, 0.72) 66%,
                rgba(15, 118, 110, 0.62) 100%
            ),
            url("{% static 'expat_life/images/srilanka_luxury_package.webp' %}") center/cover no-repeat;
        color: #fff;
        overflow: hidden;
    }

    .package-list-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
            linear-gradient(120deg, rgba(255, 255, 255, 0.07), transparent 35%),
            radial-gradient(circle at 80% 10%, rgba(255, 193, 7, 0.10), transparent 28%);
        pointer-events: none;
    }

    .package-list-hero::after {
        content: "";
        position: absolute;
        right: -160px;
        bottom: -190px;
        width: 520px;
        height: 520px;
        border-radius: 50%;
        background: rgba(255, 193, 7, 0.08);
        pointer-events: none;
    }

    .package-list-hero .container {
        position: relative;
        z-index: 2;
    }

    .package-list-hero .section-mini-title {
        display: inline-flex;
        align-items: center;
        gap: .45rem;
        padding: .48rem .95rem;
        border-radius: 999px;
        background: rgba(255, 193, 7, 0.16);
        border: 1px solid rgba(255, 193, 7, 0.32);
        color: #ffd36b;
        font-size: .82rem;
        font-weight: 900;
        letter-spacing: .08em;
        text-transform: uppercase;
        margin-bottom: 1rem;
        backdrop-filter: blur(10px);
    }

    .package-list-hero .section-mini-title::before {
        content: "\F3E8";
        font-family: "bootstrap-icons";
        color: #ffc107;
        font-size: .95rem;
    }

    .package-list-hero h1 {
        color: #fff;
        font-size: clamp(2.55rem, 4.8vw, 4.7rem);
        font-weight: 950;
        letter-spacing: -0.05em;
        line-height: 1.04;
        margin-bottom: 1rem;
    }

    .package-list-hero .lead {
        color: rgba(255, 255, 255, 0.88) !important;
        font-size: 1.16rem;
        line-height: 1.85;
        max-width: 890px;
        margin-left: auto;
        margin-right: auto;
    }

    .package-hero-points {
        margin-top: 2rem;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: .85rem;
    }

    .package-hero-pill {
        display: inline-flex;
        align-items: center;
        gap: .55rem;
        padding: .78rem 1rem;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.22);
        color: rgba(255, 255, 255, 0.94);
        font-weight: 700;
        backdrop-filter: blur(8px);
    }

    .package-hero-pill i {
        color: #ffd36b;
    }

    /* =========================
       PACKAGE GRID
       ========================= */
    .package-grid-section {
        position: relative;
        margin-top: -4.5rem;
        z-index: 5;
        padding-bottom: 5rem;
    }

    .package-card {
        position: relative;
        height: 100%;
        border-radius: 32px;
        background: rgba(255, 255, 255, 0.98);
        border: 1px solid rgba(13, 110, 253, 0.10);
        box-shadow: 0 26px 70px rgba(15, 23, 42, 0.12);
        overflow: hidden;
        transition: all .28s ease;
    }

    .package-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 38px 90px rgba(15, 23, 42, 0.18);
        border-color: rgba(13, 110, 253, 0.26);
    }

    .package-featured {
        border: 2px solid rgba(255, 193, 7, 0.78);
        box-shadow: 0 34px 90px rgba(255, 193, 7, 0.18);
    }

    .package-featured::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
            linear-gradient(180deg, rgba(255, 193, 7, 0.08), transparent 28%);
        pointer-events: none;
        z-index: 1;
    }

    .package-selected {
        border: 2px solid rgba(13, 110, 253, 0.68);
        box-shadow: 0 34px 90px rgba(13, 110, 253, 0.18);
    }

    .featured-label,
    .selected-label {
        position: absolute;
        top: 18px;
        z-index: 5;
        display: inline-flex;
        align-items: center;
        gap: .35rem;
        padding: .42rem .8rem;
        border-radius: 999px;
        font-size: .76rem;
        font-weight: 900;
        letter-spacing: .05em;
        text-transform: uppercase;
        box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
    }

    .featured-label {
        left: 18px;
        background: linear-gradient(135deg, #ffd36b, #ffc107);
        color: #231707;
    }

    .featured-label::before {
        content: "\F586";
        font-family: "bootstrap-icons";
    }

    .selected-label {
        right: 18px;
        background: linear-gradient(135deg, #0d6efd, #0b3d91);
        color: #fff;
    }

    .selected-label::before {
        content: "\F26A";
        font-family: "bootstrap-icons";
    }

    .package-image {
        width: 100%;
        height: 235px;
        object-fit: cover;
        display: block;
        position: relative;
        z-index: 0;
    }

    .package-image-placeholder {
        height: 235px;
        background:
            radial-gradient(circle at top left, rgba(255, 193, 7, 0.18), transparent 32%),
            linear-gradient(135deg, #ecfdf5, #e9f2ff);
        color: #0f766e;
        font-size: 3.2rem;
    }

    .package-body {
        position: relative;
        z-index: 2;
        padding: 1.5rem 1.45rem 1.6rem;
        display: flex;
        flex-direction: column;
        height: calc(100% - 235px);
    }

    .package-top h4 {
        color: #102033;
        font-weight: 950;
        letter-spacing: -0.025em;
    }

    .package-price {
        display: flex;
        align-items: baseline;
        gap: .28rem;
        color: #0d6efd;
        font-size: 2.15rem;
        line-height: 1;
        font-weight: 950;
        letter-spacing: -0.04em;
    }

    .package-price span {
        color: #64748b;
        font-size: .98rem;
        font-weight: 750;
        letter-spacing: 0;
    }

    .package-desc {
        color: #64748b !important;
        line-height: 1.75;
        min-height: 72px;
    }

    .package-tagline-box {
        border-radius: 20px;
        background:
            linear-gradient(135deg, rgba(13, 110, 253, 0.07), rgba(15, 118, 110, 0.07), rgba(255, 193, 7, 0.09));
        border: 1px solid rgba(13, 110, 253, 0.12);
        padding: .95rem 1rem;
    }

    .mini-info-row {
        display: flex;
        gap: .65rem;
        align-items: flex-start;
        color: #334155;
        font-size: .92rem;
        line-height: 1.55;
        font-weight: 650;
    }

    .mini-info-row i {
        color: #0f766e;
        font-size: 1.05rem;
        margin-top: .15rem;
        flex: 0 0 auto;
    }

    .package-mini-list {
        list-style: none;
        padding-left: 0;
        margin-bottom: 0;
    }

    .package-mini-list li {
        display: flex;
        align-items: flex-start;
        gap: .6rem;
        color: #475569;
        font-size: .94rem;
        line-height: 1.6;
        margin-bottom: .48rem;
    }

    .package-mini-list li:last-child {
        margin-bottom: 0;
    }

    .package-mini-list i {
        color: #0f766e;
        margin-top: .2rem;
        flex: 0 0 auto;
    }

    .package-actions {
        margin-top: auto !important;
        padding-top: 1.25rem;
    }

    .package-actions .btn {
        border-radius: 999px;
        padding: .78rem 1rem;
        font-weight: 850;
    }

    .package-actions .btn-dark {
        background: linear-gradient(135deg, #07131c, #0d6efd);
        border: none;
        box-shadow: 0 16px 32px rgba(13, 110, 253, 0.20);
    }

    .package-actions .btn-dark:hover {
        background: linear-gradient(135deg, #07131c, #0f766e);
    }

    .package-actions .btn-outline-primary {
        border: 2px solid #0d6efd;
        color: #0d6efd;
    }

    .package-actions .btn-outline-primary:hover {
        background: #0d6efd;
        border-color: #0d6efd;
        color: #fff;
    }

    .package-actions .btn-success {
        border: none;
        background: linear-gradient(135deg, #20c997, #0f766e);
        font-weight: 850;
    }

    .detail-card {
        border-radius: 28px;
        border: 1px solid rgba(13, 110, 253, 0.10);
        background: #ffffff;
        box-shadow: 0 24px 60px rgba(15, 23, 42, 0.10);
        padding: 2rem;
    }

    /* =========================
       QUICK COMPARISON
       ========================= */
    .comparison-section {
        position: relative;
        background:
            radial-gradient(circle at 8% 18%, rgba(13, 110, 253, 0.05), transparent 25%),
            radial-gradient(circle at 92% 80%, rgba(255, 193, 7, 0.06), transparent 28%),
            #ffffff;
    }

    .section-heading .section-mini-title {
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        background: rgba(15, 118, 110, 0.10);
        color: #0f766e;
        border: 1px solid rgba(15, 118, 110, 0.16);
        font-size: .78rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: .08em;
        padding: .45rem .85rem;
        border-radius: 999px;
        margin-bottom: 1rem;
    }

    .section-heading h2 {
        color: #102033;
        letter-spacing: -0.035em;
    }

    .section-heading p {
        max-width: 760px;
        margin-left: auto;
        margin-right: auto;
        line-height: 1.75;
        color: #64748b;
    }

    .comparison-box {
        position: relative;
        height: 100%;
        border-radius: 28px;
        border: 1px solid rgba(13, 110, 253, 0.10);
        background: rgba(255, 255, 255, 0.97);
        box-shadow: 0 22px 52px rgba(15, 23, 42, 0.08);
        padding: 1.6rem 1.45rem;
        transition: all .25s ease;
    }

    .comparison-box:hover {
        transform: translateY(-6px);
        box-shadow: 0 30px 72px rgba(15, 23, 42, 0.14);
        border-color: rgba(13, 110, 253, 0.24);
    }

    .comparison-highlight {
        background:
            radial-gradient(circle at top left, rgba(255, 193, 7, 0.14), transparent 30%),
            linear-gradient(135deg, #f8fbff, #ffffff);
        border: 2px solid rgba(255, 193, 7, 0.52);
        box-shadow: 0 28px 74px rgba(255, 193, 7, 0.12);
    }

    .comparison-box h5 {
        color: #102033;
        font-weight: 900;
        margin-bottom: .65rem;
    }

    .comparison-price {
        color: #0d6efd;
        font-weight: 950;
        font-size: 2rem;
        letter-spacing: -0.035em;
        margin-bottom: .8rem;
    }

    .comparison-box p {
        color: #64748b;
        line-height: 1.75;
    }

    /* =========================
       FINAL CTA
       ========================= */
    .final-cta-section {
        position: relative;
        background:
            radial-gradient(circle at top left, rgba(255, 193, 7, 0.10), transparent 30%),
            radial-gradient(circle at bottom right, rgba(13, 110, 253, 0.10), transparent 34%),
            #f5f9ff;
    }

    .final-cta-box {
        position: relative;
        overflow: hidden;
        border-radius: 36px;
        padding: 3.3rem 2rem;
        background:
            radial-gradient(circle at top left, rgba(255, 193, 7, 0.16), transparent 32%),
            linear-gradient(135deg, rgba(7, 19, 28, 0.98), rgba(11, 61, 145, 0.94), rgba(15, 118, 110, 0.90));
        box-shadow: 0 32px 85px rgba(15, 23, 42, 0.20);
    }

    .final-cta-box::after {
        content: "";
        position: absolute;
        right: -110px;
        bottom: -140px;
        width: 330px;
        height: 330px;
        border-radius: 50%;
        background: rgba(255, 193, 7, 0.10);
    }

    .final-cta-box > * {
        position: relative;
        z-index: 2;
    }

    .final-cta-box h2 {
        font-size: clamp(2rem, 3vw, 3rem);
        letter-spacing: -0.035em;
    }

    .final-cta-box .lead {
        color: rgba(255, 255, 255, 0.86);
        max-width: 900px;
        margin-left: auto;
        margin-right: auto;
        line-height: 1.8;
    }

    .final-cta-box .btn {
        border-radius: 999px;
        font-weight: 850;
        padding: .85rem 1.4rem;
    }

    .hero-visa-btn {
        border: none;
        background: linear-gradient(135deg, #20c997, #0f766e);
    }

    .hero-visa-btn:hover {
        background: linear-gradient(135deg, #0d6efd, #0f766e);
    }

    @media (max-width: 1199.98px) {
        .package-desc {
            min-height: auto;
        }
    }

    @media (max-width: 991.98px) {
        .package-list-hero {
            padding: 4.5rem 0 7rem;
        }

        .package-grid-section {
            margin-top: -3.5rem;
        }
    }

    @media (max-width: 575.98px) {
        .package-list-hero {
            padding: 3.5rem 0 6rem;
        }

        .package-list-hero h1 {
            font-size: 2.5rem;
        }

        .package-grid-section {
            margin-top: -2.75rem;
        }

        .package-card,
        .comparison-box,
        .detail-card,
        .final-cta-box {
            border-radius: 24px;
        }

        .package-body {
            padding: 1.25rem;
        }

        .package-image,
        .package-image-placeholder {
            height: 220px;
        }

        .final-cta-box {
            padding: 2.25rem 1.25rem;
        }
    }
</style>

<div class="packages-page">

    <!-- PAGE HERO -->
    <section class="package-list-hero">
        <div class="container">
            <div class="row justify-content-center text-center">
                <div class="col-lg-9">
                    <span class="section-mini-title">Lifestyle Packages</span>
                    <h1 class="fw-bold mb-3">Sri Lanka Lifestyle Packages</h1>
                    <p class="lead text-muted mb-0">
                        Choose a package based on your monthly budget, comfort level, and the kind of lifestyle
                        you want to enjoy in Sri Lanka.
                    </p>

                    <div class="package-hero-points">
                        <div class="package-hero-pill">
                            <i class="bi bi-cash-stack"></i>
                            <span>Budget-based lifestyle tiers</span>
                        </div>
                        <div class="package-hero-pill">
                            <i class="bi bi-house-heart-fill"></i>
                            <span>Living support and housing direction</span>
                        </div>
                        <div class="package-hero-pill">
                            <i class="bi bi-stars"></i>
                            <span>From simple stays to premium comfort</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- PACKAGE GRID -->
    <section class="package-grid-section">
        <div class="container">
            <div class="row g-4">
                {% for package in packages %}
                <div class="col-md-6 col-xl-3">
                    <div class="package-card h-100 {% if package.is_featured %}package-featured{% endif %} {% if selected_package_id == package.id %}package-selected{% endif %}">
                        {% if package.is_featured %}
                            <div class="featured-label">Popular</div>
                        {% endif %}
                        {% if selected_package_id == package.id %}
                            <div class="selected-label">Selected</div>
                        {% endif %}

                        {% if package.image %}
                            <img src="{{ package.image.url }}" class="package-image" alt="{{ package.name }}">
                        {% else %}
                            <div class="package-image package-image-placeholder d-flex align-items-center justify-content-center">
                                <i class="bi bi-house-heart-fill"></i>
                            </div>
                        {% endif %}

                        <div class="package-body">
                            <div class="package-top">
                                <h4 class="fw-bold mb-2">{{ package.name }}</h4>
                                <div class="package-price mb-3">
                                    ${{ package.monthly_price_usd }}<span>/month</span>
                                </div>
                                <p class="text-muted package-desc">{{ package.short_description }}</p>
                            </div>

                            <div class="package-middle">
                                <div class="package-tagline-box">
                                    <div class="mini-info-row">
                                        <i class="bi bi-people-fill"></i>
                                        <span>
                                            {% if package.target_audience %}
                                                {{ package.target_audience }}
                                            {% else %}
                                                Suitable for long-stay guests
                                            {% endif %}
                                        </span>
                                    </div>
                                </div>

                                <ul class="package-mini-list mt-3">
                                    <li><i class="bi bi-check-circle-fill"></i> Budget-guided lifestyle planning</li>
                                    <li><i class="bi bi-check-circle-fill"></i> Housing and living guidance</li>
                                    <li><i class="bi bi-check-circle-fill"></i> Local support consultation</li>
                                </ul>
                            </div>

                            <div class="package-actions mt-4 d-grid gap-2">
                                <a href="{% url 'expat_life:package_detail' package.slug %}" class="btn btn-dark">
                                    View Details
                                </a>

                                {% if is_foreigner_user %}
                                    {% if selected_package_id == package.id %}
                                        <button class="btn btn-success" disabled>
                                            Current Selected Package
                                        </button>
                                    {% else %}
                                        <a href="{% url 'expat_life:foreigner_dashboard' %}" class="btn btn-outline-primary">
                                            My Guest Dashboard
                                        </a>
                                    {% endif %}
                                {% else %}
                                    <a href="{% url 'expat_life:foreigner_signup' %}" class="btn btn-outline-primary">
                                        Start Guest Signup
                                    </a>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
                {% empty %}
                <div class="col-12">
                    <div class="detail-card text-center">
                        <h4 class="fw-bold mb-2">No Packages Available Yet</h4>
                        <p class="text-muted mb-0">Package details will be added soon.</p>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </section>

    <!-- COMPARISON STRIP -->
    <section class="py-5 comparison-section">
        <div class="container">
            <div class="section-heading text-center mb-5">
                <span class="section-mini-title">Quick Comparison</span>
                <h2 class="fw-bold">Which Package Fits You Best?</h2>
                <p class="text-muted">
                    A simple overview to help visitors understand the difference between package levels.
                </p>
            </div>

            <div class="row g-4">
                <div class="col-md-6 col-lg-3">
                    <div class="comparison-box h-100">
                        <h5 class="fw-bold">Startup</h5>
                        <div class="comparison-price">$500</div>
                        <p class="mb-0">Best for simple living, basic housing, and a practical monthly budget.</p>
                    </div>
                </div>

                <div class="col-md-6 col-lg-3">
                    <div class="comparison-box h-100 comparison-highlight">
                        <h5 class="fw-bold">Comfort</h5>
                        <div class="comparison-price">$1,000</div>
                        <p class="mb-0">Best for a more comfortable lifestyle with better convenience and flexibility.</p>
                    </div>
                </div>

                <div class="col-md-6 col-lg-3">
                    <div class="comparison-box h-100">
                        <h5 class="fw-bold">Premium</h5>
                        <div class="comparison-price">$2,000</div>
                        <p class="mb-0">Best for work-friendly living, stronger comfort, and premium support options.</p>
                    </div>
                </div>

                <div class="col-md-6 col-lg-3">
                    <div class="comparison-box h-100">
                        <h5 class="fw-bold">Luxury</h5>
                        <div class="comparison-price">$3,000</div>
                        <p class="mb-0">Best for spacious tropical comfort, convenience, and higher-end lifestyle goals.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- CTA -->
    <section class="final-cta-section py-5">
        <div class="container">
            <div class="final-cta-box text-center text-white">
                <h2 class="fw-bold mb-3">Need Help Choosing a Package?</h2>
                <p class="lead mb-4">
                    Not sure which option is right for you? Start with a guest signup, explore visa requirements, or request a consultation for guidance.
                </p>

                <div class="d-flex flex-wrap justify-content-center gap-3">

                    {% if is_foreigner_user %}
                        <a href="{% url 'expat_life:foreigner_dashboard' %}" 
                        class="btn btn-warning btn-lg px-4">
                            My Guest Dashboard
                        </a>
                    {% else %}
                        <a href="{% url 'expat_life:foreigner_signup' %}" 
                        class="btn btn-warning btn-lg px-4">
                            Guest Signup
                        </a>
                    {% endif %}

                    <a href="{% url 'expat_life:consultation_request' %}" 
                       class="btn btn-light btn-lg px-4">
                        Book Consultation
                    </a>

                    <a href="{% url 'expat_life:sri_lanka_digital_nomad_visa' %}" 
                       class="btn btn-success btn-lg px-4 fw-semibold shadow hero-visa-btn">
                        🌴 Check Visa Requirements
                    </a>

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

</div>

{% endblock %}