// Filter.jsx — section header + tabs
function Filter({ active, onChange, counts }) {
  const tabs = ['All', 'macOS', 'Chrome', 'Web'];
  return (
    <div style={{
      maxWidth: 1200, margin: '0 auto', padding: '0 var(--gutter)',
    }}>
      {/* Big section title */}
      <div style={{ paddingTop: 96, paddingBottom: 32 }}>
        <div className="overline">§ Catalog</div>
        <div style={{
          marginTop: 16, display: 'flex',
          alignItems: 'flex-end', justifyContent: 'space-between',
          flexWrap: 'wrap', gap: 24,
        }}>
          <h2 style={{
            fontSize: 'clamp(40px, 6vw, 72px)', lineHeight: 0.95,
            letterSpacing: '-0.03em', color: 'var(--fg)', fontWeight: 400,
            maxWidth: 760,
          }}>
            Products,<br/>doing one thing each.
          </h2>
          <p style={{
            fontSize: 14, color: 'var(--fg-2)', maxWidth: 320, lineHeight: 1.55,
          }}>
            Native apps for the Mac, browser extensions, and free web utilities.
            Click any card for the long version.
          </p>
        </div>
      </div>

      {/* tabs */}
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
        borderTop: '1px solid var(--border)',
        borderBottom: '1px solid var(--border)',
      }}>
        <div style={{
          fontFamily: 'var(--font-mono)', fontSize: 13,
          color: 'var(--fg-2)', letterSpacing: '0.04em',
          padding: '14px 0',
        }}>
          Products
        </div>
        <div className="nn-filter-tabs">
          {tabs.map((t) => {
            const isActive = t === active;
            const count = counts[t] || 0;
            return (
              <button key={t}
                onClick={() => onChange(t)}
                style={{
                  all: 'unset', cursor: 'pointer',
                  fontFamily: 'var(--font-mono)', fontSize: 13,
                  color: isActive ? 'var(--fg)' : 'var(--fg-2)',
                  padding: '14px 16px',
                  borderBottom: isActive ? '2px solid var(--fg)' : '2px solid transparent',
                  marginBottom: -1,
                  transition: 'color 120ms var(--ease-out), border-color 120ms var(--ease-out)',
                }}>
                {t}{' '}
                <span style={{ color: 'var(--fg-3)', fontSize: 11, marginLeft: 2 }}>
                  {count}
                </span>
              </button>
            );
          })}
        </div>
      </div>
    </div>
  );
}
window.Filter = Filter;