// Core case components: Hero, Snapshot, Story, Workflow, LiveBar, Quote, DidNot, Related, FootCTA

const Hero = ({ opener }) => {
  return (
    <section className="hero">
      <div className="hero-inner">
        <div className="hero-meta">
          <span className="chip">Groothandel</span>
          <span className="chip purple">Sales, maatwerk-offerte</span>
          <span className="case-num">01 / 06</span>
        </div>
        <h1 className="hero-title">
          MySteel laat de <span className="grad">offerte-inbox</span> niet meer bij één mens belanden.
        </h1>
        <p className="hero-sub">
          De Offerte-agent leest elke aanvraag uit het webformulier, haalt prijs en gewicht op bij de
          leverancier, en zet een offerte klaar in Exact Online met de juiste BTW per land. Sales
          bepaalt of-ie weggaat.
        </p>
        <div className="snapshot">
          <div className="cell">
            <div className="k">Klant</div>
            <div className="v">MySteel</div>
            <div className="sub">staal-groothandel, NL MKB, levert door heel Europa</div>
          </div>
          <div className="cell">
            <div className="k">Agent</div>
            <div className="v">Offerte-agent</div>
            <div className="sub">eerste van drie in het MySteel-ecosysteem</div>
          </div>
          <div className="cell">
            <div className="k">Live sinds</div>
            <div className="v">Q1 2026</div>
            <div className="sub">23 maart · alle maatwerk-aanvragen via webformulier</div>
          </div>
          <div className="cell">
            <div className="k">Tijd tot livegang</div>
            <div className="v small">~6 weken</div>
            <div className="sub">meekijken tot live in productie</div>
          </div>
          <div className="cell">
            <div className="k">Tijdsbesparing per salespersoon</div>
            <div className="v">~2-3 u/dag</div>
            <div className="sub">in hoogseizoen</div>
          </div>
        </div>
      </div>
    </section>);

};

const Story = () => {
  return (
    <section className="section">
      <div className="eyebrow-big"><span className="bar"></span> De aanleiding</div>
      <h2 className="section-h">Op één bureau kwam al het maatwerk samen, en de stapel groeide mee met MySteel.</h2>

      <div className="story-opener">
        "Elke maatwerkaanvraag kwam bij mij: situatie uittekenen, prijs, gewicht en
        verzendkosten berekenen, klant en offerte aanmaken en uiteindelijk versturen.
        Veel werk en vaak dezelfde stappen."
      </div>

      <div className="story-body">
        <div>
          <span className="tag">Situatie</span>
          <p>
            MySteel verkoopt stalen tuin- en terrasproducten door heel Europa. Standaardorders
            uit de webshop lopen automatisch. Maatwerk-aanvragen · plantenbakken op afwijkend
            formaat, panelen in een specifieke kleur, pergola's met extra hoogte · komen via
            het formulier binnen en belanden bij Daphne van het sales-team.
          </p>
          <p>
            Niet omdat het ingewikkeld werk is. Dezelfde producten, dezelfde aanpak, dezelfde
            templates. Maar voor <strong>élke</strong> aanvraag moet iemand door Exact: prijs
            ophalen, BTW per land checken, offerte opstellen. Geen lastige stappen, maar het
            zijn er vooral <strong>heel veel</strong>. En zo stapelden de aanvragen zich op.
          </p>
        </div>
        <div>
          <span className="tag">Wat we deden</span>
          <p>
            <strong>Weken 1-2 · in kaart brengen.</strong> Met sales het huidige proces tot in
            detail uitgewerkt: welke aanvragen komen binnen, welke stappen worden gezet, welke
            uitzonderingen zijn er. Daarna gekeken waar het simpeler of helderder kan.
          </p>
          <p>
            <strong>Weken 3-4 · bouwen.</strong> De werkwijze vertaald naar een agent. Met
            heldere afspraken: wanneer mag de agent zelfstandig versturen, wanneer gaat het
            terug naar sales voor review.
          </p>
          <p>
            <strong>Weken 5-6 · live.</strong> Eerste versie in productie in Exact Online.
            Daarna stap voor stap verbeteren op basis van wat sales in de praktijk ziet.
          </p>
        </div>
      </div>
    </section>);

};

const Workflow = () => {
  return (
    <section className="workflow">
      <div className="workflow-wrap">
        <div className="eyebrow-big"><span className="bar"></span> Voor &amp; na</div>
        <h2 className="section-h">Van vijf handmatige stappen tot één offerte ter controle bij sales.</h2>
        <div className="wf-grid">
          <div className="wf-col before">
            <h4>Voor · handmatig door sales</h4>
            <div className="step"><span className="ico">01</span><div><div className="tt">Formulier lezen</div><div className="dd">Aanvraag vanuit webformulier, scope bepalen</div></div></div>
            <div className="step"><span className="ico">02</span><div><div className="tt">Prijs en gewicht berekenen</div><div className="dd">Via leveranciers-tool of handmatig</div></div></div>
            <div className="step"><span className="ico">03</span><div><div className="tt">Klant opzoeken</div><div className="dd">In het systeem, BTW per land bepalen</div></div></div>
            <div className="step"><span className="ico">04</span><div><div className="tt">Offerte opstellen</div><div className="dd">Met juiste producten en levertijd</div></div></div>
            <div className="step"><span className="ico">05</span><div><div className="tt">Offerte controleren en versturen</div><div className="dd">En het ticket sluiten</div></div></div>
            <div className="step"><span className="ico">⏱</span><div><div className="tt"></div><div className="dd" style={{ color: "rgb(28, 28, 28)" }}>20 min per offerte, op drukke dagen tot een week</div></div></div>
          </div>
          <div className="wf-arrow">
            <span className="pill">Agent</span>
            <span className="line"></span>
            <span className="pill">Review</span>
          </div>
          <div className="wf-col after">
            <h4>Na · door de Offerte-agent</h4>
            <div className="step"><span className="ico">01</span><div><div className="tt">Aanvraag binnen</div><div className="dd">Via het webformulier</div></div></div>
            <div className="step"><span className="ico">02</span><div><div className="tt">Prijs en gewicht ophalen</div><div className="dd">Bij de leverancier</div></div></div>
            <div className="step"><span className="ico">03</span><div><div className="tt">Klant aanmaken in Exact</div><div className="dd">Gegevens checken en adres valideren</div></div></div>
            <div className="step"><span className="ico">04</span><div><div className="tt">Offerte opstellen</div><div className="dd">Met juiste BTW en levertijd in Exact</div></div></div>
            <div className="step"><span className="ico">05</span><div><div className="tt">Klaarzetten voor controle</div><div className="dd">Voor sales (tenzij de agent zelf mag versturen)</div></div></div>
            <div className="step"><span className="ico">⏱</span><div><div className="tt">{"<5 seconden, aanvraag tot offerte in Exact"}</div><div className="dd">&lt;5 seconden, aanvraag tot offerte in Exact</div></div></div>
          </div>
        </div>

        <LiveBar />
      </div>
    </section>);

};

const LiveBar = () => {
  // 1 offerte every 20 minutes since 23 March 2026 (productie-livegang).
  // Deterministisch op basis van wall-clock zodat elke bezoeker hetzelfde getal ziet.
  const START_MS = new Date('2026-03-23T00:00:00+01:00').getTime();
  const INTERVAL_MS = 60 * 60 * 1000; // 1 uur
  const compute = () => Math.max(0, Math.floor((Date.now() - START_MS) / INTERVAL_MS));

  const [offerte, setOfferte] = React.useState(compute);

  React.useEffect(() => {
    // Hertel elke 30s; getal verspringt vanzelf als er een 20-min-grens passeert.
    const i = setInterval(() => setOfferte(compute()), 30000);
    return () => clearInterval(i);
  }, []);

  return (
    <div className="livebar has-hero">
      <div className="metric hero">
        <div className="k">Tijdsbesparing per salespersoon</div>
        <div className="v">~2-3<span className="suf">u/dag</span></div>
        <div className="s">In hoogseizoen</div>
      </div>
      <div className="metric">
        <div className="k"><span className="dot"></span> Offertes verwerkt</div>
        <div className="v">~{offerte}<span className="suf">offertes</span></div>
        <div className="s">Sinds 23 maart productie</div>
      </div>
      <div className="metric">
        <div className="k">Gem. doorlooptijd</div>
        <div className="v">&lt;5<span className="suf">sec</span></div>
      </div>
      <div className="metric">
        <div className="k">Tijd tot livegang</div>
        <div className="v">~6<span className="suf">weken</span></div>
        <div className="s">Aanleiding tot productie</div>
      </div>
    </div>);

};

const Quote = () => {
  return (
    <section className="quote-section">
      <div className="quote-wrap">
        <div className="eyebrow-big"><span className="bar"></span> Wat de klant zegt</div>
        <p className="pull-quote">
          <span className="pq-mark" aria-hidden="true">“</span>
          Implementatie is alles. Daar maken ze het verschil. Bellen is direct actie!
          Verbetering vaak al doorgevoerd voordat ik het mijn medewerkers heb kunnen
          mededelen.”
        </p>
        <div className="pull-attr">
          <span className="pa-rule" />
          <div className="pa-who">
            <b>Teun Sleegers</b>
            <span className="role">Directeur · MySteel</span>
          </div>
        </div>
      </div>
    </section>);

};

const DidNot = () => {
  const items = [
  { t: 'Niemand ontslagen', d: 'Het salesteam werkt nog steeds. De agent doet het kopieer-werk, zij het sales-werk.' },
  { t: 'Geen ingreep in Exact', d: 'De agent schrijft in Exact als een gewone gebruiker. De ERP-architectuur is niet geraakt.' },
  { t: 'Geen personeelstraining', d: 'Sales reviewt offertes zoals ze al deden · alleen staan ze nu al klaar.' },
  { t: 'Geen nieuw systeem erbij', d: 'De agent leeft tussen formulier en Exact. Geen nieuw dashboard, geen nieuwe inbox, geen nieuwe login.' }];

  return (
    <section className="didnot">
      <div className="didnot-wrap">
        <div className="eyebrow-big"><span className="bar"></span> Wat we niet deden</div>
        <h2 className="section-h">De punten waarop MKB-directeuren het vaakst afhaken · en wat de Offerte-agent daarmee doet.</h2>
        <div className="didnot-grid">
          {items.map((it, i) =>
          <div className="dn-card" key={i}>
              <div className="x">✕</div>
              <div className="tt">{it.t}</div>
              <div className="dd">{it.d}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

};

// Related · pulls real data from window.CLIENTS + window.PATTERNS.
// Layout is driven by visualVariant tweak: 'editorial' · 'magazine' · 'hidden'.
const Related = ({ layout }) => {
  // Hide entirely
  if (layout === 'hidden') return null;

  const [industry, setIndustry] = React.useState('all');
  const [domain, setDomain] = React.useState('all');

  const CLIENTS_DATA = window.CLIENTS || {};
  const PATTERNS_DATA = window.PATTERNS || [];
  const INDUSTRIES_DATA = window.INDUSTRIES || [];
  const DOMAINS_DATA = window.DOMAINS || [];

  // Build unified item list:
  //   · 5 other client cases (exclude mysteel_max = the current page)
  //   · all use cases that have a pageHref (uitgewerkt)
  const clientItems = Object.values(CLIENTS_DATA).
  filter((c) => c.id !== 'mysteel_max').
  map((c) => ({
    kind: 'case',
    key: 'client-' + c.id,
    industry: c.industry,
    domain: c.domain,
    client: c.name,
    agent: c.agent,
    title: c.tagline,
    summary: c.desc,
    status: c.status,
    href: c.href
  }));

  const useCaseItems = PATTERNS_DATA.
  filter((p) => p.pageHref).
  map((p) => {
    const ind = INDUSTRIES_DATA.find((i) => i.k === p.industry);
    const dom = DOMAINS_DATA.find((d) => d.k === p.domain);
    return {
      kind: 'pattern',
      key: 'uc-' + p.slug,
      industry: p.industry,
      domain: p.domain,
      client: (ind?.short || '') + (dom ? ' · ' + dom.label : ''),
      agent: 'Use case',
      title: p.title,
      summary: p.oneliner,
      status: p.proof || 'concept',
      href: p.pageHref
    };
  });

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

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

  const industryFilters = [['all', 'Alles'], ...INDUSTRIES_DATA.map((i) => [i.k, i.short])];
  const domainFilters = [['all', 'Alles'], ...DOMAINS_DATA.map((d) => [d.k, d.label])];

  const stageDot = (s) => s === 'live' ? '● Live' : s === 'building' ? '○ Binnenkort' : '◇ Concept';

  return (
    <section className={'related related-variant-' + layout}>
      <div className="related-wrap">
        <div className="eyebrow-big"><span className="bar"></span> Meer cases</div>
        <h2>Kies op sector, of kies op domein. Of gewoon op verhaal.</h2>

        <div className="filterbar">
          <div className="filter-group">
            <span className="label">Sector</span>
            {industryFilters.map(([k, l]) =>
            <button key={k} className={'filter-chip' + (industry === k ? ' active' : '')} onClick={() => setIndustry(k)}>{l}</button>
            )}
          </div>
          <div className="filter-group">
            <span className="label">Domein</span>
            {domainFilters.map(([k, l]) =>
            <button key={k} className={'filter-chip' + (domain === k ? ' active' : '')} onClick={() => setDomain(k)}>{l}</button>
            )}
          </div>
        </div>

        {layout === 'magazine' ?
        <div className="related-mag-grid">
            {filtered.map((c) => {
            const ind = INDUSTRIES_DATA.find((i) => i.k === c.industry);
            const dom = DOMAINS_DATA.find((d) => d.k === c.domain);
            const clickable = !!c.href;
            return (
              <a
                key={c.key}
                className={'related-mag-card mag-' + c.kind + (!clickable ? ' not-clickable' : '')}
                href={c.href || '#'}
                onClick={(e) => {if (!clickable) e.preventDefault();}}
                style={{ '--ind-color': ind?.color }}>
                
                  <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>
                  <h3 className="mag-card-title">{c.title}</h3>
                  <p className="mag-card-one">{c.summary}</p>
                  <div className="mag-card-foot">
                    <span className="mag-card-kind">
                      {c.kind === 'case' ? 'Klantcase · ' + c.client : 'Use case'}
                      {c.kind === 'case' &&
                    <> · <span className={'mag-card-status ' + c.status}>{stageDot(c.status)}</span></>
                    }
                    </span>
                    <span className="mag-card-arr">
                      {clickable ? c.kind === 'case' ? 'Lees case' : 'Zie use case' : 'Binnenkort'} →
                    </span>
                  </div>
                </a>);

          })}
          </div> :

        <div className="related-grid layout-magazine">
            {filtered.map((c) => {
            const clickable = !!c.href;
            const Tag = clickable ? 'a' : 'div';
            const props = clickable ? { href: c.href } : {};
            return (
              <Tag className={'rc' + (!clickable ? ' not-clickable' : '')} key={c.key} {...props}>
                  <div>
                    <div className="rc-meta">
                      <span className="chip">{c.client}</span>
                      <span className={'rc-stage ' + c.status}>{stageDot(c.status)}</span>
                    </div>
                    <div className="rc-title">{c.title}</div>
                    <div className="rc-agent">{c.agent}</div>
                  </div>
                  <div className="rc-summary">{c.summary}</div>
                </Tag>);

          })}
          </div>
        }
        {filtered.length === 0 &&
        <div style={{ padding: '40px', color: 'rgba(255,255,255,0.5)', textAlign: 'center' }}>
            Geen cases in deze combinatie · probeer een andere filter.
          </div>
        }
      </div>
    </section>);

};

const FootCTA = () => {
  return (
    <section className="footcta">
      <h2>Wat zou <span className="grad">een agent doen</span> voor jouw team?</h2>
      <p>30 minuten videocall. We kijken samen naar één repetitief proces en zetten op een rij wat een agent daar zou overnemen · en wat dat bij jou in uren zou schelen.</p>
      <div className="footcta-row">
        <a href="/#contact" className="btn-primary">Plan een kennismaking</a>
        <a href="Cases hub.html" className="btn-ghost">Lees de andere cases</a>
      </div>
    </section>);

};

const FootMeta = () =>
<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="Cases hub.html">Cases</a>
      <a href="ROI Calculator.html">Wat het oplevert</a>
      <a href="/#team">Over ons</a>
      <a href="Kennisbank.html">Kennisbank</a>
      <a href="Jobs.html">Vacatures</a>
      <a href="Trust Center.html">Trust Center</a>
      <a href="/#contact">Contact</a>
    </div>
    <div>© 2026 Repetive · Tilburg</div>
  </footer>;


// Compact reverse-reference: points from the MySteel/Max case to the
// general use-case page that shows how this pattern would land for any wholesaler.
// Mirrors the .sbframe styling used on the pattern page (the "deze agent draait
// in productie bij MySteel" strip), but inverted in direction.
const PatternReference = () =>
<section className="sbframe sbframe-reverse">
    <div className="sbframe-wrap">
      <div className="sbframe-left">
        <div className="sbframe-label">Deze agent als use case</div>
        <h3 className="sbframe-h">De offerte-agent, los van MySteel.</h3>
        <p className="sbframe-p">
          Hierboven zag je de Offerte-agent in z'n MySteel-uniform: hun catalogus, hun ERP, hun klanttoon.
          Maar onder de motorkap zit een patroon dat voor elke groothandel werkt · en in de
          use case mag je zelf achter het stuur.
        </p>
      </div>
      <a href="use case - site - offerte agent.html" className="sbframe-link">
        Probeer de interactieve demo →
      </a>
    </div>
  </section>;


Object.assign(window, { Hero, Story, Workflow, LiveBar, Quote, DidNot, Related, FootCTA, FootMeta, PatternReference });