// keni-ecosystem.jsx — Product Ecosystem (UpStride flagship showcase),
// future platform placeholders, and Capability Areas.

const KE = window.KENI;
const keD = window.kDisplay, keS = window.kSans, keM = window.kMono;
const { KMockPlan, KMockSession, KMockSummary, KMockJourney, KTag, UpStrideMark } = window;

// ============ Chapter intro band ============
function KChapter({ n, kicker, title, color, phrase }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 28, padding: '72px 48px', borderBottom: `1px solid ${KE.line}`, background: KE.bg, position: 'relative', overflow: 'hidden' }}>
      <ChapterBackdrop color={color} phrase={phrase} />
      <Reveal>
        <div style={{ fontFamily: keD, fontSize: 84, color, lineHeight: 1, letterSpacing: -3, fontStyle: 'italic', fontFamily: window.kSerif, fontWeight: 600, position: 'relative', zIndex: 2 }}>{n}</div>
      </Reveal>
      <Reveal delay={0.1}>
        <div style={{ flex: 1, paddingLeft: 28, borderLeft: `1px solid ${KE.line}`, position: 'relative', zIndex: 2 }}>
          <div style={{ fontFamily: keM, fontSize: 11, color: KE.muted, letterSpacing: 2, textTransform: 'uppercase', marginBottom: 10 }}>{kicker}</div>
          <div style={{ fontFamily: keD, fontSize: 'clamp(30px, 3.6vw, 48px)', color: KE.ink, letterSpacing: -1.4, lineHeight: 1.04, fontWeight: 600 }}>{title}</div>
        </div>
      </Reveal>
    </div>
  );
}

// ============ Product Ecosystem — flagship product + future product areas ============
function KProductEcosystem() {
  const outcomes = [
    ['Therapists & parents, aligned', 'One living plan replaces scattered notebooks, chat threads and missed updates.'],
    ['Evenings handed back', 'Sessions are captured in the moment — not rebuilt in an hour of paperwork after hours.'],
    ['Continuity by default', 'A clear developmental arc that stays intact across therapists and centres.'],
  ];
  const future = [
    ['Operational Intelligence', 'Turning scattered operational data into a single, calm picture of what is really happening across a practice.', KE.sky],
    ['Workflow Systems', 'Orchestrating multi-step, multi-person work that today lives in spreadsheets and group chats.', KE.jade],
    ['AI-Assisted Insights', 'Models applied with restraint — drafting, summarising and surfacing, always with a human in the loop.', KE.rose],
  ];

  return (
    <section id="products" style={{ padding: '120px 48px', background: KE.bg, borderBottom: `1px solid ${KE.line}`, position: 'relative', overflow: 'hidden' }}>
      <AmbientBackdrop color={KE.saffron2} />
      <div style={{ position: 'relative', zIndex: 2, maxWidth: 1320, margin: '0 auto' }}>
        {/* ---- Section header ---- */}
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', flexWrap: 'wrap', gap: 28, marginBottom: 52 }}>
          <div style={{ maxWidth: 720 }}>
            <Reveal><KTag color={KE.saffron}>Product ecosystem</KTag></Reveal>
            <Reveal delay={0.1}>
              <h2 style={{ fontFamily: keD, fontWeight: 600, color: KE.ink, margin: '20px 0 0', fontSize: 'clamp(34px,4.6vw,64px)', lineHeight: 1.0, letterSpacing: -2 }}>
                We build <span style={{ fontStyle: 'italic', fontFamily: window.kSerif, color: KE.saffron }}>products</span>, not services.
              </h2>
            </Reveal>
          </div>
          <Reveal delay={0.18}>
            <p style={{ fontFamily: keS, fontSize: 16, lineHeight: 1.6, color: KE.ink2, margin: 0, maxWidth: 380 }}>
              KeNi designs, ships and owns software end to end — anchored by one flagship today, with a deliberate roadmap of product areas behind it.
            </p>
          </Reveal>
        </div>

        {/* ---- Flagship product card (dominant) ---- */}
        <Reveal y={36}>
          <div className="keni-showcase-body" style={{
            display: 'grid', gridTemplateColumns: '1fr 1.18fr',
            border: `1px solid ${KE.line}`, borderRadius: 18, overflow: 'hidden',
            background: KE.panel, boxShadow: `0 80px 160px -70px rgba(0,0,0,0.9)`, position: 'relative',
          }}>
            <div aria-hidden style={{ position: 'absolute', top: -120, left: -120, width: 380, height: 380, borderRadius: '50%', background: KE.saffron, opacity: 0.07, filter: 'blur(20px)', pointerEvents: 'none' }}></div>

            {/* left — copy */}
            <div style={{ padding: '44px 40px', display: 'flex', flexDirection: 'column', borderRight: `1px solid ${KE.line}`, position: 'relative', zIndex: 2 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16, flexWrap: 'wrap' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 13 }}>
                  <UpStrideMark height={28} />
                  <span style={{ fontFamily: keM, fontSize: 10, color: KE.muted, letterSpacing: 2, textTransform: 'uppercase', paddingLeft: 13, borderLeft: `1px solid ${KE.line}` }}>Flagship product</span>
                </div>
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontFamily: keM, fontSize: 10, color: KE.saffron, letterSpacing: 1.8, textTransform: 'uppercase', background: `${KE.saffron}14`, border: `1px solid ${KE.saffron}3d`, padding: '6px 12px', borderRadius: 999 }}>
                  <span style={{ width: 7, height: 7, borderRadius: 99, background: KE.saffron, boxShadow: `0 0 10px ${KE.saffron}`, animation: 'dc-pulse-dot 1.6s ease-in-out infinite' }}></span>
                  Early access
                </span>
              </div>

              <h3 style={{ fontFamily: keD, fontWeight: 600, color: KE.ink, fontSize: 'clamp(48px,6vw,84px)', letterSpacing: -3, lineHeight: 0.96, margin: '30px 0 0' }}>UpStride</h3>
              <div style={{ fontFamily: keM, fontSize: 11.5, color: KE.saffron2, letterSpacing: 2, textTransform: 'uppercase', marginTop: 14 }}>Therapy program &amp; progress platform</div>

              <p style={{ fontFamily: keS, fontSize: 16.5, lineHeight: 1.62, color: KE.ink2, margin: '22px 0 0', maxWidth: 460 }}>
                A therapy program and progress-management platform that keeps therapists and parents aligned throughout a child’s developmental journey — one shared plan, sessions captured in the moment, and warm weekly updates families actually read.
              </p>

              {/* key outcomes */}
              <div style={{ marginTop: 30, paddingTop: 26, borderTop: `1px solid ${KE.line}` }}>
                <div style={{ fontFamily: keM, fontSize: 10.5, color: KE.muted, letterSpacing: 2.4, textTransform: 'uppercase', marginBottom: 16 }}>Key outcomes</div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                  {outcomes.map(([t, d]) => (
                    <div key={t} style={{ display: 'grid', gridTemplateColumns: '14px 1fr', gap: 13, alignItems: 'start' }}>
                      <span style={{ width: 8, height: 8, borderRadius: 99, background: KE.jade, marginTop: 6, boxShadow: `0 0 9px ${KE.jade}66` }}></span>
                      <div>
                        <div style={{ fontFamily: keS, fontSize: 15, fontWeight: 600, color: KE.ink, lineHeight: 1.3 }}>{t}</div>
                        <div style={{ fontFamily: keS, fontSize: 13.5, color: KE.muted, lineHeight: 1.5, marginTop: 3 }}>{d}</div>
                      </div>
                    </div>
                  ))}
                </div>
              </div>

              <div style={{ marginTop: 'auto', paddingTop: 30, display: 'flex', alignItems: 'center', gap: 20, flexWrap: 'wrap' }}>
                <a href="#contact" style={{
                  display: 'inline-flex', alignItems: 'center', gap: 9, fontFamily: keS, fontSize: 14, fontWeight: 600,
                  color: KE.bg, background: KE.cream, padding: '12px 20px', borderRadius: 999, textDecoration: 'none', transition: 'transform 0.2s',
                }}
                  onMouseEnter={e => e.currentTarget.style.transform = 'translateY(-2px)'}
                  onMouseLeave={e => e.currentTarget.style.transform = 'translateY(0)'}
                >Request early access <span style={{ opacity: 0.6 }}>→</span></a>
                <span style={{ fontFamily: keM, fontSize: 10.5, color: KE.muted, letterSpacing: 1.4, textTransform: 'uppercase' }}>Onboarding first centres · Hyderabad</span>
              </div>
            </div>

            {/* right — product visual */}
            <div style={{ padding: '44px 40px', display: 'flex', alignItems: 'center', justifyContent: 'center', background: KE.bg2, position: 'relative', overflow: 'hidden' }}>
              <div aria-hidden style={{
                position: 'absolute', inset: 0,
                backgroundImage: `linear-gradient(${KE.line} 1px, transparent 1px), linear-gradient(90deg, ${KE.line} 1px, transparent 1px)`,
                backgroundSize: '46px 46px', opacity: 0.4,
                maskImage: 'radial-gradient(ellipse at center, black 30%, transparent 82%)',
                WebkitMaskImage: 'radial-gradient(ellipse at center, black 30%, transparent 82%)',
              }}></div>
              <div style={{ position: 'relative', width: '100%', maxWidth: 560 }}><KMockJourney /></div>
            </div>
          </div>
        </Reveal>

        {/* ---- Future product areas (placeholders) ---- */}
        <div style={{ marginTop: 80 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', flexWrap: 'wrap', gap: 16, marginBottom: 28, paddingBottom: 18, borderBottom: `1px solid ${KE.line}` }}>
            <Reveal>
              <h3 style={{ fontFamily: keD, fontWeight: 600, fontStyle: 'italic', fontFamily: window.kSerif, color: KE.ink, fontSize: 'clamp(24px,3vw,34px)', letterSpacing: -1, margin: 0 }}>Future product areas</h3>
            </Reveal>
            <Reveal delay={0.1}>
              <span style={{ fontFamily: keM, fontSize: 11, color: KE.muted, letterSpacing: 2, textTransform: 'uppercase' }}>UpStride is the first, not the last</span>
            </Reveal>
          </div>
          <div className="keni-future-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
            {future.map(([t, d, c], i) => (
              <Reveal key={t} delay={i * 0.08} y={30}>
                <div style={{ padding: 28, background: KE.bg2, border: `1px dashed ${KE.line}`, borderRadius: 12, minHeight: 230, display: 'flex', flexDirection: 'column', position: 'relative', overflow: 'hidden' }}>
                  <div aria-hidden style={{ position: 'absolute', top: -40, right: -40, width: 130, height: 130, borderRadius: '50%', background: c, opacity: 0.05, filter: 'blur(10px)' }}></div>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 'auto' }}>
                    <span style={{ width: 9, height: 9, borderRadius: 99, background: c, opacity: 0.7 }}></span>
                    <span style={{ fontFamily: keM, fontSize: 9.5, color: KE.muted, letterSpacing: 1.6, textTransform: 'uppercase', border: `1px solid ${KE.line}`, padding: '4px 10px', borderRadius: 999 }}>Planned</span>
                  </div>
                  <h4 style={{ fontFamily: keD, fontSize: 25, color: KE.ink2, letterSpacing: -0.5, margin: '36px 0 11px', fontWeight: 600 }}>{t}</h4>
                  <p style={{ fontFamily: keS, fontSize: 13.5, color: KE.muted, lineHeight: 1.55, margin: 0 }}>{d}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ============ Capability areas ============
function KCapabilities() {
  const caps = [
    ['SaaS platforms', 'Multi-tenant products that teams sign into every day — fast, reliable, and pleasant to use.', KE.saffron],
    ['Workflow systems', 'Software that orchestrates multi-step, multi-person work so nothing falls through the cracks.', KE.sky],
    ['AI-assisted intelligence', 'Models applied with restraint — drafting, summarizing, and surfacing, always with a human in the loop.', KE.jade],
    ['Operational platforms', 'The systems of record that run a business: scheduling, records, billing, continuity.', KE.rose],
    ['Data & visibility systems', 'Turning scattered signals into clear, trustworthy views people can act on.', KE.amber],
  ];
  return (
    <section id="capabilities" style={{ padding: '128px 48px', background: KE.bg, borderBottom: `1px solid ${KE.line}`, position: 'relative', overflow: 'hidden' }}>
      <AmbientBackdrop color={KE.sky} />
      <div style={{ position: 'relative', zIndex: 2, maxWidth: 1320, margin: '0 auto' }}>
        <div style={{ marginBottom: 56, maxWidth: 760 }}>
          <Reveal><KTag color={KE.jade}>What we build</KTag></Reveal>
          <Reveal delay={0.1}>
            <h2 style={{ fontFamily: keD, fontWeight: 600, color: KE.ink, margin: '20px 0 0', fontSize: 'clamp(36px,5vw,72px)', lineHeight: 1.0, letterSpacing: -2.2 }}>
              Five capability areas,<br /><span style={{ fontStyle: 'italic', fontFamily: window.kSerif, color: KE.saffron }}>one</span> way of working.
            </h2>
          </Reveal>
        </div>
        <div style={{ border: `1px solid ${KE.line}`, borderRadius: 12, overflow: 'hidden' }}>
          {caps.map(([t, d, c], i) => (
            <Reveal key={t} delay={i * 0.05}>
              <div className="keni-cap-row" style={{
                display: 'grid', gridTemplateColumns: '70px 1.1fr 1.4fr', gap: 28, alignItems: 'center',
                padding: '30px 32px', borderTop: i > 0 ? `1px solid ${KE.line}` : 'none',
                transition: 'background 0.25s',
              }}
                onMouseEnter={e => e.currentTarget.style.background = KE.bg2}
                onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
              >
                <span style={{ fontFamily: keM, fontSize: 13, color: c, letterSpacing: 1 }}>0{i + 1}</span>
                <h3 style={{ fontFamily: keD, fontSize: 'clamp(22px,2.4vw,32px)', color: KE.ink, letterSpacing: -0.8, margin: 0, fontWeight: 600, display: 'flex', alignItems: 'center', gap: 14 }}>
                  <span style={{ width: 9, height: 9, borderRadius: 99, background: c }}></span>{t}
                </h3>
                <p style={{ fontFamily: keS, fontSize: 15, color: KE.ink2, lineHeight: 1.55, margin: 0 }}>{d}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { KChapter, KProductEcosystem, KCapabilities });