import { useState } from 'react';

import { Search, ShoppingCart, Heart, User, Menu } from 'lucide-react';

const EcommercePage = () => {

const [cartItems, setCartItems] = useState<any[]>([]);
const [isCartOpen, setIsCartOpen] = useState(false);
const [selectedCategory, setSelectedCategory] = useState('all');

const products = [
{
id: 1,
name: 'Wireless Headphones',
price: 129.99,
category: 'electronics',
description: 'Premium wireless headphones with noise cancellation'
},
{
id: 2,
name: 'Running Shoes',
price: 89.99,
category: 'clothing',
description: 'Lightweight running shoes for optimal performance'
},
{
id: 3,
name: 'Smart Watch',
price: 199.99,
category: 'electronics',
description: 'Advanced smartwatch with health monitoring'
},
{
id: 4,
name: 'Cotton T-Shirt',
price: 24.99,
category: 'clothing',
description: 'Comfortable 100% cotton t-shirt'
},
{
id: 5,
name: 'Coffee Maker',
price: 79.99,
category: 'home',
description: 'Automatic coffee maker with timer'
},
{
id: 6,
name: 'Yoga Mat',
price: 34.99,
category: 'sports',
description: 'Non-slip yoga mat for exercise'
},
{
id: 7,
name: 'Bluetooth Speaker',
price: 59.99,
category: 'electronics',
description: 'Portable Bluetooth speaker with rich sound'
},
{
 id: 8,
name: 'Desk Lamp',
price: 45.99,
category: 'home',
description: 'Adjustable LED desk lamp with touch control'
}
];

const addToCart = (product: any) => {

setCartItems(prevItems => {
const existingItem = [Link](item => [Link] === [Link]);
if (existingItem) {
return [Link](item =>
[Link] === [Link]
? { ...item, quantity: [Link] + 1 }
: item
);
}
return [...prevItems, { ...product, quantity: 1 }];
});
};

const removeFromCart = (productId: number) => {

setCartItems(prevItems => [Link](item => [Link] !== productId));
};

const updateQuantity = (productId: number, quantity: number) => {

if (quantity === 0) {
removeFromCart(productId);
return;
}
setCartItems(prevItems =>
[Link](item =>
[Link] === productId ? { ...item, quantity } : item
)
);
};

const getTotalPrice = () => {

return [Link]((total, item) => total + [Link] * [Link],
0);
};

const filteredProducts = selectedCategory === 'all'

? products
: [Link](product => [Link] === selectedCategory);

return (
<div className="min-h-screen bg-gray-50">
{/* Header */}
<header className="bg-white shadow-sm sticky top-0 z-50">
<div className="container mx-auto px-4 py-4">
<div className="flex items-center justify-between">
{/* Logo */}
<div className="text-2xl font-bold text-blue-600">ShopNow</div>

{/* Search Bar */}

<div className="hidden md:flex flex-1 max-w-2xl mx-8">
<div className="relative w-full">
 <input
type="text"
placeholder="Search products..."
className="w-full px-4 py-2 border border-gray-300 rounded-lg
focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
<Search className="absolute right-3 top-2.5 h-5 w-5 text-gray-
400" />
</div>
</div>

{/* Navigation */}

<nav className="hidden md:flex items-center space-x-6">
<button className="text-gray-700 hover:text-blue-600">
<Heart className="h-6 w-6" />
</button>
<button
className="text-gray-700 hover:text-blue-600 relative"
onClick={() => setIsCartOpen(true)}
>
<ShoppingCart className="h-6 w-6" />
{[Link] > 0 && (
<span className="absolute -top-2 -right-2 bg-blue-600 text-white
text-xs rounded-full h-5 w-5 flex items-center justify-center">
{[Link]}
</span>
)}
</button>
<button className="text-gray-700 hover:text-blue-600">
<User className="h-6 w-6" />
</button>
</nav>

{/* Mobile Menu */}

<button className="md:hidden text-gray-700">
<Menu className="h-6 w-6" />
</button>
</div>
</div>
</header>

{/* Main Content */}

<main className="container mx-auto px-4 py-8">
{/* Hero Section */}
<div className="bg-gradient-to-r from-blue-600 to-purple-600 rounded-2xl p-
8 mb-12 text-white">
<div className="max-w-2xl">
<h1 className="text-4xl md:text-5xl font-bold mb-4">
Discover Amazing Products
</h1>
<p className="text-xl mb-6">
Shop the latest trends and find everything you need at unbeatable
prices.
</p>
<button className="bg-white text-blue-600 px-8 py-3 rounded-lg font-
semibold hover:bg-gray-100 transition-colors">
Shop Now
</button>
</div>
</div>

{/* Categories */}

<div className="mb-8">
<h2 className="text-2xl font-bold mb-4">Categories</h2>
<div className="flex flex-wrap gap-2">
<button
onClick={() => setSelectedCategory('all')}
className={`px-6 py-2 rounded-full ${
selectedCategory === 'all'
? 'bg-blue-600 text-white'
: 'bg-gray-200 text-gray-700 hover:bg-gray-300'
}`}
>
All
</button>
<button
onClick={() => setSelectedCategory('electronics')}
className={`px-6 py-2 rounded-full ${
selectedCategory === 'electronics'
? 'bg-blue-600 text-white'
: 'bg-gray-200 text-gray-700 hover:bg-gray-300'
}`}
>
Electronics
</button>
<button
onClick={() => setSelectedCategory('clothing')}
className={`px-6 py-2 rounded-full ${
selectedCategory === 'clothing'
? 'bg-blue-600 text-white'
: 'bg-gray-200 text-gray-700 hover:bg-gray-300'
}`}
>
Clothing
</button>
<button
onClick={() => setSelectedCategory('home')}
className={`px-6 py-2 rounded-full ${
selectedCategory === 'home'
? 'bg-blue-600 text-white'
: 'bg-gray-200 text-gray-700 hover:bg-gray-300'
}`}
>
Home
</button>
<button
onClick={() => setSelectedCategory('sports')}
className={`px-6 py-2 rounded-full ${
selectedCategory === 'sports'
? 'bg-blue-600 text-white'
: 'bg-gray-200 text-gray-700 hover:bg-gray-300'
}`}
>
Sports
</button>
</div>
</div>
 {/* Products Grid */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-
cols-4 gap-6 mb-12">
{[Link]((product) => (
<div key={[Link]} className="bg-white rounded-xl shadow-md
overflow-hidden hover:shadow-lg transition-shadow">
<div className="h-48 bg-gray-200 overflow-hidden">
<img
src="[Link]
86f1-2a93ccde5887/image/[Link]"
alt="Product display showing modern electronic gadgets arranged
on a clean white background"
className="w-full h-full object-cover"
/>
</div>
<div className="p-4">
<h3 className="font-semibold text-lg mb-2">{[Link]}</h3>
<p className="text-gray-600 text-sm mb-4">{[Link]}</p>
<div className="flex items-center justify-between">
<span className="text-2xl font-bold text-blue-600">$
{[Link]}</span>
<button
onClick={() => addToCart(product)}
className="bg-blue-600 text-white px-4 py-2 rounded-lg
hover:bg-blue-700 transition-colors"
>
Add to Cart
</button>
</div>
</div>
</div>
))}
</div>
</main>

{/* Shopping Cart Sidebar */}

{isCartOpen && (
<div className="fixed inset-0 z-50 overflow-hidden">
<div className="absolute inset-0 bg-black bg-opacity-50" onClick={() =>
setIsCartOpen(false)}></div>
<div className="absolute right-0 top-0 h-full w-full max-w-md bg-white
shadow-xl">
<div className="h-full flex flex-col">
<div className="flex items-center justify-between p-4 border-b">
<h2 className="text-xl font-bold">Shopping Cart</h2>
<button onClick={() => setIsCartOpen(false)} className="text-gray-
400 hover:text-gray-600">
✕
</button>
</div>

<div className="flex-1 overflow-y-auto p-4">

{[Link] === 0 ? (
<div className="text-center py-12">
<ShoppingCart className="mx-auto h-12 w-12 text-gray-400 mb-
4" />
<p className="text-gray-500">Your cart is empty</p>
</div>
) : (
 <div className="space-y-4">
{[Link]((item) => (
<div key={[Link]} className="flex items-center space-x-4
border-b pb-4">
<div className="w-16 h-16 bg-gray-200 rounded">
<img
src="[Link]
8b4e-4d94-86f1-2a93ccde5887/image/[Link]"
alt="Shopping cart item thumbnail showing product
packaging"
className="w-full h-full object-cover rounded"
/>
</div>
<div className="flex-1">
<h4 className="font-semibold">{[Link]}</h4>
<p className="text-blue-600 font-bold">${[Link]}</p>
</div>
<div className="flex items-center space-x-2">
<button
onClick={() => updateQuantity([Link], [Link] -
1)}
className="w-8 h-8 rounded-full border border-gray-300
flex items-center justify-center hover:bg-gray-100"
>
-
</button>
<span className="w-8 text-center">{[Link]}</span>
<button
onClick={() => updateQuantity([Link], [Link] +
1)}
className="w-8 h-8 rounded-full border border-gray-300
flex items-center justify-center hover:bg-gray-100"
>
+
</button>
</div>
</div>
))}
</div>
)}
</div>

<div className="p-4 border-t">

<div className="flex justify-between text-lg font-bold mb-4">
<span>Total:</span>
<span>${getTotalPrice().toFixed(2)}</span>
</div>
<button className="w-full bg-blue-600 text-white py-3 rounded-lg
font-semibold hover:bg-blue-700 transition-colors">
Checkout
</button>
</div>
</div>
</div>
</div>
)}

{/* Footer */}

<footer className="bg-gray-900 text-white py-12">
 <div className="container mx-auto px-4">
<div className="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<h3 className="text-xl font-bold mb-4">ShopNow</h3>
<p className="text-gray-400">
Your one-stop shop for all your needs. Quality products at
affordable prices.
</p>
</div>
<div>
<h4 className="font-semibold mb-4">Shop</h4>
<ul className="space-y-2 text-gray-400">
<li><a href="#" className="hover:text-white">Electronics</a></li>
<li><a href="#" className="hover:text-white">Clothing</a></li>
<li><a href="#" className="hover:text-white">Home & Garden</a></li>
<li><a href="#" className="hover:text-white">Sports</a></li>
</ul>
</div>
<div>
<h4 className="font-semibold mb-4">Support</h4>
<ul className="space-y-2 text-gray-400">
<li><a href="#" className="hover:text-white">Contact Us</a></li>
<li><a href="#" className="hover:text-white">FAQs</a></li>
<li><a href="#" className="hover:text-white">Returns</a></li>
<li><a href="#" className="hover:text-white">Shipping</a></li>
</ul>
</div>
<div>
<h4 className="font-semibold mb-4">Subscribe</h4>
<p className="text-gray-400 mb-4">Get the latest updates and
offers</p>
<div className="flex">
<input
type="email"
placeholder="Your email"
className="px-4 py-2 bg-gray-800 text-white rounded-l-lg
focus:outline-none"
/>
<button className="bg-blue-600 px-4 py-2 rounded-r-lg hover:bg-
blue-700">
Subscribe
</button>
</div>
</div>
</div>
<div className="border-t border-gray-800 mt-8 pt-8 text-center text-gray-
400">
<p>© 2024 ShopNow. All rights reserved.</p>
</div>
</div>
</footer>
</div>
);
};

export default EcommercePage;