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

const Concept = ({ label, lines }) => (
  <Screen label={label} caption="Example concept. Not a completed client project.">
    <div className="stack">
      {lines.map((line) => <div className="mini" key={line}>{line}</div>)}
    </div>
  </Screen>
);

const Hero = () => (
  <section className="section-hero">
    <div className="hero-glow-right" aria-hidden="true" />
    <HexGrid opacity={0.05} id="hex-spec" />
    <div className="relative">
      <div className="eyebrow">
        <span className="dot" aria-hidden="true" />
        Specialist software development
      </div>
      <h1 className="h1">Specialist Software, Built Around Your Agency.</h1>
      <p className="lede">
        From bespoke ATS and CRM platforms to AI voice systems, internal applications and complex integrations, we develop software around the way your business operates.
      </p>
      <div className="actions">
        <a className="btn-primary" href={contactHref('specialist-software')}>Discuss a Custom Project</a>
        <a className="btn-secondary" href="#capabilities">Explore Our Capabilities</a>
      </div>
    </div>
  </section>
);

const capabilities = [
  {
    title: 'Bespoke ATS & CRM Development',
    text: 'Where a generic platform forces the agency into the wrong process, we can scope a recruitment system around the one you actually run. This is a build, not a product you can switch on this week.',
    items: ['Candidate and client records', 'Vacancy and placement workflows', 'Consultant permissions', 'Pipelines', 'Communications', 'Integrations', 'Custom reporting'],
  },
  {
    title: 'AI Voice Agents & Receptionists',
    text: 'Inbound call handling for the conversations a desk repeats: who is calling, what they need, and where the detail should go. A person takes over when the call needs judgement.',
    items: ['Inbound call handling', 'Call classification', 'Client enquiry capture', 'Candidate enquiries', 'Appointment requests', 'Structured records', 'Escalation'],
  },
  {
    title: 'Internal Business Applications',
    text: 'Tools for the people who run the agency, when a spreadsheet or a shared inbox is no longer a reliable system.',
    items: ['Staff portals', 'Candidate portals', 'Client dashboards', 'Management views', 'Approval tools', 'Specialist workflows'],
  },
  {
    title: 'Custom Integrations',
    text: 'Movement of data between the systems you are allowed to connect. Closed products stay closed if the vendor does not provide a route.',
    items: ['Third-party APIs', 'Legacy systems', 'ATS and CRM links', 'Scheduling and payroll', 'Finance tools', 'Validation on the way through'],
  },
  {
    title: 'Bespoke Automation',
    text: 'Multi-step operational work that does not fit Absence Management, recruitment workflows or the standard operations catalogue.',
    items: ['Multi-step workflows', 'Human approval', 'Document processing', 'Scheduled tasks', 'Event triggers', 'Agency-specific rules'],
  },
  {
    title: 'Reporting & Intelligence Platforms',
    text: 'One view across sources you can legally and technically connect. Figures are only as complete as the data behind them.',
    items: ['Business dashboards', 'Performance reports', 'Operational views', 'Financial interfaces', 'KPI definitions you choose'],
  },
];

const Capabilities = () => (
  <section className="section section-alt" id="capabilities" aria-labelledby="cap-title">
    <div className="kicker">Capabilities</div>
    <h2 className="h2" id="cap-title">Designed, Built, Integrated and Looked After.</h2>
    <p className="lede mt-16">
      Absence Management, recruitment workflows and agency operations cover defined problems. This page is for software that has to be specified because the agency’s process is its own.
    </p>
    <div className="grid-2 mt-40">
      {capabilities.map((item) => (
        <article className="card" key={item.title}>
          <h3>{item.title}</h3>
          <p>{item.text}</p>
          <ul className="pills">
            {item.items.map((pill) => <li key={pill}>{pill}</li>)}
          </ul>
          {item.title.startsWith('AI Voice') ? (
            <p className="mt-16">
              <a className="text-link" href="/ai-receptionist.html">Read the AI voice reception detail</a>
            </p>
          ) : null}
        </article>
      ))}
    </div>
  </section>
);

const Architecture = () => (
  <section className="section" aria-labelledby="arch-title">
    <div className="kicker">Architecture</div>
    <h2 className="h2" id="arch-title">Your Systems. A Layer That Belongs to the Operation.</h2>
    <p className="lede mt-16">
      A custom project usually sits beside what you already have. It reads the sources it is allowed to read, runs the workflow, and gives people a place to work.
    </p>
    <div className="mt-40">
      <ArchRow layers={[
        { kicker: 'Sources', title: 'Agency software and data', items: ['ATS / CRM', 'Payroll', 'Files', 'Calls'] },
        { kicker: 'Build', title: 'Application and integration layer', items: ['Rules', 'Permissions', 'APIs', 'Records'] },
        { kicker: 'Use', title: 'Workflows and outputs', items: ['Tasks', 'Portals', 'Reports', 'Handoffs'] },
      ]} />
    </div>
    <div className="grid-2 mt-40">
      <Concept label="Recruitment pipeline" lines={['Vacancy opened', 'Shortlist prepared for review', 'Interview held by a consultant', 'Placement recorded']} />
      <Concept label="Operational dashboard" lines={['Open approvals', 'Failed transfers', 'Reports due', 'Source data named on each figure']} />
      <Concept label="AI voice call handling" lines={['Caller identified', 'Reason classified', 'Detail captured', 'Escalated or logged']} />
      <Concept label="Custom portal" lines={['Role-based access', 'A queue for the team', 'Status the client can see', 'An audit of who changed what']} />
    </div>
  </section>
);

const Approach = () => (
  <section className="section section-alt" aria-labelledby="approach-title">
    <div className="kicker">The right shape of project</div>
    <h2 className="h2" id="approach-title">Build New. Connect Existing. Improve What Works.</h2>
    <p className="lede mt-16">
      Some requirements need a new application. Some need a reliable link between tools the agency already trusts. Some need a painful step inside a current system removed. Discovery is where that choice is made, before a build is assumed.
    </p>
    <div className="grid-3 mt-40">
      {[
        ['Build new', 'A portal, a pipeline or an internal tool when nothing you own can carry the process.'],
        ['Connect existing', 'An integration when the systems are fine and the copying between them is the cost.'],
        ['Improve what works', 'A change to a workflow you already run, including Absence Management or an operations process, when a full replacement would be waste.'],
      ].map(([title, text]) => (
        <article className="card" key={title}>
          <h3>{title}</h3>
          <p>{text}</p>
        </article>
      ))}
    </div>
    <div className="actions">
      <a className="btn-primary" href={contactHref('specialist-software')}>Discuss a Custom Project</a>
    </div>
  </section>
);

const Delivery = () => (
  <section className="section" aria-labelledby="delivery-title">
    <div className="kicker">How bespoke development works</div>
    <h2 className="h2" id="delivery-title">Scope Before Software.</h2>
    <p className="lede mt-16">
      Project scope, security requirements, integration access and complexity decide the plan. A large build does not start from a one-line brief, and it does not share a single timetable with a small workflow.
    </p>
    <ConnectedFlow steps={[
      { n: '01', title: 'Discovery', text: 'How the agency operates today, who does the work, and which systems hold the data.' },
      { n: '02', title: 'Requirements and technical scoping', text: 'What must be true on launch, what can wait, and which approvals stay with staff.' },
      { n: '03', title: 'Solution architecture', text: 'Where the software runs, what it connects to, and how access is controlled.' },
      { n: '04', title: 'Development and testing', text: 'Built against the agreed scenarios, including the cases that should stop and ask a person.' },
      { n: '05', title: 'Integration and deployment', text: 'Connected to the systems in scope, then released when those paths have been tested.' },
      { n: '06', title: 'Support and iteration', text: 'Fixes, adjustments and the next slice of scope once the first one is in use.' },
    ]} />
  </section>
);

const faqs = [
  ['Do you already sell a finished ATS or CRM?', 'No. We can scope and build one around a specific agency. It is a project, with requirements, access and a contract, not a packaged product on a shelf.'],
  ['Can you work with the software we already have?', 'Yes. Connecting or extending an existing system is often the better project. We recommend a new build when the current tools cannot carry the process.'],
  ['Who owns the software?', 'Ownership, hosting and access are agreed in writing before build starts. They are not assumed on this page.'],
  ['How do you handle security?', 'Access, hosting and data handling are part of the technical scope. We do not claim a certification on this website that has not been stated for the operating company.'],
  ['What if a third-party system has no API?', 'We use a permitted export, file or manual handoff, or we leave that step with your team. We do not bypass a vendor’s access controls.'],
  ['How does a project start?', 'With a conversation and a written scope. Price follows the scope: integrations, users, security requirements and the amount of new software.'],
];

function SpecialistPage() {
  return (
    <PageShell>
      <SiteNav active="Specialist Software" />
      <main id="content">
        <Hero />
        <Capabilities />
        <Architecture />
        <Approach />
        <Delivery />
        <section className="section section-alt" aria-labelledby="faq-title">
          <div className="kicker">Questions</div>
          <h2 className="h2" id="faq-title">Custom Project Questions</h2>
          <FAQList items={faqs} />
        </section>
        <CloseCTA
          title="Have a Software Requirement That Doesn't Fit Off the Shelf?"
          text="Describe the operation the current tools cannot carry. We will tell you whether it is a new build, a connection, or a smaller workflow."
          primary={{ href: contactHref('specialist-software'), label: 'Discuss Your Project' }}
          secondary={{ href: '/ai-receptionist.html', label: 'AI Voice Reception' }}
        />
      </main>
      <SiteFooter />
    </PageShell>
  );
}

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