function WhyOpus() {
  const points = [
    { icon: 'layers', title: 'One partner, full range', body: 'Network, servers, automation, AI, architecture — covered by one team instead of juggling multiple vendors.' },
    { icon: 'user-check', title: 'A real point of contact', body: "You get a dedicated partner who picks up the phone — not a ticket queue at a faceless MSP." },
    { icon: 'sparkles', title: 'Automation & AI expertise', body: 'Power Platform and practical AI skills most general IT shops just don\u2019t have.' },
  ];
  return (
    <section className="fade-in" style={{ padding: '72px 40px', maxWidth: 1000, margin: '0 auto' }}>
      <div style={{ textAlign: 'center', marginBottom: 40 }}>
        <div style={{ fontSize: 'var(--text-xs)', fontWeight: 'var(--weight-bold)', letterSpacing: 'var(--tracking-wide)', textTransform: 'uppercase', color: 'var(--blue)', marginBottom: 8 }}>Why Opus</div>
        <h2 style={{ fontSize: 'var(--text-2xl)', maxWidth: 640, margin: '0 auto' }}>Most IT providers make you choose. We don't.</h2>
        <p style={{ color: 'var(--text-secondary)', maxWidth: 620, margin: '14px auto 0', lineHeight: 'var(--leading-relaxed)' }}>A big impersonal vendor with layers of support tickets, or a specialist who only covers one piece of your systems — Opus Technology Group is different. One partner who covers your network, servers, automation, and AI, and actually picks up the phone.</p>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 24 }}>
        {points.map((p) => (
          <div key={p.title}>
            <div style={{ width: 40, height: 40, borderRadius: 'var(--radius-md)', background: 'var(--navy-50)', color: 'var(--navy)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 14 }}>
              <i data-lucide={p.icon} style={{ width: 20, height: 20 }}></i>
            </div>
            <h3 style={{ fontSize: 'var(--text-base)', marginBottom: 6 }}>{p.title}</h3>
            <p style={{ fontSize: 'var(--text-sm)', color: 'var(--text-secondary)', lineHeight: 'var(--leading-normal)', margin: 0 }}>{p.body}</p>
          </div>
        ))}
      </div>
    </section>
  );
}
window.WhyOpus = WhyOpus;