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

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

{% block content %}

<style>
    .pm-services-page {
        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%);
        min-height: 100vh;
    }

    .pm-services-hero {
        position: relative;
        overflow: hidden;
        min-height: 640px;
        display: flex;
        align-items: center;
        background:
            linear-gradient(
                100deg,
                rgba(5, 20, 25, 0.96) 0%,
                rgba(8, 48, 44, 0.88) 45%,
                rgba(15, 118, 110, 0.70) 100%
            ),
            url("{% static 'expat_life/images/property_manager_hero.webp' %}") center center / cover no-repeat;
    }

    .pm-services-hero::after {
        content: "";
        position: absolute;
        inset: 0;
        background:
            radial-gradient(circle at 15% 25%, rgba(251, 191, 36, 0.20), transparent 30%),
            radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.10), transparent 30%);
        pointer-events: none;
    }

    .pm-services-hero-content {
        position: relative;
        z-index: 2;
        padding: 5rem 0;
        color: #fff;
    }

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

    .pm-services-hero h1 {
        font-size: clamp(2.4rem, 5vw, 4.2rem);
        font-weight: 950;
        letter-spacing: -.045em;
        line-height: 1.08;
        margin-bottom: 1rem;
    }

    .pm-services-hero p {
        color: rgba(255,255,255,.88);
        max-width: 850px;
        line-height: 1.84;
        font-size: 1.08rem;
        margin-bottom: 1.8rem;
    }

    .pm-services-hero-actions {
        display: flex;
        flex-wrap: wrap;
        gap: .85rem;
    }

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

    .pm-services-section {
        padding: 5rem 0;
    }

    .pm-section-heading {
        max-width: 860px;
        margin: 0 auto 2.5rem;
        text-align: center;
    }

    .pm-section-kicker {
        display: inline-flex;
        align-items: center;
        gap: .45rem;
        color: #0f766e;
        font-size: .82rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: .05em;
        margin-bottom: .55rem;
    }

    .pm-section-heading h2 {
        color: #0f172a;
        font-weight: 950;
        font-size: clamp(2rem, 3.8vw, 3rem);
        letter-spacing: -.035em;
        margin-bottom: .7rem;
    }

    .pm-section-heading p {
        color: #64748b;
        line-height: 1.8;
        margin-bottom: 0;
    }

    .pm-service-card {
        height: 100%;
        border-radius: 30px;
        background: #fff;
        border: 1px solid #e2e8f0;
        box-shadow: 0 18px 42px rgba(15,23,42,.08);
        padding: 1.55rem;
        transition: all .22s ease;
    }

    .pm-service-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 28px 58px rgba(15,23,42,.12);
    }

    .pm-service-icon {
        width: 64px;
        height: 64px;
        border-radius: 22px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1.55rem;
        background: #ecfdf5;
        color: #0f766e;
        margin-bottom: 1rem;
    }

    .pm-service-card:nth-child(2n) .pm-service-icon {
        background: #fef3c7;
        color: #b45309;
    }

    .pm-service-card h5 {
        color: #0f172a;
        font-weight: 950;
        margin-bottom: .55rem;
    }

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

    .pm-process-panel {
        border-radius: 38px;
        padding: 2.5rem;
        color: #fff;
        background:
            radial-gradient(circle at top right, rgba(251,191,36,.16), transparent 30%),
            linear-gradient(135deg, #052e25, #0f766e);
        box-shadow: 0 28px 62px rgba(15,23,42,.18);
    }

    .pm-process-panel h2 {
        font-weight: 950;
        margin-bottom: 1rem;
    }

    .pm-process-panel p {
        color: rgba(255,255,255,.86);
        line-height: 1.8;
    }

    .pm-process-list {
        display: grid;
        gap: 1rem;
        margin-top: 1.5rem;
    }

    .pm-process-item {
        display: flex;
        gap: .85rem;
        align-items: flex-start;
        background: rgba(255,255,255,.11);
        border: 1px solid rgba(255,255,255,.16);
        border-radius: 22px;
        padding: 1rem 1.1rem;
    }

    .pm-process-item span {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #fbbf24;
        color: #111827;
        font-weight: 950;
        flex-shrink: 0;
    }

    .pm-process-item strong {
        display: block;
        margin-bottom: .25rem;
    }

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

        .pm-services-hero-content {
            padding: 4rem 0;
        }

        .pm-process-panel {
            padding: 1.6rem;
            border-radius: 30px;
        }
    }
</style>

<section class="pm-services-page">

    <section class="pm-services-hero">
        <div class="container pm-services-hero-content">
            <span class="pm-services-badge">
                <i class="bi bi-house-gear-fill"></i>
                Property Care Services
            </span>

            <h1>
                Structured Care Services<br>
                for Sri Lankan Property Owners
            </h1>

            <p>
                Home in Sri Lanka Property Care is built around practical support for
                owners who live overseas, travel often, or remain away from their property.
                Select services based on your property condition, usage, and peace-of-mind needs.
            </p>

            <div class="pm-services-hero-actions">
                <a href="{% url 'property_manager_app:property_manager_signup' %}"
                   class="btn btn-warning">
                    <i class="bi bi-person-plus-fill me-2"></i>
                    Create Property Care Access
                </a>

                <a href="{% url 'property_manager_app:property_care_calculator_page' %}"
                   class="btn btn-outline-light">
                    <i class="bi bi-calculator-fill me-2"></i>
                    Explore Calculator
                </a>
            </div>
        </div>
    </section>


    <section class="pm-services-section">
        <div class="container">

            <div class="pm-section-heading">
                <span class="pm-section-kicker">
                    <i class="bi bi-ui-checks-grid"></i>
                    Service Categories
                </span>

                <h2>Core Property Care Service Types</h2>

                <p>
                    These service areas form the initial care catalogue. Final service scope,
                    frequency, and price can later be reviewed and confirmed by the Ensolanka operations team.
                </p>
            </div>

            <div class="row g-4">

                <div class="col-md-6 col-xl-4">
                    <div class="pm-service-card">
                        <div class="pm-service-icon">
                            <i class="bi bi-clipboard-check-fill"></i>
                        </div>
                        <h5>Inspection Visits</h5>
                        <p>
                            Scheduled site visits to observe overall property condition,
                            access points, visible risks, and general maintenance needs.
                        </p>
                    </div>
                </div>

                <div class="col-md-6 col-xl-4">
                    <div class="pm-service-card">
                        <div class="pm-service-icon">
                            <i class="bi bi-stars"></i>
                        </div>
                        <h5>Interior Cleaning</h5>
                        <p>
                            Cleaning support for internal spaces where regular attention
                            is needed before owner visits, inspections, or occupancy.
                        </p>
                    </div>
                </div>

                <div class="col-md-6 col-xl-4">
                    <div class="pm-service-card">
                        <div class="pm-service-icon">
                            <i class="bi bi-brush-fill"></i>
                        </div>
                        <h5>Exterior Cleaning</h5>
                        <p>
                            Care for exterior surfaces, visible outdoor areas,
                            entrances, verandas, and other surroundings where applicable.
                        </p>
                    </div>
                </div>

                <div class="col-md-6 col-xl-4">
                    <div class="pm-service-card">
                        <div class="pm-service-icon">
                            <i class="bi bi-tree-fill"></i>
                        </div>
                        <h5>Garden & Grass Cutting</h5>
                        <p>
                            Routine garden attention, grass cutting, and outdoor
                            appearance management based on property requirements.
                        </p>
                    </div>
                </div>

                <div class="col-md-6 col-xl-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>
                            Support for undeveloped or partly developed land where
                            monitoring, grass care, or periodic attention is useful.
                        </p>
                    </div>
                </div>

                <div class="col-md-6 col-xl-4">
                    <div class="pm-service-card">
                        <div class="pm-service-icon">
                            <i class="bi bi-receipt-cutoff"></i>
                        </div>
                        <h5>Utility Bill Handling</h5>
                        <p>
                            Organized assistance related to utility continuity,
                            bill monitoring references, and owner coordination.
                        </p>
                    </div>
                </div>

                <div class="col-md-6 col-xl-4">
                    <div class="pm-service-card">
                        <div class="pm-service-icon">
                            <i class="bi bi-shield-check"></i>
                        </div>
                        <h5>Security / Vacancy Checks</h5>
                        <p>
                            Visual checks for locked access, boundary concerns,
                            vacancy-related risks, and unusual property conditions.
                        </p>
                    </div>
                </div>

                <div class="col-md-6 col-xl-4">
                    <div class="pm-service-card">
                        <div class="pm-service-icon">
                            <i class="bi bi-exclamation-triangle-fill"></i>
                        </div>
                        <h5>Emergency Response Support</h5>
                        <p>
                            Initial support when urgent concerns arise and the owner
                            needs a trusted local team to assess or coordinate next steps.
                        </p>
                    </div>
                </div>

                <div class="col-md-6 col-xl-4">
                    <div class="pm-service-card">
                        <div class="pm-service-icon">
                            <i class="bi bi-door-open-fill"></i>
                        </div>
                        <h5>Arrival Preparation</h5>
                        <p>
                            Readiness support before an owner, family member,
                            or approved visitor arrives at the property.
                        </p>
                    </div>
                </div>

            </div>

        </div>
    </section>


    <section class="pb-5">
        <div class="container">
            <div class="pm-process-panel">
                <h2>How Service Selection Works</h2>

                <p>
                    The full Property Care process is designed to become personal to each property.
                    Owners first register property details, then select the services they are interested in.
                    The platform provides a provisional monthly estimate, and the operations team can later
                    review and finalize a care plan.
                </p>

                <div class="pm-process-list">
                    <div class="pm-process-item">
                        <span>1</span>
                        <div>
                            <strong>Create Property Care Access</strong>
                            Register as a Property Care owner.
                        </div>
                    </div>

                    <div class="pm-process-item">
                        <span>2</span>
                        <div>
                            <strong>Add Your Property</strong>
                            Provide location, land, building, images, and supporting documents.
                        </div>
                    </div>

                    <div class="pm-process-item">
                        <span>3</span>
                        <div>
                            <strong>Select Needed Services</strong>
                            Choose care services relevant to your property.
                        </div>
                    </div>

                    <div class="pm-process-item">
                        <span>4</span>
                        <div>
                            <strong>Review the Estimate</strong>
                            See a provisional monthly maintenance estimate before staff finalization.
                        </div>
                    </div>
                </div>

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

</section>

{% endblock %}