
<?php
// File: templates/get-started.php
$showcases = get_option('proddisp_saved_showcases', array());
$total_showcases = count($showcases);
?>

<div class="wrap wcps-admin-get-started">
    
    <!-- Welcome Section -->
    <div class="wcps-welcome-section">
        <div class="welcome-icon">🎉</div>
        <h2 class="welcome-title"><?php esc_html_e('Welcome to Product Display!', 'product-display'); ?></h2>
        <p class="welcome-description">
            <?php esc_html_e('Transform your WordPress site with stunning product showcases. Create beautiful, responsive product displays that convert visitors into customers.', 'product-display'); ?>
        </p>
        
        <!-- Video Player Section -->
        <div class="welcome-video-container">
            <div class="video-wrapper">
                <iframe 
                    src="https://www.youtube.com/embed/M4T0jubp9h8?si=lYxg89ZMe0Fr-A9t" 
                    title="Product Display Tutorial" 
                    frameborder="0" 
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
                    allowfullscreen>
                </iframe>
            </div>
            <div class="video-overlay">
                <div class="play-button">
                    <span class="play-icon">▶</span>
                </div>
            </div>
        </div>
        
        <div class="welcome-actions">
            <a href="<?php echo esc_url(admin_url('admin.php?page=product-display-create')); ?>" class="button button-primary welcome-btn-primary">
                <span class="btn-icon">🚀</span>
                <?php esc_html_e('Create Your First Showcase', 'product-display'); ?>
            </a>
            <a href="<?php echo esc_url(admin_url('admin.php?page=product-display')); ?>" class="button welcome-btn-secondary">
                <span class="btn-icon">📋</span>
                <?php esc_html_e('View All Showcases', 'product-display'); ?>
            </a>
        </div>
    </div>

    <!-- Quick Stats -->
    <div class="wcps-stats-grid">
        <div class="stat-card">
            <div class="stat-icon">📊</div>
            <div class="stat-number"><?php echo esc_html($total_showcases); ?></div>
            <div class="stat-label"><?php esc_html_e('Total Showcases', 'product-display'); ?></div>
        </div>
        <div class="stat-card">
            <div class="stat-icon stat-icon-success">🎨</div>
            <div class="stat-number"><?php esc_html_e('8+', 'product-display'); ?></div>
            <div class="stat-label"><?php esc_html_e('Layout Types', 'product-display'); ?></div>
        </div>
        <div class="stat-card">
            <div class="stat-icon stat-icon-warning">⚡</div>
            <div class="stat-number"><?php esc_html_e('100%', 'product-display'); ?></div>
            <div class="stat-label"><?php esc_html_e('Responsive', 'product-display'); ?></div>
        </div>
        <div class="stat-card">
            <div class="stat-icon stat-icon-danger">🛡️</div>
            <div class="stat-number"><?php esc_html_e('24/7', 'product-display'); ?></div>
            <div class="stat-label"><?php esc_html_e('Support', 'product-display'); ?></div>
        </div>
    </div>

    <!-- FAQ Section -->
    <div class="wcps-faq-section">
        <h2 class="section-title">
            <span class="title-icon">❓</span>
            <?php esc_html_e('Frequently Asked Questions', 'product-display'); ?>
        </h2>
        
        <div class="faq-container">
            <div class="faq-item">
                <button class="faq-toggle" type="button">
                    <span><?php esc_html_e('How do I create my first product showcase?', 'product-display'); ?></span>
                    <span class="faq-icon">+</span>
                </button>
                <div class="faq-content">
                    <p><?php esc_html_e('Creating a showcase is easy! Click "Create Showcase" in the menu, choose your preferred layout (Grid, Slider, Masonry, etc.), select a style, and customize your settings. You can preview your showcase in real-time and save it when you\'re satisfied.', 'product-display'); ?></p>
                </div>
            </div>

            <div class="faq-item">
                <button class="faq-toggle" type="button">
                    <span><?php esc_html_e('What layouts are available?', 'product-display'); ?></span>
                    <span class="faq-icon">+</span>
                </button>
                <div class="faq-content">
                    <p><?php esc_html_e('We offer 8+ different layout types including Grid, Slider, Masonry, List, Table, Gallery, Flip, and Category Tabs. Each layout has multiple style variations to match your website\'s design perfectly.', 'product-display'); ?></p>
                </div>
            </div>

            <div class="faq-item">
                <button class="faq-toggle" type="button">
                    <span><?php esc_html_e('How do I add the showcase to my pages?', 'product-display'); ?></span>
                    <span class="faq-icon">+</span>
                </button>
                <div class="faq-content">
                    <p><?php esc_html_e('After creating your showcase, you\'ll get a shortcode. Simply copy this shortcode and paste it into any page, post, or widget where you want to display your products. The shortcode will automatically render your beautiful showcase.', 'product-display'); ?></p>
                </div>
            </div>

            <div class="faq-item">
                <button class="faq-toggle" type="button">
                    <span><?php esc_html_e('Can I customize the appearance?', 'product-display'); ?></span>
                    <span class="faq-icon">+</span>
                </button>
                <div class="faq-content">
                    <p><?php esc_html_e('Absolutely! You can customize colors, fonts, spacing, animations, hover effects, and much more. Our intuitive interface allows you to see changes in real-time as you adjust settings.', 'product-display'); ?></p>
                </div>
            </div>

            <div class="faq-item">
                <button class="faq-toggle" type="button">
                    <span><?php esc_html_e('Is it mobile responsive?', 'product-display'); ?></span>
                    <span class="faq-icon">+</span>
                </button>
                <div class="faq-content">
                    <p><?php esc_html_e('Yes! All our showcases are fully responsive and will look great on desktop, tablet, and mobile devices. The layout automatically adjusts to provide the best user experience across all screen sizes.', 'product-display'); ?></p>
                </div>
            </div>

            <div class="faq-item">
                <button class="faq-toggle" type="button">
                    <span><?php esc_html_e('How do I use the Wishlist feature?', 'product-display'); ?></span>
                    <span class="faq-icon">+</span>
                </button>
                <div class="faq-content">
                    <div class="wishlist-info">
                        <p><strong><?php esc_html_e('Wishlist functionality works in two ways:', 'product-display'); ?></strong></p>
                        
                        <h4><?php esc_html_e('1. Wishlist Buttons in Showcases', 'product-display'); ?></h4>
                        <p><?php esc_html_e('When creating a showcase, enable the "Show Wishlist Button" option. Users can click the heart icon to add/remove products from their wishlist. The wishlist data is stored per user (logged-in users) or in cookies (guests).', 'product-display'); ?></p>
                        
                        <h4><?php esc_html_e('2. Dedicated Wishlist Page', 'product-display'); ?></h4>
                        <p><?php esc_html_e('Create a new page and add this shortcode to display all wishlist items:', 'product-display'); ?></p>
                        <div class="code-block">
                            <code><?php esc_html_e('[product_wishlist title="My Wishlist"]', 'product-display'); ?></code>
                        </div>
                        
                        <h4><?php esc_html_e('Shortcode Options:', 'product-display'); ?></h4>
                        <ul class="feature-list">
                            <li><code>title</code> - <?php esc_html_e('Custom title for the wishlist page (default: "My Wishlist")', 'product-display'); ?></li>
                        </ul>
                        
                        <h4><?php esc_html_e('Features:', 'product-display'); ?></h4>
                        <ul class="feature-list">
                            <li>✅ <?php esc_html_e('Add/remove products with one click', 'product-display'); ?></li>
                            <li>✅ <?php esc_html_e('View all wishlist items on dedicated page', 'product-display'); ?></li>
                            <li>✅ <?php esc_html_e('Add wishlist items directly to cart', 'product-display'); ?></li>
                            <li>✅ <?php esc_html_e('Persistent storage (user accounts or cookies)', 'product-display'); ?></li>
                            <li>✅ <?php esc_html_e('Stock status indicators', 'product-display'); ?></li>
                            <li>✅ <?php esc_html_e('Responsive design', 'product-display'); ?></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Support & Policy Cards -->
    <div class="wcps-cards-grid">
        <!-- Premium Support Card -->
        <div class="support-card card-success">
            <div class="card-icon">🎯</div>
            <h3 class="card-title"><?php esc_html_e('Premium Support', 'product-display'); ?></h3>
            <p class="card-description">
                <?php esc_html_e('Get expert help when you need it most. Our dedicated support team is here to assist you with any questions or issues you may have.', 'product-display'); ?>
            </p>
            <ul class="card-features">
                <li>
                    <span class="feature-icon">✅</span>
                    <?php esc_html_e('Priority support response', 'product-display'); ?>
                </li>
                <li>
                    <span class="feature-icon">✅</span>
                    <?php esc_html_e('Custom development assistance', 'product-display'); ?>
                </li>
                <li>
                    <span class="feature-icon">✅</span>
                    <?php esc_html_e('Installation & setup help', 'product-display'); ?>
                </li>
                <li>
                    <span class="feature-icon">✅</span>
                    <?php esc_html_e('Bug fixes & troubleshooting', 'product-display'); ?>
                </li>
            </ul>
            <!-- <a href="<?php echo esc_url(admin_url('admin.php?page=product-display-contact')); ?>" class="card-button" target="_blank" rel="noopener noreferrer">
                <?php esc_html_e('Contact Support', 'product-display'); ?>
            </a> -->
            <a href="https://wordpress.org/support/plugin/product-display/" class="card-button" target="_blank" rel="noopener noreferrer">
                <?php esc_html_e('Contact Support', 'product-display'); ?>
            </a>
            <!-- <p>
                <?php echo esc_html__('You can also create a support ticket on the WordPress.org forum:', 'product-display'); ?>
                <a href="https://wordpress.org/support/plugin/product-display/" target="_blank" rel="noopener noreferrer">
                    <?php esc_html_e('Visit Support Forum', 'product-display'); ?>
                </a> -->
            </p>


        </div>

        <!-- Refund Policy Card -->
        <div class="support-card card-purple">
            <div class="card-icon">💰</div>
            <h3 class="card-title"><?php esc_html_e('14-Day Money Back Guarantee', 'product-display'); ?></h3>
            <p class="card-description">
                <?php esc_html_e('We\'re confident you\'ll love our plugin. If you\'re not satisfied, we offer a full refund within 14 days of purchase.', 'product-display'); ?>
            </p>
            <ul class="card-features">
                <li>
                    <span class="feature-icon">✅</span>
                    <?php esc_html_e('No questions asked refund', 'product-display'); ?>
                </li>
                <li>
                    <span class="feature-icon">✅</span>
                    <?php esc_html_e('Full purchase price returned', 'product-display'); ?>
                </li>
                <li>
                    <span class="feature-icon">✅</span>
                    <?php esc_html_e('Quick processing time', 'product-display'); ?>
                </li>
                <li>
                    <span class="feature-icon">✅</span>
                    <?php esc_html_e('No hidden fees', 'product-display'); ?>
                </li>
            </ul>
            <a href="<?php echo esc_url(admin_url('admin.php?page=product-display-contact')); ?>" class="card-button" target="_blank" rel="noopener noreferrer">
                <?php esc_html_e('Learn More', 'product-display'); ?>
            </a>
        </div>
    </div>

    <!-- Getting Started Steps -->
    <div class="wcps-steps-section">
        <h2 class="section-title">
            <span class="title-icon">🚀</span>
            <?php esc_html_e('Quick Start Guide', 'product-display'); ?>
        </h2>
        
        <div class="steps-grid">
            <div class="step-item">
                <div class="step-number step-primary">1</div>
                <h4 class="step-title"><?php esc_html_e('Create Showcase', 'product-display'); ?></h4>
                <p class="step-description"><?php esc_html_e('Choose your layout and style to get started with your first product showcase.', 'product-display'); ?></p>
            </div>
            
            <div class="step-item">
                <div class="step-number step-success">2</div>
                <h4 class="step-title"><?php esc_html_e('Customize Design', 'product-display'); ?></h4>
                <p class="step-description"><?php esc_html_e('Adjust colors, fonts, spacing, and other settings to match your brand.', 'product-display'); ?></p>
            </div>
            
            <div class="step-item">
                <div class="step-number step-warning">3</div>
                <h4 class="step-title"><?php esc_html_e('Preview & Test', 'product-display'); ?></h4>
                <p class="step-description"><?php esc_html_e('See your showcase in action and test all functionality before publishing.', 'product-display'); ?></p>
            </div>
            
            <div class="step-item">
                <div class="step-number step-danger">4</div>
                <h4 class="step-title"><?php esc_html_e('Publish & Share', 'product-display'); ?></h4>
                <p class="step-description"><?php esc_html_e('Copy the shortcode and add it to your pages to display your showcase.', 'product-display'); ?></p>
            </div>
        </div>
    </div>

    <!-- Shortcodes Section -->
    <div class="wcps-shortcodes-section">
        <h2 class="section-title">
            <span class="title-icon">📝</span>
            <?php esc_html_e('Available Shortcodes', 'product-display'); ?>
        </h2>
        
        <div class="shortcodes-grid">
            <!-- Product Showcase Shortcode -->
            <div class="shortcode-item">
                <h4 class="shortcode-title">
                    <span class="shortcode-icon">🎨</span>
                    <?php esc_html_e('Product Showcase', 'product-display'); ?>
                </h4>
                <p class="shortcode-description"><?php esc_html_e('Display your product showcases anywhere on your site using the generated shortcode from your showcase settings.', 'product-display'); ?></p>
                <div class="code-block">
                    <code><?php esc_html_e('[product_showcase id="1"]', 'product-display'); ?></code>
                </div>
                <p class="shortcode-usage"><strong><?php esc_html_e('Usage:', 'product-display'); ?></strong> <?php esc_html_e('Replace "1" with your showcase ID. You can find this in the Product Display admin area.', 'product-display'); ?></p>
            </div>

            <!-- Wishlist Shortcode -->
            <div class="shortcode-item">
                <h4 class="shortcode-title">
                    <span class="shortcode-icon">❤️</span>
                    <?php esc_html_e('Wishlist Page', 'product-display'); ?>
                </h4>
                <p class="shortcode-description"><?php esc_html_e('Create a dedicated page to display all wishlist items. Users can view, manage, and add items to cart from their wishlist.', 'product-display'); ?></p>
                <div class="code-block code-success">
                    <code><?php esc_html_e('[product_wishlist title="My Wishlist"]', 'product-display'); ?></code>
                </div>
                <div class="shortcode-params">
                    <div class="param-item">
                        <strong class="param-name"><?php esc_html_e('title', 'product-display'); ?></strong><br>
                        <span class="param-description"><?php esc_html_e('Custom page title (optional)', 'product-display'); ?></span>
                    </div>
                </div>
                <p class="shortcode-usage"><strong><?php esc_html_e('Setup:', 'product-display'); ?></strong> <?php esc_html_e('Create a new page, add this shortcode, and publish. Users can access their wishlist items here.', 'product-display'); ?></p>
            </div>

            <!-- Quick Setup Guide -->
            <div class="shortcode-item setup-tips">
                <h4 class="shortcode-title">
                    <span class="shortcode-icon">⚡</span>
                    <?php esc_html_e('Quick Setup Tips', 'product-display'); ?>
                </h4>
                <ul class="setup-list">
                    <li><?php esc_html_e('Create a "Wishlist" page and add', 'product-display'); ?> <code><?php esc_html_e('[product_wishlist]', 'product-display'); ?></code></li>
                    <li><?php esc_html_e('Add showcase shortcodes to any page, post, or widget area', 'product-display'); ?></li>
                    <li><?php esc_html_e('Enable wishlist buttons in your showcase settings for user interaction', 'product-display'); ?></li>
                    <li><?php esc_html_e('Wishlist data persists for logged-in users and guests (cookies)', 'product-display'); ?></li>
                </ul>
            </div>
        </div>
    </div>
</div>