<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Terima Kasih</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">

    <style>

        :root{
            --navy-950:#050B1A;
            --navy-900:#0A1730;
            --navy-800:#0F2247;
            --navy-700:#15316B;
            --navy-600:#1D4090;
            --accent:#3D6FE0;
            --accent-light:#6E93F2;
            --gold:#E3B341;
            --success:#2FAE7A;
            --ink:#0A1730;
            --muted:#5C6B8A;
            --line:#E1E7F5;
            --paper:#F7F9FE;
            --font-display:'Plus Jakarta Sans',sans-serif;
            --font-body:'Inter',sans-serif;
        }

        *{ font-family:var(--font-body); }

        body{
            background:
                radial-gradient(700px 500px at 15% 15%, rgba(110,147,242,.20), transparent 60%),
                radial-gradient(600px 460px at 85% 85%, rgba(227,179,65,.10), transparent 55%),
                linear-gradient(150deg,var(--navy-950) 0%,var(--navy-900) 45%,var(--navy-700) 100%);
            min-height:100vh;
            display:flex;
            justify-content:center;
            align-items:center;
            padding:24px;
            position:relative;
            overflow:hidden;
        }

        body::before{
            content:"";
            position:fixed;
            inset:0;
            background-image:
                linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
            background-size:34px 34px;
            mask-image:radial-gradient(circle at 30% 30%, black, transparent 70%);
            pointer-events:none;
        }

        .card{
            position:relative;
            z-index:1;
            max-width:560px;
            width:100%;
            border:none;
            border-radius:26px;
            padding:46px 42px;
            text-align:center;
            background:#fff;
            box-shadow:0 30px 70px rgba(0,0,0,.35);
        }

        .icon-wrap{
            width:88px;
            height:88px;
            border-radius:24px;
            background:linear-gradient(150deg, var(--success), #1E8C60);
            display:flex;
            align-items:center;
            justify-content:center;
            margin:0 auto;
            box-shadow:0 16px 32px rgba(47,174,122,.32);
        }

        .icon-wrap i{
            font-size:42px;
            color:#fff;
        }

        .eyebrow{
            font-family:var(--font-display);
            font-size:11.5px;
            font-weight:700;
            letter-spacing:.12em;
            text-transform:uppercase;
            color:var(--accent);
            display:inline-flex;
            align-items:center;
            gap:9px;
            margin-top:22px;
            margin-bottom:4px;
        }

        .eyebrow::before,
        .eyebrow::after{
            content:"";
            width:18px;
            height:2px;
            background:var(--accent);
            display:inline-block;
            border-radius:2px;
        }

        h2{
            font-family:var(--font-display);
            font-weight:800;
            font-size:26px;
            color:var(--navy-900);
            letter-spacing:-.015em;
            margin-top:8px;
        }

        p.description{
            color:var(--muted);
            font-size:14.5px;
            line-height:1.75;
            margin-top:14px;
            max-width:420px;
            margin-left:auto;
            margin-right:auto;
        }

        p.description strong{ color:var(--navy-800); }

        .alert-success{
            background:rgba(47,174,122,.1);
            border:1px solid rgba(47,174,122,.25);
            color:#1E8C60;
            border-radius:13px;
            font-size:13.5px;
            padding:13px 16px;
            margin-top:22px;
        }

        .btn-row{
            display:flex;
            gap:12px;
            justify-content:center;
            margin-top:30px;
            flex-wrap:wrap;
        }

        .btn{
            border-radius:13px;
            padding:13px 28px;
            font-weight:700;
            font-size:14px;
            font-family:var(--font-display);
            display:inline-flex;
            align-items:center;
            gap:8px;
            transition:.2s;
            border:none;
        }

        .btn-primary{
            background:linear-gradient(135deg, var(--accent) 0%, var(--navy-700) 100%);
            color:#fff;
            box-shadow:0 14px 30px rgba(29,64,144,.3);
        }

        .btn-primary:hover{
            transform:translateY(-2px);
            box-shadow:0 18px 36px rgba(29,64,144,.38);
            filter:brightness(1.05);
            color:#fff;
        }

        .btn-outline-secondary{
            background:#fff;
            border:1.5px solid var(--line);
            color:var(--muted);
        }

        .btn-outline-secondary:hover{
            background:var(--paper);
            color:var(--navy-800);
            border-color:var(--navy-600);
        }

        .footer-note{
            margin-top:28px;
            font-size:12px;
            color:#9AA6BC;
        }

    </style>
</head>
<body>

<div class="card shadow-lg">

    <div class="icon-wrap">
        <i class="bi bi-check-lg"></i>
    </div>

    <div class="eyebrow">SMKN 7 Palembang</div>

    <h2>Terima Kasih</h2>

    <p class="description">
        Terima kasih telah berkunjung ke <strong>SMKN 7 Palembang</strong>.
        Data kunjungan serta pesan dan kesan Anda telah berhasil disimpan.
    </p>

    @if(session('success'))
        <div class="alert-success">
            {{ session('success') }}
        </div>
    @endif

    <div class="btn-row">
        <a href="{{ route('kunjungan.create') }}" class="btn btn-primary">
            <i class="bi bi-arrow-repeat"></i>
            Isi Buku Tamu Lagi
        </a>

        <a href="{{ url('/') }}" class="btn btn-outline-secondary">
            <i class="bi bi-house-door"></i>
            Halaman Utama
        </a>
    </div>

    <div class="footer-note">
        Sistem Informasi Data Kunjungan Tamu &copy; {{ date('Y') }}
    </div>

</div>

</body>
</html>