"use client" import { useState } from "react" import { motion } from "framer-motion" import { fadeIn, slideUp, stagger, staggerItem, cardHoverTarget, buttonTapTarget } from "@/lib/animations" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Separator } from "@/components/ui/separator" import { Checkbox } from "@/components/ui/checkbox" import { Textarea } from "@/components/ui/textarea" import { cn } from "@/lib/utils" import { formatPrice } from "@/lib/currency" import { UtensilsCrossed, Plus, Minus, Check, ChefHat, AlertCircle, ShoppingBag, ArrowLeft, ArrowRight, } from "lucide-react" interface Customization { name: string price: number } interface MenuItem { name: string price: number desc: string options: Customization[] } const items: MenuItem[] = [ { name: "Wagyu Burger", price: 44200, desc: "Dry-aged patty, truffle aioli, brioche bun", options: [ { name: "Extra Patty", price: 10200 }, { name: "Add Bacon", price: 5100 }, { name: "Gluten-Free Bun", price: 3400 }, ], }, { name: "Truffle Fries", price: 20400, desc: "Hand-cut fries with truffle oil and parmesan", options: [ { name: "Add Cheese", price: 3400 }, { name: "Large Size", price: 6800 }, ], }, ] export default function OnlineOrdering() { const [step, setStep] = useState(0) const [selectedItem, setSelectedItem] = useState(null) const [selectedOptions, setSelectedOptions] = useState([]) const [quantity, setQuantity] = useState(1) const [specialInstructions, setSpecialInstructions] = useState("") const toggleOption = (name: string) => setSelectedOptions((prev) => prev.includes(name) ? prev.filter((o) => o !== name) : [...prev, name] ) const optionsTotal = selectedOptions.reduce((sum, name) => { const item = selectedItem?.options.find((o) => o.name === name) return sum + (item?.price || 0) }, 0) if (step === 0) { return (

Customize Your Order

The Grill House

{items.map((item) => ( { setSelectedItem(item); setStep(1); setQuantity(1); setSelectedOptions([]); }}>

{item.name}

{item.desc}

{formatPrice(item.price)}

))}

) } return (

{selectedItem?.name}

{selectedItem?.desc}

Quantity

{quantity}

{selectedItem && selectedItem.options.length > 0 && (

Add-ons

{selectedItem.options.map((opt) => (

toggleOption(opt.name)} /> {opt.name}

+{formatPrice(opt.price)}

))}

)}

Special Instructions

setSpecialInstructions(e.target.value)}
                  />
                </div>
              </CardContent>
            </Card>
          </motion.div>

<motion.div variants={staggerItem}>
            <Card className="bg-muted/30">
              <CardContent className="p-4">
                <div className="space-y-2 text-sm">
                  <div className="flex justify-between">
                    <span>{selectedItem?.name} x{quantity}</span>
                    <span>{formatPrice((selectedItem?.price || 0) * quantity)}</span>
                  </div>
                  {selectedOptions.map((opt) => (
                    <div key={opt} className="flex justify-between text-muted-foreground"><span>{opt}</span><span>+{formatPrice(selectedItem?.options.find((o) => o.name === opt)?.price || 0)}</span></div>
                  ))}
                  <Separator />
                  <div className="flex justify-between font-bold text-base">
                    <span>Total</span>
                    <span>{formatPrice((selectedItem?.price || 0) * quantity + optionsTotal * quantity)}</span>
                  </div>
                </div>
              </CardContent>
            </Card>
          </motion.div>

<motion.div variants={staggerItem} className="flex justify-end">
            <motion.div whileTap={buttonTapTarget}>
              <Button size="lg">Add to Cart <ShoppingBag className="ml-2 size-4" /></Button>
            </motion.div>
          </motion.div>
        </motion.div>
      </section>
    </div>
  )
}
</article></body></html>

Online Ordering

The Grill House