/* eslint-disable */
/* global React, Section, Eyebrow, Ruler, NumCell, StatCell, StackCell */

/* ============================================================
   HERO + NUMBERS + TIMELINE
   ============================================================ */

function Nav() {
  return (
    <nav className="nav">
      <div className="nav-inner">
        <div className="nav-mono">ARSHDEEP SINGH</div>
        <div className="nav-links">
          <a href="#work">Work</a>
          <a href="#nightmarexi">NightmareXI</a>
          <a href="#kitabey">Kitabey</a>
          <a href="#expm">EXPM</a>
          <a href="#contact">Contact</a>
        </div>
      </div>
    </nav>
  );
}

function Hero() {
  return (
    <section className="section hero" style={{borderTop: 0, paddingTop: 80, paddingBottom: 96}}>
      <div className="wrap">
        <div style={{fontFamily: "var(--mono)", fontSize: 12, letterSpacing: "0.16em", color: "var(--ink-3)", textTransform: "uppercase", marginBottom: 32}}>
          Senior Software Developer · Delhi
        </div>

        <h1 className="hero-name" style={{margin: 0}}>
          Arshdeep<br/>
          Singh<span className="small">est. 2018</span>
        </h1>

        <div style={{display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, marginTop: 64, alignItems: "end"}}>
          <p style={{fontFamily: "var(--serif)", fontSize: "clamp(22px, 2.4vw, 34px)", lineHeight: 1.22, margin: 0, maxWidth: "32ch"}}>
            Backend-leaning full-stack engineer. I design <em className="italic-serif" style={{color: "var(--orange)"}}>distributed systems</em>, ship them solo, and keep them alive in production.
          </p>
          <p style={{fontSize: 15, lineHeight: 1.65, margin: 0, maxWidth: "44ch", color: "var(--ink-2)"}}>
            Three years in the NestJS / TypeScript ecosystem — a Senior Software Developer at EXPM Learning by day, and the lone engineer behind two live consumer products by night. Pages below are the long version.
          </p>
        </div>
      </div>
    </section>
  );
}

/* -------- By the numbers — reduced to three editorial moments -------- */
function Numbers() {
  return (
    <section className="section" style={{paddingTop: 72, paddingBottom: 72}}>
      <div className="wrap">
        <div className="section-open">
          <div className="marker">01 — At a glance</div>
          <div>
            <h2 className="heading">Three years, two products, <em>nine</em> systems.</h2>
          </div>
        </div>

        <div className="bignums">
          <div className="bignum">
            <div className="pre">Production incident · EXPM</div>
            <div className="figure accent">43,424</div>
            <div className="caption">Orphan calendar events drained in two cleanup passes, ~5 hours, zero recurrence.</div>
          </div>
          <div className="bignum">
            <div className="pre">Multi-region video infra · EXPM</div>
            <div className="figure">&lt;1<span className="unit">hr</span></div>
            <div className="caption">Recording playback failover from IN to AU when the production VM crashed.</div>
          </div>
          <div className="bignum">
            <div className="pre">T20 World Cup 2024 · NightmareXI</div>
            <div className="figure sage">642</div>
            <div className="caption">Fantasy teams from 158 users across 50+ matches; peak 83 for IND vs PAK.</div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* -------- Career timeline -------- */
function Timeline() {
  const items = [
    { yr: "2022", role: "Junior Developer", co: "3WaySecure / Pathian Labs", desc: "Shopify tax-filing app. NestJS + MongoDB. First production reps.", cls: "" },
    { yr: "2023", role: "SDE 1", co: "SOSH", desc: "Four microservices in an Nx monorepo. Built the Review service — the platform's primary USP.", cls: "" },
    { yr: "2023", role: "SDE 1", co: "FuelGrowth", desc: "NestJS backend for an LLM analytics platform. Shopify · Meta · TikTok · Google Analytics integrations.", cls: "" },
    { yr: "2024", role: "SDE 1", co: "Appstone", desc: "Auth0, React + Three.js 3D, Electron desktop app integrating Fyers trading APIs.", cls: "" },
    { yr: "2024 → now", role: "Senior Developer", co: "EXPM Learning (ex-Employability.Life)", desc: "Architect & ship the enterprise meeting orchestration platform. Excellence Award · Q3 '25 & Q1 '26.", cls: "accent" },
  ];
  return (
    <section className="section" id="work" style={{paddingTop: 88, paddingBottom: 88}}>
      <div className="wrap">
        <div className="section-open">
          <div className="marker">02 — Work history</div>
          <div>
            <h2 className="heading">Four years, five chapters.</h2>
            <p className="lede">Plus two personal products running in parallel since 2024.</p>
          </div>
        </div>

        <div className="timeline">
          <div className="timeline-axis"></div>
          <div className="timeline-row">
            {items.map((it, i) => (
              <div key={i} className={"tl-card " + it.cls}>
                <div className="yr">{it.yr}</div>
                <div className="role">{it.role}</div>
                <div className="co">{it.co}</div>
                <div className="desc">{it.desc}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Personal products track — leaner */}
        <div style={{marginTop: 56, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 1, background: "var(--rule)", border: "1px solid var(--rule)"}}>
          <div style={{background: "var(--bg)", padding: "28px 32px"}}>
            <div className="label-mono" style={{color: "var(--orange)"}}>APR 2024 — present</div>
            <h4 style={{fontFamily: "var(--serif)", fontSize: 30, margin: "10px 0 8px", fontWeight: 400}}>NightmareXI</h4>
            <p style={{margin: 0, color: "var(--ink-2)", fontSize: 14, lineHeight: 1.55}}>Reverse-scoring fantasy cricket. Solo build, solo deploy, on AWS. Live for 18+ months.</p>
          </div>
          <div style={{background: "var(--bg)", padding: "28px 32px"}}>
            <div className="label-mono" style={{color: "var(--sage)"}}>MAR 2026 — present</div>
            <h4 style={{fontFamily: "var(--serif)", fontSize: 30, margin: "10px 0 8px", fontWeight: 400}}>Kitabey</h4>
            <p style={{margin: 0, color: "var(--ink-2)", fontSize: 14, lineHeight: 1.55}}>Co-founded AI-powered exam prep for JEE Main + NEET UG. Sole engineer.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Nav, Hero, Numbers, Timeline });