Have questions or ready to get started? Tell us about your workflows, team size, and systems — we'll be in touch shortly.

e.preventDefault()} style={{ marginTop: 32, display: 'flex', flexDirection: 'column', gap: 12 }}> {['Name', 'Email', 'Company'].map((label) => ( ))}

<button type="submit" style={{
            background: tokens.amber, color: '#1a1200', border: 'none',
            borderRadius: 10, padding: '16px 26px', fontSize: 15, fontWeight: 600,
            fontFamily: tokens.font, cursor: 'pointer', alignSelf: 'flex-start',
          }}>
            Send Request
          </button>
        </form>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
        {[
          ['📧', 'Email', 'cam@gsolutions.org.uk', 'For all enquiries'],
          ['📞', 'Phone', '+44 75070 64216', 'Contact our sales team'],
          ['📍', 'Location', '124-128 City Road, London EC1V 2NX', 'Serving agencies globally'],
        ].map(([icon, title, value, sub]) => (
          <div key={title} style={{
            padding: 24, background: tokens.panel,
            border: `1px solid ${tokens.border}`, borderRadius: 14,
          }}>
            <div style={{ fontSize: 20, marginBottom: 8 }}>{icon}</div>
            <div style={{ fontFamily: tokens.mono, fontSize: 11, color: tokens.textMute, textTransform: 'uppercase', letterSpacing: 1.2 }}>{title}</div>
            <div style={{ fontSize: 16, marginTop: 8, fontWeight: 500 }}>{value}</div>
            <div style={{ fontSize: 13, color: tokens.textMute, marginTop: 4 }}>{sub}</div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const SiteCTA = ({ title, sub }) => (
  <section style={{ padding: '120px 56px', position: 'relative', overflow: 'hidden' }}>
    <div style={{
      position: 'absolute', inset: 0,
      background: 'radial-gradient(ellipse at 50% 100%, rgba(245,181,68,0.18) 0%, rgba(245,181,68,0) 60%)',
    }} />
    <div style={{ position: 'relative', textAlign: 'center', maxWidth: 760, margin: '0 auto' }}>
      <div style={{ fontFamily: tokens.mono, fontSize: 11, color: tokens.amber, textTransform: 'uppercase', letterSpacing: 1.5, marginBottom: 20 }}>
        15-min discovery call · no commitment
      </div>
      <h2 style={{
        fontFamily: tokens.display, fontWeight: 600, fontSize: 60, lineHeight: 1,
        letterSpacing: -2, margin: 0,
      }} dangerouslySetInnerHTML={{ __html: title }} />
      {sub && <p style={{ fontSize: 18, color: tokens.textDim, maxWidth: 560, margin: '24px auto 36px', lineHeight: 1.5 }}>{sub}</p>}
      <PrimaryBtn href="index.html#contact">Book free consultation →</PrimaryBtn>
    </div>
  </section>
);

const SiteFooter = () => (
  <footer style={{ padding: '48px 56px', borderTop: `1px solid ${tokens.border}`, display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 16 }}>
    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
      <svg width="18" height="18" viewBox="0 0 24 24" aria-hidden>
        <path d="M6 1 L18 1 L24 12 L18 23 L6 23 L0 12 Z" fill={tokens.amber} />
      </svg>
      <span style={{ fontFamily: tokens.display, fontWeight: 600, fontSize: 13 }}>G Solutions</span>
      <span style={{ color: tokens.textMute, fontSize: 12, marginLeft: 12 }}>© 2026</span>
    </div>
    <div style={{ display: 'flex', gap: 28, fontSize: 12.5, color: tokens.textMute, flexWrap: 'wrap' }}>
      <span>cam@gsolutions.org.uk</span>
      <span>+44 75070 64216</span>
      <span>London, EC1V 2NX</span>
    </div>
  </footer>
);

const PageShell = ({ children }) => (
  <div className="ab-scroll" style={{
    width: '100%', minHeight: '100vh', overflowY: 'auto',
    background: tokens.bg, color: tokens.text, fontFamily: tokens.font,
  }}>
    {children}
  </div>
);

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