/* KayaCore — "what we solve": the open-loops narrative.
   Uses the customer's own framing: too many emails / meetings / follow-ups /
   open loops / scattered context / people & projects -> agents that close them. */
function LoopCard({ it, index }) {
  const [ref, inView] = useInView({ threshold: 0.4 });
  const struck = inView || kcReducedMotion();
  return (
    <div ref={ref} className={'kc-loopcard' + (struck ? ' kc-struck' : '')} style={{
      position: 'relative', padding: 24, background: 'var(--surface)',
      border: '1px solid var(--border)', borderRadius: 18, overflow: 'hidden',
      transition: 'border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out)',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <IconChip name={it.icon} size={42} />
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.04em', textTransform: 'uppercase', color: 'var(--fg-faint)' }}>
          <span className="kc-strike" style={{ transitionDelay: (index % 3 * 80) + 'ms' }} dangerouslySetInnerHTML={{ __html: it.pain }} />
        </span>
      </div>
      <h3 style={{ margin: '20px 0 0', fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 20, letterSpacing: '-0.01em', color: 'var(--fg)' }}>{it.t}</h3>
      <p className="kc-small" style={{ marginTop: 8, color: 'var(--fg-subtle)', lineHeight: 1.55 }} dangerouslySetInnerHTML={{ __html: it.d }} />
    </div>
  );
}

function ProblemSection() {
  const items = [
    { icon: 'mail', pain: 'Too many emails', t: 'Inbox, triaged.', d: 'Sorts, drafts replies and clears the routine mail before you even open it.' },
    { icon: 'calendar', pain: 'Too many meetings', t: 'Meetings, distilled.', d: 'Preps the agenda, captures the notes and turns them into tracked actions.' },
    { icon: 'repeat', pain: 'Too many follow-ups', t: 'Follow-ups, handled.', d: 'Chases every thread and reply on time, so nothing quietly slips.' },
    { icon: 'loop', pain: 'Too many open loops', t: 'Loops, closed.', d: 'Watches every commitment through to done and nudges what\u2019s stuck.' },
    { icon: 'layers', pain: 'Context in too many places', t: 'Context, in one place.', d: 'Pulls the email, doc and thread you need into a single, current brief.' },
    { icon: 'users', pain: 'Too many people &amp; projects', t: 'Everyone, on your radar.', d: 'Keeps every person, project and next step current \u2014 no status chase.' },
  ];
  return (
    <section id="solve" style={{ position: 'relative', overflow: 'hidden', background: 'var(--bg-deep)', borderTop: '1px solid var(--border-soft)', borderBottom: '1px solid var(--border-soft)' }}>
      <Bloom at="85% 110%" size="560px 320px" color="var(--glow-violet-soft)" />
      <div style={{ position: 'relative', maxWidth: 1200, margin: '0 auto', padding: '88px 28px' }}>
        <div style={{ maxWidth: 760 }}>
          <Eyebrow>What we solve</Eyebrow>
          <h2 className="kc-h1" style={{ marginTop: 14 }}>Work runs on open loops. We close them.</h2>
          <p className="kc-lead" style={{ marginTop: 16, maxWidth: '64ch' }}>
            Too many emails. Too many meetings. Too many follow-ups — with context spread
            across too many tools and too many people and projects to track. KayaCore agents
            take the open loops off your plate and run them to done.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, marginTop: 48 }} className="kc-3grid">
          {items.map((it, i) => (
            <LoopCard key={i} it={it} index={i} />
          ))}
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { ProblemSection, LoopCard });