{% extends 'property_manager_app/base_property_manager.html' %}
{% load static %}

{% block title %}Home in Sri Lanka | Remote Property Care & Maintenance{% endblock %}

{% block content %}

<style>
    /* =========================================================
       HOME IN SRI LANKA - PROPERTY MANAGER HOME PAGE
    ========================================================= */

    .pm-home-hero {
        position: relative;
        min-height: 760px;
        background-color: #071f1b;
        overflow: hidden;
    }

    .pm-home-hero-bg {
        position: absolute;
        inset: 0;
        background:
            linear-gradient(
                90deg,
                rgba(5, 28, 24, 0.94) 0%,
                rgba(5, 36, 31, 0.86) 38%,
                rgba(7, 48, 41, 0.70) 68%,
                rgba(7, 48, 41, 0.54) 100%
            ),
            url("{% static 'expat_life/images/property_manager_hero.webp' %}") center center / cover no-repeat;
        transform: scale(1.025);
        z-index: 0;
    }

    .pm-home-hero-content {
        position: relative;
        z-index: 2;
        padding-top: 95px;
        padding-bottom: 95px;
    }

    .pm-hero-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: rgba(251, 191, 36, 0.16);
        color: #fbbf24;
        border: 1px solid rgba(251, 191, 36, 0.35);
        padding: 8px 16px;
        border-radius: 50px;
        font-weight: 800;
        font-size: 0.84rem;
        letter-spacing: 0.045em;
        text-transform: uppercase;
    }

    .pm-home-hero h1 {
        font-size: clamp(2.7rem, 5vw, 4.75rem);
        line-height: 1.05;
        letter-spacing: -0.045em;
        font-weight: 900;
        color: #fff;
    }

    .pm-home-hero .lead {
        color: rgba(255, 255, 255, 0.90);
        font-size: 1.15rem;
        line-height: 1.82;
    }

    .pm-home-hero .hero-secondary-text {
        color: rgba(255, 255, 255, 0.82);
        line-height: 1.75;
        font-size: 1rem;
    }

    .pm-hero-btn-warning {
        background: linear-gradient(135deg, #fbbf24, #f59e0b);
        border: none;
        color: #1f2937;
        border-radius: 999px;
        padding: 0.95rem 1.6rem;
        font-weight: 900;
        box-shadow: 0 18px 36px rgba(245, 158, 11, 0.24);
    }

    .pm-hero-btn-warning:hover {
        background: linear-gradient(135deg, #facc15, #f59e0b);
        color: #111827;
        transform: translateY(-1px);
    }

    .pm-hero-btn-outline {
        border: 1px solid rgba(255, 255, 255, 0.48);
        background: rgba(255, 255, 255, 0.08);
        color: #fff;
        border-radius: 999px;
        padding: 0.95rem 1.6rem;
        font-weight: 800;
        backdrop-filter: blur(8px);
    }

    .pm-hero-btn-outline:hover {
        color: #fff;
        background: rgba(255, 255, 255, 0.16);
        border-color: rgba(255, 255, 255, 0.65);
    }

    .pm-hero-point {
        background: rgba(255, 255, 255, 0.11);
        border: 1px solid rgba(255, 255, 255, 0.16);
        border-radius: 18px;
        padding: 15px 16px;
        color: #fff;
        height: 100%;
        display: flex;
        align-items: flex-start;
        gap: 11px;
        backdrop-filter: blur(8px);
        line-height: 1.55;
    }

    .pm-hero-point i {
        color: #fbbf24;
        font-size: 1.3rem;
        margin-top: 2px;
    }

    .pm-side-card {
        border-radius: 30px;
        background: rgba(255, 255, 255, 0.98);
        overflow: hidden;
        box-shadow: 0 28px 70px rgba(0, 0, 0, 0.26);
    }

    .pm-side-card-header {
        background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
        padding: 30px;
        color: #1f2937;
    }

    .pm-side-card-header h4 {
        font-weight: 900;
    }

    .pm-side-card-body {
        padding: 31px;
    }

    .pm-mini-row {
        display: flex;
        gap: 14px;
        padding-bottom: 18px;
        margin-bottom: 18px;
        border-bottom: 1px solid #edf0f2;
    }

    .pm-mini-row:last-child {
        border-bottom: 0;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .pm-mini-icon {
        width: 46px;
        height: 46px;
        min-width: 46px;
        border-radius: 15px;
        background: #ecfdf5;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #0f766e;
        font-size: 1.25rem;
    }

    .pm-stat-strip {
        background: #f8fafc;
    }

    .pm-stat-box {
        background: #fff;
        border-radius: 20px;
        padding: 25px 18px;
        box-shadow: 0 14px 32px rgba(15, 23, 42, 0.06);
        height: 100%;
        border: 1px solid #e2e8f0;
    }

    .pm-stat-box h3 {
        color: #0f766e;
        font-weight: 900;
        margin-bottom: 6px;
        font-size: 1.6rem;
    }

    .pm-section-heading {
        max-width: 900px;
        margin-left: auto;
        margin-right: auto;
    }

    .pm-section-mini-title {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 7px 15px;
        border-radius: 999px;
        background: #ecfdf5;
        color: #0f766e;
        font-weight: 900;
        font-size: 0.79rem;
        text-transform: uppercase;
        letter-spacing: 0.055em;
        margin-bottom: 14px;
    }

    .pm-section-mini-title-light {
        background: rgba(255, 255, 255, 0.15);
        color: #ccfbf1;
        border: 1px solid rgba(255, 255, 255, 0.24);
    }

    .pm-section-heading h2 {
        color: #0f172a;
        font-weight: 900;
        letter-spacing: -0.032em;
        font-size: clamp(2rem, 3.4vw, 3rem);
    }

    .pm-section-heading p {
        color: #64748b;
        line-height: 1.82;
        font-size: 1.03rem;
    }

    .pm-problem-card,
    .pm-service-card,
    .pm-plan-card,
    .pm-process-card,
    .pm-integration-card {
        background: #fff;
        border-radius: 26px;
        padding: 30px;
        height: 100%;
        border: 1px solid #e2e8f0;
        box-shadow: 0 16px 38px rgba(15, 23, 42, 0.07);
        transition: 0.25s ease;
    }

    .pm-problem-card:hover,
    .pm-service-card:hover,
    .pm-plan-card:hover,
    .pm-process-card:hover,
    .pm-integration-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 22px 46px rgba(15, 23, 42, 0.11);
    }

    .pm-problem-icon,
    .pm-service-icon,
    .pm-plan-icon,
    .pm-integration-icon {
        width: 62px;
        height: 62px;
        border-radius: 20px;
        background: #ecfdf5;
        color: #0f766e;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.7rem;
        margin-bottom: 20px;
    }

    .pm-problem-card h5,
    .pm-service-card h5,
    .pm-plan-card h5,
    .pm-integration-card h5 {
        color: #0f172a;
        font-weight: 900;
        margin-bottom: 12px;
    }

    .pm-problem-card p,
    .pm-service-card p,
    .pm-plan-card p,
    .pm-integration-card p {
        color: #64748b;
        line-height: 1.72;
        margin-bottom: 0;
    }

    .pm-dark-gradient-section {
        background:
            radial-gradient(circle at top left, rgba(251, 191, 36, 0.14), transparent 34%),
            linear-gradient(135deg, #062d27 0%, #0f766e 100%);
        color: #fff;
    }

    .pm-property-type-box {
        background: rgba(255, 255, 255, 0.11);
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 18px;
        padding: 18px;
        color: #fff;
        height: 100%;
        display: flex;
        align-items: center;
        gap: 12px;
        font-weight: 700;
    }

    .pm-property-type-box i {
        color: #fbbf24;
        font-size: 1.45rem;
    }

    .pm-light-highlight-card {
        background: #fff;
        color: #0f172a;
        border-radius: 28px;
        padding: 36px;
        box-shadow: 0 24px 54px rgba(0, 0, 0, 0.20);
    }

    .pm-highlight-list {
        list-style: none;
        padding-left: 0;
        margin-bottom: 0;
    }

    .pm-highlight-list li {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 17px;
        line-height: 1.7;
        color: #475569;
    }

    .pm-highlight-list li:last-child {
        margin-bottom: 0;
    }

    .pm-highlight-list i {
        color: #16a34a;
        font-size: 1.15rem;
        margin-top: 3px;
    }

    .pm-process-number {
        width: 58px;
        height: 58px;
        border-radius: 50%;
        background: linear-gradient(135deg, #0f766e, #064e3b);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 900;
        margin: 0 auto 20px;
        box-shadow: 0 14px 28px rgba(15, 118, 110, 0.20);
    }

    .pm-process-card {
        text-align: center;
    }

    .pm-process-card h5 {
        color: #0f172a;
        font-weight: 900;
        margin-bottom: 12px;
    }

    .pm-process-card p {
        color: #64748b;
        line-height: 1.72;
        margin-bottom: 0;
    }

    .pm-calculator-section {
        background:
            radial-gradient(circle at bottom right, rgba(251, 191, 36, 0.14), transparent 32%),
            linear-gradient(135deg, #f8fafc 0%, #ecfdf5 100%);
    }

    .pm-calculator-card {
        background: #fff;
        border-radius: 32px;
        padding: 38px;
        border: 1px solid #dbeafe;
        box-shadow: 0 24px 58px rgba(15, 23, 42, 0.09);
    }

    .pm-cost-line {
        display: flex;
        justify-content: space-between;
        gap: 16px;
        padding: 13px 0;
        border-bottom: 1px solid #e2e8f0;
        color: #475569;
    }

    .pm-cost-line:last-child {
        border-bottom: 0;
    }

    .pm-cost-line strong {
        color: #0f172a;
    }

    .pm-cost-total {
        margin-top: 18px;
        padding: 20px;
        border-radius: 22px;
        background: linear-gradient(135deg, #ecfdf5, #ccfbf1);
        border: 1px solid #99f6e4;
    }

    .pm-cost-total .label {
        color: #0f766e;
        font-weight: 800;
        font-size: 0.92rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .pm-cost-total .value {
        color: #052e25;
        font-size: 2.1rem;
        font-weight: 900;
        margin: 4px 0 0;
    }

    .pm-note-alert {
        background: #fffbeb;
        border-left: 5px solid #f59e0b;
        color: #92400e;
        padding: 18px 20px;
        border-radius: 20px;
        line-height: 1.7;
    }

    .pm-layer-card {
        background: #fff;
        border-radius: 28px;
        padding: 32px;
        height: 100%;
        border: 1px solid #e2e8f0;
        box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
    }

    .pm-layer-number {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 50px;
        height: 50px;
        border-radius: 18px;
        background: #0f766e;
        color: #fff;
        font-weight: 900;
        margin-bottom: 18px;
    }

    .pm-layer-card h4 {
        color: #0f172a;
        font-weight: 900;
    }

    .pm-layer-card p,
    .pm-layer-card li {
        color: #64748b;
        line-height: 1.72;
    }

    .pm-plan-card.featured-plan {
        border: 2px solid #fbbf24;
        position: relative;
    }

    .pm-plan-ribbon {
        position: absolute;
        top: 18px;
        right: 18px;
        padding: 6px 12px;
        border-radius: 999px;
        background: #fbbf24;
        color: #1f2937;
        font-weight: 900;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .pm-plan-list {
        list-style: none;
        padding-left: 0;
        margin: 18px 0 0;
    }

    .pm-plan-list li {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        color: #475569;
        line-height: 1.62;
        margin-bottom: 11px;
    }

    .pm-plan-list li:last-child {
        margin-bottom: 0;
    }

    .pm-plan-list i {
        color: #16a34a;
        margin-top: 3px;
    }

    .pm-integration-section {
        background: #f8fafc;
    }

    .pm-integration-icon.gold {
        background: #fef3c7;
        color: #b45309;
    }

    .pm-integration-icon.blue {
        background: #dbeafe;
        color: #1d4ed8;
    }

    .pm-integration-icon.green {
        background: #dcfce7;
        color: #166534;
    }

    .pm-faq-section {
        background: #fff;
    }

    .pm-custom-accordion .accordion-item {
        border: 1px solid #e2e8f0;
        border-radius: 20px !important;
        overflow: hidden;
        margin-bottom: 16px;
        box-shadow: 0 12px 26px rgba(15, 23, 42, 0.05);
    }

    .pm-custom-accordion .accordion-button {
        font-weight: 800;
        color: #0f172a;
        padding: 20px 22px;
        background: #fff;
    }

    .pm-custom-accordion .accordion-button:not(.collapsed) {
        color: #0f766e;
        background: #ecfdf5;
        box-shadow: none;
    }

    .pm-custom-accordion .accordion-button:focus {
        box-shadow: none;
    }

    .pm-custom-accordion .accordion-body {
        color: #64748b;
        line-height: 1.8;
        padding: 22px;
    }

    .pm-final-cta {
        background:
            radial-gradient(circle at top right, rgba(251, 191, 36, 0.18), transparent 30%),
            linear-gradient(135deg, #052e25 0%, #0f766e 100%);
        border-radius: 34px;
        padding: 58px 38px;
        box-shadow: 0 28px 68px rgba(15, 23, 42, 0.20);
    }

    .pm-final-cta h2 {
        font-weight: 900;
        letter-spacing: -0.03em;
    }

    .pm-final-cta .lead {
        color: rgba(255, 255, 255, 0.88);
        line-height: 1.8;
    }

    @media (max-width: 991.98px) {
        .pm-home-hero {
            min-height: auto;
        }

        .pm-home-hero-content {
            padding-top: 72px;
            padding-bottom: 72px;
        }

        .pm-side-card-body,
        .pm-side-card-header,
        .pm-light-highlight-card,
        .pm-calculator-card {
            padding: 25px;
        }
    }
    /* =========================================================
    FLOATING MULTILINGUAL INFORMATION CENTER - HORIZONTAL
    Property Care App
    ========================================================= */

    .pm-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(251, 191, 36, 0.14);
        color: #fbbf24;
        border: 1px solid rgba(251, 191, 36, 0.32);
        box-shadow: 0 14px 34px rgba(120, 80, 10, 0.16);
        backdrop-filter: blur(14px);
    }

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

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

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

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

    .pm-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) {
        .pm-floating-language-bar {
            top: 118px;
            padding: 0.4rem 0.6rem;
            gap: 0.55rem;
        }

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

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

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

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

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

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

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

<!-- =====================================================
     FLOATING MULTILINGUAL INFORMATION CENTER - HORIZONTAL
====================================================== -->
<div class="pm-floating-language-bar">
    <div class="pm-floating-language-title">
        <i class="bi bi-translate"></i>
        <span>Info Center</span>
    </div>

    <div class="pm-floating-language-buttons">
        <a href="{% url 'property_manager_app:property_care_information_center' %}?lang=si"
           class="pm-floating-language-btn"
           aria-label="Open Sinhala Property Care Information Center">
            <img src="{% static 'expat_life/images/sinhala.png' %}"
                 alt="Sinhala">
        </a>

        <a href="{% url 'property_manager_app:property_care_information_center' %}?lang=ta"
           class="pm-floating-language-btn"
           aria-label="Open Tamil Property Care Information Center">
            <img src="{% static 'expat_life/images/tamil.png' %}"
                 alt="Tamil">
        </a>

        <a href="{% url 'property_manager_app:property_care_information_center' %}?lang=en"
           class="pm-floating-language-btn"
           aria-label="Open English Property Care Information Center">
            <img src="{% static 'expat_life/images/english.png' %}"
                 alt="English">
        </a>
    </div>
</div>
<!-- =========================================================
     HERO SECTION
========================================================= -->
<section class="pm-home-hero">
    <div class="pm-home-hero-bg"></div>

    <div class="container pm-home-hero-content">
        <div class="row align-items-center g-5">

            <!-- HERO COPY -->
            <div class="col-lg-7 text-white">

                <span class="pm-hero-badge d-inline-flex mb-3">
                    <i class="bi bi-house-gear-fill"></i>
                    Home in Sri Lanka
                </span>

                <h1 class="mb-4">
                    Own Property in Sri Lanka While Living Away?
                    We Help Keep It Safe, Clean, and Cared For.
                </h1>

                <p class="lead mb-4">
                    Ensolanka helps overseas owners, distant homeowners, estate holders,
                    rental owners, and families maintain lands, houses, villas, buildings,
                    and other properties in Sri Lanka through trusted local property care support.
                </p>

                <p class="hero-secondary-text mb-4">
                    From routine inspections and cleaning to garden maintenance,
                    vacancy monitoring, repair coordination, owner-arrival preparation,
                    and future monthly care estimates — this app gives remote owners
                    a clearer and more dependable property support pathway.
                </p>

                <div class="d-flex flex-wrap gap-3 mb-4">

                    {% if is_property_manager_user %}
                        <a href="{% url 'property_manager_app:property_manager_dashboard' %}"
                           class="btn pm-hero-btn-warning btn-lg">
                            Open My Dashboard
                        </a>

                    {% elif request.user.is_authenticated %}
                        <a href="{% url 'property_manager_app:property_manager_signup' %}"
                           class="btn pm-hero-btn-warning btn-lg">
                            Add Care Access
                        </a>

                    {% else %}
                        <a href="{% url 'property_manager_app:property_manager_signup' %}"
                           class="btn pm-hero-btn-warning btn-lg">
                            Get Property Care
                        </a>
                    {% endif %}

                    <a href="#"
                       class="btn pm-hero-btn-outline btn-lg">
                        View Services
                    </a>

                </div>

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

                    <div class="col-sm-6">
                        <div class="pm-hero-point">
                            <i class="bi bi-globe2"></i>
                            <span>
                                Built for Sri Lankans overseas and owners living far from their property
                            </span>
                        </div>
                    </div>

                    <div class="col-sm-6">
                        <div class="pm-hero-point">
                            <i class="bi bi-buildings-fill"></i>
                            <span>
                                Suitable for homes, lands, villas, estates, buildings, and mixed properties
                            </span>
                        </div>
                    </div>

                    <div class="col-sm-6">
                        <div class="pm-hero-point">
                            <i class="bi bi-camera-fill"></i>
                            <span>
                                Designed for inspections, reports, service updates, and evidence-based care
                            </span>
                        </div>
                    </div>

                    <div class="col-sm-6">
                        <div class="pm-hero-point">
                            <i class="bi bi-calculator-fill"></i>
                            <span>
                                Future monthly care calculator supported by property and service details
                            </span>
                        </div>
                    </div>

                </div>
            </div>


            <!-- HERO SIDE CARD -->
            <div class="col-lg-5">
                <div class="pm-side-card">

                    <div class="pm-side-card-header">
                        <h4 class="mb-2">What Can Ensolanka Help Manage?</h4>
                        <p class="mb-0">
                            A structured local support layer for owners who cannot regularly attend to their property.
                        </p>
                    </div>

                    <div class="pm-side-card-body">

                        <div class="pm-mini-row">
                            <div class="pm-mini-icon">
                                <i class="bi bi-binoculars-fill"></i>
                            </div>

                            <div>
                                <h6 class="fw-bold mb-1">Inspections & Monitoring</h6>
                                <p class="text-muted small mb-0">
                                    Scheduled property checks, vacancy observation, basic condition reporting, and visual updates.
                                </p>
                            </div>
                        </div>

                        <div class="pm-mini-row">
                            <div class="pm-mini-icon">
                                <i class="bi bi-brush-fill"></i>
                            </div>

                            <div>
                                <h6 class="fw-bold mb-1">Cleaning & Grounds Care</h6>
                                <p class="text-muted small mb-0">
                                    Interior cleaning, grass cutting, garden attention, land clearing coordination, and upkeep tasks.
                                </p>
                            </div>
                        </div>

                        <div class="pm-mini-row">
                            <div class="pm-mini-icon">
                                <i class="bi bi-tools"></i>
                            </div>

                            <div>
                                <h6 class="fw-bold mb-1">Repair Coordination</h6>
                                <p class="text-muted small mb-0">
                                    Identify issues, gather quotations, coordinate service providers, and report progress.
                                </p>
                            </div>
                        </div>

                        <div class="pm-mini-row">
                            <div class="pm-mini-icon">
                                <i class="bi bi-receipt-cutoff"></i>
                            </div>

                            <div>
                                <h6 class="fw-bold mb-1">Utilities & Owner Support</h6>
                                <p class="text-muted small mb-0">
                                    Bill follow-up, arrival preparation, emergency escalation, and practical owner assistance.
                                </p>
                            </div>
                        </div>

                        <div class="mt-4 d-grid">

                            {% if is_property_manager_user %}
                                <a href="{% url 'property_manager_app:property_manager_dashboard' %}"
                                   class="btn btn-dark btn-lg">
                                    Go to My Dashboard
                                </a>

                            {% elif request.user.is_authenticated %}
                                <a href="{% url 'property_manager_app:property_manager_signup' %}"
                                   class="btn btn-dark btn-lg">
                                    Extend My Account
                                </a>

                            {% else %}
                                <a href="{% url 'property_manager_app:property_manager_signup' %}"
                                   class="btn btn-dark btn-lg">
                                    Create Property Care Account
                                </a>
                            {% endif %}

                        </div>

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

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


<!-- =========================================================
     TRUST STRIP
========================================================= -->
<section class="py-4 pm-stat-strip">
    <div class="container">
        <div class="row g-3">

            <div class="col-6 col-lg-3">
                <div class="pm-stat-box text-center">
                    <h3>Remote</h3>
                    <p class="mb-0 text-muted">Owner Support</p>
                </div>
            </div>

            <div class="col-6 col-lg-3">
                <div class="pm-stat-box text-center">
                    <h3>Multi-Type</h3>
                    <p class="mb-0 text-muted">Property Coverage</p>
                </div>
            </div>

            <div class="col-6 col-lg-3">
                <div class="pm-stat-box text-center">
                    <h3>Flexible</h3>
                    <p class="mb-0 text-muted">Care Selection</p>
                </div>
            </div>

            <div class="col-6 col-lg-3">
                <div class="pm-stat-box text-center">
                    <h3>Estimate + Quote</h3>
                    <p class="mb-0 text-muted">Pricing Method</p>
                </div>
            </div>

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


<!-- =========================================================
     WHY THIS SERVICE EXISTS
========================================================= -->
<section class="py-5 bg-white">
    <div class="container">

        <div class="pm-section-heading text-center mb-5">
            <span class="pm-section-mini-title">
                <i class="bi bi-shield-heart-fill"></i>
                Why This Matters
            </span>

            <h2>
                A Property Left Behind Should Not Become a Problem Left Unseen
            </h2>

            <p>
                Many owners live overseas, work in another district, travel frequently,
                or simply do not have time to inspect and maintain their Sri Lankan property.
                A vacant house, unused land, neglected garden, or unattended building can slowly
                deteriorate, create security concerns, or become costly to restore later.
            </p>
        </div>

        <div class="row g-4">

            <div class="col-md-6 col-lg-3">
                <div class="pm-problem-card">
                    <div class="pm-problem-icon">
                        <i class="bi bi-house-exclamation-fill"></i>
                    </div>

                    <h5>Vacant Property Risks</h5>
                    <p>
                        Water leaks, pest entry, damaged locks, damp interiors, storm issues,
                        and unnoticed deterioration can build up quietly.
                    </p>
                </div>
            </div>

            <div class="col-md-6 col-lg-3">
                <div class="pm-problem-card">
                    <div class="pm-problem-icon">
                        <i class="bi bi-tree-fill"></i>
                    </div>

                    <h5>Land & Garden Neglect</h5>
                    <p>
                        Overgrown land, weeds, boundary visibility problems, blocked drains,
                        and lack of routine upkeep reduce property readiness.
                    </p>
                </div>
            </div>

            <div class="col-md-6 col-lg-3">
                <div class="pm-problem-card">
                    <div class="pm-problem-icon">
                        <i class="bi bi-person-x-fill"></i>
                    </div>

                    <h5>No Trusted Local Follow-Up</h5>
                    <p>
                        Owners often depend on informal favors, scattered calls, or no one at all
                        to check what is actually happening on-site.
                    </p>
                </div>
            </div>

            <div class="col-md-6 col-lg-3">
                <div class="pm-problem-card">
                    <div class="pm-problem-icon">
                        <i class="bi bi-cash-stack"></i>
                    </div>

                    <h5>Small Issues Become Costly</h5>
                    <p>
                        A minor repair ignored for months may later become a much bigger repair,
                        requiring more money, time, and stress.
                    </p>
                </div>
            </div>

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


<!-- =========================================================
     SERVICE CATEGORIES
========================================================= -->
<section class="py-5 bg-light">
    <div class="container">

        <div class="pm-section-heading text-center mb-5">
            <span class="pm-section-mini-title">
                <i class="bi bi-grid-1x2-fill"></i>
                Property Care Services
            </span>

            <h2>
                Practical Maintenance Categories Built for Remote Owners
            </h2>

            <p>
                Home in Sri Lanka is designed around structured maintenance choices.
                Owners will be able to register properties, select needed support,
                and later receive monthly care estimates based on property details and service scope.
            </p>
        </div>

        <div class="row g-4">

            <div class="col-md-6 col-lg-4">
                <div class="pm-service-card">
                    <div class="pm-service-icon">
                        <i class="bi bi-binoculars-fill"></i>
                    </div>

                    <h5>Inspection & Reporting</h5>
                    <p>
                        Scheduled property visits, visible condition checks, roof/gate/fence observation,
                        image updates, and monthly reporting.
                    </p>
                </div>
            </div>

            <div class="col-md-6 col-lg-4">
                <div class="pm-service-card">
                    <div class="pm-service-icon">
                        <i class="bi bi-stars"></i>
                    </div>

                    <h5>Cleaning & Housekeeping</h5>
                    <p>
                        Interior sweeping, dust removal, bathrooms, kitchens, windows,
                        arrival preparation, and cleanup coordination where required.
                    </p>
                </div>
            </div>

            <div class="col-md-6 col-lg-4">
                <div class="pm-service-card">
                    <div class="pm-service-icon">
                        <i class="bi bi-flower1"></i>
                    </div>

                    <h5>Garden & Outdoor Care</h5>
                    <p>
                        Grass cutting, weed clearing, bush trimming, plant watering,
                        drain clearing, and general garden appearance maintenance.
                    </p>
                </div>
            </div>

            <div class="col-md-6 col-lg-4">
                <div class="pm-service-card">
                    <div class="pm-service-icon">
                        <i class="bi bi-map-fill"></i>
                    </div>

                    <h5>Vacant Land Care</h5>
                    <p>
                        Land observation, boundary checks, overgrowth awareness,
                        illegal dumping alerts, and clearing coordination for unused lands.
                    </p>
                </div>
            </div>

            <div class="col-md-6 col-lg-4">
                <div class="pm-service-card">
                    <div class="pm-service-icon">
                        <i class="bi bi-tools"></i>
                    </div>

                    <h5>Repairs & Maintenance Coordination</h5>
                    <p>
                        Plumbing, electrical, lock, paint, roof, masonry, and repair-provider coordination
                        through review and quotation handling.
                    </p>
                </div>
            </div>

            <div class="col-md-6 col-lg-4">
                <div class="pm-service-card">
                    <div class="pm-service-icon">
                        <i class="bi bi-receipt"></i>
                    </div>

                    <h5>Utilities & Bill Support</h5>
                    <p>
                        Electricity or water bill follow-up, receipt handling,
                        reconnection coordination, and utility-related owner support.
                    </p>
                </div>
            </div>

            <div class="col-md-6 col-lg-4">
                <div class="pm-service-card">
                    <div class="pm-service-icon">
                        <i class="bi bi-shield-lock-fill"></i>
                    </div>

                    <h5>Security & Vacancy Monitoring</h5>
                    <p>
                        Doors, windows, gates, visible break-in signs, storm effects,
                        unusual property changes, and remote-owner alerting.
                    </p>
                </div>
            </div>

            <div class="col-md-6 col-lg-4">
                <div class="pm-service-card">
                    <div class="pm-service-icon">
                        <i class="bi bi-lightning-charge-fill"></i>
                    </div>

                    <h5>Emergency Response Support</h5>
                    <p>
                        Urgent local inspection, immediate visual updates,
                        repair-provider contact, and temporary protection coordination.
                    </p>
                </div>
            </div>

            <div class="col-md-6 col-lg-4">
                <div class="pm-service-card">
                    <div class="pm-service-icon">
                        <i class="bi bi-suitcase-fill"></i>
                    </div>

                    <h5>Arrival & Rental Readiness</h5>
                    <p>
                        Pre-arrival cleaning, property airing, light preparation,
                        repair checks, and future rental-readiness support.
                    </p>
                </div>
            </div>

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


<!-- =========================================================
     PROPERTY TYPES
========================================================= -->
<section class="py-5 pm-dark-gradient-section">
    <div class="container">
        <div class="row align-items-center g-5">

            <div class="col-lg-6">
                <span class="pm-section-mini-title pm-section-mini-title-light">
                    <i class="bi bi-buildings-fill"></i>
                    Property Types
                </span>

                <h2 class="fw-bold mb-3 text-white">
                    What Kind of Properties Can Be Supported?
                </h2>

                <p class="mb-4" style="color: rgba(255,255,255,0.86); line-height: 1.8;">
                    The service is intentionally broader than a rental portal.
                    It is designed for owners of homes, lands, estates, and buildings
                    who need observation, upkeep, readiness, or coordinated maintenance.
                </p>

                <div class="row g-3">

                    <div class="col-sm-6">
                        <div class="pm-property-type-box">
                            <i class="bi bi-map-fill"></i>
                            Vacant Lands
                        </div>
                    </div>

                    <div class="col-sm-6">
                        <div class="pm-property-type-box">
                            <i class="bi bi-house-door-fill"></i>
                            Houses & Family Homes
                        </div>
                    </div>

                    <div class="col-sm-6">
                        <div class="pm-property-type-box">
                            <i class="bi bi-house-heart-fill"></i>
                            Villas & Holiday Homes
                        </div>
                    </div>

                    <div class="col-sm-6">
                        <div class="pm-property-type-box">
                            <i class="bi bi-building-fill"></i>
                            Apartments & Buildings
                        </div>
                    </div>

                    <div class="col-sm-6">
                        <div class="pm-property-type-box">
                            <i class="bi bi-tree-fill"></i>
                            Estates & Plantation Lands
                        </div>
                    </div>

                    <div class="col-sm-6">
                        <div class="pm-property-type-box">
                            <i class="bi bi-layers-fill"></i>
                            Mixed Properties
                        </div>
                    </div>

                </div>
            </div>


            <div class="col-lg-6">
                <div class="pm-light-highlight-card">

                    <h4 class="fw-bold mb-4">
                        Details We Will Use to Build Better Care Plans
                    </h4>

                    <ul class="pm-highlight-list">
                        <li>
                            <i class="bi bi-check-circle-fill"></i>
                            <span>Land size in perches or acres</span>
                        </li>

                        <li>
                            <i class="bi bi-check-circle-fill"></i>
                            <span>Building floor area in square feet or square meters</span>
                        </li>

                        <li>
                            <i class="bi bi-check-circle-fill"></i>
                            <span>Number of buildings, storeys, bedrooms, bathrooms, and other rooms</span>
                        </li>

                        <li>
                            <i class="bi bi-check-circle-fill"></i>
                            <span>Current property condition, age, utilities, occupancy, and access details</span>
                        </li>

                        <li>
                            <i class="bi bi-check-circle-fill"></i>
                            <span>Service frequency selected by the owner for care and monitoring</span>
                        </li>
                    </ul>

                    <div class="mt-4 d-grid">
                        {% if is_property_manager_user %}
                            <a href="{% url 'property_manager_app:property_manager_dashboard' %}"
                               class="btn btn-success btn-lg">
                                Open My Care Dashboard
                            </a>
                        {% elif request.user.is_authenticated %}
                            <a href="{% url 'property_manager_app:property_manager_signup' %}"
                               class="btn btn-success btn-lg">
                                Add Property Care Access
                            </a>
                        {% else %}
                            <a href="{% url 'property_manager_app:property_manager_signup' %}"
                               class="btn btn-success btn-lg">
                                Start Property Care Signup
                            </a>
                        {% endif %}
                    </div>

                </div>
            </div>

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


<!-- =========================================================
     HOW IT WORKS
========================================================= -->
<section class="py-5 bg-white">
    <div class="container">

        <div class="pm-section-heading text-center mb-5">
            <span class="pm-section-mini-title">
                <i class="bi bi-signpost-split-fill"></i>
                How It Works
            </span>

            <h2>
                A Clear Owner Journey from Signup to Property Care
            </h2>

            <p>
                The system is designed to be simple for the owner and practical for Ensolanka’s operational team.
                It begins with account access, then property registration, care selection, estimation, review,
                and ongoing service tracking.
            </p>
        </div>

        <div class="row g-4">

            <div class="col-md-6 col-xl-4">
                <div class="pm-process-card">
                    <div class="pm-process-number">01</div>
                    <h5>Create or Extend Account</h5>
                    <p>
                        New owners can sign up directly. Existing affiliates or rental owners can add care access
                        under their same Ensolanka user account.
                    </p>
                </div>
            </div>

            <div class="col-md-6 col-xl-4">
                <div class="pm-process-card">
                    <div class="pm-process-number">02</div>
                    <h5>Add Property Details</h5>
                    <p>
                        Submit property type, location, land size, building size, rooms, photos,
                        utilities, and general condition.
                    </p>
                </div>
            </div>

            <div class="col-md-6 col-xl-4">
                <div class="pm-process-card">
                    <div class="pm-process-number">03</div>
                    <h5>Select Maintenance Needs</h5>
                    <p>
                        Choose inspections, cleaning, garden care, security monitoring,
                        utility handling, and other service categories.
                    </p>
                </div>
            </div>

            <div class="col-md-6 col-xl-4">
                <div class="pm-process-card">
                    <div class="pm-process-number">04</div>
                    <h5>Get Online Estimate</h5>
                    <p>
                        A future calculator will provide a provisional monthly charge
                        based on property size, complexity, and service scope.
                    </p>
                </div>
            </div>

            <div class="col-md-6 col-xl-4">
                <div class="pm-process-card">
                    <div class="pm-process-number">05</div>
                    <h5>Review & Final Plan</h5>
                    <p>
                        Ensolanka reviews the information and confirms the practical final care plan,
                        inclusions, exclusions, and agreed fee.
                    </p>
                </div>
            </div>

            <div class="col-md-6 col-xl-4">
                <div class="pm-process-card">
                    <div class="pm-process-number">06</div>
                    <h5>Track Care & Reports</h5>
                    <p>
                        Owners later follow inspection notes, service updates, photos,
                        repair work orders, and payment status from the dashboard.
                    </p>
                </div>
            </div>

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


<!-- =========================================================
     CALCULATOR TEASER
========================================================= -->
<section class="py-5 pm-calculator-section">
    <div class="container">
        <div class="row align-items-center g-5">

            <div class="col-lg-6">
                <span class="pm-section-mini-title">
                    <i class="bi bi-calculator-fill"></i>
                    Maintenance Calculator
                </span>

                <h2 class="fw-bold mb-3">
                    A Smart Monthly Estimate — Then a Final Reviewed Quote
                </h2>

                <p class="text-muted mb-3" style="line-height: 1.82;">
                    Rather than using a fixed one-size-fits-all price, Home in Sri Lanka is built around
                    a configurable estimate model. The system can consider land size, building floor area,
                    number of buildings, storeys, room counts, property age, service frequency, and location factors.
                </p>

                <p class="text-muted mb-4" style="line-height: 1.82;">
                    This gives owners an immediate idea of likely monthly charges while allowing Ensolanka
                    to confirm a final practical quote after reviewing location, condition, access,
                    and real service complexity.
                </p>

                <div class="pm-note-alert">
                    <strong>Important:</strong>
                    The online monthly care amount should be shown as a provisional estimate.
                    Final pricing may change after Ensolanka reviews property photos, current condition,
                    travel difficulty, and selected task frequency.
                </div>
            </div>


            <div class="col-lg-6">
                <div class="pm-calculator-card">

                    <h4 class="fw-bold mb-3">
                        Example Monthly Care Estimate
                    </h4>

                    <p class="text-muted mb-4">
                        House with land · 40 perches · 2,000 sq.ft · selected monthly services
                    </p>

                    <div class="pm-cost-line">
                        <span>Remote Management Base</span>
                        <strong>$20</strong>
                    </div>

                    <div class="pm-cost-line">
                        <span>Inspection Visits</span>
                        <strong>$30</strong>
                    </div>

                    <div class="pm-cost-line">
                        <span>Garden & Land Care</span>
                        <strong>$35</strong>
                    </div>

                    <div class="pm-cost-line">
                        <span>Interior Cleaning</span>
                        <strong>$28</strong>
                    </div>

                    <div class="pm-cost-line">
                        <span>Building Complexity</span>
                        <strong>$12</strong>
                    </div>

                    <div class="pm-cost-line">
                        <span>Utility Administration</span>
                        <strong>$8</strong>
                    </div>

                    <div class="pm-cost-total">
                        <div class="label">Estimated Monthly Total</div>
                        <div class="value">$133/month</div>
                    </div>

                    <div class="mt-4 d-grid">
                        <a href="#"
                           class="btn btn-success btn-lg">
                            Explore Cost Calculator
                        </a>
                    </div>

                </div>
            </div>

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


<!-- =========================================================
     TWO SERVICE LAYERS
========================================================= -->
<section class="py-5 bg-white">
    <div class="container">

        <div class="pm-section-heading text-center mb-5">
            <span class="pm-section-mini-title">
                <i class="bi bi-layers-fill"></i>
                Commercial Structure
            </span>

            <h2>
                Two Clear Service Layers Keep the Business Practical
            </h2>

            <p>
                This protects both the owner and Ensolanka. Routine monthly care remains predictable,
                while variable repairs and projects are handled transparently as additional quoted work.
            </p>
        </div>

        <div class="row g-4">

            <div class="col-lg-6">
                <div class="pm-layer-card">
                    <div class="pm-layer-number">01</div>

                    <h4 class="fw-bold mb-3">
                        Monthly Property Care Plan
                    </h4>

                    <p class="mb-3">
                        A recurring charge for selected ongoing care tasks.
                    </p>

                    <ul>
                        <li>Scheduled property inspections</li>
                        <li>Cleaning and/or grounds maintenance</li>
                        <li>Routine reporting and photo updates</li>
                        <li>Utility follow-up where selected</li>
                        <li>Basic remote-owner coordination</li>
                    </ul>
                </div>
            </div>

            <div class="col-lg-6">
                <div class="pm-layer-card">
                    <div class="pm-layer-number">02</div>

                    <h4 class="fw-bold mb-3">
                        Extra Tasks & Quoted Work
                    </h4>

                    <p class="mb-3">
                        Separately quoted services that vary by issue, urgency, material, and labor.
                    </p>

                    <ul>
                        <li>Plumbing or electrical repairs</li>
                        <li>Major land clearing</li>
                        <li>Pest control or water tank cleaning</li>
                        <li>Renovation supervision</li>
                        <li>Emergency repair callouts and materials</li>
                    </ul>
                </div>
            </div>

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


<!-- =========================================================
     PLAN TEMPLATES
========================================================= -->
<section class="py-5 bg-light">
    <div class="container">

        <div class="pm-section-heading text-center mb-5">
            <span class="pm-section-mini-title">
                <i class="bi bi-card-checklist"></i>
                Plan Direction
            </span>

            <h2>
                Suggested Care Plan Styles for Different Owners
            </h2>

            <p>
                Even with a calculator-based model, package-style guidance helps property owners understand
                what level of support may suit their property before a final plan is confirmed.
            </p>
        </div>

        <div class="row g-4">

            <div class="col-md-6 col-xl-3">
                <div class="pm-plan-card">
                    <div class="pm-plan-icon">
                        <i class="bi bi-eye-fill"></i>
                    </div>

                    <h5>Watch Plan</h5>
                    <p>
                        For minimally maintained houses or vacant lands needing basic presence and alerts.
                    </p>

                    <ul class="pm-plan-list">
                        <li><i class="bi bi-check-circle-fill"></i> 1 visit/month</li>
                        <li><i class="bi bi-check-circle-fill"></i> Exterior inspection</li>
                        <li><i class="bi bi-check-circle-fill"></i> Photo report</li>
                        <li><i class="bi bi-check-circle-fill"></i> Basic issue alert</li>
                    </ul>
                </div>
            </div>

            <div class="col-md-6 col-xl-3">
                <div class="pm-plan-card featured-plan">
                    <span class="pm-plan-ribbon">Popular</span>

                    <div class="pm-plan-icon">
                        <i class="bi bi-house-heart-fill"></i>
                    </div>

                    <h5>Care Plan</h5>
                    <p>
                        For homes, villas, and lands needing regular review and visible upkeep.
                    </p>

                    <ul class="pm-plan-list">
                        <li><i class="bi bi-check-circle-fill"></i> 2 visits/month</li>
                        <li><i class="bi bi-check-circle-fill"></i> Inspection support</li>
                        <li><i class="bi bi-check-circle-fill"></i> Garden attention</li>
                        <li><i class="bi bi-check-circle-fill"></i> Monthly report</li>
                    </ul>
                </div>
            </div>

            <div class="col-md-6 col-xl-3">
                <div class="pm-plan-card">
                    <div class="pm-plan-icon">
                        <i class="bi bi-tools"></i>
                    </div>

                    <h5>Maintain Plus</h5>
                    <p>
                        For larger or more valuable properties needing closer coordination.
                    </p>

                    <ul class="pm-plan-list">
                        <li><i class="bi bi-check-circle-fill"></i> 4 visits/month</li>
                        <li><i class="bi bi-check-circle-fill"></i> Interior/exterior checks</li>
                        <li><i class="bi bi-check-circle-fill"></i> Utility handling</li>
                        <li><i class="bi bi-check-circle-fill"></i> Priority coordination</li>
                    </ul>
                </div>
            </div>

            <div class="col-md-6 col-xl-3">
                <div class="pm-plan-card">
                    <div class="pm-plan-icon">
                        <i class="bi bi-tree-fill"></i>
                    </div>

                    <h5>Estate Plan</h5>
                    <p>
                        For large lands, estates, multi-building properties, and custom maintenance needs.
                    </p>

                    <ul class="pm-plan-list">
                        <li><i class="bi bi-check-circle-fill"></i> Custom frequency</li>
                        <li><i class="bi bi-check-circle-fill"></i> Boundary observation</li>
                        <li><i class="bi bi-check-circle-fill"></i> Land maintenance schedule</li>
                        <li><i class="bi bi-check-circle-fill"></i> Custom quotation</li>
                    </ul>
                </div>
            </div>

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


<!-- =========================================================
     APP ECOSYSTEM INTEGRATION
========================================================= -->
<section class="py-5 pm-integration-section">
    <div class="container">

        <div class="pm-section-heading text-center mb-5">
            <span class="pm-section-mini-title">
                <i class="bi bi-diagram-3-fill"></i>
                Ecosystem Advantage
            </span>

            <h2>
                Built to Connect with the Wider Ensolanka Living-in-Sri-Lanka Platform
            </h2>

            <p>
                Home in Sri Lanka is not a disconnected service. It can become a powerful support bridge
                between your affiliate network, rental owners, and future property monetization workflows.
            </p>
        </div>

        <div class="row g-4">

            <div class="col-md-6 col-lg-4">
                <div class="pm-integration-card">
                    <div class="pm-integration-icon gold">
                        <i class="bi bi-globe-central-south-asia"></i>
                    </div>

                    <h5>Affiliates / Global Ambassadors</h5>
                    <p>
                        Overseas Sri Lankans promoting the Ensolanka ecosystem may also own properties
                        in Sri Lanka and need maintenance or local care access.
                    </p>
                </div>
            </div>

            <div class="col-md-6 col-lg-4">
                <div class="pm-integration-card">
                    <div class="pm-integration-icon blue">
                        <i class="bi bi-house-door-fill"></i>
                    </div>

                    <h5>Rental Owners</h5>
                    <p>
                        A rental owner can extend the same account into property care,
                        keeping homes cleaned, monitored, and prepared before or between guests.
                    </p>
                </div>
            </div>

            <div class="col-md-6 col-lg-4">
                <div class="pm-integration-card">
                    <div class="pm-integration-icon green">
                        <i class="bi bi-arrow-left-right"></i>
                    </div>

                    <h5>Care to Rental Conversion</h5>
                    <p>
                        A maintained property can later be converted into a rental listing
                        through the `rental_app` with shared property details pre-filled.
                    </p>
                </div>
            </div>

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


<!-- =========================================================
     FAQ
========================================================= -->
<section class="py-5 pm-faq-section">
    <div class="container">

        <div class="pm-section-heading text-center mb-5">
            <span class="pm-section-mini-title">
                <i class="bi bi-question-circle-fill"></i>
                Questions
            </span>

            <h2>
                Frequently Asked Questions for Property Owners
            </h2>
        </div>

        <div class="accordion pm-custom-accordion" id="propertyManagerFaqAccordion">

            <div class="accordion-item">
                <h2 class="accordion-header" id="pmFaqOne">
                    <button class="accordion-button" type="button"
                            data-bs-toggle="collapse"
                            data-bs-target="#pmCollapseOne"
                            aria-expanded="true"
                            aria-controls="pmCollapseOne">
                        Who is Home in Sri Lanka designed for?
                    </button>
                </h2>

                <div id="pmCollapseOne"
                     class="accordion-collapse collapse show"
                     aria-labelledby="pmFaqOne"
                     data-bs-parent="#propertyManagerFaqAccordion">
                    <div class="accordion-body">
                        It is designed for Sri Lankans living overseas, local owners living far from their property,
                        rental owners, estate holders, property investors, and families who need reliable local help
                        to inspect, maintain, clean, or coordinate support for properties in Sri Lanka.
                    </div>
                </div>
            </div>


            <div class="accordion-item">
                <h2 class="accordion-header" id="pmFaqTwo">
                    <button class="accordion-button collapsed" type="button"
                            data-bs-toggle="collapse"
                            data-bs-target="#pmCollapseTwo"
                            aria-expanded="false"
                            aria-controls="pmCollapseTwo">
                        Can I use this for an empty land, not only a house?
                    </button>
                </h2>

                <div id="pmCollapseTwo"
                     class="accordion-collapse collapse"
                     aria-labelledby="pmFaqTwo"
                     data-bs-parent="#propertyManagerFaqAccordion">
                    <div class="accordion-body">
                        Yes. The app is intentionally designed to support vacant land, land with buildings,
                        homes, villas, commercial buildings, estates, and mixed properties. Empty land care can include
                        inspection, overgrowth awareness, boundary checks, and clearing coordination where required.
                    </div>
                </div>
            </div>


            <div class="accordion-item">
                <h2 class="accordion-header" id="pmFaqThree">
                    <button class="accordion-button collapsed" type="button"
                            data-bs-toggle="collapse"
                            data-bs-target="#pmCollapseThree"
                            aria-expanded="false"
                            aria-controls="pmCollapseThree">
                        Is the calculator price final?
                    </button>
                </h2>

                <div id="pmCollapseThree"
                     class="accordion-collapse collapse"
                     aria-labelledby="pmFaqThree"
                     data-bs-parent="#propertyManagerFaqAccordion">
                    <div class="accordion-body">
                        No. The future calculator should show a provisional monthly estimate based on property size,
                        service selections, building complexity, and other configured factors. A final service plan and fee
                        should be confirmed only after Ensolanka reviews the property details and operational requirements.
                    </div>
                </div>
            </div>


            <div class="accordion-item">
                <h2 class="accordion-header" id="pmFaqFour">
                    <button class="accordion-button collapsed" type="button"
                            data-bs-toggle="collapse"
                            data-bs-target="#pmCollapseFour"
                            aria-expanded="false"
                            aria-controls="pmCollapseFour">
                        Are repairs included in the monthly care fee?
                    </button>
                </h2>

                <div id="pmCollapseFour"
                     class="accordion-collapse collapse"
                     aria-labelledby="pmFaqFour"
                     data-bs-parent="#propertyManagerFaqAccordion">
                    <div class="accordion-body">
                        Routine monthly care may include inspection, reporting, cleaning, or selected maintenance support.
                        Actual repair materials, specialist labor, major clearing, renovations, pest control, and emergency callouts
                        should normally be quoted separately unless clearly included in a specific agreement.
                    </div>
                </div>
            </div>


            <div class="accordion-item">
                <h2 class="accordion-header" id="pmFaqFive">
                    <button class="accordion-button collapsed" type="button"
                            data-bs-toggle="collapse"
                            data-bs-target="#pmCollapseFive"
                            aria-expanded="false"
                            aria-controls="pmCollapseFive">
                        Can an existing rental owner or affiliate use the same login?
                    </button>
                </h2>

                <div id="pmCollapseFive"
                     class="accordion-collapse collapse"
                     aria-labelledby="pmFaqFive"
                     data-bs-parent="#propertyManagerFaqAccordion">
                    <div class="accordion-body">
                        Yes. The preferred account structure is one Django user account with multiple role profiles.
                        A rental owner, affiliate, or other existing Ensolanka user can extend the same account by adding
                        Property Care access instead of creating a duplicate account.
                    </div>
                </div>
            </div>


            <div class="accordion-item">
                <h2 class="accordion-header" id="pmFaqSix">
                    <button class="accordion-button collapsed" type="button"
                            data-bs-toggle="collapse"
                            data-bs-target="#pmCollapseSix"
                            aria-expanded="false"
                            aria-controls="pmCollapseSix">
                        Can a cared-for property later become a rental listing?
                    </button>
                </h2>

                <div id="pmCollapseSix"
                     class="accordion-collapse collapse"
                     aria-labelledby="pmFaqSix"
                     data-bs-parent="#propertyManagerFaqAccordion">
                    <div class="accordion-body">
                        Yes. A future integration can allow a Property Care owner to convert a maintained property
                        into a rental listing in the `rental_app`, using already submitted property details to reduce repeated data entry.
                    </div>
                </div>
            </div>

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


<!-- =========================================================
     FINAL CTA
========================================================= -->
<section class="py-5 bg-light">
    <div class="container">
        <div class="pm-final-cta text-center text-white">

            <h2 class="mb-3">
                Ready to Protect and Maintain Your Property in Sri Lanka?
            </h2>

            <p class="lead mb-4">
                Create your Property Care account, prepare your owner profile,
                and begin the journey toward organized remote maintenance,
                property readiness, and trusted local support through Ensolanka.
            </p>

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

                {% if is_property_manager_user %}
                    <a href="{% url 'property_manager_app:property_manager_dashboard' %}"
                       class="btn pm-hero-btn-warning btn-lg px-4">
                        Go to My Dashboard
                    </a>

                {% elif request.user.is_authenticated %}
                    <a href="{% url 'property_manager_app:property_manager_signup' %}"
                       class="btn pm-hero-btn-warning btn-lg px-4">
                        Add Care Access
                    </a>

                {% else %}
                    <a href="{% url 'property_manager_app:property_manager_signup' %}"
                       class="btn pm-hero-btn-warning btn-lg px-4">
                        Get Property Care
                    </a>
                {% endif %}

                <a href="#"
                   class="btn pm-hero-btn-outline btn-lg px-4">
                    Explore Services
                </a>

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

{% endblock %}