{% extends "base.html" %}
{% set _cms_title = get_page_content(page_id, 'title', g.lang_code) %}
{% set _cms_desc = get_page_content(page_id, 'description', g.lang_code) %}
{% set _cms_heading = get_page_content(page_id, 'page_heading', g.lang_code) %}
{% set _cms_page_desc = get_page_content(page_id, 'page_description', g.lang_code) %}
{% set _cms_head_html = get_page_content(page_id, 'head_html', g.lang_code) %}
{% set _cms_og_image = get_page_content(page_id, 'og_image', g.lang_code) %}
{% block title %}{% if _cms_title %}{{ _cms_title }}{% else %}{% trans %}Remove Image Background{% endtrans %} | OnlineConvert.cc{% endif %}{% endblock %}
{% block description %}{% if _cms_desc %}{{ _cms_desc }}{% else %}{% trans %}Remove backgrounds from photos instantly — 100% automatic, free online tool{% endtrans %}{% endif %}{% endblock %}
{% block og_image_tag %}{% if _cms_og_image %}<meta property="og:image" content="{{ _cms_og_image }}">{% endif %}{% endblock %}
{% block extra_head %}{% if _cms_head_html %}{{ _cms_head_html|safe }}{% endif %}{% endblock %}

{% block head %}
{{ super() }}
<style>
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    @keyframes slideUp {
        from { transform: translateY(20px); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
    }
    @keyframes pulse {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.05); }
    }
    @keyframes gradientShift {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
    }
    .fade-in { animation: fadeIn 0.3s ease-out; }
    .slide-up { animation: slideUp 0.4s ease-out; }

    @keyframes bgReveal {
        0%, 15%  { opacity: 1; }
        45%, 65% { opacity: 0; }
        90%, 100%{ opacity: 1; }
    }
    .demo-layer-before {
        animation: bgReveal 6s ease-in-out infinite;
        position: relative;
        z-index: 2;
    }
    .demo-layer-after {
        z-index: 1;
    }

    .drop-zone-card {
        transition: all 0.3s ease;
    }
    #drop-zone.drag-over {
        box-shadow: inset 0 0 0 3px #6366f1;
        background: rgba(99,102,241,0.05);
    }

    .compare-widget {
        position: relative;
        cursor: col-resize;
    }
    .compare-widget img {
        pointer-events: none;
        -webkit-user-drag: none;
    }

    #carousel-track::-webkit-scrollbar { display: none; }
    #carousel-track { -ms-overflow-style: none; }

    .toggle-switch {
        position: relative;
        display: inline-block;
        width: 44px;
        height: 24px;
        background: #d1d5db;
        border-radius: 12px;
        cursor: pointer;
        transition: background 0.2s;
        flex-shrink: 0;
    }
    .toggle-switch input:checked + .toggle-switch,
    .toggle-switch:has(input:checked) {
        background: #4f46e5;
    }
    .toggle-switch::after {
        content: '';
        position: absolute;
        top: 2px;
        left: 2px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #fff;
        transition: transform 0.2s;
        box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    }
    .toggle-switch:has(input:checked)::after {
        transform: translateX(20px);
    }

    .adjust-row {
        border-bottom: 1px solid #e5e7eb;
        cursor: pointer;
    }
    .dark .adjust-row {
        border-color: #374151;
    }
    .adjust-row:last-child { border-bottom: none; }

    #brush-canvas {
        position: absolute;
        top: 0;
        left: 0;
        cursor: crosshair;
        z-index: 10;
    }
    .canvas-wrapper {
        position: relative;
        display: inline-block;
    }

    .checker-bg {
        background-image:
            linear-gradient(45deg, #e5e7eb 25%, transparent 25%),
            linear-gradient(-45deg, #e5e7eb 25%, transparent 25%),
            linear-gradient(45deg, transparent 75%, #e5e7eb 75%),
            linear-gradient(-45deg, transparent 75%, #e5e7eb 75%);
        background-size: 16px 16px;
        background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
        background-color: #fff;
    }

    .checker-bg-sm {
        background-image:
            linear-gradient(45deg, #d1d5db 25%, transparent 25%),
            linear-gradient(-45deg, #d1d5db 25%, transparent 25%),
            linear-gradient(45deg, transparent 75%, #d1d5db 75%),
            linear-gradient(-45deg, transparent 75%, #d1d5db 75%);
        background-size: 8px 8px;
        background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
        background-color: #fff;
    }

    .step-number {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 1rem;
        flex-shrink: 0;
    }

    .bg-panel-tab {
        padding: 8px 16px;
        font-size: 0.875rem;
        font-weight: 500;
        color: #4b5563;
        border-bottom: 2px solid transparent;
        cursor: pointer;
        transition: all 0.2s;
    }
    .dark .bg-panel-tab {
        color: #9ca3af;
    }
    .bg-panel-tab:hover {
        color: #4338ca;
    }
    .dark .bg-panel-tab:hover {
        color: #818cf8;
    }
    .bg-panel-tab.active {
        color: #4f46e5;
        border-bottom-color: #4f46e5;
        font-weight: 600;
    }
    .dark .bg-panel-tab.active {
        color: #818cf8;
        border-bottom-color: #818cf8;
    }

    .bg-photo-item {
        cursor: pointer;
        border-radius: 0.5rem;
        overflow: hidden;
        border: 2px solid transparent;
        transition: all 0.15s ease;
        aspect-ratio: 1;
    }
    .bg-photo-item:hover {
        border-color: #a5b4fc;
        transform: scale(1.03);
    }
    .bg-photo-item.selected {
        border-color: #4f46e5;
        box-shadow: 0 0 0 2px rgba(79,70,229,0.3);
    }
    .bg-photo-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .bg-color-swatch {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        cursor: pointer;
        border: 2px solid #e5e7eb;
        transition: all 0.15s ease;
        flex-shrink: 0;
    }
    .bg-color-swatch:hover {
        transform: scale(1.1);
        border-color: #a5b4fc;
    }
    .bg-color-swatch.selected {
        border-color: #4f46e5;
        box-shadow: 0 0 0 3px rgba(79,70,229,0.3);
    }

    #result-canvas {
        max-width: 100%;
        max-height: 560px;
        object-fit: contain;
        border-radius: 0.75rem;
    }

    .toolbar-tab.active {
        background-color: #e5e7eb;
        color: #111827;
        font-weight: 600;
    }
    .dark .toolbar-tab.active {
        background-color: #374151;
        color: #f9fafb;
    }

    .editor-wrapper {
        border-radius: 1rem;
        overflow: hidden;
        box-shadow: 0 4px 30px -8px rgba(0,0,0,0.1);
        border: 1px solid #e5e7eb;
    }
    .dark .editor-wrapper {
        border-color: #374151;
        box-shadow: 0 4px 30px -8px rgba(0,0,0,0.4);
    }
</style>
{% endblock %}

{% block content %}

<section class="bg-white dark:bg-gray-900" id="hero-section" style="min-height: calc(100vh - 72px);">
    <div class="flex items-center justify-center" style="min-height: calc(100vh - 72px);">
        <div class="mx-auto w-full px-6 lg:px-8 max-w-5xl py-8">
            <div class="flex flex-col lg:flex-row items-center lg:items-start justify-center gap-8 lg:gap-16">

                <div class="flex flex-col items-center lg:items-start gap-6 max-w-lg">
                    <div class="relative rounded-3xl overflow-hidden max-w-[280px] sm:max-w-[320px] lg:max-w-[400px] w-full shadow-lg">
                        <img src="https://picsum.photos/id/64/400/520" alt="Demo before" class="w-full h-auto block demo-layer-before">
                        <div class="absolute inset-0 checker-bg demo-layer-after flex items-center justify-center">
                            <img src="https://picsum.photos/id/64/400/520" alt="Demo after" class="w-full h-auto block" style="mix-blend-mode: multiply;">
                        </div>
                    </div>

                    <div class="flex flex-col gap-3">
                        <h1 class="font-extrabold text-gray-900 dark:text-white m-0 text-4xl md:text-5xl lg:text-6xl text-center lg:text-left leading-tight">
                            {% if _cms_heading %}{{ _cms_heading }}{% else %}{% trans %}Remove Image{% endtrans %}<br>{% trans %}Background{% endtrans %}{% endif %}
                        </h1>
                        <p class="font-bold text-xl m-0 text-gray-600 dark:text-gray-400 text-center lg:text-left">
                            {% if _cms_page_desc %}{{ _cms_page_desc }}{% else %}{% trans %}100% Automatically and{% endtrans %}
                            <span class="px-3 py-1 text-lg rounded-full font-bold inline-block whitespace-nowrap bg-indigo-600 text-white ml-1">
                                {% trans %}Free{% endtrans %}
                            </span>{% endif %}
                        </p>
                    </div>
                </div>

                <div class="w-full max-w-md mt-0 lg:mt-24">

                    <div id="upload-section" class="flex flex-col gap-4">

                        <div class="relative drop-zone-card w-full flex flex-col items-center gap-6 py-16 px-8 rounded-3xl bg-white dark:bg-gray-800 shadow-2xl">
                            <div id="drop-zone" class="absolute inset-0 z-20 rounded-3xl"></div>
                            <button type="button" id="btn-browse" class="rounded-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold text-xl px-10 py-4 shadow-lg transition relative z-30">
                                {% trans %}Upload Image{% endtrans %}
                            </button>
                            <input type="file" id="file-input" accept=".jpg,.jpeg,.png,.webp" class="hidden">
                            <div class="flex flex-col gap-1 text-center">
                                <p class="m-0 font-bold text-gray-500 dark:text-gray-400">{% trans %}or drop a file,{% endtrans %}</p>
                                <span class="text-sm text-gray-400 dark:text-gray-500">{% trans %}paste image or URL{% endtrans %}</span>
                            </div>
                        </div>

                        <div class="flex flex-col sm:flex-row justify-between items-center gap-3 px-2">
                            <div class="flex flex-col sm:items-start text-sm font-bold text-gray-500 dark:text-gray-400">
                                <span>{% trans %}No image?{% endtrans %}</span>
                                <span>{% trans %}Try one of these:{% endtrans %}</span>
                            </div>
                            <div class="flex gap-2" id="sample-images">
                                <button class="sample-thumb w-12 h-12 sm:w-14 sm:h-14 rounded-2xl overflow-hidden border-2 border-gray-200 dark:border-gray-700 hover:border-indigo-400 transition cursor-pointer" data-url="https://picsum.photos/id/64/300/400">
                                    <img src="https://picsum.photos/id/64/128/128" alt="Sample" class="w-full h-full object-cover">
                                </button>
                                <button class="sample-thumb w-12 h-12 sm:w-14 sm:h-14 rounded-2xl overflow-hidden border-2 border-gray-200 dark:border-gray-700 hover:border-indigo-400 transition cursor-pointer" data-url="https://picsum.photos/id/1025/300/400">
                                    <img src="https://picsum.photos/id/1025/128/128" alt="Sample" class="w-full h-full object-cover">
                                </button>
                                <button class="sample-thumb w-12 h-12 sm:w-14 sm:h-14 rounded-2xl overflow-hidden border-2 border-gray-200 dark:border-gray-700 hover:border-indigo-400 transition cursor-pointer" data-url="https://picsum.photos/id/91/300/400">
                                    <img src="https://picsum.photos/id/91/128/128" alt="Sample" class="w-full h-full object-cover">
                                </button>
                                <button class="sample-thumb w-12 h-12 sm:w-14 sm:h-14 rounded-2xl overflow-hidden border-2 border-gray-200 dark:border-gray-700 hover:border-indigo-400 transition cursor-pointer" data-url="https://picsum.photos/id/428/300/400">
                                    <img src="https://picsum.photos/id/428/128/128" alt="Sample" class="w-full h-full object-cover">
                                </button>
                            </div>
                        </div>

                        <div id="upload-error" class="hidden px-5 py-3 bg-red-50 dark:bg-red-900/30 text-red-600 dark:text-red-400 text-sm rounded-xl border border-red-200 dark:border-red-800">
                            <i class="fa fa-exclamation-circle mr-1"></i> <span id="upload-error-msg"></span>
                        </div>

                        <p class="text-xs text-gray-400 text-center px-2">{% trans %}Supports: JPG, PNG, WEBP{% endtrans %} &bull; {% trans %}Max 10 MB{% endtrans %}</p>
                    </div>

                    <div id="processing-section" class="hidden">
                        <div class="rounded-2xl bg-white dark:bg-gray-900 border border-gray-100 dark:border-gray-800 shadow-md p-12 text-center">
                            <div class="w-16 h-16 mx-auto bg-gradient-to-r from-indigo-500 to-purple-600 rounded-2xl flex items-center justify-center text-white text-3xl shadow-lg mb-5">
                                <i class="fa fa-cog fa-spin"></i>
                            </div>
                            <h3 class="font-semibold text-gray-900 dark:text-white text-xl mb-2">{% trans %}Removing background...{% endtrans %}</h3>
                            <p class="text-sm text-gray-500 dark:text-gray-400 mb-1">{% trans %}Processing your image{% endtrans %}</p>
                            <p class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-5 truncate max-w-sm mx-auto" id="processing-filename"></p>
                            <div class="w-full max-w-xs mx-auto h-1.5 bg-gray-100 dark:bg-gray-800 rounded-full overflow-hidden">
                                <div class="h-full bg-gradient-to-r from-indigo-500 to-green-500 rounded-full transition-all duration-700" id="progress-bar" style="width:0%"></div>
                            </div>
                            <p class="text-xs text-gray-400 mt-4">{% trans %}This may take a few seconds{% endtrans %}</p>
                        </div>
                    </div>

                    <div id="error-section" class="hidden">
                        <div class="rounded-xl bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 p-5 text-center">
                            <i class="fa fa-circle-exclamation text-3xl text-red-400 mb-2"></i>
                            <p class="font-semibold text-red-700 dark:text-red-300 text-sm" id="error-message"></p>
                            <p class="text-xs text-red-500 dark:text-red-400 mt-1" id="error-details"></p>
                        </div>
                    </div>

                </div>

            </div>
        </div>
    </div>

</section>

<section id="result-section" class="hidden bg-gray-100 dark:bg-gray-950 min-h-screen">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">

        <div class="editor-wrapper bg-white dark:bg-gray-900">
            <div class="flex items-center justify-between px-3 py-2.5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 flex-wrap gap-2">
                <div class="flex items-center gap-1 overflow-x-auto">
                    <button type="button" id="btn-remove-another" class="flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm font-medium text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition cursor-pointer whitespace-nowrap mr-1" title="{% trans %}New Image{% endtrans %}">
                        <i class="fa fa-arrow-left text-xs"></i>
                    </button>
                    <div class="w-px h-6 bg-gray-200 dark:bg-gray-700 mr-1"></div>
                    <button type="button" class="toolbar-tab flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm font-medium text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition cursor-pointer whitespace-nowrap" data-tab="cutout">
                        <i class="fa fa-scissors text-xs"></i> {% trans %}Cutout{% endtrans %}
                    </button>
                    <button type="button" class="toolbar-tab active flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm font-semibold bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-white transition cursor-pointer whitespace-nowrap" data-tab="background">
                        <i class="fa fa-image text-xs"></i> {% trans %}Background{% endtrans %}
                    </button>
                    <button type="button" class="toolbar-tab flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm font-medium text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition cursor-pointer whitespace-nowrap" data-tab="effects">
                        <i class="fa fa-wand-magic-sparkles text-xs"></i> {% trans %}Effects{% endtrans %}
                    </button>
                    <button type="button" class="toolbar-tab flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm font-medium text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition cursor-pointer whitespace-nowrap" data-tab="adjust">
                        <i class="fa fa-sliders text-xs"></i> {% trans %}Adjust{% endtrans %}
                    </button>
                    <button type="button" class="toolbar-tab flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm font-medium text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition cursor-pointer whitespace-nowrap" data-tab="design">
                        <i class="fa fa-pen-ruler text-xs"></i> {% trans %}Design{% endtrans %}
                    </button>
                </div>

                <div class="flex items-center gap-1">
                    <button type="button" id="btn-compare" class="w-8 h-8 rounded-full flex items-center justify-center text-gray-400 dark:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-600 transition text-sm" title="{% trans %}Compare{% endtrans %}">
                        <i class="fa fa-arrows-left-right"></i>
                    </button>
                    <button type="button" id="btn-undo" class="w-8 h-8 rounded-full flex items-center justify-center text-gray-400 dark:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-600 transition text-sm" title="{% trans %}Undo{% endtrans %}">
                        <i class="fa fa-rotate-left"></i>
                    </button>
                    <button type="button" id="btn-redo" class="w-8 h-8 rounded-full flex items-center justify-center text-gray-400 dark:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-600 transition text-sm" title="{% trans %}Redo{% endtrans %}">
                        <i class="fa fa-rotate-right"></i>
                    </button>

                    <div class="relative ml-2">
                        <button type="button" id="btn-download" class="inline-flex items-center gap-2 pl-5 pr-2 py-2 rounded-full bg-indigo-600 hover:bg-indigo-700 text-white font-semibold text-sm shadow-md hover:shadow-lg transition-all">
                            <span>{% trans %}Download{% endtrans %}</span>
                            <span id="btn-download-chevron" class="inline-flex items-center justify-center w-6 h-6 rounded-full hover:bg-indigo-500 transition">
                                <i class="fa fa-chevron-down text-xs"></i>
                            </span>
                        </button>
                        <div id="download-dropdown" class="hidden absolute right-0 top-full mt-1 w-52 bg-white dark:bg-gray-800 rounded-xl shadow-xl border border-gray-200 dark:border-gray-700 py-1 z-50">
                            <button type="button" id="dl-transparent" class="w-full text-left px-4 py-2.5 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 flex items-center gap-2">
                                <i class="fa fa-border-none text-gray-400 text-xs"></i> {% trans %}PNG (transparent){% endtrans %}
                            </button>
                            <button type="button" id="dl-with-bg" class="w-full text-left px-4 py-2.5 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 flex items-center gap-2">
                                <i class="fa fa-image text-gray-400 text-xs"></i> {% trans %}PNG (with background){% endtrans %}
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="flex flex-col md:flex-row">
                <div class="flex-1 flex items-center justify-center p-4 md:p-8 bg-gray-50 dark:bg-gray-800/50 min-h-[500px]">
                    <div class="canvas-wrapper">
                        <canvas id="result-canvas"></canvas>
                        <canvas id="brush-canvas" class="hidden"></canvas>
                    </div>
                </div>

                <div id="panel-cutout" class="hidden w-full md:w-[280px] border-t md:border-t-0 md:border-l border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 flex flex-col">
                    <div class="p-4 overflow-y-auto" style="max-height:520px;">
                        <div class="checker-bg-sm rounded-xl overflow-hidden mb-4">
                            <img id="cutout-preview" src="" alt="Preview" class="w-full max-h-24 object-contain">
                        </div>
                        <h4 class="font-semibold text-gray-900 dark:text-white text-sm mb-1">{% trans %}Magic Brush{% endtrans %}</h4>
                        <p class="text-xs text-gray-500 dark:text-gray-400 mb-4">{% trans %}Easily Erase or Restore Anything{% endtrans %}</p>
                        <div class="flex gap-2 mb-5">
                            <button type="button" id="brush-mode-erase" class="flex-1 flex flex-col items-center gap-1.5 py-3 rounded-xl border-2 border-indigo-500 text-indigo-600 bg-indigo-50 dark:bg-indigo-900/30 font-semibold text-sm transition">
                                <i class="fa fa-circle-minus text-lg"></i> {% trans %}Erase{% endtrans %}
                            </button>
                            <button type="button" id="brush-mode-restore" class="flex-1 flex flex-col items-center gap-1.5 py-3 rounded-xl border-2 border-gray-200 dark:border-gray-600 text-gray-500 dark:text-gray-400 font-semibold text-sm transition">
                                <i class="fa fa-circle-plus text-lg"></i> {% trans %}Restore{% endtrans %}
                            </button>
                        </div>
                        <div class="mb-4">
                            <div class="flex items-center justify-between mb-2">
                                <span class="text-sm font-medium text-gray-700 dark:text-gray-300">{% trans %}Brush Size{% endtrans %}</span>
                                <span id="brush-size-val" class="text-xs text-gray-500">30</span>
                            </div>
                            <input type="range" id="brush-size" min="5" max="80" value="30" class="w-full accent-indigo-500">
                        </div>
                        <button type="button" id="btn-reset-cutout" class="text-xs text-indigo-600 dark:text-indigo-400 hover:underline font-medium">
                            <i class="fa fa-rotate-left text-xs mr-1"></i>{% trans %}Reset cutout{% endtrans %}
                        </button>
                    </div>
                </div>

                <div id="bg-side-panel" class="w-full md:w-[280px] border-t md:border-t-0 md:border-l border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 flex flex-col">
                    <div class="flex border-b border-gray-200 dark:border-gray-700">
                        <button type="button" id="tab-magic" class="bg-panel-tab flex-1 text-center">
                            {% trans %}Magic{% endtrans %}
                        </button>
                        <button type="button" id="tab-photo" class="bg-panel-tab active flex-1 text-center">
                            {% trans %}Photo{% endtrans %}
                        </button>
                        <button type="button" id="tab-color" class="bg-panel-tab flex-1 text-center">
                            {% trans %}Color{% endtrans %}
                        </button>
                    </div>

                    <div id="panel-magic" class="p-4 overflow-y-auto hidden" style="max-height: 520px;">
                        <div class="bg-gray-50 dark:bg-gray-800 rounded-xl p-5 text-center">
                            <div class="text-3xl text-indigo-500 mb-3"><i class="fa fa-wand-magic-sparkles"></i></div>
                            <h4 class="font-semibold text-gray-900 dark:text-white text-sm mb-2">{% trans %}AI Background Generation{% endtrans %}</h4>
                            <p class="text-xs text-gray-500 dark:text-gray-400 mb-4">{% trans %}Generate a perfectly matched background for your subject using AI.{% endtrans %}</p>
                            <button type="button" disabled class="px-5 py-2 rounded-full border border-gray-300 dark:border-gray-600 text-gray-400 dark:text-gray-500 text-sm font-medium cursor-not-allowed">
                                {% trans %}Coming Soon{% endtrans %}
                            </button>
                        </div>
                        <p class="text-xs text-gray-400 dark:text-gray-500 mt-3 text-center">{% trans %}Select an image from the Photo tab to use as a background for now.{% endtrans %}</p>
                    </div>

                    <div id="panel-photo" class="p-3 overflow-y-auto" style="max-height: 520px;">
                        <label class="flex items-center justify-center gap-2 w-full py-2.5 mb-3 rounded-xl border-2 border-dashed border-gray-300 dark:border-gray-600 cursor-pointer hover:border-indigo-400 dark:hover:border-indigo-500 transition-colors bg-gray-50 dark:bg-gray-800 text-xs text-gray-500 dark:text-gray-400 font-medium" for="bg-custom-upload">
                            <i class="fa fa-upload text-indigo-500"></i> {% trans %}Upload your own background{% endtrans %}
                        </label>
                        <input type="file" id="bg-custom-upload" accept="image/*" class="hidden">
                        <div class="grid grid-cols-3 gap-2">
                            <div class="bg-photo-item selected checker-bg-sm flex items-center justify-center" data-type="transparent" id="bg-none" title="{% trans %}Transparent{% endtrans %}">
                                <i class="fa fa-border-none text-gray-400 text-lg"></i>
                            </div>
                            <div class="bg-photo-item" data-type="photo" data-url="https://picsum.photos/id/1036/600/600">
                                <img src="https://picsum.photos/id/1036/120/120" alt="{% trans %}Sky{% endtrans %}" loading="lazy">
                            </div>
                            <div class="bg-photo-item" data-type="photo" data-url="https://picsum.photos/id/15/600/600">
                                <img src="https://picsum.photos/id/15/120/120" alt="{% trans %}Forest{% endtrans %}" loading="lazy">
                            </div>
                            <div class="bg-photo-item" data-type="photo" data-url="https://picsum.photos/id/1003/600/600">
                                <img src="https://picsum.photos/id/1003/120/120" alt="{% trans %}Ice{% endtrans %}" loading="lazy">
                            </div>
                            <div class="bg-photo-item" data-type="photo" data-url="https://picsum.photos/id/452/600/600">
                                <img src="https://picsum.photos/id/452/120/120" alt="{% trans %}Tropical{% endtrans %}" loading="lazy">
                            </div>
                            <div class="bg-photo-item" data-type="photo" data-url="https://picsum.photos/id/399/600/600">
                                <img src="https://picsum.photos/id/399/120/120" alt="{% trans %}Texture{% endtrans %}" loading="lazy">
                            </div>
                            <div class="bg-photo-item" data-type="photo" data-url="https://picsum.photos/id/534/600/600">
                                <img src="https://picsum.photos/id/534/120/120" alt="{% trans %}Interior{% endtrans %}" loading="lazy">
                            </div>
                            <div class="bg-photo-item" data-type="photo" data-url="https://picsum.photos/id/96/600/600">
                                <img src="https://picsum.photos/id/96/120/120" alt="{% trans %}Landscape{% endtrans %}" loading="lazy">
                            </div>
                            <div class="bg-photo-item" data-type="photo" data-url="https://picsum.photos/id/431/600/600">
                                <img src="https://picsum.photos/id/431/120/120" alt="{% trans %}Cafe{% endtrans %}" loading="lazy">
                            </div>
                            <div class="bg-photo-item" data-type="photo" data-url="https://picsum.photos/id/167/600/600">
                                <img src="https://picsum.photos/id/167/120/120" alt="{% trans %}Abstract{% endtrans %}" loading="lazy">
                            </div>
                            <div class="bg-photo-item" data-type="photo" data-url="https://picsum.photos/id/145/600/600">
                                <img src="https://picsum.photos/id/145/120/120" alt="{% trans %}Plants{% endtrans %}" loading="lazy">
                            </div>
                            <div class="bg-photo-item" data-type="photo" data-url="https://picsum.photos/id/1038/600/600">
                                <img src="https://picsum.photos/id/1038/120/120" alt="{% trans %}Dusk{% endtrans %}" loading="lazy">
                            </div>
                            <div class="bg-photo-item" data-type="photo" data-url="https://picsum.photos/id/250/600/600">
                                <img src="https://picsum.photos/id/250/120/120" alt="{% trans %}Urban{% endtrans %}" loading="lazy">
                            </div>
                        </div>
                    </div>

                    <div id="panel-color" class="p-3 overflow-y-auto hidden" style="max-height: 520px;">
                        <div class="flex flex-wrap gap-2 justify-center">
                            <div class="bg-color-swatch checker-bg-sm" data-color="transparent" title="{% trans %}Transparent{% endtrans %}"></div>
                            <div class="bg-color-swatch" data-color="#ffffff" style="background:#ffffff;" title="{% trans %}White{% endtrans %}"></div>
                            <div class="bg-color-swatch" data-color="#000000" style="background:#000000; border-color:#374151;" title="{% trans %}Black{% endtrans %}"></div>
                            <div class="bg-color-swatch" data-color="#e5e7eb" style="background:#e5e7eb;" title="{% trans %}Light Gray{% endtrans %}"></div>
                            <div class="bg-color-swatch" data-color="#3b82f6" style="background:#3b82f6; border-color:#3b82f6;" title="{% trans %}Blue{% endtrans %}"></div>
                            <div class="bg-color-swatch" data-color="#ef4444" style="background:#ef4444; border-color:#ef4444;" title="{% trans %}Red{% endtrans %}"></div>
                            <div class="bg-color-swatch" data-color="#22c55e" style="background:#22c55e; border-color:#22c55e;" title="{% trans %}Green{% endtrans %}"></div>
                            <div class="bg-color-swatch" data-color="#eab308" style="background:#eab308; border-color:#eab308;" title="{% trans %}Yellow{% endtrans %}"></div>
                            <div class="bg-color-swatch" data-color="#a855f7" style="background:#a855f7; border-color:#a855f7;" title="{% trans %}Purple{% endtrans %}"></div>
                            <div class="bg-color-swatch" data-color="#ec4899" style="background:#ec4899; border-color:#ec4899;" title="{% trans %}Pink{% endtrans %}"></div>
                            <div class="bg-color-swatch" data-color="#f97316" style="background:#f97316; border-color:#f97316;" title="{% trans %}Orange{% endtrans %}"></div>
                            <div class="bg-color-swatch" data-color="#14b8a6" style="background:#14b8a6; border-color:#14b8a6;" title="{% trans %}Teal{% endtrans %}"></div>
                            <div class="bg-color-swatch" data-color="#1e3a5f" style="background:#1e3a5f; border-color:#1e3a5f;" title="{% trans %}Navy{% endtrans %}"></div>
                            <div class="bg-color-swatch" data-color="#f5f0e8" style="background:#f5f0e8;" title="{% trans %}Beige{% endtrans %}"></div>
                            <div class="bg-color-swatch" data-color="#fefce8" style="background:#fefce8;" title="{% trans %}Cream{% endtrans %}"></div>
                        </div>
                        <div class="mt-4 flex items-center gap-2 justify-center">
                            <label class="text-xs text-gray-500 dark:text-gray-400">{% trans %}Custom:{% endtrans %}</label>
                            <input type="color" id="custom-color-input" value="#6366f1" class="w-8 h-8 rounded-lg cursor-pointer border-0 p-0">
                            <button type="button" id="btn-apply-custom-color" class="text-xs text-indigo-600 dark:text-indigo-400 hover:underline font-medium">{% trans %}Apply{% endtrans %}</button>
                        </div>
                    </div>
                </div>

                <div id="panel-effects" class="hidden w-full md:w-[280px] border-t md:border-t-0 md:border-l border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 flex flex-col">
                    <div class="p-4 overflow-y-auto" style="max-height:520px;">
                        <div class="flex items-center justify-between mb-3">
                            <span class="text-sm font-semibold text-gray-900 dark:text-white">{% trans %}Blur background{% endtrans %}</span>
                            <label class="toggle-switch"><input type="checkbox" id="fx-blur-toggle" class="sr-only"></label>
                        </div>
                        <div id="fx-blur-controls" class="mb-6 opacity-40 pointer-events-none">
                            <div class="flex items-center justify-between mb-1">
                                <span class="text-xs text-gray-500 dark:text-gray-400">{% trans %}Blur amount{% endtrans %}</span>
                                <span id="fx-blur-val" class="text-xs text-gray-500">8</span>
                            </div>
                            <input type="range" id="fx-blur-amount" min="0" max="20" value="8" class="w-full accent-indigo-500">
                        </div>

                        <div class="flex items-center justify-between mb-3">
                            <span class="text-sm font-semibold text-gray-900 dark:text-white">{% trans %}Add Shadow{% endtrans %}</span>
                            <label class="toggle-switch"><input type="checkbox" id="fx-shadow-toggle" class="sr-only"></label>
                        </div>
                        <div id="fx-shadow-controls" class="mb-4 opacity-40 pointer-events-none">
                            <div class="flex items-center justify-between mb-1">
                                <span class="text-xs text-gray-500 dark:text-gray-400">{% trans %}Opacity{% endtrans %}</span>
                                <span id="fx-shadow-val" class="text-xs text-gray-500">0.4</span>
                            </div>
                            <input type="range" id="fx-shadow-opacity" min="0" max="100" value="40" class="w-full accent-indigo-500">
                        </div>
                    </div>
                </div>

                <div id="panel-adjust" class="hidden w-full md:w-[280px] border-t md:border-t-0 md:border-l border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 flex flex-col">
                    <div class="p-4 overflow-y-auto" style="max-height:520px;">
                        <div class="adjust-row py-3" data-target="adjust-color">
                            <div class="flex items-center justify-between">
                                <div class="flex items-center gap-2">
                                    <i class="fa fa-sun text-gray-500 text-sm"></i>
                                    <span class="text-sm font-medium text-gray-900 dark:text-white">{% trans %}Color & light{% endtrans %}</span>
                                </div>
                                <span class="text-xs text-indigo-600 dark:text-indigo-400 font-medium">{% trans %}Open{% endtrans %}</span>
                            </div>
                            <div id="adjust-color" class="hidden mt-3 space-y-3">
                                <div>
                                    <div class="flex items-center justify-between mb-1"><span class="text-xs text-gray-500">{% trans %}Brightness{% endtrans %}</span><span id="adj-bright-val" class="text-xs text-gray-500">0</span></div>
                                    <input type="range" id="adj-brightness" min="-100" max="100" value="0" class="w-full accent-indigo-500">
                                </div>
                                <div>
                                    <div class="flex items-center justify-between mb-1"><span class="text-xs text-gray-500">{% trans %}Contrast{% endtrans %}</span><span id="adj-contrast-val" class="text-xs text-gray-500">0</span></div>
                                    <input type="range" id="adj-contrast" min="-100" max="100" value="0" class="w-full accent-indigo-500">
                                </div>
                                <div>
                                    <div class="flex items-center justify-between mb-1"><span class="text-xs text-gray-500">{% trans %}Saturation{% endtrans %}</span><span id="adj-sat-val" class="text-xs text-gray-500">0</span></div>
                                    <input type="range" id="adj-saturation" min="-100" max="100" value="0" class="w-full accent-indigo-500">
                                </div>
                            </div>
                        </div>

                        <div class="adjust-row py-3" data-target="adjust-crop">
                            <div class="flex items-center justify-between">
                                <div class="flex items-center gap-2">
                                    <i class="fa fa-crop-simple text-gray-500 text-sm"></i>
                                    <span class="text-sm font-medium text-gray-900 dark:text-white">{% trans %}Crop & place{% endtrans %}</span>
                                </div>
                                <span class="text-xs text-indigo-600 dark:text-indigo-400 font-medium">{% trans %}Open{% endtrans %}</span>
                            </div>
                            <div id="adjust-crop" class="hidden mt-3 space-y-3">
                                <div>
                                    <div class="flex items-center justify-between mb-1"><span class="text-xs text-gray-500">{% trans %}Scale{% endtrans %}</span><span id="adj-scale-val" class="text-xs text-gray-500">100%</span></div>
                                    <input type="range" id="adj-scale" min="50" max="150" value="100" class="w-full accent-indigo-500">
                                </div>
                                <div>
                                    <div class="flex items-center justify-between mb-1"><span class="text-xs text-gray-500">{% trans %}X offset{% endtrans %}</span><span id="adj-x-val" class="text-xs text-gray-500">0</span></div>
                                    <input type="range" id="adj-offsetx" min="-50" max="50" value="0" class="w-full accent-indigo-500">
                                </div>
                                <div>
                                    <div class="flex items-center justify-between mb-1"><span class="text-xs text-gray-500">{% trans %}Y offset{% endtrans %}</span><span id="adj-y-val" class="text-xs text-gray-500">0</span></div>
                                    <input type="range" id="adj-offsety" min="-50" max="50" value="0" class="w-full accent-indigo-500">
                                </div>
                            </div>
                        </div>

                        <div class="adjust-row py-3" data-target="adjust-expand">
                            <div class="flex items-center justify-between">
                                <div class="flex items-center gap-2">
                                    <i class="fa fa-expand text-gray-500 text-sm"></i>
                                    <span class="text-sm font-medium text-gray-900 dark:text-white">{% trans %}Expand image{% endtrans %}</span>
                                </div>
                                <span class="text-xs text-indigo-600 dark:text-indigo-400 font-medium">{% trans %}Open{% endtrans %}</span>
                            </div>
                            <div id="adjust-expand" class="hidden mt-3">
                                <div class="flex items-center justify-between mb-1"><span class="text-xs text-gray-500">{% trans %}Padding{% endtrans %}</span><span id="adj-pad-val" class="text-xs text-gray-500">0%</span></div>
                                <input type="range" id="adj-padding" min="0" max="50" value="0" class="w-full accent-indigo-500">
                            </div>
                        </div>
                    </div>
                </div>

                <div id="panel-design" class="hidden w-full md:w-[280px] border-t md:border-t-0 md:border-l border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 flex flex-col">
                    <div class="p-4 overflow-y-auto" style="max-height:520px;">
                        <p class="text-xs text-gray-400 dark:text-gray-500 mb-3 leading-relaxed">{% trans %}Add text or shapes, then <strong>drag</strong> them into position on the canvas.{% endtrans %}</p>

                        <!-- Add Text -->
                        <div class="adjust-row py-3 border-b border-gray-100 dark:border-gray-800" data-target="design-text-panel">
                            <div class="flex items-center justify-between">
                                <div class="flex items-center gap-2">
                                    <i class="fa fa-font text-gray-500 text-sm"></i>
                                    <span class="text-sm font-medium text-gray-900 dark:text-white">{% trans %}Add Text{% endtrans %}</span>
                                </div>
                                <span class="text-xs text-indigo-600 dark:text-indigo-400 font-medium">{% trans %}Open{% endtrans %}</span>
                            </div>
                            <div id="design-text-panel" class="hidden mt-3 space-y-2.5">
                                <input type="text" id="design-text-input" placeholder="{% trans %}Enter text...{% endtrans %}" class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white">
                                <div class="flex gap-2 items-center">
                                    <select id="design-text-size" class="flex-1 px-2 py-1.5 text-xs border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white">
                                        <option value="18">18px</option>
                                        <option value="24">24px</option>
                                        <option value="36" selected>36px</option>
                                        <option value="48">48px</option>
                                        <option value="64">64px</option>
                                        <option value="80">80px</option>
                                    </select>
                                    <label class="text-xs text-gray-500">{% trans %}Color{% endtrans %}</label>
                                    <input type="color" id="design-text-color" value="#ffffff" class="w-8 h-8 rounded-lg cursor-pointer border border-gray-300 dark:border-gray-600 p-0 flex-shrink-0">
                                </div>
                                <select id="design-text-family" class="w-full px-2 py-1.5 text-xs border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white">
                                    <option value="sans-serif">{% trans %}Sans-serif{% endtrans %}</option>
                                    <option value="serif">{% trans %}Serif{% endtrans %}</option>
                                    <option value="monospace">{% trans %}Monospace{% endtrans %}</option>
                                    <option value="Georgia, serif">{% trans %}Georgia{% endtrans %}</option>
                                    <option value="Impact, sans-serif">{% trans %}Impact{% endtrans %}</option>
                                    <option value="Courier New, monospace">{% trans %}Courier New{% endtrans %}</option>
                                </select>
                                <div class="flex gap-3 items-center text-xs text-gray-600 dark:text-gray-400">
                                    <label class="flex items-center gap-1.5 cursor-pointer"><input type="checkbox" id="design-text-bold" class="rounded"> {% trans %}Bold{% endtrans %}</label>
                                    <label class="flex items-center gap-1.5 cursor-pointer"><input type="checkbox" id="design-text-italic" class="rounded"> {% trans %}Italic{% endtrans %}</label>
                                    <label class="flex items-center gap-1.5 cursor-pointer"><input type="checkbox" id="design-text-shadow" class="rounded" checked> {% trans %}Shadow{% endtrans %}</label>
                                </div>
                                <button type="button" id="btn-apply-text" class="w-full py-2 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-semibold rounded-lg transition flex items-center justify-center gap-2">
                                    <i class="fa fa-plus text-xs"></i> {% trans %}Add Text{% endtrans %}
                                </button>
                            </div>
                        </div>

                        <!-- Add Shapes -->
                        <div class="adjust-row py-3 border-b border-gray-100 dark:border-gray-800" data-target="design-shapes-panel">
                            <div class="flex items-center justify-between">
                                <div class="flex items-center gap-2">
                                    <i class="fa fa-shapes text-gray-500 text-sm"></i>
                                    <span class="text-sm font-medium text-gray-900 dark:text-white">{% trans %}Add Shapes{% endtrans %}</span>
                                </div>
                                <span class="text-xs text-indigo-600 dark:text-indigo-400 font-medium">{% trans %}Open{% endtrans %}</span>
                            </div>
                            <div id="design-shapes-panel" class="hidden mt-3 space-y-3">
                                <div class="grid grid-cols-3 gap-2">
                                    <button type="button" class="btn-add-shape flex flex-col items-center gap-1 py-3 rounded-xl border border-gray-200 dark:border-gray-700 hover:border-indigo-400 hover:bg-indigo-50 dark:hover:bg-indigo-900/20 transition text-xs text-gray-600 dark:text-gray-400" data-shape="rect">
                                        <i class="fa fa-square text-base text-gray-500"></i>{% trans %}Rect{% endtrans %}
                                    </button>
                                    <button type="button" class="btn-add-shape flex flex-col items-center gap-1 py-3 rounded-xl border border-gray-200 dark:border-gray-700 hover:border-indigo-400 hover:bg-indigo-50 dark:hover:bg-indigo-900/20 transition text-xs text-gray-600 dark:text-gray-400" data-shape="circle">
                                        <i class="fa fa-circle text-base text-gray-500"></i>{% trans %}Circle{% endtrans %}
                                    </button>
                                    <button type="button" class="btn-add-shape flex flex-col items-center gap-1 py-3 rounded-xl border border-gray-200 dark:border-gray-700 hover:border-indigo-400 hover:bg-indigo-50 dark:hover:bg-indigo-900/20 transition text-xs text-gray-600 dark:text-gray-400" data-shape="line">
                                        <i class="fa fa-minus text-base text-gray-500"></i>{% trans %}Line{% endtrans %}
                                    </button>
                                </div>
                                <div class="space-y-2">
                                    <div class="flex items-center gap-2">
                                        <label class="text-xs text-gray-500 dark:text-gray-400 w-14 flex-shrink-0">{% trans %}Fill{% endtrans %}</label>
                                        <input type="color" id="shape-fill-color" value="#3b82f6" class="w-7 h-7 rounded cursor-pointer border border-gray-300 dark:border-gray-600 p-0 flex-shrink-0">
                                        <label class="flex items-center gap-1 text-xs text-gray-500 cursor-pointer"><input type="checkbox" id="shape-fill-none" class="rounded"> {% trans %}No fill{% endtrans %}</label>
                                    </div>
                                    <div class="flex items-center gap-2">
                                        <label class="text-xs text-gray-500 dark:text-gray-400 w-14 flex-shrink-0">{% trans %}Border{% endtrans %}</label>
                                        <input type="color" id="shape-border-color" value="#1d4ed8" class="w-7 h-7 rounded cursor-pointer border border-gray-300 dark:border-gray-600 p-0 flex-shrink-0">
                                        <input type="number" id="shape-border-width" value="2" min="0" max="20" class="w-12 px-1.5 py-1 text-xs border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white">
                                        <span class="text-xs text-gray-400">{% trans %}px{% endtrans %}</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Objects list -->
                        <div class="py-3">
                            <div class="flex items-center justify-between mb-2">
                                <span class="text-sm font-medium text-gray-900 dark:text-white">{% trans %}Objects{% endtrans %}</span>
                                <span id="obj-count" class="text-xs text-gray-400 dark:text-gray-500">0 objects</span>
                            </div>
                            <div id="design-obj-list">
                                <p class="text-xs text-gray-400 dark:text-gray-500 text-center py-2">{% trans %}No objects added yet.{% endtrans %}</p>
                            </div>
                            <p class="text-xs text-gray-400 dark:text-gray-500 mt-2 leading-relaxed">
                                <i class="fa fa-circle-info mr-1"></i>{% trans %}Click an object to select it, then drag it on the canvas.{% endtrans %}
                            </p>
                        </div>
                    </div>
                </div>

            </div>
        </div>

    </div>

    <img id="original-image" src="" alt="{% trans %}Original{% endtrans %}" class="hidden">
    <img id="result-image" src="" alt="{% trans %}Background removed{% endtrans %}" class="hidden">
    <div id="compare-container" class="hidden"><div id="compare-original"></div><div id="compare-slider"></div></div>
</section>

<section id="features-section" class="bg-white dark:bg-gray-900 border-t border-gray-100 dark:border-gray-800">

    <div class="max-w-4xl mx-auto px-6 py-16 text-center">
        <h2 class="text-3xl md:text-4xl font-extrabold text-gray-900 dark:text-white mb-3">{% trans %}Stunning quality{% endtrans %}</h2>
        <p class="text-gray-500 dark:text-gray-400 mb-10 text-base">{% trans %}100% automatically — in just a few seconds, and always for free{% endtrans %}</p>

        <div class="compare-widget relative select-none overflow-hidden rounded-3xl shadow-xl mx-auto" style="max-width:720px; aspect-ratio:720/500;">
            <div class="compare-after absolute inset-0 checker-bg">
                <img src="https://picsum.photos/id/430/720/500" alt="{% trans %}After{% endtrans %}" class="w-full h-full object-cover" style="mix-blend-mode:multiply;">
            </div>
            <div class="compare-before absolute inset-0 overflow-hidden" style="width:50%;">
                <img src="https://picsum.photos/id/430/720/500" alt="{% trans %}Before{% endtrans %}" class="w-full h-full object-cover" style="min-width:720px;">
            </div>
            <div class="compare-handle absolute inset-y-0 flex items-center z-30" style="left:50%; transform:translateX(-50%);">
                <div class="w-0.5 h-full bg-white shadow"></div>
                <div class="compare-btn absolute w-10 h-10 rounded-full bg-white shadow-xl flex items-center justify-center cursor-grab active:cursor-grabbing" style="left:50%; transform:translateX(-50%);">
                    <i class="fa fa-arrows-left-right text-gray-600 text-sm"></i>
                </div>
            </div>
            <div class="absolute top-3 left-4 px-3 py-1 rounded-full bg-black/50 text-white text-xs font-semibold z-20">{% trans %}Before{% endtrans %}</div>
            <div class="absolute top-3 right-4 px-3 py-1 rounded-full bg-indigo-500/80 text-white text-xs font-semibold z-20">{% trans %}After{% endtrans %}</div>
        </div>
        <a href="#carousel-section" class="inline-block mt-6 text-indigo-600 dark:text-indigo-400 text-sm font-semibold hover:underline">{% trans %}View more examples{% endtrans %} &rarr;</a>
    </div>

    <div class="max-w-5xl mx-auto px-6 py-16">
        <h2 class="text-3xl md:text-4xl font-extrabold text-gray-900 dark:text-white text-center mb-4">{% trans %}One tool, endless uses{% endtrans %}</h2>
        <p class="text-gray-500 dark:text-gray-400 text-center mb-10 text-base max-w-2xl mx-auto">{% trans %}From e-commerce to social media — remove backgrounds for any purpose{% endtrans %}</p>

        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
            <div class="bg-gray-50 dark:bg-gray-800 rounded-2xl p-6 text-center hover:shadow-md transition-shadow">
                <div class="text-3xl text-indigo-500 mb-3"><i class="fa fa-cart-shopping"></i></div>
                <h4 class="font-semibold text-gray-900 dark:text-white text-sm mb-1">{% trans %}E-Commerce{% endtrans %}</h4>
                <p class="text-xs text-gray-500 dark:text-gray-400">{% trans %}Clean product photos{% endtrans %}</p>
            </div>
            <div class="bg-gray-50 dark:bg-gray-800 rounded-2xl p-6 text-center hover:shadow-md transition-shadow">
                <div class="text-3xl text-indigo-500 mb-3"><i class="fa fa-camera"></i></div>
                <h4 class="font-semibold text-gray-900 dark:text-white text-sm mb-1">{% trans %}Photography{% endtrans %}</h4>
                <p class="text-xs text-gray-500 dark:text-gray-400">{% trans %}Portrait & studio shots{% endtrans %}</p>
            </div>
            <div class="bg-gray-50 dark:bg-gray-800 rounded-2xl p-6 text-center hover:shadow-md transition-shadow">
                <div class="text-3xl text-indigo-500 mb-3"><i class="fa fa-palette"></i></div>
                <h4 class="font-semibold text-gray-900 dark:text-white text-sm mb-1">{% trans %}Design{% endtrans %}</h4>
                <p class="text-xs text-gray-500 dark:text-gray-400">{% trans %}Marketing & graphics{% endtrans %}</p>
            </div>
            <div class="bg-gray-50 dark:bg-gray-800 rounded-2xl p-6 text-center hover:shadow-md transition-shadow">
                <div class="text-3xl text-indigo-500 mb-3"><i class="fa fa-share-nodes"></i></div>
                <h4 class="font-semibold text-gray-900 dark:text-white text-sm mb-1">{% trans %}Social Media{% endtrans %}</h4>
                <p class="text-xs text-gray-500 dark:text-gray-400">{% trans %}Thumbnails & stories{% endtrans %}</p>
            </div>
        </div>
    </div>

    <div id="carousel-section" class="max-w-5xl mx-auto px-6 py-16">
        <h2 class="text-3xl md:text-4xl font-extrabold text-gray-900 dark:text-white text-center mb-10">{% trans %}Just picture it{% endtrans %}</h2>

        <div class="relative">
            <button id="carousel-prev" class="absolute left-0 top-1/2 -translate-y-1/2 -translate-x-2 sm:-translate-x-4 z-10 w-10 h-10 rounded-full bg-white dark:bg-gray-800 shadow-lg border border-gray-200 dark:border-gray-700 flex items-center justify-center hover:bg-gray-50 dark:hover:bg-gray-700 transition">
                <i class="fa fa-chevron-left text-gray-600 dark:text-gray-300 text-sm"></i>
            </button>

            <div id="carousel-track" class="flex gap-4 overflow-x-auto scroll-smooth pb-2 px-6" style="scroll-snap-type:x mandatory;">

                <div class="compare-widget relative select-none overflow-hidden rounded-2xl shadow-md flex-shrink-0" style="width:200px; height:260px; scroll-snap-align:start;">
                    <div class="compare-after absolute inset-0 checker-bg"><img src="https://picsum.photos/id/64/200/260" class="w-full h-full object-cover" style="mix-blend-mode:multiply;"></div>
                    <div class="compare-before absolute inset-0 overflow-hidden" style="width:50%;"><img src="https://picsum.photos/id/64/200/260" class="h-full object-cover" style="min-width:200px;"></div>
                    <div class="compare-handle absolute inset-y-0 flex items-center z-30" style="left:50%;transform:translateX(-50%);"><div class="w-0.5 h-full bg-white opacity-80"></div><div class="compare-btn w-7 h-7 absolute rounded-full bg-white shadow-md flex items-center justify-center cursor-grab" style="left:50%;transform:translateX(-50%);"><i class="fa fa-arrows-left-right text-gray-600 text-xs"></i></div></div>
                </div>

                <div class="compare-widget relative select-none overflow-hidden rounded-2xl shadow-md flex-shrink-0" style="width:200px; height:260px; scroll-snap-align:start;">
                    <div class="compare-after absolute inset-0 checker-bg"><img src="https://picsum.photos/id/1025/200/260" class="w-full h-full object-cover" style="mix-blend-mode:multiply;"></div>
                    <div class="compare-before absolute inset-0 overflow-hidden" style="width:50%;"><img src="https://picsum.photos/id/1025/200/260" class="h-full object-cover" style="min-width:200px;"></div>
                    <div class="compare-handle absolute inset-y-0 flex items-center z-30" style="left:50%;transform:translateX(-50%);"><div class="w-0.5 h-full bg-white opacity-80"></div><div class="compare-btn w-7 h-7 absolute rounded-full bg-white shadow-md flex items-center justify-center cursor-grab" style="left:50%;transform:translateX(-50%);"><i class="fa fa-arrows-left-right text-gray-600 text-xs"></i></div></div>
                </div>

                <div class="compare-widget relative select-none overflow-hidden rounded-2xl shadow-md flex-shrink-0" style="width:200px; height:260px; scroll-snap-align:start;">
                    <div class="compare-after absolute inset-0 checker-bg"><img src="https://picsum.photos/id/91/200/260" class="w-full h-full object-cover" style="mix-blend-mode:multiply;"></div>
                    <div class="compare-before absolute inset-0 overflow-hidden" style="width:50%;"><img src="https://picsum.photos/id/91/200/260" class="h-full object-cover" style="min-width:200px;"></div>
                    <div class="compare-handle absolute inset-y-0 flex items-center z-30" style="left:50%;transform:translateX(-50%);"><div class="w-0.5 h-full bg-white opacity-80"></div><div class="compare-btn w-7 h-7 absolute rounded-full bg-white shadow-md flex items-center justify-center cursor-grab" style="left:50%;transform:translateX(-50%);"><i class="fa fa-arrows-left-right text-gray-600 text-xs"></i></div></div>
                </div>

                <div class="compare-widget relative select-none overflow-hidden rounded-2xl shadow-md flex-shrink-0" style="width:200px; height:260px; scroll-snap-align:start;">
                    <div class="compare-after absolute inset-0 checker-bg"><img src="https://picsum.photos/id/428/200/260" class="w-full h-full object-cover" style="mix-blend-mode:multiply;"></div>
                    <div class="compare-before absolute inset-0 overflow-hidden" style="width:50%;"><img src="https://picsum.photos/id/428/200/260" class="h-full object-cover" style="min-width:200px;"></div>
                    <div class="compare-handle absolute inset-y-0 flex items-center z-30" style="left:50%;transform:translateX(-50%);"><div class="w-0.5 h-full bg-white opacity-80"></div><div class="compare-btn w-7 h-7 absolute rounded-full bg-white shadow-md flex items-center justify-center cursor-grab" style="left:50%;transform:translateX(-50%);"><i class="fa fa-arrows-left-right text-gray-600 text-xs"></i></div></div>
                </div>

                <div class="compare-widget relative select-none overflow-hidden rounded-2xl shadow-md flex-shrink-0" style="width:200px; height:260px; scroll-snap-align:start;">
                    <div class="compare-after absolute inset-0 checker-bg"><img src="https://picsum.photos/id/1062/200/260" class="w-full h-full object-cover" style="mix-blend-mode:multiply;"></div>
                    <div class="compare-before absolute inset-0 overflow-hidden" style="width:50%;"><img src="https://picsum.photos/id/1062/200/260" class="h-full object-cover" style="min-width:200px;"></div>
                    <div class="compare-handle absolute inset-y-0 flex items-center z-30" style="left:50%;transform:translateX(-50%);"><div class="w-0.5 h-full bg-white opacity-80"></div><div class="compare-btn w-7 h-7 absolute rounded-full bg-white shadow-md flex items-center justify-center cursor-grab" style="left:50%;transform:translateX(-50%);"><i class="fa fa-arrows-left-right text-gray-600 text-xs"></i></div></div>
                </div>

            </div>

            <button id="carousel-next" class="absolute right-0 top-1/2 -translate-y-1/2 translate-x-2 sm:translate-x-4 z-10 w-10 h-10 rounded-full bg-white dark:bg-gray-800 shadow-lg border border-gray-200 dark:border-gray-700 flex items-center justify-center hover:bg-gray-50 dark:hover:bg-gray-700 transition">
                <i class="fa fa-chevron-right text-gray-600 dark:text-gray-300 text-sm"></i>
            </button>
        </div>
    </div>

    <div class="max-w-3xl mx-auto px-6 py-16 text-center">
        <h2 class="text-3xl md:text-4xl font-extrabold text-gray-900 dark:text-white mb-4">{% trans %}How It Works{% endtrans %}</h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mt-10">
            <div class="text-center">
                <div class="step-number bg-indigo-100 dark:bg-indigo-900/50 text-indigo-600 dark:text-indigo-400 mx-auto mb-4">1</div>
                <h4 class="font-semibold text-gray-900 dark:text-white text-sm mb-1">{% trans %}Upload{% endtrans %}</h4>
                <p class="text-xs text-gray-500 dark:text-gray-400">{% trans %}Drop or browse for any photo{% endtrans %}</p>
            </div>
            <div class="text-center">
                <div class="step-number bg-purple-100 dark:bg-purple-900/50 text-purple-600 dark:text-purple-400 mx-auto mb-4">2</div>
                <h4 class="font-semibold text-gray-900 dark:text-white text-sm mb-1">{% trans %}AI Removes BG{% endtrans %}</h4>
                <p class="text-xs text-gray-500 dark:text-gray-400">{% trans %}Automatic subject detection{% endtrans %}</p>
            </div>
            <div class="text-center">
                <div class="step-number bg-green-100 dark:bg-green-900/50 text-green-600 dark:text-green-400 mx-auto mb-4">3</div>
                <h4 class="font-semibold text-gray-900 dark:text-white text-sm mb-1">{% trans %}Download{% endtrans %}</h4>
                <p class="text-xs text-gray-500 dark:text-gray-400">{% trans %}Get transparent PNG instantly{% endtrans %}</p>
            </div>
        </div>
    </div>

    <div class="bg-gray-50 dark:bg-gray-950 py-16">
        <div class="max-w-md mx-auto px-6 text-center">
            <h2 class="text-2xl md:text-3xl font-extrabold text-gray-900 dark:text-white mb-6">{% trans %}Remove Image Background{% endtrans %}</h2>
            <a href="#hero-section" class="inline-block rounded-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold text-lg px-10 py-4 shadow-lg transition">
                {% trans %}Upload Image{% endtrans %}
            </a>
            <p class="text-xs text-gray-400 dark:text-gray-500 mt-4">{% trans %}No sign-up required{% endtrans %} &bull; {% trans %}100% Free{% endtrans %}</p>
        </div>
    </div>

</section>

<div id="toast" class="fixed bottom-5 right-5 bg-gray-900 text-white px-4 py-3 rounded-lg shadow-lg transform transition-all duration-300 translate-y-20 opacity-0 z-50 flex items-center gap-2">
    <i class="fa fa-check-circle text-green-400"></i>
    <span id="toast-message">{% trans %}Action completed{% endtrans %}</span>
</div>
{% endblock %}

{% block footer %}
{{ super() }}
<script src="/static/js/image-bg-remove.js?v=a343"></script>
{% endblock %}