// keni-outcomes.jsx — Human Outcomes (critical), stat band, testimonials.

const KO = window.KENI;
const koD = window.kDisplay, koS = window.kSans, koM = window.kMono;
const { KTag } = window;

// ============ Human Outcomes ============
function KHumanOutcomes() {
  const outcomes = [
    ['Improved Visibility', 'Everyone can see where things stand — progress, status, and what comes next — without chasing anyone. Decisions get made on what’s actually true, not on guesswork.', KO.sky],
    ['Better Coordination', 'People work from one shared understanding instead of their own version of it. Hand-offs are smooth, expectations line up, and nothing falls through the gaps.', KO.saffron],
    ['Reduced Operational Friction', 'The day stops being a scramble. Repetitive busywork and back-and-forth shrink away, so time and attention go to the work that genuinely matters.', KO.rose],
    ['Measurable Progress', 'Small wins add up into a clear, visible arc — so improvement is something you can point to and trust, not just something you hope is happening.', KO.jade],
  ];
  return (
    <section id="outcomes" style={{ padding: '128px 48px', background: KO.bg2, borderBottom: `1px solid ${KO.line}`, position: 'relative', overflow: 'hidden' }}>
      <AmbientBackdrop color={KO.rose} />
      <div style={{ position: 'relative', zIndex: 2, maxWidth: 1320, margin: '0 auto' }}>
        <div style={{ maxWidth: 920, marginBottom: 72 }}>
          <Reveal><KTag color={KO.rose}>Why it matters</KTag></Reveal>
          <Reveal delay={0.1}>
            <h2 style={{ fontFamily: koD, fontWeight: 600, color: KO.ink, margin: '22px 0 0', fontSize: 'clamp(40px,5.6vw,86px)', lineHeight: 0.98, letterSpacing: -2.6 }}>
              Technology is only useful when it improves <span style={{ fontStyle: 'italic', fontFamily: window.kSerif, color: KO.saffron }}>outcomes.</span>
            </h2>
          </Reveal>
          <Reveal delay={0.18}>
            <p style={{ fontFamily: koS, fontSize: 18, lineHeight: 1.62, color: KO.ink2, margin: '26px 0 0', maxWidth: 620 }}>
              Better systems exist to create better results. What we care about isn’t what runs
              behind the scenes — it’s whether the people doing the work have calmer days, stay in
              sync, and can see the progress they’re making.
            </p>
          </Reveal>
        </div>
        <div className="keni-outcome-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16 }}>
          {outcomes.map(([t, d, c], i) => (
            <Reveal key={t} delay={i * 0.08} y={30}>
              <div style={{ padding: '34px 32px', background: KO.panel, border: `1px solid ${KO.line}`, borderRadius: 12, display: 'flex', gap: 22, alignItems: 'flex-start' }}>
                <span style={{ fontFamily: koD, fontStyle: 'italic', fontFamily: window.kSerif, fontSize: 40, color: c, lineHeight: 1, flexShrink: 0 }}>0{i + 1}</span>
                <div>
                  <h3 style={{ fontFamily: koD, fontSize: 28, color: KO.ink, letterSpacing: -0.6, margin: '2px 0 12px', fontWeight: 600 }}>{t}</h3>
                  <p style={{ fontFamily: koS, fontSize: 15, color: KO.ink2, lineHeight: 1.6, margin: 0 }}>{d}</p>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============ Stat band ============
function KStatBand() {
  const stats = [
    { n: 12.4, suf: ' hrs', l: 'Returned per clinician / week', sub: 'less admin, more therapy', c: KO.saffron, dec: 1 },
    { n: 4, suf: ' → 1', l: 'Tools consolidated', sub: 'one calm system of record', c: KO.sky, dec: 0 },
    { n: 38, suf: '%', l: 'Lift in parent engagement', sub: 'within the first quarter', c: KO.rose, dec: 0 },
    { n: 100, suf: '%', l: 'Of progress, retained', sub: 'continuity across changes', c: KO.jade, dec: 0 },
  ];
  return (
    <section style={{ background: KO.bg, borderBottom: `1px solid ${KO.line}`, position: 'relative', overflow: 'hidden' }}>
      <AmbientBackdrop color={KO.saffron} />
      <div style={{ position: 'relative', zIndex: 2 }}>
        <div style={{ padding: '34px 48px 24px', display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', flexWrap: 'wrap', gap: 12, borderBottom: `1px solid ${KO.line}` }}>
          <Reveal>
            <h2 style={{ fontFamily: koD, fontSize: 'clamp(34px,4vw,56px)', color: KO.ink, letterSpacing: -1.6, margin: 0, lineHeight: 1, fontWeight: 600 }}>
              <span style={{ fontStyle: 'italic', fontFamily: window.kSerif, color: KO.saffron }}>The difference,</span> measured.
            </h2>
          </Reveal>
          <Reveal delay={0.1}>
            <span style={{ fontFamily: koM, fontSize: 11, color: KO.muted, letterSpacing: 2, textTransform: 'uppercase' }}>UpStride · early cohort</span>
          </Reveal>
        </div>
        <div className="keni-stat-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)' }}>
          {stats.map((s, i) => (
            <Reveal key={s.l} delay={i * 0.08}>
              <div style={{ padding: '52px 30px', borderRight: i < 3 ? `1px solid ${KO.line}` : 'none', minHeight: 210 }}>
                <div style={{ fontFamily: koD, fontSize: 'clamp(54px,5.4vw,84px)', color: s.c, letterSpacing: -3, lineHeight: 0.95, fontWeight: 600 }}>
                  <Counter value={s.n} suffix={s.suf} decimals={s.dec} />
                </div>
                <div style={{ fontFamily: koS, fontSize: 15, color: KO.ink, marginTop: 18, fontWeight: 500 }}>{s.l}</div>
                <div style={{ fontFamily: koM, fontSize: 10.5, color: KO.muted, letterSpacing: 1.5, marginTop: 4, textTransform: 'uppercase' }}>{s.sub}</div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============ Testimonials ============
function KTestimonials() {
  const quotes = [
    { q: 'Our therapists and parents finally see the same plan. The “what happened this week?” calls just… stopped.', n: 'Dr. Kavya Iyer', r: 'Founder, Aarambh Therapy', city: 'Bengaluru', c: KO.saffron, size: 'lg' },
    { q: 'The AI summary drafts itself and goes out in three languages. I approve it in seconds.', n: 'Devansh Pillai', r: 'Lead SLP, Tarang Centre', city: 'Kolkata', c: KO.sky },
    { q: 'Parent engagement went from 38 to 81 in one quarter. Families feel part of the journey now.', n: 'Anjali Pillai', r: 'Clinical Director, Khushi Pediatric', city: 'Delhi NCR', c: KO.rose },
    { q: 'A child changed therapists mid-year and nothing was lost. The continuity alone sold us.', n: 'Aarav Kumar', r: 'COO, Bal Vikas Centre', city: 'Hyderabad', c: KO.jade },
    { q: 'My therapists leave on time. Notes are done by the time the session ends.', n: 'Saanvi Reddy', r: 'Director, Sankalp Centre', city: 'Pune', c: KO.amber },
    { q: 'It feels less like software and more like a calmer way of running the centre.', n: 'Anaisha Iyer', r: 'Owner, Sunshine Therapy', city: 'Chennai', c: KO.saffron },
  ];
  return (
    <section id="customers" style={{ padding: '120px 48px', background: KO.bg2, borderBottom: `1px solid ${KO.line}` }}>
      <div style={{ maxWidth: 1320, margin: '0 auto' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', flexWrap: 'wrap', gap: 24, marginBottom: 56 }}>
          <Reveal>
            <h2 style={{ fontFamily: koD, fontSize: 'clamp(40px,5.4vw,84px)', color: KO.ink, letterSpacing: -2.4, margin: 0, lineHeight: 0.98, fontWeight: 600 }}>
              From the<br /><span style={{ fontStyle: 'italic', fontFamily: window.kSerif, color: KO.saffron }}>field.</span>
            </h2>
          </Reveal>
          <Reveal delay={0.12}>
            <div style={{ fontFamily: koM, fontSize: 11, color: KO.muted, letterSpacing: 2, textTransform: 'uppercase', textAlign: 'right' }}>
              Early UpStride centres<br />Real cities · real teams
            </div>
          </Reveal>
        </div>
        <div className="keni-quote-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
          {quotes.map((q, i) => (
            <Reveal key={i} delay={i * 0.06} y={30}>
              <div style={{ padding: 28, background: KO.panel, border: `1px solid ${KO.line}`, borderRadius: 12, minHeight: q.size === 'lg' ? 300 : 230, display: 'flex', flexDirection: 'column' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 18 }}>
                  <span style={{ fontFamily: koM, fontSize: 10, color: q.c, letterSpacing: 2 }}>UPSTRIDE</span>
                  <span style={{ fontFamily: koD, fontStyle: 'italic', fontFamily: window.kSerif, fontSize: 34, color: q.c, lineHeight: 0.7 }}>”</span>
                </div>
                <p style={{ fontFamily: koD, fontSize: q.size === 'lg' ? 27 : 21, lineHeight: 1.3, color: KO.ink, margin: 0, flex: 1, letterSpacing: -0.5, fontWeight: 600 }}>{q.q}</p>
                <div style={{ marginTop: 24, paddingTop: 16, borderTop: `1px solid ${KO.line}` }}>
                  <div style={{ fontFamily: koS, fontSize: 13, fontWeight: 500, color: KO.ink }}>{q.n}</div>
                  <div style={{ fontFamily: koM, fontSize: 10.5, color: KO.muted, letterSpacing: 1.5, marginTop: 3, textTransform: 'uppercase' }}>{q.r} · {q.city}</div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { KHumanOutcomes, KStatBand, KTestimonials });