{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "checkout-03",
  "type": "registry:block",
  "title": "Checkout 03",
  "files": [
    {
      "path": "src/components/commercn/checkouts/checkout-03.tsx",
      "content": "import { Gift, X } from \"lucide-react\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Textarea } from \"@/components/ui/textarea\";\nimport { Label } from \"@/components/ui/label\";\nimport { Checkbox } from \"@/components/ui/checkbox\";\nimport { Card, CardContent, CardHeader, CardFooter } from \"@/components/ui/card\";\nimport { Field, FieldLabel } from \"@/components/ui/field\";\n\nconst product = {\n    name: \"Premium Headphones\",\n    details: \"Qty: 1 • Silver\",\n    price: 304.00,\n    image: \"https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=200&auto=format&fit=crop\",\n};\n\nexport function CheckoutThree() {\n    return (\n        <Card className=\"w-full max-w-xl rounded-2xl pt-0 overflow-hidden\">\n            {/* Header */}\n            <CardHeader className=\"flex items-center justify-between bg-accent p-6\">\n                <div className=\"flex items-center gap-4\">\n                    <div className=\"size-12 rounded-full bg-background flex items-center justify-center\">\n                        <Gift className=\"size-6\" />\n                    </div>\n                    <div>\n                        <h2 className=\"font-bold text-xl\">Send a Gift</h2>\n                        <p className=\"text-sm\">Make someone&apos;s day special</p>\n                    </div>\n                </div>\n                <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\">\n                    <X className=\"size-4\" />\n                </Button>\n            </CardHeader>\n\n            <CardContent className=\"flex flex-col gap-8\">\n                {/* Recipient Info */}\n                <div className=\"grid grid-cols-2 gap-4 *:gap-1\">\n                    <Field>\n                        <FieldLabel className=\"font-semibold text-xs uppercase tracking-wide\">To (Name)</FieldLabel>\n                        <Input className=\"h-12 rounded-xl shadow-none\" placeholder=\"Recipient's Name\" />\n                    </Field>\n                    <Field>\n                        <FieldLabel className=\"font-semibold text-xs uppercase tracking-wide\">From (Name)</FieldLabel>\n                        <Input className=\"h-12 rounded-xl shadow-none\" placeholder=\"Your Name\" />\n                    </Field>\n                </div>\n\n                <Field className=\"gap-1\">\n                    <FieldLabel className=\"font-semibold text-xs uppercase tracking-wide\">Recipient Email</FieldLabel>\n                    <Input className=\"h-12 rounded-xl shadow-none\" placeholder=\"hello@friend.com\" type=\"email\" />\n                </Field>\n\n                {/* Gift Message */}\n                <Field className=\"gap-1\">\n                    <FieldLabel className=\"font-semibold text-xs uppercase tracking-wide\">Gift Message</FieldLabel>\n                    <Textarea\n                        className=\"rounded-xl shadow-none\"\n                        rows={6}\n                        placeholder=\"Write a personal note... (Optional)\"\n                    />\n                </Field>\n\n                {/* Gift Options */}\n                <Card className=\"shadow-none rounded-2xl\">\n                    <CardContent className=\"flex items-center gap-4\">\n                        <div className=\"size-16 rounded-xl overflow-hidden shrink-0\">\n                            <img src={product.image} alt={product.name} className=\"size-full object-cover\" />\n                        </div>\n                        <div className=\"flex-1\">\n                            <h3 className=\"font-bold text-base\">{product.name}</h3>\n                            <p className=\"text-sm text-muted-foreground\">{product.details}</p>\n                        </div>\n                        <div className=\"flex items-center gap-2\">\n                            <Checkbox id=\"gift-wrap\" />\n                            <Label htmlFor=\"gift-wrap\" className=\"text-sm font-medium cursor-pointer\">\n                                Gift Wrap (+$5)\n                            </Label>\n                        </div>\n                    </CardContent>\n                </Card>\n            </CardContent>\n\n            {/* Footer */}\n            <CardFooter>\n                <Button size=\"lg\" className=\"w-full text-lg py-6\">Proceed to Pay ${product.price.toFixed(2)}</Button>\n            </CardFooter>\n        </Card>\n    );\n}\n",
      "type": "registry:component"
    }
  ]
}