<?php
/**
 * Preview App section for Noesia Smart Waiter.
 *
 * @package Noesia_Smart_Waiter
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

( static function (  ) {

$client_demo_url  = home_url( '/client-demo/' );
$manager_demo_url = home_url( '/dashboard-demo/' );
?>

<div class="noesia-swa-section-grid">
    <div class="noesia-swa-card noesia-swa-card--span2">
        <div class="noesia-swa-card-header">
            <div>
                <h3><?php esc_html_e( 'Preview App', 'noesia-smart-waiter' ); ?></h3>
                <p class="noesia-swa-muted"><?php esc_html_e( 'Live device preview for the customer and manager flows.', 'noesia-smart-waiter' ); ?></p>
            </div>
        </div>

        <div class="noesia-swa-preview-dual">
            <div class="noesia-swa-preview-device noesia-swa-preview-device--left">
                <div class="noesia-swa-preview-header">
                    <span class="noesia-swa-preview-badge noesia-swa-preview-badge--client"><?php esc_html_e( 'The Guest', 'noesia-smart-waiter' ); ?></span>
                    <div class="noesia-swa-preview-title"><?php esc_html_e( 'Customer App', 'noesia-smart-waiter' ); ?></div>
                    <div class="noesia-swa-preview-subtitle"><?php esc_html_e( 'Scans QR & orders', 'noesia-smart-waiter' ); ?></div>
                </div>

                <div class="noesia-swa-preview-phone noesia-swa-preview-phone--left">
                    <div class="noesia-swa-preview-gloss"></div>
                    <div class="noesia-swa-preview-notch"></div>

                    <div class="noesia-swa-preview-screen">
                        <iframe
                            src="<?php echo esc_url( $client_demo_url ); ?>"
                            class="noesia-swa-preview-iframe"
                            loading="lazy"
                            title="<?php esc_attr_e( 'Customer app preview', 'noesia-smart-waiter' ); ?>"
                        ></iframe>
                    </div>

                    <div class="noesia-swa-preview-home"></div>
                </div>
            </div>

            <div class="noesia-swa-preview-device noesia-swa-preview-device--right">
                <div class="noesia-swa-preview-header">
                    <span class="noesia-swa-preview-badge noesia-swa-preview-badge--admin"><?php esc_html_e( 'The Owner', 'noesia-smart-waiter' ); ?></span>
                    <div class="noesia-swa-preview-title"><?php esc_html_e( 'Manager App', 'noesia-smart-waiter' ); ?></div>
                    <div class="noesia-swa-preview-subtitle"><?php esc_html_e( 'Receives live alerts', 'noesia-smart-waiter' ); ?></div>
                </div>

                <div class="noesia-swa-preview-phone noesia-swa-preview-phone--right">
                    <div class="noesia-swa-preview-gloss"></div>
                    <div class="noesia-swa-preview-notch"></div>

                    <div class="noesia-swa-preview-screen">
                        <iframe
                            src="<?php echo esc_url( $manager_demo_url ); ?>"
                            class="noesia-swa-preview-iframe"
                            loading="lazy"
                            title="<?php esc_attr_e( 'Manager app preview', 'noesia-smart-waiter' ); ?>"
                        ></iframe>
                    </div>

                    <div class="noesia-swa-preview-home"></div>
                </div>
            </div>
        </div>

        <div class="noesia-swa-inline-actions">
            <a class="button" href="<?php echo esc_url( $client_demo_url ); ?>" target="_blank" rel="noopener noreferrer">
                <?php esc_html_e( 'Open Customer Demo', 'noesia-smart-waiter' ); ?>
            </a>
            <a class="button" href="<?php echo esc_url( $manager_demo_url ); ?>" target="_blank" rel="noopener noreferrer">
                <?php esc_html_e( 'Open Manager Demo', 'noesia-smart-waiter' ); ?>
            </a>
        </div>

        <p class="noesia-swa-muted">
            <?php esc_html_e( 'Seeing a 404 error? To activate these live previews, please create two WordPress pages matching the URLs of the buttons above. For a true app-like experience, we highly recommend hiding your theme header and footer on these pages.', 'noesia-smart-waiter' ); ?>
        </p>
    </div>
</div>

<?php
} )(  );
