Review & Confirm

<!--
  A review step: three summary rows, each with an Edit link back to its section,
  then a terms checkbox gating the confirm button. The masked card (dots + last
  four) is display text passed in by the parent - this component never sees a full
  number. The rows use a <dl>; the Edit links are the section anchors.
-->
<form class="w-full max-w-md space-y-4 rounded-2xl border border-gray-200 bg-white p-5 sm:p-6 dark:border-gray-800 dark:bg-gray-950" action="#" method="post" novalidate>
  <h2 class="text-sm font-semibold text-gray-900 dark:text-gray-100">Review your order</h2>
  <dl class="divide-y divide-gray-200 rounded-xl border border-gray-200 dark:divide-gray-800 dark:border-gray-800">
    <div class="flex items-start justify-between gap-3 p-3">
      <div class="min-w-0">
        <dt class="text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400">Contact</dt>
        <dd class="mt-0.5 truncate text-sm text-gray-900 dark:text-gray-100">you@example.com</dd>
      </div>
      <a class="shrink-0 rounded text-sm font-medium text-blue-600 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:text-blue-400 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-950" href="#contact">Edit</a>
    </div>
    <div class="flex items-start justify-between gap-3 p-3">
      <div class="min-w-0">
        <dt class="text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400">Ship to</dt>
        <dd class="mt-0.5 text-sm text-gray-900 dark:text-gray-100">123 Market St, San Francisco, CA 94103</dd>
      </div>
      <a class="shrink-0 rounded text-sm font-medium text-blue-600 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:text-blue-400 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-950" href="#shipping">Edit</a>
    </div>
    <div class="flex items-start justify-between gap-3 p-3">
      <div class="min-w-0">
        <dt class="text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400">Payment</dt>
        <dd class="mt-0.5 text-sm tabular-nums text-gray-900 dark:text-gray-100">&bull;&bull;&bull;&bull; 4242</dd>
      </div>
      <a class="shrink-0 rounded text-sm font-medium text-blue-600 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:text-blue-400 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-950" href="#payment">Edit</a>
    </div>
  </dl>
  <div class="flex items-center justify-between gap-3 text-base font-semibold">
    <span class="text-gray-900 dark:text-gray-100">Total</span>
    <span class="text-right tabular-nums text-gray-900 dark:text-gray-100">$116.24</span>
  </div>
  <label class="flex items-start gap-2.5 text-sm text-gray-700 dark:text-gray-300">
    <input class="mt-0.5 h-4 w-4 rounded border-gray-300 text-blue-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 dark:border-gray-600 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-950" type="checkbox" name="agree" required />
    <span>I agree to the terms of sale and refund policy.</span>
  </label>
  <button class="inline-flex w-full items-center justify-center rounded-lg bg-blue-600 px-5 py-3 text-sm font-semibold text-white transition-colors hover:bg-blue-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white motion-reduce:transition-none dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-950" type="submit">Confirm &amp; pay $116.24</button>
</form>