// Saancha Shoes — Listing / Collection page
const { useMemo, useState } = React;
function Listing() {
  const { route, navigate } = useStore();
  const products = window.PRODUCTS;
  const shoes = useMemo(() => products.filter(p => p.group === 'shoes'), [products]);

  const constructions = useMemo(() => {
    const types = [...new Set(shoes.map(p => p.construction))];
    return types.sort();
  }, [shoes]);

  const [activeCons, setActiveCons] = useState(null);

  const filtered = useMemo(() => {
    if (!activeCons) return shoes;
    return shoes.filter(p => p.construction === activeCons);
  }, [shoes, activeCons]);

  return (
    <>
      {/* Breadcrumbs */}
      <div className="container" style={{
        padding: 'var(--space-md) 0',
        fontFamily: 'var(--font-mono)',
        fontSize: 'var(--text-xs)',
        textTransform: 'uppercase',
        letterSpacing: '0.06em',
        color: 'var(--color-text-mute)',
      }}>
        <a onClick={() => navigate({ name: 'home' })} style={{ cursor: 'pointer' }}>Home</a>
        <span style={{ margin: '0 var(--space-xs)', color: 'var(--color-border)' }}>/</span>
        <span style={{ color: 'var(--color-text)' }}>Shoes</span>
      </div>

      {/* Header */}
      <div className="container" style={{ paddingBottom: 'var(--space-xl)', borderBottom: 'var(--rule-width-heavy) solid var(--color-ink)' }}>
        <div className="eyebrow-gold" style={{ color: 'var(--color-text-mute)', marginBottom: 'var(--space-xs)' }}>
          <span style={{ color: 'var(--color-accent)' }}>02_</span>THE COLLECTION
        </div>
        <h1>Handmade Leather Shoes</h1>
        <p style={{ color: 'var(--color-text-soft)', maxWidth: 'var(--width-prose)', marginTop: 'var(--space-sm)' }}>
          Ten designs. Four construction methods. One workshop in Islamabad, Pakistan.
        </p>
      </div>

      {/* Filter Strip */}
      <div className="container" style={{ padding: 'var(--space-lg) 0' }}>
        <div style={{ display: 'flex', gap: 'var(--space-xs)', flexWrap: 'wrap', alignItems: 'center' }}>
          <span style={{
            fontFamily: 'var(--font-mono)',
            fontSize: 'var(--text-xs)',
            textTransform: 'uppercase',
            letterSpacing: '0.08em',
            color: 'var(--color-text-mute)',
            marginRight: 'var(--space-sm)',
          }}>
            Filter by Construction
          </span>
          <button
            onClick={() => setActiveCons(null)}
            style={{
              fontFamily: 'var(--font-mono)',
              fontSize: 'var(--text-xs)',
              textTransform: 'uppercase',
              letterSpacing: '0.06em',
              padding: 'var(--space-xs) var(--space-sm)',
              border: 'var(--rule-width-heavy) solid var(--color-ink)',
              background: !activeCons ? 'var(--color-ink)' : 'transparent',
              color: !activeCons ? 'var(--color-surface)' : 'var(--color-ink)',
              cursor: 'pointer',
            }}
          >
            All ({shoes.length})
          </button>
          {constructions.map(c => {
            const count = shoes.filter(p => p.construction === c).length;
            const active = activeCons === c;
            return (
              <button
                key={c}
                onClick={() => setActiveCons(active ? null : c)}
                style={{
                  fontFamily: 'var(--font-mono)',
                  fontSize: 'var(--text-xs)',
                  textTransform: 'uppercase',
                  letterSpacing: '0.04em',
                  padding: 'var(--space-xs) var(--space-sm)',
                  border: 'var(--rule-width-heavy) solid var(--color-ink)',
                  background: active ? 'var(--color-ink)' : 'transparent',
                  color: active ? 'var(--color-surface)' : 'var(--color-ink)',
                  cursor: 'pointer',
                }}
              >
                {c} ({count})
              </button>
            );
          })}
        </div>
      </div>

      {/* Product Grid */}
      <div className="container">
        {filtered.length === 0 ? (
          <Empty
            title="No shoes match this filter."
            hint="Try a different construction method."
            cta="Show all"
            onCta={() => setActiveCons(null)}
          />
        ) : (
          <>
            <div style={{
              fontFamily: 'var(--font-mono)',
              fontSize: 'var(--text-xs)',
              textTransform: 'uppercase',
              letterSpacing: '0.08em',
              color: 'var(--color-text-mute)',
              marginBottom: 'var(--space-md)',
            }}>
              Showing {filtered.length} of {shoes.length} shoes
            </div>
            <div className="product-grid">
              {filtered.map(p => <ProductCard key={p.id} product={p} />)}
            </div>
          </>
        )}
      </div>

      {/* Spacer */}
      <div style={{ padding: 'var(--space-2xl) 0' }} />
    </>
  );
}

window.Listing = Listing;