// ============================================================
// KENNISBANK · Hub components
// ============================================================

function KbHero() {
  return (
    <section className="kb-hero">
      <div className="kb-hero-inner">
        <div className="eyebrow-big"><span className="bar"></span>Kennisbank</div>
        <h1>
          Onze <span className="grad">hardop-denken-bibliotheek</span>.
        </h1>
        <p className="lede">
          Verhalen, podcasts en tools over wat we leren bij MKB-bedrijven die het
          repetitieve werk weghalen bij hun mensen.
        </p>
      </div>
    </section>
  );
}

function KbLegend() {
  return (
    <div className="kb-legend" aria-label="Content types">
      {Object.entries(KB_TYPES).map(([id, t]) => (
        <span
          key={id}
          className="kb-chip"
          style={{ '--chip-bg': t.bg, '--chip-color': t.color, '--chip-accent': t.accent }}
        >
          {t.label}
        </span>
      ))}
    </div>
  );
}

// Meta block used inside cards · type chip + date + reading time
function KbMeta({ item, compact }) {
  const t = KB_TYPES[item.type] || KB_TYPES.blog;
  const dateStr = kbFormatDate(item.date);
  const read = item.readingMinutes
    ? `${item.readingMinutes} min ${item.type === 'podcast' ? 'luisteren' : item.type === 'video' ? 'kijken' : 'lezen'}`
    : null;
  return (
    <div className={compact ? 'kb-card-meta' : 'kb-featured-meta'}>
      <span
        className="kb-type"
        style={{ '--chip-bg': t.bg, '--chip-color': t.color, '--chip-accent': t.accent }}
      >
        {t.label}
      </span>
      {dateStr && <span className="kb-meta-text">{dateStr}</span>}
      {read && (
        <>
          <span className="kb-dot-sep" aria-hidden="true"></span>
          <span className="kb-meta-text">{read}</span>
        </>
      )}
    </div>
  );
}

function KbFeatured({ item }) {
  if (!item) return null;
  return (
    <a className="kb-featured" href={item.href}>
      <span className="kb-featured-tag">Uitgelicht</span>
      <KbCover seed={item.slug} {...(item.cover || {})} aspect="16/11" />
      <div className="kb-featured-body">
        <KbMeta item={item} />
        <h2>{item.title}</h2>
        <p className="kb-excerpt">{item.excerpt}</p>
        <span className="kb-arr">
          Lees het verhaal
          <span className="kb-arr-icon" aria-hidden="true">→</span>
        </span>
      </div>
    </a>
  );
}

function KbCard({ item }) {
  return (
    <a className="kb-card" href={item.href}>
      <KbCover seed={item.slug} {...(item.cover || {})} aspect="16/10" />
      <div className="kb-card-body">
        <KbMeta item={item} compact />
        <h3>{item.title}</h3>
        {item.excerpt && <p className="kb-card-excerpt">{item.excerpt}</p>}
        <div className="kb-card-tail">
          <span>{(item.tags && item.tags[0]) || ''}</span>
          <span className="kb-card-arr">Lees meer <span aria-hidden="true">→</span></span>
        </div>
      </div>
    </a>
  );
}

function KbGrid() {
  const items = KB_ITEMS;
  const [featured, ...rest] = items;

  return (
    <section className="kb-grid-wrap" id="overzicht">
      <div className="kb-grid-head">
        <div className="kb-count">{items.length === 1 ? '1 publicatie' : `${items.length} publicaties`}</div>
      </div>

      {featured && <KbFeatured item={featured} />}

      {rest.length > 0 && (
        <div className="kb-cards">
          {rest.map(item => <KbCard key={item.slug} item={item} />)}
        </div>
      )}
    </section>
  );
}

Object.assign(window, { KbHero, KbLegend, KbMeta, KbFeatured, KbCard, KbGrid });