/**
 * ANNOTATED COPY — every line explained
 * Source: src/app/checkout/page.tsx
 * NOT used by the app — read this to learn how the real file works
 */
// Next.js: this file runs in the BROWSER (needs useState, onClick, localStorage, etc.)
'use client';
// (blank line — separates logical blocks for readability)
// Import React — core UI library (components, hooks, JSX)
import { useState } from 'react';
// Next.js App Router hooks — useRouter, useParams, useSearchParams
import { useRouter } from 'next/navigation';
// Import project module (@/ alias = src/ folder in tsconfig)
import AppImage from '@/components/ui/AppImage';
// Next.js Link — fast client-side navigation without full page reload
import Link from 'next/link';
// Lucide icons — lightweight SVG icon components
import { Lock, CreditCard, Truck, CheckCircle, ChevronLeft } from 'lucide-react';
// Import project module (@/ alias = src/ folder in tsconfig)
import Button from '@/components/ui/Button';
// Import project module (@/ alias = src/ folder in tsconfig)
import { useCartStore } from '@/store/cart';
// Import project module (@/ alias = src/ folder in tsconfig)
import { useAuthStore } from '@/store/auth';
// Import project module (@/ alias = src/ folder in tsconfig)
import { formatPrice, getFormatLocale } from '@/lib/utils';
// Import project module (@/ alias = src/ folder in tsconfig)
import { useTranslation } from '@/hooks/useTranslation';
// Import project module (@/ alias = src/ folder in tsconfig)
import { localizeProduct } from '@/lib/product-i18n';
// Import project module (@/ alias = src/ folder in tsconfig)
import { Order } from '@/types';
// (blank line — separates logical blocks for readability)
// Default export — main component/page Next.js or other files import
export default function CheckoutPage() {
  // Next.js router — programmatic navigation (router.push)
  const router = useRouter();
  // Zustand selector — subscribe to slice of global store
  const { items, getTotal, clearCart } = useCartStore();
  // Zustand selector — subscribe to slice of global store
  const { user, isAuthenticated, addOrder } = useAuthStore();
  // Custom hook — returns t() translator and current locale
  const { t, locale } = useTranslation();
// (blank line — separates logical blocks for readability)
  // React useState — local component state that triggers re-render on change
  const [paymentMethod, setPaymentMethod] = useState('card');
  // React useState — local component state that triggers re-render on change
  const [isProcessing, setIsProcessing] = useState(false);
  // React useState — local component state that triggers re-render on change
  const [orderComplete, setOrderComplete] = useState(false);
  // React useState — local component state that triggers re-render on change
  const [orderId, setOrderId] = useState('');
// (blank line — separates logical blocks for readability)
  // React useState — local component state that triggers re-render on change
  const [form, setForm] = useState({
    // Property or array item — trailing comma allowed in TypeScript
    name: user?.name || '',
    // Property or array item — trailing comma allowed in TypeScript
    email: user?.email || '',
    // Property or array item — trailing comma allowed in TypeScript
    phone: user?.phone || '',
    // Property or array item — trailing comma allowed in TypeScript
    street: user?.address.street || '',
    // Property or array item — trailing comma allowed in TypeScript
    city: user?.address.city || '',
    // Property or array item — trailing comma allowed in TypeScript
    state: user?.address.state || '',
    // Property or array item — trailing comma allowed in TypeScript
    zip: user?.address.zip || '',
    // Property or array item — trailing comma allowed in TypeScript
    cardNumber: '',
    // Property or array item — trailing comma allowed in TypeScript
    expiry: '',
    // Property or array item — trailing comma allowed in TypeScript
    cvv: '',
  // Closing brace — end of block (function, if, object, JSX)
  });
// (blank line — separates logical blocks for readability)
  // Line 40: const total = getTotal();
  const total = getTotal();
  // Line 41: const deliveryFee = total > 500 ? 0 : 49;
  const deliveryFee = total > 500 ? 0 : 49;
  // Line 42: const grandTotal = total + deliveryFee;
  const grandTotal = total + deliveryFee;
  // Line 43: const fmt = (n: number) => formatPrice(n, getFormatLocale...
  const fmt = (n: number) => formatPrice(n, getFormatLocale(locale));
// (blank line — separates logical blocks for readability)
  // Conditional branch — different behavior based on runtime value
  if (items.length === 0 && !orderComplete) {
    // Return JSX — describes UI tree React renders to the DOM
    return (
      // JSX element — HTML-like tag becomes React component in browser
      <div className="mx-auto max-w-7xl px-4 py-20 text-center">
        // JSX element — HTML-like tag becomes React component in browser
        <h1 className="mb-4 font-display text-2xl font-bold">{t('checkout.noItems')}</h1>
        // JSX element — HTML-like tag becomes React component in browser
        <Link href="/shop">
          // JSX element — HTML-like tag becomes React component in browser
          <Button>{t('checkout.goToShop')}</Button>
        // JSX element — HTML-like tag becomes React component in browser
        </Link>
      // JSX element — HTML-like tag becomes React component in browser
      </div>
    // Line 53: );
    );
  // Closing brace — end of block (function, if, object, JSX)
  }
// (blank line — separates logical blocks for readability)
  // Conditional branch — different behavior based on runtime value
  if (orderComplete) {
    // Return JSX — describes UI tree React renders to the DOM
    return (
      // JSX element — HTML-like tag becomes React component in browser
      <div className="mx-auto max-w-lg px-4 py-20 text-center">
        // JSX element — HTML-like tag becomes React component in browser
        <div className="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-brand-50">
          // JSX element — HTML-like tag becomes React component in browser
          <CheckCircle className="h-12 w-12 text-brand-700" />
        // JSX element — HTML-like tag becomes React component in browser
        </div>
        // JSX element — HTML-like tag becomes React component in browser
        <h1 className="mb-2 font-display text-3xl font-bold text-brand-900">
          // Line 63: {t('checkout.orderConfirmed')}
          {t('checkout.orderConfirmed')}
        // JSX element — HTML-like tag becomes React component in browser
        </h1>
        // JSX element — HTML-like tag becomes React component in browser
        <p className="mb-2 text-gray-500">{t('checkout.thankYou')}</p>
        // JSX element — HTML-like tag becomes React component in browser
        <p className="mb-8 text-sm font-medium text-brand-700">
          // Line 67: {t('checkout.orderId', { id: orderId })}
          {t('checkout.orderId', { id: orderId })}
        // JSX element — HTML-like tag becomes React component in browser
        </p>
        // JSX element — HTML-like tag becomes React component in browser
        <div className="flex flex-col gap-3 sm:flex-row sm:justify-center">
          // JSX element — HTML-like tag becomes React component in browser
          <Link href="/account">
            // JSX element — HTML-like tag becomes React component in browser
            <Button variant="primary">{t('checkout.viewOrders')}</Button>
          // JSX element — HTML-like tag becomes React component in browser
          </Link>
          // JSX element — HTML-like tag becomes React component in browser
          <Link href="/shop">
            // JSX element — HTML-like tag becomes React component in browser
            <Button variant="secondary">{t('cart.continueShopping')}</Button>
          // JSX element — HTML-like tag becomes React component in browser
          </Link>
        // JSX element — HTML-like tag becomes React component in browser
        </div>
      // JSX element — HTML-like tag becomes React component in browser
      </div>
    // Line 78: );
    );
  // Closing brace — end of block (function, if, object, JSX)
  }
// (blank line — separates logical blocks for readability)
  // Line 81: const handleSubmit = async (e: React.FormEvent) => {
  const handleSubmit = async (e: React.FormEvent) => {
    // Line 82: e.preventDefault();
    e.preventDefault();
    // Line 83: setIsProcessing(true);
    setIsProcessing(true);
// (blank line — separates logical blocks for readability)
    // Line 85: await new Promise((resolve) => setTimeout(resolve, 1500));
    await new Promise((resolve) => setTimeout(resolve, 1500));
// (blank line — separates logical blocks for readability)
    // Line 87: const newOrderId = `KG-${Date.now().toString(36).toUpperC...
    const newOrderId = `KG-${Date.now().toString(36).toUpperCase()}`;
    // Line 88: const order: Order = {
    const order: Order = {
      // Property or array item — trailing comma allowed in TypeScript
      id: newOrderId,
      // Property or array item — trailing comma allowed in TypeScript
      items: [...items],
      // Property or array item — trailing comma allowed in TypeScript
      total: grandTotal,
      // Property or array item — trailing comma allowed in TypeScript
      status: 'confirmed',
      // Property or array item — trailing comma allowed in TypeScript
      createdAt: new Date().toISOString(),
      // Line 94: deliveryAddress: {
      deliveryAddress: {
        // Property or array item — trailing comma allowed in TypeScript
        street: form.street,
        // Property or array item — trailing comma allowed in TypeScript
        city: form.city,
        // Property or array item — trailing comma allowed in TypeScript
        state: form.state,
        // Property or array item — trailing comma allowed in TypeScript
        zip: form.zip,
      // Closing brace — end of block (function, if, object, JSX)
      },
      // Property or array item — trailing comma allowed in TypeScript
      paymentMethod,
    // Closing brace — end of block (function, if, object, JSX)
    };
// (blank line — separates logical blocks for readability)
    // Line 103: addOrder(order);
    addOrder(order);
    // Line 104: clearCart();
    clearCart();
    // Line 105: setOrderId(newOrderId);
    setOrderId(newOrderId);
    // Line 106: setOrderComplete(true);
    setOrderComplete(true);
    // Line 107: setIsProcessing(false);
    setIsProcessing(false);
  // Closing brace — end of block (function, if, object, JSX)
  };
// (blank line — separates logical blocks for readability)
  // Line 110: const updateField = (field: string, value: string) => {
  const updateField = (field: string, value: string) => {
    // Line 111: setForm((prev) => ({ ...prev, [field]: value }));
    setForm((prev) => ({ ...prev, [field]: value }));
  // Closing brace — end of block (function, if, object, JSX)
  };
// (blank line — separates logical blocks for readability)
  // Return JSX — describes UI tree React renders to the DOM
  return (
    // JSX element — HTML-like tag becomes React component in browser
    <div className="bg-gray-50">
      // JSX element — HTML-like tag becomes React component in browser
      <div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
        // JSX element — HTML-like tag becomes React component in browser
        <Link
          // Link target URL — internal route or external https://
          href="/cart"
          // Tailwind CSS utility classes — styling (colors, spacing, layout)
          className="mb-6 inline-flex items-center gap-1 text-sm font-medium text-gray-500 hover:text-brand-700"
        // Line 120: >
        >
          // JSX element — HTML-like tag becomes React component in browser
          <ChevronLeft className="h-4 w-4 rtl:rotate-180" />
          // Line 122: {t('checkout.backToCart')}
          {t('checkout.backToCart')}
        // JSX element — HTML-like tag becomes React component in browser
        </Link>
// (blank line — separates logical blocks for readability)
        // JSX element — HTML-like tag becomes React component in browser
        <h1 className="section-heading mb-8">{t('checkout.title')}</h1>
// (blank line — separates logical blocks for readability)
        // JSX element — HTML-like tag becomes React component in browser
        <form onSubmit={handleSubmit}>
          // JSX element — HTML-like tag becomes React component in browser
          <div className="grid gap-8 lg:grid-cols-3">
            // JSX element — HTML-like tag becomes React component in browser
            <div className="space-y-6 lg:col-span-2">
              // Line 130: {!isAuthenticated && (
              {!isAuthenticated && (
                // JSX element — HTML-like tag becomes React component in browser
                <div className="card-premium p-6">
                  // JSX element — HTML-like tag becomes React component in browser
                  <p className="text-sm text-gray-600">
                    // Line 133: {t('checkout.haveAccount')}{' '}
                    {t('checkout.haveAccount')}{' '}
                    // JSX element — HTML-like tag becomes React component in browser
                    <Link href="/login" className="font-semibold text-brand-700 hover:underline">
                      // Line 135: {t('checkout.signIn')}
                      {t('checkout.signIn')}
                    // JSX element — HTML-like tag becomes React component in browser
                    </Link>{' '}
                    // Line 137: {t('checkout.fasterCheckout')}
                    {t('checkout.fasterCheckout')}
                  // JSX element — HTML-like tag becomes React component in browser
                  </p>
                // JSX element — HTML-like tag becomes React component in browser
                </div>
              // Line 140: )}
              )}
// (blank line — separates logical blocks for readability)
              // JSX element — HTML-like tag becomes React component in browser
              <div className="card-premium p-6">
                // JSX element — HTML-like tag becomes React component in browser
                <div className="mb-4 flex items-center gap-2">
                  // JSX element — HTML-like tag becomes React component in browser
                  <Truck className="h-5 w-5 text-brand-700" />
                  // JSX element — HTML-like tag becomes React component in browser
                  <h2 className="font-display text-lg font-semibold">
                    // Line 146: {t('checkout.deliveryDetails')}
                    {t('checkout.deliveryDetails')}
                  // JSX element — HTML-like tag becomes React component in browser
                  </h2>
                // JSX element — HTML-like tag becomes React component in browser
                </div>
                // JSX element — HTML-like tag becomes React component in browser
                <div className="grid gap-4 sm:grid-cols-2">
                  // JSX element — HTML-like tag becomes React component in browser
                  <div className="sm:col-span-2">
                    // JSX element — HTML-like tag becomes React component in browser
                    <label className="label-text">{t('checkout.fullName')}</label>
                    // JSX element — HTML-like tag becomes React component in browser
                    <input
                      // Line 153: required
                      required
                      // Tailwind CSS utility classes — styling (colors, spacing, layout)
                      className="input-field"
                      // Line 155: value={form.name}
                      value={form.name}
                      // Change handler — runs when input/select value changes
                      onChange={(e) => updateField('name', e.target.value)}
                    // Line 157: />
                    />
                  // JSX element — HTML-like tag becomes React component in browser
                  </div>
                  // JSX element — HTML-like tag becomes React component in browser
                  <div>
                    // JSX element — HTML-like tag becomes React component in browser
                    <label className="label-text">{t('checkout.email')}</label>
                    // JSX element — HTML-like tag becomes React component in browser
                    <input
                      // Line 162: required
                      required
                      // Line 163: type="email"
                      type="email"
                      // Tailwind CSS utility classes — styling (colors, spacing, layout)
                      className="input-field"
                      // Line 165: value={form.email}
                      value={form.email}
                      // Change handler — runs when input/select value changes
                      onChange={(e) => updateField('email', e.target.value)}
                    // Line 167: />
                    />
                  // JSX element — HTML-like tag becomes React component in browser
                  </div>
                  // JSX element — HTML-like tag becomes React component in browser
                  <div>
                    // JSX element — HTML-like tag becomes React component in browser
                    <label className="label-text">{t('checkout.phone')}</label>
                    // JSX element — HTML-like tag becomes React component in browser
                    <input
                      // Line 172: required
                      required
                      // Line 173: type="tel"
                      type="tel"
                      // Tailwind CSS utility classes — styling (colors, spacing, layout)
                      className="input-field"
                      // Line 175: value={form.phone}
                      value={form.phone}
                      // Change handler — runs when input/select value changes
                      onChange={(e) => updateField('phone', e.target.value)}
                    // Line 177: />
                    />
                  // JSX element — HTML-like tag becomes React component in browser
                  </div>
                  // JSX element — HTML-like tag becomes React component in browser
                  <div className="sm:col-span-2">
                    // JSX element — HTML-like tag becomes React component in browser
                    <label className="label-text">{t('checkout.street')}</label>
                    // JSX element — HTML-like tag becomes React component in browser
                    <input
                      // Line 182: required
                      required
                      // Tailwind CSS utility classes — styling (colors, spacing, layout)
                      className="input-field"
                      // Line 184: value={form.street}
                      value={form.street}
                      // Change handler — runs when input/select value changes
                      onChange={(e) => updateField('street', e.target.value)}
                    // Line 186: />
                    />
                  // JSX element — HTML-like tag becomes React component in browser
                  </div>
                  // JSX element — HTML-like tag becomes React component in browser
                  <div>
                    // JSX element — HTML-like tag becomes React component in browser
                    <label className="label-text">{t('checkout.city')}</label>
                    // JSX element — HTML-like tag becomes React component in browser
                    <input
                      // Line 191: required
                      required
                      // Tailwind CSS utility classes — styling (colors, spacing, layout)
                      className="input-field"
                      // Line 193: value={form.city}
                      value={form.city}
                      // Change handler — runs when input/select value changes
                      onChange={(e) => updateField('city', e.target.value)}
                    // Line 195: />
                    />
                  // JSX element — HTML-like tag becomes React component in browser
                  </div>
                  // JSX element — HTML-like tag becomes React component in browser
                  <div>
                    // JSX element — HTML-like tag becomes React component in browser
                    <label className="label-text">{t('checkout.state')}</label>
                    // JSX element — HTML-like tag becomes React component in browser
                    <input
                      // Line 200: required
                      required
                      // Tailwind CSS utility classes — styling (colors, spacing, layout)
                      className="input-field"
                      // Line 202: value={form.state}
                      value={form.state}
                      // Change handler — runs when input/select value changes
                      onChange={(e) => updateField('state', e.target.value)}
                    // Line 204: />
                    />
                  // JSX element — HTML-like tag becomes React component in browser
                  </div>
                  // JSX element — HTML-like tag becomes React component in browser
                  <div>
                    // JSX element — HTML-like tag becomes React component in browser
                    <label className="label-text">{t('checkout.zip')}</label>
                    // JSX element — HTML-like tag becomes React component in browser
                    <input
                      // Line 209: required
                      required
                      // Tailwind CSS utility classes — styling (colors, spacing, layout)
                      className="input-field"
                      // Line 211: value={form.zip}
                      value={form.zip}
                      // Change handler — runs when input/select value changes
                      onChange={(e) => updateField('zip', e.target.value)}
                    // Line 213: />
                    />
                  // JSX element — HTML-like tag becomes React component in browser
                  </div>
                // JSX element — HTML-like tag becomes React component in browser
                </div>
              // JSX element — HTML-like tag becomes React component in browser
              </div>
// (blank line — separates logical blocks for readability)
              // JSX element — HTML-like tag becomes React component in browser
              <div className="card-premium p-6">
                // JSX element — HTML-like tag becomes React component in browser
                <div className="mb-4 flex items-center gap-2">
                  // JSX element — HTML-like tag becomes React component in browser
                  <CreditCard className="h-5 w-5 text-brand-700" />
                  // JSX element — HTML-like tag becomes React component in browser
                  <h2 className="font-display text-lg font-semibold">{t('checkout.payment')}</h2>
                // JSX element — HTML-like tag becomes React component in browser
                </div>
// (blank line — separates logical blocks for readability)
                // JSX element — HTML-like tag becomes React component in browser
                <div className="mb-4 flex gap-3">
                  // Array.map — transform each item (often render a list of components)
                  {['card', 'cod'].map((method) => (
                    // JSX element — HTML-like tag becomes React component in browser
                    <button
                      // Line 227: key={method}
                      key={method}
                      // Line 228: type="button"
                      type="button"
                      // Click handler — runs when user clicks (must be client component)
                      onClick={() => setPaymentMethod(method)}
                      // Tailwind CSS utility classes — styling (colors, spacing, layout)
                      className={`rounded-lg border-2 px-4 py-2 text-sm font-medium transition-all ${
                        // Line 231: paymentMethod === method
                        paymentMethod === method
                          // Line 232: ? 'border-brand-700 bg-brand-700 text-white'
                          ? 'border-brand-700 bg-brand-700 text-white'
                          // Line 233: : 'border-gray-200 text-gray-600 hover:border-brand-300'
                          : 'border-gray-200 text-gray-600 hover:border-brand-300'
                      // Closing brace — end of block (function, if, object, JSX)
                      }`}
                    // Line 235: >
                    >
                      // Line 236: {method === 'card'
                      {method === 'card'
                        // Line 237: ? t('checkout.creditCard')
                        ? t('checkout.creditCard')
                        // Line 238: : t('checkout.cashOnDelivery')}
                        : t('checkout.cashOnDelivery')}
                    // JSX element — HTML-like tag becomes React component in browser
                    </button>
                  // Line 240: ))}
                  ))}
                // JSX element — HTML-like tag becomes React component in browser
                </div>
// (blank line — separates logical blocks for readability)
                // Line 243: {paymentMethod === 'card' && (
                {paymentMethod === 'card' && (
                  // JSX element — HTML-like tag becomes React component in browser
                  <div className="grid gap-4 sm:grid-cols-2">
                    // JSX element — HTML-like tag becomes React component in browser
                    <div className="sm:col-span-2">
                      // JSX element — HTML-like tag becomes React component in browser
                      <label className="label-text">{t('checkout.cardNumber')}</label>
                      // JSX element — HTML-like tag becomes React component in browser
                      <input
                        // Line 248: required
                        required
                        // Tailwind CSS utility classes — styling (colors, spacing, layout)
                        className="input-field"
                        // Line 250: placeholder="1234 5678 9012 3456"
                        placeholder="1234 5678 9012 3456"
                        // Line 251: value={form.cardNumber}
                        value={form.cardNumber}
                        // Change handler — runs when input/select value changes
                        onChange={(e) => updateField('cardNumber', e.target.value)}
                      // Line 253: />
                      />
                    // JSX element — HTML-like tag becomes React component in browser
                    </div>
                    // JSX element — HTML-like tag becomes React component in browser
                    <div>
                      // JSX element — HTML-like tag becomes React component in browser
                      <label className="label-text">{t('checkout.expiry')}</label>
                      // JSX element — HTML-like tag becomes React component in browser
                      <input
                        // Line 258: required
                        required
                        // Tailwind CSS utility classes — styling (colors, spacing, layout)
                        className="input-field"
                        // Line 260: placeholder="MM/YY"
                        placeholder="MM/YY"
                        // Line 261: value={form.expiry}
                        value={form.expiry}
                        // Change handler — runs when input/select value changes
                        onChange={(e) => updateField('expiry', e.target.value)}
                      // Line 263: />
                      />
                    // JSX element — HTML-like tag becomes React component in browser
                    </div>
                    // JSX element — HTML-like tag becomes React component in browser
                    <div>
                      // JSX element — HTML-like tag becomes React component in browser
                      <label className="label-text">{t('checkout.cvv')}</label>
                      // JSX element — HTML-like tag becomes React component in browser
                      <input
                        // Line 268: required
                        required
                        // Tailwind CSS utility classes — styling (colors, spacing, layout)
                        className="input-field"
                        // Line 270: placeholder="123"
                        placeholder="123"
                        // Line 271: value={form.cvv}
                        value={form.cvv}
                        // Change handler — runs when input/select value changes
                        onChange={(e) => updateField('cvv', e.target.value)}
                      // Line 273: />
                      />
                    // JSX element — HTML-like tag becomes React component in browser
                    </div>
                  // JSX element — HTML-like tag becomes React component in browser
                  </div>
                // Line 276: )}
                )}
              // JSX element — HTML-like tag becomes React component in browser
              </div>
            // JSX element — HTML-like tag becomes React component in browser
            </div>
// (blank line — separates logical blocks for readability)
            // JSX element — HTML-like tag becomes React component in browser
            <div>
              // JSX element — HTML-like tag becomes React component in browser
              <div className="card-premium sticky top-24 p-6">
                // JSX element — HTML-like tag becomes React component in browser
                <h2 className="mb-4 font-display text-lg font-semibold">
                  // Line 283: {t('cart.orderSummary')}
                  {t('cart.orderSummary')}
                // JSX element — HTML-like tag becomes React component in browser
                </h2>
// (blank line — separates logical blocks for readability)
                // JSX element — HTML-like tag becomes React component in browser
                <div className="mb-4 max-h-60 space-y-3 overflow-y-auto">
                  // Array.map — transform each item (often render a list of components)
                  {items.map((item) => {
                    // Line 288: const localized = localizeProduct(item.product, t);
                    const localized = localizeProduct(item.product, t);
                    // Return JSX — describes UI tree React renders to the DOM
                    return (
                      // JSX element — HTML-like tag becomes React component in browser
                      <div key={item.id} className="flex gap-3">
                        // JSX element — HTML-like tag becomes React component in browser
                        <div className="relative h-12 w-12 shrink-0 overflow-hidden rounded-lg">
                          // JSX element — HTML-like tag becomes React component in browser
                          <AppImage
                            // Line 293: src={item.product.image}
                            src={item.product.image}
                            // Line 294: alt={localized.name}
                            alt={localized.name}
                            // Line 295: fill
                            fill
                            // Tailwind CSS utility classes — styling (colors, spacing, layout)
                            className="object-cover"
                            // Line 297: sizes="48px"
                            sizes="48px"
                          // Line 298: />
                          />
                        // JSX element — HTML-like tag becomes React component in browser
                        </div>
                        // JSX element — HTML-like tag becomes React component in browser
                        <div className="flex-1">
                          // JSX element — HTML-like tag becomes React component in browser
                          <p className="text-sm font-medium text-brand-900">
                            // Line 302: {localized.name}
                            {localized.name}
                          // JSX element — HTML-like tag becomes React component in browser
                          </p>
                          // JSX element — HTML-like tag becomes React component in browser
                          <p className="text-xs text-gold-700">
                            // Line 305: {item.customizationLabel}
                            {item.customizationLabel}
                          // JSX element — HTML-like tag becomes React component in browser
                          </p>
                          // JSX element — HTML-like tag becomes React component in browser
                          <p className="text-xs text-gray-400">
                            // Line 308: {t('checkout.qty', { count: item.quantity })}
                            {t('checkout.qty', { count: item.quantity })}
                          // JSX element — HTML-like tag becomes React component in browser
                          </p>
                        // JSX element — HTML-like tag becomes React component in browser
                        </div>
                        // JSX element — HTML-like tag becomes React component in browser
                        <span className="text-sm font-medium">
                          // Line 312: {fmt(item.product.price * item.quantity)}
                          {fmt(item.product.price * item.quantity)}
                        // JSX element — HTML-like tag becomes React component in browser
                        </span>
                      // JSX element — HTML-like tag becomes React component in browser
                      </div>
                    // Line 315: );
                    );
                  // Closing brace — end of block (function, if, object, JSX)
                  })}
                // JSX element — HTML-like tag becomes React component in browser
                </div>
// (blank line — separates logical blocks for readability)
                // JSX element — HTML-like tag becomes React component in browser
                <div className="space-y-2 border-t border-gray-100 pt-4">
                  // JSX element — HTML-like tag becomes React component in browser
                  <div className="flex justify-between text-sm">
                    // JSX element — HTML-like tag becomes React component in browser
                    <span className="text-gray-500">{t('cart.subtotal')}</span>
                    // JSX element — HTML-like tag becomes React component in browser
                    <span>{fmt(total)}</span>
                  // JSX element — HTML-like tag becomes React component in browser
                  </div>
                  // JSX element — HTML-like tag becomes React component in browser
                  <div className="flex justify-between text-sm">
                    // JSX element — HTML-like tag becomes React component in browser
                    <span className="text-gray-500">{t('cart.delivery')}</span>
                    // JSX element — HTML-like tag becomes React component in browser
                    <span>
                      // Line 327: {deliveryFee === 0 ? t('cart.free') : fmt(deliveryFee)}
                      {deliveryFee === 0 ? t('cart.free') : fmt(deliveryFee)}
                    // JSX element — HTML-like tag becomes React component in browser
                    </span>
                  // JSX element — HTML-like tag becomes React component in browser
                  </div>
                  // JSX element — HTML-like tag becomes React component in browser
                  <div className="flex justify-between pt-2 text-lg font-bold">
                    // JSX element — HTML-like tag becomes React component in browser
                    <span>{t('cart.total')}</span>
                    // JSX element — HTML-like tag becomes React component in browser
                    <span className="text-brand-800">{fmt(grandTotal)}</span>
                  // JSX element — HTML-like tag becomes React component in browser
                  </div>
                // JSX element — HTML-like tag becomes React component in browser
                </div>
// (blank line — separates logical blocks for readability)
                // JSX element — HTML-like tag becomes React component in browser
                <Button
                  // Line 337: type="submit"
                  type="submit"
                  // Line 338: variant="gold"
                  variant="gold"
                  // Line 339: size="lg"
                  size="lg"
                  // Tailwind CSS utility classes — styling (colors, spacing, layout)
                  className="mt-6 w-full"
                  // Line 341: disabled={isProcessing}
                  disabled={isProcessing}
                // Line 342: >
                >
                  // JSX element — HTML-like tag becomes React component in browser
                  <Lock className="h-4 w-4" />
                  // Line 344: {isProcessing
                  {isProcessing
                    // Line 345: ? t('checkout.processing')
                    ? t('checkout.processing')
                    // Line 346: : t('checkout.pay', { amount: fmt(grandTotal) })}
                    : t('checkout.pay', { amount: fmt(grandTotal) })}
                // JSX element — HTML-like tag becomes React component in browser
                </Button>
// (blank line — separates logical blocks for readability)
                // JSX element — HTML-like tag becomes React component in browser
                <p className="mt-3 flex items-center justify-center gap-1 text-xs text-gray-400">
                  // JSX element — HTML-like tag becomes React component in browser
                  <Lock className="h-3 w-3" />
                  // Line 351: {t('checkout.secure')}
                  {t('checkout.secure')}
                // JSX element — HTML-like tag becomes React component in browser
                </p>
              // JSX element — HTML-like tag becomes React component in browser
              </div>
            // JSX element — HTML-like tag becomes React component in browser
            </div>
          // JSX element — HTML-like tag becomes React component in browser
          </div>
        // JSX element — HTML-like tag becomes React component in browser
        </form>
      // JSX element — HTML-like tag becomes React component in browser
      </div>
    // JSX element — HTML-like tag becomes React component in browser
    </div>
  // Line 359: );
  );
// Closing brace — end of block (function, if, object, JSX)
}
