@extends('layouts.app')

@section('title', 'Weiterleitung | kotsch.tech')
@section('robots', 'noindex,nofollow')

@php
    $__pubId   = config('adsense.publisher_id');
    $__slotRedir = config('adsense.slot_redirect') ?: config('adsense.slot_tools');
    $__adsLive = !empty($__pubId) && !str_contains($__pubId, 'XXXXXXXX');
@endphp

@section('content')
<style>
    .redirect-wrap {
        padding: 60px 5% 80px;
        background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
        min-height: 80vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }
    .redirect-page {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
    }
    .redirect-card {
        max-width: 560px;
        width: 100%;
        padding: 48px;
        border: 1px solid #e2e8f0;
        border-radius: 28px;
        background: #ffffff;
        box-shadow: 0 8px 40px rgba(0,0,0,0.07);
        text-align: center;
    }
    .redirect-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 64px;
        height: 64px;
        border-radius: 50%;
        background: rgba(37,99,235,0.1);
        color: var(--primary, #2563eb);
        font-size: 1.6rem;
        margin-bottom: 24px;
    }
    .redirect-label {
        font-size: 0.8rem;
        font-weight: 900;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: #94a3b8;
        margin-bottom: 10px;
    }
    .redirect-title {
        font-size: 1.6rem;
        font-weight: 900;
        letter-spacing: -0.03em;
        color: #0f172a;
        margin: 0 0 12px;
    }
    .redirect-subtitle {
        color: #64748b;
        font-size: 0.95rem;
        line-height: 1.6;
        margin-bottom: 28px;
    }
    .redirect-url-box {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 16px;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        background: #f8fafc;
        margin-bottom: 28px;
        text-align: left;
        overflow: hidden;
    }
    .redirect-url-box i {
        color: #94a3b8;
        flex-shrink: 0;
    }
    .redirect-url-text {
        font-size: 0.82rem;
        color: #475569;
        font-weight: 700;
        word-break: break-all;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .redirect-progress-wrap {
        margin-bottom: 24px;
    }
    .redirect-progress-bar {
        height: 6px;
        border-radius: 99px;
        background: #e2e8f0;
        overflow: hidden;
        margin-bottom: 8px;
    }
    .redirect-progress-fill {
        height: 100%;
        border-radius: 99px;
        background: var(--primary, #2563eb);
        width: 100%;
        transition: width 1s linear;
    }
    .redirect-countdown {
        font-size: 0.85rem;
        font-weight: 800;
        color: #64748b;
    }
    .redirect-countdown strong {
        color: var(--primary, #2563eb);
    }
    .redirect-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 14px 28px;
        border-radius: 12px;
        background: #cbd5e1;
        color: #94a3b8;
        font-weight: 900;
        font-size: 0.95rem;
        text-decoration: none;
        border: none;
        cursor: not-allowed;
        pointer-events: none;
        transition: background 0.3s, color 0.3s;
        margin-bottom: 16px;
        user-select: none;
    }
    .redirect-btn.redirect-btn--ready {
        background: var(--primary, #2563eb);
        color: #ffffff;
        cursor: pointer;
        pointer-events: auto;
    }
    .redirect-btn.redirect-btn--ready:hover { opacity: 0.88; }
    .redirect-ad-block {
        width: 100%;
        max-width: 728px;
        min-height: 90px;
        border: 1px solid #e2e8f0;
        border-radius: 16px;
        background: #f8fafc;
        padding: 12px;
        text-align: center;
    }
    .redirect-ad-label {
        font-size: 0.62rem;
        font-weight: 900;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: #94a3b8;
        margin-bottom: 8px;
    }
    .redirect-back {
        display: block;
        font-size: 0.85rem;
        color: #64748b;
        text-decoration: none;
        font-weight: 800;
    }
    .redirect-back:hover { color: var(--primary, #2563eb); }
</style>

<div class="redirect-wrap">
    <div class="redirect-page">
        <div class="redirect-card">
            <div class="redirect-icon"><i class="fas fa-external-link-alt"></i></div>
            <p class="redirect-label">Externe Website</p>
            <h1 class="redirect-title">Du verlässt kotsch.tech</h1>
            <p class="redirect-subtitle">Du verlässt kotsch.tech. Prüfe die Zieladresse und klicke unten, um fortzufahren. kotsch.tech übernimmt keine Verantwortung für fremde Inhalte.</p>
            <div class="redirect-url-box">
                <i class="fas fa-link"></i>
                <span class="redirect-url-text">{{ $url }}</span>
            </div>
            <a class="redirect-btn redirect-btn--ready" href="{{ $url }}" id="continueBtn" rel="noopener noreferrer nofollow">
                <i class="fas fa-arrow-right"></i> Zur externen Seite
            </a>
            <a class="redirect-back" href="javascript:history.back()">
                <i class="fas fa-arrow-left"></i> Zurück
            </a>
        </div>
    </div>

    <div class="redirect-ad-block">
        <p class="redirect-ad-label">Anzeige</p>
        @if($__adsLive)
            <ins class="adsbygoogle"
                 style="display:block"
                 data-ad-client="{{ $__pubId }}"
                 @if(!empty($__slotRedir)) data-ad-slot="{{ $__slotRedir }}" @endif
                 data-ad-format="auto"
                 data-full-width-responsive="true"></ins>
            <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
        @else
            <div style="min-height:90px;display:grid;place-items:center;border:1px dashed #cbd5e1;border-radius:10px;color:#94a3b8;font-size:0.82rem;font-weight:800;">
                Werbefläche (Leaderboard)
            </div>
        @endif
    </div>
</div>

{{-- Bewusst KEIN Auto-Redirect (window.location / meta-refresh): nur ein manueller
     Klick auf den Link oben. Verhindert, dass /go als stiller Phishing-Sprungbrett
     unter der vertrauenswürdigen kotsch.tech-Domain missbraucht wird (Audit M5). --}}
@endsection