@extends('layouts.app')

@section('title', '100Toolbox.com - Free Online Tools for developers, creators, and busy people')
@section('meta_description',
    'A collection of free, client-side tools for developers and creators. No servers, no
    tracking. Includes Sitemap Generator, PDF Tools, JSON formatters, and more.')

@section('content')
    <div class="max-w-4xl mx-auto space-y-16">

        <!-- Hero Section -->
        <div class="text-center space-y-6 relative">
            <div
                class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[300px] md:w-[500px] h-[300px] md:h-[500px] bg-indigo-500/10 rounded-full blur-3xl -z-10 animate-pulse pointer-events-none">
            </div>

            <div
                class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10 text-xs font-medium text-indigo-300 mb-4">
                <span class="w-2 h-2 rounded-full bg-indigo-500 animate-pulse"></span>
                New tools added weekly
            </div>

            <h1 class="text-4xl md:text-6xl font-bold tracking-tight text-white">
                Useful Tools for <br>
                <span class="text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 to-cyan-400">Developers &
                    Creators</span>
            </h1>

            <p class="text-lg md:text-xl text-slate-400 max-w-2xl mx-auto leading-relaxed">
                A growing collection of free, high-quality utilities designed to solve specific problems. No cost, no sign
                up, no tracking, no fluff,
                just tools.
            </p>

            {{-- <div class="flex flex-wrap justify-center gap-4 pt-4">
                <a href="#tools"
                    class="px-6 py-3 rounded-lg bg-indigo-500 hover:bg-indigo-600 text-white font-medium transition-all shadow-lg shadow-indigo-500/25 hover:shadow-indigo-500/40 transform hover:-translate-y-0.5">
                    Explore Tools
                </a>
                <a href="#"
                    class="px-6 py-3 rounded-lg bg-white/5 hover:bg-white/10 text-white font-medium border border-white/10 transition-all backdrop-blur-sm">
                    Request a Tool
                </a>
            </div> --}}
        </div>

        <!-- Tools Grid -->
        <div id="tools" class="space-y-8" x-data="toolSearch">
            <div class="flex flex-col md:flex-row md:items-center justify-between gap-4 border-b border-white/10 pb-4">
                <div>
                    <h2 class="text-2xl font-semibold text-white">Available Tools</h2>
                    <div class="text-sm text-slate-500" x-text="`Showing ${count} of ${total} tools`">Showing all tools
                    </div>
                </div>

                <div class="relative w-full md:w-72">
                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                        <svg class="h-5 w-5 text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                        </svg>
                    </div>
                    <input type="text" x-model="query"
                        class="block w-full pl-10 pr-3 py-2 border border-white/10 rounded-xl leading-5 bg-white/5 text-slate-300 placeholder-slate-500 focus:outline-none focus:bg-slate-900 focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 sm:text-sm transition duration-150 ease-in-out"
                        placeholder="Search tools...">
                </div>
            </div>

            <!-- Categories Filter -->
            <div class="flex flex-wrap gap-2" x-show="categories.length > 0" style="display: none;">
                <button @click="selectedCategory = ''"
                    class="px-4 py-1.5 text-xs font-medium rounded-full transition-colors border"
                    :class="selectedCategory === '' ?
                        'bg-indigo-500 text-white border-indigo-500 shadow-md shadow-indigo-500/20' :
                        'bg-white/5 text-slate-400 border-white/10 hover:bg-white/10 hover:text-white'">
                    All
                </button>
                <template x-for="cat in categories" :key="cat">
                    <button @click="selectedCategory = selectedCategory === cat ? '' : cat"
                        class="px-4 py-1.5 text-xs font-medium rounded-full transition-colors border"
                        :class="selectedCategory === cat ?
                            'bg-indigo-500 text-white border-indigo-500 shadow-md shadow-indigo-500/20' :
                            'bg-white/5 text-slate-400 border-white/10 hover:bg-white/10 hover:text-white'"
                        x-text="cat">
                    </button>
                </template>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" x-ref="grid">

                <!-- XML Sitemap Generator Card -->
                <a href="{{ route('tools.sitemap.index') }}"
                    class="group relative p-6 rounded-2xl bg-white/5 border border-white/10 hover:border-indigo-500/50 transition-all duration-300 hover:bg-white/[0.07]">
                    <div
                        class="absolute inset-0 bg-gradient-to-br from-indigo-500/5 to-transparent opacity-0 group-hover:opacity-100 rounded-2xl transition-opacity">
                    </div>

                    <div class="relative space-y-4">
                        <div
                            class="w-12 h-12 rounded-xl bg-indigo-500/20 text-indigo-400 flex items-center justify-center text-2xl group-hover:scale-110 transition-transform duration-300">
                            <!-- Icon -->
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
                                stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
                            </svg>
                        </div>

                        <div>
                            <h3 class="text-xl font-semibold text-white group-hover:text-indigo-300 transition-colors">
                                Sitemap Generator</h3>
                            <p class="text-slate-400 mt-2 text-sm leading-relaxed">
                                Generate XML sitemaps for your website instantly. Helps search engines crawl your content
                                better.
                            </p>
                        </div>

                        <div class="pt-4 flex items-center justify-between border-t border-white/5">
                            <span class="text-xs font-medium px-2 py-1 rounded bg-indigo-500/10 text-indigo-400">SEO
                                Essentials</span>
                        </div>
                    </div>
                </a>

                <!-- Universal Data Redactor Card -->
                <a href="{{ route('tools.redactor.index') }}"
                    class="group relative p-6 rounded-2xl bg-white/5 border border-white/10 hover:border-emerald-500/50 transition-all duration-300 hover:bg-white/[0.07]">
                    <div
                        class="absolute inset-0 bg-gradient-to-br from-emerald-500/5 to-transparent opacity-0 group-hover:opacity-100 rounded-2xl transition-opacity">
                    </div>

                    <div class="relative space-y-4">
                        <div
                            class="w-12 h-12 rounded-xl bg-emerald-500/20 text-emerald-400 flex items-center justify-center text-2xl group-hover:scale-110 transition-transform duration-300">
                            <!-- Icon -->
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
                                stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
                            </svg>
                        </div>

                        <div>
                            <h3 class="text-xl font-semibold text-white group-hover:text-emerald-300 transition-colors">
                                Data Redactor</h3>
                            <p class="text-slate-400 mt-2 text-sm leading-relaxed">
                                Securely remove sensitive info from logs, emails, and code snippets. Everything runs in your
                                browser.
                            </p>
                        </div>

                        <div class="pt-4 flex items-center justify-between border-t border-white/5">
                            <span
                                class="text-xs font-medium px-2 py-1 rounded bg-emerald-500/10 text-emerald-400">Privacy</span>
                        </div>
                    </div>
                </a>

                <!-- Robots.txt Builder Card -->
                <a href="{{ route('tools.robots.index') }}"
                    class="group relative p-6 rounded-2xl bg-white/5 border border-white/10 hover:border-orange-500/50 transition-all duration-300 hover:bg-white/[0.07]">
                    <div
                        class="absolute inset-0 bg-gradient-to-br from-orange-500/5 to-transparent opacity-0 group-hover:opacity-100 rounded-2xl transition-opacity">
                    </div>

                    <div class="relative space-y-4">
                        <div
                            class="w-12 h-12 rounded-xl bg-orange-500/20 text-orange-400 flex items-center justify-center text-2xl group-hover:scale-110 transition-transform duration-300">
                            <!-- Icon -->
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
                                stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
                            </svg>
                        </div>

                        <div>
                            <h3 class="text-xl font-semibold text-white group-hover:text-orange-300 transition-colors">
                                Robots.txt Builder</h3>
                            <p class="text-slate-400 mt-2 text-sm leading-relaxed">
                                Visually generate robots.txt files. One-click blocking for AI scrapers like GPTBot.
                            </p>
                        </div>

                        <div class="pt-4 flex items-center justify-between border-t border-white/5">
                            <span class="text-xs font-medium px-2 py-1 rounded bg-orange-500/10 text-orange-400">SEO
                                Essentials</span>
                        </div>
                    </div>
                </a>

                <!-- Thread Splitter Card -->
                <a href="{{ route('tools.threads.index') }}"
                    class="group relative p-6 rounded-2xl bg-white/5 border border-white/10 hover:border-sky-500/50 transition-all duration-300 hover:bg-white/[0.07]">
                    <div
                        class="absolute inset-0 bg-gradient-to-br from-sky-500/5 to-transparent opacity-0 group-hover:opacity-100 rounded-2xl transition-opacity">
                    </div>

                    <div class="relative space-y-4">
                        <div
                            class="w-12 h-12 rounded-xl bg-sky-500/20 text-sky-400 flex items-center justify-center text-2xl group-hover:scale-110 transition-transform duration-300">
                            <!-- Icon -->
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
                                stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z" />
                            </svg>
                        </div>

                        <div>
                            <h3 class="text-xl font-semibold text-white group-hover:text-sky-300 transition-colors">
                                Thread Splitter</h3>
                            <p class="text-slate-400 mt-2 text-sm leading-relaxed">
                                Turn long posts into perfectly threaded tweets for X, Bluesky, or Threads.
                            </p>
                        </div>

                        <div class="pt-4 flex items-center justify-between border-t border-white/5">
                            <span class="text-xs font-medium px-2 py-1 rounded bg-sky-500/10 text-sky-400">Social
                                Media</span>
                        </div>
                    </div>
                </a>

                <!-- Schema Generator Card -->
                <a href="{{ route('tools.schema.index') }}"
                    class="group relative p-6 rounded-2xl bg-white/5 border border-white/10 hover:border-purple-500/50 transition-all duration-300 hover:bg-white/[0.07]">
                    <div
                        class="absolute inset-0 bg-gradient-to-br from-purple-500/5 to-transparent opacity-0 group-hover:opacity-100 rounded-2xl transition-opacity">
                    </div>

                    <div class="relative space-y-4">
                        <div
                            class="w-12 h-12 rounded-xl bg-purple-500/20 text-purple-400 flex items-center justify-center text-2xl group-hover:scale-110 transition-transform duration-300">
                            <!-- Icon -->
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
                                stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
                            </svg>
                        </div>

                        <div>
                            <h3 class="text-xl font-semibold text-white group-hover:text-purple-300 transition-colors">
                                Schema Generator</h3>
                            <p class="text-slate-400 mt-2 text-sm leading-relaxed">
                                Boost SEO with JSON-LD markup. Generate valid code for FAQ, Events, and Products.
                            </p>
                        </div>

                        <div class="pt-4 flex items-center justify-between border-t border-white/5">
                            <span class="text-xs font-medium px-2 py-1 rounded bg-purple-500/10 text-purple-400">SEO
                                Essentials</span>
                        </div>
                    </div>
                </a>

                <!-- URL Sanitizer Card -->
                <a href="{{ route('tools.url.index') }}"
                    class="group relative p-6 rounded-2xl bg-white/5 border border-white/10 hover:border-pink-500/50 transition-all duration-300 hover:bg-white/[0.07]">
                    <div
                        class="absolute inset-0 bg-gradient-to-br from-pink-500/5 to-transparent opacity-0 group-hover:opacity-100 rounded-2xl transition-opacity">
                    </div>

                    <div class="relative space-y-4">
                        <div
                            class="w-12 h-12 rounded-xl bg-pink-500/20 text-pink-400 flex items-center justify-center text-2xl group-hover:scale-110 transition-transform duration-300">
                            <!-- Icon -->
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
                                stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
                            </svg>
                        </div>

                        <div>
                            <h3 class="text-xl font-semibold text-white group-hover:text-pink-300 transition-colors">
                                Clean Link</h3>
                            <p class="text-slate-400 mt-2 text-sm leading-relaxed">
                                Remove tracking parameters like utm_source and fbclid from URLs. Privacy first.
                            </p>
                        </div>

                        <div class="pt-4 flex items-center justify-between border-t border-white/5">
                            <span class="text-xs font-medium px-2 py-1 rounded bg-pink-500/10 text-pink-400">Privacy</span>
                        </div>
                    </div>
                </a>

                <!-- Email Simulator Card -->
                <a href="{{ route('tools.email.index') }}"
                    class="group relative p-6 rounded-2xl bg-white/5 border border-white/10 hover:border-blue-500/50 transition-all duration-300 hover:bg-white/[0.07]">
                    <div
                        class="absolute inset-0 bg-gradient-to-br from-blue-500/5 to-transparent opacity-0 group-hover:opacity-100 rounded-2xl transition-opacity">
                    </div>

                    <div class="relative space-y-4">
                        <div
                            class="w-12 h-12 rounded-xl bg-blue-500/20 text-blue-400 flex items-center justify-center text-2xl group-hover:scale-110 transition-transform duration-300">
                            <!-- Icon -->
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
                                stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                            </svg>
                        </div>

                        <div>
                            <h3 class="text-xl font-semibold text-white group-hover:text-blue-300 transition-colors">
                                Email Subject Line Tester</h3>
                            <p class="text-slate-400 mt-2 text-sm leading-relaxed">
                                Preview your subject lines on iPhone, Gmail, and Outlook to ensure they aren't cut off.
                            </p>
                        </div>

                        <div class="pt-4 flex items-center justify-between border-t border-white/5">
                            <span class="text-xs font-medium px-2 py-1 rounded bg-blue-500/10 text-blue-400">Marketing
                                Tools</span>
                        </div>
                    </div>
                </a>

                <!-- Shadow Generator Card -->
                <a href="{{ route('tools.shadow.index') }}"
                    class="group relative p-6 rounded-2xl bg-white/5 border border-white/10 hover:border-cyan-500/50 transition-all duration-300 hover:bg-white/[0.07]">
                    <div
                        class="absolute inset-0 bg-gradient-to-br from-cyan-500/5 to-transparent opacity-0 group-hover:opacity-100 rounded-2xl transition-opacity">
                    </div>

                    <div class="relative space-y-4">
                        <div
                            class="w-12 h-12 rounded-xl bg-cyan-500/20 text-cyan-400 flex items-center justify-center text-2xl group-hover:scale-110 transition-transform duration-300">
                            <!-- Icon -->
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
                                stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
                            </svg>
                        </div>

                        <div>
                            <h3 class="text-xl font-semibold text-white group-hover:text-cyan-300 transition-colors">
                                CSS Smooth Shadow Generator</h3>
                            <p class="text-slate-400 mt-2 text-sm leading-relaxed">
                                Create high-end, smooth, and layered box-shadows. The secret to modern depth.
                            </p>
                        </div>

                        <div class="pt-4 flex items-center justify-between border-t border-white/5">
                            <span class="text-xs font-medium px-2 py-1 rounded bg-cyan-500/10 text-cyan-400">Design</span>
                        </div>
                    </div>
                </a>

                <!-- Meeting Planner Card -->
                <a href="{{ route('tools.meeting.index') }}"
                    class="group relative p-6 rounded-2xl bg-white/5 border border-white/10 hover:border-amber-500/50 transition-all duration-300 hover:bg-white/[0.07]">
                    <div
                        class="absolute inset-0 bg-gradient-to-br from-amber-500/5 to-transparent opacity-0 group-hover:opacity-100 rounded-2xl transition-opacity">
                    </div>

                    <div class="relative space-y-4">
                        <div
                            class="w-12 h-12 rounded-xl bg-amber-500/20 text-amber-400 flex items-center justify-center text-2xl group-hover:scale-110 transition-transform duration-300">
                            <!-- Icon -->
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
                                stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                        </div>

                        <div>
                            <h3 class="text-xl font-semibold text-white group-hover:text-amber-300 transition-colors">
                                Golden Hour Planner</h3>
                            <p class="text-slate-400 mt-2 text-sm leading-relaxed">
                                Find the perfect meeting time across multiple timezones with a visual timeline.
                            </p>
                        </div>

                        <div class="pt-4 flex items-center justify-between border-t border-white/5">
                            <span
                                class="text-xs font-medium px-2 py-1 rounded bg-amber-500/10 text-amber-400">Productivity</span>
                        </div>
                    </div>
                </a>

                </a>

                <!-- PDF Merger Card -->
                <a href="{{ route('tools.pdf.merge') }}"
                    class="group relative p-6 rounded-2xl bg-white/5 border border-white/10 hover:border-cyan-500/50 transition-all duration-300 hover:bg-white/[0.07]">
                    <div
                        class="absolute inset-0 bg-gradient-to-br from-cyan-500/5 to-transparent opacity-0 group-hover:opacity-100 rounded-2xl transition-opacity">
                    </div>

                    <div class="relative space-y-4">
                        <div
                            class="w-12 h-12 rounded-xl bg-cyan-500/20 text-cyan-400 flex items-center justify-center text-2xl group-hover:scale-110 transition-transform duration-300">
                            <!-- Icon -->
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
                            </svg>
                        </div>

                        <div>
                            <h3 class="text-xl font-semibold text-white group-hover:text-cyan-300 transition-colors">
                                Merge PDFs</h3>
                            <p class="text-slate-400 mt-2 text-sm leading-relaxed">
                                Combine PDF files securely in your browser. No uploads, no server, 100% private.
                            </p>
                        </div>

                        <div class="pt-4 flex items-center justify-between border-t border-white/5">
                            <span
                                class="text-xs font-medium px-2 py-1 rounded bg-cyan-500/10 text-cyan-400">Utilities</span>
                        </div>
                    </div>
                </a>

                <!-- Free Trial Alarm Card -->
                <a href="{{ route('tools.trial.alarm') }}"
                    class="group relative p-6 rounded-2xl bg-white/5 border border-white/10 hover:border-amber-500/50 transition-all duration-300 hover:bg-white/[0.07]">
                    <div
                        class="absolute inset-0 bg-gradient-to-br from-amber-500/5 to-transparent opacity-0 group-hover:opacity-100 rounded-2xl transition-opacity">
                    </div>

                    <div class="relative space-y-4">
                        <div
                            class="w-12 h-12 rounded-xl bg-amber-500/20 text-amber-400 flex items-center justify-center text-2xl group-hover:scale-110 transition-transform duration-300">
                            <!-- Icon -->
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                        </div>

                        <div>
                            <h3 class="text-xl font-semibold text-white group-hover:text-amber-300 transition-colors">
                                Free Trial Cancellation Reminder</h3>
                            <p class="text-slate-400 mt-2 text-sm leading-relaxed">
                                Prevent accidental charges. Generate a cancellation reminder for 48 hours before your trial
                                ends.
                            </p>
                        </div>

                        <div class="pt-4 flex items-center justify-between border-t border-white/5">
                            <span
                                class="text-xs font-medium px-2 py-1 rounded bg-amber-500/10 text-amber-400">Finance</span>
                        </div>
                    </div>
                </a>

                <!-- Fair Share Calculator Card -->
                <a href="{{ route('tools.fair.share') }}"
                    class="group relative p-6 rounded-2xl bg-white/5 border border-white/10 hover:border-emerald-500/50 transition-all duration-300 hover:bg-white/[0.07]">
                    <div
                        class="absolute inset-0 bg-gradient-to-br from-emerald-500/5 to-transparent opacity-0 group-hover:opacity-100 rounded-2xl transition-opacity">
                    </div>

                    <div class="relative space-y-4">
                        <div
                            class="w-12 h-12 rounded-xl bg-emerald-500/20 text-emerald-400 flex items-center justify-center text-2xl group-hover:scale-110 transition-transform duration-300">
                            <!-- Icon -->
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
                            </svg>
                        </div>

                        <div>
                            <h3 class="text-xl font-semibold text-white group-hover:text-emerald-300 transition-colors">
                                Fair Share Calculator</h3>
                            <p class="text-slate-400 mt-2 text-sm leading-relaxed">
                                Split rent and bills fairly. Calculate proportional contributions based on income.
                            </p>
                        </div>

                        <div class="pt-4 flex items-center justify-between border-t border-white/5">
                            <span
                                class="text-xs font-medium px-2 py-1 rounded bg-emerald-500/10 text-emerald-400">Finance</span>
                        </div>
                    </div>
                </a>

                </a>

                <!-- Speech Pacing Calculator Card -->
                <a href="{{ route('tools.speech.pacing') }}"
                    class="group relative p-6 rounded-2xl bg-white/5 border border-white/10 hover:border-pink-500/50 transition-all duration-300 hover:bg-white/[0.07]">
                    <div
                        class="absolute inset-0 bg-gradient-to-br from-pink-500/5 to-transparent opacity-0 group-hover:opacity-100 rounded-2xl transition-opacity">
                    </div>

                    <div class="relative space-y-4">
                        <div
                            class="w-12 h-12 rounded-xl bg-pink-500/20 text-pink-400 flex items-center justify-center text-2xl group-hover:scale-110 transition-transform duration-300">
                            <!-- Icon -->
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z" />
                            </svg>
                        </div>

                        <div>
                            <h3 class="text-xl font-semibold text-white group-hover:text-pink-300 transition-colors">
                                Speech Pacing</h3>
                            <p class="text-slate-400 mt-2 text-sm leading-relaxed">
                                Don't let your toast drag on. Estimate reading time and add breath markers.
                            </p>
                        </div>

                        <div class="pt-4 flex items-center justify-between border-t border-white/5">
                            <span
                                class="text-xs font-medium px-2 py-1 rounded bg-pink-500/10 text-pink-400">Communication</span>
                        </div>
                    </div>
                </a>

                <!-- Secret Sharer Card -->
                <a href="{{ route('tools.disappearing-messages') }}"
                    class="group relative p-6 rounded-2xl bg-white/5 border border-white/10 hover:border-emerald-500/50 transition-all duration-300 hover:bg-white/[0.07]">
                    <div
                        class="absolute inset-0 bg-gradient-to-br from-emerald-500/5 to-transparent opacity-0 group-hover:opacity-100 rounded-2xl transition-opacity">
                    </div>

                    <div class="relative space-y-4">
                        <div
                            class="w-12 h-12 rounded-xl bg-emerald-500/20 text-emerald-400 flex items-center justify-center text-2xl group-hover:scale-110 transition-transform duration-300">
                            <!-- Icon -->
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z">
                                </path>
                            </svg>
                        </div>

                        <div>
                            <h3 class="text-xl font-semibold text-white group-hover:text-emerald-300 transition-colors">
                                Disappearing Messages</h3>
                            <p class="text-slate-400 mt-2 text-sm leading-relaxed">
                                Create self-destructing links for passwords. Encryption happens in your browser.
                            </p>
                        </div>

                        <div class="pt-4 flex items-center justify-between border-t border-white/5">
                            <span
                                class="text-xs font-medium px-2 py-1 rounded bg-emerald-500/10 text-emerald-400">Security</span>
                        </div>
                    </div>
                </a>

                <!-- Audio Trimmer Card -->
                <a href="{{ route('tools.trim-audio') }}"
                    class="group relative p-6 rounded-2xl bg-white/5 border border-white/10 hover:border-indigo-500/50 transition-all duration-300 hover:bg-white/[0.07]">
                    <div
                        class="absolute inset-0 bg-gradient-to-br from-indigo-500/5 to-transparent opacity-0 group-hover:opacity-100 rounded-2xl transition-opacity">
                    </div>

                    <div class="relative space-y-4">
                        <div
                            class="w-12 h-12 rounded-xl bg-indigo-500/20 text-indigo-400 flex items-center justify-center text-2xl group-hover:scale-110 transition-transform duration-300">
                            <!-- Icon -->
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z" />
                            </svg>
                        </div>

                        <div>
                            <h3 class="text-xl font-semibold text-white group-hover:text-indigo-300 transition-colors">
                                Trim Audio</h3>
                            <p class="text-slate-400 mt-2 text-sm leading-relaxed">
                                Trim voice memos and meetings privately. No uploads, runs 100% in your browser.
                            </p>
                        </div>

                        <div class="pt-4 flex items-center justify-between border-t border-white/5">
                            <span
                                class="text-xs font-medium px-2 py-1 rounded bg-indigo-500/10 text-indigo-400">Privacy</span>
                        </div>
                    </div>
                </a>

                <!-- Photo EXIF Stripper Card -->
                <a href="{{ route('tools.metadata-remover') }}"
                    class="group relative p-6 rounded-2xl bg-white/5 border border-white/10 hover:border-emerald-500/50 transition-all duration-300 hover:bg-white/[0.07]">
                    <div
                        class="absolute inset-0 bg-gradient-to-br from-emerald-500/5 to-transparent opacity-0 group-hover:opacity-100 rounded-2xl transition-opacity">
                    </div>

                    <div class="relative space-y-4">
                        <div
                            class="w-12 h-12 rounded-xl bg-emerald-500/20 text-emerald-400 flex items-center justify-center text-2xl group-hover:scale-110 transition-transform duration-300">
                            <!-- Icon -->
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z">
                                </path>
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"></path>
                            </svg>
                        </div>

                        <div>
                            <h3 class="text-xl font-semibold text-white group-hover:text-emerald-300 transition-colors">
                                Metadata Remover</h3>
                            <p class="text-slate-400 mt-2 text-sm leading-relaxed">
                                Remove hidden GPS & camera metadata from photos before sharing. Drag, drop, clean.
                            </p>
                        </div>

                        <div class="pt-4 flex items-center justify-between border-t border-white/5">
                            <span
                                class="text-xs font-medium px-2 py-1 rounded bg-emerald-500/10 text-emerald-400">Privacy</span>
                        </div>
                    </div>
                </a>

                <!-- Local Time Linker Card -->
                <a href="{{ route('tools.local-time') }}"
                    class="group relative p-6 rounded-2xl bg-white/5 border border-white/10 hover:border-indigo-500/50 transition-all duration-300 hover:bg-white/[0.07]">
                    <div
                        class="absolute inset-0 bg-gradient-to-br from-indigo-500/5 to-transparent opacity-0 group-hover:opacity-100 rounded-2xl transition-opacity">
                    </div>

                    <div class="relative space-y-4">
                        <div
                            class="w-12 h-12 rounded-xl bg-indigo-500/20 text-indigo-400 flex items-center justify-center text-2xl group-hover:scale-110 transition-transform duration-300">
                            <!-- Icon -->
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                        </div>

                        <div>
                            <h3 class="text-xl font-semibold text-white group-hover:text-indigo-300 transition-colors">
                                Local Time Linker</h3>
                            <p class="text-slate-400 mt-2 text-sm leading-relaxed">
                                Create event links that automatically display in the viewer's local time zone. No math
                                required.
                            </p>
                        </div>

                        <div class="pt-4 flex items-center justify-between border-t border-white/5">
                            <span
                                class="text-xs font-medium px-2 py-1 rounded bg-indigo-500/10 text-indigo-400">Utilities</span>
                        </div>
                    </div>
                </a>

                <!-- Subtitle Shifter Card -->
                <a href="{{ route('tools.subtitle-shifter') }}"
                    class="group relative p-6 rounded-2xl bg-white/5 border border-white/10 hover:border-indigo-500/50 transition-all duration-300 hover:bg-white/[0.07]">
                    <div
                        class="absolute inset-0 bg-gradient-to-br from-indigo-500/5 to-transparent opacity-0 group-hover:opacity-100 rounded-2xl transition-opacity">
                    </div>

                    <div class="relative space-y-4">
                        <div
                            class="w-12 h-12 rounded-xl bg-indigo-500/20 text-indigo-400 flex items-center justify-center text-2xl group-hover:scale-110 transition-transform duration-300">
                            <!-- Icon -->
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z">
                                </path>
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                        </div>

                        <div>
                            <h3 class="text-xl font-semibold text-white group-hover:text-indigo-300 transition-colors">
                                Subtitle Time Shifter</h3>
                            <p class="text-slate-400 mt-2 text-sm leading-relaxed">
                                Fix unsynced subtitles. Shift timestamps forward or backward by seconds. 100% Client-side.
                            </p>
                        </div>

                        <div class="pt-4 flex items-center justify-between border-t border-white/5">
                            <span
                                class="text-xs font-medium px-2 py-1 rounded bg-indigo-500/10 text-indigo-400">Media</span>
                        </div>
                    </div>
                </a>

                <!-- SVG Color Swapper Card -->
                <a href="{{ route('tools.change-svg-color') }}"
                    class="group relative p-6 rounded-2xl bg-white/5 border border-white/10 hover:border-pink-500/50 transition-all duration-300 hover:bg-white/[0.07]">
                    <div
                        class="absolute inset-0 bg-gradient-to-br from-pink-500/5 to-transparent opacity-0 group-hover:opacity-100 rounded-2xl transition-opacity">
                    </div>

                    <div class="relative space-y-4">
                        <div
                            class="w-12 h-12 rounded-xl bg-pink-500/20 text-pink-400 flex items-center justify-center text-2xl group-hover:scale-110 transition-transform duration-300">
                            <!-- Icon -->
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01">
                                </path>
                            </svg>
                        </div>

                        <div>
                            <h3 class="text-xl font-semibold text-white group-hover:text-pink-300 transition-colors">
                                Change SVG Color</h3>
                            <p class="text-slate-400 mt-2 text-sm leading-relaxed">
                                Instantly change icon colors. Upload SVG, pick new colors, download. No design tools needed.
                            </p>
                        </div>

                        <div class="pt-4 flex items-center justify-between border-t border-white/5">
                            <span class="text-xs font-medium px-2 py-1 rounded bg-pink-500/10 text-pink-400">Design</span>
                        </div>
                    </div>
                </a>

                <!-- Safe ID Watermarker Card -->
                <a href="{{ route('tools.image-watermark') }}"
                    class="group relative p-6 rounded-2xl bg-white/5 border border-white/10 hover:border-indigo-500/50 transition-all duration-300 hover:bg-white/[0.07]">
                    <div
                        class="absolute inset-0 bg-gradient-to-br from-indigo-500/5 to-transparent opacity-0 group-hover:opacity-100 rounded-2xl transition-opacity">
                    </div>

                    <div class="relative space-y-4">
                        <div
                            class="w-12 h-12 rounded-xl bg-indigo-500/20 text-indigo-400 flex items-center justify-center text-2xl group-hover:scale-110 transition-transform duration-300">
                            <!-- Icon -->
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                        </div>

                        <div>
                            <h3 class="text-xl font-semibold text-white group-hover:text-indigo-300 transition-colors">
                                Image Watermark</h3>
                            <p class="text-slate-400 mt-2 text-sm leading-relaxed">
                                Protect your photos from being used without your permission. Add custom watermarks
                                in your browser.
                            </p>
                        </div>

                        <div class="pt-4 flex items-center justify-between border-t border-white/5">
                            <span
                                class="text-xs font-medium px-2 py-1 rounded bg-indigo-500/10 text-indigo-400">Privacy</span>
                        </div>
                    </div>
                </a>

                <!-- True Cost Calculator Card -->
                <a href="{{ route('tools.true-cost') }}"
                    class="group relative p-6 rounded-2xl bg-white/5 border border-white/10 hover:border-emerald-500/50 transition-all duration-300 hover:bg-white/[0.07]">
                    <div
                        class="absolute inset-0 bg-gradient-to-br from-emerald-500/5 to-transparent opacity-0 group-hover:opacity-100 rounded-2xl transition-opacity">
                    </div>

                    <div class="relative space-y-4">
                        <div
                            class="w-12 h-12 rounded-xl bg-emerald-500/20 text-emerald-400 flex items-center justify-center text-2xl group-hover:scale-110 transition-transform duration-300">
                            <!-- Icon -->
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z">
                                </path>
                            </svg>
                        </div>

                        <div>
                            <h3 class="text-xl font-semibold text-white group-hover:text-emerald-300 transition-colors">
                                True Cost Calculator</h3>
                            <p class="text-slate-400 mt-2 text-sm leading-relaxed">
                                See how much of your life an item really costs. Convert price tags into working hours.
                            </p>
                        </div>

                        <div class="pt-4 flex items-center justify-between border-t border-white/5">
                            <span
                                class="text-xs font-medium px-2 py-1 rounded bg-emerald-500/10 text-emerald-400">Finance</span>
                        </div>
                    </div>
                </a>



                <!-- PDF Redactor Card -->
                <a href="{{ route('tools.pdf-redactor') }}"
                    class="group relative p-6 rounded-2xl bg-white/5 border border-white/10 hover:border-red-500/50 transition-all duration-300 hover:bg-white/[0.07]">
                    <div
                        class="absolute inset-0 bg-gradient-to-br from-red-500/5 to-transparent opacity-0 group-hover:opacity-100 rounded-2xl transition-opacity">
                    </div>

                    <div class="relative space-y-4">
                        <div
                            class="w-12 h-12 rounded-xl bg-red-500/20 text-red-400 flex items-center justify-center text-2xl group-hover:scale-110 transition-transform duration-300">
                            <!-- Icon -->
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                            </svg>
                        </div>

                        <div>
                            <h3 class="text-xl font-semibold text-white group-hover:text-red-300 transition-colors">
                                PDF Redactor</h3>
                            <p class="text-slate-400 mt-2 text-sm leading-relaxed">
                                Permanently redact sensitive info. We flatten pages into images so text is unrecoverable.
                            </p>
                        </div>

                        <div class="pt-4 flex items-center justify-between border-t border-white/5">
                            <span class="text-xs font-medium px-2 py-1 rounded bg-red-500/10 text-red-400">Security</span>
                        </div>
                    </div>
                </a>

                <!-- Webpage Image Extractor Card -->
                <a href="{{ route('tools.image-scraper.index') }}"
                    class="group relative p-6 rounded-2xl bg-white/5 border border-white/10 hover:border-blue-500/50 transition-all duration-300 hover:bg-white/[0.07]">
                    <div
                        class="absolute inset-0 bg-gradient-to-br from-blue-500/5 to-transparent opacity-0 group-hover:opacity-100 rounded-2xl transition-opacity">
                    </div>

                    <div class="relative space-y-4">
                        <div
                            class="w-12 h-12 rounded-xl bg-blue-500/20 text-blue-400 flex items-center justify-center text-2xl group-hover:scale-110 transition-transform duration-300">
                            <!-- Icon -->
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
                                stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                            </svg>
                        </div>

                        <div>
                            <h3 class="text-xl font-semibold text-white group-hover:text-blue-300 transition-colors">
                                Image Scraper</h3>
                            <p class="text-slate-400 mt-2 text-sm leading-relaxed">
                                Extract and download all images from any webpage. Bulk ZIP download supported.
                            </p>
                        </div>

                        <div class="pt-4 flex items-center justify-between border-t border-white/5">
                            <span class="text-xs font-medium px-2 py-1 rounded bg-blue-500/10 text-blue-400">Media</span>
                        </div>
                    </div>
                </a>

                <!-- Image Censor Card -->
                <a href="{{ route('tools.censor-image') }}"
                    class="group relative p-6 rounded-2xl bg-white/5 border border-white/10 hover:border-indigo-500/50 transition-all duration-300 hover:bg-white/[0.07]">
                    <div
                        class="absolute inset-0 bg-gradient-to-br from-indigo-500/5 to-transparent opacity-0 group-hover:opacity-100 rounded-2xl transition-opacity">
                    </div>

                    <div class="relative space-y-4">
                        <div
                            class="w-12 h-12 rounded-xl bg-indigo-500/20 text-indigo-400 flex items-center justify-center text-2xl group-hover:scale-110 transition-transform duration-300">
                            <!-- Icon -->
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
                            </svg>
                        </div>

                        <div>
                            <h3 class="text-xl font-semibold text-white group-hover:text-indigo-300 transition-colors">
                                Censor Image</h3>
                            <p class="text-slate-400 mt-2 text-sm leading-relaxed">
                                Blur faces, license plates, or house numbers. 100% Private. Your photos never leave your
                                device.
                            </p>
                        </div>

                        <div class="pt-4 flex items-center justify-between border-t border-white/5">
                            <span
                                class="text-xs font-medium px-2 py-1 rounded bg-indigo-500/10 text-indigo-400">Privacy</span>
                        </div>
                    </div>
                </a>

                <!-- Cron Translator Card -->
                <a href="{{ route('tools.cron-translator') }}"
                    class="group relative p-6 rounded-2xl bg-white/5 border border-white/10 hover:border-cyan-500/50 transition-all duration-300 hover:bg-white/[0.07]">
                    <div
                        class="absolute inset-0 bg-gradient-to-br from-cyan-500/5 to-transparent opacity-0 group-hover:opacity-100 rounded-2xl transition-opacity">
                    </div>

                    <div class="relative space-y-4">
                        <div
                            class="w-12 h-12 rounded-xl bg-cyan-500/20 text-cyan-400 flex items-center justify-center text-2xl group-hover:scale-110 transition-transform duration-300">
                            <!-- Icon -->
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.5 4.5h3" />
                            </svg>
                        </div>

                        <div>
                            <h3 class="text-xl font-semibold text-white group-hover:text-cyan-300 transition-colors">
                                Cron Translator</h3>
                            <p class="text-slate-400 mt-2 text-sm leading-relaxed">
                                Translate tricky cron expressions to plain English, or build cron from text. Full
                                client-side.
                            </p>
                        </div>

                        <div class="pt-4 flex items-center justify-between border-t border-white/5">
                            <span class="text-xs font-medium px-2 py-1 rounded bg-cyan-500/10 text-cyan-400">Developer
                                Tools</span>
                        </div>
                    </div>
                </a>

                <!-- Carousel Splitter Card -->
                <a href="{{ route('tools.image-splitter') }}"
                    class="group relative p-6 rounded-2xl bg-white/5 border border-white/10 hover:border-amber-500/50 transition-all duration-300 hover:bg-white/[0.07]">
                    <div
                        class="absolute inset-0 bg-gradient-to-br from-amber-500/5 to-transparent opacity-0 group-hover:opacity-100 rounded-2xl transition-opacity">
                    </div>

                    <div class="relative space-y-4">
                        <div
                            class="w-12 h-12 rounded-xl bg-amber-500/20 text-amber-400 flex items-center justify-center text-2xl group-hover:scale-110 transition-transform duration-300">
                            <!-- Icon -->
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
                            </svg>
                        </div>

                        <div>
                            <h3 class="text-xl font-semibold text-white group-hover:text-amber-300 transition-colors">
                                Image Splitter</h3>
                            <p class="text-slate-400 mt-2 text-sm leading-relaxed">
                                Slice wide panoramic photos into perfect, seamless squares for Instagram carousels.
                            </p>
                        </div>

                        <div class="pt-4 flex items-center justify-between border-t border-white/5">
                            <span class="text-xs font-medium px-2 py-1 rounded bg-amber-500/10 text-amber-400">Media</span>
                        </div>
                    </div>
                </a>

                <!-- Image Captioner Card -->
                <a href="{{ route('tools.image-caption') }}"
                    class="group relative p-6 rounded-2xl bg-white/5 border border-white/10 hover:border-indigo-500/50 transition-all duration-300 hover:bg-white/[0.07]">
                    <div
                        class="absolute inset-0 bg-gradient-to-br from-indigo-500/5 to-transparent opacity-0 group-hover:opacity-100 rounded-2xl transition-opacity">
                    </div>

                    <div class="relative space-y-4">
                        <div
                            class="w-12 h-12 rounded-xl bg-indigo-500/20 text-indigo-400 flex items-center justify-center text-2xl group-hover:scale-110 transition-transform duration-300">
                            <!-- Icon -->
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                                <!-- Add a little text indicator "T" inside the image icon conceptually or just stick with image -->
                            </svg>
                        </div>

                        <div>
                            <h3 class="text-xl font-semibold text-white group-hover:text-indigo-300 transition-colors">
                                Image Caption</h3>
                            <p class="text-slate-400 mt-2 text-sm leading-relaxed">
                                Add text overlays, meme styles, and backgrounds to your images securely.
                            </p>
                        </div>

                        <div class="pt-4 flex items-center justify-between border-t border-white/5">
                            <span
                                class="text-xs font-medium px-2 py-1 rounded bg-indigo-500/10 text-indigo-400">Media</span>
                        </div>
                    </div>
                </a>

                <!-- Safe Send PDF Card -->
                <a href="{{ route('tools.pdf-protect') }}"
                    class="group relative p-6 rounded-2xl bg-white/5 border border-white/10 hover:border-indigo-500/50 transition-all duration-300 hover:bg-white/[0.07]">
                    <div
                        class="absolute inset-0 bg-gradient-to-br from-indigo-500/5 to-transparent opacity-0 group-hover:opacity-100 rounded-2xl transition-opacity">
                    </div>

                    <div class="relative space-y-4">
                        <div
                            class="w-12 h-12 rounded-xl bg-indigo-500/20 text-indigo-400 flex items-center justify-center text-2xl group-hover:scale-110 transition-transform duration-300">
                            <!-- Icon -->
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                            </svg>
                        </div>

                        <div>
                            <h3 class="text-xl font-semibold text-white group-hover:text-indigo-300 transition-colors">
                                Password Protect PDF</h3>
                            <p class="text-slate-400 mt-2 text-sm leading-relaxed">
                                Encrypt sensitive PDFs with bank-grade security. 100% private, client-side encryption.
                            </p>
                        </div>

                        <div class="pt-4 flex items-center justify-between border-t border-white/5">
                            <span
                                class="text-xs font-medium px-2 py-1 rounded bg-indigo-500/10 text-indigo-400">Security</span>
                        </div>
                    </div>
                </a>

                <!-- Audio Trimmer Card -->
                <a href="{{ route('tools.trim-audio') }}"
                    class="group relative p-6 rounded-2xl bg-white/5 border border-white/10 hover:border-indigo-500/50 transition-all duration-300 hover:bg-white/[0.07]">
                    <div
                        class="absolute inset-0 bg-gradient-to-br from-indigo-500/5 to-transparent opacity-0 group-hover:opacity-100 rounded-2xl transition-opacity">
                    </div>

                    <div class="relative space-y-4">
                        <div
                            class="w-12 h-12 rounded-xl bg-indigo-500/20 text-indigo-400 flex items-center justify-center text-2xl group-hover:scale-110 transition-transform duration-300">
                            <!-- Icon -->
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z" />
                            </svg>
                        </div>

                        <div>
                            <h3 class="text-xl font-semibold text-white group-hover:text-indigo-300 transition-colors">
                                Trim Audio</h3>
                            <p class="text-slate-400 mt-2 text-sm leading-relaxed">
                                Trim voice memos and meetings privately. No uploads, runs 100% in your browser.
                            </p>
                        </div>

                        <div class="pt-4 flex items-center justify-between border-t border-white/5">
                            <span
                                class="text-xs font-medium px-2 py-1 rounded bg-indigo-500/10 text-indigo-400">Privacy</span>
                        </div>
                    </div>
                </a>

                <!-- Picture Hanging Math Solver Card -->
                <a href="{{ route('tools.picture-hanging') }}"
                    class="group relative p-6 rounded-2xl bg-white/5 border border-white/10 hover:border-orange-500/50 transition-all duration-300 hover:bg-white/[0.07]">
                    <div
                        class="absolute inset-0 bg-gradient-to-br from-orange-500/5 to-transparent opacity-0 group-hover:opacity-100 rounded-2xl transition-opacity">
                    </div>

                    <div class="relative space-y-4">
                        <div
                            class="w-12 h-12 rounded-xl bg-orange-500/20 text-orange-400 flex items-center justify-center text-2xl group-hover:scale-110 transition-transform duration-300">
                            <!-- Icon -->
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M4 6h16M4 12h16m-7 6h7" />
                            </svg>
                        </div>

                        <div>
                            <h3 class="text-xl font-semibold text-white group-hover:text-orange-300 transition-colors">
                                Picture Hanging Calculator</h3>
                            <p class="text-slate-400 mt-2 text-sm leading-relaxed">
                                Calculate exact nail positions for gallery walls. No more guessing or extra holes.
                            </p>
                        </div>

                        <div class="pt-4 flex items-center justify-between border-t border-white/5">
                            <span class="text-xs font-medium px-2 py-1 rounded bg-orange-500/10 text-orange-400">DIY</span>
                        </div>
                    </div>
                </a>

                <!-- Passport Photo Cropper Card -->
                <a href="{{ route('tools.passport-photo') }}"
                    class="group relative p-6 rounded-2xl bg-white/5 border border-white/10 hover:border-blue-500/50 transition-all duration-300 hover:bg-white/[0.07]">
                    <div
                        class="absolute inset-0 bg-gradient-to-br from-blue-500/5 to-transparent opacity-0 group-hover:opacity-100 rounded-2xl transition-opacity">
                    </div>

                    <div class="relative space-y-4">
                        <div
                            class="w-12 h-12 rounded-xl bg-blue-500/20 text-blue-400 flex items-center justify-center text-2xl group-hover:scale-110 transition-transform duration-300">
                            <!-- Icon -->
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                        </div>

                        <div>
                            <h3 class="text-xl font-semibold text-white group-hover:text-blue-300 transition-colors">
                                Biometric Passport Photo</h3>
                            <p class="text-slate-400 mt-2 text-sm leading-relaxed">
                                Crop photos to strict US & UK/EU standards with official biometric overlays.
                            </p>
                        </div>

                        <div class="pt-4 flex items-center justify-between border-t border-white/5">
                            <span class="text-xs font-medium px-2 py-1 rounded bg-blue-500/10 text-blue-400">Travel</span>
                        </div>
                    </div>
                </a>

                <!-- Bulk Deal Exposer Card -->
                <a href="{{ route('tools.bulk-deal') }}"
                    class="group relative p-6 rounded-2xl bg-white/5 border border-white/10 hover:border-emerald-500/50 transition-all duration-300 hover:bg-white/[0.07]">
                    <div
                        class="absolute inset-0 bg-gradient-to-br from-emerald-500/5 to-transparent opacity-0 group-hover:opacity-100 rounded-2xl transition-opacity">
                    </div>

                    <div class="relative space-y-4">
                        <div
                            class="w-12 h-12 rounded-xl bg-emerald-500/20 text-emerald-400 flex items-center justify-center text-2xl group-hover:scale-110 transition-transform duration-300">
                            <!-- Icon -->
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
                            </svg>
                        </div>

                        <div>
                            <h3 class="text-xl font-semibold text-white group-hover:text-emerald-300 transition-colors">
                                Cost Per Unit Calculator</h3>
                            <p class="text-slate-400 mt-2 text-sm leading-relaxed">
                                Is that bulk pack really cheaper? Compare two items to reveal the true unit price.
                            </p>
                        </div>

                        <div class="pt-4 flex items-center justify-between border-t border-white/5">
                            <span
                                class="text-xs font-medium px-2 py-1 rounded bg-emerald-500/10 text-emerald-400">Finance</span>
                        </div>
                    </div>
                </a>

                <!-- Placeholder Card -->
                <div
                    class="group relative p-6 rounded-2xl bg-white/5 border border-white/10 hover:border-indigo-500/50 transition-all duration-300 hover:bg-white/[0.07] opacity-60">
                    <div class="relative space-y-4">
                        <div class="w-12 h-12 rounded-xl bg-slate-700/50 flex items-center justify-center text-slate-500">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
                                stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                            </svg>
                        </div>
                        <div>
                            <h3 class="text-xl font-semibold text-slate-300">More Tools</h3>
                            <p class="text-slate-500 mt-2 text-sm">
                                We are working on more tools. Stay tuned!
                            </p>
                        </div>
                    </div>
                </div>

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

    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('toolSearch', () => ({
                query: '',
                selectedCategory: '',
                categories: [],
                count: 0,
                total: 0,
                cards: [],

                init() {
                    // Find all tool cards (direct children of the grid that are anchors)
                    // We look for anchors in the grid container
                    this.cards = [...this.$refs.grid.querySelectorAll('a')];
                    this.total = this.cards.length;
                    this.count = this.total;

                    // Extract unique categories from badges
                    const cats = new Set();
                    this.cards.forEach(card => {
                        const badge = card.querySelector('.pt-4 span');
                        if (badge && badge.textContent.trim()) {
                            cats.add(badge.textContent.trim());
                        }
                    });
                    this.categories = Array.from(cats).sort();

                    // Watch for query changes
                    this.$watch('query', () => this.filter());
                    this.$watch('selectedCategory', () => this.filter());
                },

                filter() {
                    const q = this.query.toLowerCase();
                    this.count = 0;

                    this.cards.forEach(card => {
                        // Search in text content (title + desc + badge)
                        const text = card.textContent.toLowerCase();
                        let matchesQuery = text.includes(q);
                        let matchesCategory = true;

                        if (this.selectedCategory) {
                            const badge = card.querySelector('.pt-4 span');
                            const badgeText = badge && badge.textContent ? badge.textContent
                                .trim() : '';
                            if (badgeText !== this.selectedCategory) {
                                matchesCategory = false;
                            }
                        }

                        const isVisible = matchesQuery && matchesCategory;

                        // Toggle visibility
                        card.style.display = isVisible ? '' : 'none';

                        if (isVisible) this.count++;
                    });
                }
            }));
        });
    </script>
@endsection