@include('frontend.includes.header')

<div class="container py-5">
    <h1 class="mb-4 text-center">User Demo Guide</h1>

    <div class="card mb-4 shadow-sm">
        <div class="card-body">
            <h5 class="card-title">1. Unboxing & Setup</h5>
            <ul>
                <li>Carefully remove the mattress from its packaging.</li>
                <li>Place it on a flat and stable bed frame.</li>
                <li>Allow 24 hours for full expansion (if vacuum packed).</li>
            </ul>
        </div>
    </div>

    <div class="card mb-4 shadow-sm">
        <div class="card-body">
            <h5 class="card-title">2. Plugging In</h5>
            <ul>
                <li>Locate the power port on the side of the mattress base.</li>
                <li>Connect the provided power adapter securely.</li>
                <li>Plug into a standard wall socket (220V).</li>
                <li>Make sure the LED indicator turns green.</li>
            </ul>
        </div>
    </div>

    <div class="card mb-4 shadow-sm">
        <div class="card-body">
            <h5 class="card-title">3. Connecting to the App</h5>
            <ul>
                <li>Download the <strong>FeatherFresh Sleep App</strong> from the Play Store or App Store.</li>
                <li>Register/login and scan the QR code on the mattress tag.</li>
                <li>Connect via Bluetooth or Wi-Fi (follow on-screen instructions).</li>
            </ul>
        </div>
    </div>

    <div class="card mb-4 shadow-sm">
        <div class="card-body">
            <h5 class="card-title">4. Smart Features</h5>
            <ul>
                <li>AI Sleep Monitoring: Tracks breathing, movement & sleep cycles.</li>
                <li>Temperature Control: Adjusts mattress temperature for optimal comfort.</li>
                <li>Auto Adjustment: Mattress firmness adapts based on your sleep style.</li>
            </ul>
        </div>
    </div>

    <div class="card mb-4 shadow-sm">
        <div class="card-body">
            <h5 class="card-title">5. Care Instructions</h5>
            <ul>
                <li>Do not wash or submerge the AI layer.</li>
                <li>Use a protective cover to prevent stains.</li>
                <li>Wipe with a damp cloth. Avoid using chemical cleaners.</li>
            </ul>
        </div>
    </div>

    <div class="text-center mt-5">
        <a href="{{ url('/book-demo') }}" class="btn btn-primary btn-lg">
            Book Live Demo
        </a>
    </div>
</div>

@include('frontend.includes.footer')