<?php
/**
 * Theme Upsell Page
 * 
 * @package Web Designer Portfolio
 */

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

/**
 * Add theme upsell page to admin menu
 */
add_action( 'admin_menu', 'web_designer_portfolio_add_theme_page' );
function web_designer_portfolio_add_theme_page() {
    add_theme_page(
        __( 'Upgrade to PRO', 'web-designer-portfolio' ),
        __( 'Upgrade to PRO', 'web-designer-portfolio' ),
        'manage_options',
        'web-designer-portfolio-pro',
        'web_designer_portfolio_pro_page_callback'
    );
}
/**
 * Render theme upsell page
 */
function web_designer_portfolio_pro_page_callback() {
    ?>
    <div class="wrap ot-pro-wrap">
        <h1><?php esc_html_e('Upgrade to Web Designer Portfolio Pro 🚀', 'web-designer-portfolio'); ?></h1>
        
        <div class="ot-pro-hero">
            <div class="hero-content">
                <div class="hero-left">
                    <h2><?php esc_html_e('Take Your Web Designer Portfolio Business to the Next Level', 'web-designer-portfolio'); ?></h2>
                    <p class="subtitle"><?php esc_html_e('Get access to premium features, advanced layouts, and priority support', 'web-designer-portfolio'); ?></p>
                    <div class="button-group">
                        <?php
                        // Check if theme is FSE (block theme) or customizer based
                        if ( function_exists( 'wp_is_block_theme' ) && wp_is_block_theme() ) {
                            // Block theme - link to Site Editor
                            $editor_url = admin_url( 'site-editor.php' );
                            $editor_text = __('Site Editor', 'web-designer-portfolio');
                            $editor_icon = 'dashicons-layout';
                        } else {
                            // Classic theme - link to Customizer
                            $editor_url = admin_url( 'customize.php' );
                            $editor_text = __('Customize', 'web-designer-portfolio');
                            $editor_icon = 'dashicons-admin-customizer';
                        }
                        // Check if the Ovation Elements plugin is active
                        $is_plugin_active = is_plugin_active('ovation-elements/ovation-elements.php');
                        ?>
                        <a class="button button-hero button-primary theme-install" id="install-activate-button" href="#" style="display:<?php echo $is_plugin_active ? 'none' : 'inline-flex'; ?> !important;">
                            <span class="dashicons dashicons-download"></span>
                            <?php _e('Begin Installation', 'web-designer-portfolio'); ?>
                        </a>
                        <a class="button button-hero button-success" id="view-site-button" href="<?php echo esc_url( home_url('/') ); ?>" target="_blank" style="display:<?php echo $is_plugin_active ? 'inline-flex' : 'none'; ?> !important;">
                            <span class="dashicons dashicons-admin-site"></span>
                            <?php _e('View Site', 'web-designer-portfolio'); ?>
                        </a>
                        <a target="_blank" href="<?php echo esc_url( $editor_url ); ?>" class="button button-hero button-customize" style="display:<?php echo $is_plugin_active ? 'inline-flex' : 'none'; ?> !important;">
                            <span class="dashicons <?php echo esc_attr( $editor_icon ); ?>"></span>
                            <?php echo esc_html( $editor_text ); ?>
                        </a>
                        <a href="<?php echo esc_url( WEB_DESIGNER_PORTFOLIO_LIVE_DEMO ); ?>" target="_blank" class="button button-hero button-demo">
                            <span class="dashicons dashicons-visibility"></span>
                            <?php esc_html_e('Live Demo', 'web-designer-portfolio'); ?>
                        </a>
                        <a href="<?php echo esc_url( WEB_DESIGNER_PORTFOLIO_BUY_PRO ); ?>" target="_blank" class="button button-primary button-hero button-pro">
                            <span class="dashicons dashicons-star-filled"></span>
                            <?php esc_html_e('Get Pro Theme', 'web-designer-portfolio'); ?>
                        </a>
                        <a href="<?php echo esc_url( WEB_DESIGNER_PORTFOLIO_FREE_DOC ); ?>" target="_blank" class="button button-hero button-docs">
                            <span class="dashicons dashicons-book"></span>
                            <?php esc_html_e('Documentation', 'web-designer-portfolio'); ?>
                        </a>
                        <a href="<?php echo esc_url( WEB_DESIGNER_PORTFOLIO_BUNDLE_LINK ); ?>" target="_blank" class="button button-hero button-bundle">
                            <span class="dashicons dashicons-cart"></span>
                            <?php esc_html_e('WordPress Theme Bundle', 'web-designer-portfolio'); ?>
                        </a>
                    </div>
                </div>
                <div class="hero-right">
                    <img src="<?php echo esc_url(get_template_directory_uri()); ?>/screenshot.png" alt="<?php esc_attr_e('Web Designer Portfolio Theme Screenshot', 'web-designer-portfolio'); ?>" class="theme-screenshot">
                </div>
            </div>
        </div>

        <div class="ot-pro-features">
            <h2><?php esc_html_e('Why Upgrade to Pro?', 'web-designer-portfolio'); ?></h2>
            
            <div class="feature-grid">
                <div class="feature-box">
                    <span class="dashicons dashicons-layout"></span>
                    <h3><?php esc_html_e('Different styling Options', 'web-designer-portfolio'); ?></h3>
                    <p><?php esc_html_e('This content will change based on different styling options.', 'web-designer-portfolio'); ?></p>
                </div>
                
                <div class="feature-box">
                    <span class="dashicons dashicons-admin-customizer"></span>
                    <h3><?php esc_html_e('Section Reordering Option', 'web-designer-portfolio'); ?></h3>
                    <p><?php esc_html_e('Sections can be reordered or rearranged as per your preference.', 'web-designer-portfolio'); ?></p>
                </div>
                
                <div class="feature-box">
                    <span class="dashicons dashicons-editor-table"></span>
                    <h3><?php esc_html_e('Footer Builder', 'web-designer-portfolio'); ?></h3>
                    <p><?php esc_html_e('Create custom footers with advanced widgets', 'web-designer-portfolio'); ?></p>
                </div>
                
                <div class="feature-box">
                    <span class="dashicons dashicons-art"></span>
                    <h3><?php esc_html_e('Typography Controls', 'web-designer-portfolio'); ?></h3>
                    <p><?php esc_html_e('Full control over fonts, sizes, and text styling', 'web-designer-portfolio'); ?></p>
                </div>
                
                <div class="feature-box">
                    <span class="dashicons dashicons-cart"></span>
                    <h3><?php esc_html_e('WooCommerce Styling', 'web-designer-portfolio'); ?></h3>
                    <p><?php esc_html_e('Advanced WooCommerce integration with custom product layouts', 'web-designer-portfolio'); ?></p>
                </div>
                
                <div class="feature-box">
                    <span class="dashicons dashicons-admin-tools"></span>
                    <h3><?php esc_html_e('Advanced Options', 'web-designer-portfolio'); ?></h3>
                    <p><?php esc_html_e('Advanced theme options available for themes', 'web-designer-portfolio'); ?></p>
                </div>
                
                <div class="feature-box">
                    <span class="dashicons dashicons-performance"></span>
                    <h3><?php esc_html_e('Performance Optimized', 'web-designer-portfolio'); ?></h3>
                    <p><?php esc_html_e('3X faster loading with optimized code and assets', 'web-designer-portfolio'); ?></p>
                </div>
                
                <div class="feature-box">
                    <span class="dashicons dashicons-sos"></span>
                    <h3><?php esc_html_e('Priority Support', 'web-designer-portfolio'); ?></h3>
                    <p><?php esc_html_e('Get expert help within 24 hours through our priority support system', 'web-designer-portfolio'); ?></p>
                </div>
                
                <div class="feature-box">
                    <span class="dashicons dashicons-admin-appearance"></span>
                    <h3><?php esc_html_e('Unlimited Color Schemes', 'web-designer-portfolio'); ?></h3>
                    <p><?php esc_html_e('Customize every color to match your brand identity with unlimited color options', 'web-designer-portfolio'); ?></p>
                </div>
                
                <div class="feature-box">
                    <span class="dashicons dashicons-download"></span>
                    <h3><?php esc_html_e('One-Click Demo Import', 'web-designer-portfolio'); ?></h3>
                    <p><?php esc_html_e('Import complete demo content with just one click and get started instantly', 'web-designer-portfolio'); ?></p>
                </div>
            </div>
        </div>

        <div class="ot-pro-comparison">
            <h2><?php esc_html_e('Free vs Pro Comparison', 'web-designer-portfolio'); ?></h2>
            
            <table class="comparison-table">
                <thead>
                    <tr>
                        <th><?php esc_html_e('Feature', 'web-designer-portfolio'); ?></th>
                        <th><?php esc_html_e('Free', 'web-designer-portfolio'); ?></th>
                        <th class="pro-col"><?php esc_html_e('Pro', 'web-designer-portfolio'); ?></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><?php esc_html_e('Typography Controls', 'web-designer-portfolio'); ?></td>
                        <td><?php esc_html_e('Limited', 'web-designer-portfolio'); ?></td>
                        <td class="pro-col"><?php esc_html_e('Full Control', 'web-designer-portfolio'); ?></td>
                    </tr>
                    <tr>
                        <td><?php esc_html_e('WooCommerce Styling', 'web-designer-portfolio'); ?></td>
                        <td>❌</td>
                        <td class="pro-col">✅</td>
                    </tr>
                    <tr>
                        <td><?php esc_html_e('Custom Widgets', 'web-designer-portfolio'); ?></td>
                        <td><?php esc_html_e('Basic', 'web-designer-portfolio'); ?></td>
                        <td class="pro-col"><?php esc_html_e('Advanced', 'web-designer-portfolio'); ?></td>
                    </tr>
                    <tr>
                        <td><?php esc_html_e('Color Schemes', 'web-designer-portfolio'); ?></td>
                        <td><?php esc_html_e('Limited', 'web-designer-portfolio'); ?></td>
                        <td class="pro-col"><?php esc_html_e('Unlimited', 'web-designer-portfolio'); ?></td>
                    </tr>
                    <tr>
                        <td><?php esc_html_e('Demo Import', 'web-designer-portfolio'); ?></td>
                        <td>❌</td>
                        <td class="pro-col">✅</td>
                    </tr>
                    <tr>
                        <td><?php esc_html_e('Priority Support', 'web-designer-portfolio'); ?></td>
                        <td>❌</td>
                        <td class="pro-col">✅</td>
                    </tr>
                    <tr>
                        <td><?php esc_html_e('Custom Post Types', 'web-designer-portfolio'); ?></td>
                        <td>❌</td>
                        <td class="pro-col">✅</td>
                    </tr>
                    <tr>
                        <td><?php esc_html_e('Page Builder Integration', 'web-designer-portfolio'); ?></td>
                        <td><?php esc_html_e('Gutenberg', 'web-designer-portfolio'); ?></td>
                        <td class="pro-col"><?php esc_html_e('Gutenberg/Customizer', 'web-designer-portfolio'); ?></td>
                    </tr>
                    <tr>
                        <td><?php esc_html_e('Speed Optimization', 'web-designer-portfolio'); ?></td>
                        <td><?php esc_html_e('Standard', 'web-designer-portfolio'); ?></td>
                        <td class="pro-col"><?php esc_html_e('Advanced (3X Faster)', 'web-designer-portfolio'); ?></td>
                    </tr>
                    <tr>
                        <td><?php esc_html_e('Sticky Header', 'web-designer-portfolio'); ?></td>
                        <td>❌</td>
                        <td class="pro-col">✅</td>
                    </tr>
                    <tr>
                        <td><?php esc_html_e('Preloader Options', 'web-designer-portfolio'); ?></td>
                        <td>❌</td>
                        <td class="pro-col">✅</td>
                    </tr>
                    <tr>
                        <td><?php esc_html_e('Blog Layouts', 'web-designer-portfolio'); ?></td>
                        <td><?php esc_html_e('1', 'web-designer-portfolio'); ?></td>
                        <td class="pro-col"><?php esc_html_e('Advanced', 'web-designer-portfolio'); ?></td>
                    </tr>
                </tbody>
            </table>
        </div>

        <div class="ot-pro-testimonials">
            <h2><?php esc_html_e('What Our Users Say', 'web-designer-portfolio'); ?></h2>
            
        <div class="testimonial-grid">
            <div class="testimonial-box">
                <div class="stars">⭐⭐⭐⭐⭐</div>
                <p><?php esc_html_e('"I was looking for a clean and professional theme for my web designer portfolio website and this theme delivered exactly that. Setup was quick and the layout looks very modern."', 'web-designer-portfolio'); ?></p>
                <span class="author"><?php esc_html_e('- John D.', 'web-designer-portfolio'); ?></span>
            </div>

            <div class="testimonial-box">
                <div class="stars">⭐⭐⭐⭐</div>
                <p><?php esc_html_e('"The theme design is professional and easy to customize. The documentation helped me set up my accounting website without any issues."', 'web-designer-portfolio'); ?></p>
                <span class="author"><?php esc_html_e('- Sarah M.', 'web-designer-portfolio'); ?></span>
            </div>

            <div class="testimonial-box">
                <div class="stars">⭐⭐⭐⭐⭐</div>
                <p><?php esc_html_e('"Very flexible and beginner-friendly. I was able to adjust colors, sections, and layouts directly from the Customizer. Highly recommended."', 'web-designer-portfolio'); ?></p>
                <span class="author"><?php esc_html_e('- Michael R.', 'web-designer-portfolio'); ?></span>
            </div>

            <div class="testimonial-box">
                <div class="stars">⭐⭐⭐⭐</div>
                <p><?php esc_html_e('"The mobile responsive design works perfectly. Most of my clients visit from their phones, and the site looks clean and professional."', 'web-designer-portfolio'); ?></p>
                <span class="author"><?php esc_html_e('- Emily T.', 'web-designer-portfolio'); ?></span>
            </div>

            <div class="testimonial-box">
                <div class="stars">⭐⭐⭐⭐⭐</div>
                <p><?php esc_html_e('"Great theme for tax professionals. The service sections and homepage layout helped me present my services clearly to potential clients."', 'web-designer-portfolio'); ?></p>
                <span class="author"><?php esc_html_e('- David L.', 'web-designer-portfolio'); ?></span>
            </div>

            <div class="testimonial-box">
                <div class="stars">⭐⭐⭐⭐</div>
                <p><?php esc_html_e('"Customer support is very helpful and responsive. They guided me during setup and solved my issue quickly."', 'web-designer-portfolio'); ?></p>
                <span class="author"><?php esc_html_e('- Jennifer K.', 'web-designer-portfolio'); ?></span>
            </div>

            <div class="testimonial-box">
                <div class="stars">⭐⭐⭐⭐⭐</div>
                <p><?php esc_html_e('"Fast loading and SEO friendly. After launching my website with this theme, I started receiving more inquiries from clients."', 'web-designer-portfolio'); ?></p>
                <span class="author"><?php esc_html_e('- Robert H.', 'web-designer-portfolio'); ?></span>
            </div>

            <div class="testimonial-box">
                <div class="stars">⭐⭐⭐⭐</div>
                <p><?php esc_html_e('"A very good theme with useful features for web designer portfolio businesses. Easy to install and configure."', 'web-designer-portfolio'); ?></p>
                <span class="author"><?php esc_html_e('- Lisa P.', 'web-designer-portfolio'); ?></span>
            </div>
        </div>
        </div>

        <div class="ot-pro-cta">
            <h2><?php esc_html_e('Ready to Upgrade?', 'web-designer-portfolio'); ?></h2>
            <p><?php esc_html_e('Join hundreds of satisfied customers who upgraded to Pro', 'web-designer-portfolio'); ?></p>
            <a href="<?php echo esc_url( WEB_DESIGNER_PORTFOLIO_BUY_PRO ); ?>" target="_blank" class="button button-primary button-hero">
                <?php esc_html_e('Get Web Designer Portfolio Pro Now', 'web-designer-portfolio'); ?> →
            </a>
        </div>

        <div class="ot-pro-footer">
            <p><?php printf( __('Need help? Contact our <a href="%s" target="_blank">support</a> team anytime.', 'web-designer-portfolio'), esc_url( WEB_DESIGNER_PORTFOLIO_SUPPORT ) ); ?></p>
        </div>
    </div>
    <?php
}
