<?php
/**
 * Image Boost — Documentation View
 */

if (!defined('ABSPATH')) {
    exit;
}
?>
<div class="imgboost-wrap">
    
    <div class="imgboost-header">
        <div class="imgboost-header-content">
            <div class="imgboost-header-left">
                <div class="imgboost-logo">
                    <span class="dashicons dashicons-book"></span>
                </div>
                <div>
                    <h1><?php esc_html_e('Documentation & Guides', 'image-boost'); ?></h1>
                    <p class="imgboost-subtitle"><?php esc_html_e('Comprehensive guide to mastering Image Boost.', 'image-boost'); ?></p>
                </div>
            </div>
        </div>
    </div>

    <!-- Layout Container -->
    <div class="imgboost-docs-layout" style="display: grid; grid-template-columns: 1fr; gap: 30px; margin-top: 30px;">
        
        <!-- Section 1: Overview & Server Requirements -->
        <div class="imgboost-settings-card" style="background: var(--imgboost-bg-card); padding: 30px; border-radius: 12px; border: 1px solid var(--imgboost-border); box-shadow: var(--imgboost-shadow-md);">
            <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 20px;">
                <span class="dashicons dashicons-admin-network" style="font-size: 28px; width: 28px; height: 28px; color: var(--imgboost-primary);"></span>
                <h2 style="margin: 0; font-size: 22px; font-weight: 700; color: #fff;"><?php esc_html_e('1. Architecture & System Requirements', 'image-boost'); ?></h2>
            </div>
            <p style="color: var(--imgboost-text-muted); font-size: 15px; line-height: 1.6;">
                <?php esc_html_e('Image Boost operates entirely on your server infrastructure. It intercepts WordPress\'s native upload hooks and applies highly advanced lossy or lossless compression algorithms before the image is even saved to the hard drive, thus saving disk I/O operations.', 'image-boost'); ?>
            </p>
            <h4 style="color: #fff; margin-top: 20px;"><?php esc_html_e('Bare Minimum Requirements:', 'image-boost'); ?></h4>
            <ul style="color: var(--imgboost-text-muted); font-size: 14px; line-height: 1.8; margin-top: 10px; padding-left: 20px;">
                <li><strong>PHP Version:</strong> <?php esc_html_e('7.4 or higher (PHP 8.0+ Highly Recommended for AVIF support).', 'image-boost'); ?></li>
                <li><strong>Image Libraries:</strong> <?php esc_html_e('GD Library or ImageMagick (Imagick) PHP extension must be active.', 'image-boost'); ?></li>
                <li><strong>Memory Limit:</strong> <?php esc_html_e('At least 256MB of WP_MEMORY_LIMIT to process high-resolution photography easily.', 'image-boost'); ?></li>
                <li><strong>Cron Support:</strong> <?php esc_html_e('Working WP-Cron for background bulk processing and automatic backup rotations.', 'image-boost'); ?></li>
            </ul>
        </div>

        <!-- Section 2: Advanced Compression Theory -->
        <div class="imgboost-settings-card" style="background: var(--imgboost-bg-card); padding: 30px; border-radius: 12px; border: 1px solid var(--imgboost-border); box-shadow: var(--imgboost-shadow-md);">
            <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 20px;">
                <span class="dashicons dashicons-admin-settings" style="font-size: 28px; width: 28px; height: 28px; color: var(--imgboost-success);"></span>
                <h2 style="margin: 0; font-size: 22px; font-weight: 700; color: #fff;"><?php esc_html_e('2. Compression Profiles in Depth', 'image-boost'); ?></h2>
            </div>
            
            <table style="width: 100%; border-collapse: collapse; margin-top: 15px; text-align: left; background: rgba(0,0,0,0.15); border-radius: 8px; overflow: hidden;">
                <thead>
                    <tr style="background: rgba(255,255,255,0.05); color: #fff;">
                        <th style="padding: 15px; border-bottom: 1px solid rgba(255,255,255,0.05);"><?php esc_html_e('Level', 'image-boost'); ?></th>
                        <th style="padding: 15px; border-bottom: 1px solid rgba(255,255,255,0.05);"><?php esc_html_e('Algorithm Tech', 'image-boost'); ?></th>
                        <th style="padding: 15px; border-bottom: 1px solid rgba(255,255,255,0.05);"><?php esc_html_e('Expected Savings', 'image-boost'); ?></th>
                        <th style="padding: 15px; border-bottom: 1px solid rgba(255,255,255,0.05);"><?php esc_html_e('Best Use Case', 'image-boost'); ?></th>
                    </tr>
                </thead>
                <tbody style="color: var(--imgboost-text-muted); font-size: 14px;">
                    <tr>
                        <td style="padding: 15px; border-bottom: 1px solid rgba(255,255,255,0.05);"><strong>🟢 <?php esc_html_e('Normal', 'image-boost'); ?></strong></td>
                        <td style="padding: 15px; border-bottom: 1px solid rgba(255,255,255,0.05);"><?php esc_html_e('Lossless Strip & Quantization', 'image-boost'); ?></td>
                        <td style="padding: 15px; border-bottom: 1px solid rgba(255,255,255,0.05);"><?php esc_html_e('10% - 20%', 'image-boost'); ?></td>
                        <td style="padding: 15px; border-bottom: 1px solid rgba(255,255,255,0.05);"><?php esc_html_e('Photography portfolios, medical imaging, high-tier real estate.', 'image-boost'); ?></td>
                    </tr>
                    <tr>
                        <td style="padding: 15px; border-bottom: 1px solid rgba(255,255,255,0.05);"><strong>🔵 <?php esc_html_e('Pro', 'image-boost'); ?></strong></td>
                        <td style="padding: 15px; border-bottom: 1px solid rgba(255,255,255,0.05);"><?php esc_html_e('Smart Psychovisual Lossy', 'image-boost'); ?></td>
                        <td style="padding: 15px; border-bottom: 1px solid rgba(255,255,255,0.05);"><?php esc_html_e('50% - 70%', 'image-boost'); ?></td>
                        <td style="padding: 15px; border-bottom: 1px solid rgba(255,255,255,0.05);"><?php esc_html_e('WooCommerce stores, Standard blogs, Corporate sites. (Recommended)', 'image-boost'); ?></td>
                    </tr>
                    <tr>
                        <td style="padding: 15px;"><strong>🟣 <?php esc_html_e('Ultra', 'image-boost'); ?></strong></td>
                        <td style="padding: 15px;"><?php esc_html_e('Aggressive Sub-sampling', 'image-boost'); ?></td>
                        <td style="padding: 15px;"><?php esc_html_e('80% - 95%', 'image-boost'); ?></td>
                        <td style="padding: 15px;"><?php esc_html_e('Viral news sites, heavy social feeds, background structural graphics.', 'image-boost'); ?></td>
                    </tr>
                </tbody>
            </table>
        </div>

        <!-- Section 3: WebP & AVIF Infrastructure -->
        <div class="imgboost-settings-card" style="background: var(--imgboost-bg-card); padding: 30px; border-radius: 12px; border: 1px solid var(--imgboost-border); box-shadow: var(--imgboost-shadow-md);">
            <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 20px;">
                <span class="dashicons dashicons-image-filter" style="font-size: 28px; width: 28px; height: 28px; color: var(--imgboost-purple);"></span>
                <h2 style="margin: 0; font-size: 22px; font-weight: 700; color: #fff;"><?php esc_html_e('3. AVIF & WebP Next-Gen Delivery', 'image-boost'); ?></h2>
            </div>
            
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 30px;">
                <div>
                    <h4 style="color: #fff; margin-bottom: 10px;"><?php esc_html_e('How it Generates Files', 'image-boost'); ?></h4>
                    <p style="color: var(--imgboost-text-muted); font-size: 14px; line-height: 1.6;">
                        <?php esc_html_e('When an image is uploaded (e.g., `image.jpg`), the plugin automatically clones it into `image.jpg.webp` and `image.jpg.avif` inside the exact same upload directory. This ensures they are structurally tied to the original database entry.', 'image-boost'); ?>
                    </p>
                </div>
                <div>
                    <h4 style="color: #fff; margin-bottom: 10px;"><?php esc_html_e('How Delivery Works (No Nginx Config)', 'image-boost'); ?></h4>
                    <p style="color: var(--imgboost-text-muted); font-size: 14px; line-height: 1.6;">
                        <?php esc_html_e('Instead of requiring you to modify complex `.htaccess` or `/etc/nginx/` configs, Image Boost uses PHP Output Buffering. Before the HTML leaves the server, it intercepts `<img>` tags and replaces the `src` with `.webp` dynamically if the visitor\'s browser supports it.', 'image-boost'); ?>
                    </p>
                </div>
            </div>
        </div>

        <!-- Section 4: Cron Bulk & Server Resource Management -->
        <div class="imgboost-settings-card" style="background: var(--imgboost-bg-card); padding: 30px; border-radius: 12px; border: 1px solid var(--imgboost-border); box-shadow: var(--imgboost-shadow-md);">
            <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 20px;">
                <span class="dashicons dashicons-update" style="font-size: 28px; width: 28px; height: 28px; color: var(--imgboost-warning);"></span>
                <h2 style="margin: 0; font-size: 22px; font-weight: 700; color: #fff;"><?php esc_html_e('4. Managing Server Limits (Bulk Tool)', 'image-boost'); ?></h2>
            </div>
            <p style="color: var(--imgboost-text-muted); font-size: 15px; line-height: 1.6;">
                <?php esc_html_e('Bulk optimizing an entire Media Library can crash cheap shared hosting if not handled carefully. Here is how Image Boost circumvents execution timeouts (Error 504 Gateway Timeouts):', 'image-boost'); ?>
            </p>
            <ul style="color: var(--imgboost-text-muted); font-size: 14px; line-height: 1.8; margin-top: 15px; padding-left: 20px;">
                <li><strong><?php esc_html_e('Asynchronous Batching:', 'image-boost'); ?></strong> <?php esc_html_e('The slider in the Settings tab dictates how many images are sent to the CPU per AJAX request. Default is 5. If your server is weak, lower it to 2. If you are on a VPS, raise it to 20.', 'image-boost'); ?></li>
                <li><strong><?php esc_html_e('Background Queue (Cron):', 'image-boost'); ?></strong> <?php esc_html_e('If the Bulk tool is paused, WP-Cron operates in the background every 5 minutes to sweep up un-optimized images sequentially.', 'image-boost'); ?></li>
                <li><strong><?php esc_html_e('Transient Matrix Locking:', 'image-boost'); ?></strong> <?php esc_html_e('A sophisticated locking mechanism prevents overlapping processes, ensuring CPU usage never spikes past 100% and crashes Apache/Nginx.', 'image-boost'); ?></li>
            </ul>
        </div>
        
        <!-- Section 5: Troubleshooting & FAQs -->
        <div class="imgboost-settings-card" style="background: var(--imgboost-bg-card); padding: 30px; border-radius: 12px; border: 1px solid var(--imgboost-border); box-shadow: var(--imgboost-shadow-md);">
            <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 20px;">
                <span class="dashicons dashicons-sos" style="font-size: 28px; width: 28px; height: 28px; color: var(--imgboost-danger);"></span>
                <h2 style="margin: 0; font-size: 22px; font-weight: 700; color: #fff;"><?php esc_html_e('5. Troubleshooting & FAQs', 'image-boost'); ?></h2>
            </div>
            
            <div style="margin-top: 20px;">
                <h4 style="color: #fff; margin-bottom: 5px;"><?php esc_html_e('Q: Why do some images show "Error: Missing Library" or "Failed"?', 'image-boost'); ?></h4>
                <p style="color: var(--imgboost-text-muted); font-size: 14px; margin-top: 0;">
                    <?php esc_html_e('A: This occurs if your hosting provider lacks the Imagick extension compiled with modern WebP/AVIF delegates. Contact your host to enable `php-imagick` with WebP encoding support, or the plugin will gracefully degrade to standard GD library optimization.', 'image-boost'); ?>
                </p>

                <h4 style="color: #fff; margin-bottom: 5px; margin-top: 20px;"><?php esc_html_e('Q: Will deleting this plugin break my images?', 'image-boost'); ?></h4>
                <p style="color: var(--imgboost-text-muted); font-size: 14px; margin-top: 0;">
                    <?php esc_html_e('A: NO. This is the beauty of our architecture. The output buffering strictly swaps `.webp` paths momentarily inside HTML. If you uninstall the plugin, WordPress falls back to loading your optimized physical JPG/PNGs.', 'image-boost'); ?>
                </p>

                <h4 style="color: #fff; margin-bottom: 5px; margin-top: 20px;"><?php esc_html_e('Q: Where are the database entries for backups kept?', 'image-boost'); ?></h4>
                <p style="color: var(--imgboost-text-muted); font-size: 14px; margin-top: 0;">
                    <?php esc_html_e('A: It uses the postmeta table (`_imgboost_has_backup`, `_imgboost_status`). All backups are kept in the `/wp-content/uploads/image-boost/backups/` folder. When you click Restore, it physically moves the file back over the optimized version.', 'image-boost'); ?>
                </p>
                
                <h4 style="color: #fff; margin-bottom: 5px; margin-top: 20px;"><?php esc_html_e('Q: Does it optimize thumbnails?', 'image-boost'); ?></h4>
                <p style="color: var(--imgboost-text-muted); font-size: 14px; margin-top: 0;">
                    <?php esc_html_e('A: Yes. Every time you upload an image, WordPress core creates multiple thumbnail derivatives (e.g. 150x150, 300x300, 1024x1024). Image Boost automatically hooks into `wp_generate_attachment_metadata` and compresses ALL of those sizes simultaneously.', 'image-boost'); ?>
                </p>
            </div>
        </div>

    </div>
</div>
