<?php
if (!defined('ABSPATH')) {
    die('You are not allowed to call this page directly.');
}

// CSS се зарежда автоматично от formshield.php
?>

<div class="about">
    <!-- Header -->
    <section>
        <h1><?php esc_html_e('About FormShield', 'formshield'); ?></h1>
        <p class="note"><?php esc_html_e('FormShield is a lightweight WordPress security plugin designed to protect your website forms from spam, bots, and unwanted submissions. It integrates seamlessly with popular form builders and adds an invisible protection layer without affecting user experience.', 'formshield'); ?></p>
    </section>

    <!-- Three-in-row block (WIDE LEFT) -->
    <section style="border-bottom:none;padding-bottom:0">
        <div class="about-row">
            <!-- Col 1: What is FormShield (1.5fr) -->
            <div class="about-col">
                <h2><?php esc_html_e('What is FormShield?', 'formshield'); ?></h2>
                <p><?php esc_html_e('FormShield is an innovative WordPress plugin for protecting forms against spam, bots, and injection attacks. It provides real protection with a clean interface and without unnecessary settings.', 'formshield'); ?></p>
                <div class="beta"><?php esc_html_e('Beta Version Notice — Beta version. We continue to add features and optimizations. Your feedback is valuable.', 'formshield'); ?></div>
            </div>

            <!-- Col 2: Key Features (1fr) -->
            <div class="about-col">
                <h2><?php esc_html_e('Key Features', 'formshield'); ?></h2>
                <div class="features">
                    <div class="feature">
                        <div class="title">AI-Powered Protection</div>
                        <div class="descr"><?php esc_html_e('Smart filter against bots and spam.', 'formshield'); ?></div>
                    </div>
                    <div class="feature">
                        <div class="title">Real-Time Monitoring</div>
                        <div class="descr"><?php esc_html_e('Live statistics and blockages.', 'formshield'); ?></div>
                    </div>
                    <div class="feature">
                        <div class="title">Woo Integration</div>
                        <div class="descr"><?php esc_html_e('Support for WooCommerce forms. <strong>Coming soon!</strong>', 'formshield'); ?></div>
                    </div>
                    <div class="feature">
                        <div class="title">Easy Management</div>
                        <div class="descr"><?php esc_html_e('Clear dashboard and quick actions.', 'formshield'); ?></div>
                    </div>
                </div>
            </div>

            <!-- Col 3: Supported Plugins (1fr) -->
            <div class="about-col">
                <h2><?php esc_html_e('Supported Form Plugins', 'formshield'); ?></h2>
                <div class="supported">
                    <span class="pill"><span class="check"></span> Contact Form 7</span>
                    <span class="pill"><span class="check"></span> WPForms</span>
                    <span class="pill"><span class="check"></span> Ninja Forms</span>
                    <span class="pill"><span class="check"></span> Divi Forms</span>
                    <span class="pill"><span class="check"></span> Fluent Forms</span>
                    <span class="pill"><span class="check"></span> WordPress Comments</span>
                </div>
                <p class="note" style="margin-top:6px"><?php esc_html_e('* The list is constantly expanding.', 'formshield'); ?></p>
                
                <h3 style="margin-top: 16px; margin-bottom: 8px; font-size: 14px; color: var(--muted);"><?php esc_html_e('Coming Soon', 'formshield'); ?></h3>
                <div class="supported">
                    <span class="pill coming-soon"><span class="clock"></span> Elementor Forms</span>
                    <span class="pill coming-soon"><span class="clock"></span> WS Form</span>
                    <span class="pill coming-soon"><span class="clock"></span> Gravity Forms</span>
                    <span class="pill coming-soon"><span class="clock"></span> Formidable Forms</span>
                    <span class="pill coming-soon"><span class="clock"></span> QuForm</span>
                    <span class="pill coming-soon"><span class="clock"></span> Happy Forms</span>
                </div>
            </div>
        </div>
    </section>

    <!-- Development Roadmap -->
    <section>
        <h2 style="text-align:center"><?php esc_html_e('Development Roadmap', 'formshield'); ?></h2>
        <p style="text-align:center; color: var(--muted); margin-bottom: 24px;"><?php esc_html_e('Here are the upcoming features we are working on to make FormShield even more powerful:', 'formshield'); ?></p>
        
        <div class="roadmap">
            <div class="roadmap-item in-progress">
                <div class="roadmap-number">1</div>
                <div class="roadmap-content">
                    <h3><?php esc_html_e('Honeypot Fields', 'formshield'); ?></h3>
                    <p><?php esc_html_e('Invisible fields that only bots fill out, providing an additional layer of bot detection.', 'formshield'); ?></p>
                    <span class="status in-progress"><?php esc_html_e('In Progress', 'formshield'); ?></span>
                </div>
            </div>
            
            <div class="roadmap-item">
                <div class="roadmap-number">2</div>
                <div class="roadmap-content">
                    <h3><?php esc_html_e('Rate Limiting', 'formshield'); ?></h3>
                    <p><?php esc_html_e('Advanced rate limiting by IP address to prevent rapid-fire spam submissions.', 'formshield'); ?></p>
                    <span class="status planned"><?php esc_html_e('Planned', 'formshield'); ?></span>
                </div>
            </div>
            
            <div class="roadmap-item">
                <div class="roadmap-number">3</div>
                <div class="roadmap-content">
                    <h3><?php esc_html_e('Machine Learning', 'formshield'); ?></h3>
                    <p><?php esc_html_e('Adaptive spam patterns that learn from your site\'s specific spam patterns.', 'formshield'); ?></p>
                    <span class="status planned"><?php esc_html_e('Planned', 'formshield'); ?></span>
                </div>
            </div>
            
            <div class="roadmap-item">
                <div class="roadmap-number">4</div>
                <div class="roadmap-content">
                    <h3><?php esc_html_e('Geolocation Protection', 'formshield'); ?></h3>
                    <p><?php esc_html_e('Block submissions from suspicious countries or regions based on IP geolocation.', 'formshield'); ?></p>
                    <span class="status planned"><?php esc_html_e('Planned', 'formshield'); ?></span>
                </div>
            </div>
            
            <div class="roadmap-item">
                <div class="roadmap-number">5</div>
                <div class="roadmap-content">
                    <h3><?php esc_html_e('User Agent Analysis', 'formshield'); ?></h3>
                    <p><?php esc_html_e('Advanced bot detection by analyzing user agent strings and browser fingerprints.', 'formshield'); ?></p>
                    <span class="status planned"><?php esc_html_e('Planned', 'formshield'); ?></span>
                </div>
            </div>
        </div>
    </section>

    <!-- Pro Version Info -->
    <section>
        <h2 style="text-align:center"><?php esc_html_e('FormShield Pro', 'formshield'); ?></h2>
        <p style="text-align:center; color: var(--muted); margin-bottom: 24px;"><?php esc_html_e('Get advanced features and priority support with FormShield Pro.', 'formshield'); ?></p>
        <div class="cta">
            <a class="btn primary" href="<?php echo esc_url('https://wpsupporting.com/plugins/formshield/'); ?>" target="_blank" rel="noopener"><?php esc_html_e('View Pro Features', 'formshield'); ?></a>
        </div>
    </section>

    <!-- Centered Contact block -->
    <section>
        <h2 style="text-align:center"><?php esc_html_e('Contact & Support', 'formshield'); ?></h2>
        <div class="cta">
            <a class="btn primary" href="<?php echo esc_url('mailto:support@wpsupporting.com'); ?>">Email Support</a>
            <a class="btn" href="<?php echo esc_url('https://wpsupporting.com/'); ?>" target="_blank" rel="noopener">Website: wpsupporting.com</a>
            <a class="btn" href="<?php echo esc_url('https://github.com/GDimitrovBG'); ?>" target="_blank" rel="noopener">GitHub: GDimitrovBG</a>
            <a class="btn" href="#" onclick="alert('Documentation coming soon');return false;">Documentation</a>
            <a class="btn" href="#" onclick="alert('Support Portal coming soon');return false;">Support Portal</a>
        </div>
    </section>
</div>
