// Shared components for the two split pages: client-cases.html & use-cases.html
// - CasesHero: single-column "Cases" wordmark + dash + label + floating bubbles
// - CasesGrid: editorial list, filterable by sector + domein
// - CasesRow: one row; client rows show the client logo
// - CasesFooter: shared footer
//
// Note: top ribbon comes from hub_components.jsx (TopRibbon) — same nav as
// the rest of the site, with "Cases" rendered as a dropdown (Client cases /
// Use cases) parallel to "Over Repetive".

// ================================================================
// HERO · single "Cases" wordmark, dash, label + floating bubbles
// ================================================================
const CasesHero = ({ word, label }) => {
  return (
    <section className="cases-hero">
      <div className="ch-inner">
        <div className="ch-orn" aria-hidden="true">
          <span className="stat-chip s1"><span className="qm">&ldquo;</span>bla bla<span className="qm">&rdquo;</span></span>
          <span className="stat-chip s2">+70%</span>
          <span className="stat-chip s3 play">
            <span className="play-ico">
              <svg viewBox="0 0 12 12" width="9" height="9"><path d="M2.5 1l8 5-8 5V1z" fill="#fff"/></svg>
            </span>
            demo
          </span>
        </div>
        <h1 className="ch-word">{word}</h1>
        <span className="ch-label">{label}</span>
      </div>
    </section>
  );
};

// ================================================================
// GRID · editorial list, filterable. mode: 'clients' | 'usecases'
// ================================================================
const CasesGrid = ({ mode }) => {
  const [industry, setIndustry] = React.useState('all');
  const [domain, setDomain] = React.useState('all');

  let items;
  if (mode === 'clients') {
    items = Object.values(CLIENTS).map(c => ({
      kind: 'case',
      key: 'client-' + c.id,
      industry: c.industry,
      domain: c.domain,
      title: c.name + ' × ' + c.agent,
      oneliner: c.desc,
      client: c,
      logo: c.logo,
      href: c.href
    }));
    // clickable cases first, "case volgt" after
    items.sort((a, b) => ((a.href ? 0 : 1) - (b.href ? 0 : 1)));
  } else {
    items = PATTERNS.map(p => ({
      kind: 'pattern',
      key: 'uc-' + p.slug,
      industry: p.industry,
      domain: p.domain,
      title: p.title,
      oneliner: p.oneliner,
      href: p.pageHref || null
    }));
    // demos first, "demo volgt" after
    items.sort((a, b) => ((a.href ? 0 : 1) - (b.href ? 0 : 1)));
  }

  const filtered = items.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="filterbar seg-filterbar">
          <div className="seg-group">
            <span className="seg-label">Sector</span>
            <div className="seg">
              <button className={industry === 'all' ? 'on' : ''} onClick={() => setIndustry('all')}>Alles</button>
              {INDUSTRIES.map(i => (
                <button key={i.k} className={industry === i.k ? 'on' : ''} onClick={() => setIndustry(i.k)}>{i.short}</button>
              ))}
            </div>
          </div>
          <div className="seg-group">
            <span className="seg-label">Domein</span>
            <div className="seg">
              <button className={domain === 'all' ? 'on' : ''} onClick={() => setDomain('all')}>Alles</button>
              {DOMAINS.map(d => (
                <button key={d.k} className={domain === d.k ? 'on' : ''} onClick={() => setDomain(d.k)}>{d.label}</button>
              ))}
            </div>
          </div>
        </div>

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

        <div className="mag-list">
          {filtered.map(it => (
            <CasesRow key={it.key} item={it} mode={mode} />
          ))}
        </div>

        <div className="hm-work-foot">
          {mode === 'clients' ? (
            <a href="use-cases.html" className="hub-link">
              Naar alle use cases
              <span>→</span>
            </a>
          ) : (
            <a href="client-cases.html" className="hub-link">
              Naar alle client cases
              <span>→</span>
            </a>
          )}
        </div>
      </div>
    </section>
  );
};

// ================================================================
// USE-CASE PREVIEW · a frosted mini-interface hinting at the demo
// archetype keyed by domain: service→chat, sales/admin→doc, ops→grid
// ================================================================
const UseCasePreview = ({ item }) => {
  const hasDemo = !!item.href;

  let archetype = 'doc';
  if (item.domain === 'service') archetype = 'chat';
  else if (item.domain === 'operations') archetype = 'grid';
  else archetype = 'doc';

  return (
    <div className={'uc-prev arc-' + archetype + (hasDemo ? '' : ' no-demo')} aria-hidden="true">
      <div className="uc-prev-scene">
        <div className="uc-prev-bar">
          <span></span><span></span><span></span>
        </div>
        {archetype === 'chat' && (
          <div className="uc-prev-body">
            <span className="bub in"></span>
            <span className="bub out"></span>
            <span className="bub in short"></span>
          </div>
        )}
        {archetype === 'doc' && (
          <div className="uc-prev-body">
            <span className="ln w90"></span>
            <span className="ln w70"></span>
            <span className="ln dark w50"></span>
            <span className="ln w80"></span>
          </div>
        )}
        {archetype === 'grid' && (
          <div className="uc-prev-body grid">
            <span className="cardlet"></span>
            <span className="cardlet dark"></span>
            <span className="cardlet"></span>
            <span className="cardlet"></span>
          </div>
        )}
      </div>
      {hasDemo && <span className="uc-prev-dot"></span>}
    </div>
  );
};

// ================================================================
// ROW · client rows show a logo tile; use-case rows show a preview
// ================================================================
const CasesRow = ({ item, mode }) => {
  const ind = INDUSTRIES.find(i => i.k === item.industry);
  const dom = DOMAINS.find(d => d.k === item.domain);
  const clickable = !!item.href;

  let status;
  if (item.kind === 'case') {
    status = clickable
      ? <span className="mag-row-status live"><span className="mag-live-dot"></span> Lees de case</span>
      : <span className="mag-row-status pending">Binnenkort</span>;
  } else {
    status = clickable
      ? <span className="mag-row-status demo"><span className="mag-demo-dot"></span> Probeer de demo</span>
      : <span className="mag-row-status pending">Demo volgt</span>;
  }

  return (
    <a
      className={'mag-row' + (mode === 'clients' ? ' has-logo' : ' has-preview') + (!clickable ? ' not-clickable' : '')}
      href={item.href || '#'}
      onClick={e => { if (!clickable) e.preventDefault(); }}
    >
      {mode === 'clients' && (
        <div className="mag-row-logo">
          {item.logo
            ? <img src={item.logo} alt={item.client.name} loading="lazy" />
            : <span className="mag-row-logo-fallback">{item.client.name[0]}</span>}
        </div>
      )}
      {mode === 'usecases' && (
        <div className="mag-row-preview">
          <UseCasePreview item={item} />
        </div>
      )}
      <div className="mag-row-main">
        <h3 className="mag-row-title">{item.title}</h3>
        <p className="mag-row-one">{item.oneliner}</p>
      </div>
      <div className="mag-row-meta">
        <span className="mag-row-path">{ind?.short} · {dom?.label}</span>
        {status}
      </div>
      <span className="mag-row-arr">{clickable ? '→' : ''}</span>
    </a>
  );
};

// ================================================================
// FOOTER · shared
// ================================================================
const CasesFooter = () => (
  <footer className="foot-meta">
    <a href="/" className="brand" aria-label="Repetive"><img src="assets/logo.png" alt="Repetive" /></a>
    <div className="links">
      <a href="/#missie">Missie</a>
      <a href="/#aanpak">Aanpak</a>
      <a href="client-cases.html">Cases</a>
      <a href="roi-calculator.html">Wat levert het op?</a>
      <a href="/#team">Over ons</a>
      <a href="kennisbank.html">Kennisbank</a>
      <a href="vacatures.html">Vacatures</a>
      <a href="/#contact">Contact</a>
      <a href="assets/fair-use-policy.pdf" download>Fair use policy</a>
    </div>
    <div>© 2026 Repetive · Tilburg</div>
  </footer>
);

Object.assign(window, { CasesHero, CasesGrid, CasesRow, CasesFooter });