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

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

    <div class="hyro-container">

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

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

            <h2>
                Choose the plan that fits your business
            </h2>

            <p>
                Start small and upgrade whenever your business grows.
                Pricing is shown automatically in your local currency.
            </p>

        </div>

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

            <div class="homepage-pricing-location">
                <span>🇦🇪</span>

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

            <div class="homepage-billing-toggle">

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

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

            </div>

        </div>

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

            <article class="homepage-pricing-card">

                <div class="homepage-pricing-plan">
                    Basic
                </div>

                <h3>
                    Essential tools to get started
                </h3>

                <div class="homepage-price">

                    <span class="homepage-price-currency">
                        AED
                    </span>

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

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

                </div>

                <p>
                    Ideal for small businesses starting their
                    cloud journey.
                </p>

                <ul class="homepage-pricing-features">
                    <li>Core business management</li>
                    <li>Secure cloud access</li>
                    <li>Essential reports</li>
                    <li>Customer support</li>
                </ul>

                <a
                    href="#free-trial"
                    class="hyro-button hyro-button-secondary"
                >
                    Start Free Trial
                </a>

            </article>

            <article class="homepage-pricing-card featured">

                <div class="homepage-pricing-popular">
                    Most Popular
                </div>

                <div class="homepage-pricing-plan">
                    Standard
                </div>

                <h3>
                    Everything needed to grow
                </h3>

                <div class="homepage-price">

                    <span class="homepage-price-currency">
                        AED
                    </span>

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

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

                </div>

                <p>
                    Designed for growing businesses that need
                    more control and reporting.
                </p>

                <ul class="homepage-pricing-features">
                    <li>Everything in Basic</li>
                    <li>Advanced operations</li>
                    <li>More users and reports</li>
                    <li>Priority support</li>
                </ul>

                <a
                    href="#free-trial"
                    class="hyro-button hyro-button-primary"
                >
                    Start Free Trial
                </a>

            </article>

            <article class="homepage-pricing-card">

                <div class="homepage-pricing-plan">
                    Premier
                </div>

                <h3>
                    Advanced power and flexibility
                </h3>

                <div class="homepage-price">

                    <span class="homepage-price-currency">
                        AED
                    </span>

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

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

                </div>

                <p>
                    For established businesses requiring advanced
                    tools and premium support.
                </p>

                <ul class="homepage-pricing-features">
                    <li>Everything in Standard</li>
                    <li>Advanced analytics</li>
                    <li>Premium functionality</li>
                    <li>Priority onboarding</li>
                </ul>

                <a
                    href="#book-demo"
                    class="hyro-button hyro-button-secondary"
                >
                    Book Live Demo
                </a>

            </article>

        </div>

        <div class="homepage-pricing-note">

            <div>🌍</div>

            <p>
                Prices vary by business country and are displayed
                automatically in the appropriate local currency.
                Existing customer pricing can remain protected when
                future prices change.
            </p>

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

        </div>

    </div>

</section>
