// PIA Acceptatieagent · case-specific components.
// Mirrors the structure & class names of case_components.jsx (MySteel) so the
// shared case_page.jsx + case.css render the same visual rhythm with PIA content.
// 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">Financial Services · Verzekeren</span>
          <span className="chip purple">Operations, acceptatieproces</span>
          <span className="case-num">04 / 06</span>
        </div>
        <h1 className="hero-title">
          Van uren zoekwerk naar oordelen vanuit <span className="grad">één overzicht</span>.
        </h1>
        <p className="hero-sub">
          De PIA Acceptatieagent verzamelt per aanvraag bedrijfs-, object-, dekkings- en
          relatiegegevens, en toetst die aan de polisvoorwaarden per verzekeraar. Het oordeel
          staat klaar in het acceptatiesysteem, met onderbouwing en aandachtspunten. De
          acceptant beslist.
        </p>
        <div className="snapshot">
          <div className="cell">
            <div className="k">Klant</div>
            <div className="v small">Private Insurance Assuradeuren</div>
          </div>
          <div className="cell">
            <div className="k">Agent</div>
            <div className="v small">PIA Acceptatieagent</div>
          </div>
          <div className="cell">
            <div className="k">Live sinds</div>
            <div className="v">maart 2026</div>
            <div className="sub">voor boot-verzekeringen</div>
          </div>
          <div className="cell">
            <div className="k">Tijd tot livegang</div>
            <div className="v">7 weken</div>
            <div className="sub">met 2 extra branches (auto en wonen) in de weken erna</div>
          </div>
          <div className="cell">
            <div className="k">Scope</div>
            <div className="v small">Van data verzamelen tot advies</div>
            <div className="sub">incl. toetsing aan de juiste acceptatie-regels</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">20+ handmatige checks per aanvraag, door vijf acceptanten, met verschil tussen reviewers als neveneffect.</h2>

      <div className="story-opener">
        "Voor elk dossier moesten we langs allerlei systemen om informatie bij elkaar te
        zoeken: bedrijfsgegevens, objectdata, polisvoorwaarden, historische context. Dat
        zoekwerk was de grootste tijdvreter, terwijl het oordeel zelf onze échte taak was."
      </div>

      <div className="story-body">
        <div>
          <span className="tag">Situatie</span>
          <p>
            PIA is gevolmachtigd agent voor particuliere verzekeringen: boot, auto, wonen,
            bedrijfsmatig. Voor elke aanvraag moeten acceptanten eerst polisdekking matchen,
            bedrijven en personen checken en objectdata ophalen. Pas dan begint het echte
            werk: een onderbouwd oordeel geven.
          </p>
          <p>
            Vijf acceptanten deden dat handmatig, elke dag opnieuw. Het verzamelwerk is
            repetitief en niet waar ze voor gestudeerd hebben. Het oordelen wél, en daar
            moet hun aandacht heen.
          </p>
        </div>
        <div>
          <span className="tag">Wat we deden</span>
          <p>
            <strong>Week 1 · kennis.</strong> Samen met PIA alle acceptatieregels
            gedocumenteerd, per verzekeraar en per product. In kaart gebracht welke bronnen
            we per aanvraag nodig hebben.
          </p>
          <p>
            <strong>Week 4 · bouw.</strong> Elk uur haalt de agent nieuwe aanvragen op uit
            het acceptatiesysteem en verrijkt die parallel op vijf vlakken: contract,
            product, object, dekking en relatie. Voor elk vlak worden de relevante interne
            en externe bronnen aangeroepen. Het resultaat komt terug in het
            acceptatiesysteem, onderbouwd en klaar voor de acceptant.
          </p>
          <p>
            <strong>Week 7 · live.</strong> De agent draait sinds maart in productie. Sindsdien
            voeren we wekelijks verbeteringen door op basis van feedback uit de praktijk · zo
            bouwen we samen met PIA aan een agent die met elke iteratie scherper wordt en
            echt waarde toevoegt aan het acceptatieproces.
          </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 20+ handmatige checks per aanvraag naar één onderbouwd oordeel terug in het acceptatiesysteem.</h2>
        <div className="wf-grid">
          <div className="wf-col before">
            <h4>Voor · handmatig door acceptant</h4>
            <div className="step"><span className="ico">01</span><div><div className="tt">DIAS openen</div><div className="dd">Aanvraag lezen, dossier doorlopen</div></div></div>
            <div className="step"><span className="ico">02</span><div><div className="tt">Polisvoorwaarden checken</div><div className="dd">Per verzekeraar, per product</div></div></div>
            <div className="step"><span className="ico">03</span><div><div className="tt">Object verifiëren</div><div className="dd">FishOnWeb, RDW of Street View per branche</div></div></div>
            <div className="step"><span className="ico">04</span><div><div className="tt">Persoon en bedrijf checken</div><div className="dd">Openbare bronnen en KvK</div></div></div>
            <div className="step"><span className="ico">05</span><div><div className="tt">Oordeel en vastleggen</div><div className="dd">Groen/geel/rood, taak terug in DIAS</div></div></div>
            <div className="step"><span className="ico">⏱</span><div><div className="tt"></div><div className="dd" style={{ color: "rgb(28, 28, 28)" }}>~75 minuten per aanvraag</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 PIA Acceptatieagent</h4>
            <div className="step"><span className="ico">01</span><div><div className="tt">Aanvragen ophalen</div><div className="dd">Elk uur nieuwe contract-events uit DIAS</div></div></div>
            <div className="step"><span className="ico">02</span><div><div className="tt">Vijf parallelle checks</div><div className="dd">Contract, product, object, dekking en relatie</div></div></div>
            <div className="step"><span className="ico">03</span><div><div className="tt">Aanvullen met publieke bronnen</div><div className="dd">Openbare registers, Street View, FishOnWeb of RDW</div></div></div>
            <div className="step"><span className="ico">04</span><div><div className="tt">Polisvoorwaarden matchen</div><div className="dd">Per verzekeraar en product, met onderbouwing</div></div></div>
            <div className="step"><span className="ico">05</span><div><div className="tt">Oordeel terug in DIAS</div><div className="dd">PDF met onderbouwing en bronlinks</div></div></div>
            <div className="step"><span className="ico">⏱</span><div><div className="tt">Agent-tijd onder de minuut</div><div className="dd">Acceptant-review ~15 min</div></div></div>
          </div>
        </div>

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

};

const LiveBar = () => {
  return (
    <div className="livebar has-hero">
      <div className="metric hero">
        <div className="k">Tijd bespaard per aanvraag</div>
        <div className="v">~60<span className="suf">min</span></div>
        <div className="s">Van ~75 min naar ~15 min</div>
      </div>
      <div className="metric">
        <div className="k"><span className="dot"></span> Branches live</div>
        <div className="v">3<span className="suf">branches</span></div>
        <div className="s">Met zowel schaalbare als branche-specifieke onderdelen</div>
      </div>
      <div className="metric">
        <div className="k">Samengebrachte databronnen</div>
        <div className="v">10+<span className="suf">bronnen</span></div>
        <div className="s">Intern en extern, per aanvraag samengevoegd</div>
      </div>
      <div className="metric">
        <div className="k">Aanvragen per maand</div>
        <div className="v">450<span className="suf">/mnd</span></div>
        <div className="s">Over de drie live branches heen</div>
      </div>
    </div>);

};

const Quote = () => {
  return (
    <section className="quote-section">
      <div className="quote-wrap quote-wrap--duo">
        <div className="eyebrow-big"><span className="bar"></span> Wat de klant zegt</div>
        <div className="quote-duo">
          <figure className="qcol">
            <span className="qmark" aria-hidden="true">“</span>
            <blockquote className="qtext">
              Repetive heeft echt kennis van onze processen en zijn perfect in staat om de
              praktijk vol uitzonderingen te vertalen naar AI Agents die met ons werken. Wij
              ervaren de mensen van Repetive als oplossingsgericht, gedreven en zeer goed op de
              hoogte van de mogelijkheden met AI. Geen vage adviezen, maar zij leveren concrete
              oplossingen die er binnen no-time staan.
            </blockquote>
            <figcaption className="pull-attr">
              <span className="pa-rule" />
              <div className="pa-who">
                <b>Otto Lammers</b>
                <span className="role">Directeur · Private Insurance Assuradeuren BV</span>
              </div>
            </figcaption>
          </figure>
          <figure className="qcol">
            <span className="qmark" aria-hidden="true">“</span>
            <blockquote className="qtext">
              Het antwoord op <i>“ik moet iets met AI”</i> naar <i>“ik weet wat ik moet doen met AI”</i> is
              voor mij Repetive. Het proces start met een duidelijke en transparante toelichting en
              begeleiding van de mogelijkheden en onmogelijkheden en dan vervolgens de vertaling van
              theorie naar praktijk. Wij zijn in goede handen en ik kijk uit naar onze volgende projecten.
            </blockquote>
            <figcaption className="pull-attr">
              <span className="pa-rule" />
              <div className="pa-who">
                <b>Bart-Jan</b>
                <span className="role">CEO · Private Insurance Assuradeuren BV</span>
              </div>
            </figcaption>
          </figure>
        </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="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>
      <a href="#" onClick={(e) => { e.preventDefault(); window.repetiveOpenCookieSettings(); }}>Cookievoorkeuren</a>
    </div>
    <div>© 2026 Repetive · Tilburg</div>
  </footer>;


// Reverse-reference back to the general Acceptatie-agent use case page.
// Same .sbframe-reverse styling as the MySteel page uses, with PIA-specific copy.
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 acceptatie-agent, los van PIA.</h3>
        <p className="sbframe-p">
          Hierboven zag je de Acceptatieagent in PIA-uniform: hun DIAS, hun verzekeraars,
          hun branches. Onder de motorkap zit een patroon dat voor elke gevolmachtigd agent
          of verzekeraar werkt · en in de use case mag je zelf achter het stuur.
        </p>
      </div>
      <a href="use-case-site-acceptatieagent.html" className="sbframe-link">
        Probeer de interactieve demo →
      </a>
    </div>
  </section>;


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