const FLAGSHIP_SERVICES = [
  { icon: 'network', title: 'Managed IT & Network Support', body: 'Ongoing monitoring, updates, and support so your systems stay secure and running.', items: ['Keep systems updated and secure', 'Backups and antivirus management', 'Analyze and improve network performance'] },
  { icon: 'server-cog', title: 'Infrastructure & Architecture', body: 'Design and build the systems everything else runs on.', items: ['Microsoft 365 migrations', 'Hybrid or full cloud migrations', 'Network design, redundancy, and architecture planning', 'Document and system redundancy/security'] },
  { icon: 'workflow', title: 'Power Platform & Automation', body: 'Custom apps, automated workflows, and dashboards built around how you actually work.', items: ['Automate approvals and manual processes', 'Custom apps & workflows for any business need', 'Power BI reporting and dashboards'] },
  { icon: 'sparkles', title: 'AI Integration & Advisory', body: 'Practical AI adoption — not hype, just tools that save time and reduce risk.', items: ['Identify where AI can realistically save time or reduce risk', 'Integrate AI into existing workflows and Power Platform automations'] },
];
window.FLAGSHIP_SERVICES = FLAGSHIP_SERVICES;

function ServicesOverview() {
  return (
    <section className="fade-in" style={{ padding: '72px 40px', maxWidth: 1160, margin: '0 auto' }}>
      <div style={{ textAlign: 'center', marginBottom: 44 }}>
        <div style={{ fontSize: 'var(--text-xs)', fontWeight: 'var(--weight-bold)', letterSpacing: 'var(--tracking-wide)', textTransform: 'uppercase', color: 'var(--blue)', marginBottom: 8 }}>What we do</div>
        <h2 style={{ fontSize: 'var(--text-2xl)', marginBottom: 10 }}>Services</h2>
        <p style={{ color: 'var(--text-secondary)', maxWidth: 640, margin: '0 auto', lineHeight: 'var(--leading-relaxed)' }}>From keeping your systems secure and running, to automating the busywork, to building the infrastructure that supports it all — here's how we help.</p>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 20 }}>
        {FLAGSHIP_SERVICES.map((it) => (
          <div key={it.title} className="hover-lift" style={{ background: 'var(--surface-card)', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-lg)', boxShadow: 'var(--shadow-sm)', padding: 24 }}>
            <div style={{ width: 40, height: 40, borderRadius: 'var(--radius-md)', background: 'var(--navy-50)', color: 'var(--navy)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 16 }}>
              <i data-lucide={it.icon} style={{ width: 20, height: 20 }}></i>
            </div>
            <h3 style={{ fontSize: 'var(--text-base)', marginBottom: 8 }}>{it.title}</h3>
            <p style={{ fontSize: 'var(--text-sm)', color: 'var(--text-secondary)', lineHeight: 'var(--leading-normal)', margin: 0 }}>{it.body}</p>
          </div>
        ))}
      </div>
      <p style={{ textAlign: 'center', marginTop: 28, color: 'var(--text-secondary)', fontSize: 'var(--text-sm)' }}>Also available: hands-on repairs & troubleshooting for hardware and software issues. <a href="services.html">See all services →</a></p>
    </section>
  );
}
window.ServicesOverview = ServicesOverview;