// CATEGORIES — pill cloud

const cats = [
  { t: 'Bills', n: 14, c: 'var(--accent)' },
  { t: 'Travel', n: 6, c: '#5567A8' },
  { t: 'Receipts', n: 142, c: 'var(--ink-mute)' },
  { t: 'Subscriptions', n: 14, c: '#8B6FA8' },
  { t: 'Parcels', n: 4, c: '#5C8A6F' },
  { t: 'Insurance', n: 3, c: 'var(--ink-faint)' },
  { t: 'Meetings', n: 11, c: '#7CA88B' },
  { t: 'Promotions', n: 247, c: 'var(--ink-faint)' },
  { t: 'Investments', n: 5, c: '#5567A8' },
  { t: 'Statements', n: 12, c: 'var(--ink-mute)' },
];

function Categories() {
  return (
    <section style={{
      position: 'relative', padding: '120px 0',
      background: 'var(--bg-deep)', overflow: 'hidden'
    }}>
      <AmbientGrid density={48} dark />

      <div style={{ position: 'relative', maxWidth: 1100, margin: '0 auto', padding: '0 32px', textAlign: 'center', zIndex: 2 }}>
        <Reveal style={{ display: 'flex', justifyContent: 'center', marginBottom: 16 }}>
          <SectionMark num="05" label="Auto-categorized" />
        </Reveal>
        <Reveal delay={100}>
          <h2 style={{
            fontFamily: 'var(--serif)', fontWeight: 400,
            fontSize: 'clamp(2.2rem, 4.8vw, 4rem)', lineHeight: 1,
            letterSpacing: '-0.03em', margin: '0 0 24px',
            maxWidth: 800, marginInline: 'auto', textWrap: 'balance'
          }}>
            Every email finds<br />
            <span className="italic" style={{ color: 'var(--accent)' }}>its place.</span>
          </h2>
        </Reveal>
        <Reveal delay={200}>
          <p style={{
            maxWidth: 520, margin: '0 auto 56px',
            fontSize: 16, lineHeight: 1.7, fontWeight: 300, color: 'var(--ink-mute)',
            textWrap: 'pretty'
          }}>
            Scrub auto-tags everything as it arrives. Click a category — see only what matters there.
            No folders. No rules. No setup.
          </p>
        </Reveal>

        <div style={{
          display: 'flex', flexWrap: 'wrap', gap: 12, justifyContent: 'center',
          maxWidth: 800, margin: '0 auto'
        }}>
          {cats.map((c, i) => (
            <Reveal key={i} delay={i * 30}>
              <div style={{
                display: 'inline-flex', alignItems: 'center', gap: 10,
                padding: '10px 16px',
                background: 'rgba(255,255,255,0.04)',
                border: `1px solid ${c.c}30`,
                borderRadius: 99,
                transition: 'all 0.3s',
                cursor: 'default'
              }}
                onMouseEnter={(e) => {
                  e.currentTarget.style.background = `${c.c}14`;
                  e.currentTarget.style.borderColor = `${c.c}80`;
                  e.currentTarget.style.transform = 'translateY(-2px)';
                }}
                onMouseLeave={(e) => {
                  e.currentTarget.style.background = 'rgba(255,255,255,0.04)';
                  e.currentTarget.style.borderColor = `${c.c}30`;
                  e.currentTarget.style.transform = 'translateY(0)';
                }}
              >
                <span style={{
                  fontFamily: 'var(--serif)', fontSize: 16, fontStyle: 'italic',
                  color: c.c
                }}>{c.t}</span>
                <span style={{
                  fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--ink-faint)'
                }}>{c.n}</span>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Categories = Categories;