/* KayaCore — anti-commodity differentiator band. We're a partner, not a tool. */
function Differentiators() {
  const points = [
    { icon: 'wrench', t: 'Built around your business', d: 'Every agent is designed for your exact workflow. Nothing off-the-shelf, nothing to configure yourself.' },
    { icon: 'clock', t: 'Live in under 48 hours', d: 'Your first agent is working in two days \u2014 not two quarters. Faster than you can post a job req.' },
    { icon: 'activity', t: 'We own the outcome', d: 'You\u2019re paying for results we stand behind and keep working \u2014 not software you have to operate and babysit.' },
  ];
  return (
    <section style={{ position: 'relative', overflow: 'hidden' }}>
      <Bloom at="15% -30%" size="520px 280px" color="var(--glow-violet-soft)" />
      <div style={{ position: 'relative', maxWidth: 1200, margin: '0 auto', padding: '80px 28px' }}>
        <div style={{ maxWidth: 720 }}>
          <Eyebrow>Why KayaCore</Eyebrow>
          <h2 className="kc-h1" style={{ marginTop: 14 }}>Not a tool. A partner that delivers.</h2>
          <p className="kc-lead" style={{ marginTop: 14, maxWidth: '60ch' }}>
            Most AI products hand you a login and wish you luck. We hand you working agents —
            custom-built, delivered fast, and run by us so they keep earning their keep.
          </p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18, marginTop: 44 }} className="kc-3grid">
          {points.map((p, i) => (
            <div key={i} className="kc-up" style={{ padding: 26, background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 18, transitionDelay: (i * 80) + 'ms' }}>
              <IconChip name={p.icon} size={46} />
              <h3 style={{ margin: '20px 0 0', fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 20, color: 'var(--fg)', letterSpacing: '-0.01em' }}>{p.t}</h3>
              <p className="kc-small" style={{ marginTop: 8, color: 'var(--fg-subtle)', lineHeight: 1.55 }} dangerouslySetInnerHTML={{ __html: p.d }} />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { Differentiators });