<?php
/*
|--------------------------------------------------------------------------
| HYRO ONE Experience
|--------------------------------------------------------------------------
| Product   : HYRO ONE SPA
| Component : Pricing Preview
|--------------------------------------------------------------------------
*/
?>

<section class="spa-pricing-section" id="spa-pricing">

    <div class="hyro-container">

        <div class="homepage-section-heading">

            <div class="homepage-section-eyebrow">
                FLEXIBLE SPA PRICING
            </div>

            <h2>
                Choose the right plan for your spa
            </h2>

            <p>
                Start with the features you need today and upgrade
                whenever your business grows.
            </p>

        </div>

        <div class="spa-pricing-toolbar">

            <div class="spa-pricing-country">

                <span>🇦🇪</span>

                <div>
                    <small>Pricing shown for</small>
                    <strong>United Arab Emirates</strong>
                </div>

            </div>

            <div class="spa-pricing-billing">

                <button
                    type="button"
                    class="spa-billing-button active"
                    data-spa-billing="monthly"
                >
                    Monthly
                </button>

                <button
                    type="button"
                    class="spa-billing-button"
                    data-spa-billing="yearly"
                >
                    Yearly
                    <span>Save 15%</span>
                </button>

            </div>

        </div>

        <div class="spa-pricing-grid">

            <article class="spa-price-card">

                <div class="spa-price-plan">
                    Basic
                </div>

                <h3>
                    Essential spa management
                </h3>

                <div class="spa-price-amount">

                    <span>AED</span>

                    <strong
                        class="spa-price-value"
                        data-monthly="50"
                        data-yearly="510"
                    >
                        50
                    </strong>

                    <small class="spa-price-period">
                        / month
                    </small>

                </div>

                <p>
                    Ideal for small spas and salons beginning
                    their cloud journey.
                </p>

                <ul>
                    <li>Customer management</li>
                    <li>Appointments and walk-ins</li>
                    <li>Services and billing</li>
                    <li>Basic reports</li>
                    <li>Cloud access</li>
                </ul>

                <a
                    href="/experience/free-trial.php?product=SPA&plan=BASIC"
                    class="hyro-button hyro-button-secondary"
                >
                    Start Free Trial
                </a>

            </article>

            <article class="spa-price-card featured">

                <div class="spa-price-popular">
                    Most Popular
                </div>

                <div class="spa-price-plan">
                    Standard
                </div>

                <h3>
                    Complete tools for growing spas
                </h3>

                <div class="spa-price-amount">

                    <span>AED</span>

                    <strong
                        class="spa-price-value"
                        data-monthly="100"
                        data-yearly="1020"
                    >
                        100
                    </strong>

                    <small class="spa-price-period">
                        / month
                    </small>

                </div>

                <p>
                    Designed for growing spas that need stronger
                    operational control.
                </p>

                <ul>
                    <li>Everything in Basic</li>
                    <li>Packages and memberships</li>
                    <li>Inventory management</li>
                    <li>Therapist commission</li>
                    <li>Advanced reports</li>
                </ul>

                <a
                    href="/experience/free-trial.php?product=SPA&plan=STANDARD"
                    class="hyro-button hyro-button-primary"
                >
                    Start Free Trial
                </a>

            </article>

            <article class="spa-price-card">

                <div class="spa-price-plan">
                    Premier
                </div>

                <h3>
                    Advanced control and support
                </h3>

                <div class="spa-price-amount">

                    <span>AED</span>

                    <strong
                        class="spa-price-value"
                        data-monthly="150"
                        data-yearly="1530"
                    >
                        150
                    </strong>

                    <small class="spa-price-period">
                        / month
                    </small>

                </div>

                <p>
                    Built for established spas requiring advanced
                    insights and premium assistance.
                </p>

                <ul>
                    <li>Everything in Standard</li>
                    <li>Advanced analytics</li>
                    <li>Priority onboarding</li>
                    <li>Premium support</li>
                    <li>Future premium features</li>
                </ul>

                <a
                    href="/experience/book-demo.php?product=SPA&plan=PREMIER"
                    class="hyro-button hyro-button-secondary"
                >
                    Schedule a Demo
                </a>

            </article>

        </div>

        <div class="spa-pricing-message">

            <div class="spa-pricing-message-icon">
                🌍
            </div>

            <div>

                <strong>
                    Local pricing for every market
                </strong>

                <p>
                    Prices and currency will be displayed automatically
                    based on the customer’s business country. Special
                    customer pricing can also be protected for future renewals.
                </p>

            </div>

            <a href="/experience/pricing.php">
                View full pricing →
            </a>

        </div>

    </div>

</section>
