const {
  tokens, HexGrid, SiteNav, SectionLabel, PrimaryBtn, SecondaryBtn,
  LogoStrip, ProcessSection, TrustSection, FAQSection,
  ContactSection, SiteCTA, SiteFooter, PageShell,
} = window.GS;

const HomeHero = () => (
  <section style={{ position: 'relative', padding: '100px 56px 80px', overflow: 'hidden', textAlign: 'center' }}>
    <div style={{
      position: 'absolute', top: -200, left: '50%', transform: 'translateX(-50%)', width: 900, height: 600,
      background: 'radial-gradient(ellipse, rgba(245,181,68,0.2) 0%, rgba(245,181,68,0) 65%)',
      pointerEvents: 'none',
    }} />
    <HexGrid opacity={0.04} id="hex-home" />
    <div style={{ position: 'relative', maxWidth: 860, margin: '0 auto' }}>
      <div style={{
        display: 'inline-flex', alignItems: 'center', gap: 8,
        padding: '6px 14px', borderRadius: 999,
        background: 'rgba(245,181,68,0.1)', border: '1px solid rgba(245,181,68,0.25)',
        fontFamily: tokens.mono, fontSize: 11.5, color: tokens.amberHi,
        textTransform: 'uppercase', letterSpacing: 1.2, marginBottom: 24,
      }}>
        <span style={{ width: 6, height: 6, borderRadius: 999, background: tokens.green, boxShadow: `0 0 10px ${tokens.green}` }} />
        Recruitment agency automations
      </div>
      <h1 style={{
        fontFamily: tokens.display, fontWeight: 600, fontSize: 68, lineHeight: 1,
        letterSpacing: -2.4, margin: '0 0 24px',
      }}>
        Automated systems that<br />
        <span style={{ color: tokens.amber }}>cut costs and run your desk.</span>
      </h1>
      <p style={{ fontSize: 19, lineHeight: 1.55, color: tokens.textDim, maxWidth: 640, margin: '0 auto' }}>
        We specialise in building automations for UK recruitment agencies — sick lines, desk workflows, and switchboard systems designed to reduce manual work, lower operating costs, and keep your operation efficient around the clock.
      </p>
      <div style={{ display: 'flex', gap: 12, marginTop: 36, justifyContent: 'center', flexWrap: 'wrap' }}>
        <PrimaryBtn href="#contact">Book free consultation</PrimaryBtn>
        <SecondaryBtn href="#products">Explore automations →</SecondaryBtn>
      </div>
    </div>
  </section>
);

const HomeStats = () => (
  <section style={{ padding: '64px 56px', borderBottom: `1px solid ${tokens.border}` }}>
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 32, textAlign: 'center' }}>
      {[
        ['60–85%', 'Lower cost per call'],
        ['32%', 'More shifts filled'],
        ['<48hr', 'Typical go-live'],
        ['24/7', 'Unattended coverage'],
      ].map(([n, l]) => (
        <div key={l}>
          <div style={{ fontFamily: tokens.display, fontSize: 36, fontWeight: 600, letterSpacing: -1, color: tokens.amber }}>{n}</div>
          <div style={{ fontSize: 13, color: tokens.textMute, marginTop: 6 }}>{l}</div>
        </div>
      ))}
    </div>
  </section>
);

const HomeValue = () => (
  <section style={{ padding: '80px 56px', position: 'relative', overflow: 'hidden' }}>
    <HexGrid opacity={0.03} id="hex-value" />
    <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'center' }}>
      <div>
        <SectionLabel kicker="Our specialism" title="Automations that pay for themselves." />
        <p style={{ fontSize: 17, lineHeight: 1.6, color: tokens.textDim, marginTop: 16, maxWidth: 480 }}>
          We don&apos;t sell technology for its own sake. Every system we build is designed around one goal: remove repetitive work, reduce your cost base, and free your team to focus on placements.
        </p>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        {[
          ['Reduce manual admin', 'Sick calls, roster chasing, CRM updates, and follow-ups handled automatically — without adding headcount.'],
          ['Lower operating costs', 'Replace expensive out-of-hours cover and overloaded coordinators with systems that run at a fraction of the cost.'],
          ['Increase throughput', 'More shifts filled, faster response times, and fewer dropped tasks — without stretching your existing team.'],
        ].map(([t, d]) => (
          <div key={t} style={{
            padding: 22, background: tokens.panel,
            border: `1px solid ${tokens.border}`, borderRadius: 14,
          }}>
            <div style={{ fontFamily: tokens.display, fontSize: 16, fontWeight: 600, marginBottom: 6 }}>{t}</div>
            <div style={{ fontSize: 14, lineHeight: 1.55, color: tokens.textDim }}>{d}</div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const HomeProducts = () => (
  <section id="products" style={{ padding: '80px 56px 96px', background: tokens.bg2, borderTop: `1px solid ${tokens.border}`, borderBottom: `1px solid ${tokens.border}` }}>
    <SectionLabel kicker="What we build" title="Three automations. One integrated platform." />
    <p style={{ fontSize: 17, lineHeight: 1.55, color: tokens.textDim, maxWidth: 560, marginTop: 16 }}>
      Each automation solves a specific operational bottleneck. Start with one, or deploy the full stack across your agency.
    </p>
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, marginTop: 48 }}>
      {[
        {
          t: 'Sick Line & Absence',
          d: 'Workers call in sick. The system logs the absence, finds cover from your roster, and updates everything downstream — in seconds, with no coordinator involved.',
          href: 'sick-line.html',
          tag: 'Flagship',
        },
        {
          t: 'Recruitment Automation',
          d: 'CV screening, interview scheduling, candidate follow-ups, and compliance checks — repetitive desk work handled automatically, 24/7.',
          href: 'recruitment-ai.html',
          tag: 'Desk workflows',
        },
        {
          t: 'Agency Switchboard',
          d: 'Automated inbound call handling for client enquiries, candidate contact, and after-hours coverage — with every interaction logged to your CRM.',
          href: 'receptionist.html',
          tag: 'Inbound calls',
        },
      ].map((card) => (
        <a key={card.t} href={card.href} style={{
          padding: 28, borderRadius: 14, minHeight: 260,
          background: tokens.panel,
          border: `1px solid ${tokens.border}`,
          textDecoration: 'none', color: 'inherit',
          display: 'flex', flexDirection: 'column',
        }}>
          <div style={{ fontFamily: tokens.mono, fontSize: 11, color: tokens.amber, textTransform: 'uppercase', letterSpacing: 1.2, marginBottom: 14 }}>
            {card.tag}
          </div>
          <div style={{ fontFamily: tokens.display, fontSize: 20, fontWeight: 600, marginBottom: 12 }}>{card.t}</div>
          <div style={{ fontSize: 14, lineHeight: 1.6, color: tokens.textDim, flex: 1 }}>{card.d}</div>
          <div style={{ marginTop: 20, fontFamily: tokens.mono, fontSize: 12, fontWeight: 600, color: tokens.amberHi, textTransform: 'uppercase', letterSpacing: 1 }}>
            Learn more →
          </div>
        </a>
      ))}
    </div>
  </section>
);

function HomePage() {
  return (
    <PageShell>
      <SiteNav active="Home" />
      <HomeHero />
      <HomeStats />
      <HomeValue />
      <HomeProducts />
      <LogoStrip />
      <ProcessSection />
      <TrustSection />
      <FAQSection />
      <SiteCTA
        title="Ready to reduce costs<br/>and automate your desk?"
        sub="Book a 15-minute discovery call. We'll map your workflows, identify where you're losing time and money, and show you what can be automated."
      />
      <ContactSection />
      <SiteFooter />
    </PageShell>
  );
}

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