import React, { useState } from 'react';

// CuteFashion_Necessities_App.jsx
// Single-file React component (Tailwind CSS required in parent project)
// Uses shadcn/ui component placeholders (optional). This is a self-contained UI you can drop into a React app.

export default function CuteFashionApp() {
  const sampleProducts = [
    {
      id: 1,
      name: 'Petal Heart Crossbody',
      price: 34,
      tag: 'Bags',
      desc: 'Small crossbody bag with heart print — perfect for quick outings.',
      img: 'https://images.unsplash.com/photo-1520975919868-6a0d6b6a3b23?auto=format&fit=crop&w=800&q=60'
    },
    {
      id: 2,
      name: 'Chunky Pearl Hair Clip',
      price: 12,
      tag: 'Accessories',
      desc: 'Shiny pearl clip — elevates any messy bun.',
      img: 'https://images.unsplash.com/photo-1520975919868-6a0d6b6a3b23?auto=format&fit=crop&w=800&q=60'
    },
    {
      id: 3,
      name: 'Cloudy Knit Sweater',
      price: 48,
      tag: 'Tops',
      desc: 'Cozy oversized knit in pastel shades.',
      img: 'https://images.unsplash.com/photo-1541099649105-f69ad21f3246?auto=format&fit=crop&w=800&q=60'
    },
    {
      id: 4,
      name: 'Twirl Mini Skirt',
      price: 29,
      tag: 'Bottoms',
      desc: 'Flared mini skirt that moves with you.',
      img: 'https://images.unsplash.com/photo-1520975919868-6a0d6b6a3b23?auto=format&fit=crop&w=800&q=60'
    }
  ];

  const [products] = useState(sampleProducts);
  const [query, setQuery] = useState('');
  const [activeTag, setActiveTag] = useState('All');
  const [cart, setCart] = useState([]);
  const [selected, setSelected] = useState(null);
  const tags = ['All', ...Array.from(new Set(products.map(p => p.tag)))];

  function addToCart(product) {
    setCart(prev => {
      const found = prev.find(i => i.id === product.id);
      if (found) return prev.map(i => i.id === product.id ? { ...i, qty: i.qty + 1 } : i);
      return [...prev, { ...product, qty: 1 }];
    });
  }

  function changeQty(id, delta) {
    setCart(prev => prev
      .map(i => i.id === id ? { ...i, qty: i.qty + delta } : i)
      .filter(i => i.qty > 0)
    );
  }

  function total() {
    return cart.reduce((s, i) => s + i.price * i.qty, 0).toFixed(2);
  }

  const visible = products.filter(p => {
    const matchesQuery = (p.name + p.desc).toLowerCase().includes(query.toLowerCase());
    const matchesTag = activeTag === 'All' ? true : p.tag === activeTag;
    return matchesQuery && matchesTag;
  });

  return (
    <div className="min-h-screen bg-gradient-to-b from-pink-50 to-white text-gray-800">
      <header className="max-w-6xl mx-auto p-6 flex items-center justify-between">
        <div className="flex items-center gap-4">
          <div className="w-12 h-12 flex items-center justify-center rounded-2xl bg-pink-200 text-pink-700 font-bold text-lg">CF</div>
          <div>
            <h1 className="text-2xl font-extrabold">CuteFashion Necessities</h1>
            <p className="text-xs text-gray-500">Essentials for every cute outfit</p>
          </div>
        </div>

        <div className="flex items-center gap-4">
          <div className="hidden md:flex items-center gap-2 bg-white rounded-full px-3 py-1 shadow-sm">
            <input
              aria-label="Search products"
              placeholder="Search dresses, bags, accessories..."
              value={query}
              onChange={(e) => setQuery(e.target.value)}
              className="bg-transparent outline-none text-sm"
            />
            <button className="text-sm text-pink-500 font-medium" onClick={() => setQuery('')}>Clear</button>
          </div>

          <button
            aria-label="Open cart"
            onClick={() => setSelected('cart')}
            className="relative rounded-lg p-2 hover:bg-pink-50"
          >
            <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2 6m13-6l2 6m-6 0a1 1 0 11-2 0 1 1 0 012 0z" />
            </svg>
            {cart.length > 0 && (
              <span className="absolute -top-1 -right-1 bg-pink-600 text-white text-xs rounded-full px-1">{cart.reduce((s,i)=>s+i.qty,0)}</span>
            )}
          </button>
        </div>
      </header>

      <main className="max-w-6xl mx-auto px-6 pb-20">
        <section className="grid grid-cols-1 md:grid-cols-4 gap-6">
          <aside className="md:col-span-1 bg-white p-4 rounded-2xl shadow">
            <h3 className="font-semibold mb-3">Filter</h3>
            <div className="flex flex-wrap gap-2">
              {tags.map(tag => (
                <button
                  key={tag}
                  onClick={() => setActiveTag(tag)}
                  className={`px-3 py-1 rounded-full text-sm ${activeTag === tag ? 'bg-pink-500 text-white' : 'bg-pink-50 text-pink-600'}`}>
                  {tag}
                </button>
              ))}
            </div>

            <div className="mt-6">
              <h4 className="text-sm font-medium text-gray-600">Quick tip</h4>
              <p className="text-xs text-gray-500 mt-2">Click a product to view details. Add to cart from the modal or product card.</p>
            </div>
          </aside>

          <div className="md:col-span-3">
            <div className="mb-4 flex items-center justify-between">
              <p className="text-sm text-gray-500">Showing <span className="font-medium">{visible.length}</span> results</p>
              <div className="flex items-center gap-2 md:hidden">
                <input
                  placeholder="Search"
                  value={query}
                  onChange={(e)=>setQuery(e.target.value)}
                  className="bg-white px-3 py-2 rounded-lg shadow-sm text-sm"
                />
              </div>
            </div>

            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
              {visible.map(p => (
                <article key={p.id} className="bg-white rounded-2xl shadow group overflow-hidden">
                  <div className="aspect-[4/3] bg-gray-100 overflow-hidden">
                    <img src={p.img} alt={p.name} className="w-full h-full object-cover transform group-hover:scale-105 transition" />
                  </div>
                  <div className="p-4">
                    <div className="flex items-start justify-between">
                      <div>
                        <h3 className="font-semibold">{p.name}</h3>
                        <p className="text-xs text-gray-500">{p.tag}</p>
                      </div>
                      <div className="text-right">
                        <p className="font-bold">${p.price}</p>
                        <p className="text-xs text-gray-400">incl. taxes</p>
                      </div>
                    </div>

                    <p className="text-sm text-gray-600 mt-3 line-clamp-2">{p.desc}</p>

                    <div className="mt-4 flex gap-3">
                      <button onClick={() => setSelected(p)} className="flex-1 py-2 rounded-lg border border-pink-100 text-sm">View</button>
                      <button onClick={() => addToCart(p)} className="py-2 px-4 rounded-lg bg-pink-500 text-white text-sm">Add</button>
                    </div>
                  </div>
                </article>
              ))}
            </div>
          </div>
        </section>
      </main>

      <footer className="max-w-6xl mx-auto px-6 pb-12">
        <div className="bg-white rounded-2xl p-6 shadow flex items-center justify-between">
          <div>
            <h4 className="font-semibold">Stay in the loop</h4>
            <p className="text-xs text-gray-500">Subscribe for restocks and exclusive drops.</p>
          </div>
          <form onSubmit={(e)=>e.preventDefault()} className="flex gap-2">
            <input placeholder="your@email.com" className="px-4 py-2 rounded-lg border" />
            <button className="px-4 py-2 rounded-lg bg-pink-600 text-white">Subscribe</button>
          </form>
        </div>
      </footer>

      {/* Modal system (simple) */}
      {selected && selected !== 'cart' && (