<?php
/**
 * ============================================================================
 * UNIVERSAL IMAGE SYSTEM - COMPLETE REFERENCE GUIDE
 * ============================================================================
 * 
 * This guide shows how to use the new simplified image system.
 * Everything is NOW SUPER SIMPLE:
 * - Upload: One function
 * - Display: One function
 * - Styling: CSS handles everything
 * 
 * NO MORE worrying about image sizes, variants, or resizing!
 */
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Universal Image System - Implementation Guide</title>
    <link rel="stylesheet" href="/ecom/css/universal-image-system.css">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            background: #fafafa;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .section {
            background: white;
            padding: 30px;
            margin-bottom: 20px;
            border-radius: 8px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        
        h1, h2, h3 {
            color: #111;
        }
        
        h1 {
            border-bottom: 3px solid #007bff;
            padding-bottom: 10px;
        }
        
        code {
            background: #f4f4f4;
            padding: 2px 6px;
            border-radius: 3px;
            font-family: 'Courier New', monospace;
            font-size: 14px;
        }
        
        pre {
            background: #1e1e1e;
            color: #d4d4d4;
            padding: 15px;
            border-radius: 6px;
            overflow-x: auto;
            font-size: 13px;
            line-height: 1.5;
        }
        
        pre code {
            background: none;
            padding: 0;
            color: inherit;
        }
        
        .example {
            background: #f9f9f9;
            border-left: 4px solid #007bff;
            padding: 15px;
            margin: 15px 0;
            border-radius: 4px;
        }
        
        .file-path {
            background: #e8f4f8;
            padding: 8px 12px;
            border-radius: 4px;
            font-family: monospace;
            color: #0066cc;
            font-size: 13px;
            margin: 10px 0;
        }
        
        .comparison {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin: 20px 0;
        }
        
        .comparison > div {
            border: 1px solid #ddd;
            padding: 15px;
            border-radius: 6px;
        }
        
        .comparison h4 {
            margin-top: 0;
            padding-bottom: 10px;
            border-bottom: 2px solid #ddd;
        }
        
        .old-way {
            background: #fef3f3;
            border-color: #f0a0a0;
        }
        
        .new-way {
            background: #f0f8f0;
            border-color: #80d080;
        }
        
        .feature-list {
            list-style: none;
            padding: 0;
        }
        
        .feature-list li {
            padding: 8px 0;
            padding-left: 25px;
            position: relative;
        }
        
        .feature-list li:before {
            content: "✓";
            position: absolute;
            left: 0;
            color: #28a745;
            font-weight: bold;
        }
        
        .warning {
            background: #fff3cd;
            border-left: 4px solid #ffc107;
            padding: 15px;
            border-radius: 4px;
            margin: 15px 0;
        }
        
        .tip {
            background: #d1ecf1;
            border-left: 4px solid #17a2b8;
            padding: 15px;
            border-radius: 4px;
            margin: 15px 0;
        }
        
        table {
            width: 100%;
            border-collapse: collapse;
            margin: 15px 0;
        }
        
        table th, table td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        
        table th {
            background: #f5f5f5;
            font-weight: 600;
        }
        
        table tr:hover {
            background: #f9f9f9;
        }
        
        .grid-demo {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 15px;
            margin: 20px 0;
        }
        
        .demo-card {
            text-align: center;
            font-size: 12px;
            color: #666;
        }
        
        .demo-image {
            background: #f0f0f0;
            border-radius: 4px;
            margin-bottom: 8px;
            overflow: hidden;
        }
    </style>
</head>
<body>

<h1>🖼️ Universal Image System - Complete Implementation Guide</h1>

<!-- =========================================================================
     OVERVIEW
     ========================================================================= -->
<div class="section">
    <h2>Overview: What Changed?</h2>
    
    <p>The old system had <strong>static image variants</strong> (multiple sizes for each use case). This required:</p>
    <ul>
        <li>Defining sizes in advance (shop: 260x260, featured: 280x350, etc.)</li>
        <li>Generating multiple variants for every image</li>
        <li>Server processing overhead</li>
        <li>Hard-coded dimensions throughout the codebase</li>
    </ul>
    
    <p><strong>NEW system is simple and universal:</strong></p>
    <ul class="feature-list">
        <li>Upload original image ONCE</li>
        <li>Use original everywhere</li>
        <li>CSS handles all sizing and cropping</li>
        <li>NO variants, NO resizing, NO server processing</li>
        <li>Works like Amazon, Shopify, and all modern e-commerce sites</li>
    </ul>
    
    <div class="comparison">
        <div class="old-way">
            <h4>❌ Old Way (Variants)</h4>
            <pre>Upload Product
↓
Generate: product_home.jpg
Generate: product_shop.jpg
Generate: product_featured.jpg
(9+ variants)
↓
Store filename in DB
↓
Use getImageForSection()
to get correct variant</pre>
        </div>
        <div class="new-way">
            <h4>✓ New Way (Universal)</h4>
            <pre>Upload Product
↓
Store: product.jpg
↓
Store filename in DB
↓
Use getImageForSection()
for any display
↓
CSS handles sizing
(object-fit: cover)</pre>
        </div>
    </div>
</div>

<!-- =========================================================================
     STEP 1: UPLOAD AN IMAGE
     ========================================================================= -->
<div class="section">
    <h2>Step 1: Upload an Image</h2>
    
    <p>Upload logic is now super simple. Just call <code>uploadProductImage()</code>:</p>
    
    <h3>PHP Upload Code</h3>
    <pre><code class="language-php">&lt;?php
require_once 'config/image_config.php';

if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_FILES['productImage'])) {
    // Upload image
    $result = uploadProductImage($_FILES['productImage'], 'my_product');
    
    if ($result['success']) {
        $filename = $result['filename']; // e.g., 'my_product.jpg'
        $url = $result['url'];           // e.g., '/ecom/uploads/my_product.jpg'
        
        // Save $filename to database
        // UPDATE products SET image = ? WHERE id = ?
        
        echo "Upload successful!";
    } else {
        echo "Error: " . $result['error'];
    }
}
?></code></pre>
    
    <h3>HTML Form</h3>
    <pre><code class="language-html">&lt;form method="POST" enctype="multipart/form-data"&gt;
    &lt;input type="file" name="productImage" accept="image/jpeg,image/png" required&gt;
    &lt;button type="submit"&gt;Upload Product Image&lt;/button&gt;
&lt;/form&gt;</code></pre>
    
    <div class="tip">
        <strong>💡 Tip:</strong> The filename is cleaned automatically. Spaces become underscores, special characters are removed. The system generates random suffixes to avoid collisions.
    </div>
</div>

<!-- =========================================================================
     STEP 2: DISPLAY IMAGES
     ========================================================================= -->
<div class="section">
    <h2>Step 2: Display Images Everywhere</h2>
    
    <p>Display images the same way everywhere. The function returns the image URL, CSS handles the rest:</p>
    
    <h3>The Most Important Function</h3>
    <pre><code class="language-php">&lt;?php
// That's it! Just get the URL and display it
$imageUrl = getImageForSection($product['image'], 'product');
// The second parameter is optional (kept for backward compatibility)
?&gt;</code></pre>
    
    <h3>In HTML Templates</h3>
    <p>All you need is to wrap the image in the appropriate CSS class:</p>
    
    <h4>Product Cards (Square: 1:1)</h4>
    <pre><code class="language-html">&lt;!-- Shop Grid, Category List, etc. --&gt;
&lt;div class="product-card"&gt;
    &lt;div class="product-image"&gt;
        &lt;img src="&lt;?php echo getImageForSection($product['image']); ?&gt;" 
             alt="&lt;?php echo htmlspecialchars($product['title']); ?&gt;"&gt;
    &lt;/div&gt;
    &lt;!-- Rest of product info --&gt;
&lt;/div&gt;</code></pre>
    
    <h4>Featured Products (Portrait: 3:4)</h4>
    <pre><code class="language-html">&lt;!-- Featured section, special offers --&gt;
&lt;div class="featured-product-card"&gt;
    &lt;div class="featured-product-image"&gt;
        &lt;img src="&lt;?php echo getImageForSection($product['image']); ?&gt;" 
             alt="&lt;?php echo htmlspecialchars($product['title']); ?&gt;"&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre>
    
    <h4>Blog Posts (16:9 Landscape)</h4>
    <pre><code class="language-html">&lt;!-- Blog cards --&gt;
&lt;div class="blog-card"&gt;
    &lt;div class="blog-card-image"&gt;
        &lt;img src="&lt;?php echo getImageForSection($post['image']); ?&gt;" 
             alt="&lt;?php echo htmlspecialchars($post['title']); ?&gt;"&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre>
    
    <h4>Slider / Hero (16:9 or Full Width)</h4>
    <pre><code class="language-html">&lt;div class="slider"&gt;
    &lt;?php foreach ($sliderImages as $image): ?&gt;
    &lt;div class="slide"&gt;
        &lt;img src="&lt;?php echo getImageForSection($image['image']); ?&gt;" 
             alt="&lt;?php echo htmlspecialchars($image['alt']); ?&gt;"&gt;
    &lt;/div&gt;
    &lt;?php endforeach; ?&gt;
&lt;/div&gt;</code></pre>
    
    <h4>Cart / Wishlist (Thumbnails)</h4>
    <pre><code class="language-html">&lt;!-- Small images --&gt;
&lt;div class="cart-item"&gt;
    &lt;div class="cart-item-image"&gt;
        &lt;img src="&lt;?php echo getImageForSection($item['image']); ?&gt;" 
             alt="&lt;?php echo htmlspecialchars($item['title']); ?&gt;"&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre>
    
    <h4>Product Detail (Large, Square)</h4>
    <pre><code class="language-html">&lt;div class="product-detail"&gt;
    &lt;div class="product-detail-image"&gt;
        &lt;img src="&lt;?php echo getImageForSection($product['image']); ?&gt;" 
             alt="&lt;?php echo htmlspecialchars($product['title']); ?&gt;" 
             id="mainProductImage"&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>

<!-- =========================================================================
     STEP 3: CSS CLASSES
     ========================================================================= -->
<div class="section">
    <h2>Step 3: CSS Classes Reference</h2>
    
    <p>Choose the right class for your image container based on aspect ratio and use case:</p>
    
    <table>
        <thead>
            <tr>
                <th>CSS Class</th>
                <th>Aspect Ratio</th>
                <th>Use Case</th>
                <th>Examples</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><code>.product-image</code></td>
                <td>1:1 (Square)</td>
                <td>Product cards</td>
                <td>Shop grid, category list, search results</td>
            </tr>
            <tr>
                <td><code>.featured-product-image</code></td>
                <td>3:4 (Portrait)</td>
                <td>Featured products</td>
                <td>Featured section, homepage special offers</td>
            </tr>
            <tr>
                <td><code>.blog-card-image</code></td>
                <td>16:9 (Landscape)</td>
                <td>Blog cards</td>
                <td>Blog listing, related posts</td>
            </tr>
            <tr>
                <td><code>.blog-featured-image</code></td>
                <td>2:1 (Wide)</td>
                <td>Featured blog</td>
                <td>Homepage featured blog section</td>
            </tr>
            <tr>
                <td><code>.slide</code></td>
                <td>16:9</td>
                <td>Slider/Hero</td>
                <td>Homepage hero slider</td>
            </tr>
            <tr>
                <td><code>.cart-item-image</code></td>
                <td>1:1 (Square)</td>
                <td>Cart items</td>
                <td>Shopping cart, wishlist</td>
            </tr>
            <tr>
                <td><code>.category-image</code></td>
                <td>3:4 (Portrait)</td>
                <td>Category thumbnails</td>
                <td>Category listing</td>
            </tr>
            <tr>
                <td><code>.banner-image</code></td>
                <td>16:9 or full-width</td>
                <td>Full-width banners</td>
                <td>Promotional banners</td>
            </tr>
        </tbody>
    </table>
</div>

<!-- =========================================================================
     HOW IT WORKS
     ========================================================================= -->
<div class="section">
    <h2>How the CSS Magic Works</h2>
    
    <h3>The Key CSS Properties</h3>
    <pre><code class="language-css">.product-image {
    width: 100%;                 /* Full width of container */
    aspect-ratio: 1 / 1;        /* Maintains 1:1 ratio always */
    overflow: hidden;            /* Crop excess parts */
    background-color: #f5f5f5;  /* Placeholder color */
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;           /* MAGIC: Cover entire area without distortion */
    object-position: center;     /* Center the image */
    display: block;              /* Remove inline spacing */
}</code></pre>
    
    <h3>Why This Works</h3>
    <ul>
        <li><code>aspect-ratio</code> ensures consistent card dimensions (no layout shift)</li>
        <li><code>object-fit: cover</code> fills the entire container while maintaining aspect ratio</li>
        <li><code>overflow: hidden</code> crops excess parts professionally</li>
        <li><code>object-position: center</code> keeps the image centered (can be adjusted)</li>
        <li>No inline styles needed - everything is in CSS</li>
        <li>Works with any image resolution or orientation</li>
    </ul>
    
    <h3>Real-World Example</h3>
    <p><strong>Scenario:</strong> You upload a portrait photo (400x600) but need to display it in a square card (300x300).</p>
    
    <p><strong>What happens:</strong></p>
    <ul>
        <li>Container is set to 300x300 (via aspect-ratio)</li>
        <li><code>object-fit: cover</code> scales the image to cover the entire 300x300</li>
        <li>Excess sides are cropped (overflow: hidden)</li>
        <li>Result: Perfect square, no distortion, no empty space</li>
    </ul>
    
    <p><strong>Another Scenario:</strong> You upload a landscape photo (800x400) and need 3:4 portrait card (300x400).</p>
    
    <p><strong>What happens:</strong></p>
    <ul>
        <li>Container is set to 300x400 (via aspect-ratio: 3/4)</li>
        <li><code>object-fit: cover</code> scales image to cover the 300x400</li>
        <li>Left and right sides are cropped</li>
        <li>Result: Perfect 3:4 portrait, no distortion</li>
    </ul>
</div>

<!-- =========================================================================
     COMMON SCENARIOS
     ========================================================================= -->
<div class="section">
    <h2>Common Implementation Scenarios</h2>
    
    <h3>Scenario 1: Shop Grid (Multiple Product Cards)</h3>
    <p>Display products in a responsive grid with square images:</p>
    <pre><code class="language-html">&lt;div class="shop-grid" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px;"&gt;
    &lt;?php foreach ($products as $product): ?&gt;
    &lt;div class="product-card"&gt;
        &lt;div class="product-image"&gt;
            &lt;img src="&lt;?php echo getImageForSection($product['image']); ?&gt;" 
                 alt="&lt;?php echo htmlspecialchars($product['title']); ?&gt;"&gt;
        &lt;/div&gt;
        &lt;h3&gt;&lt;?php echo $product['title']; ?&gt;&lt;/h3&gt;
        &lt;p&gt;&lt;?php echo money_format($product['price']); ?&gt;&lt;/p&gt;
    &lt;/div&gt;
    &lt;?php endforeach; ?&gt;
&lt;/div&gt;</code></pre>
    
    <h3>Scenario 2: Featured Products Section</h3>
    <p>Show featured items with portrait aspect ratio:</p>
    <pre><code class="language-html">&lt;section class="featured"&gt;
    &lt;h2&gt;Featured Products&lt;/h2&gt;
    &lt;div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;"&gt;
        &lt;?php foreach ($featured as $product): ?&gt;
        &lt;div class="featured-product-card"&gt;
            &lt;div class="featured-product-image"&gt;
                &lt;img src="&lt;?php echo getImageForSection($product['image']); ?&gt;" 
                     alt="&lt;?php echo htmlspecialchars($product['title']); ?&gt;"&gt;
            &lt;/div&gt;
            &lt;div class="featured-info"&gt;
                &lt;h4&gt;&lt;?php echo $product['title']; ?&gt;&lt;/h4&gt;
                &lt;p class="price"&gt;&lt;?php echo money_format($product['price']); ?&gt;&lt;/p&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;?php endforeach; ?&gt;
    &lt;/div&gt;
&lt;/section&gt;</code></pre>
    
    <h3>Scenario 3: Blog Cards</h3>
    <p>Blog listing with landscape images:</p>
    <pre><code class="language-html">&lt;div class="blog-grid" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px;"&gt;
    &lt;?php foreach ($posts as $post): ?&gt;
    &lt;article class="blog-card"&gt;
        &lt;div class="blog-card-image"&gt;
            &lt;img src="&lt;?php echo getImageForSection($post['image']); ?&gt;" 
                 alt="&lt;?php echo htmlspecialchars($post['title']); ?&gt;"&gt;
        &lt;/div&gt;
        &lt;div class="blog-content"&gt;
            &lt;h3&gt;&lt;?php echo $post['title']; ?&gt;&lt;/h3&gt;
            &lt;p&gt;&lt;?php echo substr($post['excerpt'], 0, 150) . '...'; ?&gt;&lt;/p&gt;
            &lt;a href="blog.php?id=&lt;?php echo $post['id']; ?&gt;"&gt;Read More&lt;/a&gt;
        &lt;/div&gt;
    &lt;/article&gt;
    &lt;?php endforeach; ?&gt;
&lt;/div&gt;</code></pre>
    
    <h3>Scenario 4: Product Detail Page</h3>
    <p>Large image on product page:</p>
    <pre><code class="language-html">&lt;div class="product-detail"&gt;
    &lt;div class="product-detail-image"&gt;
        &lt;img src="&lt;?php echo getImageForSection($product['image']); ?&gt;" 
             alt="&lt;?php echo htmlspecialchars($product['title']); ?&gt;" 
             id="mainProductImage"&gt;
    &lt;/div&gt;
    &lt;div class="product-info"&gt;
        &lt;h1&gt;&lt;?php echo $product['title']; ?&gt;&lt;/h1&gt;
        &lt;!-- More details --&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre>
    
    <h3>Scenario 5: Hero/Slider Section</h3>
    <p>Full-width slider at homepage top:</p>
    <pre><code class="language-html">&lt;div class="slider"&gt;
    &lt;?php foreach ($slides as $i => $slide): ?&gt;
    &lt;div class="slide &lt;?php echo $i === 0 ? 'active' : ''; ?&gt;"&gt;
        &lt;img src="&lt;?php echo getImageForSection($slide['image']); ?&gt;" 
             alt="&lt;?php echo htmlspecialchars($slide['alt']); ?&gt;"&gt;
        &lt;div class="hero-content"&gt;
            &lt;h1&gt;&lt;?php echo $slide['title']; ?&gt;&lt;/h1&gt;
            &lt;p&gt;&lt;?php echo $slide['subtitle']; ?&gt;&lt;/p&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;?php endforeach; ?&gt;
&lt;/div&gt;</code></pre>
</div>

<!-- =========================================================================
     RESPONSIVE BEHAVIOR
     ========================================================================= -->
<div class="section">
    <h2>Responsive Behavior (Automatic)</h2>
    
    <p>The CSS automatically adjusts for different screen sizes:</p>
    
    <table>
        <thead>
            <tr>
                <th>Screen Size</th>
                <th>Behavior</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><strong>Desktop</strong> (1024px+)</td>
                <td>Full aspect ratios (1:1, 3:4, 16:9, etc.)</td>
            </tr>
            <tr>
                <td><strong>Tablet</strong> (768px - 1024px)</td>
                <td>Same aspect ratios, smaller container sizes</td>
            </tr>
            <tr>
                <td><strong>Mobile</strong> (480px - 768px)</td>
                <td>Some aspect ratios adjusted for mobile (e.g., featured: 3:4 → 1:1)</td>
            </tr>
            <tr>
                <td><strong>Small Phone</strong> (&lt;480px)</td>
                <td>Full-width, adjusted aspect ratios for small screens</td>
            </tr>
        </tbody>
    </tbody>
    </table>
    
    <p><strong>All adjustments are done in CSS. No PHP changes needed!</strong></p>
</div>

<!-- =========================================================================
     HELPER FUNCTIONS
     ========================================================================= -->
<div class="section">
    <h2>Available Helper Functions</h2>
    
    <h3>1. Upload Image</h3>
    <pre><code class="language-php">$result = uploadProductImage($_FILES['image'], 'custom_name');

// Returns:
// $result['success']  → bool
// $result['filename'] → string (e.g., 'custom_name.jpg')
// $result['url']      → string (e.g., '/ecom/uploads/custom_name.jpg')
// $result['error']    → string (if error)</code></pre>
    
    <h3>2. Get Image URL</h3>
    <pre><code class="language-php">$url = getImageForSection($filename);

// Simple! Returns: /ecom/uploads/filename.jpg
// Second parameter is optional (kept for backward compatibility)</code></pre>
    
    <h3>3. Delete Image</h3>
    <pre><code class="language-php">$success = deleteProductImage($filename);

// Returns true if deleted, false if error</code></pre>
    
    <h3>4. Check If Image Exists</h3>
    <pre><code class="language-php">if (imageExists($filename)) {
    echo "Image exists!";
}</code></pre>
    
    <h3>5. Get Image Info</h3>
    <pre><code class="language-php">$info = getImageInfo($filename);

// Returns:
// $info['width']   → int
// $info['height']  → int
// $info['type']    → int (IMAGETYPE_JPEG, IMAGETYPE_PNG, etc.)
// $info['size']    → int (bytes)
// $info['mime']    → string (e.g., 'image/jpeg')
// $info['updated'] → int (unix timestamp)</code></pre>
    
    <h3>6. Generate Image Tag</h3>
    <pre><code class="language-php">echo imageTag('filename.jpg', [
    'alt' => 'Product Name',
    'class' => 'product-image',
    'id' => 'my-image'
]);

// Returns: &lt;img src="/ecom/uploads/filename.jpg" alt="Product Name" class="product-image" id="my-image" /&gt;</code></pre>
</div>

<!-- =========================================================================
     DATABASE CHANGES
     ========================================================================= -->
<div class="section">
    <h2>Database Changes (IMPORTANT)</h2>
    
    <p>Your product table probably stores image paths. No changes needed, but here's what to expect:</p>
    
    <h3>Before (with variants)</h3>
    <p>Database might have stored multiple variant filenames or a lookup system.</p>
    
    <h3>After (simplified)</h3>
    <p>Just store the filename:</p>
    
    <pre><code class="language-sql">-- Products table
CREATE TABLE products (
    id INT PRIMARY KEY,
    title VARCHAR(255),
    description TEXT,
    image VARCHAR(255),      -- Just the filename: 'product.jpg'
    price DECIMAL(10,2),
    created_at TIMESTAMP
);</code></pre>
    
    <h3>Update Existing Data</h3>
    <p>If you have old image paths with variants, clean them up:</p>
    <pre><code class="language-sql">-- Update old paths to just the filename
UPDATE products 
SET image = SUBSTRING_INDEX(image, '_', 1) 
WHERE image LIKE '%_%';

-- Or if images are in subdirectories:
UPDATE products 
SET image = SUBSTRING_INDEX(image, '/', -1) 
WHERE image LIKE '%/%';</code></pre>
</div>

<!-- =========================================================================
     MIGRATION CHECKLIST
     ========================================================================= -->
<div class="section">
    <h2>Migration Checklist</h2>
    
    <p>Use this checklist to migrate your site to the new system:</p>
    
    <ol>
        <li>
            <input type="checkbox"> <strong>Update ImageHandler class</strong>
            <p>Replace <code>/classes/ImageHandler.php</code> with simplified version</p>
        </li>
        <li>
            <input type="checkbox"> <strong>Update image_config.php</strong>
            <p>Replace <code>/config/image_config.php</code> with simplified version</p>
        </li>
        <li>
            <input type="checkbox"> <strong>Include CSS file in header</strong>
            <pre><code>&lt;link rel="stylesheet" href="/ecom/css/universal-image-system.css"&gt;</code></pre>
        </li>
        <li>
            <input type="checkbox"> <strong>Update all template files</strong>
            <p>Wrap images with appropriate CSS classes (see Step 3)</p>
        </li>
        <li>
            <input type="checkbox"> <strong>Test image uploads</strong>
            <p>Upload a test image and verify it displays correctly</p>
        </li>
        <li>
            <input type="checkbox"> <strong>Test different image orientations</strong>
            <p>Upload portrait, landscape, and square images. Verify they crop correctly.</p>
        </li>
        <li>
            <input type="checkbox"> <strong>Test responsive</strong>
            <p>Check mobile, tablet, and desktop views</p>
        </li>
        <li>
            <input type="checkbox"> <strong>Remove old variant files</strong>
            <p>Delete <code>/uploads/variants/</code> directory (optional cleanup)</p>
        </li>
    </ol>
</div>

<!-- =========================================================================
     FAQ
     ========================================================================= -->
<div class="section">
    <h2>Frequently Asked Questions</h2>
    
    <h3>Q: Won't storing the original break existing images?</h3>
    <p><strong>A:</strong> No! The system has backward compatibility. Old image paths like <code>pics_ecom/file.png</code> still work. New uploads go to <code>/uploads/</code>.</p>
    
    <h3>Q: Do I need to delete the old variants?</h3>
    <p><strong>A:</strong> Optional. The new system won't create them. You can manually delete <code>/uploads/variants/</code> to save space, but it's not required.</p>
    
    <h3>Q: What if I upload a portrait image but need to display it as square?</h3>
    <p><strong>A:</strong> CSS will automatically crop the top/bottom to make it square. You can change the crop position with <code>object-position</code>.</p>
    
    <h3>Q: Will images look pixelated without resizing?</h3>
    <p><strong>A:</strong> No! Modern browsers use high-quality scaling. Plus, users upload reasonably-sized images (max 5MB). It looks just like Amazon/Shopify.</p>
    
    <h3>Q: What about image optimization?</h3>
    <p><strong>A:</strong> You can add image optimization later (WebP conversion, compression, etc.). The current system provides a clean foundation for that.</p>
    
    <h3>Q: Can I use the same image for slider, products, and blogs?</h3>
    <p><strong>A:</strong> Yes! That's the whole point. One image, infinite uses, CSS handles the styling.</p>
    
    <h3>Q: How do I change the crop position?</h3>
    <p><strong>A:</strong> Modify <code>object-position: center</code> in CSS. Options: <code>top</code>, <code>bottom</code>, <code>left</code>, <code>right</code>, or specific percentages.</p>
    
    <h3>Q: Do I need to update the database?</h3>
    <p><strong>A:</strong> No! The database already stores filenames. Just make sure old entries don't have path prefixes like <code>original/</code> or <code>variants/</code>.</p>
</div>

<!-- =========================================================================
     TIPS & BEST PRACTICES
     ========================================================================= -->
<div class="section">
    <h2>Tips & Best Practices</h2>
    
    <ul>
        <li>
            <strong>Always use <code>htmlspecialchars()</code> for alt text:</strong>
            <pre><code>&lt;img ... alt="&lt;?php echo htmlspecialchars($product['title']); ?&gt;"&gt;</code></pre>
        </li>
        <li>
            <strong>Use semantic class names:</strong> <code>.product-image</code>, <code>.blog-card-image</code>, not generic names like <code>.img-small</code>
        </li>
        <li>
            <strong>Always include alt text:</strong> Required for SEO and accessibility
        </li>
        <li>
            <strong>Don't set inline widths/heights on images:</strong> Let CSS handle it
        </li>
        <li>
            <strong>Test with different image orientations:</strong> Square, portrait, landscape, ultra-wide
        </li>
        <li>
            <strong>Don't adjust image sizes in JS:</strong> CSS media queries handle responsiveness
        </li>
        <li>
            <strong>Monitor upload sizes:</strong> Encourage users to upload reasonably-sized images (1-2MB ideal)
        </li>
    </ul>
</div>

<!-- =========================================================================
     FILE REFERENCE
     ========================================================================= -->
<div class="section">
    <h2>File Reference</h2>
    
    <p>These are the files that were updated for the new system:</p>
    
    <table>
        <thead>
            <tr>
                <th>File</th>
                <th>Status</th>
                <th>Notes</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><code>/classes/ImageHandler.php</code></td>
                <td>✓ Updated</td>
                <td>Simplified to upload-only, no variants</td>
            </tr>
            <tr>
                <td><code>/config/image_config.php</code></td>
                <td>✓ Updated</td>
                <td>Simplified helper functions</td>
            </tr>
            <tr>
                <td><code>/css/universal-image-system.css</code></td>
                <td>✓ New</td>
                <td>Comprehensive CSS for all image scenarios</td>
            </tr>
            <tr>
                <td><code>/uploads/</code></td>
                <td>→ Updated</td>
                <td>Images now stored directly here (no subdirs)</td>
            </tr>
        </tbody>
    </table>
</div>

<!-- =========================================================================
     SUMMARY
     ========================================================================= -->
<div class="section" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border-radius: 8px;">
    <h2 style="color: white; border-color: rgba(255,255,255,0.3);">Summary</h2>
    
    <p><strong>The new system is designed for simplicity and flexibility:</strong></p>
    
    <ul style="list-style: none; padding: 0;">
        <li style="margin: 15px 0; padding-left: 30px; position: relative;">
            <span style="position: absolute; left: 0; font-size: 20px;">📤</span>
            <strong>Upload once</strong> - Store original image once
        </li>
        <li style="margin: 15px 0; padding-left: 30px; position: relative;">
            <span style="position: absolute; left: 0; font-size: 20px;">🔄</span>
            <strong>Use everywhere</strong> - Same image in all sections
        </li>
        <li style="margin: 15px 0; padding-left: 30px; position: relative;">
            <span style="position: absolute; left: 0; font-size: 20px;">🎨</span>
            <strong>CSS handles sizing</strong> - Different aspect ratios per section
        </li>
        <li style="margin: 15px 0; padding-left: 30px; position: relative;">
            <span style="position: absolute; left: 0; font-size: 20px;">⚡</span>
            <strong>Zero server processing</strong> - No image generation
        </li>
        <li style="margin: 15px 0; padding-left: 30px; position: relative;">
            <span style="position: absolute; left: 0; font-size: 20px;">🌐</span>
            <strong>Professional results</strong> - Like Amazon, Shopify, etc.
        </li>
    </ul>
    
    <p style="margin-top: 20px; font-size: 16px;"><strong>You'll never worry about image sizes again!</strong></p>
</div>

</body>
</html>
