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

{% block title %}Host in Sri Lanka | Be the place couples choose{% endblock %}

{% block extra_css %}
<style>
    /* =========================================================
       HOSTING HOME PAGE
    ========================================================= */

    .hosting-home-page {
        background: #fffaf5;
        color: #2f211d;
    }

    .hosting-section-mini-title {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 15px;
        border-radius: 999px;
        background: rgba(184, 111, 31, 0.12);
        border: 1px solid rgba(184, 111, 31, 0.18);
        color: #975816;
        font-weight: 800;
        font-size: 0.82rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 16px;
    }

    .hosting-section-title {
        font-size: clamp(2rem, 4vw, 3.2rem);
        line-height: 1.12;
        font-weight: 850;
        color: #2c1b17;
        margin-bottom: 18px;
    }

    .hosting-section-copy {
        font-size: 1.05rem;
        line-height: 1.8;
        color: #78625a;
        max-width: 860px;
    }

    .hosting-home-dark-title {
        color: #fff;
    }

    .hosting-home-dark-copy {
        color: rgba(255, 255, 255, 0.80);
    }

    /* =========================================================
       HERO
    ========================================================= */

    .hosting-hero {
        position: relative;
        min-height: 88vh;
        display: flex;
        align-items: center;
        overflow: hidden;
        background:
            linear-gradient(
                100deg,
                rgba(27, 16, 15, 0.94) 0%,
                rgba(54, 27, 24, 0.88) 42%,
                rgba(89, 44, 30, 0.63) 72%,
                rgba(89, 44, 30, 0.48) 100%
            ),
            url("{% static 'expat_life/images/hosting_hero.webp' %}") center center / cover no-repeat;
    }

    .hosting-hero::before {
        content: "";
        position: absolute;
        width: 560px;
        height: 560px;
        border-radius: 50%;
        right: -180px;
        top: -220px;
        background: radial-gradient(circle, rgba(255, 193, 7, 0.36), rgba(255, 193, 7, 0));
        z-index: 1;
    }

    .hosting-hero::after {
        content: "";
        position: absolute;
        width: 560px;
        height: 560px;
        border-radius: 50%;
        left: -240px;
        bottom: -310px;
        background: radial-gradient(circle, rgba(202, 95, 58, 0.32), rgba(202, 95, 58, 0));
        z-index: 1;
    }

    .hosting-hero-inner {
        position: relative;
        z-index: 2;
        padding: 110px 0 100px;
    }

    .hosting-hero-badge {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        padding: 10px 18px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.18);
        backdrop-filter: blur(8px);
        color: #fff;
        font-weight: 800;
        font-size: 0.84rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 24px;
    }

    .hosting-hero-title {
        color: #fff;
        font-weight: 900;
        line-height: 1.04;
        font-size: clamp(2.8rem, 6vw, 5.35rem);
        max-width: 920px;
        margin-bottom: 22px;
        letter-spacing: -0.04em;
    }

    .hosting-hero-title span {
        color: #ffd36b;
    }

    .hosting-hero-subtitle {
        color: rgba(255, 255, 255, 0.87);
        font-size: clamp(1.05rem, 2vw, 1.35rem);
        line-height: 1.78;
        max-width: 830px;
        margin-bottom: 34px;
    }

    .hosting-hero-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
        margin-bottom: 40px;
    }

    .hosting-btn-gold {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 58px;
        border-radius: 18px;
        padding: 14px 28px;
        font-weight: 850;
        background: linear-gradient(135deg, #ffc83f, #df9219);
        border: none;
        color: #26160d;
        text-decoration: none;
        box-shadow: 0 18px 34px rgba(223, 146, 25, 0.32);
        transition: all 0.22s ease;
    }

    .hosting-btn-gold:hover {
        transform: translateY(-2px);
        color: #26160d;
        background: linear-gradient(135deg, #ffd45f, #ec9f21);
    }

    .hosting-btn-glass {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 58px;
        border-radius: 18px;
        padding: 14px 28px;
        font-weight: 850;
        border: 1px solid rgba(255, 255, 255, 0.34);
        color: #fff;
        text-decoration: none;
        background: rgba(255, 255, 255, 0.10);
        backdrop-filter: blur(9px);
        transition: all 0.22s ease;
    }

    .hosting-btn-glass:hover {
        color: #fff;
        background: rgba(255, 255, 255, 0.17);
        transform: translateY(-2px);
    }

    .hosting-hero-proof-wrap {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 16px;
        max-width: 1060px;
    }

    .hosting-hero-proof {
        border-radius: 24px;
        padding: 18px 18px;
        background: rgba(255, 255, 255, 0.11);
        border: 1px solid rgba(255, 255, 255, 0.14);
        backdrop-filter: blur(10px);
    }

    .hosting-hero-proof strong {
        display: block;
        color: #fff;
        font-weight: 850;
        font-size: 1.05rem;
        margin-bottom: 5px;
    }

    .hosting-hero-proof span {
        color: rgba(255, 255, 255, 0.72);
        font-size: 0.91rem;
        line-height: 1.5;
    }

    /* =========================================================
       OPPORTUNITY INTRO
    ========================================================= */

    .hosting-opportunity-section {
        padding: 92px 0;
        background:
            radial-gradient(circle at top left, rgba(255, 193, 7, 0.12), transparent 28%),
            linear-gradient(135deg, #fffaf5 0%, #ffffff 58%, #fff3e5 100%);
    }

    .hosting-opportunity-card {
        height: 100%;
        padding: 32px 28px;
        border-radius: 32px;
        background: #ffffff;
        border: 1px solid rgba(121, 73, 53, 0.09);
        box-shadow: 0 20px 46px rgba(56, 31, 23, 0.08);
    }

    .hosting-opportunity-icon {
        width: 62px;
        height: 62px;
        border-radius: 21px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #fff1d5, #ffe0ad);
        color: #9f5a13;
        font-size: 1.55rem;
        margin-bottom: 20px;
    }

    .hosting-opportunity-card h3 {
        font-size: 1.34rem;
        font-weight: 850;
        color: #38231d;
        margin-bottom: 12px;
    }

    .hosting-opportunity-card p {
        color: #78645d;
        line-height: 1.72;
        margin-bottom: 0;
    }

    .hosting-vision-panel {
        border-radius: 38px;
        padding: 42px 38px;
        background:
            linear-gradient(145deg, #301919 0%, #743129 68%, #a75f1b 100%);
        color: #fff;
        box-shadow: 0 28px 66px rgba(54, 28, 23, 0.20);
        position: relative;
        overflow: hidden;
        height: 100%;
    }

    .hosting-vision-panel::before {
        content: "";
        position: absolute;
        width: 280px;
        height: 280px;
        border-radius: 50%;
        right: -110px;
        top: -110px;
        background: rgba(255, 211, 107, 0.18);
    }

    .hosting-vision-panel::after {
        content: "";
        position: absolute;
        width: 240px;
        height: 240px;
        border-radius: 50%;
        left: -90px;
        bottom: -120px;
        background: rgba(255, 255, 255, 0.08);
    }

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

    .hosting-vision-panel h3 {
        font-size: clamp(1.8rem, 3vw, 2.45rem);
        line-height: 1.18;
        font-weight: 900;
        margin-bottom: 16px;
    }

    .hosting-vision-panel p {
        color: rgba(255, 255, 255, 0.80);
        line-height: 1.8;
        margin-bottom: 20px;
    }

    .hosting-vision-list {
        display: grid;
        gap: 13px;
        margin-top: 24px;
    }

    .hosting-vision-list-item {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 14px 16px;
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.10);
        border: 1px solid rgba(255, 255, 255, 0.12);
    }

    .hosting-vision-list-item i {
        color: #ffd36b;
        font-size: 1.1rem;
        margin-top: 3px;
    }

    .hosting-vision-list-item span {
        color: rgba(255, 255, 255, 0.86);
        line-height: 1.55;
    }

    /* =========================================================
       EVENT EXPERIENCES SECTION
    ========================================================= */

    .hosting-experiences-section {
        padding: 96px 0;
        background: #ffffff;
    }

    .hosting-experience-card {
        position: relative;
        height: 100%;
        border-radius: 30px;
        background: linear-gradient(145deg, #fffaf4 0%, #ffffff 100%);
        border: 1px solid rgba(124, 74, 50, 0.10);
        padding: 28px 24px;
        overflow: hidden;
        box-shadow: 0 18px 42px rgba(55, 31, 22, 0.07);
        transition: transform 0.24s ease, box-shadow 0.24s ease;
    }

    .hosting-experience-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 24px 54px rgba(55, 31, 22, 0.12);
    }

    .hosting-experience-card::before {
        content: "";
        position: absolute;
        width: 150px;
        height: 150px;
        border-radius: 50%;
        right: -70px;
        top: -70px;
        background: rgba(255, 193, 7, 0.12);
    }

    .hosting-experience-icon {
        position: relative;
        z-index: 2;
        width: 58px;
        height: 58px;
        border-radius: 20px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #fff0d6;
        color: #a75e17;
        font-size: 1.45rem;
        margin-bottom: 18px;
    }

    .hosting-experience-card h3 {
        position: relative;
        z-index: 2;
        font-size: 1.25rem;
        font-weight: 850;
        color: #38231d;
        margin-bottom: 10px;
    }

    .hosting-experience-card p {
        position: relative;
        z-index: 2;
        color: #7b665e;
        line-height: 1.7;
        margin-bottom: 0;
    }

    /* =========================================================
       HOST CATEGORIES
    ========================================================= */

    .hosting-categories-section {
        padding: 96px 0;
        background:
            linear-gradient(135deg, #2a1716 0%, #53251f 48%, #7d431a 100%);
        position: relative;
        overflow: hidden;
    }

    .hosting-categories-section::before {
        content: "";
        position: absolute;
        width: 520px;
        height: 520px;
        border-radius: 50%;
        top: -260px;
        left: -190px;
        background: radial-gradient(circle, rgba(255, 193, 7, 0.18), rgba(255, 193, 7, 0));
    }

    .hosting-categories-section::after {
        content: "";
        position: absolute;
        width: 480px;
        height: 480px;
        border-radius: 50%;
        bottom: -260px;
        right: -170px;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0));
    }

    .hosting-categories-inner {
        position: relative;
        z-index: 2;
    }

    .hosting-category-chip-wrap {
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
        margin-top: 34px;
    }

    .hosting-category-chip {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        padding: 13px 17px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.11);
        border: 1px solid rgba(255, 255, 255, 0.16);
        color: #fff;
        font-weight: 750;
        font-size: 0.94rem;
        backdrop-filter: blur(7px);
    }

    .hosting-category-chip i {
        color: #ffd36b;
    }

    /* =========================================================
       PROCESS SECTION
    ========================================================= */

    .hosting-process-section {
        padding: 96px 0;
        background:
            radial-gradient(circle at right top, rgba(255, 193, 7, 0.11), transparent 25%),
            linear-gradient(135deg, #fffaf4 0%, #ffffff 52%, #fff3e7 100%);
    }

    .hosting-process-card {
        position: relative;
        height: 100%;
        background: #ffffff;
        border-radius: 30px;
        padding: 30px 25px;
        border: 1px solid rgba(124, 74, 50, 0.10);
        box-shadow: 0 18px 44px rgba(54, 29, 21, 0.08);
    }

    .hosting-process-number {
        width: 58px;
        height: 58px;
        border-radius: 21px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #ffc83f, #dd9017);
        color: #27160f;
        font-size: 1.24rem;
        font-weight: 900;
        margin-bottom: 20px;
        box-shadow: 0 14px 28px rgba(221, 144, 23, 0.20);
    }

    .hosting-process-card h3 {
        font-size: 1.25rem;
        font-weight: 850;
        color: #39241e;
        margin-bottom: 10px;
    }

    .hosting-process-card p {
        color: #7a655d;
        line-height: 1.72;
        margin-bottom: 0;
    }

    /* =========================================================
       COMMISSION / BUSINESS MODEL
    ========================================================= */

    .hosting-business-section {
        padding: 96px 0;
        background: #ffffff;
    }

    .hosting-business-highlight {
        border-radius: 38px;
        background:
            radial-gradient(circle at right top, rgba(255, 193, 7, 0.22), transparent 35%),
            linear-gradient(145deg, #2e1817 0%, #6d2e28 64%, #a3601b 100%);
        padding: 48px 42px;
        color: #fff;
        box-shadow: 0 30px 70px rgba(53, 27, 22, 0.22);
        height: 100%;
    }

    .hosting-business-highlight h3 {
        font-weight: 900;
        font-size: clamp(2rem, 3vw, 2.75rem);
        line-height: 1.15;
        margin-bottom: 18px;
    }

    .hosting-business-highlight p {
        color: rgba(255, 255, 255, 0.82);
        line-height: 1.8;
        margin-bottom: 22px;
    }

    .hosting-commission-box {
        display: inline-flex;
        flex-direction: column;
        gap: 4px;
        padding: 22px 24px;
        background: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 26px;
        margin-top: 8px;
    }

    .hosting-commission-box strong {
        color: #ffd36b;
        font-size: 2.35rem;
        line-height: 1;
        font-weight: 950;
    }

    .hosting-commission-box span {
        color: rgba(255, 255, 255, 0.85);
        font-weight: 750;
    }

    .hosting-pricing-card {
        height: 100%;
        background: #fffaf4;
        border: 1px solid #edd9bb;
        border-radius: 34px;
        padding: 36px 32px;
    }

    .hosting-pricing-card h4 {
        color: #3a241e;
        font-weight: 900;
        font-size: 1.55rem;
        margin-bottom: 16px;
    }

    .hosting-pricing-card p {
        color: #79645d;
        line-height: 1.75;
    }

    .hosting-pricing-example {
        margin-top: 24px;
        overflow: hidden;
        border-radius: 24px;
        border: 1px solid #ecd7b8;
        background: #fff;
    }

    .hosting-pricing-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 15px;
        padding: 15px 18px;
        border-bottom: 1px solid #f1e3cf;
        color: #5e4941;
        font-weight: 650;
    }

    .hosting-pricing-row:last-child {
        border-bottom: none;
        background: #fff3df;
        font-weight: 900;
        color: #37231d;
    }

    /* =========================================================
       CONTENT OFFER SECTION
    ========================================================= */

    .hosting-package-section {
        padding: 96px 0;
        background:
            linear-gradient(135deg, #fff7ef 0%, #ffffff 60%, #fff2e4 100%);
    }

    .hosting-package-panel {
        height: 100%;
        background: #fff;
        border-radius: 34px;
        padding: 34px 30px;
        border: 1px solid rgba(124, 74, 50, 0.10);
        box-shadow: 0 20px 46px rgba(56, 31, 23, 0.08);
    }

    .hosting-package-panel h3 {
        font-size: 1.48rem;
        color: #39241e;
        font-weight: 900;
        margin-bottom: 14px;
    }

    .hosting-package-panel p {
        color: #7a655d;
        line-height: 1.72;
        margin-bottom: 20px;
    }

    .hosting-package-list {
        display: grid;
        gap: 13px;
    }

    .hosting-package-item {
        display: flex;
        gap: 12px;
        align-items: flex-start;
        border-radius: 18px;
        padding: 14px 15px;
        background: #fff8ef;
        border: 1px solid #f0dcc2;
    }

    .hosting-package-item i {
        color: #ae671b;
        font-size: 1.08rem;
        margin-top: 2px;
    }

    .hosting-package-item span {
        color: #604b43;
        line-height: 1.55;
        font-weight: 650;
    }

    /* =========================================================
       FINAL CTA
    ========================================================= */

    .hosting-final-cta {
        padding: 100px 0;
        background:
            linear-gradient(100deg, rgba(29, 17, 15, 0.95), rgba(91, 42, 29, 0.88)),
            url("{% static 'hosting_app/images/hosting_hero.webp' %}") center center / cover no-repeat;
        color: #fff;
        position: relative;
        overflow: hidden;
    }

    .hosting-final-cta::before {
        content: "";
        position: absolute;
        width: 540px;
        height: 540px;
        right: -240px;
        bottom: -280px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(255, 193, 7, 0.28), rgba(255, 193, 7, 0));
    }

    .hosting-final-content {
        position: relative;
        z-index: 2;
        text-align: center;
        max-width: 980px;
        margin: 0 auto;
    }

    .hosting-final-content h2 {
        font-size: clamp(2.3rem, 4vw, 4rem);
        font-weight: 950;
        line-height: 1.08;
        margin-bottom: 18px;
    }

    .hosting-final-content p {
        color: rgba(255, 255, 255, 0.84);
        font-size: 1.15rem;
        line-height: 1.8;
        margin-bottom: 34px;
    }

    .hosting-final-actions {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 15px;
    }

    /* =========================================================
       RESPONSIVE
    ========================================================= */

    @media (max-width: 1199.98px) {
        .hosting-hero-proof-wrap {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .hosting-hero-inner {
            padding-left: 28px;
            padding-right: 28px;
        }
    }

    @media (max-width: 991.98px) {
        .hosting-hero {
            min-height: auto;
            background-position: 68% center;
        }

        .hosting-hero-inner {
            padding: 78px 24px 72px;
        }

        .hosting-opportunity-section,
        .hosting-experiences-section,
        .hosting-categories-section,
        .hosting-process-section,
        .hosting-business-section,
        .hosting-package-section,
        .hosting-final-cta {
            padding: 74px 0;
        }

        .hosting-business-highlight {
            padding: 36px 28px;
        }
    }

    @media (max-width: 767.98px) {
        .hosting-hero {
            background-position: 68% center;
        }

        .hosting-hero-inner {
            padding: 62px 18px 58px;
        }

        .hosting-hero-proof-wrap {
            grid-template-columns: 1fr;
        }

        .hosting-hero-actions,
        .hosting-final-actions {
            flex-direction: column;
            align-items: stretch;
        }

        .hosting-btn-gold,
        .hosting-btn-glass {
            width: 100%;
        }

        .hosting-pricing-row {
            flex-direction: column;
            align-items: flex-start;
        }

        .hosting-section-title {
            font-size: 2rem;
        }
    }

    /* =========================================================
    FLOATING MULTILINGUAL INFORMATION CENTER - HORIZONTAL
    Hosting App
    ========================================================= */

    .hosting-floating-language-bar {
        position: fixed;
        top: 128px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1080;

        display: flex;
        align-items: center;
        gap: 0.75rem;

        width: auto;
        max-width: calc(100% - 2rem);

        padding: 0.45rem 0.75rem;
        border-radius: 999px;

        background: rgba(255, 193, 7, 0.14);
        color: #ffd36b;
        border: 1px solid rgba(255, 193, 7, 0.32);
        box-shadow: 0 14px 34px rgba(120, 80, 10, 0.16);
        backdrop-filter: blur(14px);
    }

    .hosting-floating-language-title {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        color: #ffd36b;
        font-size: 0.72rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.045em;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .hosting-floating-language-buttons {
        display: flex;
        align-items: center;
        gap: 0.45rem;
        flex-wrap: nowrap;
    }

    .hosting-floating-language-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        border-radius: 999px;
        line-height: 1;
        transition: all 0.22s ease;
    }

    .hosting-floating-language-btn img {
        width: 128px;
        height: auto;
        display: block;
    }

    .hosting-floating-language-btn:hover {
        transform: translateY(-2px) scale(1.03);
        filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.30));
    }

    @media (max-width: 991.98px) {
        .hosting-floating-language-bar {
            top: 118px;
            padding: 0.4rem 0.6rem;
            gap: 0.55rem;
        }

        .hosting-floating-language-btn img {
            width: 108px;
        }

        .hosting-floating-language-title {
            font-size: 0.65rem;
        }
    }

    @media (max-width: 767.98px) {
        .hosting-floating-language-bar {
            top: 112px;
            max-width: calc(100% - 1rem);
            padding: 0.38rem 0.5rem;
            gap: 0.45rem;
        }

        .hosting-floating-language-title span {
            display: none;
        }

        .hosting-floating-language-btn img {
            width: 88px;
        }
    }

    @media (max-width: 420px) {
        .hosting-floating-language-btn img {
            width: 76px;
        }

        .hosting-floating-language-buttons {
            gap: 0.28rem;
        }
    }
</style>
{% endblock %}

{% block content %}
<!-- =====================================================
     FLOATING MULTILINGUAL INFORMATION CENTER - HORIZONTAL
====================================================== -->
<div class="hosting-floating-language-bar">
    <div class="hosting-floating-language-title">
        <i class="bi bi-translate"></i>
        <span>Info Center</span>
    </div>

    <div class="hosting-floating-language-buttons">
        <a href="{% url 'hosting_app:hosting_partner_information_center' %}?lang=si"
           class="hosting-floating-language-btn"
           aria-label="Open Sinhala Hosting Partner Information Center">
            <img src="{% static 'expat_life/images/sinhala.png' %}"
                 alt="Sinhala">
        </a>

        <a href="{% url 'hosting_app:hosting_partner_information_center' %}?lang=ta"
           class="hosting-floating-language-btn"
           aria-label="Open Tamil Hosting Partner Information Center">
            <img src="{% static 'expat_life/images/tamil.png' %}"
                 alt="Tamil">
        </a>

        <a href="{% url 'hosting_app:hosting_partner_information_center' %}?lang=en"
           class="hosting-floating-language-btn"
           aria-label="Open English Hosting Partner Information Center">
            <img src="{% static 'expat_life/images/english.png' %}"
                 alt="English">
        </a>
    </div>
</div>
<div class="hosting-home-page">

    <!-- =========================================================
         HERO SECTION
    ========================================================= -->
    <section class="hosting-hero">
        <div class="container hosting-hero-inner">

            <span class="hosting-hero-badge">
                <i class="bi bi-stars"></i>
                Hosting Partner Opportunity
            </span>

            <h1 class="hosting-hero-title">
                Let your venue become the place where
                <span>beautiful moments happen.</span>
            </h1>

            <p class="hosting-hero-subtitle">
                <strong>Host in Sri Lanka</strong> connects restaurants, hotels, resorts, villas,
                rooftops, gardens, beachfront venues, and event spaces with international guests
                seeking romantic dates, proposal events, anniversaries, birthdays, honeymoon moments,
                and memorable celebrations during their Sri Lankan journey.
            </p>

            <div class="hosting-hero-actions">

                {% if is_host_user %}
                    <a href="{% url 'hosting_app:host_dashboard' %}" class="hosting-btn-gold">
                        <i class="bi bi-speedometer2 me-2"></i>
                        My Host Dashboard
                    </a>

                    <a href="{% url 'hosting_app:home_hosting' %}" class="hosting-btn-glass">
                        <i class="bi bi-stars me-2"></i>
                        Explore Hosting Opportunity
                    </a>

                {% else %}
                    <a href="{% url 'hosting_app:host_signup' %}" class="hosting-btn-gold">
                        <i class="bi bi-building-heart me-2"></i>
                        Become a Hosting Partner
                    </a>

                    <a href="{% url 'hosting_app:host_login' %}" class="hosting-btn-glass">
                        <i class="bi bi-box-arrow-in-right me-2"></i>
                        Hosting Partner Sign In
                    </a>
                {% endif %}

            </div>

            <div class="hosting-hero-proof-wrap">

                <div class="hosting-hero-proof">
                    <strong>Romantic Events</strong>
                    <span>Dates, proposals, anniversaries, and honeymoon moments.</span>
                </div>

                <div class="hosting-hero-proof">
                    <strong>Celebration Packages</strong>
                    <span>Birthdays, private dinners, and meaningful personal occasions.</span>
                </div>

                <div class="hosting-hero-proof">
                    <strong>Curated Guest Leads</strong>
                    <span>Requests from Ensolanka’s wider travel and lifestyle ecosystem.</span>
                </div>

                <div class="hosting-hero-proof">
                    <strong>Managed Coordination</strong>
                    <span>Ensolanka reviews, confirms, and helps arrange the event flow.</span>
                </div>

            </div>

        </div>
    </section>


    <!-- =========================================================
         BUSINESS OPPORTUNITY INTRO
    ========================================================= -->
    <section class="hosting-opportunity-section">
        <div class="container">

            <div class="row g-5 align-items-stretch">

                <div class="col-lg-7">
                    <span class="hosting-section-mini-title">
                        <i class="bi bi-lightbulb-fill"></i>
                        Why this matters
                    </span>

                    <h2 class="hosting-section-title">
                        Guests are not only looking for places to stay. They are looking for moments to remember.
                    </h2>

                    <p class="hosting-section-copy mb-4">
                        A foreign guest arriving in Sri Lanka may wish to plan a romantic dinner,
                        organize a surprise proposal, celebrate an anniversary, arrange a birthday event,
                        enjoy a honeymoon experience, or create a custom celebration with someone special.
                        Many Sri Lankan venues can offer these experiences beautifully, but they need a
                        clearer channel to reach the right international audience.
                    </p>

                    <p class="hosting-section-copy">
                        <strong>Host in Sri Lanka</strong> creates that channel. Your venue can become part of
                        a curated experience network connected to Ensolanka’s broader
                        <strong>Live in Sri Lanka</strong> and <strong>Date in Sri Lanka</strong> ecosystems.
                    </p>

                    <div class="row g-4 mt-2">

                        <div class="col-md-6">
                            <div class="hosting-opportunity-card">
                                <div class="hosting-opportunity-icon">
                                    <i class="bi bi-heart-fill"></i>
                                </div>
                                <h3>Emotion-led bookings</h3>
                                <p>
                                    Move beyond ordinary table or venue bookings by offering complete experiences
                                    around romance, surprise, and celebration.
                                </p>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="hosting-opportunity-card">
                                <div class="hosting-opportunity-icon">
                                    <i class="bi bi-globe-central-south-asia"></i>
                                </div>
                                <h3>International exposure</h3>
                                <p>
                                    Present your place to foreign guests already exploring Sri Lanka through
                                    Ensolanka’s lifestyle and relationship-focused portals.
                                </p>
                            </div>
                        </div>

                    </div>
                </div>

                <div class="col-lg-5">
                    <div class="hosting-vision-panel">
                        <div class="hosting-vision-content">

                            <span class="hosting-section-mini-title" style="background: rgba(255,255,255,0.12); color: #ffd36b; border-color: rgba(255,255,255,0.16);">
                                <i class="bi bi-stars"></i>
                                Our vision
                            </span>

                            <h3>
                                Turn Sri Lankan spaces into unforgettable guest stories.
                            </h3>

                            <p>
                                A rooftop can become a proposal location. A garden can host an anniversary dinner.
                                A beachfront venue can become part of a honeymoon memory. A restaurant can create
                                more value by offering thoughtful event experiences instead of only serving meals.
                            </p>

                            <div class="hosting-vision-list">

                                <div class="hosting-vision-list-item">
                                    <i class="bi bi-check-circle-fill"></i>
                                    <span>Curated hosts, packages, meal options, and add-ons.</span>
                                </div>

                                <div class="hosting-vision-list-item">
                                    <i class="bi bi-check-circle-fill"></i>
                                    <span>Structured guest request flow instead of random inquiries.</span>
                                </div>

                                <div class="hosting-vision-list-item">
                                    <i class="bi bi-check-circle-fill"></i>
                                    <span>Event coordination support from Ensolanka.</span>
                                </div>

                                <div class="hosting-vision-list-item">
                                    <i class="bi bi-check-circle-fill"></i>
                                    <span>Commercial opportunities built around high-value experiences.</span>
                                </div>

                            </div>

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

            </div>

        </div>
    </section>


    <!-- =========================================================
         EVENT EXPERIENCES
    ========================================================= -->
    <section class="hosting-experiences-section">
        <div class="container">

            <div class="text-center mb-5">
                <span class="hosting-section-mini-title">
                    <i class="bi bi-gift-fill"></i>
                    Experience categories
                </span>

                <h2 class="hosting-section-title mx-auto">
                    What kinds of guest experiences can you host?
                </h2>

                <p class="hosting-section-copy mx-auto">
                    Hosting Partners can create packages for meaningful occasions and define their own
                    venue style, service scope, meal options, time duration, and additional experience upgrades.
                </p>
            </div>

            <div class="row g-4">

                <div class="col-md-6 col-xl-4">
                    <div class="hosting-experience-card">
                        <div class="hosting-experience-icon">
                            <i class="bi bi-heart-pulse-fill"></i>
                        </div>
                        <h3>Romantic Date Experiences</h3>
                        <p>
                            Private couple dinners, sunset tables, rooftop settings, beach dinners,
                            garden seating, and soft celebration arrangements.
                        </p>
                    </div>
                </div>

                <div class="col-md-6 col-xl-4">
                    <div class="hosting-experience-card">
                        <div class="hosting-experience-icon">
                            <i class="bi bi-gem"></i>
                        </div>
                        <h3>Proposal Events</h3>
                        <p>
                            Decorated proposal spots, floral arches, private dining,
                            message boards, photographers, musicians, and custom surprise setups.
                        </p>
                    </div>
                </div>

                <div class="col-md-6 col-xl-4">
                    <div class="hosting-experience-card">
                        <div class="hosting-experience-icon">
                            <i class="bi bi-balloon-heart-fill"></i>
                        </div>
                        <h3>Anniversary Celebrations</h3>
                        <p>
                            Elegant dining, couple packages, celebration cakes,
                            flower arrangements, private service areas, and memory-focused details.
                        </p>
                    </div>
                </div>

                <div class="col-md-6 col-xl-4">
                    <div class="hosting-experience-card">
                        <div class="hosting-experience-icon">
                            <i class="bi bi-cake2-fill"></i>
                        </div>
                        <h3>Birthday Moments</h3>
                        <p>
                            Surprise celebrations for partners, intimate private parties,
                            meal arrangements, decorations, cakes, and optional entertainment.
                        </p>
                    </div>
                </div>

                <div class="col-md-6 col-xl-4">
                    <div class="hosting-experience-card">
                        <div class="hosting-experience-icon">
                            <i class="bi bi-stars"></i>
                        </div>
                        <h3>Honeymoon Experiences</h3>
                        <p>
                            Romantic resort moments, villa stays, spa upgrades, private dinners,
                            floral setups, and special couple-focused celebration plans.
                        </p>
                    </div>
                </div>

                <div class="col-md-6 col-xl-4">
                    <div class="hosting-experience-card">
                        <div class="hosting-experience-icon">
                            <i class="bi bi-calendar2-heart-fill"></i>
                        </div>
                        <h3>Custom Celebrations</h3>
                        <p>
                            Small engagements, intimate event dinners, personalized experiences,
                            private spaces, or custom moments designed with Ensolanka coordination.
                        </p>
                    </div>
                </div>

            </div>

        </div>
    </section>


    <!-- =========================================================
         HOST CATEGORIES
    ========================================================= -->
    <section class="hosting-categories-section">
        <div class="container hosting-categories-inner">

            <div class="row align-items-end g-4">
                <div class="col-lg-8">
                    <span class="hosting-section-mini-title" style="background: rgba(255,255,255,0.12); color: #ffd36b; border-color: rgba(255,255,255,0.16);">
                        <i class="bi bi-buildings-fill"></i>
                        Eligible venue types
                    </span>

                    <h2 class="hosting-section-title hosting-home-dark-title">
                        From elegant restaurants to unforgettable destination venues.
                    </h2>

                    <p class="hosting-section-copy hosting-home-dark-copy">
                        We welcome Sri Lankan businesses and venue operators who can provide memorable,
                        safe, attractive, and guest-ready environments for romantic and celebration-based experiences.
                    </p>
                </div>

                <div class="col-lg-4 text-lg-end">

                    {% if is_host_user %}
                        <a href="{% url 'hosting_app:host_dashboard' %}" class="hosting-btn-gold">
                            <i class="bi bi-speedometer2 me-2"></i>
                            Go to My Dashboard
                        </a>
                    {% else %}
                        <a href="{% url 'hosting_app:host_signup' %}" class="hosting-btn-gold">
                            <i class="bi bi-building-heart me-2"></i>
                            Join as a Hosting Partner
                        </a>
                    {% endif %}

                </div>
            </div>

            <div class="hosting-category-chip-wrap">
                <span class="hosting-category-chip"><i class="bi bi-cup-hot-fill"></i> Restaurant</span>
                <span class="hosting-category-chip"><i class="bi bi-building-fill"></i> Hotel</span>
                <span class="hosting-category-chip"><i class="bi bi-house-heart-fill"></i> Villa / Private Villa</span>
                <span class="hosting-category-chip"><i class="bi bi-sun-fill"></i> Resort</span>
                <span class="hosting-category-chip"><i class="bi bi-cloud-sun-fill"></i> Rooftop / Sky Venue</span>
                <span class="hosting-category-chip"><i class="bi bi-tree-fill"></i> Garden / Outdoor Venue</span>
                <span class="hosting-category-chip"><i class="bi bi-water"></i> Beachfront / Lakeside</span>
                <span class="hosting-category-chip"><i class="bi bi-door-open-fill"></i> Banquet / Event Hall</span>
                <span class="hosting-category-chip"><i class="bi bi-house-door-fill"></i> Cabana / Beach Cabana</span>
                <span class="hosting-category-chip"><i class="bi bi-moon-stars-fill"></i> Lounge / Pub / Bar</span>
                <span class="hosting-category-chip"><i class="bi bi-heart-fill"></i> Honeymoon Resort</span>
                <span class="hosting-category-chip"><i class="bi bi-flower1"></i> Spa / Wellness Center</span>
                <span class="hosting-category-chip"><i class="bi bi-compass-fill"></i> Boat / River Cruise</span>
                <span class="hosting-category-chip"><i class="bi bi-bank2"></i> Heritage Venue</span>
                <span class="hosting-category-chip"><i class="bi bi-tree"></i> Botanical Garden / Park</span>
                <span class="hosting-category-chip"><i class="bi bi-house"></i> Manor / Castle-Style Venue</span>
            </div>

        </div>
    </section>


    <!-- =========================================================
         PROCESS SECTION
    ========================================================= -->
    <section class="hosting-process-section">
        <div class="container">

            <div class="text-center mb-5">
                <span class="hosting-section-mini-title">
                    <i class="bi bi-diagram-3-fill"></i>
                    How it works
                </span>

                <h2 class="hosting-section-title mx-auto">
                    A guided business flow designed for better trust and better event coordination.
                </h2>

                <p class="hosting-section-copy mx-auto">
                    Instead of instant automated booking, Ensolanka follows a managed request process
                    so every celebration can be reviewed, confirmed, and priced responsibly.
                </p>
            </div>

            <div class="row g-4">

                <div class="col-md-6 col-xl-3">
                    <div class="hosting-process-card">
                        <div class="hosting-process-number">01</div>
                        <h3>Create your partner profile</h3>
                        <p>
                            Sign up as a Hosting Partner and introduce your business or venue operation.
                        </p>
                    </div>
                </div>

                <div class="col-md-6 col-xl-3">
                    <div class="hosting-process-card">
                        <div class="hosting-process-number">02</div>
                        <h3>Add venues and packages</h3>
                        <p>
                            Present locations, event packages, meals, and optional services with clear pricing.
                        </p>
                    </div>
                </div>

                <div class="col-md-6 col-xl-3">
                    <div class="hosting-process-card">
                        <div class="hosting-process-number">03</div>
                        <h3>Receive curated requests</h3>
                        <p>
                            Guests choose an experience and send a request through the Ensolanka platform.
                        </p>
                    </div>
                </div>

                <div class="col-md-6 col-xl-3">
                    <div class="hosting-process-card">
                        <div class="hosting-process-number">04</div>
                        <h3>Coordinate and confirm</h3>
                        <p>
                            Ensolanka reviews details, confirms availability and final pricing, then helps finalize the arrangement.
                        </p>
                    </div>
                </div>

            </div>

        </div>
    </section>


    <!-- =========================================================
         BUSINESS MODEL SECTION
    ========================================================= -->
    <section class="hosting-business-section">
        <div class="container">

            <div class="row g-4 align-items-stretch">

                <div class="col-lg-6">
                    <div class="hosting-business-highlight">
                        <span class="hosting-section-mini-title" style="background: rgba(255,255,255,0.12); color: #ffd36b; border-color: rgba(255,255,255,0.16);">
                            <i class="bi bi-cash-coin"></i>
                            Commercial model
                        </span>

                        <h3>
                            Ensolanka brings the opportunity. You price your experience responsibly.
                        </h3>

                        <p>
                            Hosting Partners define their own event package prices, meal prices, add-on prices,
                            and service scope. Ensolanka earns a commission when a confirmed business opportunity
                            is arranged through the platform.
                        </p>

                        <div class="hosting-commission-box">
                            <strong>10%</strong>
                            <span>Ensolanka host-side coordination and referral commission</span>
                        </div>
                    </div>
                </div>

                <div class="col-lg-6">
                    <div class="hosting-pricing-card">
                        <h4>
                            What should a host consider while pricing?
                        </h4>

                        <p>
                            Your listed price should be commercially realistic and account for the actual cost
                            of venue usage, staff, meals, decorations, service time, and any specific event materials.
                            Since Ensolanka retains a 10% coordination and referral commission from the confirmed value,
                            hosts should consider this while setting prices.
                        </p>

                        <div class="hosting-pricing-example">
                            <div class="hosting-pricing-row">
                                <span>Example package price charged to guest</span>
                                <strong>USD 300</strong>
                            </div>
                            <div class="hosting-pricing-row">
                                <span>Ensolanka commission — 10%</span>
                                <strong>USD 30</strong>
                            </div>
                            <div class="hosting-pricing-row">
                                <span>Host net value before any other host-side costs</span>
                                <strong>USD 270</strong>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

        </div>
    </section>


    <!-- =========================================================
         WHAT HOSTS CAN LIST
    ========================================================= -->
    <section class="hosting-package-section">
        <div class="container">

            <div class="text-center mb-5">
                <span class="hosting-section-mini-title">
                    <i class="bi bi-card-list"></i>
                    What you can showcase
                </span>

                <h2 class="hosting-section-title mx-auto">
                    Build a richer hosting profile than a simple venue advertisement.
                </h2>

                <p class="hosting-section-copy mx-auto">
                    The more clearly you present your offerings, the easier it becomes for guests to understand
                    the experience and for Ensolanka to coordinate a suitable booking request.
                </p>
            </div>

            <div class="row g-4">

                <div class="col-lg-4">
                    <div class="hosting-package-panel">
                        <h3>Venue Presence</h3>
                        <p>
                            Show the place, location, atmosphere, event suitability, public appeal, and practical facilities.
                        </p>

                        <div class="hosting-package-list">
                            <div class="hosting-package-item">
                                <i class="bi bi-check-circle-fill"></i>
                                <span>Venue type, location, and description</span>
                            </div>
                            <div class="hosting-package-item">
                                <i class="bi bi-check-circle-fill"></i>
                                <span>Cover image and venue gallery</span>
                            </div>
                            <div class="hosting-package-item">
                                <i class="bi bi-check-circle-fill"></i>
                                <span>Private area, outdoor, dining, parking, and event capabilities</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4">
                    <div class="hosting-package-panel">
                        <h3>Event Packages</h3>
                        <p>
                            Convert vague offerings into understandable experiences guests can compare and request.
                        </p>

                        <div class="hosting-package-list">
                            <div class="hosting-package-item">
                                <i class="bi bi-check-circle-fill"></i>
                                <span>Date, proposal, anniversary, birthday, and honeymoon plans</span>
                            </div>
                            <div class="hosting-package-item">
                                <i class="bi bi-check-circle-fill"></i>
                                <span>Duration, base price, inclusions, and exclusions</span>
                            </div>
                            <div class="hosting-package-item">
                                <i class="bi bi-check-circle-fill"></i>
                                <span>Package image, customization note, and guest capacity</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4">
                    <div class="hosting-package-panel">
                        <h3>Meals & Add-ons</h3>
                        <p>
                            Increase event value with additional offerings that make celebrations more complete.
                        </p>

                        <div class="hosting-package-list">
                            <div class="hosting-package-item">
                                <i class="bi bi-check-circle-fill"></i>
                                <span>Meal plans, couple menus, and per-person dining prices</span>
                            </div>
                            <div class="hosting-package-item">
                                <i class="bi bi-check-circle-fill"></i>
                                <span>Cakes, flowers, photography, decorations, music, transport</span>
                            </div>
                            <div class="hosting-package-item">
                                <i class="bi bi-check-circle-fill"></i>
                                <span>Visual add-on cards that help guests select extras</span>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

        </div>
    </section>


    <!-- =========================================================
         FINAL CTA
    ========================================================= -->
    <section class="hosting-final-cta">
        <div class="container">
            <div class="hosting-final-content">

                <span class="hosting-hero-badge">
                    <i class="bi bi-heart-fill"></i>
                    Host in Sri Lanka
                </span>

                <h2>
                    Your place may become part of someone’s love story, celebration, or once-in-a-lifetime moment.
                </h2>

                <p>
                    Join the Hosting Partner network, create a professional presence,
                    and prepare your venue to receive curated event opportunities through Ensolanka.
                </p>

                <div class="hosting-final-actions">

                    {% if is_host_user %}
                        <a href="{% url 'hosting_app:host_dashboard' %}" class="hosting-btn-gold">
                            <i class="bi bi-speedometer2 me-2"></i>
                            Go to My Host Dashboard
                        </a>
                    {% else %}
                        <a href="{% url 'hosting_app:host_signup' %}" class="hosting-btn-gold">
                            <i class="bi bi-person-plus-fill me-2"></i>
                            Become a Hosting Partner
                        </a>

                        <a href="{% url 'hosting_app:host_login' %}" class="hosting-btn-glass">
                            <i class="bi bi-shield-lock-fill me-2"></i>
                            Existing Partner Sign In
                        </a>
                    {% endif %}

                </div>

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

</div>
{% endblock %}