<?php include 'header.php'; ?>

<div class="px-0 py-3 md:p-2 lg:p-6">

    <!-- Header -->
    <div class="flex justify-between items-center mb-5">
        <h1 class="text-2xl font-bold text-slate-900">
            View Membership
        </h1>

        <a href="puresaas_membership_plan.php"
            class="flex items-center gap-2 px-4 py-2.5 bg-white border border-slate-200 rounded-xl shadow-sm hover:bg-slate-50 transition">
            <i class="ri-arrow-left-line"></i>
            Back
        </a>
    </div>

    <!-- Card -->
    <div class="bg-white border border-slate-200 rounded-2xl p-6">

        <h2 class="text-xl font-bold text-slate-900 mb-6">
            Membership Details
        </h2>

        <div class="grid md:grid-cols-2 gap-6">
            
            <!-- Product Name -->
<div>
    <label class="block text-sm font-medium text-slate-500 mb-2">
        Product Name
    </label>

    <div class="h-12 px-4 flex items-center rounded-xl bg-slate-50 border border-slate-200">
        BuilderPro
    </div>
</div>

            <!-- Plan Name -->
            <div>
                <label class="block text-sm font-medium text-slate-500 mb-2">
                    Plan Name
                </label>

                <div class="h-12 px-4 flex items-center rounded-xl bg-slate-50 border border-slate-200">
                    Platinum Plan
                </div>
            </div>

            <!-- Plan Price -->
            <div>
                <label class="block text-sm font-medium text-slate-500 mb-2">
                    Plan Price
                </label>

                <div class="h-12 px-4 flex items-center rounded-xl bg-slate-50 border border-slate-200">
                    ₹49,999
                </div>
            </div>

            <!-- Duration -->
            <div>
                <label class="block text-sm font-medium text-slate-500 mb-2">
                    Duration
                </label>

                <div class="h-12 px-4 flex items-center rounded-xl bg-slate-50 border border-slate-200">
                    Lifetime
                </div>
            </div>

            <!-- Status -->
            <div>
                <label class="block text-sm font-medium text-slate-500 mb-2">
                    Status
                </label>

                <div class="h-12 px-4 flex items-center">
                    <span class="px-3 py-1 text-xs font-semibold bg-green-100 text-green-600 rounded-full">
                        Active
                    </span>
                </div>
            </div>

            <!-- Features -->
            <div class="md:col-span-2">
                <label class="block text-sm font-medium text-slate-500 mb-3">
                    Plan Features
                </label>

                <div class="border border-slate-200 rounded-xl p-4 bg-slate-50">

                    <ul class="space-y-3">

                        <li class="flex items-center gap-2">
                            <i class="ri-checkbox-circle-fill text-green-500"></i>
                            Unlimited Property Listings
                        </li>

                        <li class="flex items-center gap-2">
                            <i class="ri-checkbox-circle-fill text-green-500"></i>
                            Featured Property Promotion
                        </li>

                        <li class="flex items-center gap-2">
                            <i class="ri-checkbox-circle-fill text-green-500"></i>
                            Priority Customer Support
                        </li>

                        <li class="flex items-center gap-2">
                            <i class="ri-checkbox-circle-fill text-green-500"></i>
                            Unlimited Lead Access
                        </li>

                        <li class="flex items-center gap-2">
                            <i class="ri-checkbox-circle-fill text-green-500"></i>
                            Dedicated Account Manager
                        </li>

                    </ul>

                </div>
            </div>

        </div>

    </div>

</div>

<?php include 'footer.php'; ?>