astryx-dracula 0.2.0 → 0.3.0

package/templates/payment-form.tsx

@@ -1,4 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
+// XLE (canonical structure, validated with `bunx astryx layout check`):
+//   L > LC[p=0] > Ctr > S.transparent[p=6 mw=1100] > V[g=5] > (V[g=6] > (V[g=2] > (Hd"Payment Request"[level=1 t=display-2] + Tx"Review your order"[t=body]) + D) + H[g=8] > (SI > V[g=8] > (V[g=1] > (H[j=between] > (Hd"Sign in to check out"[level=2] + B"Sign in") + Tx"Sign in to track your order"[t=body]) + V[g=3] > (Hd"Contact information"[level=2] + TI"Email" + CB"Email offers") + V[g=3] > (Hd"Shipping information"[level=2] + G[c=2 g=3] > (TI"First Name" + TI"Last Name") + TI"Address" + G[c=2 g=3] > (TI"City" + TI"ZIP Code") + SE"State" + TI"Phone Number" + CB"Save information") + V[g=3] > (V[g=1] > (Hd"Delivery"[level=2] + Tx"Processing time"[t=body]) + RL"Delivery method" > RLI*2) + V[g=3] > (V[g=1] > (Hd"Payment method"[level=2] + Tx"Encrypted"[t=body]) + G[c=2 g=3] > (B"PayPal" + B"Google Pay") + D"Or pay with card" + TI"Card Number" + G[c=3 g=3] > (SE"Expiry Month" + SE"Expiry Year" + TI"CVC") + TI"Name on Card" + CB"Billing address") + V[g=3] > (Hd"Promo code"[level=2] + H[g=2] > (TI"Promo code" + B"Apply")) + V[g=3] > (Hd"Gift options"[level=2] + CB"Gift message" + TA"Gift message") + V[g=4] > (H[g=5] > (H[g=1] > (Ic + Tx))*3 + V[g=2] > (B"Place order"[primary] + B"Continue shopping") + D + H[g=4] > (Lk"Refund policy" + Lk"Privacy policy" + Lk"Terms" + Lk"Cancellations"))) + SI > C[p=4] > Col"Order Summary" > V[g=4] > (V[g=3] > V[g=3] > (H[g=3] > (Tmb + V[g=1] > (Tx"Obsidian Ritual Chalice" + Tx"Hand-carved"[t=supporting])) + D)*3 + V[g=3] > (Hd"Order Total"[level=3] + H[j=between] > (Tx"Subtotal" + Tx"$91.20") + D + H[j=between] > (Tx"Total"[t=large] + Tx"$91.20"[t=large]) + Bn"Free shipping over $300"))))
 
 import {useState, type CSSProperties} from 'react';
 import {
@@ -11,7 +13,7 @@ import {
 } from '@astryxdesign/core/Layout';
 import {Grid} from '@astryxdesign/core/Grid';
 import {Button} from '@astryxdesign/core/Button';
-import {Text} from '@astryxdesign/core/Text';
+import {Text, Heading} from '@astryxdesign/core/Text';
 import {TextInput} from '@astryxdesign/core/TextInput';
 import {Selector} from '@astryxdesign/core/Selector';
 import {CheckboxInput} from '@astryxdesign/core/CheckboxInput';
@@ -21,13 +23,14 @@ import {TextArea} from '@astryxdesign/core/TextArea';
 import {Divider} from '@astryxdesign/core/Divider';
 import {Banner} from '@astryxdesign/core/Banner';
 import {Card} from '@astryxdesign/core/Card';
+import {type SceneHue} from 'astryx-dracula/shared/scene-hues';
+import {SceneTile} from 'astryx-dracula/shared/scene-tile';
 import {Collapsible} from '@astryxdesign/core/Collapsible';
-import {Badge} from '@astryxdesign/core/Badge';
+import {StatusDot} from '@astryxdesign/core/StatusDot';
 import {NumberInput} from '@astryxdesign/core/NumberInput';
 import {useMediaQuery} from '@astryxdesign/core/hooks';
 import {Section} from '@astryxdesign/core/Section';
 import {Center} from '@astryxdesign/core/Center';
-import {Thumbnail} from '@astryxdesign/core/Thumbnail';
 import {Icon} from '@astryxdesign/core/Icon';
 import {ShieldCheck, Lock, CircleCheck, Truck} from 'lucide-react';
 
@@ -102,18 +105,14 @@ const US_STATES = [
   'Wyoming',
 ];
 
-// Product photos from the local template-assets set (committed to the
-// docsite; the CLI swaps these for an inline placeholder on scaffold).
-const ITEM_IMAGES: Record<string, {src: string}> = {
-  '1': {
-    src: 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%20300%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%3E%3Crect%20width%3D%22400%22%20height%3D%22300%22%20fill%3D%22%2321222C%22%2F%3E%3Cg%20transform%3D%22translate%28200%20150%29%22%20fill%3D%22none%22%20stroke%3D%22%236272A4%22%20stroke-width%3D%225%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%22-44%22%20y%3D%22-44%22%20width%3D%2288%22%20height%3D%2288%22%20rx%3D%2216%22%2F%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%22-18%22%20r%3D%222.5%22%20fill%3D%22%236272A4%22%20stroke%3D%22none%22%2F%3E%3Cpath%20d%3D%22M-34%2030%20L-8%200%20L10%2018%20L20%208%20L34%2024%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E',
-  },
-  '2': {
-    src: 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%20300%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%3E%3Crect%20width%3D%22400%22%20height%3D%22300%22%20fill%3D%22%2321222C%22%2F%3E%3Cg%20transform%3D%22translate%28200%20150%29%22%20fill%3D%22none%22%20stroke%3D%22%236272A4%22%20stroke-width%3D%225%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%22-44%22%20y%3D%22-44%22%20width%3D%2288%22%20height%3D%2288%22%20rx%3D%2216%22%2F%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%22-18%22%20r%3D%222.5%22%20fill%3D%22%236272A4%22%20stroke%3D%22none%22%2F%3E%3Cpath%20d%3D%22M-34%2030%20L-8%200%20L10%2018%20L20%208%20L34%2024%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E',
-  },
-  '3': {
-    src: 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%20300%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%3E%3Crect%20width%3D%22400%22%20height%3D%22300%22%20fill%3D%22%2321222C%22%2F%3E%3Cg%20transform%3D%22translate%28200%20150%29%22%20fill%3D%22none%22%20stroke%3D%22%236272A4%22%20stroke-width%3D%225%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%22-44%22%20y%3D%22-44%22%20width%3D%2288%22%20height%3D%2288%22%20rx%3D%2216%22%2F%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%22-18%22%20r%3D%222.5%22%20fill%3D%22%236272A4%22%20stroke%3D%22none%22%2F%3E%3Cpath%20d%3D%22M-34%2030%20L-8%200%20L10%2018%20L20%208%20L34%2024%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E',
-  },
+// One Dracula accent per line item, from the fixed categorical vocabulary.
+// Art lives in shared/scene-tile (lg fork: centered glyph on a flat field), so
+// this map is typed `SceneHue`. `Record<string, string>` let any caller slip
+// purple through to a scene; the union is what stops the next one.
+const ITEM_HUES: Record<string, SceneHue> = {
+  '1': 'var(--dracula-cyan)',
+  '2': 'var(--dracula-pink)',
+  '3': 'var(--dracula-yellow)',
 };
 
 const ORDER_ITEMS = [
@@ -165,19 +164,15 @@ const summarySticky: CSSProperties = {
 };
 // On mobile the summary moves above the form.
 const summaryMobileOrder: CSSProperties = {order: -1};
-// Express-checkout buttons (Dracula tokens stand in for brand colors).
-const paypalButton: CSSProperties = {
-  backgroundColor: 'var(--color-warning)',
-  borderColor: 'var(--color-warning)',
+// Line-item photo: fixed square frame; art lives in shared/scene-tile
+// (lg fork). Astryx has no Image primitive (#2582), so the tile is inline
+// SVG on brand tokens instead of a data-URI bitmap with baked-in hex.
+const itemPhotoFrame: CSSProperties = {
+  width: 'var(--spacing-10)',
+  height: 'var(--spacing-10)',
+  overflow: 'clip',
+  flexShrink: 0,
 };
-// Google Pay button: widget-surface token stands in for the official dark
-// button background (no raw hex on brand surfaces).
-const gpayButton: CSSProperties = {
-  backgroundColor: 'var(--color-widget-background)',
-  borderColor: 'var(--color-widget-background)',
-};
-// Brand logos inside the express-checkout buttons.
-const brandLogo: CSSProperties = {height: 'var(--spacing-5)', width: 'auto'};
 // Accepted card-network marks (Visa/Mastercard/Amex), shared style.
 const cardLogo: CSSProperties = {
   height: 'var(--spacing-7)',
@@ -185,12 +180,231 @@ const cardLogo: CSSProperties = {
   borderRadius: 'var(--radius-element)',
   borderWidth: 'var(--border-width)',
   borderStyle: 'solid',
-  borderColor: 'var(--color-border)',
+  borderColor: 'var(--color-separator)',
   backgroundColor: 'var(--color-background-surface)',
 };
 
+function OrderItemPhoto({item}: {item: (typeof ORDER_ITEMS)[number]}) {
+  return (
+    <Card padding={0} style={itemPhotoFrame}>
+      <SceneTile label={item.name} hue={ITEM_HUES[item.id]} size="lg" />
+    </Card>
+  );
+}
+
+function OrderLineItem({
+  item,
+  qty,
+  onChangeQty,
+}: {
+  item: (typeof ORDER_ITEMS)[number];
+  qty: number;
+  onChangeQty: (v: number) => void;
+}) {
+  return (
+    <VStack gap={3}>
+      <HStack gap={3} vAlign="start">
+        <OrderItemPhoto item={item} />
+        <StackItem size="fill">
+          <VStack gap={1}>
+            <HStack gap={2} hAlign="between" vAlign="start">
+              <HStack gap={2} vAlign="center" wrap="wrap">
+                <Text type="body" weight="semibold">
+                  {item.name}
+                </Text>
+                {item.limited && (
+                  <HStack gap={1} vAlign="center">
+                    <StatusDot variant="warning" label="Limited edition" />
+                    <Text type="supporting" color="secondary">
+                      Limited edition
+                    </Text>
+                  </HStack>
+                )}
+              </HStack>
+              <Text type="body" hasTabularNumbers>
+                {fmt(item.price)}
+              </Text>
+            </HStack>
+            <Text type="supporting" color="secondary">
+              {item.variant}
+            </Text>
+            <HStack gap={2} vAlign="end" wrap="wrap">
+              <NumberInput
+                label="Qty"
+                value={qty}
+                onChange={onChangeQty}
+                min={1}
+                max={10}
+                isIntegerOnly
+              />
+              <Link href={SELF_HREF} type="supporting">
+                Remove
+              </Link>
+              <Link href={SELF_HREF} type="supporting">
+                Save
+              </Link>
+            </HStack>
+          </VStack>
+        </StackItem>
+      </HStack>
+      <Divider />
+    </VStack>
+  );
+}
+
+function OrderSummaryCard({
+  quantities,
+  onChangeQty,
+  subtotal,
+  shipping,
+  tax,
+  total,
+}: {
+  quantities: Record<string, number>;
+  onChangeQty: (id: string, v: number) => void;
+  subtotal: number;
+  shipping: number;
+  tax: number;
+  total: number;
+}) {
+  return (
+    <Card padding={4}>
+      <VStack gap={4}>
+        {/* Accordion header — clickable on mobile only */}
+        <Collapsible trigger="Order Summary" defaultIsOpen={true}>
+          <VStack gap={4} style={summaryContent}>
+            {ORDER_ITEMS.map(item => (
+              <OrderLineItem
+                key={item.id}
+                item={item}
+                qty={quantities[item.id] ?? item.qty}
+                onChangeQty={v => onChangeQty(item.id, v)}
+              />
+            ))}
+            <OrderTotalSection
+              subtotal={subtotal}
+              shipping={shipping}
+              tax={tax}
+              total={total}
+            />
+          </VStack>
+        </Collapsible>
+      </VStack>
+    </Card>
+  );
+}
+
+function OrderTotalSection({
+  subtotal,
+  shipping,
+  tax,
+  total,
+}: {
+  subtotal: number;
+  shipping: number;
+  tax: number;
+  total: number;
+}) {
+  return (
+    <VStack gap={3}>
+      <Heading level={3}>Order Total</Heading>
+      <VStack gap={2}>
+        <HStack hAlign="between" vAlign="center">
+          <Text type="body" color="secondary">
+            Subtotal
+          </Text>
+          <Text type="body" hasTabularNumbers>
+            {fmt(subtotal)}
+          </Text>
+        </HStack>
+        <HStack hAlign="between" vAlign="center">
+          <Text type="body" color="secondary">
+            Shipping
+          </Text>
+          <Text type="body" hasTabularNumbers>
+            {fmt(shipping)}
+          </Text>
+        </HStack>
+        <HStack hAlign="between" vAlign="center">
+          <Text type="body" color="secondary">
+            Tax
+          </Text>
+          <Text type="body" hasTabularNumbers>
+            {fmt(tax)}
+          </Text>
+        </HStack>
+      </VStack>
+      <Divider />
+      <HStack hAlign="between" vAlign="center">
+        <Text type="large">
+          Total
+        </Text>
+        <Text type="large" hasTabularNumbers>
+          {fmt(total)}
+        </Text>
+      </HStack>
+      <Banner
+        status="info"
+        icon={<Icon icon={Truck} size="sm" />}
+        title="Free shipping on orders over $300"
+      />
+    </VStack>
+  );
+}
+
+const TRUST_ITEMS: Array<{icon: typeof ShieldCheck; label: string}> = [
+  {icon: ShieldCheck, label: 'Secure Payment'},
+  {icon: Lock, label: 'SSL Encrypted'},
+  {icon: CircleCheck, label: 'Free Returns'},
+];
+
+const SELF_HREF = '#/templates/payment-form';
+
+const POLICY_LINKS = [
+  'Refund policy',
+  'Privacy policy',
+  'Terms of service',
+  'Cancellations',
+];
+
+function TrustBar() {
+  return (
+    <HStack gap={5} hAlign="center" wrap="wrap">
+      {TRUST_ITEMS.map(item => (
+        <HStack key={item.label} gap={1} vAlign="center">
+          <Icon icon={item.icon} size="sm" color="secondary" />
+          <Text type="supporting" color="secondary">
+            {item.label}
+          </Text>
+        </HStack>
+      ))}
+    </HStack>
+  );
+}
+
+function PolicyLinks() {
+  return (
+    <HStack gap={4} vAlign="center" wrap="wrap">
+      {POLICY_LINKS.map(label => (
+        <Link key={label} href={SELF_HREF} type="supporting">
+          {label}
+        </Link>
+      ))}
+    </HStack>
+  );
+}
+
 export default function PaymentForm() {
-  const isMobile = useMediaQuery('(max-width: 767px)');
+  // 768, not 767: eight sibling templates gate the same collapse at exactly
+  // 768 (`documentation-design.tsx:568`, `documentation-technical.tsx:61`,
+  // `editor.tsx:640`, `file-explorer.tsx:375`, `ide.tsx:244`,
+  // `settings-sidebar.tsx:127`, `settings.tsx:79`, `messaging-shell.tsx:393`),
+  // and this file's own second query below is 1024. At 767 this was the only
+  // off-by-one in the set, so at exactly a 768px viewport `isMobile` was
+  // false while `isStacked` was true: the outer Stack had already gone
+  // vertical (`:514`) and all six `columns={isMobile ? 1 : N}` grids below
+  // stayed wide inside it, including the 3-column expiry row at `:821`.
+  const isMobile = useMediaQuery('(max-width: 768px)');
   const isStacked = useMediaQuery('(max-width: 1024px)');
   const [firstName, setFirstName] = useState('');
   const [lastName, setLastName] = useState('');
@@ -292,9 +506,9 @@ export default function PaymentForm() {
                 {/* Page header */}
                 <VStack gap={6}>
                   <VStack gap={2}>
-                    <Text type="display-1" as="h1">
+                    <Heading level={1} type="display-2">
                       Payment Request
-                    </Text>
+                    </Heading>
                     <Text type="body" color="secondary">
                       Review your order and complete your purchase. All
                       transactions are sealed with 256-bit SSL encryption.
@@ -314,13 +528,11 @@ export default function PaymentForm() {
                       {/* Sign in */}
                       <VStack gap={1}>
                         <HStack gap={2} hAlign="between" vAlign="center">
-                          <Text type="large" weight="bold">
-                            Sign in to check out
-                          </Text>
+                          <Heading level={2}>Sign in to check out</Heading>
                           <Button
-                            label="Sign In"
+                            label="Sign in"
                             variant="secondary"
-                            size="sm"
+                            
                             onClick={() => {}}
                           />
                         </HStack>
@@ -332,13 +544,12 @@ export default function PaymentForm() {
 
                       {/* Contact Information */}
                       <VStack gap={3}>
-                        <Text type="large" weight="bold">
-                          Contact Information
-                        </Text>
+                        <Heading level={2}>Contact information</Heading>
                         <TextInput
                           size="lg"
                           label="Email"
-                          placeholder="you@example.com"
+                          isRequired
+                          placeholder="you@castle.dracula"
                           value={email}
                           onChange={setEmail}
                           status={
@@ -356,14 +567,13 @@ export default function PaymentForm() {
 
                       {/* Shipping Information */}
                       <VStack gap={3}>
-                        <Text type="large" weight="bold">
-                          Shipping Information
-                        </Text>
+                        <Heading level={2}>Shipping information</Heading>
                         <Grid columns={isMobile ? 1 : 2} gap={3}>
                           <TextInput
                             size="lg"
                             label="First Name"
-                            placeholder="John"
+                            isRequired
+                            placeholder="Vlad"
                             value={firstName}
                             onChange={setFirstName}
                             status={
@@ -375,7 +585,8 @@ export default function PaymentForm() {
                           <TextInput
                             size="lg"
                             label="Last Name"
-                            placeholder="Doe"
+                            isRequired
+                            placeholder="Dracul"
                             value={lastName}
                             onChange={setLastName}
                             status={
@@ -388,7 +599,8 @@ export default function PaymentForm() {
                         <TextInput
                           size="lg"
                           label="Address"
-                          placeholder="123 Main Street"
+                          isRequired
+                          placeholder="666 Castle Way"
                           value={address}
                           onChange={setAddress}
                           status={
@@ -401,7 +613,8 @@ export default function PaymentForm() {
                           <TextInput
                             size="lg"
                             label="City"
-                            placeholder="New York"
+                            isRequired
+                            placeholder="Transylvania"
                             value={city}
                             onChange={setCity}
                             status={
@@ -413,7 +626,8 @@ export default function PaymentForm() {
                           <TextInput
                             size="lg"
                             label="ZIP Code"
-                            placeholder="10001"
+                            isRequired
+                            placeholder="40000"
                             value={zip}
                             onChange={setZip}
                             status={
@@ -426,6 +640,7 @@ export default function PaymentForm() {
                         <Selector
                           size="lg"
                           label="State"
+                          isRequired
                           placeholder="Select state"
                           options={US_STATES}
                           value={state}
@@ -439,6 +654,7 @@ export default function PaymentForm() {
                         <TextInput
                           size="lg"
                           label="Phone Number"
+                          isRequired
                           placeholder="+1 (555) 123-4567"
                           value={phone}
                           onChange={setPhone}
@@ -459,9 +675,7 @@ export default function PaymentForm() {
                       {/* Delivery */}
                       <VStack gap={3}>
                         <VStack gap={1}>
-                          <Text type="large" weight="bold">
-                            Delivery
-                          </Text>
+                          <Heading level={2}>Delivery</Heading>
                           <Text type="body" color="secondary">
                             Please allow 1–3 business days processing time
                             before your order ships.
@@ -477,7 +691,7 @@ export default function PaymentForm() {
                             endContent={
                               <Text
                                 type="body"
-                                weight="medium"
+                                weight="semibold"
                                 hasTabularNumbers>
                                 $4.95
                               </Text>
@@ -489,7 +703,7 @@ export default function PaymentForm() {
                             endContent={
                               <Text
                                 type="body"
-                                weight="medium"
+                                weight="semibold"
                                 hasTabularNumbers>
                                 $9.95
                               </Text>
@@ -501,9 +715,7 @@ export default function PaymentForm() {
                       {/* Payment Method */}
                       <VStack gap={3}>
                         <VStack gap={1}>
-                          <Text type="large" weight="bold">
-                            Payment Method
-                          </Text>
+                          <Heading level={2}>Payment method</Heading>
                           <Text type="body" color="secondary">
                             All transactions are secure and encrypted.
                           </Text>
@@ -515,68 +727,95 @@ export default function PaymentForm() {
                             {/* PayPal */}
                             <Button
                               label="PayPal"
-                              variant="primary"
+                              variant="secondary"
                               size="lg"
                               onClick={() => {}}
-                              style={paypalButton}>
-                              <img
-                                src="https://www.paypalobjects.com/webstatic/mktg/Logo/pp-logo-100px.png"
-                                alt="PayPal"
-                                style={brandLogo}
-                              />
-                            </Button>
+                            />
                             {/* Google Pay */}
                             <Button
                               label="Google Pay"
-                              variant="primary"
+                              variant="secondary"
                               size="lg"
                               onClick={() => {}}
-                              style={gpayButton}>
-                              <img
-                                src="https://pay.google.com/about/static_kcs/images/logos/google-pay-logo.svg"
-                                alt="Google Pay"
-                                style={brandLogo}
-                              />
-                            </Button>
+                            />
                           </Grid>
                         </VStack>
 
-                        {/* OR divider */}
-                        <HStack gap={3} vAlign="center">
-                          <StackItem size="fill">
-                            <Divider />
-                          </StackItem>
-                          <Text type="supporting" color="secondary">
-                            OR
-                          </Text>
-                          <StackItem size="fill">
-                            <Divider />
-                          </StackItem>
-                        </HStack>
+                        <Divider label="Or pay with card" />
 
                         {/* Credit card fields */}
                         <VStack gap={3}>
-                          {/* Card type icons */}
+                          {/* Card type icons — inline Dracula marks on
+                              brand tokens; no vendor hotlinks. */}
                           <HStack gap={1.5} vAlign="center">
-                            <img
-                              src="https://raw.githubusercontent.com/aaronfagan/svg-credit-card-payment-icons/main/flat/visa.svg"
-                              alt="Visa"
-                              style={cardLogo}
-                            />
-                            <img
-                              src="https://raw.githubusercontent.com/aaronfagan/svg-credit-card-payment-icons/main/flat/mastercard.svg"
-                              alt="Mastercard"
-                              style={cardLogo}
-                            />
-                            <img
-                              src="https://raw.githubusercontent.com/aaronfagan/svg-credit-card-payment-icons/main/flat/amex.svg"
-                              alt="Amex"
-                              style={cardLogo}
-                            />
+                            <svg
+                              viewBox="0 0 48 32"
+                              role="img"
+                              aria-label="Visa"
+                              style={cardLogo}>
+                              <rect
+                                width="48"
+                                height="32"
+                                fill="var(--color-background-surface)"
+                              />
+                              <text
+                                x="24"
+                                y="21"
+                                textAnchor="middle"
+                                fontSize="10"
+                                fontStyle="italic"
+                                fill="var(--dracula-comment)">
+                                VISA
+                              </text>
+                            </svg>
+                            <svg
+                              viewBox="0 0 48 32"
+                              role="img"
+                              aria-label="Mastercard"
+                              style={cardLogo}>
+                              <rect
+                                width="48"
+                                height="32"
+                                fill="var(--color-background-surface)"
+                              />
+                              <circle
+                                cx="19"
+                                cy="16"
+                                r="8"
+                                fill="var(--dracula-red)"
+                              />
+                              <circle
+                                cx="29"
+                                cy="16"
+                                r="8"
+                                fill="var(--dracula-orange)"
+                                opacity={0.85}
+                              />
+                            </svg>
+                            <svg
+                              viewBox="0 0 48 32"
+                              role="img"
+                              aria-label="Amex"
+                              style={cardLogo}>
+                              <rect
+                                width="48"
+                                height="32"
+                                fill="var(--color-background-surface)"
+                              />
+                              <text
+                                x="24"
+                                y="21"
+                                textAnchor="middle"
+                                fontSize="10"
+                                fill="var(--dracula-cyan)">
+                                AMEX
+                              </text>
+                            </svg>
                           </HStack>
                           <TextInput
                             size="lg"
                             label="Card Number"
+                            isRequired
                             placeholder="1234 5678 9012 3456"
                             value={cardNumber}
                             onChange={setCardNumber}
@@ -590,6 +829,7 @@ export default function PaymentForm() {
                             <Selector
                               size="lg"
                               label="Expiry Month"
+                              isRequired
                               placeholder="MM"
                               options={MONTHS}
                               value={expiry}
@@ -603,6 +843,7 @@ export default function PaymentForm() {
                             <Selector
                               size="lg"
                               label="Expiry Year"
+                              isRequired
                               placeholder="YY"
                               options={YEARS}
                               value={expYear}
@@ -616,6 +857,7 @@ export default function PaymentForm() {
                             <TextInput
                               size="lg"
                               label="CVC"
+                              isRequired
                               placeholder="123"
                               value={cvc}
                               onChange={setCvc}
@@ -630,7 +872,8 @@ export default function PaymentForm() {
                           <TextInput
                             size="lg"
                             label="Name on Card"
-                            placeholder="John Doe"
+                            isRequired
+                            placeholder="Vlad Dracul"
                             value={cardName}
                             onChange={setCardName}
                             status={
@@ -649,7 +892,8 @@ export default function PaymentForm() {
                               <TextInput
                                 size="lg"
                                 label="Address"
-                                placeholder="123 Main Street"
+                                isRequired
+                                placeholder="666 Castle Way"
                                 value={billingAddress}
                                 onChange={setBillingAddress}
                                 status={
@@ -665,7 +909,8 @@ export default function PaymentForm() {
                                 <TextInput
                                   size="lg"
                                   label="City"
-                                  placeholder="New York"
+                                  isRequired
+                                  placeholder="Transylvania"
                                   value={billingCity}
                                   onChange={setBillingCity}
                                   status={
@@ -680,7 +925,8 @@ export default function PaymentForm() {
                                 <TextInput
                                   size="lg"
                                   label="ZIP Code"
-                                  placeholder="10001"
+                                  isRequired
+                                  placeholder="40000"
                                   value={billingZip}
                                   onChange={setBillingZip}
                                   status={
@@ -696,6 +942,7 @@ export default function PaymentForm() {
                               <Selector
                                 size="lg"
                                 label="State"
+                                isRequired
                                 placeholder="Select state"
                                 options={US_STATES}
                                 value={billingState}
@@ -716,9 +963,7 @@ export default function PaymentForm() {
 
                       {/* Promo Code */}
                       <VStack gap={3}>
-                        <Text type="large" weight="bold">
-                          Promo Code
-                        </Text>
+                        <Heading level={2}>Promo code</Heading>
                         <HStack gap={2} vAlign="end">
                           <StackItem size="fill">
                             <TextInput
@@ -741,9 +986,7 @@ export default function PaymentForm() {
 
                       {/* Gift Options */}
                       <VStack gap={3}>
-                        <Text type="large" weight="bold">
-                          Gift Options
-                        </Text>
+                        <Heading level={2}>Gift options</Heading>
                         <CheckboxInput
                           label="Add a gift message"
                           value={addGiftMessage}
@@ -755,23 +998,20 @@ export default function PaymentForm() {
                               <TextInput
                                 size="lg"
                                 label="To"
-                                isLabelHidden
-                                placeholder="To"
+                                placeholder="Recipient name"
                                 value={giftTo}
                                 onChange={setGiftTo}
                               />
                               <TextInput
                                 size="lg"
                                 label="From"
-                                isLabelHidden
-                                placeholder="From"
+                                placeholder="Your name"
                                 value={giftFrom}
                                 onChange={setGiftFrom}
                               />
                             </Grid>
                             <TextArea
                               label="Gift message"
-                              isLabelHidden
                               placeholder="Write something here"
                               value={giftMessage}
                               onChange={setGiftMessage}
@@ -782,48 +1022,17 @@ export default function PaymentForm() {
 
                       {/* Trust bar + CTAs + policy links */}
                       <VStack gap={4}>
-                        <HStack gap={5} hAlign="center" wrap="wrap">
-                          <HStack gap={1} vAlign="center">
-                            <Icon
-                              icon={ShieldCheck}
-                              size="sm"
-                              color="secondary"
-                            />
-                            <Text type="supporting" color="secondary">
-                              Secure Payment
-                            </Text>
-                          </HStack>
-                          <HStack gap={1} vAlign="center">
-                            <Icon
-                              icon={Lock}
-                              size="sm"
-                              color="secondary"
-                            />
-                            <Text type="supporting" color="secondary">
-                              SSL Encrypted
-                            </Text>
-                          </HStack>
-                          <HStack gap={1} vAlign="center">
-                            <Icon
-                              icon={CircleCheck}
-                              size="sm"
-                              color="secondary"
-                            />
-                            <Text type="supporting" color="secondary">
-                              Free Returns
-                            </Text>
-                          </HStack>
-                        </HStack>
+                        <TrustBar />
                         <VStack gap={2}>
                           <Button
-                            label="Place Order"
+                            label="Place order"
                             variant="primary"
                             size="lg"
                             style={fullWidth}
                             onClick={() => setSubmitted(true)}
                           />
                           <Button
-                            label="Continue Shopping"
+                            label="Continue shopping"
                             variant="secondary"
                             size="lg"
                             style={fullWidth}
@@ -831,20 +1040,7 @@ export default function PaymentForm() {
                           />
                         </VStack>
                         <Divider />
-                        <HStack gap={4} vAlign="center" wrap="wrap">
-                          <Link href="#/templates/payment-form" type="supporting">
-                            Refund policy
-                          </Link>
-                          <Link href="#/templates/payment-form" type="supporting">
-                            Privacy policy
-                          </Link>
-                          <Link href="#/templates/payment-form" type="supporting">
-                            Terms of service
-                          </Link>
-                          <Link href="#/templates/payment-form" type="supporting">
-                            Cancellations
-                          </Link>
-                        </HStack>
+                        <PolicyLinks />
                       </VStack>
                     </VStack>
                   </StackItem>
@@ -852,132 +1048,16 @@ export default function PaymentForm() {
                   <StackItem
                     size="fill"
                     style={isStacked ? summaryMobileOrder : summarySticky}>
-                    <Card padding={5}>
-                      <VStack gap={4}>
-                        {/* Accordion header — clickable on mobile only */}
-                        <Collapsible
-                          trigger="Order Summary"
-                          defaultIsOpen={true}>
-                          <VStack gap={4} style={summaryContent}>
-                            {/* Line items */}
-                            {ORDER_ITEMS.map(item => (
-                              <VStack key={item.id} gap={3}>
-                                <HStack gap={3} vAlign="start">
-                                  <Thumbnail
-                                    src={ITEM_IMAGES[item.id].src}
-                                    alt={item.name}
-                                  />
-                                  <StackItem size="fill">
-                                    <VStack gap={1}>
-                                      <HStack
-                                        gap={2}
-                                        hAlign="between"
-                                        vAlign="start">
-                                        <HStack gap={2} vAlign="center" wrap="wrap">
-                                          <Text type="body" weight="medium">
-                                            {item.name}
-                                          </Text>
-                                          {item.limited && (
-                                            <Badge
-                                              variant="yellow"
-                                              label="LIMITED EDITION"
-                                            />
-                                          )}
-                                        </HStack>
-                                        <Text
-                                          type="body"
-                                          weight="bold"
-                                          hasTabularNumbers>
-                                          {fmt(item.price)}
-                                        </Text>
-                                      </HStack>
-                                      <Text type="supporting" color="secondary">
-                                        {item.variant}
-                                      </Text>
-                                      <HStack gap={2} vAlign="end" wrap="wrap">
-                                        <NumberInput
-                                          label="Qty"
-                                          value={
-                                            quantities[item.id] ?? item.qty
-                                          }
-                                          onChange={v =>
-                                            setQuantities(q => ({
-                                              ...q,
-                                              [item.id]: v,
-                                            }))
-                                          }
-                                          min={1}
-                                          max={10}
-                                          isIntegerOnly
-                                        />
-                                        <Link href="#/templates/payment-form" type="supporting">
-                                          Remove
-                                        </Link>
-                                        <Link href="#/templates/payment-form" type="supporting">
-                                          Save
-                                        </Link>
-                                      </HStack>
-                                    </VStack>
-                                  </StackItem>
-                                </HStack>
-                                <Divider />
-                              </VStack>
-                            ))}
-
-                            {/* Order total subsection */}
-                            <VStack gap={3}>
-                              <Text type="large" weight="bold">
-                                Order Total
-                              </Text>
-                              <VStack gap={2}>
-                                <HStack hAlign="between" vAlign="center">
-                                  <Text type="body" color="secondary">
-                                    Subtotal
-                                  </Text>
-                                  <Text type="body" hasTabularNumbers>
-                                    {fmt(subtotal)}
-                                  </Text>
-                                </HStack>
-                                <HStack hAlign="between" vAlign="center">
-                                  <Text type="body" color="secondary">
-                                    Shipping
-                                  </Text>
-                                  <Text type="body" hasTabularNumbers>
-                                    {fmt(shipping)}
-                                  </Text>
-                                </HStack>
-                                <HStack hAlign="between" vAlign="center">
-                                  <Text type="body" color="secondary">
-                                    Tax
-                                  </Text>
-                                  <Text type="body" hasTabularNumbers>
-                                    {fmt(tax)}
-                                  </Text>
-                                </HStack>
-                              </VStack>
-                              <Divider />
-                              <HStack hAlign="between" vAlign="center">
-                                <Text type="large" weight="bold">
-                                  Total
-                                </Text>
-                                <Text
-                                  type="large"
-                                  weight="bold"
-                                  hasTabularNumbers>
-                                  {fmt(total)}
-                                </Text>
-                              </HStack>
-                              <Banner
-                                status="info"
-                                icon={<Icon icon={Truck} size="sm" />}
-                                title="Free shipping on orders over $300"
-                              />
-                            </VStack>
-                          </VStack>
-                        </Collapsible>
-                      </VStack>
-                      {/* end outer card VStack gap={4} */}
-                    </Card>
+                    <OrderSummaryCard
+                      quantities={quantities}
+                      onChangeQty={(id, v) =>
+                        setQuantities(q => ({...q, [id]: v}))
+                      }
+                      subtotal={subtotal}
+                      shipping={shipping}
+                      tax={tax}
+                      total={total}
+                    />
                   </StackItem>
                 </Stack>
               </VStack>