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

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

    <!-- Header -->
    <div class="flex items-center justify-between mb-6">
        <h1 class="text-2xl font-bold text-gray-800">
            View Demo
        </h1>

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

    <!-- Card -->
    <div class="bg-white rounded-3xl border border-gray-200 overflow-hidden">

        <!-- Card Header -->
        <div class="px-6 py-5 border-b border-gray-200">
            <h2 class="text-xl font-semibold text-gray-800">
                Demo Details
            </h2>
        </div>

        <!-- Details -->
        <div class="p-6">

            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                
                <!-- Product Name -->
                <div>
                    <p class="text-xs font-semibold uppercase tracking-wider text-gray-500 mb-2">
                        Product Name
                    </p>
                    <p class="text-lg font-medium text-gray-900">
                        PureEstate
                    </p>
                </div>

                <!-- Full Name -->
                <div>
                    <p class="text-xs font-semibold uppercase tracking-wider text-gray-500 mb-2">
                        Full Name
                    </p>
                    <p class="text-lg font-medium text-gray-900">
                        Vishal Patel
                    </p>
                </div>

                <!-- Phone No -->
                <div>
                    <p class="text-xs font-semibold uppercase tracking-wider text-gray-500 mb-2">
                        Phone No
                    </p>
                    <p class="text-lg font-medium text-gray-900">
                        9876543210
                    </p>
                </div>

                <!-- Email -->
                <div>
                    <p class="text-xs font-semibold uppercase tracking-wider text-gray-500 mb-2">
                        Email
                    </p>
                    <p class="text-lg font-medium text-gray-900">
                        vishal@example.com
                    </p>
                </div>

                <!-- Demo Date -->
                <div>
                    <p class="text-xs font-semibold uppercase tracking-wider text-gray-500 mb-2">
                        Demo Date
                    </p>
                    <p class="text-lg font-medium text-gray-900">
                        15 Jun 2026
                    </p>
                </div>

                <!-- Demo Time -->
                <div>
                    <p class="text-xs font-semibold uppercase tracking-wider text-gray-500 mb-2">
                        Demo Time
                    </p>
                    <p class="text-lg font-medium text-gray-900">
                        04:00 PM
                    </p>
                </div>
                
                <!-- Reference -->
<div>
    <p class="text-xs font-semibold uppercase tracking-wider text-gray-500 mb-2">
        Reference
    </p>
    <p class="text-lg font-medium text-gray-900">
        Raj Patel
    </p>
</div>

<!-- Code -->
<div>
    <p class="text-xs font-semibold uppercase tracking-wider text-gray-500 mb-2">
        Code
    </p>
    <p class="text-lg font-medium text-gray-900">
        DEMO-001
    </p>
</div>

                <!-- Status -->
                <div>
                    <p class="text-xs font-semibold uppercase tracking-wider text-gray-500 mb-2">
                        Status
                    </p>

                    <span
                        class="inline-flex px-3 py-1 rounded-full text-sm font-semibold bg-green-100 text-green-600">
                        Completed
                    </span>
                </div>

            </div>

            <!-- Description -->
            <div class="mt-8">
                <p class="text-xs font-semibold uppercase tracking-wider text-gray-500 mb-2">
                    Description
                </p>

                <p class="text-base leading-7 text-gray-800">
                    Customer requested a product demo for the smart lock system.
                    Preferred timing is after office hours. Please call before arriving
                    and explain all available features during the demonstration.
                </p>
            </div>

        </div>

    </div>

</div>

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