/* KayaCore — the moat: a MANAGED AI employee, not a DIY agent.
   "We build it AND make sure it keeps working" is the real value. */
function ManagedSection() {
  const pillars = [
    { icon: 'activity', t: 'We watch it', d: 'Every run is monitored. If output drifts or a tool changes underneath it, we catch it \u2014 usually before you would.' },
    { icon: 'wrench', t: 'We fix it', d: 'When something breaks, it\u2019s our job, not your support ticket. We patch, retrain and redeploy.' },
    { icon: 'sparkles', t: 'We improve it', d: 'As your process changes, the agent keeps up \u2014 new templates, new steps, new edge cases.' },
  ];
  const health = [
    { icon: 'activity', t: 'Monitored 24/7', s: 'all systems normal', tone: 'ok' },
    { icon: 'wrench', t: 'Recovered from an API change', s: 'auto-fixed \u00b7 2d ago', tone: 'accent' },
    { icon: 'sparkles', t: 'Tuned for a new template', s: 'shipped this week', tone: 'accent' },
    { icon: 'headset', t: 'Managed by your KayaCore pod', s: 'humans on call', tone: 'neutral' },
  ];
  const dot = { ok: 'var(--success)', accent: 'var(--accent)', neutral: 'var(--fg-faint)' };
  return (
    <section id="managed" style={{ position: 'relative', overflow: 'hidden' }}>
      <Bloom at="14% -20%" size="600px 340px" color="var(--glow-violet)" />
      <NodeGrid fade="20% 0%" opacity={0.045} />
      <div style={{ position: 'relative', maxWidth: 1200, margin: '0 auto', padding: '92px 28px' }}>
        <div style={{ maxWidth: 760 }}>
          <Eyebrow>Fully managed</Eyebrow>
          <h2 className="kc-h1" style={{ marginTop: 14 }}>An AI employee — that actually works.</h2>
          <p className="kc-lead" style={{ marginTop: 16, maxWidth: '60ch' }}>
            Anyone can spin up an agent. Keeping one working in the real world is the hard part —
            and where most DIY agents quietly die. We build yours, then run it: monitored, fixed
            and improved, so it keeps earning its seat.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 44, marginTop: 48, alignItems: 'center' }} className="kc-managedgrid">
          {/* pillars */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            {pillars.map((p, i) => (
              <div key={i} className="kc-up" style={{ display: 'flex', gap: 16, alignItems: 'flex-start', padding: 20, background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 16, transitionDelay: (i * 90) + 'ms' }}>
                <IconChip name={p.icon} size={44} />
                <div>
                  <h3 style={{ margin: 0, fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 18, color: 'var(--fg)' }}>{p.t}</h3>
                  <p className="kc-small" style={{ marginTop: 6, color: 'var(--fg-subtle)', lineHeight: 1.55 }} dangerouslySetInnerHTML={{ __html: p.d }} />
                </div>
              </div>
            ))}
          </div>

          {/* managed health panel */}
          <div className="kc-up" style={{ background: 'linear-gradient(180deg, var(--surface) 0%, var(--bg-deep) 140%)', border: '1px solid var(--border)', borderRadius: 20, padding: 22, boxShadow: 'var(--shadow-lg)', position: 'relative', overflow: 'hidden', transitionDelay: '120ms' }}>
            <div style={{ position: 'absolute', top: -1, left: 20, right: 20, height: 1, background: 'linear-gradient(90deg, transparent, var(--accent-border), transparent)' }} />
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 18 }}>
              <IconChip name="shield" size={38} active />
              <div>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 15, color: 'var(--fg)' }}>Agent health</div>
                <div className="kc-mono" style={{ fontSize: 11, color: 'var(--fg-subtle)' }}>your inbox agent</div>
              </div>
              <span style={{ marginLeft: 'auto', textAlign: 'right' }}>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 22, color: 'var(--success)', letterSpacing: '-0.01em' }}><CountUp value="99.9%" /></div>
                <div className="kc-mono" style={{ fontSize: 10, color: 'var(--fg-faint)' }}>uptime</div>
              </span>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 9 }}>
              {health.map((h, i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 14px', background: 'var(--bg)', border: '1px solid var(--border-soft)', borderRadius: 12 }}>
                  <span style={{ width: 8, height: 8, borderRadius: 9, background: dot[h.tone], flex: 'none' }} />
                  <KcIcon name={h.icon} size={16} style={{ color: 'var(--fg-subtle)' }} />
                  <span style={{ fontFamily: 'var(--font-sans)', fontSize: 13.5, color: 'var(--fg)' }}>{h.t}</span>
                  <span className="kc-mono" style={{ marginLeft: 'auto', fontSize: 11, color: 'var(--fg-subtle)' }} dangerouslySetInnerHTML={{ __html: h.s }} />
                </div>
              ))}
            </div>
            <div style={{ marginTop: 16, padding: '12px 14px', borderRadius: 12, background: 'var(--accent-tint)', border: '1px solid var(--accent-border)', fontFamily: 'var(--font-sans)', fontSize: 13.5, color: 'var(--fg)', textAlign: 'center' }}>
              You manage outcomes. <strong style={{ color: 'var(--accent)', fontWeight: 600 }}>We manage the agent.</strong>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { ManagedSection });