@php($code = $code ?? 'Error')
@php($title = $title ?? 'Terjadi Kesalahan')
@php($description = $description ?? 'Maaf, terjadi kesalahan pada sistem.')
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>{{ $code }} — OKELaundry</title>
  @include('partials.favicon')
  @include('partials.brand-fonts')
  <style>
    :root{
      --brand-deep:#1f7fb7;--brand-main:#3aa5e6;--brand-accent:#4BB8FA;
      --text:#0F172A;--muted:#5B6B80;--bg:#F4F9FE;--card:#FFFFFF;
      --shadow:0 18px 40px rgba(31,127,183,.12);
      font-family:'Plus Jakarta Sans',Inter,Segoe UI,Roboto,system-ui,sans-serif
    }
    *{box-sizing:border-box}
    body{margin:0;min-height:100vh;background:linear-gradient(180deg,#F4F9FE 0%,#E5F2FB 100%);color:var(--text);display:grid;place-items:center;padding:24px}
    .wrap{width:100%;max-width:560px;background:var(--card);border:1px solid #D9E6F2;border-radius:24px;overflow:hidden;box-shadow:var(--shadow);text-align:center}
    .strip{background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,0) 45%),linear-gradient(90deg,var(--brand-deep),var(--brand-main),var(--brand-accent));color:#fff;padding:18px 24px;display:flex;align-items:center;gap:10px;justify-content:center;font-weight:700}
    .logo-dot{width:22px;height:22px;border-radius:50%;background:#fff1;border:2px solid #fff;box-shadow:inset 0 0 0 4px #C4E2F5}
    .body{padding:36px 28px 32px}
    .code{font-size:96px;font-weight:800;letter-spacing:-0.04em;color:var(--brand-accent);line-height:1;margin:0}
    .title{margin:8px 0 8px;font-size:24px;font-weight:800;color:var(--brand-deep)}
    .desc{margin:0 0 24px;color:var(--muted);font-size:15px;line-height:1.6}
    .actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
    .btn{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:12px;border:none;font-weight:700;font-size:14px;text-decoration:none;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}
    .btn-primary{background:linear-gradient(135deg,var(--brand-main),var(--brand-accent));color:#fff;box-shadow:0 10px 20px rgba(75,184,250,.28)}
    .btn-primary:hover{transform:translateY(-1px)}
    .btn-muted{background:#E5F2FB;color:#1f3a5b;border:1px solid #C4E2F5}
    .btn-muted:hover{background:#C4E2F5}
    .footer{padding:14px 24px;font-size:12px;color:var(--muted);border-top:1px solid #D9E6F2;background:#fff}
  </style>
</head>
<body>
  <div class="wrap">
    <div class="strip"><span>OKELaundry</span><span class="logo-dot"></span><span style="font-weight:400;opacity:.9">— Cuci Ekspres - Pasti Beres</span></div>
    <div class="body">
      <p class="code">{{ $code }}</p>
      <h1 class="title">{{ $title }}</h1>
      <p class="desc">{{ $description }}</p>
      <div class="actions">
        <a href="/" class="btn btn-primary">Kembali ke Beranda</a>
        <a href="javascript:history.back()" class="btn btn-muted">Halaman Sebelumnya</a>
      </div>
    </div>
    <div class="footer">©{{ date('Y') }} OKE Laundry — Sistem Informasi Pelacakan dan Pengelolaan Pesanan</div>
  </div>
</body>
</html>
