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

const ECommerceSite = () => {
const [cartItems, setCartItems] = useState([]);
const [selectedCategory, setSelectedCategory] = useState('all');

// Örnek ürün verileri
const products = {
electronics: [
{
id: 1,
name: 'Akıllı Saat',
price: 1299,
image: 'https://placeholder-image-service.onrender.com/image/300x300?prompt=Modern+smart+watch+with+black+strap+and+digital+display&id=smart-watch-001',
description: 'Yüksek çözünürlüklü ekran ve uzun pil ömrü'
},
{
id: 2,
name: 'Kablosuz Kulaklık',
price: 599,
image: 'https://placeholder-image-service.onrender.com/image/300x300?prompt=Wireless+earbuds+in+charging+case+with+white+design&id=earbuds-002',
description: 'Noise cancelling özellikli premium kulaklık'
}
],
clothing: [
{
id: 3,
name: 'Deri Ceket',
price: 899,
image: 'https://placeholder-image-service.onrender.com/image/300x300?prompt=Brown+leather+jacket+on+hanger+with+stylish+design&id=jacket-003',
description: '%100 gerçek deri, şık tasarım'
},
{
id: 4,
name: 'Spor Ayakkabı',
price: 450,
image: 'https://placeholder-image-service.onrender.com/image/300x300?prompt=White+running+shoes+with+blue+accents+on+wooden+floor&id=shoes-004',
description: 'Rahat ve hafif spor ayakkabı'
}
],
home: [
{
id: 5,
name: 'Akıllı Lamba',
price: 299,
image: 'https://placeholder-image-service.onrender.com/image/300x300?prompt=Modern+smart+lamp+with+warm+lighting+in+living+room&id=lamp-005',
description: 'Uzaktan kontrol edilebilir LED lamba'
},
{
id: 6,
name: 'Kahve Makinesi',
price: 1299,
image: 'https://placeholder-image-service.onrender.com/image/300x300?prompt=Stainless+steel+coffee+machine+with+digital+display&id=coffee-006',
description: 'Otomatik espresso ve cappuccino makinesi'
}
]
};

const allProducts = Object.values(products).flat();

const addToCart = (product) => {
setCartItems([…cartItems, {…product, quantity: 1}]);
};

const categories = [
{ id: 'all', name: 'Tüm Ürünler' },
{ id: 'electronics', name: 'Elektronik' },
{ id: 'clothing', name: 'Giyim' },
{ id: 'home', name: 'Ev & Yaşam' }
];

const filteredProducts = selectedCategory === 'all'
? allProducts
: products[selectedCategory] || [];

return (

{/* Header */}

MarketPlus

        <div className="hidden md:flex items-center space-x-6">
          {categories.map(category => (
            <button
              key={category.id}
              onClick={() => setSelectedCategory(category.id)}
              className={`px-3 py-2 rounded-lg transition-colors ${
                selectedCategory === category.id
                  ? 'bg-secondary text-secondary-foreground'
                  : 'hover:bg-secondary/50'
              }`}
            >
              {category.name}
            </button>
          ))}
        </div>

        <div className="flex items-center space-x-4">
          <div className="relative hidden md:block">
            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
            <input
              type="text"
              placeholder="Ürün ara..."
              className="pl-10 pr-4 py-2 rounded-lg bg-secondary border border-border"
            />
          </div>

          <button className="p-2 hover:bg-secondary rounded-lg">
            <Heart className="h-5 w-5" />
          </button>

          <div className="relative">
            <button className="p-2 hover:bg-secondary rounded-lg">
              <ShoppingCart className="h-5 w-5" />
              {cartItems.length > 0 && (
                <span className="absolute -top-1 -right-1 bg-destructive text-destructive-foreground text-xs rounded-full h-5 w-5 flex items-center justify-center">
                  {cartItems.length}
                </span>
              )}
            </button>
          </div>

          <button className="p-2 hover:bg-secondary rounded-lg">
            <User className="h-5 w-5" />
          </button>
        </div>
      </div>
    </div>
  </header>

  {/* Hero Section */}
  <section className="bg-gradient-to-r from-primary to-primary/80 text-primary-foreground py-16">
    <div className="container mx-auto px-4 text-center">
      <h2 className="text-4xl md:text-5xl font-bold mb-4">
        En İyi Fırsatlar Sizi Bekliyor
      </h2>
      <p className="text-lg md:text-xl mb-8 opacity-90">
        Binlerce ürün arasından ihtiyacınız olanı bulun, güvenle alışveriş yapın
      </p>
      <button className="bg-secondary text-secondary-foreground px-8 py-3 rounded-lg font-semibold hover:bg-secondary/90 transition-colors">
        Hemen Keşfet
      </button>
    </div>
  </section>

  {/* Kategori Filtreleri (Mobil) */}
  <div className="md:hidden bg-secondary py-4">
    <div className="container mx-auto px-4 overflow-x-auto">
      <div className="flex space-x-2">
        {categories.map(category => (
          <button
            key={category.id}
            onClick={() => setSelectedCategory(category.id)}
            className={`px-4 py-2 rounded-full text-sm whitespace-nowrap ${
              selectedCategory === category.id
                ? 'bg-primary text-primary-foreground'
                : 'bg-background text-foreground'
            }`}
          >
            {category.name}
          </button>
        ))}
      </div>
    </div>
  </div>

  {/* Ürün Grid */}
  <section className="container mx-auto px-4 py-12">
    <h2 className="text-3xl font-bold text-center mb-8">
      {selectedCategory === 'all' ? 'Popüler Ürünler' : categories.find(c => c.id === selectedCategory)?.name}
    </h2>

    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
      {filteredProducts.map(product => (
        <div key={product.id} className="bg-card rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow">
          <div className="relative">
            <img
              src={product.image}
              alt={product.name}
              className="w-full h-48 object-cover"
            />
            <button className="absolute top-2 right-2 p-2 bg-background/80 rounded-full hover:bg-background">
              <Heart className="h-4 w-4" />
            </button>
          </div>

          <div className="p-4">
            <h3 className="font-semibold text-lg mb-2">{product.name}</h3>
            <p className="text-muted-foreground text-sm mb-3">{product.description}</p>
            <div className="flex items-center justify-between">
              <span className="text-2xl font-bold text-primary">{product.price} TL</span>
              <button
                onClick={() => addToCart(product)}
                className="bg-primary text-primary-foreground px-4 py-2 rounded-lg hover:bg-primary/90 transition-colors"
              >
                Sepete Ekle
              </button>
            </div>
          </div>
        </div>
      ))}
    </div>
  </section>

  {/* Öne Çıkan Kategoriler */}
  <section className="bg-muted py-16">
    <div className="container mx-auto px-4">
      <h2 className="text-3xl font-bold text-center mb-12">Kategoriler</h2>
      <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
        <div className="text-center">
          <img
            src="https://placeholder-image-service.onrender.com/image/400x300?prompt=Modern+electronics+gadgets+including+smartphones+and+laptops&id=electronics-cat"
            alt="Elektronik ürünleri gösteren modern cihazlar"
            className="w-full h-64 object-cover rounded-lg mb-4"
          />
          <h3 className="text-xl font-semibold mb-2">Elektronik</h3>
          <p className="text-muted-foreground">En yeni teknoloji ürünleri</p>
        </div>

        <div className="text-center">
          <img
            src="https://placeholder-image-service.onrender.com/image/400x300?prompt=Fashion+clothing+rack+with+trendy+outfits+and+accessories&id=clothing-cat"
            alt="Moda giyim ürünleri ve aksesuarları"
            className="w-full h-64 object-cover rounded-lg mb-4"
          />
          <h3 className="text-xl font-semibold mb-2">Giyim</h3>
          <p className="text-muted-foreground">Trend stiller ve aksesuarlar</p>
        </div>

        <div className="text-center">
          <img
            src="https://placeholder-image-service.onrender.com/image/400x300?prompt=Modern+home+decor+and+furniture+in+minimalist+design&id=home-cat"
            alt="Modern ev dekorasyonu ve mobilyalar"
            className="w-full h-64 object-cover rounded-lg mb-4"
          />
          <h3 className="text-xl font-semibold mb-2">Ev & Yaşam</h3>
          <p className="text-muted-foreground">Konforlu yaşam alanları</p>
        </div>
      </div>
    </div>
  </section>

  {/* Footer */}
  <footer className="bg-primary text-primary-foreground 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-semibold mb-4">MarketPlus</h3>
          <p className="text-primary-foreground/80">
            Güvenli ve hızlı alışverişin adresi
          </p>
        </div>

        <div>
          <h4 className="font-semibold mb-4">Kategoriler</h4>
          <ul className="space-y-2">
            {categories.map(category => (
              <li key={category.id}>
                <button className="text-primary-foreground/80 hover:text-primary-foreground">
                  {category.name}
                </button>
              </li>
            ))}
          </ul>
        </div>

        <div>
          <h4 className="font-semibold mb-4">Müşteri Hizmetleri</h4>
          <ul className="space-y-2">
            <li><button className="text-primary-foreground/80 hover:text-primary-foreground">Sıkça Sorulan Sorular</button></li>
            <li><button className="text-primary-foreground/80 hover:text-primary-foreground">İade Politikası</button></li>
            <li><button className="text-primary-foreground/80 hover:text-primary-foreground">Kargo Bilgileri</button></li>
          </ul>
        </div>

        <div>
          <h4 className="font-semibold mb-4">İletişim</h4>
          <p className="text-primary-foreground/80">info@marketplus.com</p>
          <p className="text-primary-foreground/80">+90 212 345 67 89</p>
        </div>
      </div>

      <div className="border-t border-primary-foreground/20 mt-8 pt-8 text-center">
        <p className="text-primary-foreground/60">
          © 2024 MarketPlus. Tüm hakları saklıdır.
        </p>
      </div>
    </div>
  </footer>
</div>

);
};

export default ECommerceSite;