// Hub components · now handles 1-3 patterns per matrix cell
// + alternative views (matrix / list-by-industry / status-first) via tweaks

const TopRibbon = ({ current }) => {
  const [menuOpen, setMenuOpen] = React.useState(false);
  const links = [
    { label: 'Over Repetive', children: [
      { label: 'Missie',   href: 'Homepage.html#missie' },
      { label: 'Aanpak',   href: 'Homepage.html#aanpak' },
      { label: 'Over ons', href: 'Homepage.html#team' },
      { label: 'Contact',  href: 'Homepage.html#contact' },
    ]},
    { label: 'Cases', href: 'Cases hub.html', active: current === 'hub' || current === 'patterns' },
    { label: 'Wat het oplevert', href: 'ROI Calculator.html' },
    { label: 'Kennisbank', href: 'Kennisbank.html' },
    { label: 'Vacatures', href: 'Jobs.html' },
    { label: 'Trust Center', href: 'Trust Center.html' },
  ];
  return (
    <div className="topribbon">
      <div className="topribbon-inner">
        <a href="Homepage.html" className="brand"><img src="assets/logo.png" alt="Repetive" /></a>
        <nav>
          {links.map(l => {
            if (l.children) {
              return (
                <div key={l.label} className="nav-item">
                  <span className="nav-label">{l.label}</span>
                  <div className="nav-dropdown">
                    {l.children.map(c => (
                      <a key={c.label} href={c.href}>{c.label}</a>
                    ))}
                  </div>
                </div>
              );
            }
            return (
              <a key={l.label} href={l.href} className={l.active ? 'active' : ''}>{l.label}</a>
            );
          })}
        </nav>
        <div className="right">
          <a href="Homepage.html#contact" className="pill-cta">Plan een gesprek</a>
          <button className="ribbon-burger" onClick={() => setMenuOpen(v => !v)} aria-label="Menu" aria-expanded={menuOpen}>
            <span className={menuOpen ? 'open' : ''}></span>
            <span className={menuOpen ? 'open' : ''}></span>
            <span className={menuOpen ? 'open' : ''}></span>
          </button>
        </div>
      </div>
      {menuOpen && (
        <div className="ribbon-drawer">
          {links.map(l => {
            if (l.children) {
              return (
                <React.Fragment key={l.label}>
                  <div className="drawer-group-label">{l.label}</div>
                  {l.children.map(c => (
                    <a key={c.label} href={c.href} onClick={() => setMenuOpen(false)} className="drawer-sub">{c.label}</a>
                  ))}
                </React.Fragment>
              );
            }
            return (
              <a key={l.label} href={l.href} onClick={() => setMenuOpen(false)}>{l.label}</a>
            );
          })}
          <a href="Homepage.html#contact" onClick={() => setMenuOpen(false)} className="drawer-cta">Plan een gesprek</a>
        </div>
      )}
    </div>
  );
};

// ================================================================
// HERO
// ================================================================
const HubHero = () => {
  const total = PATTERNS.length;
  const live = PATTERNS.filter(p => p.proof === 'live').length;
  const building = PATTERNS.filter(p => p.proof === 'building').length;
  const clientCount = Object.keys(CLIENTS).length;
  return (
    <section className="hub-hero">
      <div className="hub-hero-inner">
        <div className="hero-meta" style={{marginBottom: '24px'}}>
          <span className="chip">Client cases · per sector en per proces</span>
        </div>
        <h1>Zoek op jouw <span className="grad">sector + proces</span>.<br />Zie welke agent het werk overneemt.</h1>
        <p className="lede">
          Vier sectoren, vier soorten werk · zestien kruisingen. Per cel één tot drie use cases die we
          hebben opgeleverd of nu in productie zien draaien. Kies je cel, zie wat daar kan, en bij welke klant het al loopt.
        </p>
        <div className="hub-counters">
          <div className="c"><div className="n"><span className="g">{total}</span></div><div className="l">Use cases</div></div>
          <div className="c"><div className="n">{live}</div><div className="l">Live in productie</div></div>
          <div className="c"><div className="n">{building}</div><div className="l">In build</div></div>
          <div className="c"><div className="n">{clientCount}</div><div className="l">Klanten</div></div>
        </div>
      </div>
    </section>
  );
};

// ================================================================
// VIEW SWITCHER (works with Tweaks too)
// ================================================================
const ViewSwitcher = ({ view, setView }) => (
  <div className="view-switcher">
    <span className="vs-label">Weergave</span>
    <button className={view === 'matrix' ? 'active' : ''} onClick={() => setView('matrix')}>
      <span className="vs-icon">▦</span> Matrix
    </button>
    <button className={view === 'industry' ? 'active' : ''} onClick={() => setView('industry')}>
      <span className="vs-icon">▤</span> Per sector
    </button>
    <button className={view === 'status' ? 'active' : ''} onClick={() => setView('status')}>
      <span className="vs-icon">●</span> Per status
    </button>
  </div>
);

// A small card used in multiple views
const PatternPill = ({ p }) => {
  const proof = p.proof || 'concept';
  const stage = STAGE_META[proof];
  const ind = INDUSTRIES.find(i => i.k === p.industry);
  return (
    <a
      className={'pt-pill proof-' + proof + (p.featured ? ' featured' : '')}
      href={p.pageHref || '#'}
      onClick={e => { if (!p.pageHref) e.preventDefault(); }}
      style={{'--ind-color': ind?.color}}
    >
      <div className="pt-pill-stage" style={{background: stage.bg, color: stage.color}}>
        {stage.dot} {stage.label}
      </div>
      <div className="pt-pill-title">{p.title}</div>
      <div className="pt-pill-one">{p.oneliner}</div>
      {p.featured && p.pageHref && <div className="pt-pill-arr">Zie use case →</div>}
      {p.featured && <div className="pt-pill-flag">Ingericht</div>}
    </a>
  );
};

// ================================================================
// MATRIX VIEW
// ================================================================
const MatrixView = () => {
  const cellFor = (ind, dom) => PATTERNS.filter(p => p.industry === ind && p.domain === dom);

  return (
    <div className="pmatrix">
      <div className="pm-corner"></div>
      {DOMAINS.map(d => (
        <div className="pm-col-head" key={d.k}>
          <div className="pm-col-label">{d.label}</div>
          <div className="pm-col-count">{PATTERNS.filter(p => p.domain === d.k && p.proof === 'live').length} live</div>
        </div>
      ))}

      {INDUSTRIES.map(ind => (
        <React.Fragment key={ind.k}>
          <div className="pm-row-head" style={{'--ind-color': ind.color}}>
            <div className="pm-row-bar"></div>
            <div className="pm-row-label">{ind.label}</div>
            <div className="pm-row-count">{PATTERNS.filter(p => p.industry === ind.k && p.proof === 'live').length} live</div>
          </div>
          {DOMAINS.map(d => {
            const patterns = cellFor(ind.k, d.k);
            if (patterns.length === 0) return <div className="pm-cell empty" key={d.k}>·</div>;
            return (
              <div className="pm-cell-multi" key={d.k} style={{'--ind-color': ind.color}}>
                {patterns.map(p => <PatternPill key={p.slug} p={p} />)}
              </div>
            );
          })}
        </React.Fragment>
      ))}
    </div>
  );
};

// ================================================================
// INDUSTRY VIEW · grouped horizontally per industry
// ================================================================
const IndustryView = () => (
  <div className="iv-wrap">
    {INDUSTRIES.map(ind => {
      const patterns = PATTERNS.filter(p => p.industry === ind.k);
      return (
        <section className="iv-section" key={ind.k} style={{'--ind-color': ind.color}}>
          <div className="iv-head">
            <div className="iv-bar"></div>
            <div>
              <div className="iv-label">{ind.label}</div>
              <div className="iv-meta">
                {patterns.length} use cases · {patterns.filter(p => p.proof === 'live').length} live · {patterns.filter(p => p.proof === 'building').length} in build
              </div>
            </div>
          </div>
          <div className="iv-grid">
            {DOMAINS.map(d => {
              const subset = patterns.filter(p => p.domain === d.k);
              return (
                <div className="iv-col" key={d.k}>
                  <div className="iv-col-head">{d.label}</div>
                  {subset.length === 0 && <div className="iv-empty">·</div>}
                  {subset.map(p => <PatternPill key={p.slug} p={p} />)}
                </div>
              );
            })}
          </div>
        </section>
      );
    })}
  </div>
);

// ================================================================
// STATUS VIEW · grouped by live / in build / concept
// ================================================================
const StatusView = () => {
  const groups = [
    { k: 'live', label: 'Live in productie', sub: 'Draait nu bij een klant.' },
    { k: 'building', label: 'In build', sub: 'Gescoped, in ontwikkeling of eerste week live.' },
    { k: 'concept', label: 'Use case uitgewerkt', sub: 'Klaar om op te leveren bovenop bestaande bouwblokken.' }
  ];
  return (
    <div className="sv-wrap">
      {groups.map(g => {
        const subset = PATTERNS.filter(p => (p.proof || 'concept') === g.k);
        const stage = STAGE_META[g.k];
        return (
          <section className="sv-section" key={g.k}>
            <div className="sv-head">
              <span className="sv-stage" style={{background: stage.bg, color: stage.color}}>
                {stage.dot} {subset.length} {g.label.toLowerCase()}
              </span>
              <div className="sv-sub">{g.sub}</div>
            </div>
            <div className="sv-grid">
              {subset.map(p => {
                const ind = INDUSTRIES.find(i => i.k === p.industry);
                const dom = DOMAINS.find(d => d.k === p.domain);
                return (
                  <a
                    key={p.slug}
                    className={'sv-card' + (p.featured ? ' featured' : '')}
                    href={p.pageHref || '#'}
                    onClick={e => { if (!p.pageHref) e.preventDefault(); }}
                    style={{'--ind-color': ind?.color}}
                  >
                    <div className="sv-path">
                      <span className="sv-bar"></span>
                      {ind?.short} × {dom?.label}
                    </div>
                    <div className="sv-title">{p.title}</div>
                    <div className="sv-one">{p.oneliner}</div>
                    {p.pageHref && <div className="sv-arr">Zie use case →</div>}
                  </a>
                );
              })}
            </div>
          </section>
        );
      })}
    </div>
  );
};

// ================================================================
// PATTERNS SECTION (with view switcher)
// ================================================================
const PatternsSection = () => {
  const validViews = ['matrix', 'industry', 'status'];
  const saved = window.__tweaks && window.__tweaks.hubView;
  const initial = validViews.includes(saved) ? saved : 'matrix';
  const [view, setViewRaw] = React.useState(initial);
  const setView = (v) => {
    setViewRaw(v);
    try {
      window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { hubView: v } }, '*');
    } catch(e){}
  };

  return (
    <section className="pmatrix-section" id="matrix">
      <div className="pmatrix-wrap">
        <div className="pmatrix-head">
          <div>
            <div className="eyebrow-big"><span className="bar"></span> Industrie × Domein</div>
            <h2 className="section-h">Zestien use cases. Kies waar je begint.</h2>
            <p className="lede-sub">
              Dezelfde use cases, drie weergaven. Matrix voor overzicht, per sector voor diepte, per status
              om te zien wat direct kan en wat nog ingericht moet.
            </p>
          </div>
          <ViewSwitcher view={view} setView={setView} />
        </div>

        <div className="pmatrix-legend" style={{marginBottom: '24px'}}>
          <div><span className="dot live"></span> Live in productie</div>
          <div><span className="dot building"></span> In build</div>
          <div><span className="dot concept"></span> Use case uitgewerkt</div>
        </div>

        {view === 'matrix' && <MatrixView />}
        {view === 'industry' && <IndustryView />}
        {view === 'status' && <StatusView />}

        <div className="pmatrix-legend-foot">
          <span><strong>{PATTERNS.filter(p => p.pageHref).length} van {PATTERNS.length}</strong> use cases hebben een uitgewerkte pagina.</span>
          <span>·</span>
          <span>De rest volgt. Specifieke use case prioriteren? <a href="Homepage.html#contact">Plan een sparsessie →</a></span>
        </div>
      </div>
    </section>
  );
};

// ================================================================
// CLIENT STRIP
// ================================================================
const ClientStrip = () => {
  const clients = Object.values(CLIENTS);
  return (
    <section className="clients-strip" id="clients">
      <div className="clients-wrap">
        <div className="pmatrix-head" style={{gridTemplateColumns: '1fr'}}>
          <div>
            <div className="eyebrow-big"><span className="bar"></span> Onze klanten</div>
            <h2 className="section-h">Bedrijven die hun werk al anders doen.</h2>
            <p className="lede-sub">Elke klant is een concrete invulling van één of meer use cases. Klik door voor het hele verhaal · met quote, stack en wat we bewust níet hebben gedaan.</p>
          </div>
        </div>

        <div className="clients-grid">
          {clients.map(c => {
            const ind = INDUSTRIES.find(i => i.k === c.industry);
            return (
              <a
                className={'client-card' + (!c.href ? ' disabled' : '')}
                key={c.id}
                href={c.href || '#'}
                onClick={(e) => { if (!c.href) e.preventDefault(); }}
                style={{'--ind-color': ind?.color || '#A78BFA'}}
              >
                <div className="cc-bar"></div>
                <div className="cc-head">
                  <div className="cc-name">{c.name}</div>
                  <div className={'cc-stage ' + c.status}>
                    {c.status === 'live' ? '● Live' : c.status === 'building' ? '○ Binnenkort' : '◇ Concept'}
                  </div>
                </div>
                <div className="cc-agent">{c.agent}</div>
                <div className="cc-tag">{c.tagline}</div>
                <div className="cc-foot">
                  <span className="cc-pattern">{ind?.label}</span>
                  <span className="cc-arr">{c.href ? 'Lees case →' : 'Binnenkort →'}</span>
                </div>
              </a>
            );
          })}
        </div>
      </div>
    </section>
  );
};

// ================================================================
// CTA · light theme (no more black block)
// ================================================================
const HubCTA = () => (
  <section className="hub-pfoot" id="cta">
      <h2>Zit jouw proces er niet <span className="grad">tussen</span>?</h2>
      <p>30 minuten videocall, één repetitief proces op tafel. Daarna weet je wat een agent bij jou zou overnemen, wat dat in uren scheelt, en of het überhaupt past. Geen rapport, geen offerte-traject.</p>
      <div className="pfoot-row">
        <a href="Homepage.html#contact" className="btn-primary">Plan een sparsessie</a>
        <a href="client case - site - mysteel offerte agent.html#sandbox" className="btn-ghost">Probeer Max eerst →</a>
      </div>
  </section>
);

Object.assign(window, { TopRibbon, HubHero, PatternsSection, ClientStrip, HubCTA, PatternPill });