// ShopPage.jsx — Funny Farm Creations Shop page

const PRODUCTS = [
  { id:1, title:'Book Cover', subtitle:'Beautiful Sleeve For Your Book', price:'34.00', badge:'Best Seller', badgeDark:true, imgSrc:'product-book-cover.png', imgBg:'#f0eaf8' },
  { id:2, title:'Custom Aprons', subtitle:'Handmade to Order', price:'22.00', badge:null, imgSrc:'custom-apron.png', imgBg:'#fed3c7' },
  { id:3, title:'Diaper Bag', subtitle:'Handmade & Quilted', price:'45.00', badge:null, imgSrc:'diaper-bag.png', imgBg:'#e4e4cc' },
  { id:4, title:'Kitchen Towel', subtitle:'Hand-Stitched Farmhouse', price:'18.00', badge:null, imgSrc:'kitchen-towel.png', imgBg:'#e4e4cc' },
  { id:5, title:'Hen-Pick Mitts', subtitle:'Kitchen Accessories', price:'18.00', badge:null, imgSrc:null, imgBg:'#ffdbd0' },
  { id:6, title:'DIY Scrap Bundle', subtitle:'Fabric Offcuts', price:'15.00', badge:'Popular', badgeDark:false, imgSrc:null, imgBg:'#c8c8b0' },
  { id:7, title:'Farmhouse Mini', subtitle:'Embroidery Wall Art', price:'45.00', badge:null, imgSrc:null, imgBg:'#ffe2dd' },
  { id:8, title:'Percy the Pig', subtitle:'Limited Edition Corduroy', price:'38.00', badge:'Sold Out', badgeDark:false, imgSrc:null, imgBg:'#ffdad4' },
];

const FILTERS = ['All Items', 'Plushies', 'Kitchen', 'Accessories', 'Patterns'];

const ShopPage = ({ onAddToCart }) => {
  const isMobile = useIsMobile();
  const [activeFilter, setActiveFilter] = React.useState('All Items');
  const [search, setSearch] = React.useState('');

  const filtered = PRODUCTS.filter(p => {
    if (search) return p.title.toLowerCase().includes(search.toLowerCase());
    return true;
  });

  return (
    <div style={{ maxWidth: 1200, margin: '0 auto', padding: isMobile ? '24px 16px 48px' : '40px 24px 60px' }}>
      {/* Shop Header */}
      <div className="bg-low" style={{
        borderRadius: 16, padding: isMobile ? '20px 20px' : '32px 40px',
        border: '2px dashed #e4beba', marginBottom: 40,
        display: 'flex', alignItems: 'center', gap: 32,
        position: 'relative', overflow: 'hidden',
      }}>
        <div style={{ flex: 1 }}>
          <span style={{
            fontFamily: "'Plus Jakarta Sans', sans-serif",
            fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase',
            color: '#af101a', background: '#ffdad6', padding: '4px 12px', borderRadius: 9999,
            display: 'inline-block', marginBottom: 12,
          }}>Handmade with Love</span>
          <h1 style={{ fontFamily: "'Plus Jakarta Sans', sans-serif", fontSize: isMobile ? 28 : 40, fontWeight: 700, color: 'var(--text-primary)', marginBottom: 8 }}>
            The Farmhouse Shop
          </h1>
          <p style={{ fontFamily: "'Newsreader', serif", fontSize: 17, color: 'var(--text-secondary)', lineHeight: 1.6 }}>
            Explore our collection of hand-sewn plushies, artisanal kitchen linens, and cozy farm-inspired accessories.
          </p>
        </div>
        {!isMobile && (
          <div style={{
            width: 140, height: 140,
            borderRadius: '50%', overflow: 'hidden',
            border: '6px solid #fff', boxShadow: '0 4px 20px rgba(119,87,77,0.14)',
            transform: 'rotate(3deg)', flexShrink: 0,
            background: '#fed3c7',
          }}>
            <img src="mascot-logo.webp" alt="Mascot" style={{ width: '100%', height: '100%', objectFit: 'contain' }}/>
          </div>
        )}
      </div>

      {/* Filter bar */}
      <div style={{
        display: 'flex', flexDirection: isMobile ? 'column' : 'row',
        flexWrap: isMobile ? 'nowrap' : 'wrap',
        justifyContent: 'space-between', alignItems: isMobile ? 'stretch' : 'center',
        gap: 16, marginBottom: 32, paddingBottom: 24,
        borderBottom: '2px dashed #e4beba',
      }}>
        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
          {FILTERS.map(f => (
            <button key={f} onClick={() => setActiveFilter(f)} style={{
              padding: '8px 18px', borderRadius: 9999,
              fontFamily: "'Plus Jakarta Sans', sans-serif", fontSize: 13, fontWeight: 600, letterSpacing: '0.03em',
              background: activeFilter === f ? '#af101a' : '#ffdad6',
              color: activeFilter === f ? '#fff' : '#795950',
              border: 'none', cursor: 'pointer',
              boxShadow: activeFilter === f ? '0 2px 8px rgba(175,16,26,0.2)' : 'none',
              transition: 'transform 150ms cubic-bezier(0.175,0.885,0.32,1.275), background 150ms',
            }}
              onMouseEnter={e => e.currentTarget.style.transform = 'scale(1.04)'}
              onMouseLeave={e => e.currentTarget.style.transform = 'scale(1)'}
            >{f}</button>
          ))}
        </div>
        <div style={{ position: 'relative', width: isMobile ? '100%' : 'auto' }}>
          <span className="material-symbols-outlined" style={{
            position: 'absolute', left: 12, top: '50%', transform: 'translateY(-50%)',
            color: 'var(--text-muted)', fontSize: 18,
          }}>search</span>
          <input
            value={search}
            onChange={e => setSearch(e.target.value)}
            placeholder="Search the farm..."
            style={{
              fontFamily: "'Newsreader', serif", fontSize: 15,
              padding: '10px 14px 10px 38px',
              background: 'var(--bg-surface)', border: '2px solid #e4beba', borderRadius: 12,
              color: 'var(--text-primary)', outline: 'none',
              width: isMobile ? '100%' : 240,
              boxSizing: 'border-box',
              transition: 'border-color 200ms',
            }}
            onFocus={e => e.target.style.borderColor = '#af101a'}
            onBlur={e => e.target.style.borderColor = '#e4beba'}
          />
        </div>
      </div>

      {/* Product Grid */}
      <div style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(auto-fill, minmax(220px, 1fr))',
        gap: 24,
      }}>
        {filtered.map(p => (
          <ProductCard key={p.id} {...p} onAdd={() => onAddToCart && onAddToCart(p)} />
        ))}
      </div>

      {/* Empty state */}
      {filtered.length === 0 && (
        <div style={{ textAlign: 'center', padding: '60px 0' }}>
          <img src="mascot-logo.webp" alt="" style={{ width: 100, height: 100, objectFit: 'contain', marginBottom: 16 }}/>
          <h3 style={{ fontFamily: "'Plus Jakarta Sans', sans-serif", fontSize: 22, fontWeight: 600, color: 'var(--text-primary)', marginBottom: 8 }}>No results found</h3>
          <p style={{ fontFamily: "'Newsreader', serif", fontSize: 16, color: 'var(--text-secondary)' }}>Clucky says — try a different search!</p>
        </div>
      )}
    </div>
  );
};

Object.assign(window, { ShopPage });