// Home page sections
const { useState: useStateH, useEffect: useEffectH, useRef: useRefH } = React;

function Nav({ onNav, current, onTweaksToggle }) {
  return (
    <nav className="nav">
      <div className="nav-brand" onClick={() => onNav('home')} style={{ cursor: 'pointer' }}>
        <div className="brand-mark">Z</div>
        <div className="brand-name">
          ZEESHAH BUTT<span className="slash">/</span><span style={{ color: 'var(--fg-3)' }}>GAME DEV</span>
        </div>
      </div>
      <div className="nav-links">
        {['work', 'about', 'experience', 'archive', 'contact'].map((s) => (
          <a key={s} className={`nav-link ${current === s ? 'active' : ''}`} onClick={() => onNav(s)}>
            ./{s}
          </a>
        ))}
      </div>
      <div className="row">
        <div className="nav-link" style={{ display: 'flex', alignItems: 'center' }}>
          <span className="status-dot"></span>Available Q3 2026
        </div>
        <button className="nav-cta" onClick={() => onNav('contact')}>Get in touch →</button>
      </div>
    </nav>
  );
}

function HeroSplit({ featured, onOpen }) {
  return (
    <section className="hero">
      <div>
        <div className="hero-meta">
          <span className="pill">PORTFOLIO · 2026</span>
          <span>Lahore, PK</span>
          <span>·</span>
          <span>3+ yrs shipping</span>
        </div>
        <h1>
          Game systems that <span className="accent">ship</span>,<br/>
          scale, and <span className="accent">stay alive</span>.
        </h1>
        <p className="hero-sub">
          I'm Zeeshah — a Unity & C# game developer building mobile titles from concept through LiveOps.
          I obsess over architecture that lets designers move fast without breaking what's already shipped.
        </p>
        <div className="hero-stats">
          <div className="hero-stat">
            <div className="num">3<small>+</small></div>
            <div className="lbl">Years shipping</div>
          </div>
          <div className="hero-stat">
            <div className="num">2</div>
            <div className="lbl">Titles live globally</div>
          </div>
          <div className="hero-stat">
            <div className="num">−30<small>%</small></div>
            <div className="lbl">ANR / LMK rate</div>
          </div>
        </div>
        <div className="hero-cta">
          <button className="nav-cta" onClick={() => onOpen(featured.id)}>
            View featured work
            <svg className="arrow" width="14" height="14" viewBox="0 0 14 14" fill="none">
              <path d="M3 11L11 3M11 3H4M11 3V10" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </button>
          <button className="nav-cta" onClick={() => window.open('data/resume.pdf', '_blank')}>Open CV</button>
        </div>
      </div>
      <FeaturePanel featured={featured} onOpen={onOpen} />
    </section>
  );
}

function FeaturePanel({ featured, onOpen }) {
  return (
    <div className="hero-feature" onClick={() => onOpen(featured.id)} style={{ cursor: 'pointer' }}>
      <div className="hf-bar">
        <div className="dots"><div className="dot"></div><div className="dot"></div><div className="dot"></div></div>
        <span>FEATURED · {featured.engine}</span>
      </div>
      <div className="hf-screen">
        {featured.heroImage && (
          <img src={featured.heroImage} alt="" className="hf-screen-img" />
        )}
        <div className="hf-screen-grid"></div>
        <div className="hf-particles">
          {Array.from({ length: 8 }).map((_, i) => (
            <span key={i} className="hf-particle" style={{
              left: `${10 + i * 11}%`,
              bottom: '-5px',
              animationDelay: `${i * 0.7}s`,
              animationDuration: `${6 + (i % 3)}s`,
            }} />
          ))}
        </div>
        <div className="hf-tag">{featured.statusLabel}</div>
      </div>
      <div className="hf-foot">
        <div>
          <div className="hf-title">{featured.title}</div>
          <div className="hf-meta">{featured.studio} · {featured.year}</div>
        </div>
        <div className="hf-progress">
          <span>BUILD</span>
          <div className="hf-bars">
            <span className="on"></span><span className="on"></span><span className="on"></span>
            <span className="on"></span><span className="on"></span><span></span><span></span>
          </div>
        </div>
      </div>
    </div>
  );
}

function HeroBig({ onOpen }) {
  return (
    <section className="hero" style={{ gridTemplateColumns: '1fr', textAlign: 'center', alignItems: 'center', justifyItems: 'center' }}>
      <div style={{ maxWidth: 1200 }}>
        <div className="hero-meta" style={{ justifyContent: 'center' }}>
          <span className="pill">UNITY · C# · LIVEOPS</span>
        </div>
        <h1 style={{ fontSize: 'clamp(64px, 11vw, 200px)', lineHeight: '0.9' }}>
          Zeeshah <span className="accent">Butt</span><br/>builds games.
        </h1>
        <p className="hero-sub" style={{ margin: '0 auto 36px' }}>
          Mobile game developer based in Lahore. Ships titles from concept through LiveOps,
          with a focus on system architecture and performance.
        </p>
        <div className="hero-cta" style={{ justifyContent: 'center' }}>
          <button className="btn primary" onClick={() => onOpen('bloom-sort')}>View featured work</button>
          <button className="nav-cta" onClick={() => window.open('data/resume.pdf', '_blank')}>Open CV</button>
        </div>
      </div>
    </section>
  );
}

function HeroReel({ featured, onOpen }) {
  return (
    <section className="hero" style={{ gridTemplateColumns: '1fr', position: 'relative', padding: 0, minHeight: 'calc(100vh - 64px)' }}>
      <div style={{ position: 'absolute', inset: 0, overflow: 'hidden' }}>
        <FeaturePanel featured={featured} onOpen={onOpen} />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, transparent 0%, var(--bg) 90%)' }}></div>
      </div>
      <div style={{ position: 'relative', zIndex: 2, padding: '0 var(--pad-x)', alignSelf: 'end', paddingBottom: '64px' }}>
        <h1>{featured.title}</h1>
        <p className="hero-sub">{featured.tagline}</p>
        <button className="btn primary" onClick={() => onOpen(featured.id)}>Open case study →</button>
      </div>
    </section>
  );
}

function Marquee() {
  const phrases = ['Bloom Sort', 'FPS Commando', 'Match Ball 3D', 'Reckless Rick', 'Roll Em All', 'Seek City'];
  const repeated = [...phrases, ...phrases, ...phrases];
  return (
    <div className="marquee">
      <div className="marquee-track">
        {repeated.map((p, i) => (
          <span key={i}>
            {p}<span className="sep">◆</span>
          </span>
        ))}
      </div>
    </div>
  );
}

function FeaturedWork({ projects, onOpen }) {
  const featured = projects.slice(0, 3);
  return (
    <section id="work">
      <div className="section-head">
        <div>
          <div className="section-eyebrow">/ 01 — Featured Work</div>
          <h2 className="section-title">Shipped & <em>shipping</em>.</h2>
        </div>
        <div className="section-meta">{featured.length} of {projects.length} projects</div>
      </div>
      <div className="projects-grid">
        {featured.map((p, i) => (
          <ProjectCard key={p.id} project={p} featured={i === 0} onOpen={onOpen} index={i} />
        ))}
      </div>
    </section>
  );
}

function Prototypes({ projects, onOpen }) {
  const protos = projects.filter(p => p.status === 'proto');
  return (
    <section id="prototypes" style={{ background: 'var(--bg-2)' }}>
      <div className="section-head">
        <div>
          <div className="section-eyebrow">/ 02 — Prototypes</div>
          <h2 className="section-title">Mentored <em>builds</em>.</h2>
        </div>
        <div className="section-meta">Prototypes I architected with associate devs</div>
      </div>
      <div className="projects-grid">
        {protos.map((p, i) => (
          <ProjectCard key={p.id} project={p} featured={false} onOpen={onOpen} index={i + 3} />
        ))}
      </div>
    </section>
  );
}

function TechStack({ stack }) {
  return (
    <section id="stack">
      <div className="section-head">
        <div>
          <div className="section-eyebrow">/ 03 — Tech Stack</div>
          <h2 className="section-title">The <em>toolkit</em>.</h2>
        </div>
        <div className="section-meta">What I reach for daily</div>
      </div>
      <div className="stack-grid">
        {stack.map((s) => (
          <div key={s.title} className="stack-card">
            <h4>{s.title}</h4>
            <ul className="stack-list">
              {s.items.map((it) => <li key={it}>{it}</li>)}
            </ul>
          </div>
        ))}
      </div>
    </section>
  );
}

function About() {
  return (
    <section id="about" style={{ background: 'var(--bg-2)' }}>
      <div className="section-head">
        <div>
          <div className="section-eyebrow">/ 04 — About</div>
          <h2 className="section-title">Built for <em>shipping</em>.</h2>
        </div>
      </div>
      <div className="about-grid">
        <div className="about-portrait">
          <img src="data/ME.webp" alt="Zeeshah Butt" style={{ width: '100%', height: '100%', objectFit: 'cover', position: 'absolute', inset: 0 }} />
          <div className="label">portrait.jpg</div>
        </div>
        <div className="about-text">
          <h3>I build the systems that let designers and live ops teams <em>move fast without breaking the build</em>.</h3>
          <p>
            Three years in, my favorite part of the job isn't shipping a feature — it's shipping the architecture
            underneath that lets the next ten features ship without surgery. State machines you can read out loud.
            ScriptableObject graphs your designers can extend. Remote configs that take experiments off the release pipeline.
          </p>
          <p>
            I've owned a casual title from concept through LiveOps, integrated Nakama for cloud saves and real-time chat,
            and cut ANR rates by 30% on a flagship FPS. I mentor associate devs because the best architecture is the kind
            other people can extend.
          </p>
          <div className="about-meta">
            <div>
              <div className="label">Location</div>
              <div className="value">Lahore, Pakistan</div>
            </div>
            <div>
              <div className="label">Education</div>
              <div className="value">BS Computer Science · NUCES</div>
            </div>
            <div>
              <div className="label">Currently</div>
              <div className="value">Game Developer @ Imagination AI</div>
            </div>
            <div>
              <div className="label">Open to</div>
              <div className="value">Senior roles · Remote · Studio</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Experience({ items }) {
  return (
    <section id="experience">
      <div className="section-head">
        <div>
          <div className="section-eyebrow">/ 05 — Experience</div>
          <h2 className="section-title">Three years, <em>three roles</em>.</h2>
        </div>
      </div>
      <div className="timeline">
        {items.map((e, i) => (
          <div key={i} className="tl-item">
            <div className="tl-date">
              {e.isNow && <span className="now">● </span>}{e.date}
            </div>
            <div className="tl-content">
              <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 16 }}>
                {e.logo && <div className="tl-logo">{e.logo}</div>}
                <h4 style={{ margin: 0 }}>{e.company}</h4>
              </div>
              <div className="role">{e.role}</div>
              <p>{e.summary}</p>
              <ul className="achievements">
                {e.achievements.map((a, j) => (
                  <li key={j}>
                    <strong>{a.num}</strong>
                    {a.label}
                  </li>
                ))}
              </ul>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

function NowPlaying({ onOpen }) {
  return (
    <section id="now" style={{ background: 'var(--bg-2)' }}>
      <div className="section-head">
        <div>
          <div className="section-eyebrow">/ 06 — Now</div>
          <h2 className="section-title">Currently <em>building</em>.</h2>
        </div>
        <div className="section-meta">Updated {new Date().toLocaleDateString('en-US', { month: 'short', year: 'numeric' })}</div>
      </div>
      <div className="now-playing">
        <div className="np-card" onClick={() => onOpen('fps-commando')} style={{ cursor: 'pointer' }}>
          <div className="np-eyebrow"><span className="live-dot"></span>Active development</div>
          <h3>FPS Commando — custom ad mediation v2</h3>
          <p>Designing an interface-based, JSON-configurable ads framework that lets the data team run waterfall experiments without shipping a build. Currently profiling memory cost across the LMK threshold on Android Go devices.</p>
          <div className="np-progress">
            <div className="label"><span>SPRINT 04</span><span>68%</span></div>
            <div className="np-bar"><div className="fill" style={{ width: '68%' }}></div></div>
          </div>
        </div>
        <div className="np-card">
          <div className="np-eyebrow"><span className="live-dot"></span>Reading & learning</div>
          <h3>ECS, custom inspectors, mobile GPU profiling</h3>
          <p>Going deeper on Unity's DOTS / ECS path for a side prototype. Also building a custom inspector pattern for ScriptableObject graphs so non-programmers can author state machines safely.</p>
          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginTop: 16 }}>
            <span className="chip">DOTS</span>
            <span className="chip">ECS</span>
            <span className="chip">Custom Editors</span>
            <span className="chip">RenderDoc</span>
          </div>
        </div>
      </div>
    </section>
  );
}

function Archive({ projects, onOpen }) {
  return (
    <section id="archive">
      <div className="section-head">
        <div>
          <div className="section-eyebrow">/ 07 — Archive</div>
          <h2 className="section-title">All <em>projects</em>.</h2>
        </div>
        <div className="section-meta">{projects.length} entries</div>
      </div>
      <div className="archive">
        <div className="arch-row head">
          <div>#</div>
          <div>Project</div>
          <div>Studio</div>
          <div>Year</div>
          <div>Stack</div>
          <div></div>
        </div>
        {projects.map((p, i) => (
          <div key={p.id} className="arch-row" onClick={() => onOpen(p.id)}>
            <div className="arch-num">{String(i + 1).padStart(2, '0')}</div>
            <div className="arch-title-group">
              {p.icon && <img src={p.icon} alt="" className="arch-icon" />}
              <div className="arch-title">{p.title}</div>
            </div>
            <div className="arch-meta">{p.studio}</div>
            <div className="arch-meta">{p.year}</div>
            <div className="arch-tags">
              {p.stack.slice(0, 3).map((s) => <span key={s} className="chip">{s}</span>)}
            </div>
            <div className="arch-arrow">
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                <path d="M3 11L11 3M11 3H4M11 3V10" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer id="contact" className="footer">
      <h2 className="footer-hero">
        Have a title to ship?<br/><em>Let's talk.</em>
      </h2>
      <div className="hero-cta" style={{ marginBottom: 32 }}>
        <a href="mailto:hello@mrzee.net" className="btn primary">hello@mrzee.net →</a>
        <a href="#" className="btn">Schedule a call</a>
      </div>
      <div className="footer-grid">
        <div className="footer-col">
          <h5>Contact</h5>
          <a href="mailto:hello@mrzee.net">hello@mrzee.net</a>
          <a href="tel:+923004210204">+92 300 4210204</a>
          <p className="dim">Lahore, Pakistan</p>
        </div>
        <div className="footer-col">
          <h5>Elsewhere</h5>
          <a href="https://linkedin.com/in/mrzee313" target="_blank" rel="noreferrer">LinkedIn ↗</a>
          <a href="https://github.com/zeeshahali" target="_blank" rel="noreferrer">GitHub ↗</a>
        </div>
        <div className="footer-col">
          <h5>Resources</h5>
          <a href="data/resume.pdf" className="btn" target="_blank" rel="noopener noreferrer" download> 
          Resume (PDF) ↓</a>
        </div>
        <div className="footer-col">
          <h5>Index</h5>
          <a href="#work">Work</a>
          <a href="#about">About</a>
          <a href="#experience">Experience</a>
          <a href="#archive">Archive</a>
        </div>
      </div>
      <div className="footer-bottom">
        <span>© 2026 Zeeshah Butt — Built in HTML & sleep deprivation</span>
        <span>v2026.05 · last updated may 06</span>
      </div>
    </footer>
  );
}

Object.assign(window, { Nav, HeroSplit, HeroBig, HeroReel, Marquee, FeaturedWork, Prototypes, TechStack, About, Experience, NowPlaying, Archive, Footer });