{% extends 'expat_life/base.html' %}
{% block title %}{{ package.name }}{% endblock %}

{% block content %}
<style>
    /* =========================================================
       PACKAGE DETAIL PAGE - LIVE IN SRI LANKA PREMIUM TOUCH
       Theme: Cinematic Navy + Premium Blue + Tropical Teal + Gold
       ========================================================= */

    .package-detail-hero {
        position: relative;
        overflow: hidden;
        background:
            radial-gradient(circle at top left, rgba(255, 193, 7, 0.12), transparent 28%),
            radial-gradient(circle at 85% 18%, rgba(13, 110, 253, 0.10), transparent 32%),
            linear-gradient(180deg, #f5f9ff 0%, #ffffff 100%);
    }

    .package-detail-hero::before {
        content: "";
        position: absolute;
        inset: 0 0 auto 0;
        height: 280px;
        background:
            radial-gradient(circle at top right, rgba(32, 201, 151, 0.14), transparent 34%),
            linear-gradient(135deg, rgba(7, 19, 28, 0.06), rgba(13, 110, 253, 0.06));
        pointer-events: none;
    }

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

    .package-detail-image-wrap {
        position: relative;
    }

    .package-detail-image-wrap::before {
        content: "";
        position: absolute;
        inset: -16px;
        border-radius: 34px;
        background:
            linear-gradient(135deg, rgba(255, 193, 7, 0.30), rgba(13, 110, 253, 0.20), rgba(32, 201, 151, 0.18));
        transform: rotate(-2deg);
        z-index: -1;
    }

    .package-detail-image {
        width: 100%;
        min-height: 420px;
        max-height: 520px;
        object-fit: cover;
        border-radius: 32px;
        box-shadow: 0 30px 80px rgba(15, 23, 42, 0.18);
        border: 1px solid rgba(255, 255, 255, 0.60);
    }

    .package-detail-placeholder {
        background:
            radial-gradient(circle at center, rgba(255, 193, 7, 0.16), transparent 36%),
            linear-gradient(135deg, #ecfdf5, #e9f2ff);
        color: #0f766e;
        font-size: 4rem;
    }

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

    .section-mini-title::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #ffc107;
        box-shadow: 0 0 0 5px rgba(255, 193, 7, 0.14);
    }

    .package-detail-hero h1 {
        color: #102033;
        font-weight: 950;
        letter-spacing: -0.045em;
        line-height: 1.05;
    }

    .package-detail-price {
        display: inline-flex;
        align-items: baseline;
        gap: .2rem;
        padding: .55rem 1rem;
        border-radius: 999px;
        background:
            radial-gradient(circle at top right, rgba(255, 193, 7, 0.16), transparent 32%),
            linear-gradient(135deg, #07131c, #0d6efd);
        color: #ffffff;
        font-size: clamp(2rem, 4vw, 3rem);
        font-weight: 950;
        letter-spacing: -0.045em;
        box-shadow: 0 18px 36px rgba(13, 110, 253, 0.22);
    }

    .package-detail-price span {
        color: rgba(255, 255, 255, 0.78);
        font-size: 1rem;
        font-weight: 750;
        letter-spacing: 0;
    }

    .package-detail-hero .lead {
        color: #64748b !important;
        line-height: 1.75;
    }

    .package-target-box {
        padding: 1.2rem 1.25rem;
        border-radius: 22px;
        background: #f8fbff;
        border: 1px solid rgba(13, 110, 253, 0.12);
        border-left: 4px solid #0f766e;
        box-shadow: 0 14px 34px rgba(15, 23, 42, 0.05);
    }

    .package-target-box h6 {
        color: #102033;
    }

    .package-target-box p {
        color: #475569;
        line-height: 1.65;
    }

    .package-detail-hero .btn,
    .cta-card-light .btn {
        border-radius: 999px;
        font-weight: 850;
        letter-spacing: .01em;
    }

    .package-detail-hero .btn-warning,
    .cta-card-light .btn-warning {
        border: none;
        background: linear-gradient(135deg, #ffd36b, #ffc107);
        color: #231707;
        box-shadow: 0 16px 32px rgba(255, 193, 7, 0.22);
    }

    .package-detail-hero .btn-warning:hover,
    .cta-card-light .btn-warning:hover {
        background: linear-gradient(135deg, #ffe08a, #ffc107);
        color: #231707;
        transform: translateY(-2px);
    }

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

    .package-detail-hero .btn-dark:hover,
    .cta-card-light .btn-dark:hover {
        background: linear-gradient(135deg, #07131c, #0f766e);
        color: #ffffff;
        transform: translateY(-2px);
    }

    .package-detail-hero .btn-success,
    .cta-card-light .btn-success {
        border: none;
        background: linear-gradient(135deg, #20c997, #0f766e);
        color: #ffffff;
    }

    /* =========================================================
       SECTIONS
       ========================================================= */

    .light-section {
        position: relative;
        overflow: hidden;
        background:
            radial-gradient(circle at top left, rgba(255, 193, 7, 0.09), transparent 28%),
            radial-gradient(circle at bottom right, rgba(13, 110, 253, 0.08), transparent 32%),
            linear-gradient(180deg, #f5f9ff 0%, #ffffff 100%);
    }

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

    .section-heading p {
        color: #64748b !important;
        line-height: 1.75;
    }

    .detail-card,
    .quick-summary-card,
    .total-budget-card,
    .detail-feature-card {
        border-radius: 28px;
        border: 1px solid rgba(13, 110, 253, 0.10);
        background: rgba(255, 255, 255, 0.96);
        box-shadow: 0 22px 50px rgba(15, 23, 42, 0.08);
        padding: 1.6rem;
        transition: all .24s ease;
    }

    .detail-card:hover,
    .quick-summary-card:hover,
    .total-budget-card:hover,
    .detail-feature-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 30px 72px rgba(15, 23, 42, 0.13);
        border-color: rgba(13, 110, 253, 0.22);
    }

    .detail-card h3,
    .detail-card h4,
    .detail-card h5,
    .quick-summary-card h4,
    .total-budget-card h2,
    .detail-feature-card h5 {
        color: #102033;
        letter-spacing: -0.02em;
    }

    .detail-card p,
    .detail-feature-card p {
        color: #64748b;
        line-height: 1.75;
    }

    .quick-summary-card {
        background:
            radial-gradient(circle at top right, rgba(255, 193, 7, 0.12), transparent 32%),
            linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    }

    .quick-summary-item {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        padding-bottom: .95rem;
        margin-bottom: .95rem;
        border-bottom: 1px solid rgba(13, 110, 253, 0.10);
    }

    .quick-summary-item span {
        color: #64748b;
        font-weight: 650;
    }

    .quick-summary-item strong {
        color: #0d6efd;
        font-weight: 900;
        text-align: right;
        white-space: nowrap;
    }

    /* =========================================================
       BUDGET BREAKDOWN
       ========================================================= */

    .budget-breakdown-list {
        display: grid;
        gap: .85rem;
    }

    .budget-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 1rem 1.05rem;
        border-radius: 18px;
        background: #f8fbff;
        border: 1px solid rgba(13, 110, 253, 0.10);
    }

    .budget-label {
        color: #334155;
        font-weight: 750;
    }

    .budget-label i {
        width: 34px;
        height: 34px;
        border-radius: 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-right: .45rem;
        background: linear-gradient(135deg, #ecfdf5, #e9f2ff);
        color: #0f766e;
    }

    .budget-label small {
        margin-left: 2.95rem;
        margin-top: .25rem;
        color: #64748b !important;
        font-weight: 500;
        line-height: 1.45;
    }

    .budget-value {
        color: #0d6efd;
        font-size: 1.08rem;
        font-weight: 950;
        white-space: nowrap;
    }

    .total-budget-card {
        background:
            radial-gradient(circle at top right, rgba(255, 193, 7, 0.14), transparent 34%),
            linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    }

    .total-budget-card h2 {
        color: #0d6efd;
        font-size: clamp(2rem, 4vw, 3rem);
    }

    .info-note-box {
        display: flex;
        gap: .85rem;
        padding: 1rem 1.1rem;
        border-radius: 20px;
        background: #f8fbff;
        border: 1px solid rgba(13, 110, 253, 0.14);
        border-left: 4px solid #0f766e;
        color: #334155;
        line-height: 1.65;
    }

    .info-note-box i {
        color: #0f766e;
        font-size: 1.25rem;
        margin-top: .15rem;
        flex: 0 0 auto;
    }

    /* =========================================================
       FEATURE CARDS
       ========================================================= */

    .detail-feature-card {
        height: 100%;
        text-align: left;
        background:
            radial-gradient(circle at top right, rgba(255, 193, 7, 0.10), transparent 32%),
            #ffffff;
    }

    .detail-feature-icon {
        width: 58px;
        height: 58px;
        border-radius: 20px;
        background:
            linear-gradient(135deg, rgba(15, 118, 110, 0.13), rgba(13, 110, 253, 0.11), rgba(255, 193, 7, 0.15));
        color: #0f766e;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1.6rem;
        margin-bottom: 1rem;
    }

    /* =========================================================
       LIFESTYLE GRADIENT SECTION
       ========================================================= */

    .gradient-section {
        position: relative;
        overflow: hidden;
        background:
            radial-gradient(circle at top left, rgba(255, 193, 7, 0.16), transparent 30%),
            radial-gradient(circle at bottom right, rgba(32, 201, 151, 0.18), transparent 34%),
            linear-gradient(135deg, #07131c 0%, #0b3d91 55%, #0f766e 100%);
    }

    .gradient-section::after {
        content: "";
        position: absolute;
        right: -140px;
        top: -160px;
        width: 420px;
        height: 420px;
        border-radius: 50%;
        background: rgba(255, 193, 7, 0.08);
    }

    .gradient-section .container {
        position: relative;
        z-index: 2;
    }

    .section-mini-title-light {
        background: rgba(255, 193, 7, 0.16) !important;
        border-color: rgba(255, 193, 7, 0.32) !important;
        color: #ffd36b !important;
    }

    .gradient-section h2 {
        color: #ffffff;
        font-weight: 950;
        letter-spacing: -0.035em;
    }

    .gradient-section p {
        color: rgba(255, 255, 255, 0.84);
        line-height: 1.75;
    }

    .mini-feature-box {
        display: flex;
        align-items: center;
        gap: .75rem;
        padding: .95rem 1rem;
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.18);
        color: #ffffff;
        font-weight: 750;
        backdrop-filter: blur(8px);
    }

    .mini-feature-box i {
        color: #ffd36b;
        font-size: 1.15rem;
    }

    .cta-card-light {
        border-radius: 30px;
        padding: 2rem;
        background:
            radial-gradient(circle at top right, rgba(255, 193, 7, 0.12), transparent 34%),
            #ffffff;
        box-shadow: 0 28px 70px rgba(0, 0, 0, 0.22);
        border: 1px solid rgba(255, 255, 255, 0.36);
    }

    .cta-card-light h4 {
        color: #102033;
        font-weight: 900;
    }

    .cta-card-light p {
        color: #64748b !important;
        line-height: 1.7;
    }

    .cta-card-light .btn-outline-dark {
        border-color: #0d6efd;
        color: #0d6efd;
        border-radius: 999px;
        font-weight: 850;
    }

    .cta-card-light .btn-outline-dark:hover {
        background: #0d6efd;
        border-color: #0d6efd;
        color: #ffffff;
    }

    /* =========================================================
       FAQ
       ========================================================= */

    .custom-accordion .accordion-item {
        border: 1px solid rgba(13, 110, 253, 0.10);
        border-radius: 20px;
        overflow: hidden;
        margin-bottom: 1rem;
        background: #ffffff;
        box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
    }

    .custom-accordion .accordion-button {
        color: #102033;
        font-weight: 850;
        padding: 1.15rem 1.25rem;
        box-shadow: none;
        background: #ffffff;
    }

    .custom-accordion .accordion-button:not(.collapsed) {
        color: #0d6efd;
        background: linear-gradient(135deg, #f8fbff 0%, #ecfdf5 100%);
        box-shadow: none;
    }

    .custom-accordion .accordion-button:focus {
        box-shadow: 0 0 0 .22rem rgba(13, 110, 253, 0.12);
    }

    .custom-accordion .accordion-body {
        color: #475569;
        line-height: 1.8;
        background: #ffffff;
        padding: 1.15rem 1.25rem 1.25rem;
    }

    @media (max-width: 991.98px) {
        .package-detail-image {
            min-height: 320px;
            max-height: 420px;
        }

        .package-detail-hero {
            text-align: center;
        }

        .package-target-box,
        .info-note-box {
            text-align: left;
        }

        .budget-row {
            align-items: flex-start;
        }
    }

    @media (max-width: 575.98px) {
        .package-detail-image {
            min-height: 260px;
            border-radius: 24px;
        }

        .package-detail-image-wrap::before {
            border-radius: 26px;
            inset: -10px;
        }

        .detail-card,
        .quick-summary-card,
        .total-budget-card,
        .detail-feature-card,
        .cta-card-light {
            border-radius: 22px;
        }

        .budget-row,
        .quick-summary-item {
            flex-direction: column;
            align-items: flex-start;
        }

        .quick-summary-item strong,
        .budget-value {
            text-align: left;
        }
    }
</style>
<!-- PAGE HERO -->
<section class="package-detail-hero py-5">
    <div class="container">
        <div class="row align-items-center g-5">
            <div class="col-lg-6">
                <div class="package-detail-image-wrap">
                    {% if package.image %}
                        <img src="{{ package.image.url }}" class="img-fluid package-detail-image" alt="{{ package.name }}">
                    {% else %}
                        <div class="package-detail-image package-detail-placeholder d-flex align-items-center justify-content-center">
                            <i class="bi bi-house-heart-fill"></i>
                        </div>
                    {% endif %}
                </div>
            </div>

            <div class="col-lg-6">
                <span class="section-mini-title">Lifestyle Package</span>
                <h1 class="fw-bold mb-3">{{ package.name }}</h1>

                <div class="package-detail-price mb-3">
                    ${{ package.monthly_price_usd }}<span>/month</span>
                </div>

                <p class="lead text-muted mb-4">
                    {{ package.short_description }}
                </p>

                {% if package.target_audience %}
                <div class="package-target-box mb-4">
                    <h6 class="fw-bold mb-2">Best For</h6>
                    <p class="mb-0">{{ package.target_audience }}</p>
                </div>
                {% endif %}

                <div class="d-flex flex-wrap gap-3">
                    {% if request.user.is_authenticated and lead %}
                        {% if already_selected %}
                            <button class="btn btn-success btn-lg px-4" disabled>
                                Current Selected Package
                            </button>
                        {% else %}
                            <form method="post" action="{% url 'expat_life:select_package' package.slug %}">
                                {% csrf_token %}
                                <button type="submit" class="btn btn-warning btn-lg px-4">
                                    Select This Package
                                </button>
                            </form>
                        {% endif %}
                    {% else %}
                        <a href="{% url 'expat_life:foreigner_signup' %}" class="btn btn-warning btn-lg px-4">
                            Guest Signup to Select
                        </a>
                    {% endif %}

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

                <p class="small text-muted mt-3 mb-0">
                    Selecting this package updates your current package preference so we can better guide your accommodation, support, and pre-arrival planning.
                </p>
            </div>
        </div>
    </div>
</section>

<!-- DESCRIPTION + QUICK SUMMARY -->
<section class="py-5 bg-white">
    <div class="container">
        <div class="row g-4">
            <div class="col-lg-8">
                <div class="detail-card h-100">
                    <h3 class="fw-bold mb-3">About This Package</h3>
                    <p class="mb-0">{{ package.full_description|linebreaks }}</p>
                </div>
            </div>

            <div class="col-lg-4">
                <div class="detail-card h-100 quick-summary-card">
                    <h4 class="fw-bold mb-4">Quick Summary</h4>

                    <div class="quick-summary-item">
                        <span>Suggested Monthly Budget</span>
                        <strong>${{ package.monthly_price_usd }}</strong>
                    </div>

                    <div class="quick-summary-item">
                        <span>Package Type</span>
                        <strong>{{ package.get_level_display }}</strong>
                    </div>

                    <div class="quick-summary-item">
                        <span>Confirmation Fee</span>
                        <strong>${{ package.confirmation_fee_usd }}</strong>
                    </div>

                    <div class="quick-summary-item">
                        <span>One-Time Service Charge</span>
                        <strong>${{ package.service_fee_amount }}</strong>
                    </div>

                    <div class="quick-summary-item">
                        <span>Estimated Rent</span>
                        <strong>${{ package.estimated_rent_usd }}</strong>
                    </div>

                    <div class="quick-summary-item">
                        <span>Estimated Rental Deposit</span>
                        <strong>${{ package.estimated_rental_deposit_usd }}</strong>
                    </div>

                    <div class="quick-summary-item border-0 pb-0 mb-0">
                        <span>Estimated Upfront Cost</span>
                        <strong>${{ package.estimated_upfront_total_with_deposit }}</strong>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- COST BREAKDOWN -->
<section class="py-5 light-section">
    <div class="container">
        <div class="section-heading text-center mb-5">
            <span class="section-mini-title">Budget Breakdown</span>
            <h2 class="fw-bold">Estimated Monthly Lifestyle Structure</h2>
            <p class="text-muted">
                A practical breakdown of how this package budget may be distributed.
            </p>
        </div>

        <div class="row g-4">
            <div class="col-lg-7">
                <div class="detail-card h-100">
                    <div class="budget-breakdown-list">
                        <div class="budget-row">
                            <div class="budget-label"><i class="bi bi-house-door-fill"></i> Furnished Housing</div>
                            <div class="budget-value">${{ package.housing_cost }}</div>
                        </div>

                        <div class="budget-row">
                            <div class="budget-label"><i class="bi bi-basket2-fill"></i> Food / Groceries</div>
                            <div class="budget-value">${{ package.food_cost }}</div>
                        </div>

                        <div class="budget-row">
                            <div class="budget-label"><i class="bi bi-wifi"></i> Utilities + Internet + Mobile</div>
                            <div class="budget-value">${{ package.utilities_cost }}</div>
                        </div>

                        <div class="budget-row">
                            <div class="budget-label"><i class="bi bi-car-front-fill"></i> Local Transport</div>
                            <div class="budget-value">${{ package.transport_cost }}</div>
                        </div>

                        <div class="budget-row">
                            <div class="budget-label"><i class="bi bi-person-workspace"></i> Laundry / Cleaning / Home Help</div>
                            <div class="budget-value">${{ package.support_cost }}</div>
                        </div>

                        <div class="budget-row">
                            <div class="budget-label"><i class="bi bi-cup-hot-fill"></i> Leisure / Social</div>
                            <div class="budget-value">${{ package.leisure_cost }}</div>
                        </div>

                        <div class="budget-row border-0 pb-0 mb-0">
                            <div class="budget-label"><i class="bi bi-three-dots-circle-fill"></i> Buffer / Pharmacy / Miscellaneous</div>
                            <div class="budget-value">${{ package.misc_cost }}</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-5">
                <div class="detail-card h-100 total-budget-card">
                    <span class="section-mini-title mb-2">Estimated Monthly Total</span>
                    <h2 class="fw-bold mb-3">${{ package.total_breakdown }}</h2>
                    <p class="text-muted mb-4">
                        This gives you a simple idea of how the monthly lifestyle budget may be allocated.
                    </p>

                    <div class="info-note-box">
                        <i class="bi bi-info-circle-fill"></i>
                        <div>
                            Final real-world monthly cost can vary depending on location, season, property quality, and the level of support you require.
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- INITIAL COSTS & PLANNING -->
<section class="py-5 bg-white">
    <div class="container">
        <div class="section-heading text-center mb-5">
            <span class="section-mini-title">Planning Costs</span>
            <h2 class="fw-bold">Estimated Initial Costs Before and Around Arrival</h2>
            <p class="text-muted">
                These figures help you understand the likely upfront money needed before starting your stay in Sri Lanka.
            </p>
        </div>

        <div class="row g-4">
            <div class="col-lg-7">
                <div class="detail-card h-100">
                    <div class="budget-breakdown-list">
                        <div class="budget-row">
                            <div class="budget-label">
                                <i class="bi bi-check2-square"></i> Confirmation Fee
                            </div>
                            <div class="budget-value">${{ package.confirmation_fee_usd }}</div>
                        </div>

                        <div class="budget-row">
                            <div class="budget-label">
                                <i class="bi bi-shield-check"></i> One-Time Service Charge
                                <small class="text-muted d-block">
                                    For lifetime facilitation responsibility during your stay
                                </small>
                            </div>
                            <div class="budget-value">${{ package.service_fee_amount }}</div>
                        </div>

                        <div class="budget-row">
                            <div class="budget-label">
                                <i class="bi bi-house-door-fill"></i> Estimated Monthly Rent
                            </div>
                            <div class="budget-value">${{ package.estimated_rent_usd }}</div>
                        </div>

                        <div class="budget-row">
                            <div class="budget-label">
                                <i class="bi bi-bank"></i> Estimated Rental Deposit
                                <small class="text-muted d-block">
                                    Approx. {{ package.estimated_deposit_months }} months of rent
                                </small>
                            </div>
                            <div class="budget-value">${{ package.estimated_rental_deposit_usd }}</div>
                        </div>

                        <div class="budget-row">
                            <div class="budget-label">
                                <i class="bi bi-calendar-month"></i> Estimated First Month Budget
                            </div>
                            <div class="budget-value">${{ package.monthly_price_usd }}</div>
                        </div>

                        <div class="budget-row border-0 pb-0 mb-0">
                            <div class="budget-label">
                                <i class="bi bi-stars"></i> Estimated First Month Total with Initial Costs
                            </div>
                            <div class="budget-value fw-bold">${{ package.estimated_first_month_total_with_deposit }}</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-5">
                <div class="detail-card h-100 total-budget-card">
                    <span class="section-mini-title mb-2">What These Charges Mean</span>

                    <div class="mb-4">
                        <h5 class="fw-bold">Confirmation Fee</h5>
                        <p class="text-muted mb-0">
                            This is separate from the service charge. It helps identify serious clients and opens access, permissions, and more focused pre-arrival support.
                        </p>
                    </div>

                    <div class="mb-4">
                        <h5 class="fw-bold">One-Time Service Charge</h5>
                        <p class="text-muted mb-0">
                            This is a one-time facilitation charge for long-term coordination, guidance, local support processes, and responsibility during your stay in Sri Lanka.
                        </p>
                    </div>

                    <div class="mb-4">
                        <h5 class="fw-bold">Rental Deposit</h5>
                        <p class="text-muted mb-0">
                            This is an estimated rental deposit based on the rent level expected in this package. The actual deposit can change depending on the property you finally choose and the landlord’s rules.
                        </p>
                    </div>

                    <div class="info-note-box">
                        <i class="bi bi-info-circle-fill"></i>
                        <div>
                            Some properties may require different deposit terms. Your actual rent, deposit, and setup costs will depend on your final selections.
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- FEATURES -->
<section class="py-5 light-section">
    <div class="container">
        <div class="section-heading text-center mb-5">
            <span class="section-mini-title">Package Benefits</span>
            <h2 class="fw-bold">What This Package Can Offer</h2>
        </div>

        <div class="row g-4">
            {% for feature in package.features.all %}
            <div class="col-md-6 col-lg-4">
                <div class="detail-feature-card h-100">
                    <div class="detail-feature-icon">
                        <i class="bi bi-check-circle-fill"></i>
                    </div>
                    <h5 class="fw-bold">Included Benefit</h5>
                    <p class="mb-0">{{ feature.feature_text }}</p>
                </div>
            </div>
            {% empty %}
            <div class="col-12">
                <div class="detail-card text-center">
                    <p class="mb-0 text-muted">Package features will be updated soon.</p>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</section>

<!-- IDEAL LIFESTYLE -->
<section class="py-5 gradient-section text-white">
    <div class="container">
        <div class="row align-items-center g-5">
            <div class="col-lg-7">
                <span class="section-mini-title section-mini-title-light">Lifestyle View</span>
                <h2 class="fw-bold mb-3">Imagine Your Life with the {{ package.name }}</h2>
                <p class="mb-4">
                    This package is designed to help guests enjoy Sri Lanka with a balance of comfort,
                    affordability, local support, and a more peaceful lifestyle.
                </p>

                <div class="row g-3">
                    <div class="col-sm-6">
                        <div class="mini-feature-box">
                            <i class="bi bi-geo-alt-fill"></i>
                            <span>Location Guidance</span>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="mini-feature-box">
                            <i class="bi bi-house-fill"></i>
                            <span>Housing Setup Support</span>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="mini-feature-box">
                            <i class="bi bi-people-fill"></i>
                            <span>Local Assistance Process</span>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="mini-feature-box">
                            <i class="bi bi-brightness-high-fill"></i>
                            <span>Tropical Lifestyle Option</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-5">
                <div class="cta-card-light">
                    <h4 class="fw-bold mb-3">Interested in This Package?</h4>
                    <p class="text-muted mb-4">
                        Select this package, request consultation, and prepare your budget with more clarity before arrival.
                    </p>

                    <div class="d-grid gap-3">
                        {% if request.user.is_authenticated and lead %}
                            {% if already_selected %}
                                <button class="btn btn-success btn-lg" disabled>
                                    This Is Your Current Selected Package
                                </button>
                            {% else %}
                                <form method="post" action="{% url 'expat_life:select_package' package.slug %}">
                                    {% csrf_token %}
                                    <button type="submit" class="btn btn-warning btn-lg w-100">
                                        Select This Package
                                    </button>
                                </form>
                            {% endif %}
                        {% else %}
                            <a href="{% url 'expat_life:foreigner_signup' %}" class="btn btn-warning btn-lg">
                                Start Guest Signup
                            </a>
                        {% endif %}

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

                        <a href="{% url 'expat_life:package_list' %}" class="btn btn-outline-dark btn-lg">
                            View All Packages
                        </a>
                    </div>

                    <p class="small text-muted mt-3 mb-0">
                        Payment options such as confirmation fee, service charge, and priority add-ons can be handled in the next step.
                    </p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- FAQ -->
<section class="py-5 bg-white">
    <div class="container">
        <div class="section-heading text-center mb-5">
            <span class="section-mini-title">Need Clarity?</span>
            <h2 class="fw-bold">Common Questions About This Package</h2>
        </div>

        <div class="accordion custom-accordion" id="packageFaqAccordion">
            <div class="accordion-item">
                <h2 class="accordion-header" id="detailFaqOne">
                    <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#detailCollapseOne">
                        Is this a guaranteed fixed living cost?
                    </button>
                </h2>
                <div id="detailCollapseOne" class="accordion-collapse collapse show" data-bs-parent="#packageFaqAccordion">
                    <div class="accordion-body">
                        No. It is a practical estimate to help you understand the monthly lifestyle budget, likely upfront charges, and rental-related planning costs. Actual rental and deposit amounts can vary depending on the property you select.
                    </div>
                </div>
            </div>

            <div class="accordion-item">
                <h2 class="accordion-header" id="detailFaqTwo">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#detailCollapseTwo">
                        Can I customize the arrangement after consultation?
                    </button>
                </h2>
                <div id="detailCollapseTwo" class="accordion-collapse collapse" data-bs-parent="#packageFaqAccordion">
                    <div class="accordion-body">
                        Yes. After consultation, your preferred location, housing needs, support preferences, and lifestyle expectations can be discussed in more detail.
                    </div>
                </div>
            </div>

            <div class="accordion-item">
                <h2 class="accordion-header" id="detailFaqThree">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#detailCollapseThree">
                        What happens after I choose this package?
                    </button>
                </h2>
                <div id="detailCollapseThree" class="accordion-collapse collapse" data-bs-parent="#packageFaqAccordion">
                    <div class="accordion-body">
                        Your selected package becomes your current package preference in our system. After that, you can proceed with consultation, confirmation, payment options, and more detailed pre-arrival preparation.
                    </div>
                </div>
            </div>

            <div class="accordion-item">
                <h2 class="accordion-header" id="detailFaqFour">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#detailCollapseFour">
                        Is the confirmation fee included in the service charge?
                    </button>
                </h2>
                <div id="detailCollapseFour" class="accordion-collapse collapse" data-bs-parent="#packageFaqAccordion">
                    <div class="accordion-body">
                        No. The confirmation fee is separate. It helps identify serious clients and unlock more focused access, permissions, and pre-arrival attention. The one-time service charge is for ongoing facilitation responsibility during your stay.
                    </div>
                </div>
            </div>

            <div class="accordion-item">
                <h2 class="accordion-header" id="detailFaqFive">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#detailCollapseFive">
                        Is the rental deposit fixed?
                    </button>
                </h2>
                <div id="detailCollapseFive" class="accordion-collapse collapse" data-bs-parent="#packageFaqAccordion">
                    <div class="accordion-body">
                        No. The rental deposit shown here is only an estimate based on the expected rent level of this package. The actual deposit may be different depending on the property selected and landlord terms.
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

{% endblock %}