@extends('layouts.app')

@php
    $routeLocale = in_array(request()->segment(1), ['de', 'en'], true) ? request()->segment(1) : 'de';
    $tr = fn ($de, $en) => $routeLocale === 'en' ? $en : $de;
@endphp

@section('title', $tr('Wissen — Lernen nach Themen | KOTSCH.TECH', 'Knowledge — Learn by Topic | KOTSCH.TECH'))
@section('meta_description', $tr('Lernen nach Themen: PDFs und komplette Lernsites zu Web-Entwicklung, IT-Sicherheit, KI, Mathematik und mehr — kostenlos auf kotsch.tech.', 'Learn by topic: PDFs and complete learning sites on web development, IT security, AI, math and more — free on kotsch.tech.'))

@section('content')
<style>
    .wissen-wrap { max-width: 1180px; margin: 0 auto; padding: 0 1.5rem; }
    .wissen-hero { position: relative; padding: clamp(4rem, 9vw, 7rem) 0 clamp(2.5rem, 5vw, 4rem); text-align: center; }
    .wissen-eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .8rem; color: var(--primary); background: var(--primary-soft); padding: .5rem 1rem; border-radius: 980px; }
    .wissen-hero h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.02; margin: 1.2rem 0 .6rem; color: #0f172a; }
    .wissen-hero h1 .grad { background: linear-gradient(120deg, var(--primary), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
    .wissen-hero p.lead { font-size: clamp(1.05rem, 2vw, 1.3rem); color: #475569; max-width: 620px; margin: 0 auto; }
    .wissen-stats { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-top: 2rem; }
    .wissen-stat { display: flex; align-items: baseline; gap: .5rem; background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: .85rem 1.3rem; box-shadow: 0 10px 30px -22px rgba(15,23,42,.5); }
    .wissen-stat b { font-size: 1.5rem; font-weight: 800; color: var(--primary); }
    .wissen-stat span { color: #64748b; font-size: .95rem; }

    .wissen-section-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin: 3.5rem 0 1.4rem; }
    .wissen-section-head h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; letter-spacing: -.02em; color: #0f172a; margin: 0; }
    .wissen-section-head p { margin: .3rem 0 0; color: #64748b; }

    .wissen-topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.2rem; }
    .wissen-topic { --c: var(--primary); position: relative; display: flex; flex-direction: column; gap: .9rem; background: #fff; border: 1px solid #e8edf3; border-radius: 22px; padding: 1.6rem; text-decoration: none; color: inherit; overflow: hidden; transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s, border-color .28s; }
    .wissen-topic::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 35%, #22D3EE)); transform: scaleX(0); transform-origin: left; transition: transform .35s ease; }
    .wissen-topic:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -28px color-mix(in srgb, var(--c) 55%, transparent); border-color: color-mix(in srgb, var(--c) 35%, #e8edf3); }
    .wissen-topic:hover::after { transform: scaleX(1); }
    .wissen-topic-icon { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 16px; font-size: 1.5rem; color: var(--c); background: color-mix(in srgb, var(--c) 12%, #fff); }
    .wissen-topic h3 { margin: 0; font-size: 1.3rem; font-weight: 800; letter-spacing: -.01em; color: #0f172a; }
    .wissen-topic p { margin: 0; color: #5b6677; font-size: .98rem; line-height: 1.5; flex: 1; }
    .wissen-topic-meta { display: flex; gap: 1rem; font-size: .85rem; color: #64748b; font-weight: 600; margin-top: .2rem; }
    .wissen-topic-meta i { color: var(--c); margin-right: .3rem; }

    .wissen-latest { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.1rem; }
    .wissen-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #e8edf3; border-radius: 18px; overflow: hidden; text-decoration: none; color: inherit; transition: transform .25s, box-shadow .25s; }
    .wissen-card:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -28px rgba(15,23,42,.45); }
    .wissen-card-thumb { aspect-ratio: 16/9; background: linear-gradient(135deg, var(--primary-soft), color-mix(in srgb, var(--accent-2) 14%, #fff)); display: grid; place-items: center; color: var(--primary); font-size: 2rem; }
    .wissen-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
    .wissen-card-body { padding: 1.1rem 1.2rem 1.3rem; }
    .wissen-card-tag { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--primary); }
    .wissen-card h3 { margin: .35rem 0 .4rem; font-size: 1.12rem; font-weight: 700; color: #0f172a; line-height: 1.25; }
    .wissen-card p { margin: 0; color: #64748b; font-size: .92rem; line-height: 1.5; }
    .wissen-empty { text-align: center; padding: 3rem 1rem; color: #64748b; background: #fff; border: 1px dashed #cbd5e1; border-radius: 20px; }
    @media (max-width: 560px) { .wissen-section-head { flex-direction: column; align-items: start; } }
</style>

<div class="wissen-wrap">
    <header class="wissen-hero">
        <span class="wissen-eyebrow"><i class="fas fa-graduation-cap" aria-hidden="true"></i> {{ $tr('Lern-Hub', 'Learning Hub') }}</span>
        <h1>{{ $tr('Lernen nach', 'Learn by') }} <span class="grad">{{ $tr('Themen', 'Topic') }}</span></h1>
        <p class="lead">{{ $tr('Kuratierte PDFs und komplette Lernsites — gezielt zu einem Thema, kostenlos und ohne Login.', 'Curated PDFs and complete learning sites — focused on one topic, free and without login.') }}</p>

        <div class="wissen-stats">
            <div class="wissen-stat"><b>{{ $topics->count() }}</b><span>{{ $tr('Themen', 'Topics') }}</span></div>
            <div class="wissen-stat"><b>{{ $totalSites }}</b><span>{{ $tr('Lernsites', 'Learning sites') }}</span></div>
            <div class="wissen-stat"><b>{{ $totalPdfs }}</b><span>PDFs</span></div>
        </div>
    </header>

    <section id="wissen-themen">
        <div class="wissen-section-head">
            <div>
                <h2>{{ $tr('Alle Themen', 'All topics') }}</h2>
                <p>{{ $tr('Wähle ein Thema und tauche ein.', 'Pick a topic and dive in.') }}</p>
            </div>
        </div>

        @if($topics->isEmpty())
            <div class="wissen-empty">{{ $tr('Themen werden gerade vorbereitet — bald geht es los.', 'Topics are being prepared — coming soon.') }}</div>
        @else
            <div class="wissen-topics">
                @foreach($topics as $t)
                    <a class="wissen-topic" style="--c: {{ $t['accent'] }};" href="{{ route('wissen.topic', ['topic' => $t['key']], false) }}">
                        <span class="wissen-topic-icon"><i class="fas {{ $t['icon'] }}" aria-hidden="true"></i></span>
                        <h3>{{ $t['label'] }}</h3>
                        <p>{{ $t['tagline'] }}</p>
                        <div class="wissen-topic-meta">
                            <span><i class="fas fa-window-maximize" aria-hidden="true"></i>{{ $t['site_count'] }} {{ $tr('Lernsites', 'sites') }}</span>
                            <span><i class="fas fa-file-pdf" aria-hidden="true"></i>{{ $t['pdf_count'] }} PDFs</span>
                        </div>
                    </a>
                @endforeach
            </div>
        @endif
    </section>

    @if($latest->isNotEmpty())
    <section id="wissen-neueste" style="margin-bottom: 4rem;">
        <div class="wissen-section-head">
            <div>
                <h2>{{ $tr('Neueste Lernsites', 'Latest learning sites') }}</h2>
                <p>{{ $tr('Frisch hinzugekommen.', 'Freshly added.') }}</p>
            </div>
        </div>
        <div class="wissen-latest">
            @foreach($latest as $s)
                <a class="wissen-card" href="{{ route('wissen.site', ['topic' => $s['topic'], 'slug' => $s['slug']], false) }}">
                    <div class="wissen-card-thumb">
                        @if(!empty($s['heroImage']))
                            <img src="{{ $s['heroImage'] }}" alt="{{ $s['title'] }}" loading="lazy">
                        @else
                            <i class="fas fa-book-open" aria-hidden="true"></i>
                        @endif
                    </div>
                    <div class="wissen-card-body">
                        <span class="wissen-card-tag">{{ $s['topicLabel'] }}</span>
                        <h3>{{ $s['title'] }}</h3>
                        <p>{{ \Illuminate\Support\Str::limit($s['description'], 110) }}</p>
                    </div>
                </a>
            @endforeach
        </div>
    </section>
    @endif
</div>
@endsection