{% extends "base.html" %}

{% block title %}Documentation - Radiant AI{% endblock %}
{% block page_title %}Documentation{% endblock %}

{% block content %}
<div class="page-container">
    <!-- Header -->
    <div class="section-block" style="text-align: center;">
        <div style="font-size: 3.5rem; margin-bottom: 20px;">
            <i class="ph-duotone ph-book-open" style="color: var(--primary-purple);"></i>
        </div>
        <h1 class="section-title">Documentation</h1>
        <p style="font-size: 1.1rem; color: var(--text-gray); max-width: 650px; margin: 0 auto;">
            Complete guide to using Radiant AI's powerful image processing and AI tools.
        </p>
    </div>

    <!-- Getting Started -->
    <div class="section-block">
        <h2 class="section-subtitle">
            <i class="ph ph-play-circle" style="color: var(--primary-cyan);"></i> Getting Started
        </h2>
        <p style="color: var(--text-gray); line-height: 1.8; margin-bottom: 20px;">
            Welcome to Radiant AI! This platform provides a suite of AI-powered image processing tools 
            accessible through an intuitive web interface.
        </p>
        <ol style="color: var(--text-gray); line-height: 2; padding-left: 20px;">
            <li><strong>Navigate</strong> using the sidebar to access different tools</li>
            <li><strong>Upload</strong> your images using drag-and-drop or file selection</li>
            <li><strong>Process</strong> images with your chosen tool or AI model</li>
            <li><strong>Download</strong> your enhanced results instantly</li>
        </ol>
    </div>

    <!-- Studio Editor -->
    <div class="section-block">
        <h2 class="section-subtitle">
            <i class="ph ph-paint-brush-broad" style="color: var(--primary-purple);"></i> Studio Editor
        </h2>
        <p style="color: var(--text-gray); line-height: 1.8; margin-bottom: 15px;">
            Professional image editing tools for creative enhancement.
        </p>
        <div class="info-grid">
            <div class="info-card">
                <h4>Basic Adjustments</h4>
                <p>Brightness, contrast, saturation, and exposure controls with real-time preview.</p>
            </div>
            <div class="info-card">
                <h4>Filters & Effects</h4>
                <p>Apply cinematic filters, vintage effects, and artistic styles to your images.</p>
            </div>
            <div class="info-card">
                <h4>Transform Tools</h4>
                <p>Crop, rotate, flip, and resize images with precision.</p>
            </div>
        </div>
    </div>

    <!-- Computer Vision -->
    <div class="section-block">
        <h2 class="section-subtitle">
            <i class="ph ph-eye" style="color: var(--primary-cyan);"></i> Backgrounds & Vision
        </h2>
        <p style="color: var(--text-gray); line-height: 1.8; margin-bottom: 15px;">
            Advanced AI-powered visual analysis and processing.
        </p>
        <div class="info-grid">
            <div class="info-card">
                <h4>Object Detection</h4>
                <p>YOLOv8-powered detection recognizes and labels objects in your images with bounding boxes.</p>
            </div>
            <div class="info-card">
                <h4>Background Removal</h4>
                <p>AI-powered background segmentation removes backgrounds with precision.</p>
            </div>
            <div class="info-card">
                <h4>Face Blurring</h4>
                <p>Automatic face detection and blurring for privacy protection in photos.</p>
            </div>
        </div>
    </div>

    <!-- AI Laboratory -->
    <div class="section-block">
        <h2 class="section-subtitle">
            <i class="ph ph-magic-wand" style="color: var(--primary-purple);"></i> AI Laboratory
        </h2>
        <p style="color: var(--text-gray); line-height: 1.8; margin-bottom: 15px;">
            Deep learning models for image enhancement and restoration.
        </p>
        <div class="info-grid">
            <div class="info-card">
                <h4>Super Resolution</h4>
                <p>Upscale low-resolution images up to 4x while preserving details using deep learning.</p>
            </div>
            <div class="info-card">
                <h4>Image Colorization</h4>
                <p>Transform black and white photos into vibrant color images using AI.</p>
            </div>
            <div class="info-card">
                <h4>Photo Restoration</h4>
                <p>Repair damaged or old photographs by removing scratches and artifacts.</p>
            </div>
        </div>
    </div>

    <!-- API & Technical -->
    <div class="section-block">
        <h2 class="section-subtitle">
            <i class="ph ph-code" style="color: var(--primary-cyan);"></i> Technical Details
        </h2>
        <h4 style="color: var(--text-white); margin-top: 25px; margin-bottom: 10px;">Supported Formats</h4>
        <p style="color: var(--text-gray); line-height: 1.8;">
            <strong>Input:</strong> JPG, JPEG, PNG, WEBP, BMP<br>
            <strong>Output:</strong> JPG, PNG, WEBP
        </p>
        
        <h4 style="color: var(--text-white); margin-top: 25px; margin-bottom: 10px;">Processing Limits</h4>
        <p style="color: var(--text-gray); line-height: 1.8;">
            <strong>Max File Size:</strong> 10MB per image<br>
            <strong>Max Resolution:</strong> 4000x4000 pixels<br>
            <strong>Batch Processing:</strong> Up to 5 images simultaneously
        </p>
        
        <h4 style="color: var(--text-white); margin-top: 25px; margin-bottom: 10px;">Performance</h4>
        <p style="color: var(--text-gray); line-height: 1.8;">
            Processing times vary based on image size and selected operation. Most operations complete within 2-10 seconds.
        </p>
    </div>

    <!-- FAQ -->
    <div class="section-block">
        <h2 class="section-subtitle">
            <i class="ph ph-question" style="color: var(--primary-purple);"></i> Frequently Asked Questions
        </h2>
        <div style="margin-top: 20px;">
            <div style="margin-bottom: 25px;">
                <h4 style="color: var(--primary-cyan); margin-bottom: 8px;">Is my data secure?</h4>
                <p style="color: var(--text-gray); line-height: 1.7;">
                    Yes. All images are processed on our secure servers and automatically deleted after processing. 
                    We do not store or share your images.
                </p>
            </div>
            
            <div style="margin-bottom: 25px;">
                <h4 style="color: var(--primary-cyan); margin-bottom: 8px;">Can I use this for commercial projects?</h4>
                <p style="color: var(--text-gray); line-height: 1.7;">
                    Yes. All processed images belong to you and can be used for any purpose including commercial projects.
                </p>
            </div>
            
            <div style="margin-bottom: 25px;">
                <h4 style="color: var(--primary-cyan); margin-bottom: 8px;">What AI models do you use?</h4>
                <p style="color: var(--text-gray); line-height: 1.7;">
                    We use YOLOv8 for object detection, custom CNN models for super resolution, and transformer-based 
                    models for colorization and restoration.
                </p>
            </div>
        </div>
    </div>

    <!-- Support -->
    <div class="section-block" style="text-align: center; background: linear-gradient(135deg, rgba(189, 0, 255, 0.05) 0%, rgba(0, 242, 255, 0.05) 100%);">
        <h2 class="section-subtitle">Need Help?</h2>
        <p style="color: var(--text-gray); margin-bottom: 20px;">
            Can't find what you're looking for? Contact us for support.
        </p>
        <a href="mailto:jaihodigital@gmail.com" class="btn btn-primary">
            <i class="ph ph-chats-circle"></i> Contact Support
        </a>
    </div>
</div>
{% endblock %}