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

const CallExample = () => (
  <Screen
    label="Inbound call"
    caption="Example handling sequence. Not a recording, and not a promise that every call is resolved without a person."
  >
    <div className="thread">
      <Bubble side="in" who="Caller">I’d like to speak to someone about a warehouse supervisor role.</Bubble>
      <Bubble side="ai" who="Voice agent">
        I can take the details for the desk. Is this about a vacancy you want to fill, or a role you want to apply for?
      </Bubble>
      <Bubble side="in" who="Caller">I want to apply.</Bubble>
      <Bubble side="ai" who="Voice agent">
        I’ll record your name, number and the role, then pass it to a consultant. If you would rather wait for someone now, I can try to transfer the call.
      </Bubble>
    </div>
  </Screen>
);

const Hero = () => (
  <section className="section-hero">
    <div className="hero-glow-right" aria-hidden="true" />
    <HexGrid opacity={0.05} id="hex-voice" />
    <div className="split relative">
      <div>
        <div className="eyebrow">
          <span className="dot" aria-hidden="true" />
          Specialist software · voice
        </div>
        <h1 className="h1">AI Voice Reception for Recruitment Agencies.</h1>
        <p className="lede">
          Inbound call handling for client enquiries, candidate contact and the questions a switchboard answers all day. The call is classified, the detail is structured, and a person takes over when the conversation needs them.
        </p>
        <div className="actions">
          <a className="btn-primary" href={contactHref('specialist-software')}>Discuss a Voice Project</a>
          <a className="btn-secondary" href="#handling">See How a Call Is Handled</a>
        </div>
      </div>
      <CallExample />
    </div>
  </section>
);

const Handling = () => (
  <section className="section section-alt" id="handling" aria-labelledby="handle-title">
    <div className="kicker">How a call is handled</div>
    <h2 className="h2" id="handle-title">Classify, Capture, Then Hand Over.</h2>
    <p className="lede mt-16">
      The agent follows a script and the routes you agree. It is a specialist project under <a className="text-link" href="/specialist-software.html">Specialist Software</a>, configured for your numbers and your desk, not a generic receptionist switched on for every agency in the same way.
    </p>
    <ConnectedFlow steps={[
      { n: '01', title: 'Answer', text: 'The call is taken on the number you put in front of it, including hours when the desk is unstaffed if that is in scope.' },
      { n: '02', title: 'Classify', text: 'Client, candidate, absence, supplier or something else — using the categories you define.' },
      { n: '03', title: 'Capture', text: 'Name, number, reason and any booking or vacancy detail the script asks for.' },
      { n: '04', title: 'Route', text: 'A message, a task or a transfer. Anything outside the script is escalated.', staff: true },
    ]} />
  </section>
);

const Uses = () => (
  <section className="section" aria-labelledby="uses-title">
    <div className="kicker">What it can cover</div>
    <h2 className="h2" id="uses-title">The Calls a Recruitment Desk Already Recognises.</h2>
    <div className="grid-3 mt-40">
      {[
        ['Client enquiries', 'A hiring need is captured as a structured note a consultant can pick up, rather than a missed call.'],
        ['Candidate enquiries', 'Availability, role interest and contact details are taken so the desk is not starting from a voicemail.'],
        ['Appointment requests', 'A request can be noted, or offered into a calendar where that connection exists and you want it used.'],
        ['Absence calls', 'A dedicated absence flow is usually better handled in Absence Management. The receptionist can transfer those callers there.'],
        ['Record creation', 'The outcome can be written to a mailbox, a task list or a recruitment system where access has been agreed.'],
        ['Escalation', 'Abuse, distress, a commercial complaint or a question outside the script goes to a person, with the notes so far attached.'],
      ].map(([title, text]) => (
        <article className="card" key={title}>
          <h3>{title}</h3>
          <p>{text}</p>
        </article>
      ))}
    </div>
    <p className="body mt-32">
      Additional languages can be added where the voice service supports them. That is confirmed in scoping. It is not a fixed list published here.
    </p>
    <div className="actions">
      <a className="btn-secondary" href="/absence-management.html">Explore Absence Management</a>
      <a className="btn-primary" href={contactHref('specialist-software')}>Discuss a Voice Project</a>
    </div>
  </section>
);

const faqs = [
  ['Does this replace our switchboard?', 'It can take the calls you put in front of it. Consultants and coordinators still handle the conversations that need a relationship or a decision.'],
  ['Will it book straight into our calendar?', 'Only where the calendar can be connected and you want that action taken without a person. Otherwise it records the request.'],
  ['Can it log into our ATS?', 'Where the ATS provides access and the fields are agreed, a note or task can be created. That connection is scoped, not assumed.'],
  ['Is this the same system as Absence Management?', 'No. Absence Management is the flagship workflow for worker absence and cover. Voice reception is a separate specialist project for general inbound calls. The two can refer callers to each other.'],
  ['How is it priced?', 'From call volume, the number of routes, integrations, languages and the hours you want covered. We quote after the call flows are understood.'],
];

function ReceptionistPage() {
  return (
    <PageShell>
      <SiteNav active="Specialist Software" />
      <main id="content">
        <Hero />
        <Handling />
        <Uses />
        <section className="section section-alt" aria-labelledby="faq-title">
          <div className="kicker">Questions</div>
          <h2 className="h2" id="faq-title">Voice Reception Questions</h2>
          <FAQList items={faqs} />
        </section>
        <CloseCTA
          title="Map the Calls Your Desk Should Not Have to Repeat."
          text="Tell us which numbers overflow, which questions are always the same, and which calls must reach a person."
          primary={{ href: contactHref('specialist-software'), label: 'Discuss a Voice Project' }}
          secondary={{ href: '/specialist-software.html', label: 'Back to Specialist Software' }}
        />
      </main>
      <SiteFooter />
    </PageShell>
  );
}

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