/* global React, Icons,
   Block, H1, H2, H3, P, Muted, Code, Bullet, Todo, Divider,
   Callout, Toggle, Quote, CodeBlock, Columns, SubpageLink, AddComment,
   SlashHint, PropertyGrid, Tag, StatusPill, DBTable, Gallery */

// ─────────────── ABOUT ───────────────
const AboutPage = ({ go }) => (
  <>
    <div className="cover" style={{ backgroundImage: 'url("assets/cover.jpeg")' }}>
      <div className="cover-actions">
        <button>Change cover</button>
        <button>Reposition</button>
      </div>
    </div>
    <div className="page has-cover">
      <span className="icon-large">👋</span>
      <div className="page-meta-actions">
        <span>😀 Add icon</span>
        <span>🖼 Add cover</span>
        <span>💬 Add comment</span>
      </div>
      <h1 className="page-title">Hey, I'm Suryansh.</h1>

      <PropertyGrid rows={[
        { icon: <Icons.Type />, key: "Role",     value: <span><Tag color="purple">AI/ML Full Stack Engineer</Tag></span> },
        { icon: <Icons.Home />, key: "Based in", value: "Bhubaneswar, India" },
        { icon: <Icons.Clock />, key: "Status",  value: <StatusPill color="green">Open to opportunities · Jun 2026</StatusPill> },
        { icon: <Icons.Mail />, key: "Email",    value: <a href="mailto:suryansh.singh.5808@gmail.com">suryansh.singh.5808@gmail.com</a> },
        { icon: <Icons.Link />, key: "Links",    value: (
          <span style={{ display: 'flex', gap: 14, alignItems: 'center' }}>
            <a href="https://github.com/Suryansh1987" target="_blank" rel="noreferrer"
               style={{ display:'inline-flex', alignItems:'center', gap:5 }}><Icons.Github /> Suryansh1987</a>
            <a href="https://linkedin.com/in/suryansh-singh-972754242" target="_blank" rel="noreferrer"
               style={{ display:'inline-flex', alignItems:'center', gap:5 }}><Icons.Linkedin /> suryansh-singh</a>
          </span>
        )},
        { icon: <Icons.Doc />, key: "Pronouns", value: "he/him" },
        { icon: <Icons.Plus />, key: "Add a property", value: <span style={{color:'var(--n-text-faint)'}}>Empty</span> },
      ]} />

      <div className="blocks">
        <Callout icon="🛠️">
          Final-year CS undergrad at <b>KIIT University</b>, currently shipping multi-tenant SaaS and agentic AI systems
          as an <b>AI/ML Full Stack Engineer Intern</b> at Dyyota Tech (CodePup AI). Comfortable across the stack — from
          Postgres + Redis on the backend to Next.js on the frontend, with a special interest in LLM pipelines, RAG and
          agentic orchestration.
        </Callout>

        <H2>What I'm into</H2>
        <P>I like building things where the hardest part is the messy middle — distributed task queues, retry semantics,
          deduplication, prompt versioning, tenant isolation. Most of my work over the past year has been at the
          intersection of <Code>agentic AI</Code>, <Code>RAG</Code> and <Code>real-time systems</Code>.</P>

        <Columns cols={3}>
          <div className="skill-cluster">
            <h4>Currently</h4>
            <P>Working on a multi-tenant AEO automation engine processing 500+ URLs/day with self-healing retry queues.</P>
          </div>
          <div className="skill-cluster">
            <h4>Recently</h4>
            <P>Shipped a Voice AI Agent Platform — turn any website into a live voice Q&A in &lt; 2 minutes, ~600ms latency.</P>
          </div>
          <div className="skill-cluster">
            <h4>Up next</h4>
            <P>Graduating Apr 2026 and looking for a full-time engineering role on infra or applied AI teams.</P>
          </div>
        </Columns>

        <H2>Quick navigation</H2>
        <SubpageLink icon="💼" title="Experience"   onClick={() => go('experience')} />
        <SubpageLink icon="🚀" title="Projects"     onClick={() => go('projects')} />
        <SubpageLink icon="🧠" title="Skills"       onClick={() => go('skills')} />
        <SubpageLink icon="🎓" title="Education"    onClick={() => go('education')} />
        <SubpageLink icon="📬" title="Get in touch" onClick={() => go('contact')} />

        <Divider />

        <H2>A short FAQ</H2>
        <Toggle summary="What kind of role am I looking for?" defaultOpen>
          <p>Full-time engineering, ideally on a team that builds something with <b>real complexity</b> behind the API — distributed
            systems, search/retrieval infra, AI tooling, developer platforms. I want to keep working across the full
            stack but go deeper on backend + infra.</p>
        </Toggle>
        <Toggle summary="Where can I work from?">
          <p>I'm based in Bhubaneswar but happy to relocate within India or work remotely across time zones. I've done both
            of my internships fully remote and shipped to production from day one.</p>
        </Toggle>
        <Toggle summary="What's my favorite part of the stack?">
          <p>The part where business logic meets the database. I get unreasonably excited about idempotency keys,
            queue semantics, dedup strategies, and "what happens if this LLM call times out at retry #3" failure modes.</p>
          <ul>
            <li>Backend favorites: <Code>FastAPI</Code>, <Code>Postgres</Code>, <Code>Redis</Code>, <Code>Pub/Sub</Code></li>
            <li>LLM stack: <Code>LangGraph</Code>, <Code>Pinecone</Code>, <Code>RAGAS</Code></li>
            <li>Frontend: <Code>Next.js</Code> + <Code>React</Code> when I have to; <Code>Tailwind</Code> for speed</li>
          </ul>
        </Toggle>
        <Toggle summary="What am I reading / watching right now?">
          <p>A lot of papers on retrieval evaluation and agent eval harnesses. Recently: thinking about how to make
            agent benchmarks reproducible across model versions.</p>
        </Toggle>

        <AddComment />
        <SlashHint />
      </div>
    </div>
  </>
);

// ─────────────── EXPERIENCE ───────────────
const ExperiencePage = () => (
  <div className="page">
    <span className="icon-large">💼</span>
    <div className="page-meta-actions">
      <span>😀 Add icon</span>
      <span>🖼 Add cover</span>
      <span>💬 Add comment</span>
    </div>
    <h1 className="page-title">Experience</h1>
    <P><Muted>A running log of every role, scrappy gig and intern stint. Hover a row to inspect.</Muted></P>

    <DBTable
      views={[
        { icon: <Icons.Templates />, label: "Roles" },
        { icon: <Icons.Calendar />, label: "Timeline" },
      ]}
      activeView={0}
      columns={[
        { key: "company", label: "Company", icon: <Icons.Type />, width: "26%",
          render: (r) => <div className="row-title"><span className="pico">{r.icon}</span><a>{r.company}</a></div> },
        { key: "role", label: "Role", icon: <Icons.Templates />, width: "24%" },
        { key: "period", label: "Period", icon: <Icons.Calendar />, width: "18%",
          render: (r) => <span style={{color:'var(--n-text-sec)'}}>{r.period}</span> },
        { key: "status", label: "Status", icon: <Icons.Filter />, width: "13%",
          render: (r) => <StatusPill color={r.statusColor}>{r.status}</StatusPill> },
        { key: "stack", label: "Stack", icon: <Icons.Type />,
          render: (r) => <div className="tag-cell">{r.stack.map((s, i) => <Tag key={i} color={s.c}>{s.t}</Tag>)}</div> },
      ]}
      rows={[
        {
          icon: "🟣",
          company: "Dyyota Tech · CodePup AI",
          role: "AI/ML Full Stack Engineer Intern",
          period: "Jun 2025 — Present",
          status: "Current", statusColor: "green",
          stack: [
            { t: "Azure", c: "blue" }, { t: "Service Bus", c: "blue" },
            { t: "Python", c: "yellow" }, { t: "Next.js", c: "gray" },
            { t: "LLMs", c: "purple" }
          ],
        },
        {
          icon: "🔵",
          company: "Akatsuki Intelligence",
          role: "Full Stack Engineer Intern",
          period: "Jan 2026 — Feb 2026",
          status: "Completed", statusColor: "gray",
          stack: [
            { t: "FastAPI", c: "green" }, { t: "GCP", c: "blue" },
            { t: "PostgreSQL", c: "blue" }, { t: "Redis", c: "red" },
            { t: "Pub/Sub", c: "purple" }
          ],
        },
      ]}
      calc="Sum spans · ~12 months engineering experience"
    />

    <H2>Role notes</H2>
    <P><Muted>Click to expand. Each toggle has the unsanitized version of what I actually did.</Muted></P>

    <Toggle summary="🟣  Dyyota Tech (CodePup AI) — AI/ML Full Stack Engineer Intern" defaultOpen>
      <p><b>Jun 2025 — Present · Remote</b></p>
      <ul>
        <li><b>Multi-tenant SaaS backend</b> on Azure Container Apps with microservices, distributed task queues (Azure Service Bus), and horizontal auto-scaling. CI/CD via GitHub Actions for zero-downtime deploys. <b>99.5% uptime</b>, <b>95% deployment success rate</b> in production.</li>
        <li><b>Agentic AEO automation engine</b> in Python processing <b>500+ URLs/day</b> — async task queues, LLM-powered content analysis, self-healing retry logic, and a <Code>UrlPromptCache</Code> layer that eliminates redundant LLM calls. <b>1,000+ ops/hour</b> throughput, <b>85% reduction</b> in manual audit effort.</li>
        <li>Full-stack interfaces in <Code>Next.js</Code> + <Code>React</Code> for multi-tenant onboarding and real-time dashboards. Reusable component architecture + state patterns across tenant-isolated UI surfaces.</li>
      </ul>
    </Toggle>

    <Toggle summary="🔵  Akatsuki Intelligence — Full Stack Engineer Intern">
      <p><b>Jan 2026 — Feb 2026 · Remote</b></p>
      <ul>
        <li>Built a <b>distributed multi-tenant AI pipeline</b> with FastAPI on GCP (Cloud Run, Cloud Scheduler, Pub/Sub), orchestrating LLM batch processing for <b>10K+ articles/day</b>.</li>
        <li>Postgres as primary store with Redis dedup → <b>99% duplicate elimination</b>.</li>
        <li>Integrated 3rd-party Slack + email delivery APIs, cutting manual effort by <b>60%</b>.</li>
      </ul>
    </Toggle>

    <AddComment />
  </div>
);

// ─────────────── PROJECTS (gallery + sub-pages) ───────────────
const ProjectsPage = ({ go }) => (
  <div className="page">
    <span className="icon-large">🚀</span>
    <div className="page-meta-actions">
      <span>😀 Add icon</span>
      <span>🖼 Add cover</span>
      <span>💬 Add comment</span>
    </div>
    <h1 className="page-title">Projects</h1>
    <P><Muted>Things I've built end-to-end. Click any card to open the project's page.</Muted></P>

    <Gallery
      views={[
        { icon: <Icons.Templates />, label: "Gallery" },
        { icon: <Icons.Filter />, label: "Board" },
        { icon: <Icons.Type />, label: "List" },
      ]}
      activeView={0}
      cards={[
        {
          glyph: "CP",
          icon: "🐶",
          preview: "pink",
          title: "CodePup.ai",
          subtitle: "Lovable alternative — prompt-to-app builder that ships full-stack web apps from a natural-language brief. Live in production.",
          tags: [
            { color: "pink",   label: "Lovable alt" },
            { color: "gray",   label: "Next.js" },
            { color: "yellow", label: "Python" },
            { color: "blue",   label: "Azure" },
          ],
          onClick: () => go('proj-codepup'),
        },
        {
          glyph: "AEO",
          icon: "⚙️",
          preview: "yellow",
          title: "AEO Automation Engine",
          subtitle: "aeo.codepup.ai — distributed Python backend with async task queues, cron, LLM analysis and self-healing retries at 1,000+ brands/hr.",
          tags: [
            { color: "yellow", label: "Python" },
            { color: "green",  label: "FastAPI" },
            { color: "blue",   label: "GCP" },
            { color: "orange", label: "Docker" },
          ],
          onClick: () => go('proj-aeo'),
        },
        {
          glyph: "RAG",
          icon: "📚",
          preview: "purple",
          title: "Multimodal RAG System",
          subtitle: "Agentic RAG with LLM-based query router, 50 parallel embed workers, RAGAS eval — ~95% retrieval accuracy.",
          tags: [
            { color: "yellow", label: "Python" },
            { color: "green", label: "FastAPI" },
            { color: "purple", label: "LangGraph" },
            { color: "blue", label: "Pinecone" },
          ],
          onClick: () => go('proj-rag'),
        },
        {
          glyph: "VOX",
          icon: "🎙️",
          preview: "green",
          title: "Voice AI Agent Platform",
          subtitle: "Turn any website into a live voice Q&A agent in <2 min. WebRTC routing, ~600ms response latency.",
          tags: [
            { color: "gray", label: "Next.js" },
            { color: "green", label: "Express" },
            { color: "blue", label: "PostgreSQL" },
            { color: "red", label: "Redis" },
          ],
          onClick: () => go('proj-voice'),
        },
      ]}
    />

    <AddComment />
  </div>
);

// ─── CodePup.ai — Lovable alternative
const CodePupProjectPage = () => (
  <div className="page">
    <span className="icon-large">🐶</span>
    <h1 className="page-title">CodePup.ai</h1>
    <PropertyGrid rows={[
      { icon: <Icons.Filter />,   key: "Status", value: <StatusPill color="green">Live in production</StatusPill> },
      { icon: <Icons.External />, key: "Live",   value: <a href="https://codepup.ai" target="_blank" rel="noreferrer">codepup.ai ↗</a> },
      { icon: <Icons.Calendar />, key: "Built",  value: "2025 — Present" },
      { icon: <Icons.Templates />, key: "Category", value: <Tag color="pink">Lovable alternative · AI app builder</Tag> },
      { icon: <Icons.Type />, key: "Tech", value: (
        <div className="tag-cell" style={{display:'flex', flexWrap:'wrap', gap:4}}>
          <Tag color="gray">Next.js</Tag><Tag color="purple">React</Tag>
          <Tag color="yellow">Python</Tag><Tag color="green">FastAPI</Tag>
          <Tag color="blue">Azure</Tag><Tag color="blue">Service Bus</Tag>
          <Tag color="purple">LLMs</Tag><Tag color="blue">PostgreSQL</Tag>
        </div>
      )},
      { icon: <Icons.Doc />, key: "My role", value: "AI/ML Full Stack Engineer · core team @ Dyyota Tech" },
    ]} />

    <Callout icon="🐶" color="pink">
      <b>What it is.</b> A prompt-to-app builder — same shape as Lovable / v0 / Bolt. Describe what you want,
      CodePup generates and deploys a working full-stack app you can iterate on by talking to it.
      Live at <a href="https://codepup.ai" target="_blank" rel="noreferrer"
        style={{borderBottom:'1px solid var(--n-text-faint)'}}>codepup.ai</a>.
    </Callout>

    <H2>What I worked on</H2>
    <Bullet><b>Multi-tenant SaaS backend</b> on Azure Container Apps — microservices, distributed task queues via Azure Service Bus, horizontal auto-scaling.</Bullet>
    <Bullet><b>Zero-downtime CI/CD</b> via GitHub Actions → <b>99.5% uptime</b>, <b>95% deploy success rate</b> across a high-volume production user base.</Bullet>
    <Bullet><b>LLM-driven generation pipeline</b> — agentic codegen with retry semantics, prompt versioning, and per-tenant isolation so one user's project can't bleed into another's.</Bullet>
    <Bullet><b>Next.js + React frontend</b> for tenant onboarding, real-time generation dashboards, and the in-app editor. Reusable component architecture across tenant-isolated UI surfaces.</Bullet>

    <H2>Positioning</H2>
    <DBTable
      views={[{ icon: <Icons.Templates />, label: "Comparison" }]}
      activeView={0}
      columns={[
        { key: "name", label: "Tool", icon: <Icons.Type />, width: "24%",
          render: (r) => <div className="row-title"><span className="pico">{r.icon}</span>{r.name}</div> },
        { key: "focus", label: "Focus", icon: <Icons.Doc /> },
        { key: "diff",  label: "How CodePup is different", icon: <Icons.Type /> },
      ]}
      rows={[
        { icon: "💜", name: "Lovable",  focus: "Web apps from prompts",          diff: "CodePup ships a tenant-isolated runtime + AEO integration out of the box." },
        { icon: "⚡", name: "v0",       focus: "UI generation",                    diff: "CodePup generates full stack — backend, DB, auth — not just frontend." },
        { icon: "🟢", name: "Bolt.new", focus: "In-browser dev environments",      diff: "CodePup deploys to its own managed cloud; users don't manage infra." },
      ]}
    />

    <H2>Sister product</H2>
    <SubpageLink icon="⚙️" title="AEO Automation Engine — aeo.codepup.ai" />
    <P><Muted>The AEO engine runs alongside CodePup for users who want their generated sites continuously audited and optimized for AI/answer-engine visibility.</Muted></P>

    <AddComment />
  </div>
);

// ─── Project sub-pages
const RAGProjectPage = () => (
  <div className="page">
    <span className="icon-large">📚</span>
    <h1 className="page-title">Multimodal RAG System</h1>
    <PropertyGrid rows={[
      { icon: <Icons.Filter />, key: "Status",  value: <StatusPill color="green">Shipped</StatusPill> },
      { icon: <Icons.Calendar />, key: "Built",  value: "2025" },
      { icon: <Icons.Type />, key: "Tech",    value: (
        <div className="tag-cell" style={{display:'flex', flexWrap:'wrap', gap:4}}>
          <Tag color="yellow">Python</Tag><Tag color="green">FastAPI</Tag>
          <Tag color="blue">Azure OpenAI</Tag><Tag color="purple">LangChain</Tag>
          <Tag color="purple">LangGraph</Tag><Tag color="blue">Pinecone</Tag>
          <Tag color="orange">RAGAS</Tag>
        </div>
      )},
      { icon: <Icons.Templates />, key: "Domain", value: <Tag color="purple">Applied AI · Retrieval</Tag> },
    ]} />

    <Callout icon="🎯" color="purple">
      <b>The goal.</b> Production-grade agentic RAG over heterogeneous sources (PDF, web, CSV/Excel) with traceable
      evaluation and a query router that decomposes complex questions instead of pretending they're simple.
    </Callout>

    <H2>What I built</H2>
    <Bullet><b>LLM-based query router</b> that decomposes complex queries into 2–4 optimized sub-queries across PDF, web, and CSV/Excel sources.</Bullet>
    <Bullet><b>50 parallel embedding workers</b> under semaphore control → <b>~60% faster ingestion</b>.</Bullet>
    <Bullet><b>LangSmith + RAGAS</b> integration for traceable, reproducible eval → <b>~95% retrieval accuracy</b>, <b>~40% deeper answers</b>.</Bullet>
    <Bullet><b>LLM feedback loops</b> for self-reflection scoring, hallucination detection, and prompt refinement pipelines.</Bullet>
    <Bullet>Prompt versioning + performance QA across multi-source financial and document-heavy retrieval workflows.</Bullet>

    <H2>The architecture, briefly</H2>
    <CodeBlock lang="text">
{`Query → ┌─────────────┐    ┌───────────┐
        │ LLM router  │──▶ │ Sub-Q × N │── parallel
        └─────────────┘    └─────┬─────┘
                                 ▼
       ┌── pdf ───┐    ┌── web ───┐    ┌── csv ───┐
       │ Pinecone │    │ Pinecone │    │ Pinecone │
       └────┬─────┘    └─────┬────┘    └────┬─────┘
            └────── merge & rerank ─────────┘
                              ▼
                  ┌──── self-reflection ────┐
                  │ hallucination · grading │
                  └────────────┬────────────┘
                               ▼
                            Answer`}
    </CodeBlock>

    <H2>What I learned</H2>
    <Quote>Most RAG systems don't fail at retrieval — they fail at <b>knowing</b> they failed at retrieval. RAGAS + structured self-reflection bought us real ground truth.</Quote>
    <AddComment />
  </div>
);

const VoiceProjectPage = () => (
  <div className="page">
    <span className="icon-large">🎙️</span>
    <h1 className="page-title">Voice AI Agent Platform</h1>
    <PropertyGrid rows={[
      { icon: <Icons.Filter />, key: "Status",  value: <StatusPill color="green">Shipped</StatusPill> },
      { icon: <Icons.Calendar />, key: "Built",  value: "2025" },
      { icon: <Icons.Type />, key: "Tech",    value: (
        <div className="tag-cell" style={{display:'flex', flexWrap:'wrap', gap:4}}>
          <Tag color="gray">Next.js</Tag><Tag color="purple">React</Tag>
          <Tag color="blue">TypeScript</Tag><Tag color="green">Node.js</Tag>
          <Tag color="green">Express</Tag><Tag color="blue">PostgreSQL</Tag>
          <Tag color="red">Redis</Tag><Tag color="blue">Pinecone</Tag>
        </div>
      )},
      { icon: <Icons.Templates />, key: "Domain", value: <Tag color="green">Real-time · Voice AI</Tag> },
    ]} />

    <Callout icon="⚡" color="green">
      <b>The pitch.</b> Paste a URL → in under 2 minutes, a live voice agent answers questions about that site, in real time, with
      sub-second latency. Multi-tenant, isolated knowledge bases per customer.
    </Callout>

    <H2>Highlights</H2>
    <Bullet>Live Q&A voice agent in <b>&lt; 2 min</b> per site, with isolated <b>per-tenant</b> knowledge bases.</Bullet>
    <Bullet><b>~600ms response latency</b> via WebRTC direct browser-to-model routing with server-side VAD.</Bullet>
    <Bullet>Concurrent TS web crawler — <b>5-way parallel fetching</b>, LRU-cached OpenAI embeddings, Pinecone vector storage.</Bullet>
    <Bullet>Ingests a <b>20-page site in ~30 seconds</b>.</Bullet>
    <Bullet>REST API gateway tying together auth, embedding, and retrieval services end-to-end.</Bullet>

    <H2>Latency budget</H2>
    <DBTable
      views={[{ icon: <Icons.Templates />, label: "Budget" }]}
      activeView={0}
      columns={[
        { key: "stage", label: "Stage", icon: <Icons.Type />, width: "40%",
          render: (r) => <div className="row-title">{r.stage}</div> },
        { key: "budget", label: "Budget", icon: <Icons.Clock />, width: "20%" },
        { key: "note", label: "Notes", icon: <Icons.Doc /> },
      ]}
      rows={[
        { stage: "VAD + capture",       budget: "~80 ms",  note: "server-side voice activity detection" },
        { stage: "Embed + retrieve",    budget: "~140 ms", note: "Pinecone top-K with LRU cache front" },
        { stage: "LLM streaming start", budget: "~280 ms", note: "WebRTC bypasses our backend on hot path" },
        { stage: "First audio token",   budget: "~100 ms", note: "TTS streamed back to client" },
      ]}
    />
    <AddComment />
  </div>
);

const AEOProjectPage = () => (
  <div className="page">
    <span className="icon-large">⚙️</span>
    <h1 className="page-title">AEO Automation Engine</h1>
    <PropertyGrid rows={[
      { icon: <Icons.Filter />,   key: "Status", value: <StatusPill color="green">In production</StatusPill> },
      { icon: <Icons.External />, key: "Live",   value: <a href="https://aeo.codepup.ai" target="_blank" rel="noreferrer">aeo.codepup.ai ↗</a> },
      { icon: <Icons.Calendar />, key: "Built",  value: "2025" },
      { icon: <Icons.Type />, key: "Tech",    value: (
        <div className="tag-cell" style={{display:'flex', flexWrap:'wrap', gap:4}}>
          <Tag color="yellow">Python</Tag><Tag color="green">FastAPI</Tag>
          <Tag color="blue">PostgreSQL</Tag><Tag color="red">Redis</Tag>
          <Tag color="purple">Async Queues</Tag><Tag color="blue">GCP</Tag>
          <Tag color="orange">Docker</Tag>
        </div>
      )},
      { icon: <Icons.Templates />, key: "Domain", value: <Tag color="orange">Distributed systems</Tag> },
    ]} />

    <Callout icon="🛠️" color="yellow">
      <b>The system.</b> A Python automation backend that audits 500+ URLs per day with async task queues, cron scheduling,
      and self-healing retry logic. Built for a multi-tenant SaaS — brand isolation, prompt caching, and retry semantics.
    </Callout>

    <H2>Numbers</H2>
    <Columns cols={3}>
      <div className="skill-cluster"><h4>Throughput</h4><P><b>1,000+</b> brands/hour at peak.</P></div>
      <div className="skill-cluster"><h4>Manual effort cut</h4><P><b>85%</b> reduction in audit time.</P></div>
      <div className="skill-cluster"><h4>LLM call savings</h4><P>Prompt cache eliminates <b>~70%</b> of duplicate calls.</P></div>
    </Columns>

    <H2>Design notes</H2>
    <Bullet>Async task queues + cron-based scheduling instead of one big synchronous job — failure of one URL doesn't break the batch.</Bullet>
    <Bullet>Self-healing retry queues with exponential backoff. Permanently-failed jobs land in a poison queue for manual review.</Bullet>
    <Bullet><Code>UrlPromptCache</Code> — keyed on <Code>(url_hash, prompt_template_version)</Code> with TTL eviction. Cuts cost and latency.</Bullet>
    <Bullet>PostgreSQL is the system of record; Redis is purely cache + ephemeral queue state.</Bullet>
    <AddComment />
  </div>
);

// ─────────────── SKILLS ───────────────
const SkillsPage = () => (
  <div className="page">
    <span className="icon-large">🧠</span>
    <h1 className="page-title">Skills</h1>
    <P><Muted>Roughly grouped. Bigger tag = I'd reach for it without thinking.</Muted></P>

    <Callout icon="🧭" color="blue">
      My comfort zone is the boring-but-load-bearing layer of an application: workers, queues, schedulers, caches,
      idempotency, and the data model. Everything else is in service of that.
    </Callout>

    <Columns cols={2}>
      <div className="skill-cluster">
        <h4>🐍 Programming languages</h4>
        <div className="tag-row">
          <Tag color="yellow">Python</Tag><Tag color="blue">TypeScript</Tag><Tag color="purple">Go</Tag>
          <Tag color="orange">Java</Tag><Tag color="green">SQL</Tag><Tag color="red">C++</Tag>
          <Tag color="gray">JavaScript</Tag><Tag color="brown">HTML/CSS</Tag>
        </div>
      </div>
      <div className="skill-cluster">
        <h4>🤖 AI / ML &amp; GenAI</h4>
        <div className="tag-row">
          <Tag color="purple">LLMs</Tag><Tag color="purple">RAG</Tag><Tag color="purple">Agentic AI</Tag>
          <Tag color="blue">NLP</Tag><Tag color="green">Vector DBs</Tag><Tag color="orange">Prompt Eng</Tag>
          <Tag color="yellow">Fine-Tuning</Tag><Tag color="pink">HuggingFace</Tag>
        </div>
      </div>
      <div className="skill-cluster">
        <h4>📦 Frameworks &amp; libraries</h4>
        <div className="tag-row">
          <Tag color="green">FastAPI</Tag><Tag color="green">Flask</Tag><Tag color="green">Express.js</Tag>
          <Tag color="purple">LangChain</Tag><Tag color="purple">LlamaIndex</Tag>
          <Tag color="purple">LangGraph</Tag><Tag color="purple">CrewAI</Tag>
          <Tag color="gray">Next.js</Tag><Tag color="blue">React</Tag><Tag color="green">Node.js</Tag>
          <Tag color="red">PyTorch</Tag><Tag color="yellow">Scikit-Learn</Tag><Tag color="yellow">Pandas</Tag>
        </div>
      </div>
      <div className="skill-cluster">
        <h4>☁️ Cloud &amp; deployment</h4>
        <div className="tag-row">
          <Tag color="orange">AWS</Tag><Tag color="orange">Lambda</Tag><Tag color="orange">EC2</Tag>
          <Tag color="orange">RDS</Tag><Tag color="blue">GCP</Tag><Tag color="blue">Azure</Tag>
          <Tag color="blue">Docker</Tag><Tag color="purple">Kubernetes</Tag>
          <Tag color="gray">GitHub Actions</Tag><Tag color="green">REST APIs</Tag>
          <Tag color="green">Microservices</Tag><Tag color="yellow">OAuth</Tag>
        </div>
      </div>
      <div className="skill-cluster">
        <h4>🗃️ Databases &amp; real-time</h4>
        <div className="tag-row">
          <Tag color="blue">PostgreSQL</Tag><Tag color="red">Redis</Tag>
          <Tag color="green">MongoDB</Tag><Tag color="blue">Pinecone</Tag>
          <Tag color="purple">FAISS</Tag><Tag color="orange">Apache Kafka</Tag>
          <Tag color="green">Real-Time Processing</Tag><Tag color="yellow">Pub/Sub</Tag>
          <Tag color="purple">Event-Driven</Tag>
        </div>
      </div>
      <div className="skill-cluster">
        <h4>🧪 Coursework</h4>
        <div className="tag-row">
          <Tag color="gray">Data Structures</Tag><Tag color="gray">Algorithms</Tag>
          <Tag color="gray">Operating Systems</Tag><Tag color="gray">Distributed Systems</Tag>
          <Tag color="gray">Databases</Tag><Tag color="gray">AI</Tag>
          <Tag color="gray">Machine Learning</Tag><Tag color="gray">NLP</Tag>
        </div>
      </div>
    </Columns>

    <AddComment />
  </div>
);

// ─────────────── EDUCATION ───────────────
const EducationPage = () => (
  <div className="page">
    <span className="icon-large">🎓</span>
    <h1 className="page-title">Education</h1>

    <Callout icon="🏫">
      <b>KIIT University, Bhubaneswar</b><br />
      Bachelor of Technology, Computer Science and Engineering · <b>GPA 8.67</b> · Aug 2022 – Apr 2026
    </Callout>

    <H2>Relevant coursework</H2>
    <Columns cols={2}>
      <div>
        <Bullet>Data Structures &amp; Algorithms</Bullet>
        <Bullet>Operating Systems</Bullet>
        <Bullet>Distributed Systems</Bullet>
        <Bullet>Databases</Bullet>
      </div>
      <div>
        <Bullet>Artificial Intelligence</Bullet>
        <Bullet>Machine Learning</Bullet>
        <Bullet>Natural Language Processing</Bullet>
        <Bullet>Computer Networks</Bullet>
      </div>
    </Columns>

    <H2>Notes from the last four years</H2>
    <Toggle summary="📝 Year 1 — getting fluent in the basics">
      <p>C++, DSA grind, and slowly realizing the parts of CS that actually stick with me are systems-shaped.</p>
    </Toggle>
    <Toggle summary="📝 Year 2 — the web stack year">
      <p>First real backends in Node/Express, a lot of toy projects, and figuring out databases beyond SELECT *.</p>
    </Toggle>
    <Toggle summary="📝 Year 3 — AI/ML, but with engineering rigor">
      <p>Started shipping production-shaped systems alongside coursework. RAG, embeddings, queues, retries.
      Most of my projects on this page were started this year.</p>
    </Toggle>
    <Toggle summary="📝 Year 4 — focus + interview prep" defaultOpen>
      <p>Currently splitting time between work at <b>Dyyota Tech</b> and graduating cleanly in April 2026.</p>
    </Toggle>

    <AddComment />
  </div>
);

// ─────────────── CONTACT ───────────────
const ContactPage = () => (
  <div className="page">
    <span className="icon-large">📬</span>
    <h1 className="page-title">Get in touch</h1>

    <Callout icon="✉️" color="blue">
      The fastest way to reach me is <b>email</b>. I usually reply within a day. If you're hiring or want to collaborate
      on something interesting (especially around LLM infra, RAG, or real-time AI), please mention what you're working on.
    </Callout>

    <Columns cols={2}>
      <div className="skill-cluster">
        <h4><Icons.Mail /> Email</h4>
        <P><a href="mailto:suryansh.singh.5808@gmail.com" style={{borderBottom:'1px solid var(--n-text-faint)'}}>suryansh.singh.5808@gmail.com</a></P>
      </div>
      <div className="skill-cluster">
        <h4><Icons.Clock /> Phone</h4>
        <P>+91 84232 80190 <Muted>· IST · prefer text first</Muted></P>
      </div>
      <div className="skill-cluster">
        <h4><Icons.Github /> GitHub</h4>
        <P><a href="https://github.com/Suryansh1987" target="_blank" rel="noreferrer" style={{borderBottom:'1px solid var(--n-text-faint)'}}>github.com/Suryansh1987</a></P>
      </div>
      <div className="skill-cluster">
        <h4><Icons.Linkedin /> LinkedIn</h4>
        <P><a href="https://linkedin.com/in/suryansh-singh-972754242" target="_blank" rel="noreferrer" style={{borderBottom:'1px solid var(--n-text-faint)'}}>suryansh-singh-972754242</a></P>
      </div>
    </Columns>

    <H2>What I respond to fastest</H2>
    <Todo done>Job opportunities (esp. backend / applied AI / infra)</Todo>
    <Todo done>Collaboration on open-source LLM tooling</Todo>
    <Todo done>Coffee chats with builders working on hard infra problems</Todo>
    <Todo>Cold sales pitches</Todo>

    <AddComment />
  </div>
);

// ─────────────── RESUME ───────────────
const ResumePage = () => (
  <div className="page">
    <span className="icon-large">📄</span>
    <h1 className="page-title">Résumé</h1>
    <P><Muted>The plain-text version — same content as the rest of this workspace, condensed onto one page.</Muted></P>

    <Callout icon="⬇️">
      <b>Looking for the PDF?</b> <a href="uploads/suryansh_general.pdf" target="_blank" rel="noreferrer"
        style={{borderBottom: '1px solid var(--n-text-faint)'}}>Download suryansh_general.pdf</a>
    </Callout>

    <H2>Suryansh Singh</H2>
    <P><Muted>suryansh.singh.5808@gmail.com · +91-8423280190 · linkedin.com/in/suryansh-singh-972754242 · github.com/Suryansh1987</Muted></P>

    <H3>Education</H3>
    <P><b>KIIT University, Bhubaneswar</b> — B.Tech, Computer Science &amp; Engineering · GPA 8.67 · Aug 2022 – Apr 2026</P>

    <H3>Experience</H3>
    <P><b>Dyyota Tech (CodePup AI)</b> — AI/ML Full Stack Engineer Intern · Jun 2025 – Present · Remote</P>
    <Bullet>Multi-tenant SaaS backend on Azure (Container Apps, Service Bus), zero-downtime CI/CD, 99.5% uptime.</Bullet>
    <Bullet>Agentic AEO automation engine — 500+ URLs/day, 1,000+ ops/hour, 85% manual-effort reduction.</Bullet>
    <Bullet>Next.js + React multi-tenant frontends with reusable component architecture.</Bullet>

    <P><b>Akatsuki Intelligence</b> — Full Stack Engineer Intern · Jan 2026 – Feb 2026 · Remote</P>
    <Bullet>FastAPI on GCP (Cloud Run, Pub/Sub) — LLM batch for 10K+ articles/day; 99% dedup via Redis.</Bullet>

    <H3>Projects</H3>
    <P><b>Multimodal RAG System</b> — Agentic RAG, LLM query router, RAGAS eval, ~95% retrieval accuracy.</P>
    <P><b>Voice AI Agent Platform</b> — Live voice Q&amp;A for any site, ~600ms latency, multi-tenant.</P>
    <P><b>AEO Automation Engine</b> — Distributed Python backend, async queues, 1,000+ brands/hour scale.</P>

    <AddComment />
  </div>
);

Object.assign(window, {
  AboutPage, ExperiencePage, ProjectsPage,
  RAGProjectPage, VoiceProjectPage, AEOProjectPage, CodePupProjectPage,
  SkillsPage, EducationPage, ContactPage, ResumePage
});