// keni-hero.jsx — Hero with ecosystem visualization + Philosophy section.
// Reads tokens from window. Uses Reveal/Counter primitives + AuroraBG/GrainOverlay.

const KH = window.KENI;
const khD = window.kDisplay,khS = window.kSans,khM = window.kMono;

// ============ Ecosystem visualization ============
// A calm node graph: a core node (the platform layer) with product satellites.
// Thin connectors with a slow travelling pulse. Restrained, not neon.
function EcosystemViz() {
  // node layout in a 460x460 field
  const core = { x: 230, y: 230 };
  const nodes = [
  { x: 230, y: 64, r: 30, label: 'UpStride', sub: 'Live', color: KH.saffron, active: true },
  { x: 396, y: 168, r: 17, label: 'Workflow', sub: 'Soon', color: KH.sky },
  { x: 372, y: 360, r: 17, label: 'Intelligence', sub: 'Soon', color: KH.jade },
  { x: 96, y: 372, r: 17, label: 'Operations', sub: 'Soon', color: KH.rose },
  { x: 60, y: 156, r: 17, label: 'Visibility', sub: 'Soon', color: KH.amber }];

  return (
    <div style={{ position: 'relative', width: '100%', maxWidth: 520, margin: '0 auto', aspectRatio: '1' }}>
      <svg viewBox="0 0 460 460" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', overflow: 'visible' }}>
        <defs>
          <radialGradient id="kh-coreglow" cx="50%" cy="50%" r="50%">
            <stop offset="0%" stopColor={KH.saffron} stopOpacity="0.35" />
            <stop offset="100%" stopColor={KH.saffron} stopOpacity="0" />
          </radialGradient>
        </defs>
        <circle cx={core.x} cy={core.y} r="150" fill="url(#kh-coreglow)" />
        {/* faint orbit ring */}
        <circle cx={core.x} cy={core.y} r="166" fill="none" stroke={KH.line} strokeWidth="1" strokeDasharray="2 7" opacity="0.7" />
        {/* connectors */}
        {nodes.map((n, i) =>
        <g key={i}>
            <line x1={core.x} y1={core.y} x2={n.x} y2={n.y}
          stroke={n.active ? n.color : KH.line} strokeWidth={n.active ? 1.4 : 1}
          opacity={n.active ? 0.55 : 0.4} />
            {n.active &&
          <line x1={core.x} y1={core.y} x2={n.x} y2={n.y}
          stroke={n.color} strokeWidth="2" strokeLinecap="round"
          strokeDasharray="3 196" opacity="0.9">
                <animate attributeName="stroke-dashoffset" from="199" to="0" dur="2.6s" repeatCount="indefinite" />
              </line>
          }
          </g>
        )}
        {/* core node */}
        <circle cx={core.x} cy={core.y} r="42" fill={KH.panel} stroke={KH.line} strokeWidth="1" />
        <circle cx={core.x} cy={core.y} r="42" fill="none" stroke={KH.saffron} strokeWidth="1" opacity="0.4">
          <animate attributeName="r" from="42" to="60" dur="3.2s" repeatCount="indefinite" />
          <animate attributeName="opacity" from="0.4" to="0" dur="3.2s" repeatCount="indefinite" />
        </circle>
      </svg>
      {/* HTML node labels (crisper text than SVG) */}
      <div style={{ position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%,-50%)', textAlign: 'center' }}>
        <div style={{ fontFamily: khD, fontSize: 17, color: KH.cream, fontStyle: 'italic', fontFamily: window.kSerif, letterSpacing: -0.3 }}>KeNi</div>
        <div style={{ fontFamily: khM, fontSize: 8.5, color: KH.muted, letterSpacing: 2, textTransform: 'uppercase', marginTop: 2 }}>Platform layer</div>
      </div>
      {nodes.map((n, i) =>
      <div key={i} style={{
        position: 'absolute', left: `${n.x / 460 * 100}%`, top: `${n.y / 460 * 100}%`,
        transform: 'translate(-50%,-50%)', textAlign: 'center', width: 96,
        animation: `dc-float ${5 + i}s ease-in-out infinite`, animationDelay: `${i * 0.4}s`
      }}>
          <div style={{
          width: n.active ? 13 : 9, height: n.active ? 13 : 9, borderRadius: 99,
          background: n.color, margin: '0 auto 8px',
          boxShadow: n.active ? `0 0 16px ${n.color}` : 'none',
          opacity: n.active ? 1 : 0.85
        }}></div>
          <div style={{ fontFamily: khS, fontSize: n.active ? 13 : 11.5, color: n.active ? KH.ink : KH.ink2, fontWeight: n.active ? 600 : 500 }}>{n.label}</div>
          <div style={{ fontFamily: khM, fontSize: 8.5, color: n.active ? n.color : KH.muted, letterSpacing: 1.5, textTransform: 'uppercase', marginTop: 2 }}>{n.sub}</div>
        </div>
      )}
    </div>);

}

// ============ Hero headline alternatives ============
// Five primary-headline options around the theme
// "Building intelligent systems for meaningful progress."
// Each renders as three display lines with one italic saffron accent word.
// Switchable live via the Tweaks panel.
const KHERO_HEADLINES = {
  progress: {
    label: 'Meaningful progress',
    lines: [
    <span>Building intelligent</span>,
    <span>systems for <span style={{ fontStyle: 'italic', fontFamily: window.kSerif, color: KH.saffron }}>meaningful</span></span>,
    <span>progress.</span>]

  },
  forward: {
    label: 'Move work forward',
    lines: [
    <span>We build the systems</span>,
    <span>that move work</span>,
    <span style={{ fontStyle: 'italic', fontFamily: window.kSerif, color: KH.saffron }}>forward.</span>]

  },
  clarity: {
    label: 'Complexity into clarity',
    lines: [
    <span>Turning complexity</span>,
    <span>into <span style={{ fontStyle: 'italic', fontFamily: window.kSerif, color: KH.saffron }}>clear</span></span>,
    <span>progress.</span>]

  },
  software: {
    label: 'Software, built for real',
    lines: [
    <span>Intelligent software,</span>,
    <span>built for <span style={{ fontStyle: 'italic', fontFamily: window.kSerif, color: KH.saffron }}>real</span></span>,
    <span>progress.</span>]

  },
  lighter: {
    label: 'Hard work feels lighter',
    lines: [
    <span>Software that makes</span>,
    <span>hard work feel</span>,
    <span style={{ fontStyle: 'italic', fontFamily: window.kSerif, color: KH.saffron }}>lighter.</span>]

  }
};

const KHERO_DEFAULTS = /*EDITMODE-BEGIN*/{
  "headline": "progress"
} /*EDITMODE-END*/;

// ============ Hero ============
function KHero() {
  const [t, setTweak] = useTweaks(KHERO_DEFAULTS);
  const headline = KHERO_HEADLINES[t.headline] || KHERO_HEADLINES.progress;

  return (
    <section id="top" style={{ position: 'relative', background: KH.bg, overflow: 'hidden', borderBottom: `1px solid ${KH.line}` }}>
      {/* calm backdrop */}
      <AuroraBG colors={[KH.saffron, KH.rose, KH.amber]} opacity={0.32} blur={130} scrollCouple />
      <GrainOverlay opacity={0.16} />
      <div style={{ position: 'relative', zIndex: 2, padding: '40px 48px 0' }}>
        {/* meta strip */}
        <div style={{
          display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12,
          fontFamily: khM, fontSize: 11, color: KH.muted, letterSpacing: 2, textTransform: 'uppercase',
          paddingBottom: 28, borderBottom: `1px solid ${KH.line}`
        }}>
          <Reveal><span>A product ecosystem company</span></Reveal>
          <Reveal delay={0.05}><span>HYDERABAD · INDIA</span></Reveal>
          <Reveal delay={0.1}><span style={{ color: KH.saffron }}>● UpStride now in early access</span></Reveal>
        </div>

        {/* main grid */}
        <div className="keni-hero-grid" style={{
          display: 'grid', gridTemplateColumns: '1.15fr 0.85fr', gap: 48, alignItems: 'center',
          padding: '72px 0 64px', minHeight: '64vh'
        }}>
          <div>
            <h1 style={{
              fontFamily: khD, fontWeight: 600, color: KH.ink, margin: 0,
              fontSize: 'clamp(46px, 6.4vw, 104px)', lineHeight: 0.98, letterSpacing: -2.6
            }}>
              {headline.lines.map((line, i) =>
              <Reveal key={`${t.headline}-${i}`} y={50} duration={1.05} delay={i * 0.12}>{line}</Reveal>
              )}
            </h1>
            <Reveal delay={0.4}>
              <p style={{
                fontFamily: khS, fontSize: 19, lineHeight: 1.62, color: KH.ink2,
                margin: '34px 0 0', maxWidth: 540
              }}>At KeNi Solutions, we build SaaS platforms, workflow systems, and AI-assisted products that help people and organizations reduce complexity, improve visibility, and reach better outcomes.



              </p>
            </Reveal>
            <Reveal delay={0.5}>
              <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginTop: 40 }}>
                <a href="#products" style={{
                  fontFamily: khS, fontSize: 15, fontWeight: 600, color: KH.bg,
                  background: KH.saffron, padding: '15px 26px', borderRadius: 999, textDecoration: 'none',
                  display: 'inline-flex', alignItems: 'center', gap: 9, transition: 'transform 0.2s'
                }}
                onMouseEnter={(e) => e.currentTarget.style.transform = 'translateY(-2px)'}
                onMouseLeave={(e) => e.currentTarget.style.transform = 'translateY(0)'}>
                  Explore Products <span style={{ opacity: 0.6 }}>→</span></a>
                <a href="#vision" style={{
                  fontFamily: khS, fontSize: 15, fontWeight: 500, color: KH.cream,
                  background: 'transparent', border: `1px solid ${KH.line}`,
                  padding: '14px 26px', borderRadius: 999, textDecoration: 'none',
                  display: 'inline-flex', alignItems: 'center', gap: 9, transition: 'border-color 0.2s'
                }}
                onMouseEnter={(e) => e.currentTarget.style.borderColor = KH.cream}
                onMouseLeave={(e) => e.currentTarget.style.borderColor = KH.line}>
                  Our Vision</a>
              </div>
            </Reveal>
          </div>
          <Reveal delay={0.3} y={40}>
            <EcosystemViz />
          </Reveal>
        </div>

        {/* bottom strip — what we build */}
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0,
          borderTop: `1px solid ${KH.line}`
        }}>
          {[
          ['Flagship', 'UpStride — therapy program & progress platform', KH.saffron],
          ['Approach', 'Product-first, outcome-focused, built to last', KH.jade],
          ['Horizon', 'A growing ecosystem across industries', KH.sky]].
          map(([k, v, c], i) =>
          <Reveal key={k} delay={0.15 + i * 0.08}>
              <div style={{ padding: '28px 28px 28px 0', borderRight: i < 2 ? `1px solid ${KH.line}` : 'none', marginLeft: i > 0 ? 28 : 0 }}>
                <div style={{ fontFamily: khM, fontSize: 10.5, color: c, letterSpacing: 2, textTransform: 'uppercase' }}>{k}</div>
                <div style={{ fontFamily: khS, fontSize: 15, color: KH.ink, lineHeight: 1.5, marginTop: 10 }}>{v}</div>
              </div>
            </Reveal>
          )}
        </div>
      </div>

      <TweaksPanel>
        <TweakSection label="Primary headline" />
        <TweakSelect label="Headline" value={t.headline}
        options={Object.keys(KHERO_HEADLINES).map((k) => ({ value: k, label: KHERO_HEADLINES[k].label }))}
        onChange={(v) => setTweak('headline', v)} />
      </TweaksPanel>
    </section>);

}

// ============ Philosophy ============
function KPhilosophy() {
  const beliefs = [
  ['Reduce friction', 'Technology earns its place when it removes steps, not adds them. Every interaction should feel lighter than the one it replaced.', KH.saffron],
  ['Improve clarity', 'Systems should make the important things visible — progress, status, and what to do next — without anyone hunting for them.', KH.sky],
  ['Support people', 'Software should work in the background so professionals can stay present with the people in front of them.', KH.rose],
  ['Feel human', 'Operational work shouldn’t feel mechanical. The right system makes complex routines feel simpler, calmer, and more humane.', KH.jade]];

  return (
    <section id="philosophy" style={{ padding: '128px 48px', background: KH.bg, borderBottom: `1px solid ${KH.line}`, position: 'relative', overflow: 'hidden' }}>
      <AmbientBackdrop color={KH.saffron2} />
      <div style={{ position: 'relative', zIndex: 2, maxWidth: 1320, margin: '0 auto' }}>
        <div className="keni-philo-top" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'end', marginBottom: 72 }}>
          <div>
            <Reveal><KTag>What we believe</KTag></Reveal>
            <Reveal delay={0.1}>
              <h2 style={{ fontFamily: khD, fontWeight: 600, color: KH.ink, margin: '22px 0 0', fontSize: 'clamp(40px, 5.4vw, 80px)', lineHeight: 1.0, letterSpacing: -2.4 }}>
                Good software<br />should <span style={{ fontStyle: 'italic', fontFamily: window.kSerif, color: KH.saffron }}>disappear</span>.
              </h2>
            </Reveal>
          </div>
          <Reveal delay={0.2}>
            <p style={{ fontFamily: khS, fontSize: 18, lineHeight: 1.65, color: KH.ink2, margin: 0, maxWidth: 480 }}>
              We don’t build technology for its own sake. We build it so the people using it
              can spend less time fighting their tools and more time on the work that actually
              matters. These four beliefs sit underneath everything we ship.
            </p>
          </Reveal>
        </div>
        <div className="keni-belief-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, border: `1px solid ${KH.line}` }}>
          {beliefs.map(([t, d, c], i) =>
          <Reveal key={t} delay={i * 0.08}>
              <div style={{ padding: 32, minHeight: 280, borderRight: i < 3 ? `1px solid ${KH.line}` : 'none', display: 'flex', flexDirection: 'column' }}>
                <div style={{ fontFamily: khM, fontSize: 11, color: c, letterSpacing: 2, textTransform: 'uppercase' }}>0{i + 1}</div>
                <h3 style={{ fontFamily: khD, fontSize: 27, color: KH.ink, letterSpacing: -0.6, margin: '18px 0 14px', fontWeight: 600, fontStyle: 'italic', fontFamily: window.kSerif }}>{t}</h3>
                <p style={{ fontFamily: khS, fontSize: 14.5, color: KH.ink2, lineHeight: 1.6, margin: 0 }}>{d}</p>
              </div>
            </Reveal>
          )}
        </div>
      </div>
    </section>);

}

Object.assign(window, { EcosystemViz, KHero, KPhilosophy });