// Pattern page components · shared across all /cases/:slug pages

const PatternBreadcrumb = ({ pattern, industry, domain }) => (
  <div className="pcrumb">
    <div className="pcrumb-inner">
      <a href="Cases hub.html">← Alle cases</a>
      <span className="sep">/</span>
      <span className="crumb-ind" style={{'--ind-color': industry.color}}>
        <span className="crumb-bar"></span>{industry.label}
      </span>
      <span className="sep">×</span>
      <span className="crumb-dom">{domain.label}</span>
    </div>
  </div>
);

const PatternHero = ({ pattern, industry, domain, hasDemo = false }) => {
  const proof = pattern.proof || 'concept';
  const stage = STAGE_META[proof];
  return (
    <section className="phero" style={{'--ind-color': industry.color}}>
      <div className="phero-inner">
        <div className="phero-left">
          <div className="phero-kicker">
            <span className="phero-stage" style={{background: stage.bg, color: stage.color}}>
              {stage.dot} {stage.label}
            </span>
            <span className="phero-path">{industry.label} × {domain.label}</span>
          </div>
          <h1 className="phero-h1">{pattern.title}</h1>
          <p className="phero-one">{pattern.oneliner}</p>
          <div className="phero-cta-row">
            <a href="#anatomy" className="primary">Zie de use case</a>
            {hasDemo
              ? <a href="#sandbox" className="ghost">Probeer de demo →</a>
              : <a href="/#contact" className="ghost">Plan een sparsessie →</a>
            }
          </div>
        </div>
        <div className="phero-right">
          <div className="phero-trigger">
            <div className="phero-trig-label">Wanneer dit relevant wordt</div>
            <div className="phero-trig-body">{pattern.trigger}</div>
          </div>
        </div>
      </div>
    </section>
  );
};

const PatternAnatomy = ({ trigger, inputs, steps, outputs, humans, kpi }) => (
  <section className="panatomy" id="anatomy">
    <div className="panatomy-inner">
      <div className="panatomy-head">
        <div className="eyebrow-big"><span className="bar"></span> De use case</div>
        <h2 className="section-h">Hoe de agent dit oppakt.</h2>
        <p className="lede-sub">
          Geen chatbot, geen tool. Een proces dat van begin tot eind door een agent loopt ·
          met een mens die reviewt waar dat telt.
        </p>
      </div>

      <div className="flow">
        <div className="flow-track">
          {/* Inputs column */}
          <div className="flow-col flow-inputs">
            <div className="flow-col-head">
              <div className="flow-num">01</div>
              <div className="flow-name">Inputs</div>
            </div>
            <div className="flow-chips">
              {inputs.map((x, i) => (
                <div className="flow-chip" key={i}>
                  <span className="flow-dot" />
                  <span>{x}</span>
                </div>
              ))}
            </div>
          </div>

          {/* Agent column (centered, dominant) */}
          <div className="flow-col flow-agent">
            <div className="flow-col-head flow-agent-head">
              <div className="flow-num flow-num-agent">02</div>
              <div className="flow-name">Agent</div>
            </div>
            <div className="flow-rail">
              <div className="flow-rail-line" />
              {steps.map((x, i) => (
                <div className="flow-step" key={i}>
                  <div className="flow-step-marker"><span className="flow-step-n">{String(i + 1).padStart(2, '0')}</span></div>
                  <div className="flow-step-body">{x}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Outputs column */}
          <div className="flow-col flow-outputs">
            <div className="flow-col-head">
              <div className="flow-num">03</div>
              <div className="flow-name">Outputs</div>
            </div>
            <div className="flow-chips">
              {outputs.map((x, i) => (
                <div className="flow-chip flow-chip-out" key={i}>
                  <span className="flow-check">✓</span>
                  <span>{x}</span>
                </div>
              ))}
            </div>
          </div>
        </div>

        {kpi && (
          <div className="flow-kpi">
            <div className="flow-kpi-value">{kpi.value}</div>
            <div className="flow-kpi-label">{kpi.label}</div>
            <p className="flow-kpi-body">{kpi.body}</p>
            {kpi.source && <div className="flow-kpi-source">{kpi.source}</div>}
          </div>
        )}
      </div>
    </div>
  </section>
);

const PatternClientSpotlight = ({ client, pattern }) => {
  if (!client) return null;
  const ind = INDUSTRIES.find(i => i.k === client.industry);
  return (
    <section className="pspotlight" style={{'--ind-color': ind?.color}}>
      <div className="pspot-inner">
        <div className="pspot-label">
          <span className="eyebrow-big"><span className="bar"></span> Klant die dit draait</span>
        </div>
        <div className="pspot-card">
          <div className="pspot-left">
            <div className="pspot-brand">
              <div className="pspot-logo">{client.name[0]}</div>
              <div>
                <div className="pspot-name">{client.name}</div>
                <div className="pspot-agent">{client.agent}</div>
              </div>
            </div>
            <div className="pspot-tag">{client.tagline}</div>
            {client.quote && (
              <blockquote className="pspot-quote">
                {client.quote}
                <cite>· {client.quoteAttr}</cite>
              </blockquote>
            )}
          </div>
          <div className="pspot-right">
            <div className="pspot-stats">
              <div className="pspot-stat">
                <div className="n">Live</div>
                <div className="l">in productie</div>
              </div>
              <div className="pspot-stat">
                <div className="n">~40u</div>
                <div className="l">per week teruggewonnen</div>
              </div>
            </div>
            {client.href && (
              <a href={client.href} className="pspot-cta">
                Lees de volledige case →
              </a>
            )}
          </div>
        </div>
      </div>
    </section>
  );
};

const PatternVariations = ({ pattern }) => {
  // Show supporting clients + explain how this pattern flexes
  const supporting = (pattern.supportingClients || []).map(id => CLIENTS[id]).filter(Boolean);
  if (supporting.length === 0) {
    return (
      <section className="pvariations">
        <div className="pvar-inner">
          <div className="pvar-note">
            <div className="pvar-note-label">Ook van toepassing op</div>
            <p>
              Deze use case past in elke sector waar <strong>gestructureerde aanvragen via een ongestructureerd kanaal</strong> binnenkomen.
              Speelt dit bij jou in een andere industrie? Plan een sparsessie · dan laten we concreet zien hoe we dit naar jouw context brengen.
            </p>
          </div>
        </div>
      </section>
    );
  }
  return (
    <section className="pvariations">
      <div className="pvar-inner">
        <div className="eyebrow-big" style={{marginBottom: '16px'}}><span className="bar"></span> Ook in andere sectoren</div>
        <h3 className="pvar-h">Dezelfde use case, andere context.</h3>
        <div className="pvar-grid">
          {supporting.map(c => {
            const ind = INDUSTRIES.find(i => i.k === c.industry);
            return (
              <div className="pvar-card" key={c.id} style={{'--ind-color': ind?.color}}>
                <div className="pvar-bar"></div>
                <div className="pvar-ind">{ind?.label}</div>
                <div className="pvar-name">{c.name}</div>
                <div className="pvar-tag">{c.tagline}</div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
};

const PatternRelated = ({ currentSlug }) => {
  const current = PATTERNS.find(p => p.slug === currentSlug);
  // Show other patterns in same industry, or same domain · 3 max
  const sameIndustry = PATTERNS.filter(p => p.industry === current.industry && p.slug !== currentSlug).slice(0, 2);
  const sameDomain = PATTERNS.filter(p => p.domain === current.domain && p.industry !== current.industry).slice(0, 2);
  const related = [...sameIndustry, ...sameDomain].slice(0, 3);

  return (
    <section className="prelated">
      <div className="prel-inner">
        <div className="eyebrow-big"><span className="bar"></span> Verwante use cases</div>
        <h3 className="prel-h">Andere kruisingen uit de matrix.</h3>
        <div className="prel-grid">
          {related.map(p => {
            const ind = INDUSTRIES.find(i => i.k === p.industry);
            const dom = DOMAINS.find(d => d.k === p.domain);
            const stage = STAGE_META[p.proof || 'concept'];
            return (
              <a
                key={p.slug}
                className="prel-card"
                href={p.pageHref || 'Cases hub.html#matrix'}
                onClick={e => { if (!p.pageHref) e.preventDefault(); }}
                style={{'--ind-color': ind?.color}}
              >
                <div className="prel-path">{ind?.short} × {dom?.label}</div>
                <div className="prel-title">{p.title}</div>
                <div className="prel-one">{p.oneliner}</div>
                <div className="prel-foot">
                  <span className="prel-stage" style={{background: stage.bg, color: stage.color}}>{stage.label}</span>
                  <span className="prel-arr">{p.pageHref ? 'Zie use case →' : 'Binnenkort →'}</span>
                </div>
              </a>
            );
          })}
        </div>
        <div className="prel-foot-link">
          <a href="Cases hub.html#matrix">Zie alle 16 use cases in de matrix →</a>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, {
  PatternBreadcrumb, PatternHero, PatternAnatomy,
  PatternClientSpotlight, PatternVariations, PatternRelated
});