const PRODUCTS = [
const { items, update, remove, subtotal, clear } = useCartContext();
return (
<div className="p-6 space-y-4">
{items.length === 0 && <p className="text-sm text-muted-foreground">Your cart is empty.</p>}
{items.map((it) => (
<div key={it.id} className="flex items-start justify-between gap-3">
<div>
<div className="font-medium">{it.name}</div>
<div className="text-xs text-muted-foreground">${""}{it.price.toFixed(2)} each</div>
<div className="mt-2 flex items-center gap-2">
<label className="text-xs">Qty</label>
<Input type="number" min={1} value={it.qty} onChange={(e) => update(it.id, Number(e.target.value))} className="w-20 h-8 rounded-xl" />
<Button size="sm" variant="ghost" onClick={() => remove(it.id)} className="rounded-xl">Remove</Button>
</div>
</div>
<div className="font-semibold">${""}{(it.qty * it.price).toFixed(2)}</div>
</div>
))}


{items.length > 0 && (
<div className="pt-4 border-t space-y-3">
<div className="flex items-center justify-between"><span className="text-sm">Subtotal</span><span className="font-semibold">${""}{subtotal.toFixed(2)}</span></div>
<p className="text-xs text-muted-foreground">Taxes and shipping calculated at checkout. For livestock reservations, we’ll follow up by email.</p>
<div className="flex gap-2">
<Button className="rounded-2xl flex-1">Checkout (Demo)</Button>
<Button variant="outline" onClick={clear} className="rounded-2xl">Clear</Button>
</div>
</div>
)}
</div>
);
}


function Footer() {
return (
<footer className="border-t mt-16">
<div className="max-w-6xl mx-auto px-4 py-10 grid md:grid-cols-3 gap-6 text-sm">
<div>
<div className="font-semibold">Sherpa Graze Farm</div>
<p className="text-muted-foreground mt-2">Yoder, Colorado • High Plains</p>
</div>
<div>
<div className="font-semibold mb-2">Pages</div>
<ul className="space-y-1 text-muted-foreground">
<li><a href="#/">Home</a></li>
<li><a href="#/about">About</a></li>
<li><a href="#/store">Store</a></li>
<li><a href="#/contact">Contact</a></li>
</ul>
</div>
<div>
<div className="font-semibold mb-2">Contact</div>
<div className="flex items-center gap-2"><Mail className="w-4 h-4" /> your-email@example.com</div>
<div className="flex items-center gap-2"><Phone className="w-4 h-4" /> (xxx) xxx-xxxx</div>
</div>
</div>
<div className="text-xs text-muted-foreground text-center py-6 border-t">© {new Date().getFullYear()} Sherpa Graze Farm. All rights reserved.</div>
</footer>
);
}


export default function App() {
const { route, navigate } = useHashRoute();
const cart = useCart();


return (
<CartContext.Provider value={cart}>
<div className="min-h-screen flex flex-col">
<Nav navigate={navigate} route={route} cartCount={cart.count} />
<main className="flex-1">
{route === "/" && <Home navigate={navigate} />}
{route === "/about" && <About />}
{route === "/store" && <Store />}
{route === "/contact" && <Contact />}
</main>
<Footer />
</div>
</CartContext.Provider>
);
}