// Hi-Fi B — Catalog (mosaico assimétrico, lê do Store)

function CatalogFilter({ active, onChange, cats }) {
  return (
    <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', marginBottom: 32 }}>
      <button className={'chip' + (active === 'tudo' ? ' active' : '')} onClick={() => onChange('tudo')}>
        <Icon name="sparkle" size={13} /> TUDO
      </button>
      {cats.map((c) => (
        <button key={c.id} className={'chip' + (active === c.id ? ' active' : '')} onClick={() => onChange(c.id)}>
          <Icon name={resolveIcon(c.icon)} size={13} /> {c.label}
        </button>
      ))}
    </div>
  );
}

function ProductCard({ p }) {
  const [hover, setHover] = useState(false);
  return (
    <a href={`product.html#${p.id}`} className="lift" onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{ position: 'relative', display: 'block', background: 'var(--ink)', border: '3px solid var(--ink)', boxShadow: '6px 6px 0 var(--primary)', overflow: 'hidden', aspectRatio: '1 / 1', transition: 'transform 0.18s, box-shadow 0.18s' }}>
      <div style={{ position: 'absolute', inset: 0, background: `linear-gradient(135deg, var(--primary), var(--secondary))` }}>
        {p.sketch && <img src={p.sketch} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', mixBlendMode: 'luminosity', opacity: 0.45, filter: 'contrast(0.8) saturate(0.4)' }} />}
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(135deg, rgba(60,19,97,0.6), rgba(199,125,255,0.3))' }}></div>
        <svg style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0.55 }} viewBox="0 0 300 400" preserveAspectRatio="none">
          <path d="M40 60 L 260 60 M 40 70 L 260 70 M 40 90 Q 150 80 260 90" stroke="var(--accent)" strokeWidth="2" fill="none" strokeDasharray="4 4" />
          <circle cx="80" cy="160" r="40" stroke="var(--accent)" strokeWidth="2" fill="none" strokeDasharray="3 3" />
          <path d="M 160 200 L 240 280" stroke="var(--accent)" strokeWidth="2" fill="none" />
        </svg>
        <div style={{ position: 'absolute', top: 12, left: 12, fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--accent)', letterSpacing: '0.2em', fontWeight: 700, background: 'rgba(0,0,0,0.6)', padding: '4px 8px', border: '1.5px solid var(--accent)', display: 'flex', alignItems: 'center', gap: 5 }}>
          <Icon name="pencil" size={10} /> SKETCH / 3D
        </div>
      </div>
      <div style={{ position: 'absolute', inset: 0, clipPath: hover ? 'inset(0 0 0 0)' : 'inset(0 100% 0 0)', transition: 'clip-path 0.5s cubic-bezier(0.7, 0, 0.3, 1)' }}>
        {p.image && <img src={p.image} alt={p.name} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />}
        <div style={{ position: 'absolute', top: 12, left: 12, fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--primary)', letterSpacing: '0.2em', fontWeight: 700, background: 'var(--accent)', padding: '4px 8px', border: '1.5px solid var(--primary)', display: 'flex', alignItems: 'center', gap: 5 }}>
          <Icon name="sparkle" size={10} /> PEÇA FINAL
        </div>
      </div>
      {p.badge && (
        <div style={{ position: 'absolute', top: 14, right: 14, background: p.badgeColor === 'accent' ? 'var(--accent)' : 'var(--ink)', color: p.badgeColor === 'accent' ? 'var(--primary)' : 'var(--accent)', padding: '5px 10px', fontFamily: 'var(--font-mono)', fontSize: 10, fontWeight: 700, letterSpacing: '0.15em', transform: 'rotate(3deg)', border: '1.5px solid var(--ink)', zIndex: 2 }}>
          {p.badge}
        </div>
      )}
      <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, background: 'var(--paper)', borderTop: '3px solid var(--ink)', padding: '14px 16px', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 12, zIndex: 2 }}>
        <div>
          <div className="font-mono" style={{ fontSize: 9, color: 'var(--muted)', letterSpacing: '0.15em', textTransform: 'uppercase', fontWeight: 600 }}>{p.categoryLabel}</div>
          <div style={{ fontWeight: 800, fontSize: 14, marginTop: 3, fontFamily: 'var(--font-display)', textTransform: 'uppercase', letterSpacing: '-0.01em', color: 'var(--ink)' }}>{p.name}</div>
        </div>
        <div style={{ fontFamily: 'var(--font-display)', fontSize: 18, color: p.priceType === 'fixed' ? 'var(--primary)' : 'var(--muted)', whiteSpace: 'nowrap' }}>
          {p.priceType === 'fixed' ? p.price : 'sob consulta'}
        </div>
      </div>
      <div style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%) rotate(-4deg)', opacity: hover ? 0 : 1, transition: 'opacity 0.3s', background: 'var(--ink)', color: 'var(--accent)', padding: '8px 14px', fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 700, letterSpacing: '0.15em', border: '2px solid var(--accent)', pointerEvents: 'none', zIndex: 1, display: 'flex', alignItems: 'center', gap: 6, whiteSpace: 'nowrap' }}>
        <Icon name="sparkle" size={11} /> PASSE O MOUSE PARA VER <Icon name="sparkle" size={11} />
      </div>
    </a>
  );
}

function Catalog() {
  const [active, setActive] = useState('tudo');
  const [products, setProducts] = useState(window.Store.getProducts());
  const [cats, setCats] = useState(window.Store.getCategories());
  useEffect(() => window.Store.subscribe(() => {
    setProducts(window.Store.getProducts());
    setCats(window.Store.getCategories());
  }), []);

  const filtered = active === 'tudo' ? products : products.filter((p) => p.category === active);
  const s = window.Store.getSettings();

  return (
    <section id="catalog" style={{ padding: 'var(--section-pad-y) 0', background: 'var(--paper-warm)', position: 'relative' }}>
      <div className="container">
        <div className="section-tag reveal">03 / O Vault</div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 32, flexWrap: 'wrap', gap: 20 }}>
          <h2 className="h-section reveal">O <em>VAULT</em>.<br/>EDIÇÃO 2026.</h2>
          <div className="reveal" style={{ maxWidth: 320, fontSize: 15, color: 'var(--ink-2)', lineHeight: 1.5 }}>
            Peças prontas e exemplos de personalizações já entregues. <strong>Cada uma é única</strong> — não imprimimos a mesma duas vezes.
          </div>
        </div>
        <div className="reveal"><CatalogFilter active={active} onChange={setActive} cats={cats} /></div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(220px, 300px))', gap: 16, justifyContent: 'flex-start' }}>
          {filtered.map((p) => <ProductCard key={p.id} p={p} />)}
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 48, flexWrap: 'wrap', gap: 16 }}>
          <span className="font-mono" style={{ fontSize: 12, color: 'var(--muted)', letterSpacing: '0.1em' }}>
            Mostrando {filtered.length} de {products.length} peças
          </span>
          <a href={`https://wa.me/${s.whatsapp}`} target="_blank" rel="noopener" className="btn btn-primary">
            <Icon name="whatsapp" size={14} /> Pedir algo personalizado
          </a>
        </div>
      </div>
    </section>
  );
}

window.Catalog = Catalog;
