---
import Base from '../layouts/Base.astro';
const orderNr = Astro.url.searchParams.get('order') || '';
const isDemo = Astro.url.searchParams.get('demo') === '1';
const main = `<div class="success-page" role="main" aria-label="Bestellbestätigung">

    <div class="success-icon" aria-hidden="true">✓</div>

    <p class="success-eyebrow">Bestellung eingegangen</p>
    ${isDemo ? `<p style="font-size:11px;color:var(--c-text-muted);border:1px solid var(--c-border);padding:8px 14px;display:inline-block;margin-bottom:8px">Demo-Bestellung · keine echte Zahlung (Stripe-Testmodus nicht konfiguriert)</p>` : ``}

    <h1 class="success-heading">
      Danke.<br>
      <span style="color:var(--c-red-bright)">Wird gemacht.</span>
    </h1>

    <p class="success-sub">
      Deine Bestellung ist bei uns. Du bekommst in Kürze eine Bestätigung per E-Mail.
      Lieferzeit: 2–4 Werktage innerhalb Deutschlands.
    </p>

    <div class="success-order-box" aria-label="Bestelldetails">
      <h2>Bestelldetails</h2>
      <div class="success-info-row">
        <span>Bestellnummer</span>
        <span id="order-number">${orderNr ? "#" + orderNr : "#PMPNZNG-—"}</span>
      </div>
      <div class="success-info-row">
        <span>Zahlungsart</span>
        <span>PayPal / Kreditkarte</span>
      </div>
      <div class="success-info-row">
        <span>Versand</span>
        <span>DHL · 2–4 Werktage</span>
      </div>
      <div class="success-info-row">
        <span>Rückgaberecht</span>
        <span>30 Tage</span>
      </div>
    </div>

    <div class="success-actions">
      <a href="/shop" class="btn btn-primary">Weiter shoppen</a>
      <a href="/" class="btn btn-outline">Zur Startseite</a>
    </div>

    <p class="success-note">
      Fragen zur Bestellung? Schreib uns: <a href="mailto:info@tgasolutions-shop.de" style="color:var(--c-text-muted);text-decoration:underline">info@tgasolutions-shop.de</a>
    </p>

  </div>`;
---
<Base title={"Bestellung erfolgreich — PMPNZNG"} page="success" active="">
  <Fragment set:html={main} />
</Base>

<style is:global>

.success-page {
  min-height: 80vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: var(--sp-xl) var(--gutter);
  text-align: center;
}
.success-icon {
  width: 80px; height: 80px;
  border: 3px solid var(--c-red);
  display: flex; align-items: center; justify-content: center;
  font-size: 32px; margin: 0 auto var(--sp-md);
  position: relative;
}
.success-icon::before, .success-icon::after {
  content: ''; position: absolute;
  width: 10px; height: 10px;
  background: var(--c-red);
}
.success-icon::before { top: -5px; left: -5px; }
.success-icon::after { bottom: -5px; right: -5px; }
.success-eyebrow {
  font-size: 9px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--c-red-bright); font-weight: 700; margin-bottom: 12px;
  display: flex; align-items: center; gap: 10px; justify-content: center;
}
.success-eyebrow::before, .success-eyebrow::after {
  content: ''; display: inline-block; width: 20px; height: 2px; background: var(--c-red-bright);
}
.success-heading {
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 64px);
  font-weight: 900; text-transform: uppercase; line-height: 0.95;
  margin-bottom: var(--sp-sm);
}
.success-sub {
  font-size: 15px; color: var(--c-text-muted); line-height: 1.75;
  max-width: 520px; margin: 0 auto var(--sp-md);
}
.success-order-box {
  background: var(--c-surface-1); border: 1px solid var(--c-border);
  padding: var(--sp-md); margin: var(--sp-md) 0;
  max-width: 480px; width: 100%; text-align: left;
}
.success-order-box h2 {
  font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase;
  font-weight: 700; color: var(--c-text-muted);
  margin-bottom: 12px; padding-bottom: 10px;
  border-bottom: 1px solid var(--c-border);
}
.success-info-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; padding: 6px 0;
  border-bottom: 1px solid var(--c-border);
}
.success-info-row:last-child { border-bottom: none; }
.success-info-row span:first-child { color: var(--c-text-muted); }
.success-info-row span:last-child { font-weight: 600; }
.success-actions {
  display: flex; gap: 12px; flex-wrap: wrap; justify-content: center;
  margin-top: var(--sp-md);
}
.success-note {
  font-size: 11px; color: var(--c-text-dim); margin-top: var(--sp-lg);
  max-width: 400px;
}
/* confetti dots — pure CSS decorative */
.success-bg {
  position: fixed; inset: 0; pointer-events: none; z-index: -1; overflow: hidden;
}
.confetti-dot {
  position: absolute; border-radius: 50%;
  animation: float-up 4s ease-in-out infinite;
  opacity: 0.12;
}
@keyframes float-up {
  0% { transform: translateY(100vh) rotate(0deg); opacity: 0.12; }
  100% { transform: translateY(-10vh) rotate(360deg); opacity: 0; }
}

</style>