{% extends 'hosting_app/base_hosting.html' %}
{% load static %}

{% block title %}Become a Hosting Partner | Host in Sri Lanka{% endblock %}

{% block extra_css %}
<style>
    .hosting-signup-page {
        min-height: 88vh;
        background:
            radial-gradient(circle at top left, rgba(255, 193, 7, 0.14), transparent 32%),
            radial-gradient(circle at bottom right, rgba(179, 67, 67, 0.12), transparent 34%),
            linear-gradient(135deg, #fffaf3 0%, #ffffff 48%, #fff5eb 100%);
        padding: 70px 0;
    }

    .hosting-signup-hero {
        position: relative;
        overflow: hidden;
        border-radius: 36px;
        background:
            linear-gradient(145deg, rgba(38, 24, 19, 0.96), rgba(118, 51, 40, 0.92));
        color: #fff;
        padding: 46px 42px;
        box-shadow: 0 28px 70px rgba(40, 20, 14, 0.22);
        min-height: 100%;
    }

    .hosting-signup-hero::before {
        content: "";
        position: absolute;
        width: 320px;
        height: 320px;
        border-radius: 50%;
        right: -120px;
        top: -120px;
        background: rgba(255, 193, 7, 0.18);
    }

    .hosting-signup-hero::after {
        content: "";
        position: absolute;
        width: 260px;
        height: 260px;
        border-radius: 50%;
        left: -100px;
        bottom: -120px;
        background: rgba(255, 255, 255, 0.08);
    }

    .hosting-signup-hero-content {
        position: relative;
        z-index: 2;
    }

    .hosting-mini-label {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 9px 16px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.18);
        font-size: 0.82rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        margin-bottom: 22px;
    }

    .hosting-signup-title {
        font-size: clamp(2.2rem, 4vw, 3.55rem);
        line-height: 1.08;
        font-weight: 800;
        margin-bottom: 18px;
    }

    .hosting-signup-copy {
        color: rgba(255, 255, 255, 0.82);
        font-size: 1.05rem;
        line-height: 1.75;
        margin-bottom: 28px;
    }

    .hosting-benefit-card {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        padding: 16px 18px;
        border-radius: 22px;
        background: rgba(255, 255, 255, 0.10);
        border: 1px solid rgba(255, 255, 255, 0.12);
        margin-bottom: 14px;
    }

    .hosting-benefit-icon {
        width: 42px;
        height: 42px;
        flex: 0 0 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 14px;
        background: rgba(255, 193, 7, 0.18);
        color: #ffd65c;
        font-size: 1.15rem;
    }

    .hosting-benefit-card h6 {
        margin-bottom: 4px;
        font-weight: 700;
    }

    .hosting-benefit-card p {
        margin-bottom: 0;
        font-size: 0.92rem;
        color: rgba(255, 255, 255, 0.72);
        line-height: 1.55;
    }

    .hosting-signup-form-card {
        background: #fff;
        border-radius: 36px;
        padding: 42px 38px;
        box-shadow: 0 28px 70px rgba(33, 24, 19, 0.12);
        border: 1px solid rgba(124, 74, 50, 0.08);
    }

    .hosting-form-title {
        font-size: 2rem;
        font-weight: 800;
        color: #2c1c18;
        margin-bottom: 8px;
    }

    .hosting-form-subtitle {
        color: #786660;
        margin-bottom: 28px;
        line-height: 1.65;
    }

    .hosting-signup-form-card label {
        font-weight: 700;
        color: #49322c;
        margin-bottom: 8px;
    }

    .hosting-signup-form-card .form-control {
        border-radius: 16px;
        min-height: 52px;
        border: 1px solid #e8ddd7;
        padding: 13px 16px;
        box-shadow: none;
    }

    .hosting-signup-form-card textarea.form-control {
        min-height: 120px;
    }

    .hosting-signup-form-card .form-control:focus {
        border-color: #c28a36;
        box-shadow: 0 0 0 0.22rem rgba(194, 138, 54, 0.14);
    }

    .hosting-help-text {
        color: #8b7770;
        font-size: 0.88rem;
        margin-top: 6px;
    }

    .hosting-error-text {
        color: #b42318;
        font-size: 0.88rem;
        margin-top: 7px;
    }

    .hosting-submit-btn {
        border-radius: 18px;
        min-height: 56px;
        font-weight: 800;
        font-size: 1rem;
        background: linear-gradient(135deg, #f4b41b, #d88918);
        color: #24160f;
        border: none;
        box-shadow: 0 16px 30px rgba(216, 137, 24, 0.22);
    }

    .hosting-submit-btn:hover {
        transform: translateY(-1px);
        color: #24160f;
        background: linear-gradient(135deg, #ffc439, #dd931e);
    }

    .hosting-login-hint {
        text-align: center;
        color: #71605a;
        margin-top: 22px;
    }

    .hosting-login-hint a {
        color: #9a5d19;
        font-weight: 700;
        text-decoration: none;
    }

    .hosting-login-hint a:hover {
        text-decoration: underline;
    }

    .hosting-soft-note {
        background: #fff7ea;
        border: 1px solid #f1dfbf;
        border-radius: 20px;
        padding: 16px 18px;
        color: #75511c;
        font-size: 0.92rem;
        line-height: 1.6;
        margin-bottom: 24px;
    }

    @media (max-width: 991.98px) {
        .hosting-signup-page {
            padding: 45px 0;
        }

        .hosting-signup-hero {
            padding: 34px 26px;
        }

        .hosting-signup-form-card {
            padding: 34px 24px;
        }
    }
</style>
{% endblock %}

{% block content %}
<section class="hosting-signup-page">
    <div class="container">
        <div class="row g-4 align-items-stretch">

            <!-- LEFT INTRO -->
            <div class="col-lg-6">
                <div class="hosting-signup-hero">
                    <div class="hosting-signup-hero-content">

                        <span class="hosting-mini-label">
                            <i class="bi bi-stars"></i>
                            Hosting Partner Program
                        </span>

                        <h1 class="hosting-signup-title">
                            Turn your venue into a place guests remember forever.
                        </h1>

                        <p class="hosting-signup-copy">
                            Join <strong>Host in Sri Lanka</strong> and present your restaurant,
                            hotel, villa, rooftop, beachfront venue, garden, resort, or celebration space
                            to guests seeking romantic dates, proposals, anniversaries, birthdays,
                            honeymoon moments, and other unforgettable experiences.
                        </p>

                        <div class="hosting-benefit-card">
                            <span class="hosting-benefit-icon">
                                <i class="bi bi-building-heart"></i>
                            </span>
                            <div>
                                <h6>Showcase your venue beautifully</h6>
                                <p>
                                    Create a Hosting Partner profile, later add your venues,
                                    packages, meals, and celebration services.
                                </p>
                            </div>
                        </div>

                        <div class="hosting-benefit-card">
                            <span class="hosting-benefit-icon">
                                <i class="bi bi-globe2"></i>
                            </span>
                            <div>
                                <h6>Reach international guests</h6>
                                <p>
                                    Your approved hosting listings can be connected with the wider
                                    Live in Sri Lanka and Date in Sri Lanka ecosystem.
                                </p>
                            </div>
                        </div>

                        <div class="hosting-benefit-card">
                            <span class="hosting-benefit-icon">
                                <i class="bi bi-handshake-fill"></i>
                            </span>
                            <div>
                                <h6>Ensolanka helps coordinate</h6>
                                <p>
                                    We manage the booking request flow, coordinate with you,
                                    and support finalized guest arrangements.
                                </p>
                            </div>
                        </div>

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

            <!-- RIGHT FORM -->
            <div class="col-lg-6">
                <div class="hosting-signup-form-card">

                    <h2 class="hosting-form-title">
                        Create Hosting Partner Account
                    </h2>

                    <p class="hosting-form-subtitle">
                        Start by creating your partner profile. You can add venues, event packages,
                        meal plans, and add-on services after entering your dashboard.
                    </p>

                    <div class="hosting-soft-note">
                        <i class="bi bi-info-circle-fill me-2"></i>
                        Your account can be created immediately. Public host listings and submitted venue content
                        may be reviewed before being shown to guests.
                    </div>

                    <form method="post" enctype="multipart/form-data" novalidate>
                        {% csrf_token %}

                        {% if form.non_field_errors %}
                            <div class="alert alert-danger rounded-4">
                                {{ form.non_field_errors }}
                            </div>
                        {% endif %}

                        <div class="row g-3">

                            <div class="col-md-12">
                                <label for="{{ form.business_name.id_for_label }}">
                                    Business Name
                                </label>
                                {{ form.business_name }}
                                {% if form.business_name.errors %}
                                    <div class="hosting-error-text">{{ form.business_name.errors|striptags }}</div>
                                {% endif %}
                            </div>

                            <div class="col-md-12">
                                <label for="{{ form.contact_person_name.id_for_label }}">
                                    Contact Person Name
                                </label>
                                {{ form.contact_person_name }}
                                {% if form.contact_person_name.errors %}
                                    <div class="hosting-error-text">{{ form.contact_person_name.errors|striptags }}</div>
                                {% endif %}
                            </div>

                            <div class="col-md-12">
                                <label for="{{ form.email.id_for_label }}">
                                    Email Address
                                </label>
                                {{ form.email }}
                                {% if form.email.errors %}
                                    <div class="hosting-error-text">{{ form.email.errors|striptags }}</div>
                                {% endif %}
                            </div>

                            <div class="col-md-6">
                                <label for="{{ form.phone_number.id_for_label }}">
                                    Phone Number
                                </label>
                                {{ form.phone_number }}
                                {% if form.phone_number.errors %}
                                    <div class="hosting-error-text">{{ form.phone_number.errors|striptags }}</div>
                                {% endif %}
                            </div>

                            <div class="col-md-6">
                                <label for="{{ form.whatsapp_number.id_for_label }}">
                                    WhatsApp Number
                                </label>
                                {{ form.whatsapp_number }}
                                {% if form.whatsapp_number.errors %}
                                    <div class="hosting-error-text">{{ form.whatsapp_number.errors|striptags }}</div>
                                {% endif %}
                            </div>

                            <div class="col-md-12">
                                <label for="{{ form.profile_image.id_for_label }}">
                                    Profile Image
                                </label>
                                {{ form.profile_image }}

                                <div class="hosting-help-text">
                                    Optional. Upload a professional image or logo for your Hosting Partner profile.
                                </div>

                                {% if form.profile_image.errors %}
                                    <div class="hosting-error-text">{{ form.profile_image.errors|striptags }}</div>
                                {% endif %}
                            </div>

                            <div class="col-md-12">
                                <label for="{{ form.short_introduction.id_for_label }}">
                                    Short Introduction
                                </label>
                                {{ form.short_introduction }}

                                <div class="hosting-help-text">
                                    Briefly introduce your business, venue style, or hosting experience.
                                </div>

                                {% if form.short_introduction.errors %}
                                    <div class="hosting-error-text">{{ form.short_introduction.errors|striptags }}</div>
                                {% endif %}
                            </div>

                        </div>

                        <div class="d-grid mt-4">
                            <button type="submit" class="btn hosting-submit-btn">
                                <i class="bi bi-person-plus-fill me-2"></i>
                                Create Hosting Partner Account
                            </button>
                        </div>

                        <p class="hosting-login-hint mb-0">
                            Already registered?
                            <a href="{% url 'hosting_app:host_login' %}">
                                Sign in as a Hosting Partner
                            </a>
                        </p>

                    </form>

                </div>
            </div>

        </div>
    </div>
</section>
{% endblock %}