{% extends "base.html" %}

{% block title %}WebTools — Free Online Utilities, No Account Required{% endblock %}

{% block content %}

<!-- ============================================================
     HERO SECTION
     ============================================================ -->
<section class="wt-hero text-center text-white">
    <div class="container py-5">
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="wt-hero-icon mb-4">
                    <i class="fa-solid fa-wrench fa-3x"></i>
                </div>
                <h1 class="display-4 fw-bold mb-3">Free Online Web Tools</h1>
                <p class="lead mb-2 opacity-90">No Account Required &mdash; No Sign-Up &mdash; 100% Free</p>
                <p class="mb-4 opacity-75">
                    A growing collection of SEO, image, and web utilities designed to save you time.
                    Use any tool instantly, right in your browser.
                </p>
                <div class="d-flex flex-wrap justify-content-center gap-3">
                    <a href="#all-tools" class="btn btn-light btn-lg fw-semibold wt-hero-btn">
                        <i class="fa-solid fa-bolt me-2 text-warning"></i>Browse Tools
                    </a>
                    <a href="#seo" class="btn btn-outline-light btn-lg">
                        <i class="fa-solid fa-magnifying-glass-chart me-2"></i>SEO Tools
                    </a>
                </div>
            </div>
        </div>
    </div>
    <!-- Wave divider -->
    <div class="wt-hero-wave">
        <svg viewBox="0 0 1440 60" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M0,30 C360,60 1080,0 1440,30 L1440,60 L0,60 Z" fill="var(--wt-body-bg)"/>
        </svg>
    </div>
</section>

<!-- ============================================================
     CATEGORY FILTER TABS
     ============================================================ -->
<section id="all-tools" class="container py-5">

    <div class="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-4">
        <h2 class="h4 fw-bold mb-0">
            <i class="fa-solid fa-layer-group me-2 wt-accent"></i>All Tools
        </h2>
        <div class="wt-filter-tabs" role="tablist" aria-label="Filter tools by category">
            <button class="wt-filter-btn active" data-filter="all" role="tab" aria-selected="true">
                <i class="fa-solid fa-th-large me-1"></i>All
            </button>
            <button class="wt-filter-btn" data-filter="seo" role="tab" aria-selected="false">
                <i class="fa-solid fa-magnifying-glass-chart me-1"></i>SEO
            </button>
            <button class="wt-filter-btn" data-filter="image" role="tab" aria-selected="false">
                <i class="fa-solid fa-image me-1"></i>Image
            </button>
            <button class="wt-filter-btn" data-filter="webtools" role="tab" aria-selected="false">
                <i class="fa-solid fa-globe me-1"></i>Web Tools
            </button>
        </div>
    </div>

    <!-- --------------------------------------------------------
         TOOL CARDS — one section per category
         -------------------------------------------------------- -->
    {% if categories %}
        {% for cat_key, cat_data in categories.items() %}
        <div class="wt-category-section mb-5" id="{{ cat_key }}" data-category="{{ cat_key }}">
            <div class="wt-category-header d-flex align-items-center mb-3">
                {% if cat_key == 'seo' %}
                    <span class="wt-cat-badge wt-cat-seo me-3">
                        <i class="fa-solid fa-magnifying-glass-chart"></i>
                    </span>
                {% elif cat_key == 'image' %}
                    <span class="wt-cat-badge wt-cat-image me-3">
                        <i class="fa-solid fa-image"></i>
                    </span>
                {% else %}
                    <span class="wt-cat-badge wt-cat-web me-3">
                        <i class="fa-solid fa-globe"></i>
                    </span>
                {% endif %}
                <h3 class="h5 fw-bold mb-0">{{ cat_data.name }}</h3>
                <span class="badge wt-count-badge ms-2">{{ cat_data.tools | length }}</span>
            </div>

            <div class="row g-4 wt-card-grid">
                {% for tool in cat_data.tools %}
                <div class="col-sm-6 col-lg-4 col-xl-3 wt-tool-card-wrap" data-category="{{ tool.category }}">
                    <div class="card wt-tool-card h-100 border-0 shadow-sm">
                        <div class="card-body d-flex flex-column p-4">
                            <!-- Icon -->
                            <div class="wt-tool-icon mb-3">
                                <i class="{{ tool.icon_class if tool.icon_class else 'fa-solid fa-wrench' }} fa-2x"></i>
                            </div>
                            <!-- Name -->
                            <h4 class="card-title h6 fw-bold mb-2">{{ tool.name }}</h4>
                            <!-- Description -->
                            <p class="card-text text-muted small flex-grow-1 mb-3">
                                {{ tool.description | truncate(100) if tool.description else 'A handy online utility.' }}
                            </p>
                            <!-- CTA Button -->
                            <a href="{{ url_for(tool.endpoint) if tool.endpoint else '#' }}"
                               class="btn wt-btn-primary btn-sm w-100 mt-auto">
                                Use Tool <i class="fa-solid fa-arrow-right ms-1"></i>
                            </a>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
        {% endfor %}

    {% else %}
        <!-- Empty state -->
        <div class="text-center py-5 wt-empty-state">
            <i class="fa-solid fa-box-open fa-4x text-muted mb-4"></i>
            <h3 class="h5 fw-semibold text-muted">No tools available yet</h3>
            <p class="text-muted">Tools will appear here once they are added and activated.</p>
        </div>
    {% endif %}

    <!-- "No results" message shown by JS when filter matches nothing -->
    <div id="noFilterResults" class="text-center py-5 d-none">
        <i class="fa-solid fa-magnifying-glass fa-3x text-muted mb-3"></i>
        <h4 class="h6 fw-semibold text-muted">No tools found in this category</h4>
    </div>

</section>

<!-- ============================================================
     FEATURES STRIP
     ============================================================ -->
<section class="wt-features-strip py-5">
    <div class="container">
        <div class="row g-4 text-center">
            <div class="col-md-4">
                <div class="wt-feature-item p-4">
                    <i class="fa-solid fa-bolt fa-2x wt-accent mb-3"></i>
                    <h5 class="fw-bold">Instant &amp; Free</h5>
                    <p class="text-muted small mb-0">No login, no subscription. Just open a tool and use it.</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="wt-feature-item p-4">
                    <i class="fa-solid fa-lock fa-2x wt-accent mb-3"></i>
                    <h5 class="fw-bold">Privacy First</h5>
                    <p class="text-muted small mb-0">Files are processed and discarded immediately. Nothing is stored.</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="wt-feature-item p-4">
                    <i class="fa-solid fa-mobile-screen fa-2x wt-accent mb-3"></i>
                    <h5 class="fw-bold">Works Everywhere</h5>
                    <p class="text-muted small mb-0">Fully responsive — use on desktop, tablet, or phone.</p>
                </div>
            </div>
        </div>
    </div>
</section>

{% endblock %}

{% block scripts %}
<script>
// Category filter is handled by main.js — triggered on DOMContentLoaded.
// Any page-specific init can go here.
</script>
{% endblock %}