<div class="wrap wing-popup-welcome">
    <h1>
        <span class="dashicons dashicons-welcome-widgets-menus"></span> 
        Welcome to <b>Wing Popup</b> <span class="wp-version"><?php esc_html(WDPOP_VER); ?></span>
    </h1>
    <p class="description">The lightweight yet powerful popup builder for WordPress. Create stunning popups that engage and convert — without slowing your site.</p>

    <!-- Tabs Navigation -->
    <div class="wp-tabs-nav">
        <button class="active" data-tab="overview">
            <span class="dashicons dashicons-admin-home"></span> Overview
        </button>
        <button data-tab="getting-started">
            <span class="dashicons dashicons-controls-play"></span> Getting Started
        </button>
        <button data-tab="faq">
            <span class="dashicons dashicons-editor-help"></span> FAQ
        </button>
        <button data-tab="docs">
            <span class="dashicons dashicons-book"></span> Docs & Support
        </button>
        <button data-tab="future">
            <span class="dashicons dashicons-lightbulb"></span> Roadmap
        </button>
        <button data-tab="credits">
            <span class="dashicons dashicons-groups"></span> Credits
        </button>
    </div>

    <!-- Tabs Content -->
    <div class="wp-tabs-content">

        <!-- Overview -->
        <div class="wp-tab-panel active" id="overview">
            <h2>✨ What is Wing Popup?</h2>
            <p><strong>Wing Popup</strong> helps you build high-converting popups with ease. From lead capture to promotions and announcements, you can design, display, and customize popups effortlessly — all while keeping your site fast.</p>

            <h3>🎯 Why Use Wing Popup?</h3>
            <ul class="wp-checklist">
                <li>Lightweight & performance-focused</li>
                <li>Trigger popups by user actions or page events</li>
                <li>Full control with display rules</li>
                <li>Seamless integrations: Mailchimp</li>
                <li>Drag-and-drop design with Elementor or Gutenberg</li>
            </ul>
        </div>

        <!-- Getting Started -->
        <div class="wp-tab-panel" id="getting-started">
            <h2>⚡ Quick Start</h2>
            <ol>
                <li>Go to <strong><a href="<?php echo esc_url(admin_url( '/admin.php?page=wdpop_popup')); ?>">Wing Popup → Popups</a></strong> and create your first popup.</li>
                <li>Choose your content: custom text, images, forms, or select a <strong>Template</strong>.</li>
                <li>Set triggers: page load, on-click, or delay.</li>
                <li>Use <strong>Display Rules</strong> to target specific pages, posts, or users.</li>
                <li>Save, publish, and watch your popup in action 🎉</li>
            </ol>
        </div>

        <!-- FAQ -->
        <div class="wp-tab-panel" id="faq">
            <h2>❓ Frequently Asked Questions</h2>
            <div class="wp-faq-item">
                <h4>Will popups slow down my site?</h4>
                <p>No. Wing Popup is lightweight and optimized. Only active popups load resources.</p>
            </div>
            <div class="wp-faq-item">
                <h4>Can I design popups with Elementor or Gutenberg?</h4>
                <p>Yes. You can design templates in Elementor or Gutenberg, then select them as popup content.</p>
            </div>
            <div class="wp-faq-item">
                <h4>Does it integrate with email services?</h4>
                <p>Wing Popup supports <strong>Mailchimp</strong> and <strong>FluentCRM(Coming Soon)</strong> for subscription popups.</p>
            </div>
        </div>

        <!-- Docs -->
        <div class="wp-tab-panel" id="docs">
            <h2>📚 Documentation & Support</h2>
            <ul>
                <li><a href="https://wingdevs.com/docs/" target="_blank">Full Documentation</a></li>
                <li><a href="https://wingdevs.com/wing-popup" target="_blank">FAQs</a></li>
                <li><a href="https://wordpress.org/support/plugin/wing-popup/" target="_blank">Free Community Support</a></li>
            </ul>
            <p>Our support team is happy to help — average response time is <strong>24 hours</strong>.</p>
        </div>

        <!-- Roadmap -->
        <div class="wp-tab-panel" id="future">
            <h2>🚀 Roadmap</h2>
            <p>Upcoming features in Wing Popup:</p>
            <ul class="wp-future-list">
                <li>🎨 More ready-made popup templates</li>
                <li>🛒 WooCommerce-specific triggers (cart abandon, checkout)</li>
                <li>📊 Analytics dashboard for popup performance</li>
                <li>🔗 More integrations (ConvertKit, ActiveCampaign, etc.)</li>
            </ul>
        </div>

        <!-- Credits -->
        <div class="wp-tab-panel" id="credits">
            <h2>💙 Credits</h2>
            <p><strong>Wing Popup</strong> is crafted with care by <strong>WingDevs</strong>, makers of <em>Wing Suite</em> and <em>Store Wings</em>.</p>
            <ul>
                <li><a href="https://wingdevs.com/" target="_blank">Visit WingDevs</a></li>
                <li><a href="https://wingdevs.com/plugins" target="_blank">Explore Our Plugins</a></li>
                <li><a href="https://wordpress.org/support/plugin/wing-popup/reviews/#new-post" target="_blank">Rate Wing Popup on WordPress.org</a></li>
            </ul>
        </div>

    </div>
</div>

<style>
    /* Welcome Page Styling */
    .wing-popup-welcome h1 {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .wing-popup-welcome .wp-tab-panel{
        max-height: 255px;
    }
    .wing-popup-welcome .description {
        font-size: 14px;
        color: #555;
        margin-bottom: 20px;
    }

    /* Tabs */
    .wp-tabs-nav {
        border-bottom: 1px solid #ddd;
        margin-bottom: 15px;
    }
    .wp-tabs-nav button {
        background: #f1f1f1;
        border: none;
        padding: 8px 14px;
        margin: 0 2px;
        cursor: pointer;
        font-weight: 500;
        display: inline-flex;
        align-items: center;
        gap: 5px;
    }
    .wp-tabs-nav button.active {
        background: #fff;
        border-bottom: 2px solid #0073aa;
    }

    /* Tab Content */
    .wp-tab-panel {
        display: none;
    }
    .wp-tab-panel.active {
        display: block;
        padding: 20px;
    }

    /* Lists */
    .wp-checklist {
        list-style: none;
        padding-left: 0;
    }
    .wp-checklist li::before {
        content: "✔️ ";
    }
    .wp-future-list {
        list-style: none;
        padding-left: 0;
    }
    .wp-future-list li {
        margin: 5px 0;
        font-size: 14px;
    }

    /* FAQ */
    .wp-faq-item h4 {
        cursor: pointer;
        padding: 8px;
        background: #f9f9f9;
        margin: 5px 0;
    }
    .wp-faq-item p {
        display: none;
        padding: 8px 12px;
        border-left: 3px solid #0073aa;
        background: #fff;
    }
</style>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Tabs
        const buttons = document.querySelectorAll('.wp-tabs-nav button');
        const panels = document.querySelectorAll('.wp-tab-panel');
        buttons.forEach(btn => {
            btn.addEventListener('click', () => {
                buttons.forEach(b => b.classList.remove('active'));
                btn.classList.add('active');
                const tabId = btn.getAttribute('data-tab');
                panels.forEach(panel => {
                    panel.classList.toggle('active', panel.id === tabId);
                });
            });
        });

        // FAQ toggle
        const faqItems = document.querySelectorAll('.wp-faq-item h4');
        faqItems.forEach(q => {
            q.addEventListener('click', () => {
                const ans = q.nextElementSibling;
                ans.style.display = ans.style.display === 'block' ? 'none' : 'block';
            });
        });
    });
</script>
