<?php
/*
|--------------------------------------------------------------------------
| HYRO ONE Experience
|--------------------------------------------------------------------------
| Product   : HYRO ONE SPA
| Component : Daily Workflow Section
|--------------------------------------------------------------------------
*/
?>

<section class="spa-workflow-section">

    <div class="hyro-container">

        <div class="spa-workflow-layout">

            <div class="spa-workflow-content">

                <div class="homepage-section-eyebrow">
                    SIMPLE DAILY OPERATIONS
                </div>

                <h2>
                    From booking to payment,
                    every step stays connected
                </h2>

                <p>
                    HYRO ONE SPA keeps your reception, therapists,
                    billing and management team working through one
                    clear and connected process.
                </p>

                <div class="spa-workflow-steps">

                    <div class="spa-workflow-step">

                        <div class="spa-workflow-number">1</div>

                        <div>
                            <h3>Book the Customer</h3>

                            <p>
                                Create an appointment or register a walk-in
                                customer within seconds.
                            </p>
                        </div>

                    </div>

                    <div class="spa-workflow-step">

                        <div class="spa-workflow-number">2</div>

                        <div>
                            <h3>Assign the Therapist</h3>

                            <p>
                                Select the service, time and available
                                therapist clearly.
                            </p>
                        </div>

                    </div>

                    <div class="spa-workflow-step">

                        <div class="spa-workflow-number">3</div>

                        <div>
                            <h3>Complete the Service</h3>

                            <p>
                                Track service status, package usage
                                and product consumption.
                            </p>
                        </div>

                    </div>

                    <div class="spa-workflow-step">

                        <div class="spa-workflow-number">4</div>

                        <div>
                            <h3>Invoice and Collect Payment</h3>

                            <p>
                                Generate the invoice, apply discounts
                                and receive payment quickly.
                            </p>
                        </div>

                    </div>

                    <div class="spa-workflow-step">

                        <div class="spa-workflow-number">5</div>

                        <div>
                            <h3>Review Performance</h3>

                            <p>
                                Monitor daily sales, therapist performance
                                and customer activity.
                            </p>
                        </div>

                    </div>

                </div>

            </div>

            <div class="spa-workflow-visual">

                <div class="spa-workflow-dashboard">

                    <div class="spa-workflow-dashboard-header">

                        <div>
                            <small>Today’s Operations</small>
                            <strong>Royal Beauty Spa</strong>
                        </div>

                        <span>Live</span>

                    </div>

                    <div class="spa-workflow-progress">

                        <div class="spa-progress-row">

                            <div class="spa-progress-icon">📅</div>

                            <div class="spa-progress-details">
                                <strong>Appointments</strong>
                                <span>18 of 24 completed</span>

                                <div class="spa-progress-bar">
                                    <i style="width:75%"></i>
                                </div>
                            </div>

                        </div>

                        <div class="spa-progress-row">

                            <div class="spa-progress-icon">✂️</div>

                            <div class="spa-progress-details">
                                <strong>Services</strong>
                                <span>32 services delivered</span>

                                <div class="spa-progress-bar">
                                    <i style="width:82%"></i>
                                </div>
                            </div>

                        </div>

                        <div class="spa-progress-row">

                            <div class="spa-progress-icon">🧾</div>

                            <div class="spa-progress-details">
                                <strong>Invoices</strong>
                                <span>20 invoices completed</span>

                                <div class="spa-progress-bar">
                                    <i style="width:68%"></i>
                                </div>
                            </div>

                        </div>

                    </div>

                    <div class="spa-workflow-summary">

                        <div>
                            <span>Today’s Revenue</span>
                            <strong>AED 4,850</strong>
                        </div>

                        <div>
                            <span>Active Therapists</span>
                            <strong>8</strong>
                        </div>

                    </div>

                    <div class="spa-workflow-status">

                        <span class="active"></span>

                        All operations are running smoothly.

                    </div>

                </div>

            </div>

        </div>

    </div>

</section>
