<?php
$config = require __DIR__ . '/../lib/config.php';
$base   = rtrim($config['base_url'] ?? '', '/');
$isDemo = !empty($config['demo_mode']);
?>
<!doctype html>
<html lang="en" class="h-full">
<head>
<meta charset="utf-8">
<title>Thanks <?= $isDemo ? ' (Demo Mode)' : '' ?></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark">
<style>
  :root{
    --brand:#0f6fff;
    --ink:#0b1220;
    --muted:#5b6478;
    --bg:#f6f7fb;
    --card:#ffffff;
    --ring:#d6d9e2;
  }
  @media (prefers-color-scheme: dark){
    :root{
      --ink:#eef3ff;
      --muted:#a9b3c7;
      --bg:#0b0f1a;
      --card:#12192a;
      --ring:#27314a;
    }
  }
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    font:16px/1.5 system-ui,Segoe UI,Roboto,Arial,Helvetica,sans-serif;
    color:var(--ink);
    background:
      radial-gradient(1200px 600px at 10% -10%, rgba(15,111,255,.16), transparent 60%),
      radial-gradient(900px 500px at 110% 0%, rgba(15,111,255,.10), transparent 60%),
      var(--bg);
    display:grid;place-items:center;padding:24px;
  }
  .card{
    width:min(720px, 92vw);
    background:var(--card);
    border:1px solid var(--ring);
    border-radius:20px;
    box-shadow:0 18px 40px rgba(15,17,23,.08);
    overflow:hidden;
    animation:pop .35s ease-out;
    position:relative;
  }
  @keyframes pop{from{transform:translateY(8px) scale(.98);opacity:0}to{transform:none;opacity:1}}
  .hdr{
    display:flex;align-items:center;gap:14px;
    padding:20px 22px;
    background:linear-gradient(180deg, rgba(15,111,255,.12), transparent 70%);
    border-bottom:1px solid var(--ring);
  }
  .logo{
    width:44px;height:44px;border-radius:12px;background:var(--brand);color:#fff;
    display:grid;place-items:center;font-weight:800;letter-spacing:.5px;
    box-shadow:inset 0 0 0 2px rgba(255,255,255,.25);
  }
  .title{margin:0;font-size:20px}
  .sub{margin:2px 0 0;color:var(--muted);font-size:14px}
  .body{padding:24px}
  .lead{font-size:18px;margin:0 0 8px}
  .muted{color:var(--muted);margin:0 0 18px}
  .cta{
    display:flex;flex-wrap:wrap;gap:10px;margin-top:6px
  }
  .btn{
    background:var(--brand);color:#fff;border:0;border-radius:10px;
    padding:12px 16px;cursor:pointer;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:8px
  }
  .btn.secondary{
    background:transparent;color:var(--brand);border:1px solid var(--brand)
  }
  .btn:disabled{opacity:.6;cursor:not-allowed}
  .fine{margin-top:16px;color:var(--muted);font-size:13px}
  footer{
    text-align:center;
    padding:14px;
    font-size:13px;
    color:var(--muted);
    border-top:1px solid var(--ring);
  }
  footer a{color:var(--brand);text-decoration:none}
  footer a:hover{text-decoration:underline}

  /* demo badge (visual only) */
  .demo-badge{
    position:absolute;right:12px;top:12px;
    background:#f8d7da;color:#842029;border:1px solid #f5c2c7;
    border-radius:999px;padding:4px 8px;font-size:12px;
    box-shadow:0 2px 8px rgba(0,0,0,.08)
  }
</style>
</head>
<body>
  <main class="card" role="main" aria-labelledby="thanks-title">
    <?php if ($isDemo): ?><div class="demo-badge">DEMO</div><?php endif; ?>
    <header class="hdr">
      
      <div>
        <h1 id="thanks-title" class="title">Thank you</h1>
        <p class="sub">Your photos and notes have been received.</p>
      </div>
    </header>

    <section class="body">
      <p class="lead">We’ve sent everything to our team.</p>
      <p class="muted">If we need anything else, we’ll be in touch shortly.</p>

      <div class="cta">
                <button class="btn secondary" type="button" onclick="window.close()">Close this tab</button>
      </div>

      <p class="fine">Having trouble or uploaded the wrong file? Reply to your contact email and we’ll help fix it.</p>
    </section>

    <footer>
      Towlens Powered by <a href="https://mpmg.co.uk/software" target="_blank" rel="noopener">Mount Pleasant Motoring Services Ltd</a>
    </footer>
  </main>
</body>
</html>
