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

const homeLoss = [
  ['Incoming admin', 'Absences, candidate updates and client enquiries interrupt the desk throughout the day.'],
  ['Manual follow-up', 'Consultants end up checking records, chasing responses and coordinating next steps.'],
  ['Revenue time lost', 'Less time for placements, client development and billable desk activity.'],
];

const HomeLoss = () => (
  <article className="card hero-loss" aria-label="Where consultant time gets lost">
    <p className="hero-loss-label">Where time gets lost</p>
    <h3>Admin That Pulls Consultants Away From Placements</h3>
    <ul>
      {homeLoss.map(([title, text]) => (
        <li key={title}>
          <strong>{title}</strong>
          <span>{text}</span>
        </li>
      ))}
    </ul>
    <p className="hero-loss-cost">The cost is not just the task itself. <span>It&apos;s the revenue time lost around it.</span></p>
  </article>
);

const HomeHero = () => (
  <section className="section-hero">
    <div className="hero-glow" aria-hidden="true" />
    <HexGrid opacity={0.04} id="hex-home" />
    <div className="split relative">
      <div>
        <div className="eyebrow">
          <span className="dot" aria-hidden="true" />
          Software &amp; AI for recruitment agencies
        </div>
        <h1 className="h1">Recruitment Software. Your Agency, Automated.</h1>
        <p className="lede">
          UYP Systems builds and integrates software that reduces administration, simplifies workforce management and connects the systems recruitment agencies rely on.
        </p>
        <p className="body mt-16">
          Deploy a specialist system such as Absence Management, or commission software around the way your agency already works.
        </p>
        <div className="actions">
          <a className="btn-primary" href="/systems/absence-management.html">Explore Absence Management</a>
          <a className="btn-secondary" href="#solutions">Explore Our Solutions</a>
        </div>
      </div>
      <HomeLoss />
    </div>
  </section>
);

const Flagship = () => (
  <section className="section section-alt" id="absence" aria-labelledby="flagship-title">
    <div className="split">
      <div>
        <div className="kicker">Our flagship system</div>
        <h2 className="h2" id="flagship-title">Absence Management, Without the Administrative Burden.</h2>
        <p className="lede mt-16">
          When a worker reports an absence, an agency still has to record it, check the affected shift, find people who can cover, contact them and update the right records.
        </p>
        <p className="body mt-16">
          Absence Management is built to capture the notification, coordinate the replacement workflow and keep a record of what happened. Where a decision needs a person, the case is escalated with the detail already collected.
        </p>
        <div className="actions">
          <a className="btn-primary" href="/systems/absence-management.html">Explore Absence Management</a>
        </div>
      </div>
      <div>
        <StackSteps steps={[
          { title: 'Report', text: 'A worker reports an absence through the channel the agency has configured.' },
          { title: 'Identify', text: 'The system checks the relevant shift and worker information it has been given.' },
          { title: 'Coordinate', text: 'Eligible replacement workers are contacted through the configured channels.' },
          { title: 'Update', text: 'Confirmations, open shifts and exceptions are written to the record and routed on.' },
        ]} />
        <p className="screen-cap">A summary of the workflow. The product page explains each stage, including where staff stay involved.</p>
      </div>
    </div>
    <div className="grid-3 mt-48">
      {[
        ['Reduced manual coordination', 'Less time spent chasing the same absence across calls, messages and spreadsheets.'],
        ['Faster response to absence notifications', 'The report is captured and the next step starts from a single record.'],
        ['Better visibility of cover activity', 'Open shifts, contact attempts and exceptions stay visible to the team.'],
      ].map(([title, text]) => (
        <article className="card" key={title}>
          <h3>{title}</h3>
          <p>{text}</p>
        </article>
      ))}
    </div>
  </section>
);

const categories = [
  {
    title: 'Recruitment Systems',
    text: 'Connect and enhance your ATS, CRM and recruitment workflows. Automate candidate engagement, data management and repetitive consultant tasks.',
    pills: ['ATS & CRM Automation', 'Candidate Engagement', 'Recruitment Workflows'],
    href: '/systems/recruitment-systems.html',
    cta: 'Explore Recruitment Systems',
  },
  {
    title: 'Agency Operations',
    text: 'Reduce the administration behind staffing operations, compliance, timesheets, scheduling and business reporting.',
    pills: ['Compliance', 'Workforce Management', 'Operational Automation'],
    href: '/systems/agency-operations.html',
    cta: 'Explore Agency Operations',
  },
  {
    title: 'Specialist Software',
    text: 'Commission bespoke applications, AI voice agents and integrated systems designed around your agency’s particular requirements.',
    pills: ['Bespoke Applications', 'AI Voice Agents', 'Custom Integrations'],
    href: '/systems/specialist-software.html',
    cta: 'Explore Specialist Software',
  },
];

const Solutions = () => (
  <section className="section" id="solutions" aria-labelledby="solutions-title">
    <div className="kicker">Our software</div>
    <h2 className="h2" id="solutions-title">Software Built Around Recruitment.</h2>
    <p className="lede mt-16">
      From candidate management and compliance to custom applications, we develop systems that help recruitment agencies operate more efficiently.
    </p>
    <div className="grid-3 mt-40">
      {categories.map((card) => (
        <a className="card card-link" href={card.href} key={card.title}>
          <h3>{card.title}</h3>
          <p>{card.text}</p>
          <ul className="pills">
            {card.pills.map((pill) => <li key={pill}>{pill}</li>)}
          </ul>
          <span className="more">{card.cta} →</span>
        </a>
      ))}
    </div>
  </section>
);

const comparisons = [
  ['Manual absence calls', 'Coordinators take the call, check the rota and start ringing replacements.', 'Structured absence reporting', 'The notification, shift and contact activity sit in one workflow, with people involved where a decision is required.'],
  ['Repeated candidate data entry', 'The same details are typed into more than one system.', 'Automated data capture', 'Information can be captured once and written through to the systems you connect.'],
  ['Compliance chasing', 'Expiry dates and missing documents are tracked by hand.', 'Scheduled monitoring', 'Reminders and status lists surface what is due, for a person to review.'],
  ['Fragmented software', 'The picture of a placement is split across tools and inboxes.', 'Connected workflows', 'Related updates and operational information can be brought into one working view.'],
];

const Commercial = () => (
  <section className="section section-alt" aria-labelledby="commercial-title">
    <div className="kicker">The commercial case</div>
    <h2 className="h2" id="commercial-title">Less Administration. More Productive Teams.</h2>
    <p className="lede mt-16">
      Repetitive administration consumes consultant time, creates rework, lets messages slip and adds coordination overhead. The comparisons below are the kind of operational change the software is built for.
    </p>
    <div className="compare-list mt-40">
      {comparisons.map(([beforeTitle, before, afterTitle, after]) => (
        <div className="compare-row" key={beforeTitle}>
          <article className="card">
            <div className="label-before">Current process</div>
            <h3>{beforeTitle}</h3>
            <p>{before}</p>
          </article>
          <article className="card card-accent">
            <div className="label-after">With UYP Systems</div>
            <h3>{afterTitle}</h3>
            <p>{after}</p>
          </article>
        </div>
      ))}
    </div>
    <div className="actions">
      <a className="btn-primary" href={contactHref('general')}>Discuss Your Biggest Bottleneck</a>
    </div>
  </section>
);

const Process = () => (
  <section className="section" aria-labelledby="process-title">
    <div className="kicker">How we work</div>
    <h2 className="h2" id="process-title">We Don't Sell Advice. We Build Solutions.</h2>
    <p className="lede mt-16">
      The aim is to fit software into the agency’s existing operation wherever that is the better route. Timing depends on scope, access to current systems and how much is configuration versus new build.
    </p>
    <ConnectedFlow steps={[
      { n: '01', title: 'Discover', text: 'Understand the agency’s operations, pressure points and the systems already in use.' },
      { n: '02', title: 'Design & Build', text: 'Develop or configure the solution that fits the workflow, including the points where staff approve an action.' },
      { n: '03', title: 'Integrate', text: 'Connect it to the applications and data sources that are relevant and accessible.' },
      { n: '04', title: 'Deploy & Support', text: 'Test, launch and maintain the solution, then adapt it as the agency’s process changes.' },
    ]} />
  </section>
);

const Integration = () => (
  <section className="section section-alt" aria-labelledby="integration-title">
    <HexGrid opacity={0.04} id="hex-trust" />
    <div className="relative">
      <div className="kicker">Integration</div>
      <h2 className="h2" id="integration-title">Built Around Your Existing Technology.</h2>
      <p className="lede mt-16">
        Most agencies already have an ATS, a CRM, payroll software, a workforce or scheduling tool, and a set of spreadsheets. We look at what can be connected before assuming anything should be replaced.
      </p>
      <p className="body mt-16">
        Platforms such as Bullhorn, Vincere and JobAdder are examples of systems an agency may already use. Naming them is not a claim of partnership, and access depends on what each platform and contract allows.
      </p>
      <div className="mt-40">
        <ArchRow layers={[
          { kicker: 'Already in place', title: 'Agency systems', items: ['ATS', 'CRM', 'Payroll', 'Scheduling'] },
          { kicker: 'UYP Systems', title: 'Automation layer', items: ['Workflows', 'Checks', 'Routing', 'Records'] },
          { kicker: 'Result', title: 'Connected operation', items: ['Actions', 'Updates', 'Exceptions', 'Reporting'] },
        ]} />
      </div>
    </div>
  </section>
);

const faqs = [
  ['Do we need to replace our existing ATS or CRM?', 'No. Work usually starts from the systems you already use. A replacement is only worth discussing when the current platform cannot support the operation you need.'],
  ['Can your systems integrate with our current software?', 'Often, where the other system provides an API, an export, or another agreed route in. That access is assessed during discovery rather than assumed.'],
  ['Do you offer bespoke development?', 'Yes. Specialist Software covers applications, voice agents, integrations and workflows designed around one agency’s process.'],
  ['How is pricing determined?', 'From the scope: workforce or user numbers, volume, integrations, workflow complexity and the support required. A quote follows that conversation. There is no single published price.'],
  ['How long does implementation take?', 'It depends on system access, the number of workflows and how much is configuration versus new development. The plan is agreed after discovery.'],
  ['What happens if a workflow requires human approval?', 'The system stops at that step, keeps the record, and routes it to the right person. Repeatable work can be automated. Approval stays with your staff where you need it to.'],
  ['Can systems be adapted as our agency grows?', 'Workflows, notifications and integrations can be extended as teams, clients and volumes change. Further work is scoped rather than treated as automatic.'],
];

function HomePage() {
  return (
    <PageShell>
      <SiteNav />
      <main id="content">
        <HomeHero />
        <Flagship />
        <Solutions />
        <Commercial />
        <Process />
        <Integration />
        <section className="section" aria-labelledby="faq-title">
          <div className="kicker">Questions</div>
          <h2 className="h2" id="faq-title">Frequently Asked Questions</h2>
          <FAQList items={faqs} staticCount={4} />
        </section>
        <CloseCTA
          title="Let's Simplify Your Operations."
          text="Tell us where your agency is losing time. We'll discuss how software and automation could improve the process."
          primary={{ href: contactHref('general'), label: 'Book a Consultation' }}
          secondary={{ href: '/systems/absence-management.html', label: 'Explore Absence Management' }}
        />
      </main>
      <SiteFooter />
    </PageShell>
  );
}

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