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

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

$noesia_swa_docs_plugin_assets_url = isset( $plugin_assets_url ) ? (string) $plugin_assets_url : '';
( static function ( $noesia_swa_docs_plugin_assets_url ) {
    $plugin_assets_url = $noesia_swa_docs_plugin_assets_url;

$plugin_assets_url = defined( 'NOESIA_SWA_PLUGIN_URL' ) ? trailingslashit( NOESIA_SWA_PLUGIN_URL . 'admin/assets' ) : '';
$docs_url          = 'https://noesia.io/';
$support_url       = 'https://noesia.io/contact/';
?>

<div class="noesia-swa-section-grid">
	<div class="noesia-swa-card">
		<div class="noesia-swa-card-header">
			<div>
				<h3><?php esc_html_e( 'How to Use', 'noesia-smart-waiter' ); ?></h3>
				<p class="noesia-swa-muted"><?php esc_html_e( 'Quick onboarding, documentation links and setup references for your venue.', 'noesia-smart-waiter' ); ?></p>
			</div>
		</div>

		<div class="noesia-swa-code-list">
			<div class="noesia-swa-code-item">
				<strong><?php esc_html_e( 'Quick start in 3 steps', 'noesia-smart-waiter' ); ?></strong>
				<p class="noesia-swa-muted"><?php esc_html_e( 'Design → QR / Setup → Dashboard.', 'noesia-smart-waiter' ); ?></p>
			</div>

			<div class="noesia-swa-code-item">
				<strong><?php esc_html_e( 'Need help?', 'noesia-smart-waiter' ); ?></strong>
				<p class="noesia-swa-muted"><?php esc_html_e( 'Use the Resources box below for documentation and support.', 'noesia-smart-waiter' ); ?></p>
			</div>
		</div>
	</div>

	<div class="noesia-swa-card">
		<div class="noesia-swa-card-header">
			<div>
				<div class="noesia-swa-kicker"><?php esc_html_e( 'VISUAL GUIDE', 'noesia-smart-waiter' ); ?></div><?php if ( '' !== $plugin_assets_url ) : ?>
                <div class="noesia-swa-inline-actions">
                    <a
                        class="button"
                        href="<?php echo esc_url( $plugin_assets_url . 'stand_template.jpg' ); ?>"
                        target="_blank"
                        rel="noopener noreferrer"
                    >
                        <?php esc_html_e( 'View full image ↗ ', 'noesia-smart-waiter' ); ?>
                    </a>
                </div>
            <?php endif; ?>
				<p class="noesia-swa-muted"><?php esc_html_e( 'Reference design for table stands and in-store presentation.', 'noesia-smart-waiter' ); ?></p>
			</div>
		</div>

		<?php if ( '' !== $plugin_assets_url ) : ?>
			<img
				class="noesia-swa-doc-image noesia-swa-doc-image--compact"
				src="<?php echo esc_url( $plugin_assets_url . 'stand_template.jpg' ); ?>"
				alt="<?php esc_attr_e( 'Noesia Smart Waiter stand guide', 'noesia-smart-waiter' ); ?>"
			/>
		<?php else : ?>
			<p class="noesia-swa-muted"><?php esc_html_e( 'Guide image unavailable.', 'noesia-smart-waiter' ); ?></p>
		<?php endif; ?>
	</div>

	<div class="noesia-swa-card">
		<div class="noesia-swa-card-header">
			<div>
				<div class="noesia-swa-kicker"><?php esc_html_e( 'QUICK START', 'noesia-smart-waiter' ); ?></div>
				<p class="noesia-swa-muted"><?php esc_html_e( 'Set up the plugin in a few simple steps.', 'noesia-smart-waiter' ); ?></p>
			</div>
		</div>

		<div class="noesia-swa-code-list">
			<div class="noesia-swa-code-item">
				<strong><?php esc_html_e( '1. Configure the Design tab', 'noesia-smart-waiter' ); ?></strong>
				<p class="noesia-swa-muted"><?php esc_html_e( 'Set your shop name, labels, colors and optional menu/review links.', 'noesia-smart-waiter' ); ?></p>
			</div>

			<div class="noesia-swa-code-item">
				<strong><?php esc_html_e( '2. Generate QR codes', 'noesia-smart-waiter' ); ?></strong>
				<p class="noesia-swa-muted"><?php esc_html_e( 'Use the QR / Setup section to print table-ready QR codes.', 'noesia-smart-waiter' ); ?></p>
			</div>

			<div class="noesia-swa-code-item">
				<strong><?php esc_html_e( '3. Monitor requests', 'noesia-smart-waiter' ); ?></strong>
				<p class="noesia-swa-muted"><?php esc_html_e( 'Open your dashboard page and keep it available for your staff or manager.', 'noesia-smart-waiter' ); ?></p>
			</div>
		</div>
	</div>

	<div class="noesia-swa-card">
		<div class="noesia-swa-card-header">
			<div>
				<div class="noesia-swa-kicker"><?php esc_html_e( 'SHORTCODES', 'noesia-smart-waiter' ); ?></div>
				<p class="noesia-swa-muted"><?php esc_html_e( 'These are the two core shortcodes used by the plugin.', 'noesia-smart-waiter' ); ?></p>
			</div>
		</div>

		<div class="noesia-swa-code-list">
			<div class="noesia-swa-code-item">
				<strong><?php esc_html_e( 'Customer Interface', 'noesia-smart-waiter' ); ?></strong>
				<code>[noesia_swa_client]</code>
			</div>

			<div class="noesia-swa-code-item">
				<strong><?php esc_html_e( 'Staff Dashboard', 'noesia-smart-waiter' ); ?></strong>
				<code>[noesia_swa_dashboard]</code>
			</div>
		</div>
	</div>

	<div class="noesia-swa-card noesia-swa-card--span2">
		<div class="noesia-swa-card-header">
			<div>
				<div class="noesia-swa-kicker"><?php esc_html_e( 'RESOURCES', 'noesia-smart-waiter' ); ?></div>
				<p class="noesia-swa-muted"><?php esc_html_e( 'Open the website or contact page for extra information and support.', 'noesia-smart-waiter' ); ?></p>
			</div>

			<div class="noesia-swa-inline-actions">
				<a class="button" href="<?php echo esc_url( $docs_url ); ?>" target="_blank" rel="noopener noreferrer">
					<?php esc_html_e( 'View Online Documentation', 'noesia-smart-waiter' ); ?>
				</a>
				<a class="button" href="<?php echo esc_url( $support_url ); ?>" target="_blank" rel="noopener noreferrer">
					<?php esc_html_e( 'Support', 'noesia-smart-waiter' ); ?>
				</a>
			</div>
		</div>
	</div>
</div>
<?php
} )( $noesia_swa_docs_plugin_assets_url );
