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

/* ============================================================
   NIGHTMAREXI — screenshot-led
   ============================================================ */

function Browser({ src, alt, url, height }) {
  return (
    <div className="browser">
      <div className="browser-bar">
        <div className="dots"><span /><span /><span /></div>
        <div className="url">{url}</div>
      </div>
      <img src={src} alt={alt} style={height ? {maxHeight: height, objectFit: "cover", objectPosition: "top"} : null} />
    </div>
  );
}

function Phone({ src, alt }) {
  return (
    <div className="phone">
      <img src={src} alt={alt} />
    </div>
  );
}

function NightmareXIArch() {
  return (
    <div className="arch" style={{padding: 28}}>
      <div className="arch-title">
        <span>Production architecture · ap-south-1</span>
        <span>Solo build · solo deploy · solo ops</span>
      </div>
      <svg viewBox="0 0 900 360" preserveAspectRatio="xMidYMid meet">
        <defs>
          <marker id="ar1" 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>

        <g className="arch-node"><rect x="20" y="150" width="120" height="60" /><text x="80" y="178" textAnchor="middle">USERS</text><text x="80" y="195" textAnchor="middle" fill="var(--ink-3)">browser · android</text></g>
        <g className="arch-node"><rect x="180" y="150" width="140" height="60" /><text x="250" y="178" textAnchor="middle">GODADDY DNS</text><text x="250" y="195" textAnchor="middle" fill="var(--ink-3)">A · CNAME · ACM</text></g>
        <g className="arch-node accent"><rect x="360" y="40" width="160" height="60" /><text x="440" y="68" textAnchor="middle">CLOUDFRONT</text><text x="440" y="85" textAnchor="middle" fill="var(--ink-3)">global CDN · OAC</text></g>
        <g className="arch-node accent"><rect x="570" y="40" width="160" height="60" /><text x="650" y="68" textAnchor="middle">S3 STATIC</text><text x="650" y="85" textAnchor="middle" fill="var(--ink-3)">React build</text></g>

        <g><rect x="360" y="160" width="520" height="180" fill="none" stroke="var(--ink-3)" strokeDasharray="3 3" /><text x="370" y="155" fill="var(--ink-3)" style={{fontSize: 10, letterSpacing: "0.12em", textTransform: "uppercase"}}>EC2 · t3.micro · Ubuntu 22.04</text></g>
        <g className="arch-node"><rect x="380" y="180" width="140" height="56" /><text x="450" y="206" textAnchor="middle">NGINX</text><text x="450" y="222" textAnchor="middle" fill="var(--ink-3)">TLS · proxy</text></g>
        <g className="arch-node"><rect x="540" y="180" width="120" height="56" /><text x="600" y="206" textAnchor="middle">PM2</text><text x="600" y="222" textAnchor="middle" fill="var(--ink-3)">cluster · restart</text></g>
        <g className="arch-node sage"><rect x="380" y="270" width="140" height="56" /><text x="450" y="296" textAnchor="middle">NESTJS</text><text x="450" y="312" textAnchor="middle" fill="var(--ink-3)">port 3000</text></g>
        <g className="arch-node sage"><rect x="540" y="270" width="120" height="56" /><text x="600" y="296" textAnchor="middle">POSTGRES</text><text x="600" y="312" textAnchor="middle" fill="var(--ink-3)">v14 · local</text></g>
        <g className="arch-node"><rect x="700" y="180" width="160" height="56" /><text x="780" y="206" textAnchor="middle">CERTBOT</text><text x="780" y="222" textAnchor="middle" fill="var(--ink-3)">Let's Encrypt</text></g>
        <g className="arch-node"><rect x="700" y="270" width="160" height="56" /><text x="780" y="296" textAnchor="middle">RETOOL</text><text x="780" y="312" textAnchor="middle" fill="var(--ink-3)">scorecard · roster</text></g>

        <g style={{color: "var(--ink)"}}>
          <path className="arch-edge" d="M140 180 H180" markerEnd="url(#ar1)" />
          <path className="arch-edge" d="M320 175 Q 340 175 360 130 H 360" markerEnd="url(#ar1)" />
          <path className="arch-edge" d="M320 195 H360" markerEnd="url(#ar1)" />
          <path className="arch-edge" d="M520 70 H570" markerEnd="url(#ar1)" />
          <path className="arch-edge" d="M520 208 H540" markerEnd="url(#ar1)" />
          <path className="arch-edge" d="M450 236 V270" markerEnd="url(#ar1)" />
          <path className="arch-edge" d="M520 298 H540" markerEnd="url(#ar1)" />
          <path className="arch-edge dashed" d="M660 208 H700" />
          <path className="arch-edge dashed" d="M660 298 H700" />
        </g>
      </svg>
    </div>
  );
}

function NightmareXI() {
  const stack = [
    { name: "NestJS",      cat: "Backend",   icon: <HexIcon /> },
    { name: "Prisma",      cat: "ORM",       icon: <PuzzleIcon /> },
    { name: "PostgreSQL",  cat: "Database",  icon: <DbIcon />, tone: "sage" },
    { name: "React",       cat: "Frontend",  icon: <CircleIcon /> },
    { name: "AWS S3",      cat: "Storage",   icon: <SquareIcon /> },
    { name: "CloudFront",  cat: "CDN",       icon: <CloudIcon />, tone: "accent" },
    { name: "EC2",         cat: "Compute",   icon: <BarsIcon /> },
    { name: "Nginx",       cat: "Proxy",     icon: <StreamIcon /> },
    { name: "PM2",         cat: "Process",   icon: <GearIcon /> },
    { name: "Certbot",     cat: "TLS",       icon: <LockIcon /> },
    { name: "Retool",      cat: "Admin",     icon: <TermIcon /> },
    { name: "Android",     cat: "Mobile",    icon: <TriIcon /> },
  ];

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

        <div className="product-head">
          <div className="index">03 — Live product · solo build</div>
          <h2 className="product-name">Nightmare<em>XI</em>.</h2>
          <a className="visit" href="https://www.nightmarexi.com/" target="_blank" rel="noopener">
            <span>Visit site</span> <span className="arrow">↗</span>
          </a>
        </div>

        <div className="product-tag">
          <p className="pitch">
            <em>What if</em> the worst player on the field was the best pick in your fantasy team?
          </p>
          <p className="body">
            NightmareXI is a fantasy cricket platform built around one inverted question. Top-order century? Penalty. Golden duck from the tail-ender? Jackpot. The whole genre, run in reverse — a single mechanic that flips every assumption a regular fantasy player brings to the table.
          </p>
        </div>

        {/* Hero shot */}
        <div className="product-opener">
          <Browser src="portfolio/img/nmxi-landing.png" alt="NightmareXI landing — Where the Worst Picks Win" url="nightmarexi.com" />
          <div className="caption">
            <span>The pitch · in the user's first scroll</span>
            <a href="https://www.nightmarexi.com/" target="_blank" rel="noopener">nightmarexi.com ↗</a>
          </div>
        </div>

        {/* The mechanic — pull quote + scoring screenshot */}
        <div className="pullquote">
          The Nightmare XI comprises players with the <em>worst performance.</em> Negative scores are <em>better.</em>
          <div className="attrib">Verbatim, from the live app</div>
        </div>

        <div className="spotlight">
          <div className="text">
            <div className="pre">The mechanic, on screen</div>
            <h3>Negative is the new <em>positive.</em></h3>
            <p>
              The leaderboard shown here is from a real RCB vs PBKS contest. A wicket-taking bowler costs you 20 points; an opener who scored runs costs you another 15. Total team score: <span style={{fontFamily: "var(--mono)", color: "var(--orange)"}}>−173</span>. The lower it goes, the better you've drafted.
            </p>
            <p>
              Every fantasy-cricket scoring rule had to be re-derived from first principles. Runs, wickets, strike rate, economy, sixes — each event gets a penalty or a bonus depending on which side of "underperformance" it lands.
            </p>
          </div>
          <div>
            <Browser src="portfolio/img/nmxi-scoring.png" alt="NightmareXI scoring leaderboard with negative scores" url="nightmarexi.com/contest" />
            <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>Live leaderboard · RCB vs PBKS</span>
              <span>Total · −173</span>
            </div>
          </div>
        </div>

        <div className="spotlight flip">
          <div>
            <Browser src="portfolio/img/nmxi-contests.png" alt="NightmareXI contest selection" url="nightmarexi.com/play" />
            <div style={{marginTop: 12, fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.08em", color: "var(--ink-3)", textTransform: "uppercase", display: "flex", justifyContent: "space-between"}}>
              <span>Contest types · Premium · H2H · Unlimited</span>
              <span>In-app currency · Caps</span>
            </div>
          </div>
          <div className="text">
            <div className="pre">The product loop</div>
            <h3>Pick a match. Pick a contest. Pick the worst.</h3>
            <p>
              Three contest formats, each with its own prize pool, entry fee and slot count. The whole monetisation layer — virtual currency (Caps), entry fees, prize distribution, win settlement — is custom built and managed end-to-end from a Retool admin console.
            </p>
            <p>
              Scorecards are ingested manually during live matches; player rosters are auto-generated; contest settlement runs after innings end. One operator running an entire fantasy platform in real time.
            </p>
          </div>
        </div>

        {/* Mobile triptych */}
        <div style={{marginTop: 72}}>
          <div className="section-open" style={{marginBottom: 32}}>
            <div className="marker">On Android</div>
            <h3 style={{fontFamily: "var(--serif)", fontSize: "clamp(32px, 4vw, 56px)", lineHeight: 1, margin: 0, letterSpacing: "-0.02em", fontWeight: 400}}>Same product, smaller pocket.</h3>
          </div>

          <div className="phone-array">
            <div>
              <Phone src="portfolio/img/nmxi-mobile-home.jpeg" alt="NightmareXI Android home — Welcome Arshdeep" />
              <div style={{marginTop: 16, fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.12em", color: "var(--ink-3)", textTransform: "uppercase", textAlign: "center"}}>Home · live matches</div>
            </div>
            <div>
              <Phone src="portfolio/img/nmxi-mobile-field.jpeg" alt="NightmareXI Android team selection on cricket pitch" />
              <div style={{marginTop: 16, fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.12em", color: "var(--ink-3)", textTransform: "uppercase", textAlign: "center"}}>Submit team · 11 players</div>
            </div>
            <div>
              <Phone src="portfolio/img/nmxi-mobile-history.jpeg" alt="NightmareXI Android contest history with winnings" />
              <div style={{marginTop: 16, fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.12em", color: "var(--ink-3)", textTransform: "uppercase", textAlign: "center"}}>Results · winnings ledger</div>
            </div>
          </div>
        </div>

        {/* The moment — stats only, no decorative ribbon */}
        <div style={{marginTop: 96, paddingTop: 56, borderTop: "1px solid var(--rule)"}}>
          <div className="section-open">
            <div className="marker">The moment</div>
            <div>
              <h3 style={{fontFamily: "var(--serif)", fontSize: "clamp(40px, 5vw, 72px)", lineHeight: 0.95, margin: 0, letterSpacing: "-0.02em", fontWeight: 400}}>T20 World Cup 2024.<br/><em className="italic-serif" style={{color: "var(--orange)"}}>One operator. The entire tournament.</em></h3>
              <p className="lede">Three weeks. Every match. Scorecards published manually, rosters generated through Retool, contests opened and locked on broadcast time.</p>
            </div>
          </div>

          <div className="bignums" style={{marginTop: 24}}>
            <div className="bignum">
              <div className="pre">Teams created</div>
              <div className="figure accent">642</div>
              <div className="caption">Submitted across the whole World Cup window.</div>
            </div>
            <div className="bignum">
              <div className="pre">Active users</div>
              <div className="figure">158</div>
              <div className="caption">Solo go-to-market — every signup walked in through one engineer's word of mouth.</div>
            </div>
            <div className="bignum">
              <div className="pre">Peak · IND vs PAK</div>
              <div className="figure sage">83</div>
              <div className="caption">Teams on a single fixture. The contrarian's Super Bowl.</div>
            </div>
          </div>
        </div>

        {/* Architecture — lighter, contextual */}
        <div style={{marginTop: 96}}>
          <div className="section-open">
            <div className="marker">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}}>One VPS. <em className="italic-serif" style={{color: "var(--orange)"}}>One engineer.</em> Eighteen months and counting.</h3>
              <p className="lede">Static frontend on S3 + CloudFront. NestJS API on a single t3.micro. The whole stack lives in one head.</p>
            </div>
          </div>
          <NightmareXIArch />
        </div>

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

window.NightmareXI = NightmareXI;
window.Browser = Browser;
window.Phone = Phone;