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

{% block content %}

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

    /* =========================
       HERO
       ========================= */
    .consultation-hero {
        position: relative;
        min-height: 100vh;
        padding: 6rem 0;
        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 34%),
            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/sri_lanka_living_hero.webp' %}") center/cover no-repeat;
        color: #fff;
        overflow: hidden;
    }

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

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

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

    .consultation-hero h1 {
        color: #fff;
        font-size: clamp(2.45rem, 4.5vw, 4.4rem);
        font-weight: 900;
        letter-spacing: -0.045em;
        line-height: 1.05;
    }

    .consultation-hero .lead {
        color: rgba(255, 255, 255, 0.88) !important;
        font-size: 1.12rem;
        line-height: 1.85;
        max-width: 650px;
    }

    .consultation-hero .section-mini-title {
        display: inline-flex;
        align-items: center;
        gap: .45rem;
        padding: .45rem .9rem;
        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);
    }

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

    .consultation-info-list {
        display: grid;
        gap: .9rem;
        margin-top: 1.5rem;
    }

    .consultation-info-item {
        display: flex;
        align-items: center;
        gap: .8rem;
        padding: .9rem 1rem;
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.20);
        backdrop-filter: blur(8px);
        color: rgba(255, 255, 255, 0.94);
        font-weight: 650;
    }

    .consultation-info-item i {
        color: #ffd36b;
        font-size: 1.15rem;
        flex: 0 0 auto;
    }

    .consultation-note-box {
        display: flex;
        gap: .85rem;
        padding: 1rem 1.1rem;
        border-radius: 20px;
        background: rgba(255, 251, 235, 0.13);
        border: 1px solid rgba(255, 193, 7, 0.28);
        border-left: 4px solid #ffc107;
        color: rgba(255, 255, 255, 0.92);
        line-height: 1.65;
        backdrop-filter: blur(8px);
    }

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

    /* =========================
       CONSULTATION FORM
       ========================= */
    .consultation-form-card {
        border-radius: 34px;
        overflow: hidden;
        background: rgba(255, 255, 255, 0.97);
        border: 1px solid rgba(255, 255, 255, 0.38);
        box-shadow: 0 35px 90px rgba(0, 0, 0, 0.30);
        backdrop-filter: blur(14px);
    }

    .consultation-form-header {
        padding: 2rem 2rem 1.3rem;
        background:
            radial-gradient(circle at top right, rgba(255, 193, 7, 0.12), transparent 34%),
            linear-gradient(135deg, #ffffff 0%, #f5f9ff 100%);
        border-bottom: 1px solid rgba(13, 110, 253, 0.10);
    }

    .consultation-form-header h3 {
        color: #102033;
        letter-spacing: -0.025em;
        font-weight: 900;
    }

    .consultation-form-header p {
        color: #64748b !important;
        line-height: 1.7;
    }

    .consultation-form-body {
        padding: 2rem;
    }

    .consultation-form-body .form-label {
        color: #102033;
        font-weight: 750;
        font-size: .92rem;
        margin-bottom: .45rem;
    }

    .consultation-form-body input,
    .consultation-form-body select,
    .consultation-form-body textarea {
        border-radius: 16px !important;
        border: 1px solid #cbd5e1 !important;
        padding: .78rem .95rem !important;
        color: #102033 !important;
        background-color: #fff !important;
        box-shadow: none !important;
    }

    .consultation-form-body textarea {
        min-height: 145px;
    }

    .consultation-form-body input:focus,
    .consultation-form-body select:focus,
    .consultation-form-body textarea:focus {
        border-color: #0d6efd !important;
        box-shadow: 0 0 0 .22rem rgba(13, 110, 253, 0.12) !important;
    }

    .consultation-form-footer {
        margin-top: 1.6rem;
        padding-top: 1.5rem;
        border-top: 1px solid rgba(13, 110, 253, 0.10);
    }

    .consultation-form-footer .btn-dark {
        background: linear-gradient(135deg, #07131c, #0d6efd);
        border: none;
        border-radius: 999px;
        padding: .9rem 1.2rem;
        font-weight: 850;
        box-shadow: 0 18px 36px rgba(13, 110, 253, 0.22);
        transition: all .22s ease;
    }

    .consultation-form-footer .btn-dark:hover {
        background: linear-gradient(135deg, #07131c, #0f766e);
        transform: translateY(-2px);
        box-shadow: 0 24px 44px rgba(15, 118, 110, 0.26);
    }

    .consultation-form-footer .text-muted {
        color: #64748b !important;
    }

    /* =========================
       SHARED SECTION LOOK
       ========================= */
    .consultation-white-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;
    }

    .consultation-soft-section {
        position: relative;
        background:
            radial-gradient(circle at top left, rgba(255, 193, 7, 0.06), transparent 28%),
            radial-gradient(circle at bottom right, rgba(13, 110, 253, 0.08), transparent 32%),
            #f5f9ff;
    }

    .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;
    }

    /* =========================
       FEATURE CARDS
       ========================= */
    .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.5rem;
        transition: all .25s ease;
    }

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

    .feature-card .icon-wrap {
        width: 62px;
        height: 62px;
        border-radius: 22px;
        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.7rem;
        margin-bottom: 1rem;
    }

    .feature-card h5 {
        color: #102033;
        font-weight: 850;
        margin-bottom: .65rem;
    }

    .feature-card p {
        color: #64748b;
        line-height: 1.7;
    }

    /* =========================
       STEP CARDS
       ========================= */
    .step-card {
        border-radius: 30px;
        border: 1px solid rgba(13, 110, 253, 0.10);
        background: rgba(255, 255, 255, 0.97);
        box-shadow: 0 22px 50px rgba(15, 23, 42, 0.08);
        padding: 1.7rem 1.4rem;
        transition: all .25s ease;
    }

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

    .step-number {
        width: 68px;
        height: 68px;
        border-radius: 24px;
        background: linear-gradient(135deg, #0f766e, #0d6efd);
        color: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-weight: 900;
        font-size: 1.15rem;
        margin-bottom: 1rem;
        box-shadow: 0 18px 35px rgba(13, 110, 253, 0.20);
    }

    .step-card h5 {
        color: #102033;
    }

    .step-card 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.2rem 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: 860px;
        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: 991.98px) {
        .consultation-hero {
            min-height: auto;
            padding: 4.5rem 0;
        }

        .consultation-form-header,
        .consultation-form-body {
            padding: 1.5rem;
        }

        .consultation-form-card {
            border-radius: 28px;
        }
    }

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

        .consultation-info-item,
        .consultation-note-box,
        .feature-card,
        .step-card,
        .final-cta-box {
            border-radius: 22px;
        }

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

<div class="consultation-page">

    <!-- HERO -->
    <section class="consultation-hero">
        <div class="container">
            <div class="row align-items-center g-5">
                <div class="col-lg-6">
                    <span class="section-mini-title">Consultation Step</span>
                    <h1 class="fw-bold mb-3">Book a Consultation</h1>
                    <p class="lead text-muted mb-4">
                        Request a consultation so we can discuss your preferred package, location ideas,
                        budget level, and the practical next steps for your stay in Sri Lanka.
                    </p>

                    <div class="consultation-info-list">
                        <div class="consultation-info-item">
                            <i class="bi bi-check-circle-fill"></i>
                            <span>Discuss the most suitable lifestyle package</span>
                        </div>
                        <div class="consultation-info-item">
                            <i class="bi bi-check-circle-fill"></i>
                            <span>Talk about location, housing, and support needs</span>
                        </div>
                        <div class="consultation-info-item">
                            <i class="bi bi-check-circle-fill"></i>
                            <span>Clarify your timeline and expectations</span>
                        </div>
                        <div class="consultation-info-item">
                            <i class="bi bi-check-circle-fill"></i>
                            <span>Move toward the confirmation stage if suitable</span>
                        </div>
                    </div>

                    <div class="consultation-note-box mt-4">
                        <i class="bi bi-info-circle-fill"></i>
                        <div>
                            This request does not complete the arrangement by itself. After the consultation, the next step can be discussed, including the later $100 confirmation process.
                        </div>
                    </div>
                </div>

                <div class="col-lg-6">
                    <div class="consultation-form-card shadow-lg">
                        <div class="consultation-form-header">
                            <h3 class="fw-bold mb-2">Request Your Consultation</h3>
                            <p class="text-muted mb-0">
                                Fill in the details below so we can understand how you would like to be contacted.
                            </p>
                        </div>

                        <form method="post" class="consultation-form-body">
                            {% csrf_token %}

                            <div class="row g-3">
                                <div class="col-md-12">
                                    <label for="{{ form.lead.id_for_label }}" class="form-label">Registered Guest Profile</label>
                                    {{ form.lead }}
                                </div>

                                <div class="col-md-12">
                                    <label for="{{ form.package.id_for_label }}" class="form-label">Preferred Package</label>
                                    {{ form.package }}
                                </div>

                                <div class="col-md-6">
                                    <label for="{{ form.preferred_contact_method.id_for_label }}" class="form-label">Preferred Contact Method</label>
                                    {{ form.preferred_contact_method }}
                                </div>

                                <div class="col-md-6">
                                    <label for="{{ form.preferred_date.id_for_label }}" class="form-label">Preferred Date</label>
                                    {{ form.preferred_date }}
                                </div>

                                <div class="col-md-12">
                                    <label for="{{ form.notes.id_for_label }}" class="form-label">Notes / Special Request</label>
                                    {{ form.notes }}
                                </div>
                            </div>

                            <div class="consultation-form-footer">
                                <button type="submit" class="btn btn-dark btn-lg w-100">
                                    <i class="bi bi-calendar2-check-fill me-2"></i>
                                    Submit Consultation Request
                                </button>
                                <p class="small text-muted text-center mt-3 mb-0">
                                    After review, we can contact you and discuss the next practical step.
                                </p>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- WHY CONSULTATION -->
    <section class="py-5 consultation-white-section">
        <div class="container">
            <div class="section-heading text-center mb-5">
                <span class="section-mini-title">Why Book a Consultation</span>
                <h2 class="fw-bold">A Better Way to Plan Your Sri Lanka Stay</h2>
                <p class="text-muted">
                    This step helps turn a general interest into a practical plan based on your budget and expectations.
                </p>
            </div>

            <div class="row g-4">
                <div class="col-md-6 col-lg-3">
                    <div class="feature-card h-100">
                        <div class="icon-wrap"><i class="bi bi-chat-square-dots-fill"></i></div>
                        <h5>Personal Discussion</h5>
                        <p>We can understand your plans more clearly than with a signup form alone.</p>
                    </div>
                </div>

                <div class="col-md-6 col-lg-3">
                    <div class="feature-card h-100">
                        <div class="icon-wrap"><i class="bi bi-geo-alt-fill"></i></div>
                        <h5>Location Matching</h5>
                        <p>Discuss the type of area that fits your lifestyle, comfort, and budget.</p>
                    </div>
                </div>

                <div class="col-md-6 col-lg-3">
                    <div class="feature-card h-100">
                        <div class="icon-wrap"><i class="bi bi-house-check-fill"></i></div>
                        <h5>Housing Direction</h5>
                        <p>Talk through the kind of rental or living arrangement that may suit you.</p>
                    </div>
                </div>

                <div class="col-md-6 col-lg-3">
                    <div class="feature-card h-100">
                        <div class="icon-wrap"><i class="bi bi-arrow-right-circle-fill"></i></div>
                        <h5>Clear Next Step</h5>
                        <p>Move forward toward the confirmation stage only when the arrangement is suitable.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- PROCESS -->
    <section class="py-5 consultation-soft-section">
        <div class="container">
            <div class="section-heading text-center mb-5">
                <span class="section-mini-title">Simple Process</span>
                <h2 class="fw-bold">What Happens After You Request</h2>
            </div>

            <div class="row g-4">
                <div class="col-md-4">
                    <div class="step-card text-center h-100">
                        <div class="step-number">01</div>
                        <h5 class="fw-bold">Submit Request</h5>
                        <p>Choose your registered guest profile, package interest, and preferred contact method.</p>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="step-card text-center h-100">
                        <div class="step-number">02</div>
                        <h5 class="fw-bold">We Review and Contact</h5>
                        <p>We review your request and reach out using the preferred method you selected.</p>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="step-card text-center h-100">
                        <div class="step-number">03</div>
                        <h5 class="fw-bold">Plan the Next Step</h5>
                        <p>If suitable, we discuss arrangements and the next confirmation step in a practical way.</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">Not Ready to Book Yet?</h2>
                <p class="lead mb-4">
                    You can explore visa requirements, review packages, or contact us before submitting a consultation request.
                </p>

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

                    <a href="{% url 'expat_life:package_list' %}" 
                       class="btn btn-warning btn-lg px-4">
                        View Packages
                    </a>

                    <a href="{% url 'expat_life:contact_page' %}" 
                       class="btn btn-light btn-lg px-4">
                        Contact Us
                    </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">
                        🌴 Digital Nomad Visa Guide
                    </a>

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

</div>

{% endblock %}