// ── COLLECTION CARD ─────────────────────────────────────────────
function CollectionCard({ item, accent, dark }) {
  const [hovered, setHovered] = useState(false);
  const href = `/urun.html?p=${encodeURIComponent(item.slug)}`;
  const isMobile = window.innerWidth <= 768;
  
  return (
    <a
      href={href}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      style={{
        position:'relative', overflow:'hidden', cursor:'pointer',
        display:'block', textDecoration:'none', color:'inherit',
        border: `1px solid ${hovered ? accent : 'rgba(201,168,76,0.15)'}`,
        transition:'border-color 0.4s, transform 0.4s',
        background: dark ? '#252320' : '#ece5d8',
        transform: hovered ? 'translateY(-4px)' : 'translateY(0)',
      }}
    >
      {/* Category badge */}
      {item.categoryLabel && (
        <div style={{
          position:'absolute', top:isMobile ? 12 : 18, left:isMobile ? 12 : 18, zIndex:4,
          background:'rgba(26,25,24,0.88)', border:'1px solid rgba(201,168,76,0.5)',
          padding:'clamp(5px, 1.2vw, 6px) clamp(10px, 2.2vw, 12px)',
          fontFamily:'var(--sans)', fontSize:'clamp(7.5px, 1.6vw, 8px)', letterSpacing:'0.22em',
          fontWeight:600, color:'var(--gold)', textTransform:'uppercase',
          backdropFilter:'blur(6px)',
        }}>{item.categoryLabel}</div>
      )}

      <div style={{overflow:'hidden', height:'clamp(240px, 50vw, 320px)', position:'relative'}}>
        <img src={item.img} alt={item.name}
          style={{
            width:'100%', height:'100%', objectFit:'cover',
            transform: hovered ? 'scale(1.06)' : 'scale(1)',
            transition:'transform 0.8s ease',
            filter: hovered ? 'brightness(0.8)' : 'brightness(0.7)',
          }}
        />
        <div style={{position:'absolute',bottom:0,left:0,right:0,height:2,background:`linear-gradient(90deg, transparent, ${accent}, transparent)`}}/>
      </div>

      <div style={{padding:'clamp(22px, 4.5vw, 26px) clamp(20px, 4vw, 28px) clamp(24px, 5vw, 28px)'}}>
        <div style={{
          fontFamily:'var(--sans)', fontSize:'clamp(8px, 1.6vw, 8.5px)', letterSpacing:'0.3em',
          fontWeight:600, textTransform:'uppercase', color: accent, marginBottom:8,
        }}>{item.series}</div>
        <h3 style={{
          fontFamily:'var(--serif)', fontSize:'clamp(20px, 4.2vw, 24px)', fontWeight:400,
          color: dark ? 'var(--cream)' : '#1a1918', marginBottom:10, lineHeight:1.2,
        }}>{item.name}</h3>
        <p style={{
          fontFamily:'var(--sans)', fontSize:'clamp(11px, 2.2vw, 11.5px)', lineHeight:1.8, fontWeight:300,
          color: dark ? 'rgba(242,235,224,0.6)' : 'rgba(26,25,24,0.6)',
        }}>{item.desc}</p>
        <div style={{marginTop:22, display:'flex', alignItems:'center', gap:12, opacity: hovered ? 1 : 0, transition:'opacity 0.3s'}}>
          <div style={{flex:1,height:1,background:`linear-gradient(90deg,${accent},transparent)`}}/>
          <span style={{fontFamily:'var(--sans)', fontSize:'clamp(8px, 1.6vw, 8.5px)', letterSpacing:'0.25em', fontWeight:600, color: accent, textTransform:'uppercase'}}>Detayları Gör →</span>
        </div>
      </div>
    </a>
  );
}

// ── COLLECTIONS SECTION ─────────────────────────────────────────
function Collections() {
  const [filter, setFilter] = useState('all');
  const visible = filter === 'all' ? ALL_ITEMS : ALL_ITEMS.filter(i => i.category === filter);
  const isMobile = window.innerWidth <= 768;

  return (
    <section id="koleksiyonlar" style={{background:'var(--anthracite)', padding:'clamp(60px, 12vw, 100px) 0'}}>
      <div style={{maxWidth:1280, margin:'0 auto', padding:'0 clamp(20px, 5vw, 60px)'}}>
        <div style={{textAlign:'center', marginBottom:'clamp(28px, 6vw, 32px)'}}>
          <span className="section-eyebrow">Koleksiyonlarımız</span>
          <h2 style={{fontFamily:'var(--serif)',fontSize:'clamp(32px,4vw,58px)',fontWeight:300,color:'var(--cream)',marginBottom:20,lineHeight:1.1}}>
            Üç Çizgi, Bir <em style={{fontStyle:'italic',color:'var(--gold-light)'}}>Mükemmellik</em>
          </h2>
          <p style={{fontFamily:'var(--sans)',fontSize:'clamp(11.5px, 2.3vw, 12.5px)',lineHeight:1.9,fontWeight:300,color:'rgba(242,235,224,0.6)',maxWidth:640,margin:'18px auto 0',padding:'0 20px'}}>
            Ağır varaklı klasik takımlardan, çağdaş avangard hatlara ve sade-şık Lotus serisine uzanan geniş bir yelpaze. Her koleksiyonumuz aynı ustalıkla üretilir.
          </p>
          <div style={{margin:'28px auto 0'}}><OrnamentDivider width={Math.min(280, window.innerWidth - 60)}/></div>
        </div>

        {/* Filter pills */}
        <div style={{display:'flex', justifyContent:'center', gap:isMobile ? 10 : 14, marginBottom:'clamp(40px, 8vw, 52px)', flexWrap:'wrap', padding:'0 10px'}}>
          {FILTERS.map(f => (
            <button key={f.key} onClick={() => setFilter(f.key)} style={{
              padding:'clamp(14px, 3vw, 16px) clamp(20px, 4vw, 28px)', border:'1.5px solid',
              borderColor: filter === f.key ? 'var(--gold)' : 'rgba(201,168,76,0.45)',
              background: filter === f.key ? 'var(--gold)' : 'rgba(201,168,76,0.04)',
              color: filter === f.key ? 'var(--anthracite)' : 'var(--cream)',
              cursor:'pointer', fontFamily:'var(--sans)', fontSize:'clamp(9px, 2vw, 11px)',
              letterSpacing:'0.22em', fontWeight:600, textTransform:'uppercase',
              transition:'all 0.3s', display:'inline-flex', alignItems:'center', gap:isMobile ? 8 : 14,
              boxShadow: filter === f.key ? '0 4px 24px rgba(201,168,76,0.25)' : 'none',
              minHeight:48,
            }}
            onMouseEnter={e => { if (filter !== f.key) { e.currentTarget.style.borderColor = 'var(--gold)'; e.currentTarget.style.background = 'rgba(201,168,76,0.12)'; }}}
            onMouseLeave={e => { if (filter !== f.key) { e.currentTarget.style.borderColor = 'rgba(201,168,76,0.45)'; e.currentTarget.style.background = 'rgba(201,168,76,0.04)'; }}}
            >
              {f.label}
              <span style={{
                fontSize:'clamp(12px, 2.6vw, 13px)', padding:'3px 10px', minWidth:28,
                background: filter === f.key ? 'rgba(26,25,24,0.22)' : 'var(--gold)',
                color: 'var(--anthracite)',
                fontFamily:'var(--serif)', fontWeight:600, letterSpacing:0,
                display:'inline-flex', alignItems:'center', justifyContent:'center',
                lineHeight:1,
              }}>{f.count}</span>
            </button>
          ))}
        </div>

        <div style={{display:'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(min(300px, 100%), 1fr))', gap:'clamp(16px, 3vw, 24px)'}}>
          {visible.map((item, i) => (
            <CollectionCard key={`${item.category}-${i}`} item={item} accent="#c9a84c" dark={true}/>
          ))}
        </div>

        {visible.length === 0 && (
          <div style={{textAlign:'center',padding:'60px 0',color:'var(--text-muted)',fontFamily:'var(--sans)',fontSize:'clamp(11px, 2.2vw, 12px)'}}>Bu kategoride ürün bulunamadı.</div>
        )}
      </div>
    </section>
  );
}

Object.assign(window, { CollectionCard, Collections });