<?php /** @var array $form; @var ?array $customer; @var ?array $appointment; @var ?array $artist; @var string $token */
$when = !empty($appointment['start_at'])
    ? (new DateTimeImmutable($appointment['start_at']))->format('l, F j · g:i A')
    : '';
$gi = (array)($form['general_info'] ?? []);
$name = trim(($gi['first_name'] ?? '') . ' ' . ($gi['last_name'] ?? ''));
?>

<section class="min-h-screen flex items-center justify-center px-6 py-20">
  <div class="max-w-xl w-full text-center">

    <!-- Success icon -->
    <div class="mx-auto w-24 h-24 rounded-full bg-gold/10 border-2 border-gold/30 flex items-center justify-center mb-8 animate-fade-in-up">
      <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#d4af37" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
        <polyline points="22 4 12 14.01 9 11.01"/>
      </svg>
    </div>

    <h1 class="text-4xl md:text-5xl font-display leading-tight animate-fade-in-up" style="animation-delay:0.1s">
      <?= e(t('intake.confirmed.title')) ?>
    </h1>

    <p class="mt-6 text-bone/60 text-lg font-light leading-relaxed animate-fade-in-up" style="animation-delay:0.2s">
      <?= e(t('intake.confirmed.body')) ?>
    </p>

    <!-- Appointment summary card -->
    <?php if ($when): ?>
      <div class="mt-10 bg-ink/40 border border-gold/20 rounded-2xl p-6 text-left animate-fade-in-up" style="animation-delay:0.3s">
        <div class="grid sm:grid-cols-2 gap-6">
          <div>
            <div class="text-[10px] uppercase tracking-[0.3em] text-gold/70 mb-1"><?= e(t('intake.confirmed.your_appt')) ?></div>
            <div class="text-lg font-medium"><?= e($when) ?></div>
          </div>
          <?php if ($artist): ?>
            <div>
              <div class="text-[10px] uppercase tracking-[0.3em] text-gold/70 mb-1"><?= e(t('intake.confirmed.your_artist')) ?></div>
              <div class="text-lg font-medium"><?= e($artist['display_name'] ?? '') ?></div>
            </div>
          <?php endif; ?>
        </div>
        <?php if ($name): ?>
          <div class="mt-4 pt-4 border-t border-white/5">
            <div class="text-[10px] uppercase tracking-[0.3em] text-gold/70 mb-1"><?= e(t('intake.confirmed.submitted_for')) ?></div>
            <div class="text-sm text-bone/70"><?= e($name) ?></div>
          </div>
        <?php endif; ?>
      </div>
    <?php endif; ?>

    <!-- What happens next -->
    <div class="mt-10 bg-white/[0.02] border border-white/5 rounded-2xl p-6 text-left animate-fade-in-up" style="animation-delay:0.4s">
      <h3 class="text-sm font-semibold text-gold mb-4"><?= e(t('intake.confirmed.next_steps')) ?></h3>
      <ul class="space-y-3 text-sm text-bone/60 leading-relaxed">
        <li class="flex gap-3">
          <span class="w-6 h-6 rounded-full bg-gold/10 text-gold flex items-center justify-center text-xs font-bold shrink-0 mt-0.5">1</span>
          <span><?= e(t('intake.confirmed.step_1')) ?></span>
        </li>
        <li class="flex gap-3">
          <span class="w-6 h-6 rounded-full bg-gold/10 text-gold flex items-center justify-center text-xs font-bold shrink-0 mt-0.5">2</span>
          <span><?= e(t('intake.confirmed.step_2')) ?></span>
        </li>
        <li class="flex gap-3">
          <span class="w-6 h-6 rounded-full bg-gold/10 text-gold flex items-center justify-center text-xs font-bold shrink-0 mt-0.5">3</span>
          <span><?= e(t('intake.confirmed.step_3')) ?></span>
        </li>
      </ul>
    </div>

    <!-- Actions -->
    <div class="mt-10 flex flex-col sm:flex-row items-center justify-center gap-4 animate-fade-in-up" style="animation-delay:0.5s">
      <a href="<?= url('/intake/' . e($token)) ?>" class="btn-ghost text-sm px-6 py-3">
        <?= e(t('intake.confirmed.edit_btn')) ?>
      </a>
      <a href="<?= url('/') ?>" class="text-sm text-bone/40 hover:text-bone transition-colors">
        <?= e(t('intake.confirmed.home_btn')) ?>
      </a>
    </div>

    <p class="mt-8 text-xs text-bone/30 animate-fade-in-up" style="animation-delay:0.6s">
      <?= e(t('intake.confirmed.email_note')) ?>
    </p>
  </div>
</section>
