One page

import {
  Badge,
  Button,
  Card,
  CardContent,
  CardFooter,
  CardHeader,
  CardTitle,
  Checkbox,
  cn,
  Input,
  Label,
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
  Separator,
} from "@cronus-ui/ui";
import { CreditCard, Lock, ShieldCheck } from "lucide-react";

interface CartItem {
  id: string;
  name: string;
  detail: string;
  price: string;
  gradient: string;
  initials: string;
}

const onePageItems: CartItem[] = [
  {
    id: "hoodie",
    name: "Alpine merino hoodie",
    detail: "Slate · Medium",
    price: "$148.00",
    gradient: "from-primary/30 to-info/20",
    initials: "AH",
  },
  {
    id: "bag",
    name: "Canvas weekender bag",
    detail: "Olive · One size",
    price: "$124.00",
    gradient: "from-warning/30 to-primary/20",
    initials: "WB",
  },
  {
    id: "socks",
    name: "Trail socks — 3 pack",
    detail: "Crew · Large",
    price: "$36.00",
    gradient: "from-success/30 to-info/20",
    initials: "TS",
  },
];

export function CheckoutOnePageBlock() {
  return (
    <section
      aria-label="One-page checkout"
      className="mx-auto grid w-full max-w-5xl gap-6 lg:grid-cols-[1.15fr_0.85fr] lg:items-start"
    >
      {/* Order summary */}
      <Card className="h-fit gap-0 pb-0 shadow-md lg:sticky lg:top-6 lg:order-2">
        <CardHeader>
          <CardTitle className="font-display text-lg">Order summary</CardTitle>
          <p className="col-span-full text-sm text-fg-secondary">
            3 items · ships from Portland, OR
          </p>
        </CardHeader>
        <CardContent className="flex flex-col gap-4">
          {onePageItems.map((item) => (
            <div key={item.id} className="flex items-center gap-3">
              <span
                aria-hidden="true"
                className={cn(
                  "flex size-12 shrink-0 items-center justify-center rounded-lg",
                  "bg-gradient-to-br text-xs font-semibold text-fg/70",
                  item.gradient,
                )}
              >
                {item.initials}
              </span>
              <div className="flex flex-1 flex-col">
                <span className="text-sm font-medium text-fg">{item.name}</span>
                <span className="text-xs text-fg-tertiary">{item.detail}</span>
              </div>
              <span className="text-sm font-medium text-fg">{item.price}</span>
            </div>
          ))}
          <div className="flex gap-2">
            <Input placeholder="Gift or promo code" aria-label="Gift or promo code" />
            <Button variant="outline">Apply</Button>
          </div>
        </CardContent>
        <Separator className="my-4" />
        <CardContent className="flex flex-col gap-2">
          <div className="flex items-center justify-between text-sm text-fg-secondary">
            <span>Subtotal</span>
            <span className="text-fg">$308.00</span>
          </div>
          <div className="flex items-center justify-between text-sm text-fg-secondary">
            <span>Shipping</span>
            <span className="font-medium text-success-strong">Free</span>
          </div>
          <div className="flex items-center justify-between text-sm text-fg-secondary">
            <span>Tax</span>
            <span className="text-fg">$24.64</span>
          </div>
        </CardContent>
        <Separator className="my-4" />
        <CardFooter className="flex-col items-stretch gap-1 pb-6">
          <div className="flex items-baseline justify-between">
            <span className="font-medium text-fg">Total</span>
            <span className="font-display text-2xl font-semibold text-fg">$332.64</span>
          </div>
          <span className="text-xs text-fg-tertiary">Includes duties · billed in USD</span>
        </CardFooter>
      </Card>

      {/* Contact + shipping + payment */}
      <Card className="shadow-md lg:order-1">
        <CardHeader>
          <CardTitle className="font-display text-lg">Checkout</CardTitle>
          <p className="col-span-full text-sm text-fg-secondary">
            Northwind Supply Co. · order NW-20461
          </p>
          <div className="col-start-2 row-span-2 row-start-1 self-start justify-self-end">
            <Badge variant="secondary">
              <Lock className="size-3" aria-hidden="true" />
              Secure
            </Badge>
          </div>
        </CardHeader>
        <CardContent className="flex flex-col gap-6">
          <div className="flex flex-col gap-4">
            <h2 className="flex items-center gap-2 text-sm font-semibold text-fg">
              <Badge variant="primary" className="size-6 justify-center rounded-full px-0 py-0">
                1
              </Badge>
              Contact
            </h2>
            <div className="flex flex-col gap-2">
              <Label htmlFor="onepage-email">Email</Label>
              <Input
                id="onepage-email"
                type="email"
                placeholder="you@email.com"
                autoComplete="email"
              />
            </div>
            <Label
              htmlFor="onepage-updates"
              className="flex items-center gap-2 font-normal text-fg-secondary"
            >
              <Checkbox id="onepage-updates" defaultChecked />
              Email me order updates and receipts
            </Label>
          </div>

          <Separator />

          <div className="flex flex-col gap-4">
            <h2 className="flex items-center gap-2 text-sm font-semibold text-fg">
              <Badge variant="primary" className="size-6 justify-center rounded-full px-0 py-0">
                2
              </Badge>
              Shipping address
            </h2>
            <div className="flex flex-col gap-2">
              <Label htmlFor="onepage-name">Full name</Label>
              <Input id="onepage-name" placeholder="Alex Morgan" autoComplete="name" />
            </div>
            <div className="flex flex-col gap-2">
              <Label htmlFor="onepage-address">Address</Label>
              <Input
                id="onepage-address"
                placeholder="2482 Fulton St"
                autoComplete="street-address"
              />
            </div>
            <div className="grid grid-cols-2 gap-4">
              <div className="flex flex-col gap-2">
                <Label htmlFor="onepage-city">City</Label>
                <Input
                  id="onepage-city"
                  placeholder="San Francisco"
                  autoComplete="address-level2"
                />
              </div>
              <div className="flex flex-col gap-2">
                <Label htmlFor="onepage-postal">Postal code</Label>
                <Input id="onepage-postal" placeholder="94118" autoComplete="postal-code" />
              </div>
            </div>
            <div className="flex flex-col gap-2">
              <Label htmlFor="onepage-country">Country</Label>
              <Select defaultValue="us">
                <SelectTrigger id="onepage-country">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="us">United States</SelectItem>
                  <SelectItem value="ca">Canada</SelectItem>
                  <SelectItem value="gb">United Kingdom</SelectItem>
                  <SelectItem value="de">Germany</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>

          <Separator />

          <div className="flex flex-col gap-4">
            <h2 className="flex items-center gap-2 text-sm font-semibold text-fg">
              <Badge variant="primary" className="size-6 justify-center rounded-full px-0 py-0">
                3
              </Badge>
              Payment
            </h2>
            <div className="flex flex-col gap-2">
              <Label htmlFor="onepage-card">Card number</Label>
              <div className="relative">
                <Input
                  id="onepage-card"
                  inputMode="numeric"
                  placeholder="1234 1234 1234 1234"
                  autoComplete="cc-number"
                  className="pe-10"
                />
                <CreditCard
                  className="pointer-events-none absolute end-3 top-1/2 size-4 -translate-y-1/2 text-fg-tertiary"
                  aria-hidden="true"
                />
              </div>
            </div>
            <div className="grid grid-cols-2 gap-4">
              <div className="flex flex-col gap-2">
                <Label htmlFor="onepage-expiry">Expiry</Label>
                <Input id="onepage-expiry" placeholder="MM / YY" autoComplete="cc-exp" />
              </div>
              <div className="flex flex-col gap-2">
                <Label htmlFor="onepage-cvc">CVC</Label>
                <Input
                  id="onepage-cvc"
                  inputMode="numeric"
                  placeholder="123"
                  autoComplete="cc-csc"
                />
              </div>
            </div>
          </div>
        </CardContent>
        <Separator />
        <CardFooter className="flex-col items-stretch gap-3">
          <Button variant="primary" size="lg" className="w-full">
            Pay $332.64
          </Button>
          <p className="flex items-center justify-center gap-2 text-xs text-fg-tertiary">
            <ShieldCheck className="size-3.5" aria-hidden="true" />
            Encrypted payment · Free returns for 30 days
          </p>
        </CardFooter>
      </Card>
    </section>
  );
}