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

const AutoIcon = () => (
  <svg width="16" height="16" viewBox="0 0 24 24" aria-hidden="true">
    <circle cx="6" cy="12" r="2.4" fill="none" stroke="#f5b544" strokeWidth="1.6" />
    <circle cx="18" cy="7" r="2.4" fill="none" stroke="#f5b544" strokeWidth="1.6" />
    <circle cx="18" cy="17" r="2.4" fill="none" stroke="#f5b544" strokeWidth="1.6" />
    <path d="M8.4 11.2 L15.4 7.8 M8.4 12.8 L15.4 16.2" fill="none" stroke="#f5b544" strokeWidth="1.6" />
  </svg>
);

const AutoJoin = () => <div className="auto-join" aria-hidden="true"><span /></div>;

const AutoDesk = () => (
  <figure className="screen auto-desk" aria-label="Example recruitment automation. An existing ATS or CRM event starts a workflow, then updates a record. Not a live system.">
    <div className="screen-top">
      <AutoIcon />
      <span>Recruitment Automation</span>
      <span className="screen-tag">Example</span>
    </div>

    <div className="auto-block">
      <div className="col-label">ATS · candidate re-engagement</div>
      <div className="auto-card">
        <div className="auto-label">Trigger</div>
        <strong>Candidate record flagged</strong>
        <span>No availability update in 90 days</span>
      </div>
      <AutoJoin />
      <div className="auto-card is-auto">
        <div className="auto-label">Automation</div>
        <ol className="auto-list">
          <li>Check contact permissions</li>
          <li>Request updated availability</li>
          <li>Process candidate response</li>
        </ol>
      </div>
      <AutoJoin />
      <div className="auto-label">Result</div>
      <div className="auto-results">
        <div className="auto-card is-result">
          <strong>ATS record updated</strong>
          <span>Only if they respond, and the connection allows it</span>
        </div>
        <div className="auto-card is-result">
          <strong>Consultant notified</strong>
          <span>The reply is passed to a person to review</span>
        </div>
      </div>
    </div>

    <div className="auto-block">
      <div className="col-label">CRM · client enquiry</div>
      <ol className="auto-chain">
        <li>
          <strong>New client enquiry</strong>
        </li>
        <li>
          <strong>Capture details and identify client</strong>
        </li>
        <li className="is-staff">
          <div className="staff-tag">Review</div>
          <strong>Assign consultant and create follow-up</strong>
        </li>
        <li>
          <strong>CRM activity recorded</strong>
        </li>
      </ol>
    </div>

    <figcaption className="screen-cap">Example workflows around an existing ATS and CRM. Not live records, and not a connected account.</figcaption>
  </figure>
);

const Hero = () => (
  <section className="section-hero">
    <div className="hero-glow-right" aria-hidden="true" />
    <HexGrid opacity={0.05} id="hex-rec" />
    <div className="split relative">
      <div>
        <div className="eyebrow">
          <span className="dot" aria-hidden="true" />
          Recruitment Systems
        </div>
        <h1 className="h1">ATS &amp; CRM Automation for Recruitment Agencies.</h1>
        <p className="statement">Your Recruitment Data Should Drive Action, Not Create More Admin.</p>
        <p className="lede">
          Transform your existing ATS and CRM into connected, automated workflows. Re-engage candidates, manage client enquiries, update records and eliminate repetitive tasks that consume your consultants&apos; time.
        </p>
        <div className="actions">
          <a className="btn-primary" href={contactHref('recruitment-systems')}>Discuss Your Recruitment Systems</a>
          <a className="btn-secondary" href="#capabilities">Explore Capabilities</a>
        </div>
      </div>
      <AutoDesk />
    </div>
  </section>
);

const Problems = () => (
  <section className="section section-alt" aria-labelledby="problems-title">
    <div className="kicker">Common operational problems</div>
    <h2 className="h2" id="problems-title">The Desk Work Around the Conversation.</h2>
    <p className="lede mt-16">
      Consultants lose time on updates that should follow from work they have already done. These are the patterns agencies ask us to address.
    </p>
    <div className="compare-list mt-40">
      {[
        ['The same candidate, typed twice', 'A CV arrives by email and is created again inside the ATS.', 'Record creation from the source', 'A new or updated candidate record can be drafted from the document or message, for a consultant to accept.'],
        ['Follow-up that depends on memory', 'Candidates and clients wait because the reminder lives in one person’s head.', 'A workflow with an owner', 'Status changes and due follow-ups can create a task or a message, with a person named where judgement is required.'],
        ['A database that goes quiet', 'Suitable people sit untouched because nobody has time to search last year’s records.', 'A reviewed re-engagement list', 'Dormant records can be selected against rules you set, contacted on permitted channels, and returned to a consultant with any reply attached.'],
      ].map(([before, beforeText, after, afterText]) => (
        <div className="compare-row" key={before}>
          <article className="card">
            <div className="label-before">Where time goes</div>
            <h3>{before}</h3>
            <p>{beforeText}</p>
          </article>
          <article className="card card-accent">
            <div className="label-after">What can be built</div>
            <h3>{after}</h3>
            <p>{afterText}</p>
          </article>
        </div>
      ))}
    </div>
  </section>
);

const capabilities = [
  {
    title: 'ATS Automation',
    text: 'Workflows that sit on top of your existing ATS.',
    trigger: 'New CV, candidate change, or stage progression',
    automation: 'Create or update records, sync fields, and trigger the next step',
    outcome: 'Less consultant admin and a cleaner candidate flow',
  },
  {
    title: 'CRM Automation',
    text: 'Client work kept with the people who own the relationship.',
    trigger: 'New enquiry, vacancy update, or a follow-up falling due',
    automation: 'Capture the record, assign an owner, and log the activity',
    outcome: 'Enquiries move as tasks, rather than sitting in an inbox',
  },
  {
    title: 'Candidate Re-engagement',
    text: 'Put the candidate database you already have back to work.',
    trigger: 'A record goes quiet against criteria you set',
    automation: 'Check permission, request availability, and write the reply back',
    outcome: 'A consultant sees who is available before anyone is put forward',
  },
  {
    title: 'Recruitment Data Management',
    text: 'Cleaner records, without consultants reconciling them by hand.',
    trigger: 'A duplicate, a missing field, or a value that no longer matches',
    automation: 'Flag the exception, standardise the field, and sync what is allowed',
    outcome: 'Staff review the exceptions. Records are not overwritten in silence',
  },
  {
    title: 'Recruitment Communication',
    text: 'Updates and handoffs that follow the process you have agreed.',
    trigger: 'A stage change, an interview, or a candidate reply',
    automation: 'Send the approved message, then stop when someone replies or a consultant takes over',
    outcome: 'The next step goes out. Judgement stays with your team',
  },
];

const flowSteps = [
  'Candidate inactive for 90 days',
  'Check contact permission',
  'Send availability request',
  'Response received',
  'ATS updated',
  'Consultant notified',
];

const Capabilities = () => (
  <section className="section section-cap" id="capabilities" aria-labelledby="cap-title">
    <div className="kicker">Capabilities</div>
    <h2 className="h2" id="cap-title">Automation Around Your Existing ATS &amp; CRM.</h2>
    <p className="lede mt-12">
      Practical workflows around the systems you already use. Not a packaged ATS or CRM replacement.
    </p>
    <div className="cap-grid">
      {capabilities.map((item) => (
        <article className="card cap-card" key={item.title}>
          <h3>{item.title}</h3>
          <p>{item.text}</p>
          <dl className="cap-rows">
            <div className="cap-row">
              <dt>Trigger</dt>
              <dd>{item.trigger}</dd>
            </div>
            <div className="cap-row">
              <dt>Automation</dt>
              <dd>{item.automation}</dd>
            </div>
            <div className="cap-row is-outcome">
              <dt>Outcome</dt>
              <dd>{item.outcome}</dd>
            </div>
          </dl>
        </article>
      ))}
      <article className="card cap-flow" aria-label="Example automation workflow">
        <div className="cap-flow-top">
          <span>Example workflow</span>
          <span className="screen-tag">Illustrative</span>
        </div>
        <ol className="cap-seq">
          {flowSteps.map((step) => <li key={step}>{step}</li>)}
        </ol>
        <p className="cap-flow-note">A reply is written back only where permission and the connection allow it.</p>
      </article>
    </div>
  </section>
);

const Diagram = () => (
  <section className="section section-alt" aria-labelledby="flow-title">
    <div className="kicker">How a change moves</div>
    <h2 className="h2" id="flow-title">An Event, Then an Update. Not a New Database.</h2>
    <p className="lede mt-16">
      The automation layer listens for something that already happens in the agency, applies the rule, and writes the result back where it is allowed to.
    </p>
    <div className="mt-40">
      <ArchRow layers={[
        { kicker: 'Source', title: 'Recruitment event', items: ['Candidate', 'Client', 'Vacancy'] },
        { kicker: 'G Solutions', title: 'Automation layer', items: ['Match', 'Message', 'Task'] },
        { kicker: 'System of record', title: 'ATS or CRM', items: ['Update', 'Note', 'Status'] },
      ]} />
    </div>
    <div className="mt-40">
      <ConnectedFlow steps={[
        { n: '01', title: 'Something arrives', text: 'A CV, a reply, a status change or a vacancy update enters from email, a form or the ATS itself.' },
        { n: '02', title: 'The rule runs', text: 'The workflow checks the fields it needs and stops if a required fact is missing.' },
        { n: '03', title: 'A person is involved where needed', text: 'Merges, submissions and anything you mark as sensitive wait for a consultant.', staff: true },
        { n: '04', title: 'The record is updated', text: 'The agreed system receives the note, status or task. Failures are reported rather than dropped.' },
      ]} />
    </div>
  </section>
);

const Consultants = () => (
  <section className="section" aria-labelledby="consult-title">
    <div className="split-even">
      <div>
        <div className="kicker">For consultants</div>
        <h2 className="h2" id="consult-title">More of the Day on Conversations and Placements.</h2>
        <p className="lede mt-16">
          The point of the automation is to remove repeated updates, chases and retyping. Consultants keep the relationship, the judgement and the submission.
        </p>
      </div>
      <div className="stack">
        {[
          ['A queue instead of a memory', 'Due follow-ups and incomplete records show up as tasks.'],
          ['Context on the record', 'Replies and status changes are attached to the person they belong to.'],
          ['A review step you control', 'The system can prepare an action. Sending, merging or submitting can still require a consultant.'],
        ].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('recruitment-systems')}>Discuss Your Recruitment Systems</a>
    </div>
  </section>
);

const Access = () => (
  <section className="section section-alt" aria-labelledby="access-title">
    <div className="kicker">Integration and access</div>
    <h2 className="h2" id="access-title">We Start From What Your Platform Allows.</h2>
    <p className="lede mt-16">
      Bullhorn, Vincere and JobAdder are examples of ATS and CRM products agencies already use. Mentioning them is not a partnership, and it is not a guarantee that every account can be connected in the same way.
    </p>
    <div className="grid-3 mt-40">
      {[
        ['API or supported export', 'The cleanest route, where the vendor provides one and your contract includes it.'],
        ['Agreed file or mailbox route', 'Useful where a proper API is not available and the process can run from a structured file or inbox.'],
        ['Closed access stays manual', 'If a vendor provides no permitted route, that step is redesigned or left with your team. Hidden access and shared passwords are not part of the design.'],
      ].map(([title, text]) => (
        <article className="card" key={title}>
          <h3>{title}</h3>
          <p>{text}</p>
        </article>
      ))}
    </div>
  </section>
);

const faqs = [
  ['Is this a new ATS or CRM we can switch on?', 'No. This page describes automation around the recruitment systems you have. Building a complete ATS or CRM is a separate project under Specialist Software.'],
  ['Will this replace our consultants?', 'The aim is to take repetitive updates and chasing off the desk so consultants can spend more time with candidates, clients and placements.'],
  ['Can you connect to the ATS we already pay for?', 'Where that product exposes an API, export or other permitted route, yes. We confirm the route before it is included in a proposal.'],
  ['What happens to duplicate candidates?', 'Possible duplicates can be flagged. Merging or deleting a person stays with your team unless you have agreed an explicit rule.'],
  ['Can candidates be contacted automatically?', 'Only on channels and for purposes you are satisfied are permitted. The workflow should stop when someone replies or opts out.'],
  ['How is a project priced?', 'From the systems involved, the number of workflows, the volume of records and the review steps your team wants to keep. There is no single licence price on this page.'],
];

function RecruitmentSystemsPage() {
  return (
    <PageShell>
      <SiteNav active="Recruitment Systems" />
      <main id="content">
        <Hero />
        <Problems />
        <Capabilities />
        <Diagram />
        <Consultants />
        <Access />
        <section className="section" aria-labelledby="bespoke-title">
          <article className="card card-accent">
            <h2 className="h3" id="bespoke-title">Need a complete custom-built ATS or CRM?</h2>
            <p className="mt-8">That is a development project scoped around your process, rather than a module on this page.</p>
            <div className="actions">
              <a className="btn-secondary" href="/specialist-software.html">Explore Specialist Software</a>
            </div>
          </article>
        </section>
        <section className="section section-alt" aria-labelledby="faq-title">
          <div className="kicker">Questions</div>
          <h2 className="h2" id="faq-title">Recruitment Systems Questions</h2>
          <FAQList items={faqs} />
        </section>
        <CloseCTA
          title="Tell Us Where the Desk Loses Time."
          text="Bring the ATS or CRM you use and the workflow that keeps falling behind. We will say what can be connected, and what should stay with a consultant."
          primary={{ href: contactHref('recruitment-systems'), label: 'Discuss Your Recruitment Systems' }}
        />
      </main>
      <SiteFooter />
    </PageShell>
  );
}

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