@extends('layouts.app')

@section('title', 'Danke für dein Feedback - KOTSCH.TECH')
@section('meta_description', 'Danke für dein Feedback zu KOTSCH.TECH Apps, Software, Websites und Tools.')

@push('head')
<style>
    .fb-thanks { min-height: 74vh; display: grid; place-items: center; padding: 120px 20px 90px; position: relative; overflow: hidden;
        background:
            radial-gradient(60% 50% at 50% -6%, rgba(37,99,235,.13), transparent 62%),
            radial-gradient(50% 40% at 85% 100%, rgba(255,93,46,.12), transparent 60%),
            #f6f8fc; }
    .fb-thanks-box { max-width: 620px; text-align: center; background: rgba(255,255,255,.88); backdrop-filter: blur(8px);
        border: 1px solid #e6ebf3; border-radius: 26px; padding: clamp(30px, 5vw, 50px);
        box-shadow: 0 40px 90px -50px rgba(15,23,42,.55); }
    .fb-badge { width: 84px; height: 84px; margin: 0 auto 22px; border-radius: 50%; display: grid; place-items: center;
        background: linear-gradient(135deg, var(--primary), var(--accent-2)); color: #fff; font-size: 2.3rem;
        box-shadow: 0 22px 46px -18px rgba(37,99,235,.7); animation: fbPop .5s cubic-bezier(.34,1.56,.64,1) both; }
    @keyframes fbPop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
    .fb-thanks-box h1 { margin: 0 0 12px; font-size: clamp(2rem, 5.5vw, 3.4rem); letter-spacing: -.03em; font-weight: 800; line-height: 1.05;
        background: linear-gradient(120deg,#0f172a 35%, var(--primary) 75%, var(--accent-2) 100%);
        -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
    .fb-thanks-box p { color: #475569; line-height: 1.7; font-size: 1.08rem; margin: 0 auto; max-width: 480px; }
    .fb-thanks-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 30px; }
    .fb-thanks-actions a { display: inline-flex; align-items: center; gap: 9px; border-radius: 14px; padding: 14px 22px; text-decoration: none; font-weight: 800; }
    .fb-primary { background: linear-gradient(135deg, var(--primary), var(--accent-2)); color: #fff; box-shadow: 0 16px 36px -16px rgba(37,99,235,.6); }
    .fb-secondary { background: #fff; color: #0f172a; border: 1.5px solid #e2e8f0; }
</style>
@endpush

@section('content')
<section class="fb-thanks">
    <div class="fb-thanks-box">
        <div class="fb-badge"><i class="fas fa-check" aria-hidden="true"></i></div>
        <h1>Danke, ist angekommen!</h1>
        <p>Dein Feedback ist gespeichert. Wenn du eine E-Mail hinterlassen hast, melde ich mich bei Rückfragen direkt bei dir.</p>
        <div class="fb-thanks-actions">
            <a class="fb-primary" href="{{ route('feedback.index') }}"><i class="fas fa-plus" aria-hidden="true"></i> Noch was loswerden</a>
            <a class="fb-secondary" href="{{ route('home') }}">Zur Startseite</a>
        </div>
    </div>
</section>
@endsection