// ─── ARCHIVE PAGE ──────────────────────────────────────────────────────────
// Editorial list: big typography + small tile. Search + service filter.

function ArchiveHero({ count }) {
  const isMobile = useIsMobile(900);
  return (
    <section style={{
      padding: isMobile ? '120px 24px 40px' : '160px 48px 60px',
      background: 'var(--bg)',
    }}>
      <div style={{ maxWidth: 1400, margin: '0 auto' }}>
        <p style={{
          fontSize: 12, fontWeight: 700, letterSpacing: '2px',
          textTransform: 'uppercase', color: 'var(--accent)',
          marginBottom: 20,
        }}>Alle podcasts · {count}</p>
        <h1 style={{
          fontFamily: 'Plus Jakarta Sans',
          fontSize: isMobile ? 'clamp(40px, 10vw, 60px)' : 'clamp(56px, 7vw, 120px)',
          fontWeight: 500, lineHeight: 0.95, letterSpacing: '-0.035em',
          marginBottom: 28, textWrap: 'balance', maxWidth: 1100,
        }}>Podcasts waar we trots op zijn.</h1>
        <p className="serif" style={{
          fontSize: isMobile ? 20 : 26, lineHeight: 1.4,
          color: 'var(--muted)', maxWidth: 680, textWrap: 'pretty',
        }}>Een greep uit producties voor partners, makers en eigen titels.</p>
      </div>
    </section>
  );
}

function FilterBar({ query, setQuery, serviceFilter, setServiceFilter }) {
  const isMobile = useIsMobile(900);
  const services = window.SPRAAKMAKER_SERVICES || [];
  return (
    <section style={{
      padding: isMobile ? '0 24px 32px' : '0 48px 48px',
      position: 'sticky', top: 72, zIndex: 10,
      background: 'var(--bg)',
    }}>
      <div style={{
        maxWidth: 1400, margin: '0 auto',
        display: 'flex', gap: 16, flexWrap: 'wrap',
        alignItems: 'center', justifyContent: 'space-between',
        padding: '16px 0',
        borderTop: '1px solid var(--border)',
        borderBottom: '1px solid var(--border)',
      }}>
        <div style={{
          position: 'relative', flex: isMobile ? '1 1 100%' : '0 0 320px',
        }}>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"
            style={{ position: 'absolute', left: 14, top: '50%', transform: 'translateY(-50%)', color: 'var(--muted)' }}>
            <circle cx="11" cy="11" r="8" />
            <path d="M21 21l-4.35-4.35" />
          </svg>
          <input
            type="search"
            placeholder="Zoek op titel of opdrachtgever"
            value={query}
            onChange={e => setQuery(e.target.value)}
            style={{
              width: '100%', padding: '10px 14px 10px 40px',
              border: '1px solid var(--border)', borderRadius: 100,
              background: 'var(--bg-alt)', fontSize: 14, fontFamily: 'inherit',
              color: 'var(--fg)', outline: 'none',
            }}
          />
        </div>
        <div style={{
          display: 'flex', gap: 8, flexWrap: 'wrap',
          flex: isMobile ? '1 1 100%' : '1 1 auto',
          justifyContent: isMobile ? 'flex-start' : 'flex-end',
        }}>
          <button onClick={() => setServiceFilter(null)} style={{
            padding: '8px 14px',
            background: !serviceFilter ? 'var(--accent)' : 'transparent',
            color: !serviceFilter ? '#fff' : 'var(--muted)',
            border: `1px solid ${!serviceFilter ? 'var(--accent)' : 'var(--border)'}`,
            borderRadius: 100, fontSize: 13, fontWeight: 500,
            cursor: 'pointer', fontFamily: 'inherit',
          }}>Alle diensten</button>
          {services.map(s => (
            <button key={s.slug} onClick={() => setServiceFilter(s.slug)} style={{
              padding: '8px 14px',
              background: serviceFilter === s.slug ? 'var(--accent)' : 'transparent',
              color: serviceFilter === s.slug ? '#fff' : 'var(--muted)',
              border: `1px solid ${serviceFilter === s.slug ? 'var(--accent)' : 'var(--border)'}`,
              borderRadius: 100, fontSize: 13, fontWeight: 500,
              cursor: 'pointer', fontFamily: 'inherit',
            }}>{s.label}</button>
          ))}
        </div>
      </div>
    </section>
  );
}

function CaseRow({ c, index }) {
  const isMobile = useIsMobile(900);
  const [hover, setHover] = React.useState(false);
  return (
    <a href={`case.html?id=${c.id}`} style={{
      display: 'block', textDecoration: 'none', color: 'inherit',
      borderTop: index === 0 ? '1px solid var(--border)' : 'none',
      borderBottom: '1px solid var(--border)',
      transition: 'background 0.2s',
      background: hover ? 'var(--accent-light)' : 'transparent',
    }}
    onMouseEnter={() => setHover(true)}
    onMouseLeave={() => setHover(false)}>
      <div style={{
        maxWidth: 1400, margin: '0 auto',
        padding: isMobile ? '28px 24px' : '36px 48px',
        display: 'grid',
        gridTemplateColumns: isMobile ? '72px 1fr' : '120px 1fr 200px auto',
        gap: isMobile ? 20 : 40,
        alignItems: 'center',
      }}>
        <div style={{
          width: isMobile ? 72 : 120,
          aspectRatio: '1/1', borderRadius: 12, overflow: 'hidden',
          background: 'var(--blush-soft)', flexShrink: 0,
          transform: hover ? 'scale(1.03)' : 'scale(1)',
          transition: 'transform 0.25s ease',
        }}>
          <img src={c.cover} alt="" style={{
            width: '100%', height: '100%', objectFit: 'cover', display: 'block',
          }} loading="lazy" />
        </div>
        <div style={{ minWidth: 0 }}>
          <p style={{
            fontSize: 11, fontWeight: 700, letterSpacing: '1.5px',
            textTransform: 'uppercase', color: 'var(--accent)',
            marginBottom: isMobile ? 4 : 8,
          }}>{c.client}</p>
          <h3 style={{
            fontFamily: 'Plus Jakarta Sans',
            fontSize: isMobile ? 22 : 'clamp(28px, 3vw, 44px)',
            fontWeight: 500, lineHeight: 1.05, letterSpacing: '-0.025em',
            marginBottom: isMobile ? 6 : 10, textWrap: 'balance',
          }}>{c.title}</h3>
          {!isMobile && (
            <p style={{
              fontSize: 15, lineHeight: 1.5, color: 'var(--muted)',
              textWrap: 'pretty', maxWidth: 720,
            }}>{c.summary}</p>
          )}
        </div>
        {!isMobile && (
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4 }}>
            {c.services.slice(0, 3).map(slug => (
              <span key={slug} style={{
                padding: '3px 10px', background: 'var(--bg-alt)',
                border: '1px solid var(--border)', borderRadius: 100,
                fontSize: 11, fontWeight: 500, color: 'var(--muted)',
              }}>{getServiceLabel(slug)}</span>
            ))}
            {c.services.length > 3 && (
              <span style={{
                padding: '3px 10px', fontSize: 11, fontWeight: 500, color: 'var(--muted)',
              }}>+{c.services.length - 3}</span>
            )}
          </div>
        )}
        {!isMobile && (
          <div style={{
            width: 40, height: 40, borderRadius: '50%',
            background: hover ? 'var(--accent)' : 'transparent',
            border: `1px solid ${hover ? 'var(--accent)' : 'var(--border)'}`,
            color: hover ? '#fff' : 'var(--fg)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            transition: 'all 0.2s',
            transform: hover ? 'translateX(4px)' : 'translateX(0)',
          }}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
              <path d="M5 12h14" /><path d="M13 5l7 7-7 7" />
            </svg>
          </div>
        )}
      </div>
    </a>
  );
}

function ArchiveList({ cases }) {
  if (cases.length === 0) {
    return (
      <div style={{
        maxWidth: 1400, margin: '0 auto', padding: '80px 48px',
        textAlign: 'center', color: 'var(--muted)',
      }}>
        <p style={{ fontSize: 18 }}>Geen podcasts gevonden voor deze filter.</p>
      </div>
    );
  }
  return (
    <section style={{ background: 'var(--bg-alt)' }}>
      {cases.map((c, i) => <CaseRow key={c.id} c={c} index={i} />)}
    </section>
  );
}

async function loadCases() {
  return window.SPRAAKMAKER_CASES || [];
}

function ArchivePage() {
  const [scrolled, setScrolled] = React.useState(false);
  const [query, setQuery] = React.useState('');
  const [serviceFilter, setServiceFilter] = React.useState(null);
  const [cases, setCases] = React.useState(null);

  React.useEffect(() => { loadCases().then(setCases); }, []);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const all = (cases || []).filter(c => c.published !== false);
  const filtered = all.filter(c => {
    if (serviceFilter && !c.services.includes(serviceFilter)) return false;
    if (query) {
      const q = query.toLowerCase();
      return c.title.toLowerCase().includes(q) || c.client.toLowerCase().includes(q);
    }
    return true;
  });

  return (
    <>
      <SiteNav scrolled={scrolled} />
      <ArchiveHero count={all.length} />
      <FilterBar query={query} setQuery={setQuery}
        serviceFilter={serviceFilter} setServiceFilter={setServiceFilter} />
      <ArchiveList cases={filtered} />
      <SiteFooter />
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<ArchivePage />);