const {
  HexGrid, SiteNav, SiteFooter, PageShell, FAQList, CloseCTA,
  ConnectedFlow, StackSteps, Screen, contactHref,
} = window.GS;

const Dashboard = () => (
  <Screen
    label="Operational view"
    caption="Example figures for layout only. Not a live client dashboard and not a performance claim."
  >
    <div className="stack">
      {[
        ['Timesheets waiting for approval', '6 in the sample queue'],
        ['Credentials due for review', '4 expiring inside the sample window'],
        ['Shifts still needing cover', '2 open · handed to Absence Management'],
      ].map(([title, sub]) => (
        <div className="dash-row" key={title}>
          <strong>{title}</strong>
          <div className="status-sub">{sub}</div>
        </div>
      ))}
    </div>
  </Screen>
);

const Hero = () => (
  <section className="section-hero">
    <div className="hero-glow-right" aria-hidden="true" />
    <HexGrid opacity={0.05} id="hex-ops" />
    <div className="split relative">
      <div>
        <div className="eyebrow">
          <span className="dot" aria-hidden="true" />
          Agency Operations
        </div>
        <h1 className="h1">Automate the Work Behind Your Recruitment Agency.</h1>
        <p className="lede">
          From workforce scheduling and compliance to timesheets, payroll preparation and reporting, we build systems that reduce repetitive operational work.
        </p>
        <div className="actions">
          <a className="btn-primary" href="#solutions">Explore Operational Solutions</a>
          <a className="btn-secondary" href={contactHref('agency-operations')}>Discuss Your Requirements</a>
        </div>
      </div>
      <Dashboard />
    </div>
  </section>
);

const Intro = () => (
  <section className="section section-alt" aria-labelledby="intro-title">
    <div className="split-even">
      <div>
        <div className="kicker">The operational load</div>
        <h2 className="h2" id="intro-title">Administration Grows With Every Placement.</h2>
        <p className="lede mt-16">
          Candidate and vacancy work is covered under <a className="text-link" href="/recruitment-systems.html">Recruitment Systems</a>. This page is the work of running the agency after the deal is in motion: documents, rotas, hours, vendor portals and the numbers management asks for.
        </p>
      </div>
      <div className="compare-row">
        <article className="card">
          <div className="label-before">By hand</div>
          <p>Documents chased in email, hours retyped, portal tasks repeated, and a report assembled the night before a review.</p>
        </article>
        <article className="card card-accent">
          <div className="label-after">With a workflow</div>
          <p>Collection, checks and handoffs follow a rule. A person still approves compliance decisions, timesheets and anything the source system will not expose.</p>
        </article>
      </div>
    </div>
  </section>
);

const areas = [
  {
    title: 'Compliance Management',
    text: 'Support for the chase and the record. The system does not decide that a worker is legally compliant.',
    items: ['Document collection', 'Right-to-work process support', 'Expiry monitoring', 'Re-credentialing reminders', 'Status tracking', 'Audit trail and escalation'],
  },
  {
    title: 'Workforce Scheduling',
    text: 'Availability, allocation and the messages around a change of shift. Cover for an absence continues in Absence Management.',
    items: ['Availability', 'Shift allocation', 'Rota coordination', 'Scheduling notifications', 'Shift changes', 'Replacement handoff'],
  },
  {
    title: 'Timesheet & Payroll Preparation',
    text: 'Collection, checking and a file your payroll process can use. This is not a payroll bureau and it does not pay workers.',
    items: ['Timesheet collection', 'Approval workflow', 'Missing-timesheet reminders', 'Validation', 'Payroll-ready export', 'Invoice preparation'],
  },
  {
    title: 'VMS & MSP Automation',
    text: 'Help with the administrative work around a vendor portal. What can be automated depends on the access that portal allows.',
    items: ['Data preparation', 'Submission support', 'Cross-system movement', 'Exception tracking', 'Repeated portal tasks'],
  },
  {
    title: 'Agency Intelligence',
    text: 'Reporting from the sources you can connect. Margin figures appear only where the financial data is actually available.',
    items: ['Consultant activity', 'Placement and fill reporting', 'Margin where data exists', 'Workforce activity', 'Operational reports'],
  },
  {
    title: 'Operational Data Integration',
    text: 'Fewer copies of the same fact, and a visible failure when a transfer does not complete.',
    items: ['ATS and payroll', 'VMS and scheduling', 'Reporting tools', 'Less duplicated entry', 'Synchronised records', 'Failed transfers surfaced'],
  },
];

const Catalogue = () => (
  <section className="section" id="solutions" aria-labelledby="cat-title">
    <div className="kicker">Operational software</div>
    <h2 className="h2" id="cat-title">A Catalogue of the Work Behind the Desk.</h2>
    <p className="lede mt-16">
      Each area is scoped on its own. An agency can start with one queue — timesheets, credentials, or vendor submissions — rather than a replacement for every system.
    </p>
    <div className="grid-2 mt-40">
      {areas.map((area) => (
        <article className="card" key={area.title}>
          <h3>{area.title}</h3>
          <p>{area.text}</p>
          <ul className="pills">
            {area.items.map((item) => <li key={item}>{item}</li>)}
          </ul>
        </article>
      ))}
    </div>
  </section>
);

const Compliance = () => (
  <section className="section section-alt" aria-labelledby="comp-title">
    <div className="split-even">
      <div>
        <div className="kicker">Compliance</div>
        <h2 className="h2" id="comp-title">Reminders and a Status List. A Person Makes the Call.</h2>
        <p className="lede mt-16">
          Expiry monitoring and document requests reduce the chase. Right-to-work and re-credentialing still need the check your process requires. The software records the request, the file and the escalation. It does not certify the result.
        </p>
      </div>
        <StackSteps steps={[
          { title: 'Request', text: 'The missing or expiring document is requested on the schedule you set.' },
          { title: 'Receive', text: 'The returned file is stored against the worker and marked as received.' },
          { title: 'Review', text: 'A member of staff checks the document and records the decision.', staff: true },
          { title: 'Chase or clear', text: 'Gaps stay on the list. Completed items leave it, with the trail kept.' },
        ]} />
    </div>
  </section>
);

const Timesheet = () => (
  <section className="section" aria-labelledby="time-title">
    <div className="kicker">Timesheets to payroll preparation</div>
    <h2 className="h2" id="time-title">Checked, Approved, Then Handed to Payroll.</h2>
    <p className="lede mt-16">
      Automated steps prepare the file. Paying the worker, and issuing the client invoice as a finance action, stay with the payroll and finance process you already use.
    </p>
    <ConnectedFlow steps={[
      { n: '01', title: 'Timesheet received', text: 'Hours arrive by the route in scope: a portal export, a file or a structured message.' },
      { n: '02', title: 'Data validated', text: 'Worker, client, dates and obvious mismatches are checked against the booking information available.' },
      { n: '03', title: 'Manager approval', text: 'A person approves the hours, or returns them, before anything is treated as ready.', staff: true },
      { n: '04', title: 'Payroll and invoice preparation', text: 'An export or draft is produced for the payroll run and for invoice preparation. The system does not pay the worker.' },
      { n: '05', title: 'Exception reporting', text: 'Missing sheets, failed reads and mismatches are listed for the team instead of being skipped quietly.' },
    ]} />
  </section>
);

const Scheduling = () => (
  <section className="section section-alt" aria-labelledby="sched-title">
    <div className="split-even">
      <div>
        <div className="kicker">Scheduling and absence</div>
        <h2 className="h2" id="sched-title">The Rota, and the Moment Someone Cannot Attend.</h2>
        <p className="lede mt-16">
          Scheduling covers availability, allocation and notifying people of a change. When the change is an absence, the reporting and replacement workflow is <a className="text-link" href="/absence-management.html">Absence Management</a>.
        </p>
        <p className="body mt-16">
          The two meet at the open shift: scheduling knows the booking, Absence Management runs the cover process, and the outcome is written back for the coordinators who still own the client relationship.
        </p>
      </div>
      <div className="stack">
        {[
          ['Availability held in one list', 'Workers’ available windows are not reconstructed from text messages each morning.'],
          ['A change has an audience', 'The people who must hear about a shift change are part of the workflow.'],
          ['Cover stays a defined process', 'An absence opens a cover case rather than a fresh round of ad-hoc calls with no record.'],
        ].map(([title, text]) => (
          <article className="card" key={title}>
            <h3>{title}</h3>
            <p>{text}</p>
          </article>
        ))}
      </div>
    </div>
    <div className="actions">
      <a className="btn-primary" href={contactHref('agency-operations')}>Discuss Your Requirements</a>
    </div>
  </section>
);

const faqs = [
  ['Does this replace our payroll provider?', 'No. We prepare, validate and export timesheet and billing data. Paying workers remains with your payroll process or provider.'],
  ['Will the system tell us someone is compliant?', 'It tracks requests, files, dates and status. A person, or a qualified provider where you use one, still makes the compliance decision.'],
  ['Can you log into a VMS for us?', 'Only within the access that platform permits. Some portals restrict automated use. Where they do, the workflow stops at preparing the pack for a person to submit.'],
  ['How does this relate to Absence Management?', 'Absence Management runs the absence and replacement workflow. Agency Operations covers the wider rota, compliance, hours and reporting around it.'],
  ['Can we see margin and fill rates?', 'Where placement, rate and cost data is available from a system you can connect, those figures can be reported. We do not invent a margin the source data does not contain.'],
  ['Do we have to automate every process at once?', 'No. A single queue with a clear handoff is usually the right first scope.'],
];

function AgencyOperationsPage() {
  return (
    <PageShell>
      <SiteNav active="Agency Operations" />
      <main id="content">
        <Hero />
        <Intro />
        <Catalogue />
        <Compliance />
        <Timesheet />
        <Scheduling />
        <section className="section" aria-labelledby="faq-title">
          <div className="kicker">Questions</div>
          <h2 className="h2" id="faq-title">Agency Operations Questions</h2>
          <FAQList items={faqs} />
        </section>
        <CloseCTA
          title="Start With the Queue That Consumes the Week."
          text="Timesheets, credentials, vendor portals or the rota. Tell us which one is breaking the operation and we will scope the workflow around it."
          primary={{ href: contactHref('agency-operations'), label: 'Discuss Your Requirements' }}
          secondary={{ href: '/absence-management.html', label: 'Explore Absence Management' }}
        />
      </main>
      <SiteFooter />
    </PageShell>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<AgencyOperationsPage />);