@extends('layouts.app')

@section('title', 'Kostenlose Web-Tools | Rechner, Converter & mehr | kotsch.tech')
@section('meta_description', 'Kostenlose Web Tools direkt im Browser: Rechner, Generatoren, Converter, Developer- und SEO-Tools – ohne Login, ohne Installation, viele lokal im Browser.')

@section('content')
@php
$tools = config('webtools_standalone');

$tools = array_merge($tools, array_map(fn($tool) => [
    'name' => $tool['name'],
    'cat' => $tool['cat'],
    'slug' => $tool['slug'],
    'icon' => $tool['icon'] ?? 'fa-screwdriver-wrench',
    'local' => true,
    'popular' => $tool['popular'] ?? false,
    'desc' => $tool['desc'],
    'tags' => $tool['keywords'] ?? ($tool['tags'] ?? ''),
], config('webtools_extra', [])));

$categories = array_values(array_unique(array_merge(
    ['Alle', 'Beliebt'],
    array_map(fn($tool) => $tool['cat'], $tools)
)));
$popularSlugs = ['pdf-teilen','passwort-generator','qr-generator','prozent-rechner','json-formatter','notizblock','pomodoro','wort-zaehler','decoder','farbkontrast','kredit-rechner','datum-rechner','stundenplan-cockpit','bmi-rechner'];
$toolsDataJson = json_encode(array_map(fn($t)=>['slug'=>$t['slug'],'name'=>$t['name'],'icon'=>$t['icon'],'cat'=>$t['cat'],'popular'=>!empty($t['popular'])], $tools), JSON_UNESCAPED_UNICODE|JSON_HEX_TAG);
$popularSlugsJson = json_encode($popularSlugs, JSON_UNESCAPED_UNICODE);
@endphp

<style>
/* ── BASE ───────────────────────────────────────────── */
.wt-page { background:linear-gradient(180deg,#fff 0%,#f8fafc 100%); border-top:1px solid #e2e8f0; }
#wt-popular, #wt-grid, .wt-grid-outer { scroll-margin-top: 90px; }

/* ── HERO ──────────────────────────────────────────── */
.wt-hero { padding:44px 5% 20px; text-align:center; background:radial-gradient(ellipse 70% 50% at 50% -10%,rgba(15,181,201,.07) 0%,transparent 70%); }
.wt-kicker { display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:999px; background:rgba(15,181,201,.1); border:1px solid rgba(15,181,201,.25); color:#0e7490; font-size:0.7rem; font-weight:900; letter-spacing:2px; text-transform:uppercase; margin-bottom:14px; }
.wt-hero h1 { font-size:clamp(2rem,4.5vw,3.1rem); font-weight:900; letter-spacing:-2px; line-height:1; color:#0f172a; margin:0 0 12px; }
.wt-hero h1 span { color:#0FB5C9; }
.wt-hero .lead { color:#64748b; font-size:.98rem; line-height:1.6; max-width:580px; margin:0 auto 18px; }
.wt-trust-row { display:inline-flex; gap:20px; flex-wrap:wrap; justify-content:center; margin-bottom:18px; }
.wt-trust-item { display:flex; align-items:center; gap:8px; font-size:0.82rem; font-weight:700; color:#64748b; }
.wt-trust-item i { color:#0FB5C9; }

/* ── SEARCH ────────────────────────────────────────── */
.wt-search-wrap { max-width:520px; margin:0 auto 8px; position:relative; }
.wt-search-input { width:100%; box-sizing:border-box; border:2px solid #e2e8f0; border-radius:999px; padding:15px 52px 15px 52px; font:inherit; font-size:1rem; outline:none; transition:border-color .2s,box-shadow .2s; background:#fff; }
.wt-search-input:focus { border-color:#0FB5C9; box-shadow:0 0 0 4px rgba(15,181,201,.12); }
.wt-search-icon { position:absolute; left:19px; top:50%; transform:translateY(-50%); color:#94a3b8; font-size:1rem; }
.wt-search-clear { position:absolute; right:18px; top:50%; transform:translateY(-50%); color:#94a3b8; font-size:0.9rem; cursor:pointer; display:none; background:none; border:none; padding:4px; }
.wt-result-hint { text-align:center; font-size:0.8rem; color:#94a3b8; font-weight:600; margin-bottom:4px; min-height:0; }

/* ── FILTER ────────────────────────────────────────── */
.wt-filter-bar { display:flex; gap:6px; justify-content:flex-start; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:thin; margin:0 auto 26px; padding:4px 5% 8px; max-width:1400px; }
.wt-filter-bar::-webkit-scrollbar { height:5px; }
.wt-filter-bar::-webkit-scrollbar-thumb { background:#e2e8f0; border-radius:999px; }
.wt-filter { flex:0 0 auto; white-space:nowrap; }
.wt-filter { padding:8px 18px; border-radius:999px; border:2px solid #e2e8f0; background:#fff; font:inherit; font-size:0.82rem; font-weight:700; cursor:pointer; color:#64748b; transition:all .2s; }
.wt-filter:hover { border-color:#0f172a; color:#0f172a; }
.wt-filter.active { background:#0f172a; color:#fff; border-color:#0f172a; }
.wt-filter[data-cat="Beliebt"].active { background:#0FB5C9; border-color:#0FB5C9; }

/* ── FAVORITES BAR ─────────────────────────────────── */
.wt-pers-section { max-width:1400px; margin:0 auto 32px; padding:0 5%; }
.wt-pers-title { font-size:0.72rem; font-weight:900; color:#94a3b8; text-transform:uppercase; letter-spacing:2px; margin-bottom:12px; display:flex; align-items:center; gap:8px; }
.wt-chip-row { display:flex; gap:8px; flex-wrap:wrap; }
.wt-pers-chip { display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:999px; border:1.5px solid #e2e8f0; background:#fff; font-size:0.82rem; font-weight:700; color:#0f172a; text-decoration:none; transition:all .15s; white-space:nowrap; }
.wt-pers-chip:hover { border-color:#0FB5C9; color:#0FB5C9; }
.wt-pers-chip i { font-size:0.75rem; color:#0FB5C9; }

/* ── POPULAR STRIP ─────────────────────────────────── */
.wt-popular { max-width:1400px; margin:0 auto 28px; padding:0 5%; }
.wt-section-head { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.wt-section-title { font-size:1.1rem; font-weight:900; color:#0f172a; letter-spacing:-0.3px; }
.wt-section-badge { padding:3px 10px; border-radius:999px; background:rgba(15,181,201,.12); color:#0e7490; font-size:0.68rem; font-weight:900; text-transform:uppercase; letter-spacing:1.5px; }
.wt-pop-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px; }
.wt-pop-chip { display:flex; align-items:center; gap:10px; padding:12px 16px; border-radius:14px; border:1.5px solid #e2e8f0; background:#fff; text-decoration:none; color:#0f172a; font-weight:700; font-size:0.88rem; transition:all .2s; }
.wt-pop-chip:hover { border-color:#0FB5C9; background:rgba(15,181,201,.05); transform:translateY(-2px); }
.wt-pop-chip .pi { width:32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center; background:rgba(15,181,201,.1); color:#0FB5C9; font-size:0.9rem; flex-shrink:0; }
.wt-pop-chip .pcat { font-size:0.65rem; font-weight:900; color:#94a3b8; text-transform:uppercase; letter-spacing:1px; line-height:1; }
.wt-pop-chip .pname { font-size:0.85rem; font-weight:800; line-height:1.2; }

/* ── MAIN GRID ─────────────────────────────────────── */
.wt-grid-outer { max-width:1400px; margin:0 auto; padding:0 5% 100px; }
.wt-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }

/* ── CARD ──────────────────────────────────────────── */
.wt-card { display:flex; flex-direction:column; overflow:hidden; background:#fff; border:1.5px solid #e2e8f0; border-radius:20px; box-shadow:0 4px 20px -8px rgba(15,23,42,.09); transition:transform .3s cubic-bezier(.22,.68,0,1.2),border-color .3s,box-shadow .3s; text-decoration:none; color:inherit; }
.wt-card:hover { transform:translateY(-5px); border-color:rgba(15,181,201,.4); box-shadow:0 20px 50px -18px rgba(15,23,42,.2); }
.wt-card.hidden { display:none; }
.wt-preview-shell { display:flex; align-items:center; justify-content:center; aspect-ratio:16/7; background:#0f172a; text-decoration:none; position:relative; overflow:hidden; }
.wt-preview-shell::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 60% 30%,rgba(15,181,201,.18) 0%,transparent 65%); }
.wt-preview-icon { font-size:3rem; color:rgba(255,255,255,.1); position:absolute; right:16px; bottom:12px; transition:transform .3s,color .3s; }
.wt-card:hover .wt-preview-icon { color:rgba(15,181,201,.3); transform:scale(1.1) rotate(-5deg); }
.wt-preview-content { position:relative; z-index:1; text-align:left; padding:16px 20px; width:100%; box-sizing:border-box; }
.wt-preview-cat { font-size:0.62rem; font-weight:900; color:rgba(15,181,201,.8); text-transform:uppercase; letter-spacing:2px; margin-bottom:6px; }
.wt-preview-name { font-size:1.25rem; font-weight:900; color:#fff; letter-spacing:-0.5px; line-height:1.1; }
.wt-browserbar { position:absolute; top:9px; left:12px; display:flex; gap:5px; }
.wt-browserbar span { width:7px; height:7px; border-radius:999px; background:rgba(255,255,255,.15); }
.wt-browserbar span:first-child { background:#ef4444; }
.wt-browserbar span:nth-child(2) { background:#f59e0b; }
.wt-browserbar span:last-child { background:#0FB5C9; }
.wt-card-body { display:flex; flex-direction:column; gap:10px; padding:18px 20px; flex:1; }
.wt-title-row { display:flex; gap:10px; align-items:flex-start; }
.wt-icon { width:40px; height:40px; border-radius:10px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; background:rgba(15,181,201,.1); color:#0FB5C9; font-size:1rem; }
.wt-cat { font-size:0.6rem; font-weight:900; color:#0FB5C9; text-transform:uppercase; letter-spacing:1.5px; margin-bottom:2px; }
.wt-card-body h2 { font-size:1rem; font-weight:900; letter-spacing:-0.2px; color:#0f172a; margin:0; }
.wt-card-body p { color:#64748b; line-height:1.6; font-size:0.84rem; margin:0; flex:1; }
.wt-card-footer { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:auto; }
.wt-open { display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:10px; background:#0f172a; color:#fff; text-decoration:none; font-weight:800; font-size:0.82rem; transition:background .2s,transform .2s; }
.wt-open:hover { background:#0FB5C9; transform:translateY(-2px); }
.wt-local-badge { display:inline-flex; align-items:center; gap:5px; padding:5px 10px; border-radius:999px; background:rgba(15,181,201,.08); border:1px solid rgba(15,181,201,.2); font-size:0.62rem; font-weight:800; color:#0e7490; white-space:nowrap; }
.wt-fav-btn { width:34px; height:34px; border-radius:9px; border:1.5px solid #e2e8f0; background:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; color:#94a3b8; font-size:0.9rem; transition:all .15s; flex-shrink:0; }
.wt-fav-btn:hover { border-color:#f59e0b; color:#f59e0b; }
.wt-fav-btn.active { border-color:#f59e0b; background:#fef9eb; color:#f59e0b; }

/* ── EMPTY & SUGGESTIONS ───────────────────────────── */
.wt-empty { display:none; text-align:center; padding:72px 20px 40px; color:#94a3b8; }
.wt-empty i { font-size:2.8rem; display:block; margin-bottom:14px; }
.wt-suggestions { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:16px; }
.wt-sugg-btn { padding:8px 16px; border-radius:999px; border:1.5px solid #e2e8f0; background:#fff; font-size:0.82rem; font-weight:700; cursor:pointer; color:#0f172a; transition:all .15s; }
.wt-sugg-btn:hover { border-color:#0FB5C9; color:#0FB5C9; }

/* ── RESPONSIVE ────────────────────────────────────── */
@media(max-width:1100px){ .wt-grid { grid-template-columns:repeat(2,1fr); } }
@media(max-width:680px){
    .wt-grid { grid-template-columns:1fr; gap:14px; }
    .wt-hero { padding:32px 5% 14px; }
    .wt-pop-grid { grid-template-columns:repeat(2,1fr); }
    .wt-filter-bar { gap:5px; }
    .wt-filter { padding:7px 14px; font-size:0.78rem; }
}
</style>

<div class="wt-page">

    {{-- HERO --}}
    <header class="wt-hero">
        <div class="wt-kicker"><i class="fas fa-screwdriver-wrench"></i> Web Tools</div>
        <h1>Kostenlose Tools.<br><span>Direkt im Browser.</span></h1>
        <p class="lead">Rechner, Generatoren, Converter, Developer-Tools und mehr – ohne Login, ohne Installation. Viele Tools laufen lokal und senden keine Daten an Server.</p>
        <div class="wt-trust-row">
            <span class="wt-trust-item"><i class="fas fa-check-circle"></i> {{ count($tools) }} Tools</span>
            <span class="wt-trust-item"><i class="fas fa-check-circle"></i> Kostenlos & werbefinanziert</span>
            <span class="wt-trust-item"><i class="fas fa-check-circle"></i> Kein Login</span>
            <span class="wt-trust-item"><i class="fas fa-lock"></i> Viele Tools lokal</span>
        </div>

        {{-- SEARCH --}}
        <div class="wt-search-wrap">
            <i class="fas fa-search wt-search-icon" aria-hidden="true"></i>
            <input type="search" class="wt-search-input" id="wt-search" placeholder="Tool suchen – z. B. „QR", „Base64", „Zins"…" autocomplete="off" aria-label="Tools suchen">
            <button class="wt-search-clear" id="wt-clear" aria-label="Suche leeren"><i class="fas fa-times"></i></button>
        </div>
        <div class="wt-result-hint" id="wt-hint"></div>

        {{-- FILTER --}}
        <div class="wt-filter-bar" role="tablist" aria-label="Kategorien">
            @foreach($categories as $cat)
                <button class="wt-filter{{ $loop->first ? ' active':'' }}" data-cat="{{ $cat }}" role="tab">{{ $cat }}</button>
            @endforeach
        </div>
    </header>

    {{-- FAVORITES / RECENT --}}
    <div class="wt-pers-section" id="wt-pers" style="display:none">
        <div id="wt-favs-block" style="margin-bottom:20px;display:none">
            <div class="wt-pers-title"><i class="fas fa-star" style="color:#f59e0b"></i> Favoriten</div>
            <div class="wt-chip-row" id="wt-favs-chips"></div>
        </div>
        <div id="wt-recent-block" style="display:none">
            <div class="wt-pers-title"><i class="fas fa-clock"></i> Zuletzt genutzt</div>
            <div class="wt-chip-row" id="wt-recent-chips"></div>
        </div>
    </div>

    {{-- POPULAR STRIP --}}
    <div class="wt-popular" id="wt-popular">
        <div class="wt-section-head">
            <span class="wt-section-title">Beliebte Tools</span>
            <span class="wt-section-badge">Empfohlen</span>
        </div>
        <div class="wt-pop-grid" id="wt-pop-grid"></div>
    </div>

    {{-- MAIN GRID --}}
    <div class="wt-grid-outer">
        <div class="wt-grid" id="wt-grid">
            @php($wtMember = \App\Support\Webtools\PremiumTools::memberHasAccess())
            @foreach($tools as $tool)
            @php($wtLocked = ! $wtMember && \App\Support\Webtools\PremiumTools::isPremium(['slug' => $tool['slug'], 'cat' => $tool['cat']]))
            <article
                class="wt-card reveal"
                data-cat="{{ $tool['cat'] }}"
                data-slug="{{ $tool['slug'] }}"
                data-popular="{{ isset($tool['popular'])&&$tool['popular']?'1':'0' }}"
                data-local="{{ isset($tool['local'])&&$tool['local']?'1':'0' }}"
                data-search="{{ strtolower($tool['name'].' '.$tool['desc'].' '.($tool['tags']??'')) }}"
            >
                <a href="/webtools/{{ $tool['slug'] }}" class="wt-preview-shell" aria-label="{{ $tool['name'] }} öffnen" onclick="trackRecent('{{ $tool['slug'] }}','{{ $tool['name'] }}','{{ $tool['icon'] }}')">
                    <div class="wt-browserbar" aria-hidden="true"><span></span><span></span><span></span></div>
                    <div class="wt-preview-icon" aria-hidden="true"><i class="fas {{ $tool['icon'] }}"></i></div>
                    <div class="wt-preview-content">
                        <div class="wt-preview-cat">{{ $tool['cat'] }}</div>
                        <div class="wt-preview-name">{{ $tool['name'] }}</div>
                    </div>
                </a>
                <div class="wt-card-body">
                    <div class="wt-title-row">
                        <span class="wt-icon"><i class="fas {{ $tool['icon'] }}"></i></span>
                        <div>
                            <div class="wt-cat">{{ $tool['cat'] }}@if($wtLocked) <i class="fas fa-lock" title="Nur für Mitglieder" style="font-size:.72em;color:#6D5AE6;margin-left:4px;"></i>@endif</div>
                            <h2>{{ $tool['name'] }}</h2>
                        </div>
                    </div>
                    <p>{{ $tool['desc'] }}</p>
                    <div class="wt-card-footer">
                        <a href="/webtools/{{ $tool['slug'] }}" class="wt-open" onclick="trackRecent('{{ $tool['slug'] }}','{{ $tool['name'] }}','{{ $tool['icon'] }}')">
                            Tool öffnen <i class="fas fa-arrow-right"></i>
                        </a>
                        <div style="display:flex;align-items:center;gap:6px">
                            @if(isset($tool['local']) && $tool['local'])
                            <span class="wt-local-badge" title="Deine Eingaben verlassen nicht den Browser"><i class="fas fa-lock"></i> Lokal</span>
                            @endif
                            <button class="wt-fav-btn" data-slug="{{ $tool['slug'] }}" data-name="{{ $tool['name'] }}" data-icon="{{ $tool['icon'] }}" onclick="toggleFav(this)" title="Favorit">
                                <i class="fas fa-star"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </article>
            @endforeach
        </div>

        <div class="wt-empty" id="wt-empty">
            <i class="fas fa-screwdriver-wrench"></i>
            <p><strong>Kein Tool gefunden.</strong><br>Versuche andere Stichwörter oder wähle eine andere Kategorie.</p>
            <div class="wt-suggestions" id="wt-sugg"></div>
        </div>
    </div>

</div>

<script>
(function(){
'use strict';

// ── DATA ──────────────────────────────────────────────────────────────────────
const TOOLS_DATA = {!! $toolsDataJson !!};

// Synonym map: query word → slug or slugs it should boost
const SYNONYMS = {
    'qr':'qr-generator','qrcode':'qr-generator','qr code':'qr-generator',
    'base64':'decoder','hex':'decoder','jwt':'jwt-decoder','token':'jwt-decoder',
    'json schön':'json-formatter','json pretty':'json-formatter','json':'json-formatter',
    'password':'passwort-generator','pw':'passwort-generator',
    'hash':'hash-generator','sha':'hash-generator','sha256':'hash-generator',
    'zins':'kredit-rechner','kredit':'kredit-rechner','darlehen':'kredit-rechner',
    'regex':'regex-tester','regexp':'regex-tester',
    'markdown':'markdown-preview','md':'markdown-preview',
    'gradient':'css-gradient','farbverlauf':'css-gradient',
    'uuid':'uuid-generator','guid':'uuid-generator',
    'morse':'morse','morsecode':'morse',
    'prozent':'prozent-rechner',
    'bmi':'bmi-rechner','gewicht':'bmi-rechner',
    'schlaf':'schlaf-rechner','aufwachen':'schlaf-rechner',
    'pomodoro':'pomodoro','fokus':'pomodoro',
    'notiz':'notizblock','notizblock':'notizblock',
    'timer':'timer','stoppuhr':'timer',
    'farbe':'farbkontrast','kontrast':'farbkontrast','wcag':'farbkontrast','a11y':'farbkontrast',
    'datum':'datum-rechner','tage':'datum-rechner','kalender':'datum-rechner',
    'alter':'alter-rechner','geburtstag':'alter-rechner',
    'seo':'farbkontrast','accessibility':'farbkontrast',
    'celsius':'temperatur','fahrenheit':'temperatur',
    'binär':'zahlensystem','binary':'zahlensystem',
    'slug':'slug-generator','permalink':'slug-generator',
    'csv':'csv-json-konverter','tabelle':'csv-json-konverter',
    'ascii':'ascii-tabelle','zeichen':'ascii-tabelle',
    'spiegeln':'spiegelschrift','mirror':'spiegelschrift','rot13':'spiegelschrift',
    'würfeln':'zufallszahl','würfel':'wuerfel','münze':'wuerfel',
    'lotto':'zufallszahl','random':'zufallszahl',
    'sprit':'benzinrechner','tanken':'benzinrechner',
    'steuer':'gehaltsrechner','netto':'gehaltsrechner','brutto':'gehaltsrechner',
    'mwst':'mehrwertsteuer','ust':'mehrwertsteuer',
    'wasser':'wasserrechner','trinken':'wasserrechner',
    'kalorien':'kalorienrechner','kcal':'kalorienrechner',
    'puls':'herzfrequenz','herzfrequenz':'herzfrequenz','sport':'herzfrequenz',
    'körperfett':'koerperfett-rechner','fett':'koerperfett-rechner',
    'budget':'haushaltsbuch','haushalt':'haushaltsbuch',
    'sparen':'rente-rechner','zinseszins':'rente-rechner',
    'trinkgeld':'trinkgeld-rechner','tip':'trinkgeld-rechner',
    'mett':'hackepeter','hackepeter':'hackepeter',
    'rezept':'rezept-umrechner','portionen':'rezept-umrechner',
    'km':'einheiten-rechner','meilen':'einheiten-rechner','umrechnen':'einheiten-rechner',
    'bytes':'dateigroesse','mb':'dateigroesse','gb':'dateigroesse',
    'uhrzeit':'zeitzonen','weltzeit':'zeitzonen','zeitzone':'zeitzonen',
    'countdown':'countdown','weihnachten':'countdown','event':'countdown',
    'stundenplan':'stundenplan-cockpit','vorlesung':'stundenplan-cockpit','studium':'stundenplan-cockpit','fach counter':'stundenplan-cockpit',
    'arbeitszeit':'arbeitszeit-rechner','überstunden':'arbeitszeit-rechner',
    'unix':'unixzeit-rechner','timestamp':'unixzeit-rechner','epoch':'unixzeit-rechner',
    'blindtext':'lorem-ipsum','lorem':'lorem-ipsum','ipsum':'lorem-ipsum',
    'dreisatz':'dreisatz-rechner','proportion':'dreisatz-rechner',
    'primzahl':'primzahl-check','prim':'primzahl-check',
    'statistik':'statistik-rechner','mittelwert':'statistik-rechner','median':'statistik-rechner',
    'fläche':'flaechen-rechner','geometrie':'flaechen-rechner','kreis':'flaechen-rechner',
    'römisch':'roemische-zahlen','roman':'roemische-zahlen',
    'text vergleich':'text-diff','diff':'text-diff',
    'sortieren':'zeilen-sortierer','alphabetisch':'zeilen-sortierer',
    'duplikat':'duplikate-entfernen','doppelt':'duplikate-entfernen',
    'häufigkeit':'wort-haeufigkeit','frequenz':'wort-haeufigkeit',
    'leerzeile':'text-bereiniger','whitespace':'text-bereiniger',
    'url encode':'url-encoder','url decode':'url-encoder',
    'html entities':'html-entities','amp':'html-entities',
    'passphrase':'passphrase-generator','diceware':'passphrase-generator',
    'seitenverhältnis':'seitenverhaeltnis','ratio':'seitenverhaeltnis','16:9':'seitenverhaeltnis',
    'ip':'ip-adresse','netzwerk':'ip-adresse',
    'email':'email-pruefer','e-mail':'email-pruefer',
    'todo':'to-do','aufgabe':'to-do',
    'automat':'automaten-editor','automaten':'automaten-editor','mealy':'automaten-editor','moore':'automaten-editor','dfa':'automaten-editor','nfa':'automaten-editor','endlicher automat':'automaten-editor','zustandsdiagramm':'automaten-editor','übergangstabelle':'automaten-editor','fsm':'automaten-editor','state machine':'automaten-editor',
};

// ── STATE ─────────────────────────────────────────────────────────────────────
const cards   = document.querySelectorAll('.wt-card');
const grid    = document.getElementById('wt-grid');
const empty   = document.getElementById('wt-empty');
const hint    = document.getElementById('wt-hint');
const search  = document.getElementById('wt-search');
const clearBtn= document.getElementById('wt-clear');
const suggEl  = document.getElementById('wt-sugg');

let activeCat = 'Alle';
let searchQ   = '';

// ── FILTER + SEARCH ───────────────────────────────────────────────────────────
function resolveQuery(q) {
    if (!q) return null;
    const lower = q.toLowerCase().trim();
    // check synonym map
    for (const [k, v] of Object.entries(SYNONYMS)) {
        if (lower === k || lower.includes(k)) return Array.isArray(v) ? v : [v];
    }
    return null;
}

function applyFilter() {
    const q = searchQ.toLowerCase().trim();
    const boostSlugs = resolveQuery(q);
    const words = q ? q.split(/\s+/).filter(Boolean) : [];
    let visible = 0;

    cards.forEach(card => {
        const cat  = card.dataset.cat;
        const slug = card.dataset.slug;
        const text = card.dataset.search;

        const catMatch = activeCat === 'Alle'
            || (activeCat === 'Beliebt' && card.dataset.popular === '1')
            || cat === activeCat;

        let textMatch = true;
        if (words.length) {
            if (boostSlugs) {
                textMatch = boostSlugs.includes(slug) || words.every(w => text.includes(w));
            } else {
                textMatch = words.every(w => text.includes(w));
            }
        }

        const show = catMatch && textMatch;
        card.classList.toggle('hidden', !show);
        if (show) visible++;
    });

    const total = cards.length;
    if (q) {
        hint.textContent = visible === 0 ? 'Keine Treffer.' : `${visible} von ${total} Tools`;
    } else {
        hint.textContent = activeCat !== 'Alle' ? `${visible} Tools` : '';
    }

    empty.style.display = visible === 0 ? 'block' : 'none';

    // popular strip visibility
    const popEl = document.getElementById('wt-popular');
    if (popEl) popEl.style.display = (q || activeCat !== 'Alle') ? 'none' : '';

    // suggestions
    if (visible === 0 && q) buildSuggestions(q);

    clearBtn.style.display = q ? '' : 'none';
}

function buildSuggestions(q) {
    const suggestions = [];
    cards.forEach(card => {
        const text = card.dataset.search;
        const slug = card.dataset.slug;
        const name = card.querySelector('h2').textContent;
        // simple: pick 4 random cards
        if (suggestions.length < 4) suggestions.push({slug, name});
    });
    // pick cards whose text overlaps most with any single word
    const words = q.split(/\s+/);
    const scored = [];
    cards.forEach(card => {
        const text = card.dataset.search;
        const name = card.querySelector('h2').textContent;
        const slug = card.dataset.slug;
        let score = 0;
        words.forEach(w => { if (text.includes(w)) score++; });
        if (score > 0) scored.push({slug, name, score});
    });
    scored.sort((a,b)=>b.score-a.score);
    const top = scored.slice(0,4);
    suggEl.innerHTML = top.length
        ? top.map(t=>`<button class="wt-sugg-btn" onclick="quickSearch('${t.name}')"><i class="fas fa-search" style="font-size:.7rem"></i> ${t.name}</button>`).join('')
        : '';
}

function quickSearch(name) {
    search.value = name;
    searchQ = name.toLowerCase();
    activeCat = 'Alle';
    document.querySelectorAll('.wt-filter').forEach(b=>b.classList.remove('active'));
    document.querySelector('.wt-filter').classList.add('active');
    applyFilter();
}

// ── EVENTS ────────────────────────────────────────────────────────────────────
document.querySelectorAll('.wt-filter').forEach(btn => {
    btn.addEventListener('click', () => {
        document.querySelectorAll('.wt-filter').forEach(b=>b.classList.remove('active'));
        btn.classList.add('active');
        activeCat = btn.dataset.cat;
        applyFilter();
    });
});

let searchTimer;
search.addEventListener('input', () => {
    clearTimeout(searchTimer);
    searchTimer = setTimeout(() => {
        searchQ = search.value;
        applyFilter();
    }, 120);
});

clearBtn.addEventListener('click', () => {
    search.value = '';
    searchQ = '';
    clearBtn.style.display = 'none';
    applyFilter();
    search.focus();
});

// ── POPULAR STRIP ─────────────────────────────────────────────────────────────
const popularSlugs = {!! $popularSlugsJson !!};
const popGrid = document.getElementById('wt-pop-grid');
if (popGrid) {
    popularSlugs.forEach(slug => {
        const t = TOOLS_DATA.find(x => x.slug === slug);
        if (!t) return;
        const el = document.createElement('a');
        el.href = `/webtools/${slug}`;
        el.className = 'wt-pop-chip';
        el.onclick = () => trackRecent(t.slug, t.name, t.icon);
        el.innerHTML = `<span class="pi"><i class="fas ${t.icon}"></i></span><span><div class="pcat">${t.cat}</div><div class="pname">${t.name}</div></span>`;
        popGrid.appendChild(el);
    });
}

// ── FAVORITES ─────────────────────────────────────────────────────────────────
function getFavs() { try { return JSON.parse(localStorage.getItem('wt_favs')||'[]'); } catch(e){ return []; } }
function setFavs(f) { localStorage.setItem('wt_favs', JSON.stringify(f)); }

window.toggleFav = function(btn) {
    const slug = btn.dataset.slug;
    const name = btn.dataset.name;
    const icon = btn.dataset.icon;
    let favs = getFavs();
    if (favs.find(f=>f.slug===slug)) {
        favs = favs.filter(f=>f.slug!==slug);
        btn.classList.remove('active');
    } else {
        favs.push({slug, name, icon});
        btn.classList.add('active');
    }
    setFavs(favs);
    renderPers();
};

function initFavBtns() {
    const favs = getFavs();
    document.querySelectorAll('.wt-fav-btn').forEach(btn => {
        if (favs.find(f=>f.slug===btn.dataset.slug)) btn.classList.add('active');
    });
}

// ── RECENT ───────────────────────────────────────────────────────────────────
function getRecent() { try { return JSON.parse(localStorage.getItem('wt_recent')||'[]'); } catch(e){ return []; } }
function setRecent(r) { localStorage.setItem('wt_recent', JSON.stringify(r)); }

window.trackRecent = function(slug, name, icon) {
    let recent = getRecent().filter(r=>r.slug!==slug);
    recent.unshift({slug, name, icon});
    if (recent.length > 6) recent = recent.slice(0,6);
    setRecent(recent);
};

function renderPers() {
    const favs   = getFavs();
    const recent = getRecent();
    const persEl = document.getElementById('wt-pers');
    const favsEl = document.getElementById('wt-favs-block');
    const recEl  = document.getElementById('wt-recent-block');

    if (!favs.length && !recent.length) { persEl.style.display='none'; return; }
    persEl.style.display = '';

    if (favs.length) {
        favsEl.style.display='';
        document.getElementById('wt-favs-chips').innerHTML = favs.map(f=>
            `<a href="/webtools/${f.slug}" class="wt-pers-chip" onclick="trackRecent('${f.slug}','${f.name}','${f.icon}')"><i class="fas ${f.icon}"></i>${f.name}</a>`
        ).join('');
    } else { favsEl.style.display='none'; }

    if (recent.length) {
        recEl.style.display='';
        document.getElementById('wt-recent-chips').innerHTML = recent.map(r=>
            `<a href="/webtools/${r.slug}" class="wt-pers-chip" onclick="trackRecent('${r.slug}','${r.name}','${r.icon}')"><i class="fas ${r.icon}"></i>${r.name}</a>`
        ).join('');
    } else { recEl.style.display='none'; }
}

// ── DEEP-LINK: Kategorie/Suche aus URL-Hash (z. B. aus dem Header-Dropdown) ──
function activateCatFromHash() {
    const hash = decodeURIComponent(location.hash || '');
    if (hash.startsWith('#cat=')) {
        const wanted = hash.slice(5).trim();
        const btn = Array.from(document.querySelectorAll('.wt-filter'))
            .find(b => b.dataset.cat === wanted);
        if (btn) {
            document.querySelectorAll('.wt-filter').forEach(b => b.classList.remove('active'));
            btn.classList.add('active');
            activeCat = wanted;
            applyFilter();
            const grid = document.getElementById('wt-grid');
            if (grid) grid.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }
    } else if (hash === '#wt-search') {
        const s = document.getElementById('wt-search');
        if (s) { s.scrollIntoView({ behavior: 'smooth', block: 'center' }); s.focus({ preventScroll: true }); }
    }
}
window.addEventListener('hashchange', activateCatFromHash);

// ── INIT ─────────────────────────────────────────────────────────────────────
initFavBtns();
renderPers();
applyFilter();
activateCatFromHash();

})();
</script>
@endsection