<?php
/**
 * Admin Explore Effects Page Template
 * A landing page that invites the user to the Live Customizer or the web app library.
 */

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

$seazonify_customizer_url = admin_url('customize.php?autofocus[section]=seazonify_section');
$seazonify_library_url = 'https://app.seazonify.com/library';
?>

<div class="sz-v6-workspace explore-effects-view">
    <!-- Authentic Header -->
    <header class="sz-v6-header">
        <div class="sz-v6-header-left">
            <h1 class="sz-v6-greeting"><?php esc_html_e('Explore', 'seazonify'); ?> <span class="sz-text-gradient"><?php esc_html_e('Effects', 'seazonify'); ?></span></h1>
            <p class="sz-v6-performance-msg"><?php esc_html_e('Browse through our library of magical seasonal atmospheres.', 'seazonify'); ?></p>
        </div>
        <div class="sz-v6-header-actions">
            <div class="sz-v6-sync-pill">
                <span class="sz-v6-dot online"></span> <?php esc_html_e('Real-time Sync', 'seazonify'); ?>
            </div>
        </div>
    </header>

    <div class="sz-v6-main-grid" style="margin-bottom: 32px;">
        <!-- Live Customizer Card -->
        <div class="sz-v6-card" style="max-width: 500px; width: 100%;">
            <div class="sz-v6-card-header">
                <h3><?php esc_html_e('Live Explorer', 'seazonify'); ?></h3>
                <span class="dashicons dashicons-layout sz-icon-blue"></span>
            </div>
            <div class="sz-v6-card-content">
                <p style="font-size: 14px; color: var(--sz-text-muted); line-height: 1.6; margin-bottom: 24px;"><?php esc_html_e('Open the WordPress Customizer to preview effects directly on your theme in real-time. No saving required to see the magic.', 'seazonify'); ?></p>
                <div class="sz-v6-button-wrap">
                    <a href="<?php echo esc_url($seazonify_customizer_url); ?>" class="sz-v6-btn-magical">
                        <span class="dashicons dashicons-layout"></span> <?php esc_html_e('Launch Live Explorer', 'seazonify'); ?>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Features Showcase -->
    <div class="sz-v6-card">
        <div class="sz-v6-card-header" style="border-bottom: none; padding-bottom: 0;">
            <h3><?php esc_html_e('Available Assets', 'seazonify'); ?></h3>
        </div>
        <div class="sz-v6-card-content">
            <div class="sz-v6-metrics-grid" style="margin-bottom: 0;">
                <div class="sz-v6-insight-pill sz-bg-blue-soft">
                    <div class="sz-v6-insight-icon sz-bg-blue">
                        <span class="dashicons dashicons-admin-media"></span>
                    </div>
                    <div class="sz-v6-insight-text">
                        <strong style="font-size: 13px;"><?php esc_html_e('Visual Effects', 'seazonify'); ?></strong>
                        <p style="font-size: 11px;"><?php esc_html_e('Snow, Rain, Fireworks, Hearts, and 50+ more.', 'seazonify'); ?></p>
                    </div>
                </div>
                <div class="sz-v6-insight-pill sz-bg-purple-soft">
                    <div class="sz-v6-insight-icon sz-bg-purple">
                        <span class="dashicons dashicons-performance"></span>
                    </div>
                    <div class="sz-v6-insight-text">
                        <strong style="font-size: 13px;"><?php esc_html_e('Audio Ambience', 'seazonify'); ?></strong>
                        <p style="font-size: 11px;"><?php esc_html_e('Subtle wind, bells, and holiday soundscapes.', 'seazonify'); ?></p>
                    </div>
                </div>
                <div class="sz-v6-insight-pill sz-bg-gray-soft">
                    <div class="sz-v6-insight-icon sz-bg-gray">
                        <span class="dashicons dashicons-slides"></span>
                    </div>
                    <div class="sz-v6-insight-text">
                        <strong style="font-size: 13px;"><?php esc_html_e('Combo Effects', 'seazonify'); ?></strong>
                        <p style="font-size: 11px;"><?php esc_html_e('Pre-made sets for Christmas, New Year, and Sales.', 'seazonify'); ?></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div><?php
// Inline styles moved to admin.css
?>
