// Sybre — Home page
// Copy revision 1 applied 2026-07-04 from Varant's workbook (design-review/copy-workbook.md).

function HomePage() {
  return (
    <Page>
      {/* HERO — stats row removed (HOME-04) */}
      <section style={{ paddingTop: 96, paddingBottom: 64, position: 'relative', overflow: 'hidden' }}>
        {/* geometric splashback — woven facade */}
        <div aria-hidden="true" className="hero-splash" style={{ backgroundImage: 'url(assets/Images/bw_geo03.jpg)' }} />
        <div className="container" style={{ position: 'relative' }}>
          <Reveal>
            <h1 className="h-hero" style={{ marginBottom: 28 }}>
              Secure, responsive,<br />
              <em className="accent">personal.</em>
            </h1>
            <p className="lead lg" style={{ marginBottom: 40 }}>Technology empowered, human led.<br/>Your trusted managed technology service provider.
            </p>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
              <Link to="/contact" className="btn btn-primary">Book a discovery call</Link>
              <Link to="/about" className="btn btn-text btn-arrow">See how we work</Link>
            </div>
          </Reveal>
        </div>
      </section>

      {/* WHAT WE DO */}
      <section className="section">
        <div className="container">
          <SectionHead
            title="What we <em>do</em>."
            lead="Our experienced team ensures your needs are understood, supported and managed through strategic alignment with your business." />

          <Reveal stagger className="grid-2">
            {[
            { num: '01', title: 'Managed IT', body: 'Fully managed, proactive support, systems monitoring, security and business continuity backed by exceptional service.', to: '/services/managed-it' },
            { num: '02', title: 'Cybersecurity', body: 'Threat detection and response, network and endpoint protection, data protection and resiliency. We ensure your business is protected against evolving threats.', to: '/services/cybersecurity' },
            { num: '03', title: 'AI Enablement', body: 'Our team will work with yours to provide access to frontier capability and efficiency within secure and compliant frameworks.', to: '/services/ai', accent: true },
            { num: '04', title: 'Consulting & design', body: 'Infrastructure architecture, strategic advice, reliable integrations. Designed for your business and your goals.', to: '/services/consulting' }].
            map((s) =>
            <ServiceCard key={s.num} {...s} />
            )}
          </Reveal>
        </div>
      </section>

      {/* TRACK RECORD — moved above "Boutique by design" (HOME-14 instruction) */}
      <section className="band sage-solid">
        <div className="container">
          <SectionHead
            title="Numbers we <em>stand behind</em>." />

          <Reveal stagger className="grid-3">
            {[
            { n: '100%', l: 'Breach mitigation for clients on Sybre’s managed security platform.' },
            { n: '< 15min', l: 'Average response time on support requests.' },
            { n: '5+ years', l: 'We build strong, working relationships. Our client engagements have on average spanned 5+ years.' }].
            map((s, i) =>
            <div key={i} className="stat-cell" style={{ minHeight: 200 }}>
                <div className="stat-num" style={{ fontSize: 'clamp(36px, 4vw, 60px)', whiteSpace: 'nowrap' }}>{s.n}</div>
                <div className="stat-label">{s.l}</div>
              </div>
            )}
          </Reveal>
        </div>
      </section>

      {/* WHY SYBRE */}
      <section className="band" style={{ marginTop: 0 }}>
        <div className="container">
          <SectionHead
            title="Boutique by <em>design</em>."
            lead="Tailored for your business, direct access to experienced engineers, agile and aligned with your business from the start." />

          <Reveal stagger className="grid-3">
            {[
            { n: '01', t: 'Experienced engineers, on every engagement.', b: 'No support queue gauntlets with bots. Our engineers understand your business and build relationships with your team.' },
            { n: '02', t: 'We embrace the bleeding-edge.', b: 'Our team and capabilities are constantly evolving to ensure your business can take advantage of industry leading solutions to gain an edge.', sage: true }, /* Varant exception 2026-07-04: banned-phrase rule waived for this card */
            { n: '03', t: 'Boutique scale.', b: 'Highly capable, deep relationships, real accountability. Our team is an extension of yours.' }].
            map((v) =>
            <div key={v.n} className={'card' + (v.sage ? ' sage-fill' : '')} style={{ minHeight: 240 }}>
                <h3 className="h-card" style={{ marginBottom: 14 }}>{v.t}</h3>
                <p className="body">{v.b}</p>
              </div>
            )}
          </Reveal>
        </div>
      </section>

      {/* Recent work section removed per HOME-15 / HOME-16 (case studies return when real ones exist) */}

      <FinalCTA />
    </Page>);

}

function ServiceCard({ num, title, body, to, accent }) {
  return (
    <Link to={to} className={'card is-link' + (accent ? ' accent' : '')} style={{ display: 'block', minHeight: 220 }}>
      <h3 className="h-card" style={{ fontSize: 26, marginBottom: 14 }}>{title}</h3>
      <p className="body" style={{ marginBottom: 28, maxWidth: 460 }}>{body}</p>
      <span className="btn-text btn-arrow" style={{ textTransform: 'uppercase', fontSize: 12, letterSpacing: '0.10em' }}>
        Explore
      </span>
    </Link>);

}

Object.assign(window, { HomePage, ServiceCard });