/* ============================================================
   Tectus — Services overview (bespoke redesign)
   ============================================================ */
const SV_CARDS = [
  { icon: 'user-round-check', t: 'Executive & VIP Protection', d: 'Close-protection agents for executives, high-profile individuals, and sensitive travel — domestically and internationally.', tags: ['Armed', '24/7 Coverage', 'Travel'], href: '#/services/executive-protection' },
  { icon: 'store', t: 'Retail Security', d: 'Loss-prevention and front-of-house officers for stores, shopping environments, and multi-location retail operations.', tags: ['Unarmed', 'Loss Prevention', 'Multi-Site'], href: '#/services/retail-security' },
  { icon: 'route', t: 'Mobile Patrol', d: 'Uniformed officers in marked vehicles conducting regular patrols of your facilities, parking lots, and perimeters.', tags: ['Scheduled', 'Random', 'Multi-Site'], href: '#/services/mobile-patrol' },
  { icon: 'bell-ring', t: 'Alarm Response', d: 'Rapid, verified response to alarm activations and incidents — with clear follow-up communication after the call.', tags: ['24/7', 'Rapid Response', 'Verified'], href: '#/services/alarm-response' },
  { icon: 'building', t: 'Corporate Security', d: 'Lobby, access-control, and front-desk coverage for offices, headquarters, and campuses — plus executive-visit support.', tags: ['Unarmed', 'Armed', 'Access Control'], href: '#/services/corporate-security' },
  { icon: 'ticket', t: 'Event Security', d: 'Trained personnel for concerts, galas, corporate events, and public gatherings — scaled to your headcount and risk level.', tags: ['Unarmed', 'Armed', 'Crowd Control'], href: '#/services/event-security' },
  { icon: 'flame', t: 'Fire Watch', d: 'Continuous monitored watch coverage during system outages, construction, repairs, and compliance-triggered windows.', tags: ['Temporary', 'Monitored', 'Compliance'], href: '#/services/fire-watch' },
];

const SV_STEPS = [
  { n: '01', t: 'Submit Request', d: 'Specify location, service type, staffing requirements, and timeline through the Tectus platform.' },
  { n: '02', t: 'Vendor Match', d: 'Tectus identifies and connects you with a vetted, licensed vendor that meets your criteria.' },
  { n: '03', t: 'Confirm & Brief', d: 'Review vendor details, confirm the engagement, and share site instructions before deployment.' },
  { n: '04', t: 'Track & Document', d: 'Monitor status live and receive a complete post-engagement report for your records.' },
];

function ServicesPage() {
  return (
    <div>
      <CenterHero
        eyebrow="Services"
        title={<React.Fragment>Every service you need, <GoldAccent>covered end to end.</GoldAccent></React.Fragment>}
        sub="From executive protection to mobile patrol, Tectus connects you with licensed vendors across a full range of physical security services."
        primary="Get Quote" secondary="Book a Demo"
      />
      <StatPanel stats={[{ v: '7', l: 'Service categories' }, { v: '100%', l: 'Licensed vendors' }, { v: '24h', l: 'Average response time' }, { v: '98%', l: 'Coverage fill rate' }]} accentIdx={[0, 2]} />

      {/* service cards */}
      <section className="wrap" style={{ padding: '96px 40px' }}>
        <Reveal><CenterHead label="What we cover" title="A complete range of security services" sub="Every service is fulfilled through vetted, licensed vendors — matched to your request through the Tectus platform." /></Reveal>
        <div className="tt-grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
          {SV_CARDS.map((c, i) => (
            <Reveal key={c.t} delay={(i % 3) * 70}>
              <a href={c.href} className="tt-track-card" style={{ display: 'flex', flexDirection: 'column', padding: 28, background: 'var(--color-surface)', border: '1px solid var(--color-border)', borderRadius: 'var(--radius-xl)', height: '100%', transition: 'border-color var(--dur-base), transform var(--dur-base)' }}>
                <span style={{ width: 46, height: 46, borderRadius: 'var(--radius-md)', background: 'var(--color-primary-soft)', border: '1px solid rgba(212,175,55,0.26)', color: 'var(--color-primary)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 18 }}><Icon name={c.icon} size={22} /></span>
                <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 18.5, fontWeight: 600, margin: '0 0 9px' }}>{c.t}</h3>
                <p style={{ fontSize: 13.5, lineHeight: 1.6, color: 'var(--color-text-muted)', margin: '0 0 16px' }}>{c.d}</p>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 7, marginBottom: 18 }}>
                  {c.tags.map((t) => (
                    <span key={t} style={{ fontSize: 11.5, color: 'var(--color-text-muted)', padding: '4px 10px', border: '1px solid var(--color-border)', borderRadius: 'var(--radius-pill)', background: 'var(--color-surface-2)' }}>{t}</span>
                  ))}
                </div>
                <span style={{ marginTop: 'auto', display: 'inline-flex', alignItems: 'center', gap: 7, fontSize: 13.5, fontWeight: 600, color: 'var(--color-primary-light)' }} className="tt-arrow-link">Learn more <Icon name="arrow-right" size={14} /></span>
              </a>
            </Reveal>
          ))}
        </div>
      </section>

      {/* how it works */}
      <section style={{ background: 'var(--color-surface)', borderTop: '1px solid var(--color-border)', borderBottom: '1px solid var(--color-border)' }}>
        <div className="wrap" style={{ padding: '96px 40px' }}>
          <Reveal><CenterHead label="How it works" title="From request to on-site, fast" sub="Our structured workflow ensures every service request is handled with speed, precision, and full documentation." /></Reveal>
          <div className="tt-grid-4" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
            {SV_STEPS.map((s, i) => (
              <Reveal key={s.n} delay={i * 70}><div style={{ background: 'var(--color-bg)', border: '1px solid var(--color-border)', borderRadius: 'var(--radius-lg)', padding: '24px 22px', height: '100%' }}>
                <span style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 36, height: 36, borderRadius: 9, background: 'var(--color-primary-soft)', border: '1px solid rgba(212,175,55,0.26)', color: 'var(--color-primary-light)', fontFamily: 'var(--font-mono)', fontSize: 13, fontWeight: 700, marginBottom: 18 }}>{s.n}</span>
                <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 16.5, fontWeight: 600, margin: '0 0 8px', lineHeight: 1.25 }}>{s.t}</h3>
                <p style={{ fontSize: 13.5, lineHeight: 1.55, color: 'var(--color-text-muted)', margin: 0 }}>{s.d}</p>
              </div></Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* spotlight */}
      <CoverageMap />

      <CTABandCenter label="Get started" title="Ready to request your first service?" sub="Tell us what you need and we'll connect you with the right vendor in hours, not days." primary="Get Quote" secondary="Book a Demo" />
    </div>
  );
}

window.CUSTOM_PAGES = window.CUSTOM_PAGES || {};
window.CUSTOM_PAGES['services'] = ServicesPage;