// Client case · YoungOnes, Support Agent ('Max')
// Terminologie volgt het YoungOnes-review (juli 2026): 'workers', niet 'freelancers';
// 'opdrachten', niet 'diensten'; en de agent heet 'Support Agent', zonder 'Freelance'.
// Mirrors the structure & class names of case_components_pia.jsx so the shared
// case_page.jsx + case.css render the same visual rhythm with YoungOnes content.
// Section order: Hero + snapshot → Story (2 kolommen) → Workflow voor/na + LiveBar
//                → Quote → FootCTA → PatternReference (verwante use case) → FootMeta
// Chrome (FootMeta) + CTA routes aligned with the live site (friendly URLs,
// Trust Center) — the Claude Design export shipped an older variant.

const Hero = ({ opener }) => {
  return (
    <section className="hero">
      <div className="hero-inner">
        <div className="hero-meta">
          <span className="chip">Tech · Marktplaats</span>
          <span className="chip purple">Customer Service, chat</span>
          <span className="case-num">05 / 06</span>
        </div>
        {/* 24/7 staat bewust niet in de kop: dat geldt voor de directe vragen, niet voor
            de complexere. Het cijfer leeft in de resultatenbalk (Beschikbaarheid). */}
        <h1 className="hero-title">
          Workers krijgen <span className="grad">direct antwoord</span>, niet pas de volgende dag.
        </h1>
        <p className="hero-sub">
          De Support Agent (Max) staat achter de chat van YoungOnes. Vragen over je account,
          facturen, blokkades en gemiste opdrachten handelt de agent direct af op basis van YoungOnes'
          eigen systemen, na een identiteitscheck. Complexere vragen zet Max klaar als voorbereid
          ticket, zodat workers niet van het kastje naar de muur worden gestuurd en support er binnen
          kantoortijden meteen mee verder kan.
        </p>
        <div className="snapshot">
          <div className="cell">
            <div className="k">Klant</div>
            <div className="v">YoungOnes</div>
            <div className="sub">platform voor werk</div>
          </div>
          <div className="cell">
            <div className="k">Agent</div>
            <div className="v small">Support Agent (Max)</div>
          </div>
          <div className="cell">
            <div className="k">Live sinds</div>
            <div className="v small">april 2026</div>
          </div>
          <div className="cell">
            <div className="k">Aanpak</div>
            <div className="v">Gefaseerd</div>
          </div>
          <div className="cell">
            <div className="k">Scope</div>
            <div className="v small">Chat → direct antwoord of een voorbereid ticket voor support</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">Honderden vragen per dag, en het antwoord stond meestal al in het systeem.</h2>

      <div className="story-opener">
        "De gebruikers van het YoungOnes-platform werken vooral 's avonds en in het weekend. Maar als ze een
        vraag hadden, moesten ze wachten tot de volgende werkdag. Terwijl het antwoord in onze systemen
        klaarstond."
      </div>

      <div className="story-body">
        <div>
          <span className="tag">Situatie</span>
          <p>
            Via het YoungOnes-platform vinden bedrijven en workers elkaar. Elke dag komen er honderden
            vragen binnen via de chat: over accounts, facturen, uren, blokkades, gemiste opdrachten,
            wachtwoorden en identiteitsverificatie. Bijna altijd hetzelfde patroon: wie ben je, waar gaat
            het over, welke gegevens horen erbij, passend antwoord formuleren en versturen.
          </p>
          <p>
            Zonder de agent zat het supportteam vol met vragen waarvan het antwoord al in YoungOnes'
            eigen systemen stond. Dat zorgde voor veel herhalend werk en hoge werkdruk, en bij piekdrukte
            liep de wachttijd verder op, terwijl veel vragen binnen dertig seconden te beantwoorden waren.
          </p>
        </div>
        <div>
          <span className="tag">Wat we deden, in fases</span>
          <p>
            <strong>Fase 1, kennis en eerste live versie.</strong> Samen met YoungOnes vastgelegd in welke
            toon YoungOnes met de workers praat. Meer dan 7.500 vragen van het afgelopen jaar ingedeeld:
            wat de agent zelf doet en wat naar een mens gaat. Max ging live met de FAQ en account-info,
            met een goede identiteitscheck en antwoord op vragen over account, verificatie, blokkades,
            gemiste opdrachten en wachtwoorden.
          </p>
          <p>
            <strong>Fase 2, financiële data gekoppeld.</strong> Daarna de financiële kant erbij: facturen,
            betalingen en uitbetalingen. Max haalt deze gegevens nu rechtstreeks uit YoungOnes' systemen,
            zodat ook geld-vragen direct in de chat beantwoord worden in plaats van door te moeten naar support.
          </p>
          <p>
            <strong>Fase 3, doorlopend bijschaven.</strong> Sinds live wordt Max dagelijks bijgeschaafd,
            van toon tot inlogstap tot uitzonderingen, en handelt hij stap voor stap meer zelf af. Vaste
            regels in plaats van losse AI, zodat het ook bij drukte stabiel blijft. Het oude contactformulier
            kan eruit, want alles loopt nu via de chat.
          </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 vraag die tot de volgende werkdag wachtte, naar direct antwoord in de chat.</h2>
        <div className="wf-grid">
          <div className="wf-col before">
            <h4>Voor · handmatig door het supportteam</h4>
            <div className="step"><span className="ico">01</span><div><div className="tt">Vraag komt binnen via de chat</div><div className="dd">Een supportmedewerker pakt 'm op zodra er tijd is</div></div></div>
            <div className="step"><span className="ico">02</span><div><div className="tt">Wie is de worker?</div><div className="dd">Handmatig controleren, soms overgeslagen</div></div></div>
            <div className="step"><span className="ico">03</span><div><div className="tt">Gegevens opzoeken</div><div className="dd">Account, uren, gemiste opdrachten, status, facturen</div></div></div>
            <div className="step"><span className="ico">04</span><div><div className="tt">Antwoord opstellen</div><div className="dd">Vaak in de juiste toon, meestal zonder typefouten</div></div></div>
            <div className="step"><span className="ico">05</span><div><div className="tt">Buiten kantoortijden</div><div className="dd">Blijft liggen tot de volgende ochtend</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 Max</h4>
            <div className="step"><span className="ico">01</span><div><div className="tt">Vraag komt binnen via de chat</div><div className="dd">Max pakt 'm meteen op</div></div></div>
            <div className="step"><span className="ico">02</span><div><div className="tt">Controleert wie de worker is</div><div className="dd">Identiteitscheck vóór er gegevens op tafel komen</div></div></div>
            <div className="step"><span className="ico">03</span><div><div className="tt">Herkent waar het over gaat, en haalt de juiste gegevens op</div><div className="dd">Over account, uren of factuur</div></div></div>
            <div className="step"><span className="ico">04</span><div><div className="tt">Geeft direct antwoord</div><div className="dd">Altijd in de juiste toon, zonder typefouten</div></div></div>
            <div className="step"><span className="ico">05</span><div><div className="tt">Lukt het niet? Max zet het klaar als voorbereid ticket</div><div className="dd">Voor het supportteam, ook buiten kantoortijden</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> Beschikbaarheid</div>
        <div className="v">24/7</div>
        <div className="s">Voorheen alleen kantoortijden en weekend (vaste uren)</div>
      </div>
      <div className="metric">
        <div className="k">Gesprekken per maand</div>
        <div className="v">~4.500</div>
        <div className="s">~50-60k per jaar</div>
      </div>
      <div className="metric">
        <div className="k">Zelf afgehandeld</div>
        <div className="v">~30<span className="suf">%</span></div>
        <div className="s">De rest 24/7 als voorbereid ticket voor support</div>
      </div>
      <div className="metric">
        <div className="k">Talen live</div>
        <div className="v">NL + EN</div>
      </div>
    </div>
  );
};

// Lange klantquote · .pull-quote--long schaalt de serif een stap terug zodat een
// quote van vijf zinnen leesbaar blijft (zie assets/case.css).
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 pull-quote--long">
          <span className="pq-mark" aria-hidden="true">“</span>
          Bij YoungOnes hebben we te maken met veel diverse, maar ook complexe vragen van workers.
          Daardoor liepen we voorheen met andere partners vast, omdat we er niet uitkwamen hoe dit er
          in de praktijk met een AI Agent uit moest komen te zien. In de samenwerking met Repetive is dit
          geen seconde een probleem geweest. Je kunt ze echt vertrouwen op hun expertise en ze weten hoe
          om te gaan met unieke cases. Binnen een kwartaal stond onze AI Agent Max live, waar we nog steeds
          altijd erg tevreden over zijn.”
        </p>
        <div className="pull-attr">
          <span className="pa-rule" />
          <div className="pa-who">
            <b>Lotte de Wijs</b>
            <span className="role">Chief of Staff to the CMO · YoungOnes</span>
          </div>
        </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 sparsessie</a>
        <a href="client-cases.html" className="btn-ghost">Bekijk alle client 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="/#integraties">Integraties</a>
      <a href="client-cases.html">Cases</a>
      <a href="/#team">Over ons</a>
      <a href="wat-kost-het.html">Wat kost het?</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>
      <a href="#" onClick={(e) => { e.preventDefault(); window.repetiveOpenCookieSettings(); }}>Cookievoorkeuren</a>
    </div>
    <div className="foot-end">
      <span>© 2026 Repetive · Tilburg</span>
      <a className="foot-social" href="https://www.linkedin.com/company/repetive/" target="_blank" rel="noopener" aria-label="Repetive op LinkedIn">
        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.35V9h3.42v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.45v6.29zM5.34 7.43a2.06 2.06 0 1 1 0-4.12 2.06 2.06 0 0 1 0 4.12zM7.12 20.45H3.56V9h3.56v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.72v20.56C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.72V1.72C24 .77 23.2 0 22.22 0z"/></svg>
      </a>
    </div>
  </footer>;

// Verwante use case · zelfde kaart-stijl (.sbframe-reverse) als onderaan de andere case-pagina's.
// Wijst naar de Logistiek-service-agent use case: hetzelfde klantenservice-patroon, andere sector.
const PatternReference = () =>
<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">Hetzelfde patroon, een andere industrie.</h3>
        <p className="sbframe-p">
          De Logistiek-service-agent doet klantenservice in de logistiek. Datzelfde
          klantenservice-patroon zie je hier op een tech-marktplaats terug. Het laat zien dat dit
          ook buiten onze hoofdindustrieën werkt.
        </p>
      </div>
      <a href="use-case-site-logistiek-service.html" className="sbframe-link">
        Bekijk de use case →
      </a>
    </div>
  </section>;

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