// Magazine-style hub · one card per use case + one card per client case.
// Subtle visual distinction: client cases carry their own warmer tone.

const MagazineHero = () => {
  return (
    <section className="mag-hero">
      <div className="mag-hero-inner">
        <h1>
          Wat wij <span className="grad">gebouwd</span> hebben.<br />
          En wat we <span className="grad-alt">herkennen</span>.
        </h1>
        <p className="mag-lede">
          Elke kaart is óf een klant die live draait, óf een use case die we zo vaak zien dat we weten hoe het werkt.
          Filter op jouw sector of domein.
        </p>
      </div>
    </section>
  );
};

// ================================================================
// MAGAZINE GRID
// ================================================================
const MagazineGrid = () => {
  const [industry, setIndustry] = React.useState('all');
  const [domain, setDomain] = React.useState('all');

  // Build item list: client cases first (featured), then use cases.
  // Within each group, items with a linked page come first.
  const byLinkedFirst = (a, b) => (b.href ? 1 : 0) - (a.href ? 1 : 0);

  const clientItems = Object.values(CLIENTS).map(c => ({
    kind: 'case',
    key: 'client-' + c.id,
    industry: c.industry,
    domain: c.domain,
    client: c,
    title: c.name + ' × ' + c.agent,
    oneliner: c.desc,
    status: c.status,
    href: c.href
  })).sort(byLinkedFirst);

  const useCaseItems = PATTERNS.map(p => ({
    kind: 'pattern',
    key: 'uc-' + p.slug,
    industry: p.industry,
    domain: p.domain,
    title: p.title,
    oneliner: p.oneliner,
    slug: p.slug,
    href: p.pageHref || null
  })).sort(byLinkedFirst);

  const all = [...clientItems, ...useCaseItems];

  const filtered = all.filter(it =>
    (industry === 'all' || it.industry === industry) &&
    (domain === 'all' || it.domain === domain)
  );

  return (
    <section className="mag-grid-section" id="browse">
      <div className="mag-wrap">
        <div className="mag-section-head">
          <div>
            <div className="eyebrow-big"><span className="bar"></span> Blader &amp; filter</div>
            <h2 className="section-h">Zoek op sector of domein.</h2>
          </div>
        </div>

        {/* Filter bar · single row, matches client-case-page style */}
        <div className="filterbar mag-filterbar">
          <div className="filter-group">
            <span className="label">Sector</span>
            <button className={'filter-chip' + (industry === 'all' ? ' active' : '')} onClick={() => setIndustry('all')}>Alles</button>
            {INDUSTRIES.map(i => (
              <button
                key={i.k}
                className={'filter-chip' + (industry === i.k ? ' active' : '')}
                onClick={() => setIndustry(i.k)}
              >{i.short}</button>
            ))}
          </div>
          <div className="filter-group">
            <span className="label">Domein</span>
            <button className={'filter-chip' + (domain === 'all' ? ' active' : '')} onClick={() => setDomain('all')}>Alles</button>
            {DOMAINS.map(d => (
              <button
                key={d.k}
                className={'filter-chip' + (domain === d.k ? ' active' : '')}
                onClick={() => setDomain(d.k)}
              >{d.label}</button>
            ))}
          </div>
        </div>

        {filtered.length === 0 && (
          <div className="mag-empty">
            Geen cases in deze combinatie. <button className="link-btn" onClick={() => {setIndustry('all'); setDomain('all');}}>Reset filters →</button>
          </div>
        )}

        <div className="mag-grid">
          {filtered.map(it => (
            <MagazineCard key={it.key} item={it} />
          ))}
        </div>
      </div>
    </section>
  );
};

// Helper: cell string "Groothandel × Sales" → domain key
function inferDomain(cell) {
  if (!cell) return null;
  const lc = cell.toLowerCase();
  if (lc.includes('sales')) return 'sales';
  if (lc.includes('cs') || lc.includes('service')) return 'service';
  if (lc.includes('admin')) return 'admin';
  if (lc.includes('ops') || lc.includes('operations')) return 'operations';
  return null;
}

// ================================================================
// MAGAZINE CARD
// ================================================================
const MagazineCard = ({ item }) => {
  const ind = INDUSTRIES.find(i => i.k === item.industry);
  const dom = DOMAINS.find(d => d.k === item.domain);
  const clickable = !!item.href;

  return (
    <a
      className={'mag-card mag-' + item.kind + (!clickable ? ' not-clickable' : '')}
      href={item.href || '#'}
      onClick={e => { if (!clickable) e.preventDefault(); }}
      style={{'--ind-color': ind?.color}}
    >
      {/* Path: industry × domain */}
      <div className="mag-path">
        <span className="mag-path-ind">{ind?.label}</span>
        {dom && <><span className="mag-path-sep">×</span><span className="mag-path-dom">{dom.label}</span></>}
      </div>

      {/* Title */}
      <h3 className="mag-card-title">{item.title}</h3>

      {/* Oneliner / desc */}
      <p className="mag-card-one">{item.oneliner}</p>

      {/* Footer */}
      <div className="mag-card-foot">
        <span className="mag-card-kind">
          {item.kind === 'case' ? 'Klantcase' : 'Use case'}
          {item.kind === 'case' && item.status && (
            <> · <span className={'mag-card-status ' + item.status}>
              {item.status === 'live' ? '● Live' : item.status === 'building' ? '○ Binnenkort' : '◇ Concept'}
            </span></>
          )}
        </span>
        <span className="mag-card-arr">
          {clickable ? (item.kind === 'case' ? 'Lees case' : 'Zie use case') : 'Binnenkort'} →
        </span>
      </div>
    </a>
  );
};

Object.assign(window, { MagazineHero, MagazineGrid, MagazineCard });