/* eslint-disable */
/* global React, Section, StackCell, Browser, Phone */
/* global DotIcon, SquareIcon, CircleIcon, DiamondIcon, TriIcon, CrossIcon, HexIcon */
/* global BarsIcon, DbIcon, CloudIcon, BoltIcon, LockIcon, GearIcon, TermIcon, StreamIcon, PuzzleIcon */

/* ============================================================
   KITABEY — screenshot-led
   ============================================================ */

function KitabeyStateMachine() {
  return (
    <div className="statemachine">
      <div style={{display: "flex", justifyContent: "space-between", marginBottom: 18, fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.1em", color: "var(--ink-3)", textTransform: "uppercase"}}>
        <span>Live-room state machine</span>
        <span>handles reconnect · kick · lock · auto-submit</span>
      </div>
      <svg viewBox="0 0 980 200" preserveAspectRatio="xMidYMid meet">
        <defs>
          <marker id="kar" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" orient="auto">
            <path d="M0,0 L10,5 L0,10 z" fill="currentColor" />
          </marker>
        </defs>

        {[
          {x: 20,  l: "LOBBY",      sub: "wait for join"},
          {x: 200, l: "PREPARING",  sub: "lock roster"},
          {x: 380, l: "COUNTDOWN",  sub: "3 · 2 · 1"},
          {x: 560, l: "LIVE",       sub: "synchronized clock", cls: "live"},
          {x: 760, l: "COMPLETED",  sub: "score · awards", cls: "terminal"},
        ].map((s, i) => (
          <g key={i} className={"state " + (s.cls || "")}>
            <rect x={s.x} y="60" width="160" height="80" />
            <text x={s.x + 80} y="100" textAnchor="middle" fontSize="14" fontWeight="500">{s.l}</text>
            <text x={s.x + 80} y="120" textAnchor="middle" fill="var(--ink-3)" fontSize="10">{s.sub}</text>
          </g>
        ))}

        <g style={{color: "var(--ink)"}}>
          <path className="edge" d="M180 100 H200" markerEnd="url(#kar)" />
          <path className="edge" d="M360 100 H380" markerEnd="url(#kar)" />
          <path className="edge" d="M540 100 H560" markerEnd="url(#kar)" />
          <path className="edge" d="M720 100 H760" markerEnd="url(#kar)" />
          <path className="edge alt" d="M100 60 Q 100 25 280 25 Q 460 25 460 60" markerEnd="url(#kar)" />
          <text x="280" y="20" textAnchor="middle" fill="var(--ink-3)" fontSize="9">reconnect / kick</text>
          <path className="edge alt" d="M640 140 Q 640 180 720 180 Q 840 180 840 140" markerEnd="url(#kar)" />
          <text x="730" y="195" textAnchor="middle" fill="var(--ink-3)" fontSize="9">auto-submit on timeout</text>
        </g>
      </svg>
    </div>
  );
}

function KitabeyLanguages() {
  const langs = [
    { glyph: "अ",  name: "Hindi",     iso: "HI" },
    { glyph: "অ",  name: "Assamese",  iso: "AS" },
    { glyph: "অ",  name: "Bengali",   iso: "BN" },
    { glyph: "ગુ", name: "Gujarati",  iso: "GU" },
    { glyph: "ಕ",  name: "Kannada",   iso: "KN" },
    { glyph: "മ",  name: "Malayalam", iso: "ML" },
    { glyph: "म",  name: "Marathi",   iso: "MR" },
    { glyph: "ଓ",  name: "Odia",      iso: "OR" },
    { glyph: "ਪ",  name: "Punjabi",   iso: "PA" },
    { glyph: "த",  name: "Tamil",     iso: "TA" },
    { glyph: "త",  name: "Telugu",    iso: "TE" },
    { glyph: "ا",  name: "Urdu",      iso: "UR" },
    { glyph: "A",  name: "English",   iso: "EN" },
  ];
  return (
    <div className="lang-wall">
      {langs.map((l, i) => (
        <div key={i} className="lang-cell">
          <div className="glyph">{l.glyph}</div>
          <div className="name">{l.name}</div>
          <div className="iso">{l.iso}</div>
        </div>
      ))}
    </div>
  );
}

function Kitabey() {
  const stack = [
    { name: "NestJS 11",   cat: "Backend",   icon: <HexIcon /> },
    { name: "Prisma 7",    cat: "ORM",       icon: <PuzzleIcon /> },
    { name: "PostgreSQL",  cat: "Database",  icon: <DbIcon />, tone: "sage" },
    { name: "Socket.IO",   cat: "Realtime",  icon: <StreamIcon />, tone: "accent" },
    { name: "Next.js 16",  cat: "Frontend",  icon: <CircleIcon /> },
    { name: "Tailwind v4", cat: "Styling",   icon: <SquareIcon /> },
    { name: "TanStack Query", cat: "Data",   icon: <BarsIcon /> },
    { name: "Zustand",     cat: "State",     icon: <DotIcon /> },
    { name: "OpenAI gpt-4o", cat: "AI · gen", icon: <BoltIcon />, tone: "accent" },
    { name: "gpt-4o-mini", cat: "AI · verify", icon: <BoltIcon /> },
    { name: "JWT",         cat: "Auth",      icon: <LockIcon /> },
    { name: "Hostinger",   cat: "Hosting",   icon: <CloudIcon /> },
    { name: "PM2",         cat: "Process",   icon: <GearIcon /> },
    { name: "Nginx",       cat: "Proxy",     icon: <StreamIcon /> },
  ];

  return (
    <section id="kitabey" className="section" style={{paddingTop: 96, paddingBottom: 96}}>
      <div className="wrap">

        <div className="product-head">
          <div className="index">04 — Co-founded · sole engineer</div>
          <h2 className="product-name"><em>Kita</em>bey.</h2>
          <a className="visit" href="https://kitabey.com/" target="_blank" rel="noopener">
            <span>Visit site</span> <span className="arrow">↗</span>
          </a>
        </div>

        <div className="product-tag">
          <p className="pitch">
            AI-powered exam-prep intelligence for <em>JEE Main</em> &amp; <em>NEET UG</em> aspirants.
          </p>
          <p className="body">
            Co-founded in March 2026. I'm the sole engineer — backend infrastructure, real-time multiplayer systems, AI question pipeline, and the majority of the frontend. Live in production with a working analytics layer, three competitive game modes, and translation across thirteen Indian languages.
          </p>
        </div>

        {/* Hero shot — dashboard analytics */}
        <div className="product-opener">
          <Browser src="portfolio/img/kitabey-dashboard.png" alt="Kitabey dashboard with prep score and progress charts" url="kitabey.com/dashboard" />
          <div className="caption">
            <span>Dashboard · five-metric prep score · weighted weak-topic detection</span>
            <a href="https://kitabey.com/" target="_blank" rel="noopener">kitabey.com ↗</a>
          </div>
        </div>

        {/* Three modes — text + Arena screenshot */}
        <div style={{marginTop: 80}}>
          <div className="section-open">
            <div className="marker">Competitive surface</div>
            <div>
              <h3 style={{fontFamily: "var(--serif)", fontSize: "clamp(36px, 4.5vw, 60px)", lineHeight: 1, margin: 0, letterSpacing: "-0.02em", fontWeight: 400}}>Three multiplayer modes, one engine.</h3>
              <p className="lede">From async 1v1 to live five-player rooms — same shared scoring engine, same anti-cheat fingerprinting, three completely different shapes of play.</p>
            </div>
          </div>

          <div className="modes">
            <div className="mode">
              <div className="badge">Mode 01 · Async</div>
              <div className="ttl">1v1 Duels</div>
              <div className="desc">Two players, asynchronous turns. The simplest competitive surface — gateway to ranked play.</div>
              <div className="specs">
                <div className="spec-row"><span className="k">Players</span><span className="v">2</span></div>
                <div className="spec-row"><span className="k">Timing</span><span className="v">Asynchronous</span></div>
                <div className="spec-row"><span className="k">Dedup</span><span className="v">SHA-1 fingerprint</span></div>
              </div>
            </div>

            <div className="mode" style={{background: "color-mix(in oklab, var(--orange) 8%, var(--bg))"}}>
              <div className="badge">Mode 02 · Asymmetric</div>
              <div className="ttl">Arena</div>
              <div className="desc">ELO matchmaking. Attacker plays now; defender has a 48-hour window to defend their territory.</div>
              <div className="specs">
                <div className="spec-row"><span className="k">Matchmaking</span><span className="v">ELO-based</span></div>
                <div className="spec-row"><span className="k">Defense window</span><span className="v">48 hours</span></div>
                <div className="spec-row"><span className="k">Shape</span><span className="v">Asymmetric · territory</span></div>
              </div>
            </div>

            <div className="mode" style={{background: "color-mix(in oklab, var(--sage) 6%, var(--bg))"}}>
              <div className="badge">Mode 03 · Synchronous</div>
              <div className="ttl">Live Rooms</div>
              <div className="desc">Up to 5 players over Socket.IO. JWT-authenticated handshake, server-authoritative timing, in-memory state machine, awards engine.</div>
              <div className="specs">
                <div className="spec-row"><span className="k">Players</span><span className="v">Up to 5</span></div>
                <div className="spec-row"><span className="k">Transport</span><span className="v">Socket.IO + JWT</span></div>
                <div className="spec-row"><span className="k">Awards</span><span className="v">Champion · Speed Demon</span></div>
              </div>
            </div>
          </div>

          <div style={{marginTop: 36}}>
            <Browser src="portfolio/img/kitabey-arena.png" alt="Kitabey Arena mode — ELO rating and defender targeting" url="kitabey.com/dashboard/arena" />
            <div className="caption" style={{marginTop: 12, fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.08em", color: "var(--ink-3)", textTransform: "uppercase", display: "flex", justifyContent: "space-between"}}>
              <span>Arena · attack defenders on their strong topics · defend yours</span>
              <span>ELO rating · 977</span>
            </div>
          </div>
        </div>

        {/* AI pipeline — practice screenshot tells the story */}
        <div style={{marginTop: 96}}>
          <div className="section-open">
            <div className="marker">AI question generation</div>
            <div>
              <h3 style={{fontFamily: "var(--serif)", fontSize: "clamp(36px, 4.5vw, 60px)", lineHeight: 1, margin: 0, letterSpacing: "-0.02em", fontWeight: 400}}>Questions, generated live. <em className="italic-serif" style={{color: "var(--orange)"}}>Five at a time.</em></h3>
              <p className="lede">Two-stage pipeline: <span style={{fontFamily: "var(--mono)"}}>gpt-4o</span> drafts the question and solution; a deterministic numeric check (NAT) or <span style={{fontFamily: "var(--mono)"}}>gpt-4o-mini</span> verifier (MCQ) confirms it before it ever reaches a student.</p>
            </div>
          </div>

          <div className="spotlight">
            <div className="text">
              <div className="pre">Generation in progress</div>
              <h3>The pipeline, on screen.</h3>
              <p>
                The pill at the bottom-right says <span style={{fontFamily: "var(--mono)", color: "var(--orange)"}}>Generating (5/5)</span>. That's the practice session warming up the next batch of questions while you're still answering this one. Every call is logged with tokens, latency, and cost.
              </p>
              <p>
                Anti-staleness is handled by a SHA-1 fingerprint per concept — the same student never sees the same question across practice, duels, and arena. Vision-LLM extraction adds another layer: NTA's past papers are sliced into 3-page chunks (to defeat single-call truncation) and fed through a review queue with admin click-through in five seconds or less.
              </p>
            </div>
            <div>
              <Browser src="portfolio/img/kitabey-practice.png" alt="Kitabey practice session generating questions live" url="kitabey.com/practice" />
              <div style={{marginTop: 12, fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.08em", color: "var(--ink-3)", textTransform: "uppercase", display: "flex", justifyContent: "space-between"}}>
                <span>Gravitation · Q1 of 5 · medium</span>
                <span style={{color: "var(--orange)"}}>● generating 5/5</span>
              </div>
            </div>
          </div>
        </div>

        {/* State machine */}
        <div style={{marginTop: 80}}>
          <div className="section-open">
            <div className="marker">Live rooms · under the hood</div>
            <div>
              <h3 style={{fontFamily: "var(--serif)", fontSize: "clamp(36px, 4.5vw, 60px)", lineHeight: 1, margin: 0, letterSpacing: "-0.02em", fontWeight: 400}}>Server-authoritative, by design.</h3>
              <p className="lede">In-memory state machine on the Socket.IO server. Reconnects, kicks, locks and timeouts all collapse into the same five states.</p>
            </div>
          </div>
          <KitabeyStateMachine />
        </div>

        {/* Languages */}
        <div style={{marginTop: 96}}>
          <div className="section-open">
            <div className="marker">Reach</div>
            <div>
              <h3 style={{fontFamily: "var(--serif)", fontSize: "clamp(36px, 4.5vw, 60px)", lineHeight: 1, margin: 0, letterSpacing: "-0.02em", fontWeight: 400}}>Thirteen languages. <em className="italic-serif" style={{color: "var(--orange)"}}>One database.</em></h3>
              <p className="lede">Per-question translation storage, ISO-639-1 normalisation, runtime switching across mocks, practice, results — the part of the Indian exam-prep market the English-first incumbents leave open.</p>
            </div>
          </div>
          <KitabeyLanguages />
        </div>

        {/* Rank card — share story */}
        <div style={{marginTop: 96}}>
          <div className="section-open">
            <div className="marker">Built for sharing</div>
            <div>
              <h3 style={{fontFamily: "var(--serif)", fontSize: "clamp(36px, 4.5vw, 60px)", lineHeight: 1, margin: 0, letterSpacing: "-0.02em", fontWeight: 400}}>A rank card students <em className="italic-serif" style={{color: "var(--orange)"}}>actually want</em> to send.</h3>
              <p className="lede">Pre-formatted text for WhatsApp, X, LinkedIn, Facebook, Instagram. Built for the share loop — every shared card is a deep link back into a prep session.</p>
            </div>
          </div>

          <Browser src="portfolio/img/kitabey-rankcard.png" alt="Kitabey shareable rank card with strong and weak areas" url="kitabey.com/dashboard/rank-card" />
          <div className="caption" style={{marginTop: 12, fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.08em", color: "var(--ink-3)", textTransform: "uppercase", display: "flex", justifyContent: "space-between"}}>
            <span>Rank card · social-format share, one click</span>
            <span>WhatsApp · LinkedIn · X · Facebook · Instagram</span>
          </div>
        </div>

        {/* Mobile */}
        <div style={{marginTop: 96}}>
          <div className="section-open" style={{marginBottom: 32}}>
            <div className="marker">In the pocket</div>
            <h3 style={{fontFamily: "var(--serif)", fontSize: "clamp(32px, 4vw, 56px)", lineHeight: 1, margin: 0, letterSpacing: "-0.02em", fontWeight: 400}}>Responsive from the ground up.</h3>
          </div>

          <div className="phone-array">
            <div>
              <Phone src="portfolio/img/kitabey-mobile-mocks.png" alt="Kitabey mobile mock tests" />
              <div style={{marginTop: 16, fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.12em", color: "var(--ink-3)", textTransform: "uppercase", textAlign: "center"}}>Mock tests · JEE Main</div>
            </div>
            <div>
              <Phone src="portfolio/img/kitabey-mobile-battle.png" alt="Kitabey mobile battle / duels screen" />
              <div style={{marginTop: 16, fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.12em", color: "var(--ink-3)", textTransform: "uppercase", textAlign: "center"}}>Battle · 1v1 Duels</div>
            </div>
          </div>
        </div>

        {/* Auth / Admin notes */}
        <div className="split" style={{marginTop: 96}}>
          <div className="block">
            <div className="block-title">Auth · hardened surface</div>
            <ul style={{margin: 0, paddingLeft: 18, color: "var(--ink-2)", fontSize: 14, lineHeight: 1.7}}>
              <li>Global JWT guard with <code>@Public</code> / <code>@Open</code> decorators</li>
              <li>Refresh-token rotation, password-change + logout endpoints</li>
              <li>API-key middleware for public endpoints</li>
              <li>Soft-deletes propagate to JWT validation, analytics, friend suggestions</li>
              <li>Per-type email feature flags — ramp without code changes</li>
            </ul>
          </div>
          <div className="block">
            <div className="block-title">Admin tooling · same Next.js codebase</div>
            <ul style={{margin: 0, paddingLeft: 18, color: "var(--ink-2)", fontSize: 14, lineHeight: 1.7}}>
              <li>Upload-first CMS · one CSV auto-creates exams, sections, topics, questions</li>
              <li>Stratified-random mock-test assembly · per-section difficulty mix</li>
              <li>AI-cost dashboard · feature-flag console · PYQ review queue</li>
              <li>Single role-based admin UI living inside the player app</li>
            </ul>
          </div>
        </div>

        <div style={{marginTop: 56}}>
          <div className="stack-wall">
            {stack.map((s, i) => <StackCell key={i} {...s} />)}
          </div>
        </div>
      </div>
    </section>
  );
}

window.Kitabey = Kitabey;