@extends('layouts.app')

@section('title', 'News & Artikel | kotsch.tech')
@section('meta_description', 'Aktuelle Artikel, Software-Tests und Tech-Tipps von kotsch.tech – kuratiert von Arthur Kotsch.')

@section('content')
    @php
        // Themengruppe → kurzer Slug (muss zu config/subdomains.php news header_nav passen).
        // Jede Gruppe aus CATEGORY_GROUPS braucht einen Slug; unbekannte Gruppen (und der
        // kleine Rest, der keiner Gruppe zugeordnet ist) landen auf 'sonstiges'.
        $groupSlugs = [
            'Software' => 'software', 'Sicherheit' => 'sicherheit', 'Windows & Hardware' => 'windows',
            'Multimedia' => 'multimedia', 'Internet & Kommunikation' => 'internet', 'KI' => 'ki',
            'Entwicklung & Web' => 'entwicklung', 'Finanzen & Business' => 'finanzen',
            'Gesundheit & Sport' => 'gesundheit', 'Bildung & Mathematik' => 'bildung',
            'Energie & Klima' => 'energie',
            'Haus & Alltag' => 'alltag', 'Leben & Reise' => 'reise', 'News' => 'news',
        ];
        $gslug = fn ($g) => $groupSlugs[$g] ?? 'sonstiges';
        // Such-Index pro Artikel (Titel + Beschreibung + Kategorie + Tags), kleingeschrieben.
        $searchText = fn ($p) => \Illuminate\Support\Str::lower(($p['title'] ?? '') . ' ' . ($p['description'] ?? '') . ' ' . ($p['category'] ?? '') . ' ' . implode(' ', $p['tags'] ?? []));
        // Deterministischer Farbton für Bild-Platzhalter (gleicher Artikel → gleiche Farbe).
        $pageHue = fn ($slug) => abs(crc32((string) $slug)) % 360;
        $total = $pages->count();
        // Sicherheitsnetz: Artikel, deren Gruppe in keiner Filter-Pille auftaucht
        // (Slug-Fallback 'sonstiges'), bekommen eine eigene "Sonstiges"-Pille, damit
        // wirklich jeder Artikel über mindestens einen Filter erreichbar bleibt.
        $sonstigesCount = $pages->filter(fn ($p) => $gslug($p['group'] ?? '') === 'sonstiges')->count();
    @endphp

    <style>
        .auto-pages-hero {
            padding: 116px 5% 46px;
            background:
                radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--primary) 14%, transparent), transparent 34%),
                linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
            border-bottom: 1px solid rgba(226, 232, 240, 0.9);
            text-align: center;
        }
        .auto-pages-hero .container { display: grid; justify-items: center; }
        .auto-pages-hero h1 {
            max-width: 980px; margin-bottom: 14px; color: var(--text-main);
            font-size: clamp(2.4rem, 6vw, 4rem); font-weight: 900;
            line-height: 1.0; letter-spacing: -0.05em;
        }
        .auto-pages-hero h1 span { color: var(--primary); }
        .auto-pages-hero p {
            max-width: 720px; color: var(--text-muted);
            font-size: clamp(1rem, 2vw, 1.15rem); line-height: 1.7;
        }

        .auto-pages-section { padding: 32px 5% 90px; background: #f8fafc; }

        /* Search */
        .auto-pages-search {
            display: grid; grid-template-columns: minmax(0,1fr) auto;
            gap: 10px; margin: 0 auto 18px; max-width: 760px; padding: 10px;
            border: 1px solid #e2e8f0; border-radius: 18px;
            background: #ffffff; box-shadow: var(--shadow-soft);
        }
        .auto-pages-search input {
            width: 100%; min-height: 50px;
            border: 1px solid #e2e8f0; border-radius: 12px;
            padding: 0 18px; font-size: 1rem; color: var(--text-dark); outline: none;
            font-family: inherit;
        }
        .auto-pages-search input:focus {
            border-color: color-mix(in srgb, var(--primary) 55%, #e2e8f0);
            box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 12%, transparent);
        }
        .auto-pages-search-reset {
            display: inline-flex; align-items: center; justify-content: center; gap: 8px;
            min-height: 50px; padding: 0 18px; border: 1px solid #e2e8f0; border-radius: 12px;
            background: #ffffff; color: var(--text-dark); font-weight: 800; font-family: inherit;
            cursor: pointer; white-space: nowrap;
        }
        .auto-pages-search-reset:hover { background: #f1f5f9; }

        /* Toolbar: Kategorien + Anzahl */
        .auto-pages-toolbar {
            display: flex; justify-content: center; align-items: center;
            flex-wrap: wrap; gap: 8px; max-width: 1100px; margin: 0 auto 8px;
        }
        .auto-pages-filter { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
        .auto-pages-pill {
            appearance: none; font-family: inherit; cursor: pointer;
            display: inline-flex; align-items: center; gap: 6px;
            min-height: 38px; padding: 7px 14px;
            border: 1px solid #e2e8f0; border-radius: 999px;
            background: #ffffff; color: var(--text-dark);
            font-weight: 800; font-size: 0.86rem;
            transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
        }
        .auto-pages-pill .pill-count {
            display: inline-flex; align-items: center; justify-content: center;
            min-width: 18px; height: 18px; padding: 0 5px;
            border-radius: 999px; background: #f1f5f9;
            color: var(--text-muted); font-size: 0.7rem; font-weight: 900;
        }
        .auto-pages-pill:hover { border-color: color-mix(in srgb, var(--primary) 35%, #e2e8f0); }
        .auto-pages-pill.is-active {
            border-color: var(--primary); background: var(--primary); color: #ffffff;
        }
        .auto-pages-pill.is-active .pill-count { background: rgba(255,255,255,0.25); color: #ffffff; }
        .auto-pages-count {
            color: var(--text-muted); font-weight: 800; font-size: 0.82rem; white-space: nowrap;
        }

        /* Grid */
        .auto-pages-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(min(290px,100%), 1fr));
            gap: 20px; align-items: start; margin-top: 26px;
        }
        .auto-page-card {
            display: flex; flex-direction: column;
            overflow: hidden; border: 1px solid #e9eef5; border-radius: 20px;
            background: #ffffff; box-shadow: var(--shadow-soft);
            color: inherit; text-decoration: none;
            transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
            content-visibility: auto; contain-intrinsic-size: auto 360px;
        }
        .auto-page-card:hover {
            transform: translateY(-4px);
            border-color: color-mix(in srgb, var(--primary) 30%, #e9eef5);
            box-shadow: var(--shadow-lg);
        }
        .auto-page-card-media {
            position: relative; aspect-ratio: 16/9; overflow: hidden; flex-shrink: 0;
            background: linear-gradient(135deg, #e7eefb 0%, #f3f7ff 100%);
        }
        .auto-page-card-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
        /* Bild-Platzhalter (einheitlich, je Artikel eigener Farbton) */
        .auto-page-card-media[data-ph] {
            background: linear-gradient(135deg, hsl(var(--ph) 70% 90%) 0%, hsl(var(--ph) 72% 80%) 100%);
        }
        .auto-page-card-ph {
            position: absolute; inset: 0;
            display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px;
            color: hsl(var(--ph) 55% 32%); padding: 14px; text-align: center;
        }
        .auto-page-card-ph i { font-size: 1.7rem; opacity: 0.85; }
        .auto-page-card-ph span {
            font-weight: 900; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.07em;
        }
        .auto-page-card-body { display: flex; flex-direction: column; gap: 9px; padding: 18px 20px 20px; flex: 1; }
        .auto-page-card-meta {
            display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
            font-size: 0.74rem; font-weight: 800;
        }
        .auto-page-card-category { color: var(--primary); text-transform: uppercase; letter-spacing: 0.06em; }
        .auto-page-card-date { color: var(--text-muted); }
        .auto-page-card h2 {
            margin: 0; color: var(--text-dark); font-size: 1.1rem;
            line-height: 1.3; letter-spacing: -0.015em;
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
        }
        .auto-page-card p {
            margin: 0; color: var(--text-muted); font-size: 0.87rem; line-height: 1.6;
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
        }
        .auto-page-card-arrow {
            margin-top: auto; padding-top: 6px;
            color: var(--primary); font-size: 0.8rem; font-weight: 900;
            display: flex; align-items: center; gap: 6px;
        }

        .auto-pages-noresults {
            grid-column: 1 / -1; padding: 56px 24px; text-align: center;
            border: 1px dashed #cbd5e1; border-radius: 22px; background: #ffffff;
            color: var(--text-muted); font-weight: 800;
        }
        .auto-pages-noresults i { color: var(--primary); margin-right: 8px; }
        .js-hidden { display: none !important; }

        @media (max-width: 680px) {
            .auto-pages-hero { padding: 104px 5% 34px; }
            .auto-pages-search { grid-template-columns: 1fr; }
        }
    </style>

    <header class="auto-pages-hero">
        <div class="container">
            <span class="label">Artikel</span>
            <h1>News und Wissen <span>von kotsch.tech</span></h1>
            <p>Aktuelle Artikel, Software-Tests und Tech-Tipps – tippe einfach los oder filtere nach Thema.</p>
        </div>
    </header>

    <section class="auto-pages-section">
        <div class="container">

            <div class="auto-pages-search">
                <input type="search" id="newsSearch"
                       placeholder="Artikel suchen – Thema, Software oder Begriff…"
                       aria-label="Artikel suchen" autocomplete="off">
                <button type="button" class="auto-pages-search-reset" id="newsClear"><i class="fas fa-xmark"></i> Leeren</button>
            </div>

            <div class="auto-pages-toolbar">
                <div class="auto-pages-filter" id="newsCatPills" aria-label="Kategorien">
                    <button type="button" class="auto-pages-pill is-active" data-cat="all">Alle</button>
                    @foreach($groups as $group)
                        <button type="button" class="auto-pages-pill" data-cat="{{ $gslug($group['name']) }}">
                            {{ $group['name'] }}<span class="pill-count">{{ $group['count'] }}</span>
                        </button>
                    @endforeach
                    @if($sonstigesCount > 0)
                        <button type="button" class="auto-pages-pill" data-cat="sonstiges">
                            Sonstiges<span class="pill-count">{{ $sonstigesCount }}</span>
                        </button>
                    @endif
                </div>
            </div>
            <div style="text-align:center"><span class="auto-pages-count" id="newsCount">{{ $total }} Artikel</span></div>

            <div class="auto-pages-grid" id="news-grid">
                @foreach($pages as $page)
                    <a class="auto-page-card" href="{{ $page['url'] }}"
                       data-group="{{ $gslug($page['group']) }}" data-name="{{ $searchText($page) }}">
                        @if($page['heroImage'])
                            <div class="auto-page-card-media">
                                <img src="{{ $page['heroImage'] }}" alt="{{ $page['heroAlt'] }}"
                                     loading="lazy" decoding="async" width="640" height="360">
                            </div>
                        @else
                            <div class="auto-page-card-media" data-ph style="--ph: {{ $pageHue($page['slug']) }}">
                                <span class="auto-page-card-ph">
                                    <i class="fas fa-newspaper"></i>
                                    <span>{{ $page['category'] }}</span>
                                </span>
                            </div>
                        @endif
                        <div class="auto-page-card-body">
                            <div class="auto-page-card-meta">
                                <span class="auto-page-card-category">{{ $page['category'] }}</span>
                                @if($page['publishedLabel'])
                                    <span class="auto-page-card-date">{{ $page['publishedLabel'] }}</span>
                                @endif
                            </div>
                            <h2>{{ $page['title'] }}</h2>
                            <p>{{ $page['description'] }}</p>
                            <span class="auto-page-card-arrow">Weiterlesen <i class="fas fa-arrow-right"></i></span>
                        </div>
                    </a>
                @endforeach

                <div class="auto-pages-noresults js-hidden" id="newsNoResults">
                    <i class="fas fa-magnifying-glass"></i> Keine passenden Artikel gefunden.
                </div>
            </div>

        </div>
    </section>

    <script>
    (function () {
        var search = document.getElementById('newsSearch');
        var clearBtn = document.getElementById('newsClear');
        var grid = document.getElementById('news-grid');
        if (!grid) return;
        var cards = Array.prototype.slice.call(grid.querySelectorAll('.auto-page-card'));
        var pills = Array.prototype.slice.call(document.querySelectorAll('#newsCatPills button'));
        var noRes = document.getElementById('newsNoResults');
        var countEl = document.getElementById('newsCount');
        var total = cards.length;
        var fCat = 'all', fText = '', raf = null;

        function apply() {
            var shown = 0;
            for (var i = 0; i < cards.length; i++) {
                var c = cards[i];
                var okC = fCat === 'all' || c.getAttribute('data-group') === fCat;
                var okT = !fText || (c.getAttribute('data-name') || '').indexOf(fText) !== -1;
                if (okC && okT) { c.classList.remove('js-hidden'); shown++; }
                else { c.classList.add('js-hidden'); }
            }
            if (noRes) noRes.classList.toggle('js-hidden', shown > 0);
            if (countEl) countEl.textContent = (fCat !== 'all' || fText) ? (shown + ' von ' + total + ' Artikeln') : (total + ' Artikel');
        }
        function schedule() { if (raf) return; raf = requestAnimationFrame(function () { raf = null; apply(); }); }

        function setCat(val, pushHash) {
            fCat = val || 'all';
            pills.forEach(function (b) { b.classList.toggle('is-active', b.getAttribute('data-cat') === fCat); });
            if (pushHash) {
                if (fCat === 'all') history.replaceState(null, '', location.pathname + location.search);
                else location.hash = 'cat=' + fCat;
            }
            apply();
        }
        function readHash() {
            var m = (location.hash || '').match(/cat=([a-z]+)/);
            var v = m ? m[1] : 'all';
            var known = v === 'all' || pills.some(function (b) { return b.getAttribute('data-cat') === v; });
            setCat(known ? v : 'all', false);
        }

        if (search) search.addEventListener('input', function (e) { fText = e.target.value.toLowerCase().trim(); schedule(); });
        if (clearBtn) clearBtn.addEventListener('click', function () { if (search) search.value = ''; fText = ''; apply(); if (search) search.focus(); });
        pills.forEach(function (b) { b.addEventListener('click', function () { setCat(b.getAttribute('data-cat'), true); }); });
        window.addEventListener('hashchange', readHash);
        readHash();
    })();
    </script>
@endsection