const tokens = {
  bg: '#0a0a0b',
  bg2: '#111114',
  panel: '#16161a',
  panelHi: '#1c1c22',
  border: 'rgba(255,255,255,0.08)',
  borderHi: 'rgba(255,255,255,0.14)',
  text: '#f4f4f5',
  textDim: 'rgba(244,244,245,0.62)',
  textMute: 'rgba(244,244,245,0.42)',
  amber: '#f5b544',
  amberHi: '#ffd373',
  green: '#7ee0a8',
  red: '#ff7a7a',
  font: "'Inter', system-ui, sans-serif",
  display: "'Space Grotesk', 'Inter', system-ui, sans-serif",
  mono: "'JetBrains Mono', ui-monospace, monospace",
};

const NAV = [
  ['Absence Management', '/absence-management.html'],
  ['Recruitment Systems', '/recruitment-systems.html'],
  ['Agency Operations', '/agency-operations.html'],
  ['Specialist Software', '/specialist-software.html'],
];

const contactHref = (interest) => (
  interest ? `/contact.html?interest=${encodeURIComponent(interest)}` : '/contact.html'
);

const HexGrid = ({ opacity = 0.07, id = 'hex' }) => (
  <svg width="100%" height="100%" style={{ position: 'absolute', inset: 0, pointerEvents: 'none', opacity }} aria-hidden="true">
    <defs>
      <pattern id={id} width="56" height="48.5" patternUnits="userSpaceOnUse">
        <path d="M14 0 L42 0 L56 24.25 L42 48.5 L14 48.5 L0 24.25 Z" fill="none" stroke={tokens.amber} strokeWidth="0.6" />
      </pattern>
    </defs>
    <rect width="100%" height="100%" fill={`url(#${id})`} />
  </svg>
);

const Mark = ({ size = 18 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" aria-hidden="true">
    <path d="M6 1 L18 1 L24 12 L18 23 L6 23 L0 12 Z" fill={tokens.amber} />
    {size > 18 && <path d="M9 7 L15 7 L18 12 L15 17 L9 17 L6 12 Z" fill={tokens.bg} />}
  </svg>
);

const Logo = () => (
  <a href="/" className="logo" aria-label="UYP Systems, home">
    <Mark size={22} />
    <span>UYP Systems</span>
  </a>
);

const SiteNav = ({ active }) => {
  const [open, setOpen] = React.useState(false);
  const btnRef = React.useRef(null);

  React.useEffect(() => {
    if (!open) return undefined;
    const first = document.querySelector('#mobile-nav a');
    if (first) first.focus();
    const onKey = (event) => {
      if (event.key === 'Escape') {
        setOpen(false);
        if (btnRef.current) btnRef.current.focus();
      }
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [open]);

  const links = (className) => NAV.map(([label, href]) => (
    <a
      key={href}
      href={href}
      className={className}
      aria-current={active === label ? 'page' : undefined}
    >
      {label}
    </a>
  ));

  return (
    <header className="site-nav">
      <div className="site-nav-bar">
        <Logo />
        <nav className="site-nav-links" aria-label="Primary">
          {links('nav-link')}
          <a className="btn-nav" href="/contact.html" aria-current={active === 'Contact' ? 'page' : undefined}>Contact</a>
        </nav>
        <button
          ref={btnRef}
          type="button"
          className="nav-toggle"
          aria-expanded={open}
          aria-controls="mobile-nav"
          onClick={() => setOpen((value) => !value)}
        >
          {open ? 'Close' : 'Menu'}
        </button>
      </div>
      <nav id="mobile-nav" className={open ? 'mobile-nav is-open' : 'mobile-nav'} aria-label="Mobile" hidden={!open}>
        {links('nav-link')}
        <a className="btn-nav" href="/contact.html" aria-current={active === 'Contact' ? 'page' : undefined}>Contact</a>
      </nav>
    </header>
  );
};

const SiteFooter = () => (
  <footer className="site-footer">
    <div className="footer-grid">
      <div>
        <div className="footer-brand">
          <Mark />
          <span>UYP Systems</span>
        </div>
        <p className="footer-blurb">Specialist software, intelligent automation and business technology solutions.</p>
        <p className="footer-meta">
          <a href="mailto:cam@uyp.org.uk">cam@uyp.org.uk</a>
        </p>
      </div>
      <nav className="footer-col" aria-label="Explore">
        <div className="kicker">Explore</div>
        <a href="/">Home</a>
        <a href="/#solutions">Solutions</a>
        {NAV.map(([label, href]) => <a key={href} href={href}>{label}</a>)}
        <a href="/contact.html">Contact</a>
      </nav>
      <nav className="footer-col" aria-label="Legal">
        <div className="kicker">Legal</div>
        <a href="/privacy-policy">Privacy Policy</a>
        <a href="/cookie-policy">Cookie Policy</a>
        <a href="/terms-of-use">Website Terms of Use</a>
        <button type="button" className="footer-cookie" onClick={() => window.GSConsent && window.GSConsent.open()}>Cookie Settings</button>
      </nav>
    </div>
    <p className="footer-disclosure">
      UYP Systems Ltd is registered in England and Wales. Company No. 17525285. Registered office: 66 Paul Street, London, England, EC2A 4NA, United Kingdom.
    </p>
    <p className="footer-legal">© 2026 UYP Systems Ltd. All rights reserved.</p>
  </footer>
);

const PageShell = ({ children }) => (
  <div className="page">
    <a className="skip" href="#content">Skip to content</a>
    {children}
  </div>
);

const FAQList = ({ items }) => (
  <div className="faq">
    {items.map(([question, answer]) => (
      <div className="faq-item" key={question}>
        <h3 className="faq-q">{question}</h3>
        <p>{answer}</p>
      </div>
    ))}
  </div>
);

const CloseCTA = ({ kicker, title, text, primary, secondary }) => (
  <section className="cta-band">
    <div className="cta-inner">
      {kicker ? <div className="kicker">{kicker}</div> : null}
      <h2 className="h2">{title}</h2>
      {text ? <p className="lede cta-lede">{text}</p> : null}
      <div className="actions center-actions">
        <a className="btn-primary" href={primary.href}>{primary.label}</a>
        {secondary ? <a className="btn-secondary" href={secondary.href}>{secondary.label}</a> : null}
      </div>
    </div>
  </section>
);

const ConnectedFlow = ({ steps }) => (
  <ol className={`connected connected-${steps.length}`}>
    {steps.map((step) => (
      <li key={step.title} className={step.staff ? 'is-staff' : undefined}>
        <div className="idx">{step.n}</div>
        {step.staff ? <div className="staff-tag">Staff step</div> : null}
        <h3>{step.title}</h3>
        <p>{step.text}</p>
      </li>
    ))}
  </ol>
);

const StackSteps = ({ steps }) => (
  <ol className="stack-steps">
    {steps.map((step, index) => (
      <li key={step.title}>
        <div className="stack-index">{index + 1}</div>
        <div>
          {step.staff ? <div className="staff-tag">Staff step</div> : null}
          <h3>{step.title}</h3>
          <p>{step.text}</p>
        </div>
      </li>
    ))}
  </ol>
);

const ArchRow = ({ layers }) => (
  <div className="arch-row">
    {layers.map((layer, index) => (
      <React.Fragment key={layer.title}>
        {index > 0 ? <div className="arch-arrow" aria-hidden="true" /> : null}
        <div className="card">
          <div className="kicker">{layer.kicker}</div>
          <h3>{layer.title}</h3>
          <ul className="pills">
            {layer.items.map((item) => <li key={item}>{item}</li>)}
          </ul>
        </div>
      </React.Fragment>
    ))}
  </div>
);

const Screen = ({ label, caption, children }) => (
  <figure className="screen">
    <div className="screen-top">
      <span className="dot dot-amber" aria-hidden="true" />
      <span>{label}</span>
      <span className="screen-tag">Example</span>
    </div>
    {children}
    {caption ? <figcaption className="screen-cap">{caption}</figcaption> : null}
  </figure>
);

const Bubble = ({ side = 'in', who, children }) => (
  <div className={`bubble-row ${side}`}>
    <div className="who">{who}</div>
    <div className={`bubble ${side}`}>{children}</div>
  </div>
);

window.GS = {
  tokens,
  HexGrid,
  Mark,
  SiteNav,
  SiteFooter,
  PageShell,
  FAQList,
  CloseCTA,
  ConnectedFlow,
  StackSteps,
  ArchRow,
  Screen,
  Bubble,
  contactHref,
};