// Home page.
// Role rows read their status indicator from window.PROJECT_STATUS (data.js),
// so changing a status once updates every place it appears.
const ACTIVE_ROLES = [
  { id: 'kato',      role: 'Co-founder & CTO',  ctx: 'Kato AI · EdTech · 2025 →' },
  { id: 'pilotpath', role: 'Fractional CTO',    ctx: 'PilotPath PACIFIC · Aviation · 2026 →' },
  { id: 'm3',        role: 'Open source',       ctx: 'M3 · Personal knowledge OS' },
  { id: '__research__', role: 'Research',       ctx: 'Usage & behavioural analytics', fallback: 'open' },
];

function PageHome() {
  const stats = window.SITE_STATS || { perYear: [], years: [], cumulative: [], total: 0, start: 0, end: 0 };
  const [greetIdx, setGreetIdx] = React.useState(0);
  const hour = new Date().getHours();
  const greet = hour < 5 ? 'STILL UP' : hour < 12 ? 'GOOD MORNING' : hour < 18 ? 'GOOD AFTERNOON' : hour < 22 ? 'GOOD EVENING' : 'GOOD NIGHT';

  return (
    <div className="page" data-page="home" data-screen-label="01 Home">
      <div className="home-grid">
        <div className="panel hero-panel emph">
          <div className="hero-inner">
            <div className="hero-eyebrow">
              <span style={{ color: 'var(--accent)' }}>●</span>
              <span>{greet} · welcome</span>
              <span>·</span>
              <span>dublin, ireland</span>
            </div>
            <h1 className="hero-title">
              Systems thinker<br/>
              <span className="stroke">who</span> <span className="serif">validates,</span><br/>
              <span className="accent">then ships.</span>
            </h1>
            <p className="hero-sub">
              I'm <b>Dr. Manoj Kesavulu</b>, co-founder & CTO at <b>Kato AI</b>,
              fractional CTO at <b>PilotPath</b>, and a PhD in usage analytics from <b>Lero / DCU</b>.
              I operate at the intersection of <b>regulated edtech</b>, <b>aviation training</b>,
              and applied <b>behavioural analytics</b>. Validating before I build, then shipping fast.
            </p>
          </div>
          <div className="hero-console">
            <div className="hc-row"><span>role.primary</span><b>co-founder · cto</b></div>
            <div className="hc-row"><span>role.secondary</span><b>fractional cto</b></div>
            <div className="hc-row"><span>location</span><b>dublin, ie</b></div>
            <div className="hc-row"><span>availability</span><b style={{color:'var(--accent)'}}>● open to conversation</b></div>
            <div className="hc-row"><span>focus</span><b>ai · agents · edtech · regulated sys</b></div>
            <div style={{ borderTop: '1px dashed var(--line)', margin: '10px 0 4px' }} />
            <div style={{ marginTop: 6 }}>
              <GitHubMatrix username="chintu0019" />
            </div>
          </div>
        </div>

        <Panel title="ROLES / ACTIVE" className="home-cell" actions={<span style={{color:'var(--accent)'}}>● {ACTIVE_ROLES.length} active</span>}>
          <div className="status-list">
            {ACTIVE_ROLES.map((r, i) => {
              const s = (window.PROJECT_STATUS || {})[r.id] || {};
              const dotClass = s.dot === 'warn' ? 'dot warn' : s.dot === 'alert' ? 'dot alert' : 'dot ok';
              const glyph = s.dot === 'warn' ? '◐' : '●';
              return (
                <div key={i} className="row">
                  <span className={dotClass} />
                  <div><div className="name">{r.role}</div><div className="val">{r.ctx}</div></div>
                  <div className="val">{glyph} {s.rowDetail || r.fallback || ''}</div>
                </div>
              );
            })}
          </div>
        </Panel>

        <Panel title="CAREER / BIG NUMBERS" className="home-cell">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18 }}>
            <div>
              <div className="bignum"><Counter to={3} /><span className="unit">awards</span></div>
              <div style={{ color: 'var(--ink-dim)', fontSize: 11, marginTop: 4 }}>DCU · TII · Tech Excellence</div>
            </div>
            <div>
              <div className="bignum"><span className="accent"><Counter to={2} /></span><span className="unit">orgs</span></div>
              <div style={{ color: 'var(--ink-dim)', fontSize: 11, marginTop: 4 }}>Active engagements</div>
            </div>
            <div>
              <div className="bignum"><Counter to={10} /><span className="unit">papers</span></div>
              <div style={{ color: 'var(--ink-dim)', fontSize: 11, marginTop: 4 }}>Peer-reviewed</div>
            </div>
            <div>
              <div className="bignum"><span className="accent"><Counter to={85} /></span><span className="unit">cit.</span></div>
              <div style={{ color: 'var(--ink-dim)', fontSize: 11, marginTop: 4 }}>Scholar · Apr 2026</div>
            </div>
          </div>
        </Panel>

        <Panel title="STACK / IN PRODUCTION" className="home-cell" actions="live">
          <div style={{ fontFamily: 'var(--f-mono)', fontSize: 11, color: 'var(--ink-dim)', lineHeight: 1.8 }}>
            <div><span style={{ color: 'var(--accent)' }}>▸</span> Next.js 14 · TS · App Router</div>
            <div><span style={{ color: 'var(--accent)' }}>▸</span> FastAPI · Python</div>
            <div><span style={{ color: 'var(--accent)' }}>▸</span> PostgreSQL · Prisma · pgvector</div>
            <div><span style={{ color: 'var(--accent)' }}>▸</span> Tailwind · shadcn/ui</div>
            <div><span style={{ color: 'var(--accent)' }}>▸</span> GCP · Cloud Run · Cloud SQL</div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginTop: 14 }}>
            <div className="kv"><span className="k">local AI</span><span className="v accent">Ollama · M4</span></div>
            <div className="kv"><span className="k">agents</span><span className="v">multi-agent</span></div>
            <div className="kv"><span className="k">infra</span><span className="v">Docker · GCP</span></div>
            <div className="kv"><span className="k">android</span><span className="v">Kotlin · CameraX</span></div>
          </div>
        </Panel>

        <Panel title="NOW / WHAT I'M DOING" className="home-cell" actions="weekly">
          <div className="term">
            <div><span className="cmd">cat ~/now.md</span></div>
            <div>&gt; <b style={{color:'var(--ink)'}}>Kato AI</b>: live pilots across language schools.</div>
            <div>&gt; <b style={{color:'var(--ink)'}}>PilotPath PACIFIC</b>: designing the unified platform across IE · UK · USA.</div>
            <div>&gt; <b style={{color:'var(--ink)'}}>BACoRe</b>: behavioural analytics extension of my PhD.</div>
            <div>&gt; <b style={{color:'var(--ink)'}}>Reading</b>: applied agent frameworks, purpose-built AI.</div>
            <div>&gt; <span className="ok">open</span> to: advisory, angel chats, high-signal intros.</div>
            <div><span className="cmd">_</span><span className="cursor-blink" /></div>
          </div>
        </Panel>
      </div>
    </div>
  );
}
Object.assign(window, { PageHome });