function ServicesDetail() {
  return (
    <div style={{ padding: '72px 40px', maxWidth: 1000, margin: '0 auto' }}>
      <div className="fade-in" style={{ textAlign: 'center', marginBottom: 48 }}>
        <div style={{ fontSize: 'var(--text-xs)', fontWeight: 'var(--weight-bold)', letterSpacing: 'var(--tracking-wide)', textTransform: 'uppercase', color: 'var(--blue)', marginBottom: 8 }}>Services</div>
        <h1 style={{ fontSize: 'var(--text-2xl)' }}>From keeping the lights on to building what's next</h1>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
        {window.FLAGSHIP_SERVICES.map((s) => (
          <div key={s.title} className="fade-in hover-lift" style={{ display: 'flex', gap: 24, background: 'var(--surface-card)', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-lg)', boxShadow: 'var(--shadow-sm)', padding: 28 }}>
            <div style={{ width: 48, height: 48, borderRadius: 'var(--radius-md)', background: 'var(--navy-50)', color: 'var(--navy)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              <i data-lucide={s.icon} style={{ width: 22, height: 22 }}></i>
            </div>
            <div>
              <h3 style={{ fontSize: 'var(--text-lg)', marginBottom: 6 }}>{s.title}</h3>
              <p style={{ color: 'var(--text-secondary)', fontSize: 'var(--text-sm)', marginBottom: 12 }}>{s.body}</p>
              <ul style={{ margin: 0, paddingLeft: 18, display: 'flex', flexDirection: 'column', gap: 4 }}>
                {s.items.map((it) => <li key={it} style={{ fontSize: 'var(--text-sm)', color: 'var(--text-secondary)' }}>{it}</li>)}
              </ul>
            </div>
          </div>
        ))}
        <div className="fade-in" style={{ display: 'flex', gap: 24, border: '1px dashed var(--border-strong)', borderRadius: 'var(--radius-lg)', padding: 24, alignItems: 'center' }}>
          <div style={{ width: 48, height: 48, borderRadius: 'var(--radius-md)', background: 'var(--gray-100)', color: 'var(--gray-700)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
            <i data-lucide="wrench" style={{ width: 22, height: 22 }}></i>
          </div>
          <div>
            <h3 style={{ fontSize: 'var(--text-base)', marginBottom: 4 }}>Repairs & Troubleshooting</h3>
            <p style={{ color: 'var(--text-secondary)', fontSize: 'var(--text-sm)', margin: 0 }}>Hands-on hardware and software troubleshooting — available, though not our primary focus.</p>
          </div>
        </div>
      </div>
    </div>
  );
}
window.ServicesDetail = ServicesDetail;