// NOICE Premium — Katalog Lengkap

function CatalogPage({ onBack }) {
  const { NOICE_YELLOW, NOICE_BLACK, NOICE_BLACK_2, NOICE_BLACK_3, NOICE_GRAY_1, NOICE_GRAY_2, NOICE_GRAY_3, NOICE_GRAY_4 } = window.NOICE_TOKENS;
  const accent = NOICE_YELLOW;

  const [isMobile, setIsMobile] = React.useState(window.innerWidth < 768);
  React.useEffect(() => {
    let t;
    const onResize = () => { clearTimeout(t); t = setTimeout(() => setIsMobile(window.innerWidth < 768), 300); };
    window.addEventListener('resize', onResize);
    return () => { window.removeEventListener('resize', onResize); clearTimeout(t); };
  }, []);

  const W = isMobile
    ? { maxWidth: 1200, margin: '0 auto', padding: '0 16px' }
    : { maxWidth: 1200, margin: '0 auto', padding: '0 40px' };

  const sections = [
    { key: 'podcasts',    label: 'Podcast',    items: CATALOG.podcasts    || [], square: true  },
    { key: 'audioseries', label: 'Audioseries', items: CATALOG.audioseries || [], square: false },
    { key: 'audiobooks',  label: 'Audiobook',   items: CATALOG.audiobooks  || [], square: false },
  ].filter(s => s.items.length > 0);

  const [activeTab, setActiveTab] = React.useState('all');
  const visibleSections = activeTab === 'all' ? sections : sections.filter(s => s.key === activeTab);

  return (
    <div style={{ background: NOICE_BLACK, color: 'white', minHeight: '100vh', fontFamily: '"Readex Pro", system-ui, sans-serif' }}>

      {/* NAV */}
      <nav style={{
        padding: isMobile ? '0 16px' : '0 40px', height: 64, display: 'flex', alignItems: 'center', gap: 20,
        position: 'sticky', top: 0, zIndex: 100,
        background: 'rgba(20,20,20,0.9)', backdropFilter: 'blur(24px)',
        borderBottom: `1px solid ${NOICE_GRAY_4}`,
      }}>
        <button onClick={() => { mixpanel.track('catalog_back_click'); onBack(); }} style={{ display: 'flex', alignItems: 'center', gap: 8, background: 'transparent', border: 'none', color: NOICE_GRAY_2, fontSize: 14, cursor: 'pointer', padding: '6px 0' }}>
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M19 12H5M11 6l-6 6 6 6"/></svg>
          Kembali
        </button>
        <span style={{ fontSize: 13, color: NOICE_GRAY_3 }}>Katalog Premium</span>
      </nav>

      {/* HEADER */}
      <div style={{ ...W, padding: isMobile ? '32px 16px 24px' : '52px 40px 32px' }}>
        <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.15em', color: accent, marginBottom: 10 }}>SEMUA KONTEN PREMIUM</div>
        <h1 style={{ fontSize: isMobile ? 32 : 52, fontWeight: 700, letterSpacing: '-0.03em', margin: '0 0 20px' }}>
          Katalog Lengkap<span style={{ color: accent }}>.</span>
        </h1>
        {/* FILTER TABS */}
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
          {[{ key: 'all', label: 'Semua' }, ...sections.map(s => ({ key: s.key, label: s.label }))].map(tab => (
            <button
              key={tab.key}
              onClick={() => { mixpanel.track('catalog_tab_changed', { tab: tab.key }); setActiveTab(tab.key); }}
              style={{
                padding: '8px 20px', borderRadius: 999, fontSize: 13, fontWeight: 700, cursor: 'pointer', border: 'none',
                background: activeTab === tab.key ? accent : 'rgba(255,255,255,0.07)',
                color: activeTab === tab.key ? NOICE_BLACK : NOICE_GRAY_2,
                transition: 'background 0.15s, color 0.15s',
              }}
            >
              {tab.label}
            </button>
          ))}
        </div>
      </div>

      {/* SECTIONS */}
      {visibleSections.map(sec => (
        <section key={sec.key} style={{ ...W, paddingBottom: isMobile ? 40 : 60 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 20, borderBottom: `1px solid ${NOICE_GRAY_4}`, paddingBottom: 14 }}>
            <h2 style={{ fontSize: isMobile ? 20 : 28, fontWeight: 700, margin: 0, letterSpacing: '-0.02em' }}>{sec.label}</h2>
            <span style={{ padding: '4px 12px', borderRadius: 999, background: 'rgba(250,216,16,0.1)', border: '1px solid rgba(250,216,16,0.35)', fontSize: 12, fontWeight: 700, color: accent }}>
              {sec.items.length} katalog
            </span>
          </div>
          <div style={{
            display: 'grid',
            gridTemplateColumns: isMobile ? 'repeat(2, 1fr)' : (sec.square ? 'repeat(auto-fill, minmax(160px, 1fr))' : 'repeat(auto-fill, minmax(140px, 1fr))'),
            gap: isMobile ? 10 : 16,
            overflow: 'hidden',
          }}>
            {sec.items.map((item) => (
              <a
                key={item.id}
                href={window.getItemUrl(item)}
                target="_blank"
                rel="noopener noreferrer"
                style={{ textDecoration: 'none', color: 'inherit', display: 'block', minWidth: 0 }}
                onClick={() => mixpanel.track('catalog_item_click', { content_id: item.id, content_title: item.title, content_type: sec.key, badge: item.badge })}
              >
                <div style={{ borderRadius: 12, overflow: 'hidden', background: NOICE_BLACK_3, border: `1px solid ${NOICE_GRAY_4}` }}>
                  <div style={{ position: 'relative' }}>
                    <img
                      src={item.image}
                      alt={item.title}
                      loading="lazy"
                      style={{ width: '100%', height: 'auto', display: 'block', maxWidth: '100%' }}
                    />
                    {item.badge && (
                      <div style={{ position: 'absolute', top: 8, left: 8, padding: '3px 7px', background: accent, color: NOICE_BLACK, fontSize: 9, fontWeight: 800, borderRadius: 4, letterSpacing: '0.05em' }}>
                        {item.badge}
                      </div>
                    )}
                    {item.streams && (
                      <div style={{ position: 'absolute', top: 8, right: 8, display: 'flex', alignItems: 'center', gap: 3, padding: '3px 7px', borderRadius: 999, background: 'rgba(0,0,0,0.6)', backdropFilter: 'blur(6px)', fontSize: 10, fontWeight: 700, color: 'white' }}>
                        <svg width="8" height="8" viewBox="0 0 24 24" fill="white"><path d="M8 5v14l11-7z"/></svg>
                        {item.streams}
                      </div>
                    )}
                  </div>
                  <div style={{ padding: isMobile ? '10px 10px 12px' : '12px 12px 14px' }}>
                    <div style={{ fontSize: isMobile ? 12 : 13, fontWeight: 700, lineHeight: 1.3, marginBottom: 3, color: 'white' }}>{item.title}</div>
                    <div style={{ fontSize: isMobile ? 10 : 11, color: NOICE_GRAY_3 }}>{item.host}</div>
                  </div>
                </div>
              </a>
            ))}
          </div>
        </section>
      ))}

    </div>
  );
}

window.CatalogPage = CatalogPage;