// Client case · MySteel, klantenservice agent ('Eva')
// Section order mirrors the MySteel offerte-agent page:
//   Hero + snapshot → Story (2 kolommen) → Workflow voor/na + live-counter → Quote → FootCTA
// NB: GEEN related-grid. Wel één subtiele footnote naar de Logistiek-service-agent use case.
// Chrome (TopRibbon + FootMeta) is gelijk aan de huidige site (zie case_page.jsx / case_components.jsx).

const TopRibbon = () => {
  const [menuOpen, setMenuOpen] = React.useState(false);
  const links = [
    { label: 'Over Repetive', children: [
      { label: 'Missie',   href: '/#missie' },
      { label: 'Aanpak',   href: '/#aanpak' },
      { label: 'Over ons', href: '/#team' },
      { label: 'Contact',  href: '/#contact' },
    ]},
    { label: 'Cases', href: 'client-cases.html', active: true, children: [
      { label: 'Client cases', href: 'client-cases.html' },
      { label: 'Use cases',    href: 'use-cases.html' },
    ]},
    { label: 'Wat het oplevert', href: 'roi-calculator.html' },
    { label: 'Kennisbank', href: 'kennisbank.html' },
    { label: 'Vacatures', href: 'vacatures.html' },
    { label: 'Trust Center', href: 'trust-center.html' },
  ];
  return (
    <div className="topribbon">
      <div className="topribbon-inner">
        <a href="/" 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' + (l.active ? ' active' : '')}>
                  <a className="nav-label" href={l.href || '/'}>{l.label}</a>
                  <div className="nav-dropdown">
                    {l.children.map(c => (
                      <a key={c.label} href={c.href}>{c.label}</a>
                    ))}
                  </div>
                </div>
              );
            }
            const cls = [
              l.active ? 'active' : '',
              l.accent ? 'nav-accent' : '',
            ].filter(Boolean).join(' ');
            return (
              <a key={l.label} href={l.href} className={cls}>
                {l.label}
                {l.accent && <span className="nav-accent-arr" aria-hidden="true">→</span>}
              </a>
            );
          })}
        </nav>
        <div className="right">
          <a href="/#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="/#contact" onClick={() => setMenuOpen(false)} className="drawer-cta">Plan een gesprek</a>
        </div>
      )}
    </div>
  );
};

const Hero = () => {
  return (
    <section className="hero">
      <div className="hero-inner">
        <div className="hero-meta">
          <span className="chip">Industrie · Staal</span>
          <span className="chip purple">Customer Service, mail-inbox</span>
          <span className="case-num">02 / 06</span>
        </div>
        <h1 className="hero-title">
          Bij MySteel handelt de klantenservice agent nu <span className="grad">zes op de tien</span> mails zelf af.
        </h1>
        <p className="hero-sub">
          De klantenservice agent, bij MySteel 'Eva' genoemd, leest elke mail in alle
          inkomende talen en formuleert een passend antwoord, met checks in voorraad, orders en facturatie.
        </p>
        <div className="snapshot">
          <div className="cell">
            <div className="k">Klant</div>
            <div className="v">MySteel</div>
          </div>
          <div className="cell">
            <div className="k">Agent</div>
            <div className="v small">Klantenservice agent 'Eva'</div>
          </div>
          <div className="cell">
            <div className="k">Live sinds</div>
            <div className="v small">februari 2026</div>
          </div>
          <div className="cell">
            <div className="k">Time-to-live</div>
            <div className="v small">~6 weken</div>
            <div className="sub">eerste live scope, daarna doorontwikkeld</div>
          </div>
          <div className="cell">
            <div className="k">Scope</div>
            <div className="v small">Van analyseren tot antwoorden, en van info opzoeken tot aanpassen in de systemen</div>
          </div>
        </div>
      </div>
    </section>
  );
};

const Story = () => {
  return (
    <section className="section">
      <div className="eyebrow-big"><span className="bar"></span> Het triggermoment</div>
      <h2 className="section-h">Eén inbox, honderden mails per week, in alle talen van Europa.</h2>

      <div className="story-opener">
        "Elke klant verdient een goed antwoord. En, met de groei van het bedrijf, groeit ook het aantal
        mails, en, het aantal inkomende talen. Daarmee wordt deze uitdaging steeds groter."
      </div>

      <div className="story-body">
        <div>
          <span className="tag">Situatie</span>
          <p>
            MySteel groeit door Europa: Duitsland, Frankrijk, Benelux, Scandinavië. Alle klantcommunicatie
            loopt via één adres: info@mysteel.nl. Service-manager Melanie en haar team helpen klanten
            in elke binnenkomende taal: orders, leveringen, facturen, productvragen,
            account-wijzigingen, maatwerk.
          </p>
          <p>
            Het overgrote deel van de vragen is voorspelbaar. Waar is mijn bestelling. Ik wil mijn order
            aanpassen. Ik wil maatwerk bestellen. Graag factuur op een ander adres. Vaak wel honderden
            vragen per week, en voor veel antwoorden is er data uit verschillende systemen nodig. En dan
            is er nog de context: de producten kennen, de toon van MySteel raken, weten wat je wel en niet
            kan beloven.
          </p>
        </div>
        <div>
          <span className="tag">Wat we deden</span>
          <p>
            <strong>Week 1, kennis.</strong> Kennisbank opgebouwd met Melanie: productspecs, leverregels,
            kortingsacties per land, maatwerk en verzendbeleid.
          </p>
          <p>
            <strong>Week 3, bouw.</strong> De klantenservice agent is aan de achterkant een team van
            gespecialiseerde agents.
            Eén classificeert binnenkomende mails, vier pakken elk een type vraag op (orders, producten,
            commercieel, service) en een laatste controleert het antwoord vóór het weggaat. Ze haalt ook
            verzendinfo op en past gegevens aan in interne systemen, zodat het antwoord direct klopt.
          </p>
          <p>
            <strong>Week 6, live.</strong> Sinds februari 2026 is ze live, en werkt ze mee binnen het team
            van Melanie. Ze pakt veel zelf op, maar laat ook tickets over aan het team van Melanie,
            bijvoorbeeld bij voelbare frustratie vanuit de klant, of als ze twijfelt over haar antwoord.
          </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 een inbox die elke ochtend weer vol staat naar antwoorden die vanzelf klaarstaan, in de juiste taal.</h2>
        <div className="wf-grid">
          <div className="wf-col before">
            <h4>Voor · handmatig door service-team van 4</h4>
            <div className="step"><span className="ico">01</span><div><div className="tt">Ticket openen in Zendesk</div><div className="dd">Mail lezen</div></div></div>
            <div className="step"><span className="ico">02</span><div><div className="tt">Persoons-, product- en proces-feiten opzoeken</div><div className="dd">Verspreid over meerdere systemen</div></div></div>
            <div className="step"><span className="ico">03</span><div><div className="tt">Informatie binnen Monta, Magento en Exact updaten</div><div className="dd">Per vraag wisselen van tool</div></div></div>
            <div className="step"><span className="ico">04</span><div><div className="tt">Een antwoord-mail typen en versturen</div><div className="dd">In de juiste taal en toon</div></div></div>
            <div className="step"><span className="ico">05</span><div><div className="tt">Ticket sluiten</div><div className="dd">En eventuele interne logging</div></div></div>
            <div className="step"><span className="ico">⏱</span><div><div className="tt"></div><div className="dd" style={{ color: "rgb(28, 28, 28)" }}>~10 min per ticket · ~200 tickets per dag</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 klantenservice agent</h4>
            <div className="step"><span className="ico">01</span><div><div className="tt">Ticket binnen via Zendesk, routing-agent zet door</div><div className="dd">Order / product / commercieel / service</div></div></div>
            <div className="step"><span className="ico">02</span><div><div className="tt">Specialist-agents beantwoorden</div><div className="dd">Zoals een product-specialist-agent en order-status-agent (en zo zijn er meer)</div></div></div>
            <div className="step"><span className="ico">03</span><div><div className="tt">Zoekt relevante info op binnen interne systemen</div><div className="dd">Voorraad, orders, facturatie</div></div></div>
            <div className="step"><span className="ico">04</span><div><div className="tt">Past gevraagde orderwijziging toe</div><div className="dd">Bijvoorbeeld de order aanpassen in Magento</div></div></div>
            <div className="step"><span className="ico">05</span><div><div className="tt">Na een laatste taal-check gaat het antwoord terug naar de klant en sluit het ticket</div><div className="dd">In de juiste taal</div></div></div>
            <div className="step"><span className="ico">⏱</span><div><div className="tt">Seconden, meestal binnen de minuut</div><div className="dd">Doorlooptijd per ticket</div></div></div>
          </div>
        </div>

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

const LiveBar = () => {
  return (
    <div className="livebar has-hero">
      <div className="metric hero">
        <div className="k"><span className="dot"></span> Success resolution rate</div>
        <div className="v">60<span className="suf">%</span></div>
        <div className="s">Aandeel solo-afgehandeld</div>
      </div>
      <div className="metric">
        <div className="k">Tickets per dag</div>
        <div className="v">~200</div>
        <div className="s">Door service-team van 4</div>
      </div>
      <div className="metric">
        <div className="k">Talen die de agent begrijpt</div>
        <div className="v">alle</div>
      </div>
      <div className="metric">
        <div className="k">Vacatures bespaard</div>
        <div className="v">~2<span className="suf">FTE</span></div>
        <div className="s">MySteel hoeft daardoor geen 2 extra mensen aan te nemen voor service</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>
          De verbetering is 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 FootCTA = () => {
  return (
    <section className="footcta">
      <h2>Wat zou <span className="grad">een klantenservice-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 sparsessie</a>
        <a href="client-cases.html" className="btn-ghost">Bekijk alle client cases</a>
      </div>
    </section>
  );
};

// Verwante use case · zelfde kaart-stijl (.sbframe-reverse) als onderaan de offerte-case,
// maar wijst naar een ander domein: de Logistiek-service-agent use case.
const RelatedNote = () => (
  <section className="sbframe sbframe-reverse">
    <div className="sbframe-wrap">
      <div className="sbframe-left">
        <div className="sbframe-label">Verwante use case</div>
        <h3 className="sbframe-h">Zelf een keer proberen?</h3>
        <p className="sbframe-p">
          Er staat een interactieve demo klaar die op deze oplossing lijkt, maar dan generieker:
          mail lezen, herkennen waar het over gaat, het juiste antwoord opzoeken. Je mag er zelf
          mee aan de slag.
        </p>
      </div>
      <a href="use-case-site-logistiek-service.html" className="sbframe-link">
        Probeer de demo →
      </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="client-cases.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="vacatures.html">Vacatures</a>
      <a href="trust-center.html">Trust Center</a>
      <a href="/#contact">Contact</a>
    </div>
    <div>© 2026 Repetive · Tilburg</div>
  </footer>;

const CasePage = ({ tweaks }) => {
  return (
    <>
      <TopRibbon />
      <div className="case" data-variant={(tweaks && tweaks.visualVariant) || 'editorial'} id="case">
        <Hero />
        <Story />
        <Workflow />
        <Quote />
        <FootCTA />
        <RelatedNote />
        <FootMeta />
      </div>
    </>
  );
};

Object.assign(window, { TopRibbon, Hero, Story, Workflow, LiveBar, Quote, FootCTA, RelatedNote, FootMeta, CasePage });