Order Summary Card

<!--
  Day 113: Order summary card

  Created by John Champ

  Founder of Pixelcave      -> https://pixelcave.com
  Building Tailkit          -> https://tailkit.com
  Let's connect on X        -> https://x.com/pixelcave_john
                on Bluesky  -> https://bsky.app/profile/pixelcave-john.bsky.social
-->

<!-- Order Summary Card -->
<div
  class="mx-auto w-full max-w-md rounded-3xl border border-zinc-200 bg-white ring-4 ring-zinc-300/25"
>
  <div class="p-6">
    <!-- Header -->
    <div class="flex items-center justify-between">
      <h3 class="text-lg font-bold text-zinc-900">Order Summary</h3>
      <span
        class="-mr-2 rounded-full bg-indigo-50 px-2 py-0.75 text-xs font-semibold text-indigo-600"
        >3 items</span
      >
    </div>
    <!-- END Header -->

    <!-- Line Items -->
    <div class="mt-5 flex flex-col gap-4">
      <!-- Item -->
      <div class="flex items-center gap-4">
        <div
          class="flex size-14 flex-none items-center justify-center rounded-xl bg-zinc-100"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-computer inline-block size-6 text-zinc-400"
          >
            <rect width="14" height="8" x="5" y="2" rx="2" />
            <rect width="20" height="8" x="2" y="14" rx="2" />
            <path d="M6 18h2" />
            <path d="M12 18h6" />
          </svg>
        </div>
        <div class="min-w-0 grow">
          <p class="truncate text-sm font-semibold text-zinc-900">
            Studio Display
          </p>
          <p class="text-xs text-zinc-500">Qty: 1</p>
        </div>
        <span class="flex-none text-sm font-semibold text-zinc-900"
          >$1,599.00</span
        >
      </div>
      <!-- END Item -->

      <!-- Item -->
      <div class="flex items-center gap-4">
        <div
          class="flex size-14 flex-none items-center justify-center rounded-xl bg-zinc-100"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-keyboard inline-block size-6 text-zinc-400"
          >
            <path d="M10 8h.01" />
            <path d="M12 12h.01" />
            <path d="M14 8h.01" />
            <path d="M16 12h.01" />
            <path d="M18 8h.01" />
            <path d="M6 8h.01" />
            <path d="M7 16h10" />
            <path d="M8 12h.01" />
            <rect width="20" height="16" x="2" y="4" rx="2" />
          </svg>
        </div>
        <div class="min-w-0 grow">
          <p class="truncate text-sm font-semibold text-zinc-900">
            Magic Keyboard
          </p>
          <p class="text-xs text-zinc-500">Qty: 1</p>
        </div>
        <span class="flex-none text-sm font-semibold text-zinc-900"
          >$299.00</span
        >
      </div>
      <!-- END Item -->

      <!-- Item -->
      <div class="flex items-center gap-4">
        <div
          class="flex size-14 flex-none items-center justify-center rounded-xl bg-zinc-100"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-mouse-pointer-click inline-block size-6 text-zinc-400"
          >
            <path d="M14 4.1 12 6" />
            <path d="m5.1 8-2.9-.8" />
            <path d="m6 12-1.9 2" />
            <path d="M7.2 2.2 8 5.1" />
            <path
              d="M9.037 9.69a.498.498 0 0 1 .653-.653l11 4.5a.5.5 0 0 1-.074.949l-4.349 1.041a1 1 0 0 0-.74.739l-1.04 4.35a.5.5 0 0 1-.95.074z"
            />
          </svg>
        </div>
        <div class="min-w-0 grow">
          <p class="truncate text-sm font-semibold text-zinc-900">
            Magic Mouse
          </p>
          <p class="text-xs text-zinc-500">Qty: 1</p>
        </div>
        <span class="flex-none text-sm font-semibold text-zinc-900"
          >$99.00</span
        >
      </div>
      <!-- END Item -->
    </div>
    <!-- END Line Items -->

    <!-- Discount Code -->
    <div class="mt-6">
      <div class="flex gap-2">
        <input
          type="text"
          placeholder="Discount code"
          class="w-full rounded-xl border border-zinc-200 bg-zinc-50 px-4 py-2.5 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 focus:outline-hidden"
        />
        <button
          type="button"
          class="flex-none rounded-xl border border-zinc-200 bg-white px-4 py-2.5 text-sm font-medium text-zinc-700 hover:bg-zinc-50 active:bg-zinc-100"
        >
          Apply
        </button>
      </div>
      <div class="mt-3 flex items-center gap-1.5">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-check inline-block size-4 text-emerald-500"
        >
          <path d="M20 6 9 17l-5-5" />
        </svg>
        <span class="text-xs font-medium text-emerald-600"
          >SAVE20 applied - 20% off</span
        >
      </div>
    </div>
    <!-- END Discount Code -->

    <!-- Totals -->
    <div
      class="mt-5 flex flex-col gap-2.5 border-t border-dashed border-zinc-200 pt-5"
    >
      <div class="flex items-center justify-between text-sm">
        <span class="text-zinc-500">Subtotal</span>
        <span class="font-medium text-zinc-700">$1,997.00</span>
      </div>
      <div class="flex items-center justify-between text-sm">
        <span class="text-zinc-500">Discount (20%)</span>
        <span class="font-medium text-emerald-600">-$399.40</span>
      </div>
      <div class="flex items-center justify-between text-sm">
        <span class="text-zinc-500">Shipping</span>
        <span class="font-medium text-zinc-700">Free</span>
      </div>
      <div class="flex items-center justify-between text-sm">
        <span class="text-zinc-500">Tax</span>
        <span class="font-medium text-zinc-700">$143.78</span>
      </div>
      <div
        class="flex items-center justify-between border-t border-zinc-200 pt-3"
      >
        <span class="text-sm font-semibold text-zinc-900">Total</span>
        <span class="text-lg font-bold text-zinc-900">$1,741.38</span>
      </div>
    </div>
    <!-- END Totals -->

    <!-- Checkout Button -->
    <div class="mt-6">
      <button
        type="button"
        class="flex w-full items-center justify-center gap-2 rounded-xl bg-zinc-900 px-4 py-3 text-sm font-semibold text-white hover:bg-zinc-700 active:bg-zinc-800"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-lock inline-block size-4"
        >
          <rect width="18" height="11" x="3" y="11" rx="2" ry="2" />
          <path d="M7 11V7a5 5 0 0 1 10 0v4" />
        </svg>
        <span>Checkout</span>
      </button>
      <p class="mt-3 text-center text-xs font-medium text-zinc-400">
        Secure checkout powered by
        <span class="font-semibold text-zinc-600">Stripe</span>.
      </p>
    </div>
    <!-- END Checkout Button -->
  </div>
</div>
<!-- END Order Summary Card -->