import React, { useState } from 'react'; import { Card, CardContent } from "@/components/ui/card"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { ShoppingCart, Search } from 'lucide-react';

export default function ZaraStarsStore() { const [cart, setCart] = useState([]);

const products = [ { id: 1, name: "Ocean Bead Bracelet", price: 12.99, img: "https://via.placeholder.com/300" }, { id: 2, name: "Star Charm Bracelet", price: 14.99, img: "https://via.placeholder.com/300" }, { id: 3, name: "Pastel Thread Bracelet", price: 9.99, img: "https://via.placeholder.com/300" }, { id: 4, name: "Gold Heart Bracelet", price: 15.99, img: "https://via.placeholder.com/300" }, ];

const addToCart = (product) => { setCart([...cart, product]); };

return ( <div className="min-h-screen bg-white p-4"> {/* Header */} <div className="flex justify-between items-center mb-6"> <h1 className="text-3xl font-bold text-gray-700">Zara Stars</h1> <div className="flex items-center gap-3"> <Search /> <ShoppingCart /> </div> </div>

{/* Slogan */}
  <p className="text-center text-lg text-gray-500 mb-8">
    Bracelets for every weather, season, and person ✨
  </p>

  {/* Search Bar */}
  <div className="flex justify-center mb-8">
    <Input placeholder="Search bracelets..." className="w-1/2" />
  </div>

  {/* Products Grid */}
  <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
    {products.map((product) => (
      <Card key={product.id} className="rounded-2xl shadow-lg">
        <CardContent className="p-4">
          <img src={product.img} alt={product.name} className="rounded-xl mb-3" />
          <h2 className="text-lg font-semibold text-gray-700">{product.name}</h2>
          <p className="text-gray-500 mb-3">${product.price}</p>
          <Button onClick={() => addToCart(product)} className="w-full">
            Add to Cart
          </Button>
        </CardContent>
      </Card>
    ))}
  </div>

  {/* Footer */}
  <div className="mt-12 text-center text-gray-400">
    © {new Date().getFullYear()} Zara Stars. All rights reserved.
  </div>
</div>

); }