@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', $site['title'] . ' — ' . $topic['label'] . ' | KOTSCH.TECH')
@section('meta_description', $site['description'])

@php($gated = $gated ?? false)

@if($gated)
@push('head')
<script type="application/ld+json">
{
  "@@context": "https://schema.org",
  "@@type": "Article",
  "headline": {!! \Illuminate\Support\Js::from($site['title']) !!},
  "description": {!! \Illuminate\Support\Js::from($site['description']) !!},
  "isAccessibleForFree": false,
  "hasPart": {
    "@@type": "WebPageElement",
    "isAccessibleForFree": false,
    "cssSelector": ".ws-article"
  }
}
</script>
@endpush
@endif

@section('content')
<style>
    .ws-wrap { max-width: 880px; margin: 0 auto; padding: 0 1.5rem; }
    .ws-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: clamp(2.5rem, 6vw, 4rem) 0 1rem; }
    .ws-crumbs { display: flex; align-items: center; gap: .5rem; font-size: .9rem; color: #64748b; }
    .ws-crumbs a { color: var(--primary); text-decoration: none; font-weight: 600; }
    .ws-crumbs a:hover { text-decoration: underline; }
    .ws-crumbs i { font-size: .65rem; color: #cbd5e1; }
    .ws-title { font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; color: #0f172a; margin: .8rem 0 1.6rem; }

    .ws-article { background: #fff; border: 1px solid #e8edf3; border-radius: 22px; padding: clamp(1.5rem, 4vw, 3rem); box-shadow: 0 30px 60px -45px rgba(15,23,42,.5); margin-bottom: 3.5rem; }
    .ws-article :where(h1,h2,h3,h4) { color: #0f172a; letter-spacing: -.01em; line-height: 1.25; margin: 1.8rem 0 .7rem; }
    .ws-article h1 { font-size: 1.9rem; } .ws-article h2 { font-size: 1.5rem; } .ws-article h3 { font-size: 1.22rem; }
    .ws-article p, .ws-article li { color: #334155; line-height: 1.75; font-size: 1.05rem; }
    .ws-article p { margin: 0 0 1.1rem; }
    .ws-article ul, .ws-article ol { margin: 0 0 1.2rem; padding-left: 1.4rem; }
    .ws-article li { margin: .35rem 0; }
    .ws-article a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
    .ws-article img { max-width: 100%; height: auto; border-radius: 14px; margin: 1.2rem 0; }
    .ws-article pre { background: #0f172a; color: #e2e8f0; padding: 1.1rem 1.3rem; border-radius: 14px; overflow-x: auto; font-size: .92rem; line-height: 1.6; margin: 0 0 1.3rem; }
    .ws-article code { font-family: ui-monospace, "JetBrains Mono", monospace; font-size: .92em; }
    .ws-article :not(pre) > code { background: var(--primary-soft); color: var(--primary-dark); padding: .12em .4em; border-radius: 6px; }
    .ws-article blockquote { border-left: 4px solid var(--primary); background: var(--primary-soft); margin: 0 0 1.3rem; padding: .9rem 1.2rem; border-radius: 0 12px 12px 0; color: #334155; }
    .ws-article table { width: 100%; border-collapse: collapse; margin: 0 0 1.3rem; font-size: .98rem; }
    .ws-article th, .ws-article td { border: 1px solid #e2e8f0; padding: .6rem .8rem; text-align: left; }
    .ws-article th { background: #f8fafc; font-weight: 700; }

    .ws-foot-back { display: inline-flex; align-items: center; gap: .5rem; padding: .8rem 1.4rem; border-radius: 12px; background: var(--primary); color: #fff; text-decoration: none; font-weight: 600; }
    .ws-foot-back:hover { filter: brightness(1.08); }
</style>

<div class="ws-wrap" style="--primary: {{ $topic['accent'] }};">
    <div class="ws-top">
        <nav class="ws-crumbs" aria-label="Breadcrumb">
            <a href="{{ route('wissen.index', [], false) }}">{{ $tr('Wissen', 'Knowledge') }}</a>
            <i class="fas fa-chevron-right" aria-hidden="true"></i>
            <a href="{{ route('wissen.topic', ['topic' => $topic['key']], false) }}">{{ $topic['label'] }}</a>
        </nav>
    </div>

    <h1 class="ws-title">{{ $site['title'] }}</h1>

    <article class="ws-article" @if($gated) style="mask-image:linear-gradient(180deg,#000 62%,transparent);-webkit-mask-image:linear-gradient(180deg,#000 62%,transparent);" @endif>
        {!! $site['body'] !!}
    </article>

    @if($gated)
        <x-login-wall
            headline="{{ $tr('Weiterlesen — kostenlos', 'Keep reading — free') }}"
            subline="{{ $tr('Du liest gerade den Anfang. Erstelle ein kostenloses Konto und lies den ganzen Artikel — plus Zugang zu allen Premium-Tools.', 'You are reading the intro. Create a free account to read the full article — plus access to all premium tools.') }}" />
    @else
        {{-- Werbung: fixe Seiten-Banner links/rechts (Desktop ≥1440px), sonst Inline-Banner.
             Nutzt das bestehende, consent-gated AdSense-System (config/adsense.php). --}}
        @include('tools._ads_banner')

        <p style="margin-bottom: 4rem;">
            <a class="ws-foot-back" href="{{ route('wissen.topic', ['topic' => $topic['key']], false) }}">
                <i class="fas fa-arrow-left" aria-hidden="true"></i> {{ $tr('Zurück zu', 'Back to') }} {{ $topic['label'] }}
            </a>
        </p>
    @endif
</div>
@endsection