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

{% block title %}Property Care Calculator | Home in Sri Lanka{% endblock %}

{% block content %}

<style>
    .pm-calculator-page {
        min-height: 100vh;
        background:
            radial-gradient(circle at top left, rgba(251, 191, 36, 0.10), transparent 28%),
            radial-gradient(circle at top right, rgba(15, 118, 110, 0.10), transparent 32%),
            linear-gradient(180deg, #f8fafc 0%, #ecfdf5 42%, #ffffff 100%);
        padding: 4rem 0 5rem;
    }

    .pm-calculator-hero {
        position: relative;
        overflow: hidden;
        border-radius: 40px;
        color: #fff;
        padding: 2.8rem 2.5rem;
        background:
            radial-gradient(circle at top right, rgba(251,191,36,.18), transparent 32%),
            linear-gradient(135deg, #052e25 0%, #0f766e 58%, #115e59 100%);
        box-shadow: 0 32px 72px rgba(15,23,42,.20);
        margin-bottom: 2rem;
    }

    .pm-calculator-hero h1 {
        font-size: clamp(2.25rem, 4vw, 3.7rem);
        font-weight: 950;
        letter-spacing: -.045em;
        line-height: 1.1;
        margin-bottom: .9rem;
    }

    .pm-calculator-hero p {
        max-width: 920px;
        color: rgba(255,255,255,.88);
        line-height: 1.85;
        margin-bottom: 0;
    }

    .pm-calculator-kicker {
        display: inline-flex;
        gap: .5rem;
        align-items: center;
        padding: .52rem 1rem;
        border-radius: 999px;
        background: rgba(255,255,255,.14);
        border: 1px solid rgba(255,255,255,.22);
        color: #fef3c7;
        text-transform: uppercase;
        letter-spacing: .05em;
        font-size: .84rem;
        font-weight: 900;
        margin-bottom: 1rem;
    }

    .pm-calculator-card {
        height: 100%;
        border-radius: 32px;
        background: #fff;
        border: 1px solid #e2e8f0;
        box-shadow: 0 20px 48px rgba(15,23,42,.09);
        overflow: hidden;
    }

    .pm-calculator-card-header {
        padding: 1.6rem 1.7rem 1.15rem;
        border-bottom: 1px solid #e2e8f0;
        background:
            radial-gradient(circle at top right, rgba(15,118,110,.06), transparent 28%),
            #fff;
    }

    .pm-calculator-card-header h2,
    .pm-calculator-card-header h3 {
        color: #0f172a;
        font-weight: 950;
        margin-bottom: .4rem;
    }

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

    .pm-calculator-card-body {
        padding: 1.7rem;
    }

    .pm-calculator-step-list {
        display: grid;
        gap: 1rem;
    }

    .pm-calculator-step {
        display: flex;
        gap: .9rem;
        align-items: flex-start;
        padding: 1rem 1.05rem;
        border-radius: 24px;
        border: 1px solid #e2e8f0;
        background: #f8fafc;
    }

    .pm-calculator-step-number {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #0f766e;
        color: #fff;
        font-weight: 950;
    }

    .pm-calculator-step h5 {
        color: #0f172a;
        font-weight: 950;
        margin-bottom: .25rem;
    }

    .pm-calculator-step p {
        color: #64748b;
        line-height: 1.7;
        margin-bottom: 0;
    }

    .pm-calculator-note {
        border-radius: 26px;
        border: 1px solid #fde68a;
        background: #fffbeb;
        color: #92400e;
        padding: 1.25rem;
        line-height: 1.75;
        margin-top: 1.25rem;
    }

    .pm-calculator-actions {
        display: flex;
        flex-wrap: wrap;
        gap: .85rem;
        margin-top: 1.5rem;
    }

    .pm-calculator-actions .btn {
        border-radius: 999px;
        font-weight: 850;
        padding: .85rem 1.3rem;
    }

    .pm-estimate-preview {
        border-radius: 28px;
        background:
            radial-gradient(circle at top right, rgba(251,191,36,.10), transparent 30%),
            linear-gradient(180deg, #ffffff, #f8fafc);
        border: 1px solid #e2e8f0;
        padding: 1.4rem;
    }

    .pm-estimate-preview h4 {
        color: #0f172a;
        font-weight: 950;
    }

    .pm-estimate-preview p,
    .pm-estimate-preview li {
        color: #64748b;
        line-height: 1.75;
    }

    @media (max-width: 767.98px) {
        .pm-calculator-page {
            padding-top: 2.7rem;
        }

        .pm-calculator-hero {
            padding: 2rem 1.45rem;
            border-radius: 32px;
        }
    }
</style>

<section class="pm-calculator-page">
    <div class="container">

        <div class="pm-calculator-hero">
            <span class="pm-calculator-kicker">
                <i class="bi bi-calculator-fill"></i>
                Monthly Estimate Calculator
            </span>

            <h1>
                Understand How Property Care Estimates Are Built
            </h1>

            <p>
                The Property Care estimate is not a random flat fee. It is shaped by
                the property information you provide, the services you select, and the
                operational review that follows. This page explains the process and guides you
                to the active property-specific estimate flow.
            </p>
        </div>


        <div class="row g-4">

            <div class="col-lg-7">
                <div class="pm-calculator-card">
                    <div class="pm-calculator-card-header">
                        <h2>How the Calculator Works</h2>
                        <p>
                            The actual estimate becomes available after a property is registered
                            and service needs are selected.
                        </p>
                    </div>

                    <div class="pm-calculator-card-body">
                        <div class="pm-calculator-step-list">

                            <div class="pm-calculator-step">
                                <div class="pm-calculator-step-number">1</div>
                                <div>
                                    <h5>Add Property Details</h5>
                                    <p>
                                        Property category, city, land size, building size, occupancy condition,
                                        utilities, and other maintenance-related attributes matter.
                                    </p>
                                </div>
                            </div>

                            <div class="pm-calculator-step">
                                <div class="pm-calculator-step-number">2</div>
                                <div>
                                    <h5>Select Needed Services</h5>
                                    <p>
                                        Choose inspection visits, cleaning, garden care, vacancy checks,
                                        utility handling, emergency support, arrival preparation, and more.
                                    </p>
                                </div>
                            </div>

                            <div class="pm-calculator-step">
                                <div class="pm-calculator-step-number">3</div>
                                <div>
                                    <h5>Review the Provisional Estimate</h5>
                                    <p>
                                        The system presents an initial monthly maintenance estimate,
                                        which helps the owner understand the likely care-plan direction.
                                    </p>
                                </div>
                            </div>

                            <div class="pm-calculator-step">
                                <div class="pm-calculator-step-number">4</div>
                                <div>
                                    <h5>Receive the Final Care Plan Later</h5>
                                    <p>
                                        Ensolanka staff review the property and service request before
                                        finalizing approved monthly scope and pricing.
                                    </p>
                                </div>
                            </div>

                        </div>

                        <div class="pm-calculator-note">
                            The public calculator page explains the process. The property-specific
                            estimate page inside your dashboard is where the live estimate appears.
                        </div>

                        <div class="pm-calculator-actions">
                            {% if profile %}
                                <a href="{% url 'property_manager_app:property_care_estimate_center' %}"
                                   class="btn btn-dark">
                                    <i class="bi bi-graph-up-arrow me-2"></i>
                                    Open My Estimates
                                </a>

                                <a href="{% url 'property_manager_app:managed_property_create' %}"
                                   class="btn btn-outline-secondary">
                                    <i class="bi bi-house-add-fill me-2"></i>
                                    Add Property
                                </a>
                            {% else %}
                                <a href="{% url 'property_manager_app:property_manager_signup' %}"
                                   class="btn btn-dark">
                                    <i class="bi bi-person-plus-fill me-2"></i>
                                    Create Property Care Access
                                </a>

                                <a href="{% url 'property_manager_app:property_manager_login' %}"
                                   class="btn btn-outline-secondary">
                                    <i class="bi bi-box-arrow-in-right me-2"></i>
                                    Owner Sign In
                                </a>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>


            <div class="col-lg-5">
                <div class="pm-calculator-card">
                    <div class="pm-calculator-card-header">
                        <h3>What Affects the Estimate?</h3>
                        <p>
                            Final pricing can reflect operational workload and actual service scope.
                        </p>
                    </div>

                    <div class="pm-calculator-card-body">
                        <div class="pm-estimate-preview">
                            <h4 class="mb-3">Typical Inputs</h4>

                            <ul class="mb-0 ps-3">
                                <li>Property category and occupancy status</li>
                                <li>Land size, building size, and number of structures</li>
                                <li>Property condition and cleaning/garden needs</li>
                                <li>Visit frequency and service selection</li>
                                <li>Emergency readiness or arrival preparation needs</li>
                                <li>Operational review by Ensolanka staff</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

        </div>

    </div>
</section>

{% endblock %}