<?php
/**
 * What's New admin page template
 * Shows changelog and new features after major plugin update
 *
 * @package Event_Monster
 * @since 4.0.0
 */

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

$current_version = defined('EM_FREE_VERSION') ? EM_FREE_VERSION : '4.0.0';
?>

<div class="wrap" style="max-width: 900px; margin: 20px auto;">
    <!-- Header -->
    <div style="background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); border-radius: 12px; padding: 40px; margin-bottom: 30px; color: white;">
        <div style="display: flex; align-items: center; gap: 20px;">
            <div style="background: rgba(255,255,255,0.2); border-radius: 12px; padding: 16px;">
                <svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M2 17L12 22L22 17" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M2 12L12 17L22 12" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </div>
            <div>
                <h1 style="margin: 0; font-size: 28px; font-weight: 700;">
                    <?php printf(__('What\'s New in Event Monster %s', 'event-monster'), $current_version); ?>
                </h1>
                <p style="margin: 8px 0 0; opacity: 0.9; font-size: 16px;">
                    <?php _e('A major update with a completely redesigned experience', 'event-monster'); ?>
                </p>
            </div>
        </div>
    </div>

    <!-- Important Notice -->
    <div style="background: #fef3c7; border: 1px solid #f59e0b; border-radius: 8px; padding: 16px 20px; margin-bottom: 24px;">
        <div style="display: flex; gap: 12px;">
            <span style="color: #d97706; font-size: 20px;">⚠️</span>
            <div>
                <h3 style="margin: 0 0 8px; color: #92400e; font-size: 14px; font-weight: 600;">
                    <?php _e('Important: Shortcode Changes', 'event-monster'); ?>
                </h3>
                <p style="margin: 0; color: #92400e; font-size: 13px;">
                    <?php _e('Your existing <code>[EM id="X"]</code> shortcodes will continue to work. The old <code>[EM]</code> list shortcode is now automatically mapped to the new design.', 'event-monster'); ?>
                    <?php _e('For the new list view design, you can also use <code>[EM-LIST]</code>.', 'event-monster'); ?>
                </p>
            </div>
        </div>
    </div>

    <!-- Key Features Grid -->
    <h2 style="font-size: 20px; font-weight: 600; margin-bottom: 20px; color: #1e293b;">
        <?php _e('✨ Key Highlights', 'event-monster'); ?>
    </h2>
    
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-bottom: 40px;">
        
        <!-- Feature 1 -->
        <div style="background: white; border: 1px solid #e2e8f0; border-radius: 8px; padding: 24px;">
            <div style="width: 40px; height: 40px; background: #dbeafe; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px;">
                <span style="font-size: 20px;">🎨</span>
            </div>
            <h3 style="margin: 0 0 8px; font-size: 16px; font-weight: 600; color: #1e293b;">
                <?php _e('Modern UI Design', 'event-monster'); ?>
            </h3>
            <p style="margin: 0; color: #64748b; font-size: 14px; line-height: 1.5;">
                <?php _e('Completely redesigned admin interface and frontend templates with a fresh, modern look.', 'event-monster'); ?>
            </p>
        </div>

        <!-- Feature 2 -->
        <div style="background: white; border: 1px solid #e2e8f0; border-radius: 8px; padding: 24px;">
            <div style="width: 40px; height: 40px; background: #dcfce7; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px;">
                <span style="font-size: 20px;">📋</span>
            </div>
            <h3 style="margin: 0 0 8px; font-size: 16px; font-weight: 600; color: #1e293b;">
                <?php _e('New Event List View', 'event-monster'); ?>
            </h3>
            <p style="margin: 0; color: #64748b; font-size: 14px; line-height: 1.5;">
                <?php _e('Beautiful card-based event list with filtering, search, and multiple column layouts.', 'event-monster'); ?>
            </p>
        </div>

        <!-- Feature 3 -->
        <div style="background: white; border: 1px solid #e2e8f0; border-radius: 8px; padding: 24px;">
            <div style="width: 40px; height: 40px; background: #fef3c7; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px;">
                <span style="font-size: 20px;">🗓️</span>
            </div>
            <h3 style="margin: 0 0 8px; font-size: 16px; font-weight: 600; color: #1e293b;">
                <?php _e('Calendar View', 'event-monster'); ?>
            </h3>
            <p style="margin: 0; color: #64748b; font-size: 14px; line-height: 1.5;">
                <?php _e('New calendar shortcode [EM-CALENDAR] to display events in an interactive calendar view.', 'event-monster'); ?>
            </p>
        </div>

        <!-- Feature 4 -->
        <div style="background: white; border: 1px solid #e2e8f0; border-radius: 8px; padding: 24px;">
            <div style="width: 40px; height: 40px; background: #f3e8ff; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px;">
                <span style="font-size: 20px;">🎛️</span>
            </div>
            <h3 style="margin: 0 0 8px; font-size: 16px; font-weight: 600; color: #1e293b;">
                <?php _e('Layout Builder', 'event-monster'); ?>
            </h3>
            <p style="margin: 0; color: #64748b; font-size: 14px; line-height: 1.5;">
                <?php _e('Drag-and-drop layout builder to customize how your event pages look.', 'event-monster'); ?>
            </p>
        </div>

        <!-- Feature 5 -->
        <div style="background: white; border: 1px solid #e2e8f0; border-radius: 8px; padding: 24px;">
            <div style="width: 40px; height: 40px; background: #fce7f3; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px;">
                <span style="font-size: 20px;">🗺️</span>
            </div>
            <h3 style="margin: 0 0 8px; font-size: 16px; font-weight: 600; color: #1e293b;">
                <?php _e('OpenStreetMap Integration', 'event-monster'); ?>
            </h3>
            <p style="margin: 0; color: #64748b; font-size: 14px; line-height: 1.5;">
                <?php _e('Free interactive maps powered by OpenStreetMap - no API key required.', 'event-monster'); ?>
            </p>
        </div>

        <!-- Feature 6 -->
        <div style="background: white; border: 1px solid #e2e8f0; border-radius: 8px; padding: 24px;">
            <div style="width: 40px; height: 40px; background: #e0f2fe; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px;">
                <span style="font-size: 20px;">📱</span>
            </div>
            <h3 style="margin: 0 0 8px; font-size: 16px; font-weight: 600; color: #1e293b;">
                <?php _e('Fully Responsive', 'event-monster'); ?>
            </h3>
            <p style="margin: 0; color: #64748b; font-size: 14px; line-height: 1.5;">
                <?php _e('All templates are fully responsive and optimized for mobile devices.', 'event-monster'); ?>
            </p>
        </div>
    </div>

    <!-- Changelog -->
    <div style="background: white; border: 1px solid #e2e8f0; border-radius: 8px; padding: 24px;">
        <h2 style="font-size: 18px; font-weight: 600; margin: 0 0 20px; color: #1e293b;">
            <?php _e('📝 Changelog', 'event-monster'); ?>
        </h2>

        <div style="border-left: 3px solid #6366f1; padding-left: 20px;">
            <h3 style="margin: 0 0 12px; font-size: 16px; font-weight: 600; color: #1e293b;">
                <?php printf(__('Version %s', 'event-monster'), $current_version); ?>
                <span style="font-weight: normal; color: #64748b; font-size: 13px; margin-left: 8px;">
                    <?php echo date_i18n('F j, Y'); ?>
                </span>
            </h3>
            
            <h4 style="margin: 16px 0 8px; font-size: 14px; font-weight: 600; color: #059669;">
                <?php _e('✅ New Features', 'event-monster'); ?>
            </h4>
            <ul style="margin: 0; padding-left: 20px; color: #475569; font-size: 14px; line-height: 1.8;">
                <li><?php _e('Completely redesigned admin settings interface', 'event-monster'); ?></li>
                <li><?php _e('New modern event list template with card layout', 'event-monster'); ?></li>
                <li><?php _e('Interactive calendar view shortcode [EM-CALENDAR]', 'event-monster'); ?></li>
                <li><?php _e('Drag-and-drop layout builder for event pages', 'event-monster'); ?></li>
                <li><?php _e('OpenStreetMap integration (free, no API key needed)', 'event-monster'); ?></li>
                <li><?php _e('Event filtering with search, category, and date filters', 'event-monster'); ?></li>
                <li><?php _e('Modal popup option for viewing event details from list', 'event-monster'); ?></li>
            </ul>

            <h4 style="margin: 16px 0 8px; font-size: 14px; font-weight: 600; color: #2563eb;">
                <?php _e('🔧 Improvements', 'event-monster'); ?>
            </h4>
            <ul style="margin: 0; padding-left: 20px; color: #475569; font-size: 14px; line-height: 1.8;">
                <li><?php _e('Improved performance with optimized asset loading', 'event-monster'); ?></li>
                <li><?php _e('Better mobile responsiveness across all templates', 'event-monster'); ?></li>
                <li><?php _e('Enhanced email templates with modern design', 'event-monster'); ?></li>
                <li><?php _e('Backward compatibility for existing [EM] shortcodes', 'event-monster'); ?></li>
            </ul>

            <h4 style="margin: 16px 0 8px; font-size: 14px; font-weight: 600; color: #dc2626;">
                <?php _e('⚠️ Breaking Changes', 'event-monster'); ?>
            </h4>
            <ul style="margin: 0; padding-left: 20px; color: #475569; font-size: 14px; line-height: 1.8;">
                <li><?php _e('Event list now uses [EM-LIST] shortcode (old [EM] still works)', 'event-monster'); ?></li>
                <li><?php _e('Custom CSS may need adjustment for new templates', 'event-monster'); ?></li>
            </ul>
        </div>
    </div>

    <!-- Support Section -->
    <div style="background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 24px; margin-top: 24px; text-align: center;">
        <h3 style="margin: 0 0 8px; font-size: 16px; font-weight: 600; color: #1e293b;">
            <?php _e('Need Help?', 'event-monster'); ?>
        </h3>
        <p style="margin: 0 0 16px; color: #64748b; font-size: 14px;">
            <?php _e('If you have any questions or issues with the new version, we\'re here to help.', 'event-monster'); ?>
        </p>
        <a href="https://awplife.com/documentation/" target="_blank" class="button button-primary" style="margin-right: 8px;">
            <?php _e('Visit Documentation', 'event-monster'); ?>
        </a>
        <a href="https://awplife.com/contact/" target="_blank" class="button">
            <?php _e('Contact Support', 'event-monster'); ?>
        </a>
    </div>
</div>
