// keni-vision.jsx — Future Vision, Founder Story, Journal, Careers, Contact close.

const KV = window.KENI;
const kvD = window.kDisplay,kvS = window.kSans,kvM = window.kMono;
const { KTag } = window;

// ============ Future Vision ============
function KFutureVision() {
  return (
    <section id="vision" style={{ padding: '160px 48px', background: KV.bg, borderBottom: `1px solid ${KV.line}`, position: 'relative', overflow: 'hidden' }}>
      <AuroraBG colors={[KV.saffron, KV.sky, KV.jade]} opacity={0.26} blur={140} scrollCouple />
      <GrainOverlay opacity={0.14} />
      <div style={{ position: 'relative', zIndex: 2, maxWidth: 1320, margin: '0 auto' }}>
        <Reveal><KTag color={KV.sky}>The long horizon</KTag></Reveal>
        <h2 style={{ fontFamily: kvD, fontWeight: 600, color: KV.ink, letterSpacing: -3.4, lineHeight: 0.98, margin: '36px 0 0', fontSize: 'clamp(42px,7vw,116px)' }}>
          <Reveal y={50}><div>A growing ecosystem</div></Reveal>
          <Reveal y={50} delay={0.12}><div>of <span style={{ fontStyle: 'italic', fontFamily: window.kSerif, color: KV.saffron }}>intelligent</span> platforms.</div></Reveal>
        </h2>
        <div className="keni-vision-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, marginTop: 72, paddingTop: 52, borderTop: `1px solid ${KV.line}` }}>
          <Reveal>
            <p style={{ fontFamily: kvD, fontSize: 'clamp(24px,2.6vw,34px)', color: KV.ink, lineHeight: 1.35, margin: 0, letterSpacing: -0.8, fontWeight: 600 }}>
              We build intelligent systems for <span style={{ color: KV.saffron, fontStyle: 'italic', fontFamily: window.kSerif }}>meaningful problems</span> — software designed to last, measured by the outcomes it creates.
            </p>
          </Reveal>
          <Reveal delay={0.15}>
            <p style={{ fontFamily: kvS, fontSize: 17, color: KV.ink2, lineHeight: 1.65, margin: 0, maxWidth: 520 }}>
              UpStride is the first. It takes an industry running on spreadsheets and goodwill and gives it a calm, intelligent system built around the people inside it.
              <br /><br />
              We grow deliberately, one thoughtful product at a time, and judge our work by what actually changes for the people who rely on it.
            </p>
          </Reveal>
        </div>
        <div className="keni-vision-pillars" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, marginTop: 72, border: `1px solid ${KV.line}`, borderRadius: 12, overflow: 'hidden' }}>
          {[
          ['Long-term thinking', 'We build products to own and improve for years — not projects to ship and forget.', KV.saffron],
          ['Meaningful problems', 'We choose work that matters — real operational gaps where better software changes how the day actually goes.', KV.jade],
          ['Intelligent systems', 'Calm, capable software that turns scattered effort into a clear picture worth acting on.', KV.sky]].
          map(([t, d, c], i) =>
          <Reveal key={t} delay={i * 0.08}>
              <div style={{ padding: 32, minHeight: 200, borderRight: i < 2 ? `1px solid ${KV.line}` : 'none', background: KV.bg2 }}>
                <span style={{ width: 10, height: 10, borderRadius: 99, background: c, display: 'inline-block' }}></span>
                <h3 style={{ fontFamily: kvD, fontSize: 26, color: KV.ink, letterSpacing: -0.6, margin: '18px 0 12px', fontWeight: 600, fontStyle: 'italic', fontFamily: window.kSerif }}>{t}</h3>
                <p style={{ fontFamily: kvS, fontSize: 14.5, color: KV.ink2, lineHeight: 1.55, margin: 0 }}>{d}</p>
              </div>
            </Reveal>
          )}
        </div>
      </div>
    </section>);

}

// ============ Founder Story ============
function KFounder() {
  return (
    <section id="founder" style={{ padding: '140px 48px', background: KV.bg2, borderBottom: `1px solid ${KV.line}` }}>
      <div style={{ maxWidth: 880, margin: '0 auto' }}>
        <Reveal><KTag color={KV.rose}>Founder story</KTag></Reveal>
        <Reveal delay={0.1}>
          <h2 style={{ fontFamily: kvD, fontWeight: 600, color: KV.ink, letterSpacing: -2, lineHeight: 1.04, margin: '24px 0 0', fontSize: 'clamp(34px,4.6vw,62px)' }}>
            Why KeNi Solutions<br /><span style={{ fontStyle: 'italic', fontFamily: window.kSerif, color: KV.saffron }}>exists.</span>
          </h2>
        </Reveal>

        <Reveal delay={0.16}>
          <p style={{ fontFamily: kvD, fontStyle: 'italic', fontFamily: window.kSerif, fontSize: 'clamp(22px,2.4vw,30px)', color: KV.ink, lineHeight: 1.4, margin: '40px 0 0', letterSpacing: -0.6 }}>
            For years I built products inside healthcare technology. I learned how care actually moves — not the polished version on a slide, but the gap between what a system promises and what a family lives through.
          </p>
        </Reveal>

        <div style={{ marginTop: 36, display: 'flex', flexDirection: 'column', gap: 22 }}>
          <Reveal delay={0.2}>
            <p style={{ fontFamily: kvS, fontSize: 18, color: KV.ink2, lineHeight: 1.7, margin: 0 }}>
              Then I lived it. Someone close to me started a long-term therapy program, and I spent months inside the machinery of it — appointments, progress notes, handoffs between people who never spoke to each other. Every clinician was working hard. Every one of them was working a little blind.
            </p>
          </Reveal>
          <Reveal delay={0.24}>
            <p style={{ fontFamily: kvS, fontSize: 18, color: KV.ink2, lineHeight: 1.7, margin: 0 }}>
              What struck me wasn’t bad care. It was fragmentation. The therapist didn’t know what last week looked like. The parent didn’t know if anything was working. Progress lived in a dozen places and added up to nothing anyone could actually see. Decisions got made on memory and instinct, because the system offered nothing better.
            </p>
          </Reveal>
          <Reveal delay={0.28}>
            <p style={{ fontFamily: kvS, fontSize: 18, color: KV.ink2, lineHeight: 1.7, margin: 0 }}>
              I kept landing on the same thought: the information already existed. It was just scattered, locked in silos, never assembled into a picture anyone could act on. The effort was there. The <span style={{ color: KV.ink, fontStyle: 'italic', fontFamily: window.kSerif, fontFamily: kvD }}>visibility</span> wasn’t.
            </p>
          </Reveal>
          <Reveal delay={0.32}>
            <p style={{ fontFamily: kvS, fontSize: 18, color: KV.ink2, lineHeight: 1.7, margin: 0 }}>
              That gap is why KeNi exists. Not to replace the people doing the work, but to give them a shared, honest view of it — where things stand, what’s changed, what comes next. When everyone can see the same picture, they make better decisions, and they make them together.
            </p>
          </Reveal>
          <Reveal delay={0.36}>
            <p style={{ fontFamily: kvS, fontSize: 18, color: KV.ink2, lineHeight: 1.7, margin: 0 }}>
              I’m not interested in software that adds another login to an already exhausting day. I’m interested in alignment — clinicians, families, and programs pulling in the same direction because, for once, they’re looking at the same thing. UpStride is where we started. The frustration that built it was real, and personal. So is the belief underneath it: better visibility leads to better alignment, and better alignment leads to outcomes that actually reach the people they’re meant for.
            </p>
          </Reveal>
        </div>

        <Reveal delay={0.42}>
          <p style={{ fontFamily: kvM, fontSize: 12, color: KV.muted, letterSpacing: 2, textTransform: 'uppercase', margin: '44px 0 0', paddingTop: 28, borderTop: `1px solid ${KV.line}` }}>
            — Founder, KeNi Solutions
          </p>
        </Reveal>
      </div>
    </section>);

}

// ============ Journal ============
function KJournal() {
  const posts = [
  ['Building software that disappears', 'Why the best operational tools are the ones you stop noticing.', '6 min'],
  ['AI with a human in the loop', 'How we use models to draft and summarize — never to decide.', '6 min read'],
  ['Designing for clarity, not features', 'What we learned building UpStride alongside real therapists and parents.', '9 min read']];

  return (
    <section id="journal" style={{ padding: '120px 48px', background: KV.bg, borderBottom: `1px solid ${KV.line}` }}>
      <div style={{ maxWidth: 1320, margin: '0 auto' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', flexWrap: 'wrap', gap: 20, marginBottom: 48 }}>
          <Reveal>
            <h2 style={{ fontFamily: kvD, fontSize: 'clamp(34px,4vw,60px)', color: KV.ink, letterSpacing: -1.8, margin: 0, lineHeight: 1, fontWeight: 600 }}>
              From the <span style={{ fontStyle: 'italic', fontFamily: window.kSerif, color: KV.saffron }}>journal</span>.
            </h2>
          </Reveal>
          <Reveal delay={0.12}>
            <a href="#" style={{ fontFamily: kvS, fontSize: 14, color: KV.ink, textDecoration: 'none', borderBottom: `1px solid ${KV.cream}`, paddingBottom: 3 }}>More articles →</a>
          </Reveal>
        </div>
        <div className="keni-journal-grid" style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr', gap: 18 }}>
          {posts.map(([t, sub, time], i) =>
          <Reveal key={t} delay={i * 0.08} y={30}>
              <a href="#" style={{ display: 'block', textDecoration: 'none', padding: 28, background: KV.bg2, border: `1px solid ${KV.line}`, borderRadius: 12, minHeight: 250, transition: 'border-color 0.3s, transform 0.3s' }}
            onMouseEnter={(e) => {e.currentTarget.style.borderColor = `${KV.saffron}66`;e.currentTarget.style.transform = 'translateY(-3px)';}}
            onMouseLeave={(e) => {e.currentTarget.style.borderColor = KV.line;e.currentTarget.style.transform = 'translateY(0)';}}>
              
                <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 28 }}>
                  <span style={{ fontFamily: kvM, fontSize: 10.5, color: KV.muted, letterSpacing: 2, textTransform: 'uppercase' }}></span>
                  <span style={{ fontFamily: kvM, fontSize: 10.5, color: KV.muted, letterSpacing: 2 }}>{time}</span>
                </div>
                <h3 style={{ fontFamily: kvD, fontSize: i === 0 ? 34 : 25, color: KV.ink, lineHeight: 1.12, letterSpacing: -0.8, margin: '0 0 14px', fontWeight: 600 }}>{t}</h3>
                <p style={{ fontFamily: kvD, fontStyle: 'italic', fontFamily: window.kSerif, fontSize: 16, color: KV.ink2, margin: 0, lineHeight: 1.4 }}>{sub}</p>
              </a>
            </Reveal>
          )}
        </div>
      </div>
    </section>);

}

// ============ Careers ============
function KCareers() {
  const roles = [
  ['Senior Product Engineer', 'UpStride · Bengaluru / Remote India', 'Engineering'],
  ['Design Engineer', 'KeNi · Bengaluru', 'Design'],
  ['Clinical Product Lead', 'UpStride · Remote India', 'Product'],
  ['Implementation Manager', 'UpStride · Mumbai', 'Customer']];

  return (
    <section id="careers" style={{ padding: '120px 48px', background: KV.bg, borderBottom: `1px solid ${KV.line}` }}>
      <div style={{ maxWidth: 1320, margin: '0 auto' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', flexWrap: 'wrap', gap: 24, marginBottom: 48 }}>
          <Reveal>
            <div>
              <KTag color={KV.jade}>Build with us</KTag>
              <h2 style={{ fontFamily: kvD, fontSize: 'clamp(36px,5vw,80px)', fontWeight: 600, color: KV.ink, letterSpacing: -2.4, margin: '20px 0 0', lineHeight: 0.98 }}>
                Small team.<br /><span style={{ fontStyle: 'italic', fontFamily: window.kSerif, color: KV.saffron }}>Long horizon.</span>
              </h2>
            </div>
          </Reveal>
          <Reveal delay={0.12}>
            <a href="#" style={{ fontFamily: kvS, fontSize: 14, color: KV.ink, padding: '12px 20px', borderRadius: 999, border: `1px solid ${KV.line}`, textDecoration: 'none', whiteSpace: 'nowrap' }}>All openings →</a>
          </Reveal>
        </div>
        <div>
          {roles.map(([t, p, team], i) =>
          <Reveal key={t} delay={i * 0.06}>
              <a href="#" className="keni-role-row" style={{ display: 'grid', gridTemplateColumns: '1.4fr 1.2fr 0.8fr 40px', gap: 24, alignItems: 'center', padding: '28px 0', borderTop: `1px solid ${KV.line}`, textDecoration: 'none' }}>
                <span style={{ fontFamily: kvD, fontSize: 'clamp(22px,2.4vw,30px)', color: KV.ink, fontWeight: 600, letterSpacing: -0.6 }}>{t}</span>
                <span style={{ fontFamily: kvM, fontSize: 11.5, color: KV.muted, letterSpacing: 1.5, textTransform: 'uppercase' }}>{p}</span>
                <span style={{ fontFamily: kvM, fontSize: 11.5, color: KV.saffron, letterSpacing: 1.5, textTransform: 'uppercase' }}>{team}</span>
                <span style={{ fontFamily: kvD, fontSize: 24, color: KV.ink2, justifySelf: 'end', fontStyle: 'italic', fontFamily: window.kSerif }}>→</span>
              </a>
            </Reveal>
          )}
        </div>
      </div>
    </section>);

}

// ============ Contact / Early access ============
function KClose() {
  return (
    <section id="contact" style={{ padding: '170px 48px 120px', background: KV.bg, borderBottom: `1px solid ${KV.line}`, position: 'relative', overflow: 'hidden' }}>
      <CloseBackdrop colors={[KV.saffron, KV.sky, KV.rose]} />
      <div style={{ position: 'relative', zIndex: 2, maxWidth: 1100, margin: '0 auto', textAlign: 'center' }}>
        <Reveal><div style={{ display: 'flex', justifyContent: 'center' }}><KTag>Early access</KTag></div></Reveal>
        <h2 style={{ fontFamily: kvD, fontWeight: 600, color: KV.ink, letterSpacing: -3.6, lineHeight: 0.94, margin: '32px auto', fontSize: 'clamp(46px,8vw,128px)' }}>
          <Reveal y={56}><div>Software worth</div></Reveal>
          <Reveal y={56} delay={0.12}><div style={{ fontStyle: 'italic', fontFamily: window.kSerif, color: KV.saffron }}>building together.</div></Reveal>
        </h2>
        <Reveal delay={0.36}>
          <p style={{ fontFamily: kvS, fontSize: 19, color: KV.ink2, maxWidth: 620, margin: '0 auto 40px', lineHeight: 1.55 }}>
            See what UpStride makes possible — or start a conversation about the problem you’re trying to solve.
          </p>
        </Reveal>
        <Reveal delay={0.46}>
          <div style={{ display: 'flex', gap: 10, justifyContent: 'center', flexWrap: 'wrap' }}>
            <a href="#products" style={{ fontFamily: kvS, fontSize: 15, fontWeight: 600, color: KV.bg, background: KV.saffron, padding: '16px 28px', borderRadius: 999, textDecoration: 'none' }}>Explore UpStride →</a>
            <a href="mailto:hello@kenisolutions.com" style={{ fontFamily: kvS, fontSize: 15, fontWeight: 500, color: KV.ink, background: 'transparent', border: `1px solid ${KV.line}`, padding: '15px 28px', borderRadius: 999, textDecoration: 'none' }}>Get in touch</a>
          </div>
        </Reveal>
      </div>
    </section>);

}

Object.assign(window, { KFutureVision, KFounder, KJournal, KCareers, KClose });