// portfolio-ui.jsx — All React sections for Ankit Suthar Portfolio

// ─── BREAKPOINT HOOK ─────────────────────────────────────────────────────────
const useBreakpoint = () => {
  const [w, setW] = React.useState(window.innerWidth);
  React.useEffect(() => {
    const h = () => setW(window.innerWidth);
    window.addEventListener('resize', h);
    return () => window.removeEventListener('resize', h);
  }, []);
  return { isMobile: w < 640, isTablet: w < 1024 };
};

const secPad = (isMobile, isTablet) =>
  isMobile ? '60px 20px' : isTablet ? '80px 32px' : '100px 40px';

// ─── NAV ────────────────────────────────────────────────────────────────────
const Nav = () => {
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);
  const { isMobile, isTablet } = useBreakpoint();
  const collapsed = isMobile || isTablet;

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const links = ['Home', 'Videos', 'Skills', 'Projects', 'Experience', 'Education', 'About', 'Contact'];
  const scroll = (id) => {
    document.getElementById(id.toLowerCase())?.scrollIntoView({ behavior: 'smooth' });
    setMenuOpen(false);
  };

  const navBg = scrolled || menuOpen ? 'rgba(2,5,8,0.97)' : 'transparent';

  return (
    <nav style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 100,
      background: navBg,
      backdropFilter: scrolled || menuOpen ? 'blur(12px)' : 'none',
      borderBottom: scrolled ? '1px solid rgba(124,58,237,0.15)' : 'none',
      transition: 'all 0.3s',
    }}>
      <div style={{ padding: '0 20px', height: 64, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <span style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 13, color: '#7c3aed', letterSpacing: 2 }}>
          ANKIT SUTHAR ^_^
        </span>

        {/* Desktop links */}
        {!collapsed && (
          <div style={{ display: 'flex', gap: 28 }}>
            {links.map(l => (
              <button key={l} onClick={() => scroll(l)}
                style={{ background: 'none', border: 'none', color: 'rgba(255,255,255,0.65)', fontFamily: 'Space Grotesk, sans-serif',
                  fontSize: 13, letterSpacing: 1.5, textTransform: 'uppercase', cursor: 'pointer',
                  padding: '4px 0', transition: 'color 0.2s', borderBottom: '1px solid transparent' }}
                onMouseEnter={e => { e.target.style.color = '#7c3aed'; e.target.style.borderBottomColor = '#7c3aed'; }}
                onMouseLeave={e => { e.target.style.color = 'rgba(255,255,255,0.65)'; e.target.style.borderBottomColor = 'transparent'; }}>
                {l}
              </button>
            ))}
          </div>
        )}

        {/* Hamburger */}
        {collapsed && (
          <button onClick={() => setMenuOpen(o => !o)}
            style={{ background: 'none', border: '1px solid rgba(124,58,237,0.4)', color: '#7c3aed',
              width: 48, height: 48, cursor: 'pointer', display: 'flex', flexDirection: 'column',
              alignItems: 'center', justifyContent: 'center', gap: 5, padding: 0,
              transition: 'border-color 0.2s', WebkitTapHighlightColor: 'transparent', touchAction: 'manipulation' }}>
            {[0,1,2].map(i => (
              <span key={i} style={{
                display: 'block', width: 20, height: 2, background: '#7c3aed',
                transition: 'all 0.25s',
                transform: menuOpen
                  ? i === 0 ? 'translateY(7px) rotate(45deg)' : i === 2 ? 'translateY(-7px) rotate(-45deg)' : 'scaleX(0)'
                  : 'none',
              }} />
            ))}
          </button>
        )}
      </div>

      {/* Mobile/tablet dropdown */}
      {collapsed && (
        <div style={{
          maxHeight: menuOpen ? 400 : 0, overflow: 'hidden',
          transition: 'max-height 0.35s cubic-bezier(0.4,0,0.2,1)',
          borderTop: menuOpen ? '1px solid rgba(124,58,237,0.15)' : 'none',
        }}>
          <div style={{ padding: '12px 0 20px', display: 'flex', flexDirection: 'column' }}>
            {links.map(l => (
              <button key={l} onClick={() => scroll(l)}
                style={{ background: 'none', border: 'none', color: 'rgba(255,255,255,0.7)', fontFamily: 'Space Grotesk, sans-serif',
                  fontSize: 15, letterSpacing: 2, textTransform: 'uppercase', cursor: 'pointer',
                  padding: '14px 24px', textAlign: 'left', transition: 'color 0.2s, background 0.2s' }}
                onMouseEnter={e => { e.target.style.color = '#7c3aed'; e.target.style.background = 'rgba(124,58,237,0.06)'; }}
                onMouseLeave={e => { e.target.style.color = 'rgba(255,255,255,0.7)'; e.target.style.background = 'none'; }}>
                {l}
              </button>
            ))}
          </div>
        </div>
      )}
    </nav>
  );
};

// ─── HERO ────────────────────────────────────────────────────────────────────
const Hero = () => {
  const [typed, setTyped] = React.useState('');
  const [score, setScore] = React.useState(0);
  const [combo, setCombo] = React.useState(1);
  const [hitLabel, setHitLabel] = React.useState(null);
  const fullName = 'ANKIT SUTHAR';
  const G = React.useRef({ enemies: [], particles: [], score: 0, combo: 1, lastKill: 0, mouse: { x: -999, y: -999 } }).current;

  // Typing effect
  React.useEffect(() => {
    let i = 0;
    const iv = setInterval(() => {
      setTyped(fullName.slice(0, i + 1));
      i++;
      if (i >= fullName.length) clearInterval(iv);
    }, 80);
    return () => clearInterval(iv);
  }, []);

  // Game canvas
  React.useEffect(() => {
    const canvas = document.getElementById('hero-game');
    if (!canvas) return;
    const ctx = canvas.getContext('2d');

    const resize = () => { canvas.width = window.innerWidth; canvas.height = window.innerHeight; };
    resize();
    window.addEventListener('resize', resize);

    const onMove = e => { G.mouse.x = e.clientX; G.mouse.y = e.clientY; };
    window.addEventListener('mousemove', onMove);

    const COLS = ['#7c3aed', '#06b6d4', '#f59e0b'];

    // Each enemy has a vanishing-point origin and a final screen destination.
    // z goes 0→1 (far→close). Size and alpha scale with z so they zoom in from nothing.
    const spawn = (zStart) => {
      const finalX = 0.08 + Math.random() * 0.84;
      const finalY = 0.04 + Math.random() * 0.42;
      G.enemies.push({
        // Vanishing point spread across the full screen
        ox: 0.1 + Math.random() * 0.8,
        oy: 0.05 + Math.random() * 0.45,
        finalX, finalY,
        z: zStart !== undefined ? zStart : 0.15,
        zSpeed: 0.0012 + Math.random() * 0.001,
        // Slow drift once arrived (z >= 1)
        dx: (Math.random() - 0.5) * 0.00018,
        dy: (Math.random() - 0.5) * 0.00012,
        type: Math.floor(Math.random() * 3),
        rot: 0, rotSpeed: (Math.random() - 0.5) * 0.014,
        alive: true,
        baseSize: 30 + Math.random() * 16,
        bob: Math.random() * Math.PI * 2,
        hue: COLS[Math.floor(Math.random() * 3)],
      });
    };

    // Stagger initial enemies spread across approach distances
    for (let i = 0; i < 7; i++) spawn(0.15 + i * 0.12);

    const lerp = (a, b, t) => a + (b - a) * t;
    const easeIn = t => t * t;

    const screenPos = (e, W, H) => {
      const t = Math.max(0, e.z);
      // Interpolate from vanishing-point origin → final destination
      const sx = lerp(e.ox, e.finalX, easeIn(t));
      const sy = lerp(e.oy, e.finalY, easeIn(t));
      return {
        x: sx * W,
        y: sy * H + Math.sin(Date.now() * 0.0012 + e.bob) * 8 * Math.min(1, t),
      };
    };

    const drawEnemy = (e, W, H) => {
      const { x, y } = screenPos(e, W, H);
      const t = Math.max(0, e.z);
      // Quadratic scale: tiny far away, full size when close
      const s = e.baseSize * Math.pow(Math.min(1, t), 1.6);
      if (s < 1) return { x, y };

      // Fade in on approach, fade out as they pass (z > 1)
      const fadeIn  = Math.min(1, t * 2.8);
      const fadeOut = t > 1 ? Math.max(0, 1 - (t - 1) / 0.18) : 1;
      const alpha   = fadeIn * fadeOut;
      if (alpha <= 0) return { x, y };

      ctx.save();
      ctx.globalAlpha = alpha;
      ctx.translate(x, y);
      ctx.rotate(e.rot);
      ctx.strokeStyle = e.hue;
      ctx.fillStyle = e.hue;
      ctx.lineWidth = 1.5;
      ctx.shadowColor = e.hue;
      ctx.shadowBlur = 14;

      if (e.type === 0) {
        // Space invader pixel art
        const px = s / 7;
        const g = [
          [0,0,1,0,0,0,1,0,0],
          [0,0,0,1,1,1,0,0,0],
          [0,0,1,1,1,1,1,0,0],
          [0,1,0,1,0,1,0,1,0],
          [1,1,1,1,1,1,1,1,1],
          [1,0,1,1,1,1,1,0,1],
          [0,0,1,0,0,0,1,0,0],
        ];
        const ox = -g[0].length * px / 2, oy = -g.length * px / 2;
        g.forEach((row, ry) => row.forEach((b, rx) => { if (b) ctx.fillRect(ox + rx * px, oy + ry * px, px - 0.5, px - 0.5); }));
      } else if (e.type === 1) {
        // Sleek spaceship
        ctx.beginPath();
        ctx.moveTo(0, -s * 0.5); ctx.lineTo(s * 0.35, s * 0.3);
        ctx.lineTo(0, s * 0.15); ctx.lineTo(-s * 0.35, s * 0.3);
        ctx.closePath(); ctx.stroke();
        ctx.beginPath(); ctx.arc(0, s * 0.15, s * 0.1, 0, Math.PI * 2); ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(-s * 0.35, s * 0.3); ctx.lineTo(-s * 0.6, s * 0.45);
        ctx.moveTo(s * 0.35, s * 0.3); ctx.lineTo(s * 0.6, s * 0.45);
        ctx.stroke();
      } else {
        // UFO eye monster
        ctx.beginPath(); ctx.ellipse(0, 0, s * 0.5, s * 0.22, 0, 0, Math.PI * 2); ctx.stroke();
        ctx.beginPath(); ctx.arc(0, -s * 0.08, s * 0.22, Math.PI, 0); ctx.stroke();
        ctx.shadowBlur = 22;
        ctx.beginPath(); ctx.arc(0, 0, s * 0.1, 0, Math.PI * 2); ctx.fill();
      }
      ctx.restore();
      return { x, y };
    };

    const spawnParticles = (x, y, hue) => {
      for (let i = 0; i < 22; i++) {
        const a = Math.random() * Math.PI * 2, sp = 1.5 + Math.random() * 5;
        G.particles.push({ x, y, vx: Math.cos(a) * sp, vy: Math.sin(a) * sp - 1.2, life: 1, hue, sz: 2 + Math.random() * 3 });
      }
    };

    const getTarget = (W, H) => {
      let best = null, bestD = 68;
      G.enemies.forEach(e => {
        if (!e.alive || e.z < 0.3) return; // can't shoot tiny far enemies
        const p = screenPos(e, W, H);
        const d = Math.hypot(p.x - G.mouse.x, p.y - G.mouse.y);
        if (d < bestD) { best = e; bestD = d; }
      });
      return best;
    };

    let animId;
    const loop = () => {
      animId = requestAnimationFrame(loop);
      const W = canvas.width, H = canvas.height;
      ctx.clearRect(0, 0, W, H);


      const target = getTarget(W, H);

      G.enemies.forEach(e => {
        if (!e.alive) return;

        // Approach: advance z; after arrival (z>1) slow drift the final position
        e.z += e.zSpeed;
        e.rot += e.rotSpeed;
        if (e.z >= 1) {
          e.finalX = Math.max(0.06, Math.min(0.94, e.finalX + e.dx));
          e.finalY = Math.max(0.04, Math.min(0.50, e.finalY + e.dy));
        }
        // Fully passed the camera — respawn
        if (e.z > 1.18) { e.alive = false; return; }

        const pos = drawEnemy(e, W, H);

        if (e === target) {
          const t = Date.now() * 0.003;
          const r = e.baseSize * Math.pow(Math.min(1, e.z), 1.6) + 18;
          ctx.save();
          ctx.translate(pos.x, pos.y);
          ctx.rotate(t);
          ctx.strokeStyle = '#f59e0b'; ctx.lineWidth = 1.5;
          ctx.shadowColor = '#f59e0b'; ctx.shadowBlur = 10;
          [0, Math.PI / 2, Math.PI, Math.PI * 1.5].forEach(a => {
            ctx.save(); ctx.rotate(a);
            ctx.beginPath(); ctx.moveTo(r, -11); ctx.lineTo(r, 0); ctx.lineTo(r + 11, 0); ctx.stroke();
            ctx.restore();
          });
          ctx.restore();
          const pulse = 0.5 + 0.5 * Math.sin(Date.now() * 0.012);
          ctx.beginPath(); ctx.arc(pos.x, pos.y, r + pulse * 5, 0, Math.PI * 2);
          ctx.strokeStyle = `rgba(245,158,11,${0.2 + pulse * 0.3})`;
          ctx.lineWidth = 1; ctx.shadowBlur = 0; ctx.stroke();
        }
      });

      G.particles = G.particles.filter(p => p.life > 0);
      G.particles.forEach(p => {
        ctx.beginPath(); ctx.arc(p.x, p.y, p.sz * p.life, 0, Math.PI * 2);
        ctx.fillStyle = p.hue + Math.floor(p.life * 255).toString(16).padStart(2, '0');
        ctx.fill();
        p.x += p.vx; p.y += p.vy; p.vx *= 0.93; p.vy = p.vy * 0.93 + 0.06; p.life -= 0.025;
      });

      G.enemies = G.enemies.filter(e => e.alive);
      while (G.enemies.length < 7) spawn(0);

      if (Date.now() - G.lastKill > 2500 && G.combo > 1) { G.combo = 1; setCombo(1); }
    };
    loop();

    const onClick = () => {
      const t = getTarget(canvas.width, canvas.height);
      if (!t) return;
      const pos = screenPos(t, canvas.width, canvas.height);
      spawnParticles(pos.x, pos.y, t.hue);
      t.alive = false;
      const now = Date.now();
      G.combo = now - G.lastKill < 2500 ? Math.min(G.combo + 1, 8) : 1;
      G.lastKill = now;
      G.score += 100 * G.combo;
      setScore(G.score);
      setCombo(G.combo);
      setHitLabel(`+${100 * G.combo}`);
      setTimeout(() => setHitLabel(null), 700);
    };

    window.addEventListener('click', onClick);

    return () => {
      cancelAnimationFrame(animId);
      window.removeEventListener('resize', resize);
      window.removeEventListener('mousemove', onMove);
      window.removeEventListener('click', onClick);
    };
  }, []);

  const { isMobile, isTablet } = useBreakpoint();

  return (
    <section id="home" data-screen-label="01 Home" style={{
      minHeight: '100vh', display: 'flex', flexDirection: 'column',
      alignItems: 'center', justifyContent: 'center', textAlign: 'center',
      position: 'relative', padding: isMobile ? '80px 20px 40px' : '0 40px'
    }}>
      <div style={{ position: 'absolute', inset: 0, background: 'repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.08) 2px, rgba(0,0,0,0.08) 4px)', pointerEvents: 'none' }} />
      <canvas id="hero-game" style={{ position: 'fixed', inset: 0, width: '100%', height: '100%', zIndex: 1, pointerEvents: 'none' }} />

      {/* Game HUD */}
      <div style={{ position: 'fixed', top: isMobile ? 70 : 74, right: isMobile ? 12 : 28, zIndex: 50, textAlign: 'right', pointerEvents: 'none' }}>
        <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: isMobile ? 13 : 22, color: 'rgba(124,58,237,0.9)', letterSpacing: isMobile ? 3 : 6 }}>SCORE</div>
        <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: isMobile ? 13 : 22, fontWeight: 700, color: '#f59e0b',
          textShadow: '0 0 14px rgba(245,158,11,0.7)', lineHeight: 1 }}>
          {String(score).padStart(6, '0')}
        </div>
        {combo > 1 && (
          <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: isMobile ? 11 : 17, color: '#06b6d4',
            letterSpacing: 2, marginTop: 4, animation: 'fadeInUp 0.2s ease' }}>
            x{combo} COMBO
          </div>
        )}
        {hitLabel && (
          <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: isMobile ? 13 : 20, color: '#fcd34d',
            letterSpacing: 1, marginTop: 4, animation: 'fadeInUp 0.15s ease' }}>
            {hitLabel}
          </div>
        )}
      </div>

      <div style={{ position: 'relative', zIndex: 2, display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
        <div style={{ fontFamily: 'JetBrains Mono, monospace', color: '#06b6d4', fontSize: isMobile ? 11 : 14, letterSpacing: 4, marginBottom: 20, opacity: 0.8 }}>
          // GAMEPLAY PROGRAMMER
        </div>
        <h1 style={{ fontFamily: 'Space Grotesk, sans-serif', fontSize: isMobile ? 'clamp(36px,10vw,56px)' : 'clamp(48px,7vw,96px)', fontWeight: 800,
          color: '#fff', margin: 0, letterSpacing: isMobile ? '-1px' : '-2px', lineHeight: 1,
          whiteSpace: isMobile ? 'normal' : 'nowrap', textShadow: '0 0 60px rgba(124,58,237,0.35)' }}>
          {typed}<span style={{ color: '#f59e0b', animation: 'blink 1s steps(1) infinite' }}>_</span>
        </h1>
        <div style={{ fontFamily: 'Space Grotesk, sans-serif', fontSize: isMobile ? 16 : 19, color: 'rgba(255,255,255,0.55)',
          marginTop: 20, marginBottom: 36, maxWidth: isMobile ? '100%' : 520, lineHeight: 1.75, textAlign: 'center' }}>
          I enjoy designing and implementing engaging gameplay systems, transforming ideas into interactive experiences that delight players.
        </div>
        <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap', width: '100%' }}>
          <a href="#projects" onClick={e => { e.preventDefault(); document.getElementById('projects')?.scrollIntoView({ behavior: 'smooth' }); }}
            style={{ padding: isMobile ? '12px 24px' : '14px 32px', background: '#f59e0b', color: '#060812', fontFamily: 'Space Grotesk, sans-serif',
              fontWeight: 700, fontSize: 13, letterSpacing: 2, textTransform: 'uppercase', textDecoration: 'none',
              cursor: 'pointer', transition: 'all 0.2s', clipPath: 'polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%)' }}
            onMouseEnter={e => e.target.style.background = '#fcd34d'}
            onMouseLeave={e => e.target.style.background = '#f59e0b'}>
            View Projects
          </a>
          <a href="mailto:ankitsuthar.ca@gmail.com"
            style={{ padding: isMobile ? '12px 24px' : '14px 32px', background: 'transparent', color: '#06b6d4', fontFamily: 'Space Grotesk, sans-serif',
              fontWeight: 700, fontSize: 13, letterSpacing: 2, textTransform: 'uppercase', textDecoration: 'none',
              border: '1px solid rgba(6,182,212,0.5)', cursor: 'pointer', transition: 'all 0.2s',
              clipPath: 'polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%)' }}
            onMouseEnter={e => { e.target.style.borderColor = '#06b6d4'; e.target.style.background = 'rgba(6,182,212,0.1)'; }}
            onMouseLeave={e => { e.target.style.borderColor = 'rgba(6,182,212,0.5)'; e.target.style.background = 'transparent'; }}>
            Hire Me
          </a>
        </div>
      </div>
    </section>
  );
};

// ─── SECTION HEADER ──────────────────────────────────────────────────────────
const SectionHeader = ({ label, title }) => (
  <div style={{ textAlign: 'center', marginBottom: 64 }}>
    <div style={{ fontFamily: 'JetBrains Mono, monospace', color: '#7c3aed', fontSize: 11, letterSpacing: 4, marginBottom: 12 }}>{label}</div>
    <h2 style={{ fontFamily: 'Space Grotesk, sans-serif', fontWeight: 800, fontSize: 'clamp(36px,5vw,64px)',
      color: '#fff', margin: 0, letterSpacing: -1 }}>{title}</h2>
    <div style={{ width: 60, height: 2, background: '#f59e0b', margin: '20px auto 0', boxShadow: '0 0 14px rgba(245,158,11,0.6)' }} />
  </div>
);

// ─── SKILL CARD ──────────────────────────────────────────────────────────────
const SK = { IDLE: 'idle', MOUNT: 'mount', BURST: 'burst', RETURN: 'return' };
const SK_SIZE = 38, SK_COLS = 5, SK_ROWS = 5;
const SK_FW = SK_SIZE / SK_COLS, SK_FH = SK_SIZE / SK_ROWS;

const SkillCard = ({ icon, name }) => {
  const [hov, setHov] = React.useState(false);
  const [phase, setPhase] = React.useState(SK.IDLE);
  const t1 = React.useRef(null);
  const t2 = React.useRef(null);

  const frags = React.useMemo(() => (
    Array.from({ length: SK_COLS * SK_ROWS }, (_, i) => {
      const col = i % SK_COLS, row = Math.floor(i / SK_COLS);
      const cx = (col + 0.5) / SK_COLS - 0.5;
      const cy = (row + 0.5) / SK_ROWS - 0.5;
      const angle = Math.atan2(cy, cx) + (Math.random() - 0.5) * 1.1;
      const dist  = 28 + Math.random() * 62;
      return {
        tx: Math.cos(angle) * dist, ty: Math.sin(angle) * dist,
        rot: (Math.random() - 0.5) * 320,
        delay: i * 5 + Math.random() * 18,
        col, row,
      };
    })
  ), []);

  const trigger = () => {
    if (phase !== SK.IDLE) return;
    setPhase(SK.MOUNT);
    requestAnimationFrame(() => requestAnimationFrame(() => setPhase(SK.BURST)));
    clearTimeout(t1.current);
    clearTimeout(t2.current);
    t1.current = setTimeout(() => {
      setPhase(SK.RETURN);
      t2.current = setTimeout(() => setPhase(SK.IDLE), 380);
    }, 5000);
  };

  React.useEffect(() => () => { clearTimeout(t1.current); clearTimeout(t2.current); }, []);

  const showFrags = phase !== SK.IDLE;
  const exploded  = phase === SK.BURST;
  const returning = phase === SK.RETURN;
  const animating = exploded || returning;

  return (
    <div onMouseEnter={() => setHov(true)}
         onMouseLeave={() => setHov(false)}
         onClick={trigger}
      style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8,
        padding: '8px 12px', cursor: 'pointer', minWidth: 64 }}>

      <div style={{ position: 'relative', width: SK_SIZE, height: SK_SIZE }}>

        <div style={{ position: 'absolute', inset: 0, opacity: phase === SK.IDLE ? 1 : 0, transition: 'opacity 0.06s' }}>
          {icon
            ? <img src={icon} alt={name} style={{ width: SK_SIZE, height: SK_SIZE, objectFit: 'contain',
                filter: hov ? 'brightness(1.3) drop-shadow(0 0 6px rgba(124,58,237,0.8))' : 'brightness(0.75)',
                transition: 'filter 0.25s' }} />
            : <div style={{ width: SK_SIZE, height: SK_SIZE, display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: 'JetBrains Mono, monospace', fontSize: 15, fontWeight: 700,
                color: hov ? '#06b6d4' : '#7c3aed', transition: 'color 0.25s' }}>
                {name.slice(0, 2).toUpperCase()}
              </div>
          }
        </div>

        {showFrags && frags.map((f, i) => (
          <div key={i} style={{
            position: 'absolute',
            left: f.col * SK_FW, top: f.row * SK_FH,
            width: SK_FW + 0.5, height: SK_FH + 0.5,
            backgroundImage:    icon ? `url(${icon})` : 'none',
            backgroundSize:     `${SK_SIZE}px ${SK_SIZE}px`,
            backgroundPosition: `-${f.col * SK_FW}px -${f.row * SK_FH}px`,
            backgroundColor:    !icon ? '#7c3aed' : 'transparent',
            transform: exploded ? `translate(${f.tx}px,${f.ty}px) rotate(${f.rot}deg)` : 'translate(0,0) rotate(0deg)',
            transition: returning
              ? `transform 0.35s cubic-bezier(0.6,0,0.4,1) ${f.delay * 0.08}ms, opacity 0.35s`
              : exploded
                ? `transform 4.85s cubic-bezier(0.03,0.75,0.12,1) ${f.delay}ms`
                : 'none',
            opacity: exploded ? 0.92 : 1,
            filter: 'brightness(1.25) drop-shadow(0 0 3px rgba(124,58,237,0.65))',
            willChange: animating ? 'transform' : 'auto',
          }} />
        ))}
      </div>

      <span style={{ fontFamily: 'Space Grotesk, sans-serif', fontSize: 13, letterSpacing: 0.5,
        color: hov ? '#fff' : 'rgba(255,255,255,0.45)', textAlign: 'center', transition: 'color 0.25s' }}>
        {name}
      </span>
    </div>
  );
};

const SkillGroup = ({ title, skills }) => (
  <div style={{ marginBottom: 48 }}>
    <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: '#7c3aed', letterSpacing: 3,
      textTransform: 'uppercase', marginBottom: 20, paddingBottom: 8, borderBottom: '1px solid rgba(124,58,237,0.15)' }}>
      {title}
    </div>
    <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
      {skills.map(s => <SkillCard key={s.name} {...s} />)}
    </div>
  </div>
);

const Skills = () => {
  const groups = [
    { title: 'Languages', skills: [
      { name: 'C#', icon: 'https://cdn.jsdelivr.net/gh/devicons/devicon/icons/csharp/csharp-original.svg' },
      { name: 'Python', icon: 'https://cdn.jsdelivr.net/gh/devicons/devicon/icons/python/python-original.svg' },
      { name: 'Java', icon: 'https://cdn.jsdelivr.net/gh/devicons/devicon/icons/java/java-original.svg' },
      { name: 'JavaScript', icon: 'https://cdn.jsdelivr.net/gh/devicons/devicon/icons/javascript/javascript-original.svg' },
      { name: 'TypeScript', icon: 'https://cdn.jsdelivr.net/gh/devicons/devicon/icons/typescript/typescript-original.svg' },
    ]},
    { title: 'Game Engines & Frameworks', skills: [
      { name: 'Unity', icon: 'https://cdn.simpleicons.org/unity/white' },
      { name: 'Unreal Engine', icon: 'https://cdn.simpleicons.org/unrealengine/white' },
      { name: 'libGDX', icon: '' },
    ]},
    { title: 'Version Control & Collaboration', skills: [
      { name: 'Git', icon: 'https://cdn.jsdelivr.net/gh/devicons/devicon/icons/git/git-original.svg' },
      { name: 'Trello', icon: 'https://cdn.jsdelivr.net/gh/devicons/devicon/icons/trello/trello-plain.svg' },
      { name: 'Miro', icon: '' },
    ]},
    { title: 'IDEs & Dev Tools', skills: [
      { name: 'VS Code', icon: 'https://cdn.jsdelivr.net/gh/devicons/devicon/icons/vscode/vscode-original.svg' },
      { name: 'Visual Studio', icon: 'https://cdn.jsdelivr.net/gh/devicons/devicon/icons/visualstudio/visualstudio-plain.svg' },
      { name: 'Android Studio', icon: 'https://cdn.jsdelivr.net/gh/devicons/devicon/icons/androidstudio/androidstudio-original.svg' },
    ]},
    { title: '3D & Graphics', skills: [
      { name: 'Blender', icon: 'https://cdn.jsdelivr.net/gh/devicons/devicon/icons/blender/blender-original.svg' },
      { name: 'Photoshop', icon: 'https://cdn.jsdelivr.net/gh/devicons/devicon/icons/photoshop/photoshop-plain.svg' },
      { name: 'Figma', icon: 'https://cdn.jsdelivr.net/gh/devicons/devicon/icons/figma/figma-original.svg' },
    ]},
    { title: 'AI Tools', skills: [
      { name: 'Google Stitch', icon: '' },
      { name: 'Claude Code', icon: 'https://cdn.simpleicons.org/anthropic/white' },
      { name: 'GitHub Copilot', icon: 'https://cdn.simpleicons.org/githubcopilot/white' },
      { name: 'Meshy AI', icon: '' },
    ]},
  ];

  const { isMobile, isTablet } = useBreakpoint();
  return (
    <section id="skills" data-screen-label="03 Skills" style={{ padding: secPad(isMobile, isTablet), borderTop: '1px solid rgba(124,58,237,0.08)' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <SectionHeader label="// WHAT I USE" title="Skills" />
        <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 12, color: '#7c3aed',
          letterSpacing: 2, textAlign: 'center', marginTop: -24, marginBottom: 40 }}>
          // Try not to break them ^_^
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', gap: '0 80px' }}>
          {groups.map(g => <SkillGroup key={g.title} {...g} />)}
        </div>
        
      </div>
    </section>
  );
};

// ─── VIDEOS ──────────────────────────────────────────────────────────────────
const VideoEmbed = ({ title, label, sublabel, videoId }) => (
  <div style={{ flex: 1, minWidth: 280 }}>
    <div style={{ aspectRatio: '16/9', border: '1px solid rgba(124,58,237,0.25)', overflow: 'hidden', position: 'relative' }}>
      <iframe
        width="100%" height="100%"
        src={`https://www.youtube.com/embed/${videoId}`}
        title={title}
        frameBorder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
        allowFullScreen
        style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}
      />
    </div>
    <div style={{ marginTop: 14 }}>
      <div style={{ fontFamily: 'Space Grotesk, sans-serif', fontWeight: 700, color: '#fff', fontSize: 18 }}>{label}</div>
      <div style={{ fontFamily: 'Space Grotesk, sans-serif', fontSize: 15, color: 'rgba(255,255,255,0.4)', marginTop: 4 }}>{sublabel}</div>
    </div>
  </div>
);

const Videos = () => {
  const { isMobile, isTablet } = useBreakpoint();
  return (
  <section id="videos" data-screen-label="02 Videos" style={{ padding: secPad(isMobile, isTablet), borderTop: '1px solid rgba(124,58,237,0.08)' }}>
    <div style={{ maxWidth: 1100, margin: '0 auto' }}>
      <SectionHeader label="// WHAT I DID" title="SHOWCASE" />
      <div style={{ display: 'flex', gap: isMobile ? 28 : 40, flexWrap: 'wrap' }}>
        <VideoEmbed title="Portfolio Reel" label="Game Programmer Portfolio" sublabel="Ankit Suthar" videoId="k7M63XfWSvY" />
        <VideoEmbed title="Gameplay Features" label="Gameplay Features : Showcase" sublabel="Ankit Suthar" videoId="IgoSZAaKPic" />
      </div>
      
    </div>
  </section>
  );
};

// ─── PROJECTS ────────────────────────────────────────────────────────────────
const ProjectCard = ({ title, desc, tags, videoId, gifUrl, details, index }) => {
  const [open, setOpen] = React.useState(false);
  const [revealed, setRevealed] = React.useState(0);
  const timersRef = React.useRef([]);
  const { isMobile, isTablet } = useBreakpoint();
  const isEven = index % 2 === 0;
  const stacked = isMobile || isTablet;

  const lines = React.useMemo(() => {
    if (!details) return [];
    const arr = [
      { t: 'boot' },
      { t: 'meta' },
      { t: 'engine' },
      { t: 'div' },
      { t: 'sec', text: 'SYSTEMS_DEVELOPED' },
      ...details.systems.map(s => ({ t: 'item', text: s })),
    ];
    if (details.ai) {
      arr.push({ t: 'div' }, { t: 'sec', text: 'AI_ARCHITECTURE' }, { t: 'ai' });
    }
    arr.push({ t: 'div' }, { t: 'deploy' });
    return arr;
  }, [details]);

  React.useEffect(() => {
    timersRef.current.forEach(clearTimeout);
    timersRef.current = [];
    if (!open) { setRevealed(0); return; }
    lines.forEach((_, i) => {
      timersRef.current.push(setTimeout(() => setRevealed(i + 1), i * 90 + 60));
    });
  }, [open]);

  React.useEffect(() => () => timersRef.current.forEach(clearTimeout), []);

  const renderLine = (line, i) => {
    const vis = { opacity: 1, transform: 'translateY(0)', transition: 'opacity 0.25s, transform 0.25s' };
    const hid = { opacity: 0, transform: 'translateY(6px)' };
    const style = i < revealed ? vis : hid;
    const mono = { fontFamily: 'JetBrains Mono, monospace' };

    if (line.t === 'boot') return (
      <div key={i} style={{ ...style, ...mono, fontSize: 12, color: '#06b6d4', letterSpacing: 2, marginBottom: 18, display: 'flex', alignItems: 'center', gap: 12 }}>
        <span style={{ color: '#7c3aed' }}>▶</span> LOADING MISSION_DATA
        <span style={{ flex: 1, height: 1, background: 'linear-gradient(90deg, rgba(6,182,212,0.5), transparent)' }} />
        <span style={{ color: '#10b981' }}>CLASSIFIED</span>
      </div>
    );
    if (line.t === 'div') return (
      <div key={i} style={{ ...style, height: 1, background: 'rgba(124,58,237,0.15)', margin: '14px 0' }} />
    );
    if (line.t === 'meta') return (
      <div key={i} style={{ ...style, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, marginBottom: 14 }}>
        <div>
          <div style={{ ...mono, fontSize: 10, color: '#7c3aed', letterSpacing: 3, marginBottom: 6 }}>MISSION_TYPE</div>
          <div style={{ ...mono, fontSize: 13, color: '#06b6d4', fontWeight: 700 }}>{details.type}</div>
        </div>
        <div>
          <div style={{ ...mono, fontSize: 10, color: '#7c3aed', letterSpacing: 3, marginBottom: 6 }}>ROLE</div>
          <div style={{ ...mono, fontSize: 13, color: '#f59e0b', fontWeight: 700 }}>{details.role}</div>
        </div>
      </div>
    );
    if (line.t === 'engine') return (
      <div key={i} style={{ ...style, display: 'flex', alignItems: 'center', gap: 12, marginBottom: 4 }}>
        <span style={{ ...mono, fontSize: 10, color: '#7c3aed', letterSpacing: 3 }}>ENGINE</span>
        <span style={{ flex: 1, height: 1, background: 'rgba(124,58,237,0.2)' }} />
        <span style={{ ...mono, fontSize: 13, color: 'rgba(255,255,255,0.7)' }}>{details.engine}</span>
      </div>
    );
    if (line.t === 'sec') return (
      <div key={i} style={{ ...style, ...mono, fontSize: 10, color: '#7c3aed', letterSpacing: 3, marginBottom: 10, marginTop: 4 }}>
        {line.text}
      </div>
    );
    if (line.t === 'item') return (
      <div key={i} style={{ ...style, display: 'flex', gap: 10, marginBottom: 7, alignItems: 'flex-start' }}>
        <span style={{ color: '#7c3aed', marginTop: 2, flexShrink: 0 }}>▸</span>
        <span style={{ fontFamily: 'Space Grotesk, sans-serif', fontSize: 14, color: 'rgba(255,255,255,0.7)', lineHeight: 1.6 }}>{line.text}</span>
      </div>
    );
    if (line.t === 'ai') return (
      <div key={i} style={{ ...style }}>
        <div style={{ fontFamily: 'Space Grotesk, sans-serif', fontSize: 13, color: 'rgba(255,255,255,0.5)', marginBottom: 12 }}>
          {details.ai.name}
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 0, flexWrap: 'wrap', rowGap: 8 }}>
          {details.ai.states.map((s, si) => (
            <React.Fragment key={s}>
              <div style={{ ...mono, fontSize: 11, color: '#060812', background: si === details.ai.states.length - 1 ? '#f59e0b' : '#7c3aed',
                padding: '4px 10px', letterSpacing: 1, fontWeight: 700 }}>{s}</div>
              {si < details.ai.states.length - 1 && (
                <div style={{ color: 'rgba(124,58,237,0.5)', fontSize: 16, padding: '0 4px' }}>→</div>
              )}
            </React.Fragment>
          ))}
        </div>
      </div>
    );
    if (line.t === 'deploy') return (
      <div key={i} style={{ ...style, display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <span style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10, color: '#7c3aed', letterSpacing: 3 }}>DEPLOY</span>
          <span style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 13, color: 'rgba(255,255,255,0.45)' }}>{details.deployLabel}</span>
        </div>
        {details.link && (
          <a href={details.link} target="_blank" rel="noopener noreferrer"
            style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 12, color: '#060812', background: '#10b981',
              padding: '6px 16px', textDecoration: 'none', letterSpacing: 2, fontWeight: 700, transition: 'background 0.2s' }}
            onMouseEnter={e => e.target.style.background = '#34d399'}
            onMouseLeave={e => e.target.style.background = '#10b981'}>
            LAUNCH ↗
          </a>
        )}
      </div>
    );
    return null;
  };

  return (
    <div data-screen-label={`project-${title}`} style={{ border: '1px solid rgba(124,58,237,0.15)', marginBottom: 40, transition: 'border-color 0.3s' }}
      onMouseEnter={e => e.currentTarget.style.borderColor = 'rgba(124,58,237,0.5)'}
      onMouseLeave={e => e.currentTarget.style.borderColor = 'rgba(124,58,237,0.15)'}>

      <div style={{ display: 'grid', gridTemplateColumns: stacked ? '1fr' : '1fr 1fr' }}>

        {/* Info panel */}
        <div style={{ padding: stacked ? '24px 18px' : '40px 36px', background: 'rgba(124,58,237,0.08)',
          order: stacked ? 0 : isEven ? 0 : 1,
          display: 'flex', flexDirection: 'column', justifyContent: 'space-between', gap: 20 }}>
          <div>
            <h3 style={{ fontFamily: 'Space Grotesk, sans-serif', fontSize: stacked ? 22 : 28, fontWeight: 800, color: '#fff', margin: '0 0 12px' }}>{title}</h3>
            <p style={{ fontFamily: 'Space Grotesk, sans-serif', fontSize: stacked ? 15 : 17, color: 'rgba(255,255,255,0.65)', lineHeight: 1.7, margin: 0 }}>{desc}</p>
          </div>
          <div>
            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginBottom: 16 }}>
              {tags.map(t => (
                <span key={t} style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: '#7c3aed',
                  border: '1px solid rgba(124,58,237,0.35)', padding: '3px 8px', letterSpacing: 1 }}>{t}</span>
              ))}
            </div>
            <button onClick={() => setOpen(!open)}
              style={{ background: open ? '#7c3aed' : 'transparent', color: open ? '#060812' : '#7c3aed',
                border: '1px solid #7c3aed', padding: '10px 20px', fontFamily: 'Space Grotesk, sans-serif',
                fontWeight: 700, fontSize: 13, letterSpacing: 2, textTransform: 'uppercase', cursor: 'pointer',
                transition: 'all 0.2s', width: stacked ? '100%' : 'auto' }}>
              {open ? 'CLOSE FILE ▲' : 'OPEN FILE ▼'}
            </button>
          </div>
        </div>

        {/* Video / GIF embed */}
        <div style={{ order: stacked ? 1 : isEven ? 1 : 0,
          height: stacked ? 220 : 'auto', minHeight: stacked ? 220 : 280,
          position: 'relative', overflow: 'hidden', background: '#05080a' }}>
          {gifUrl ? (
            <img src={gifUrl} alt={title} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
          ) : (
            <iframe width="100%" height="100%"
              src={`https://www.youtube.com/embed/${videoId}`} title={title}
              frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
              allowFullScreen style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }} />
          )}
        </div>
      </div>

      {/* Mission terminal drawer */}
      <div style={{ maxHeight: open ? 1000 : 0, overflow: 'hidden', transition: 'max-height 0.5s cubic-bezier(0.4,0,0.2,1)' }}>
        <div style={{ padding: stacked ? '18px 16px 22px' : '28px 36px 32px',
          background: 'rgba(2,4,12,0.92)', borderTop: '1px solid rgba(124,58,237,0.2)', position: 'relative', overflow: 'hidden' }}>
          <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none',
            background: 'repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(124,58,237,0.015) 3px, rgba(124,58,237,0.015) 4px)' }} />
          <div style={{ position: 'relative' }}>
            {lines.map((line, i) => renderLine(line, i))}
          </div>
        </div>
      </div>
    </div>
  );
};

const Projects = () => {
  const projects = [
    {
      title: 'Gilded Darkness',
      videoId: 'EFoVa5ajcHk',
      desc: '"Gilded Darkness: The SpiderShark\'s Curse" is a horror game. In this game, the player becomes a treasure hunter exploring a cave. They must locate items and escape with a golden artifact while avoiding the spider-shark.',
      tags: ['Unity', 'C#', 'Horror', 'AI Systems'],
      details: {
        type: '3D HORROR · FIRST PERSON',
        role: 'PROGRAMMER & LEVEL DESIGNER',
        engine: 'Unity · URP · C#',
        systems: [
          'Level design & environment prototyping using Unity ProBuilder',
          'Smooth ladder traversal mechanic via DoTween positional transitions',
          'URP graphics pipeline — scene performance & lighting optimization',
          'Iterative playtesting & bug-fix cycles across all gameplay systems',
        ],
        ai: {
          name: 'Sound-Tracking Underwater Creature',
          states: ['PATROL', 'DISTRACTION', 'INVESTIGATE', 'CHASE', 'JUMP SCARE'],
        },
        deployLabel: 'ray-casting.itch.io/gilded-darkness',
        link: 'https://ray-casting.itch.io/gilded-darkness',
      },
    },
    {
      title: 'NEOCAST',
      videoId: '-i1d0mQsyqY',
      desc: '"Neocast" is a 2D platformer-shooting game. In this game, the player controls a spinning wheel with physics-based movement while encountering various enemies.',
      tags: ['Unity', 'C#', 'Physics', '2D Platformer'],
      details: {
        type: '2D PLATFORMER · SHOOTER',
        role: 'SOLE DEVELOPER',
        engine: 'Unity · C#',
        systems: [
          'Physics-based spinning wheel locomotion & collision response',
          'Modular enemy types with distinct attack & movement patterns',
          'Shooting mechanics with projectile pooling for performance',
          'Level progression with checkpoint & respawn systems',
        ],
        ai: null,
        deployLabel: 'ray-casting.itch.io',
        link: 'https://ray-casting.itch.io/',
      },
    },
    {
      title: 'AI Procedural Building Generator',
      gifUrl: 'https://raw.githubusercontent.com/ankix86/AI-LevelDesigner/main/Video.gif',
      desc: 'Automatically constructs full 3D indoor environments in Unity from AI-generated JSON. Describe a building to the AI, it outputs a structured layout, and Unity procedurally builds rooms, walls, floors, doors, and ceilings — entirely from that data.',
      tags: ['Unity', 'C#', 'AI', 'Procedural Generation', 'JSON'],
      details: {
        type: 'TOOL · PROCEDURAL GENERATION',
        role: 'SOLE DEVELOPER',
        engine: 'Unity · C# · AI (JSON Schema)',
        systems: [
          'JSON-driven room construction — floors, walls, ceilings built from schema data',
          'Automatic door carving — walls split & door objects placed with correct rotation',
          'Shared wall detection — overlapping boundaries merged to prevent duplicate geometry',
          'Multi-floor architecture ready for stair connections & vertical expansion',
          'Extendable JSON schema supports props, windows & lighting automation',
        ],
        ai: {
          name: 'AI Level Architect (Prompt-Driven)',
          states: ['DESCRIBE', 'GENERATE JSON', 'PARSE', 'BUILD ROOMS', 'CARVE DOORS', 'MERGE WALLS'],
        },
        deployLabel: 'github.com/ankix86/AI-LevelDesigner',
        link: 'https://github.com/ankix86/AI-LevelDesigner',
      },
    },
    {
      title: 'Multiplayer Replay System',
      videoId: 'IrSLCcsCumE',
      desc: 'This prototype project utilizes Photon Network for multiplayer functionality. When a client hosts a room, another client can join it, enabling multiplayer gameplay. Additionally, the project includes a feature to record user input data into a JSON file, allowing for replayability.',
      tags: ['Unity', 'C#', 'Photon', 'Multiplayer', 'JSON'],
      details: {
        type: 'MULTIPLAYER PROTOTYPE',
        role: 'SOLE DEVELOPER',
        engine: 'Unity · Photon PUN · C#',
        systems: [
          'Photon Network room hosting & client join flow',
          'Real-time multiplayer synchronisation across connected clients',
          'Input recording serialised to JSON for full-session replay',
          'Match history browser with replay playback selection',
        ],
        ai: {
          name: 'Match Session State Machine',
          states: ['LOBBY', 'MATCH', 'RECORDING', 'REPLAY', 'END'],
        },
        deployLabel: 'prototype — not public',
        link: null,
      },
    },
  ];

  const { isMobile, isTablet } = useBreakpoint();
  return (
    <section id="projects" data-screen-label="04 Projects" style={{ padding: secPad(isMobile, isTablet), borderTop: '1px solid rgba(124,58,237,0.08)' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <SectionHeader label="// WHAT I BUILT" title="Projects" />
        {projects.map((p, i) => <ProjectCard key={p.title} {...p} index={i} />)}
         </div>
      <div style={{ marginTop: 48, textAlign: 'center' }}>
        <a href="https://ray-casting.itch.io/" target="_blank" rel="noopener noreferrer"
          style={{ display: 'inline-flex', alignItems: 'center', gap: 10, color: '#7c3aed',
            fontFamily: 'Space Grotesk, sans-serif', fontSize: 16, letterSpacing: 1, textDecoration: 'none',
            border: '1px solid rgba(124,58,237,0.35)', padding: '12px 28px',
            transition: 'all 0.2s' }}
          onMouseEnter={e => e.currentTarget.style.background = 'rgba(124,58,237,0.1)'}
          onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
          🎮 View all projects on itch.io
        </a>
      </div>
    </section>
  );
};

// ─── EXPERIENCE ──────────────────────────────────────────────────────────────
const ExpCard = ({ period, role, company, desc, type }) => (
  <div style={{ position: 'relative', paddingLeft: 40, marginBottom: 56 }}>
    {/* Timeline dot */}
    <div style={{ position: 'absolute', left: 0, top: 6, width: 12, height: 12,
      border: '2px solid #7c3aed', background: type === 'full' ? '#7c3aed' : 'transparent',
      boxShadow: '0 0 12px rgba(124,58,237,0.6)' }} />
    <div style={{ position: 'absolute', left: 5, top: 18, width: 1, height: 'calc(100% + 20px)', background: 'rgba(124,58,237,0.2)' }} />

    <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 13, color: '#7c3aed', letterSpacing: 2, marginBottom: 8 }}>{period}</div>
    <h3 style={{ fontFamily: 'Space Grotesk, sans-serif', fontWeight: 800, fontSize: 22, color: '#fff', margin: '0 0 4px', letterSpacing: 0.5 }}>{role}</h3>
    <div style={{ fontFamily: 'Space Grotesk, sans-serif', fontSize: 16, color: 'rgba(255,255,255,0.4)', marginBottom: 16, letterSpacing: 1 }}>{company}</div>
    <div style={{ background: 'rgba(124,58,237,0.04)', border: '1px solid rgba(124,58,237,0.12)', padding: '20px 24px',
      fontFamily: 'Space Grotesk, sans-serif', fontSize: 17, color: 'rgba(255,255,255,0.65)', lineHeight: 1.8 }}>
      {/* Screw corners */}
      <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 12 }}>
        {[0,1].map(i => <div key={i} style={{ width: 6, height: 6, borderRadius: '50%', border: '1px solid rgba(124,58,237,0.4)' }} />)}
      </div>
      {desc}
      <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 12 }}>
        {[0,1].map(i => <div key={i} style={{ width: 6, height: 6, borderRadius: '50%', border: '1px solid rgba(124,58,237,0.4)' }} />)}
      </div>
    </div>
  </div>
);

const Experience = () => {
  const { isMobile, isTablet } = useBreakpoint();
  return (
  <section id="experience" data-screen-label="05 Experience" style={{ padding: secPad(isMobile, isTablet), borderTop: '1px solid rgba(124,58,237,0.08)' }}>
    <div style={{ maxWidth: 800, margin: '0 auto' }}>
      <SectionHeader label="// WHERE I WORKED" title="Experience" />
      <ExpCard
        period="AUGUST 2022 — OCTOBER 2024"
        role="Unity Developer — Full-time"
        company="Wharf Street Studios"
        type="full"
        desc="Worked as a Unity Developer for 2+ years, contributing to the development of a multiplayer mobile game. Responsibilities included research & development, designing and implementing various character AI systems, handling localization, and optimizing the overall gameplay experience."
      />
      <ExpCard
        period="FEBRUARY 2022 — MAY 2022"
        role="Unity Developer — Intern"
        company="Wharf Street Studios"
        type="intern"
        desc="Completed a 6-month internship focused on creating prototypes and testing new features. Developed security-focused native plugins in Java and integrated them into Unity mobile games. Collaborated with artists and fellow developers to successfully complete various projects."
      />
    </div>
  </section>
  );
};

// ─── ABOUT ───────────────────────────────────────────────────────────────────
const About = () => {
  const { isMobile, isTablet } = useBreakpoint();
  return (
  <section id="about" data-screen-label="07 About Me" style={{ padding: secPad(isMobile, isTablet), borderTop: '1px solid rgba(124,58,237,0.08)' }}>
    <div style={{ maxWidth: 800, margin: '0 auto', textAlign: 'center' }}>
      <SectionHeader label="// WHO I AM" title="About Me" />
      <p style={{ fontFamily: 'Space Grotesk, sans-serif', fontSize: isMobile ? 16 : 19, color: 'rgba(255,255,255,0.65)', lineHeight: 1.9, margin: '0 auto 24px', maxWidth: 680 }}>
        I'm a gameplay programmer passionate about crafting systems that make games feel <em style={{ color: '#7c3aed', fontStyle: 'normal' }}>alive</em>. From AI behaviour trees to multiplayer networking, I love the technical craft behind great player experiences.
      </p>
      <p style={{ fontFamily: 'Space Grotesk, sans-serif', fontSize: isMobile ? 16 : 19, color: 'rgba(255,255,255,0.65)', lineHeight: 1.9, margin: '0 auto 40px', maxWidth: 680 }}>
        With 2+ years of professional Unity experience and a broad toolkit spanning engines, tools, and AI-assisted workflows, I bring both depth and adaptability to any team.
      </p>
      <div style={{ display: 'flex', gap: isMobile ? 16 : 24, justifyContent: 'center', flexWrap: 'wrap' }}>
        {[
          { label: '2+', sub: 'Years Pro Experience' },
          { label: '5+', sub: 'Game Jams' },
        ].map(s => (
          <div key={s.label} style={{ textAlign: 'center', padding: isMobile ? '16px 32px' : '20px 48px', border: '1px solid rgba(124,58,237,0.2)' }}>
            <div style={{ fontFamily: 'Space Grotesk, sans-serif', fontSize: 36, fontWeight: 800, color: '#f59e0b' }}>{s.label}</div>
            <div style={{ fontFamily: 'Space Grotesk, sans-serif', fontSize: 13, color: 'rgba(255,255,255,0.4)', letterSpacing: 1, marginTop: 6 }}>{s.sub}</div>
          </div>
        ))}
      </div>
    </div>
  </section>
  );
};

// ─── CONTACT ─────────────────────────────────────────────────────────────────
const CONTACT_KEY = 'aa3b37fe-a70a-456d-a759-411d16de934f'; 

const Contact = () => {
  const [form, setForm] = React.useState({ name: '', email: '', msg: '' });
  const [sent, setSent] = React.useState(false);
  const [sending, setSending] = React.useState(false);
  const [error, setError] = React.useState(false);
  const { isMobile, isTablet } = useBreakpoint();
  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));

  const handleSubmit = async (e) => {
    e.preventDefault();
    setSending(true);
    setError(false);
    try {
      const res = await fetch('https://api.web3forms.com/submit', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          access_key: CONTACT_KEY,
          name: form.name,
          email: form.email,
          message: form.msg,
          subject: 'Portfolio Contact: ' + form.name,
        }),
      });
      const data = await res.json();
      if (data.success) setSent(true);
      else setError(true);
    } catch {
      setError(true);
    } finally {
      setSending(false);
    }
  };

  const inputStyle = {
    width: '100%', background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(124,58,237,0.2)',
    color: '#fff', padding: '14px 18px', fontFamily: 'Space Grotesk, sans-serif', fontSize: isMobile ? 15 : 17,
    outline: 'none', transition: 'border-color 0.2s', boxSizing: 'border-box'
  };

  return (
    <section id="contact" data-screen-label="08 Contact" style={{ padding: secPad(isMobile, isTablet), borderTop: '1px solid rgba(124,58,237,0.08)' }}>
      <div style={{ maxWidth: 700, margin: '0 auto' }}>
        <SectionHeader label="// GET IN TOUCH" title="Contact" />
        {sent ? (
          <div style={{ textAlign: 'center', padding: '60px 0' }}>
            <div style={{ fontFamily: 'JetBrains Mono, monospace', color: '#7c3aed', fontSize: isMobile ? 15 : 20, letterSpacing: 2 }}>// MESSAGE_SENT.success</div>
            <p style={{ fontFamily: 'Space Grotesk, sans-serif', color: 'rgba(255,255,255,0.5)', marginTop: 16 }}>Thanks! I'll get back to you soon.</p>
          </div>
        ) : (
          <form onSubmit={handleSubmit}>
            <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: 20, marginBottom: 20 }}>
              <div>
                <label style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 12, color: '#7c3aed', letterSpacing: 2, display: 'block', marginBottom: 8 }}>NAME</label>
                <input value={form.name} onChange={e => set('name', e.target.value)} required placeholder="Your name" style={inputStyle}
                  onFocus={e => e.target.style.borderColor = '#7c3aed'} onBlur={e => e.target.style.borderColor = 'rgba(124,58,237,0.2)'}/>
              </div>
              <div>
                <label style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 12, color: '#7c3aed', letterSpacing: 2, display: 'block', marginBottom: 8 }}>EMAIL</label>
                <input type="email" value={form.email} onChange={e => set('email', e.target.value)} required placeholder="your@email.com" style={inputStyle}
                  onFocus={e => e.target.style.borderColor = '#7c3aed'} onBlur={e => e.target.style.borderColor = 'rgba(124,58,237,0.2)'}/>
              </div>
            </div>
            <div style={{ marginBottom: 28 }}>
              <label style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 12, color: '#7c3aed', letterSpacing: 2, display: 'block', marginBottom: 8 }}>MESSAGE</label>
              <textarea value={form.msg} onChange={e => set('msg', e.target.value)} required rows={6} placeholder="Tell me about the opportunity..."
                style={{ ...inputStyle, resize: 'vertical' }}
                onFocus={e => e.target.style.borderColor = '#7c3aed'} onBlur={e => e.target.style.borderColor = 'rgba(124,58,237,0.2)'}/>
            </div>
            {error && (
              <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 13, color: '#f87171', marginBottom: 16, letterSpacing: 1 }}>
                // ERROR — message failed to send. Try again or email directly.
              </div>
            )}
            <button type="submit" disabled={sending} style={{ width: '100%', padding: '16px', background: sending ? 'rgba(124,58,237,0.5)' : '#7c3aed', color: '#060812',
              border: 'none', fontFamily: 'Space Grotesk, sans-serif', fontWeight: 800, fontSize: 16,
              letterSpacing: 3, textTransform: 'uppercase', cursor: sending ? 'not-allowed' : 'pointer', transition: 'all 0.2s' }}
              onMouseEnter={e => { if (!sending) e.target.style.background = '#a7f3d0'; }}
              onMouseLeave={e => { if (!sending) e.target.style.background = '#7c3aed'; }}>
              {sending ? 'Sending...' : 'Send Message'}
            </button>
          </form>
        )}
        <div style={{ display: 'flex', gap: isMobile ? 16 : 24, marginTop: 40, justifyContent: 'center', flexWrap: 'wrap' }}>
          {[
            { label: 'Email', href: 'mailto:ankitsuthar.ca@gmail.com', val: 'ankitsuthar.ca@gmail.com' },
            { label: 'GitHub', href: 'https://github.com/ankix86', val: 'github.com/ankix86' },
            { label: 'itch.io', href: 'https://ray-casting.itch.io/', val: 'ray-casting.itch.io' },
          ].map(c => (
            <a key={c.label} href={c.href} target="_blank" rel="noopener noreferrer"
              style={{ textDecoration: 'none', textAlign: 'center', transition: 'color 0.2s' }}
              onMouseEnter={e => e.currentTarget.querySelector('.lv').style.color = '#7c3aed'}
              onMouseLeave={e => e.currentTarget.querySelector('.lv').style.color = 'rgba(255,255,255,0.5)'}>
              <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 12, color: '#7c3aed', letterSpacing: 2, marginBottom: 4 }}>{c.label}</div>
              <div className="lv" style={{ fontFamily: 'Space Grotesk, sans-serif', fontSize: isMobile ? 12 : 15, color: 'rgba(255,255,255,0.5)', transition: 'color 0.2s', wordBreak: 'break-all' }}>{c.val}</div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
};

// ─── EDUCATION ───────────────────────────────────────────────────────────────
const Education = () => {
  const { isMobile, isTablet } = useBreakpoint();
  return (
  <section id="education" data-screen-label="06 Education" style={{ padding: secPad(isMobile, isTablet), borderTop: '1px solid rgba(124,58,237,0.08)' }}>
    <div style={{ maxWidth: 800, margin: '0 auto' }}>
      <SectionHeader label="// ACADEMIC BACKGROUND" title="Education" />
      <div style={{ position: 'relative', paddingLeft: isMobile ? 28 : 40 }}>
        <div style={{ position: 'absolute', left: 0, top: 6, width: 12, height: 12,
          border: '2px solid #f59e0b', background: '#f59e0b', boxShadow: '0 0 12px rgba(245,158,11,0.6)' }} />
        <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 13, color: '#f59e0b', letterSpacing: 2, marginBottom: 8 }}>[ 2026 ]</div>
        <h3 style={{ fontFamily: 'Space Grotesk, sans-serif', fontWeight: 800, fontSize: isMobile ? 18 : 22, color: '#fff', margin: '0 0 4px' }}>[ Artificial Intelligence – Architecture, Design, and Implementation ]</h3>
        <div style={{ fontFamily: 'Space Grotesk, sans-serif', fontSize: isMobile ? 14 : 16, color: 'rgba(255,255,255,0.4)', marginBottom: 16, letterSpacing: 1 }}>[ Georgian Collage ] · [ Ontario ]</div>
        <div style={{ background: 'rgba(124,58,237,0.04)', border: '1px solid rgba(124,58,237,0.12)', padding: isMobile ? '14px 16px' : '20px 24px',
          fontFamily: 'Space Grotesk, sans-serif', fontSize: isMobile ? 14 : 17, color: 'rgba(255,255,255,0.45)', lineHeight: 1.8, fontStyle: 'italic' }}>
          Gained hands-on experience in training and fine-tuning AI models, developing machine learning algorithms, and working with Python for building and deploying intelligent systems.
        </div>
      </div>
    </div>
  </section>
  );
};

// ─── FOOTER ──────────────────────────────────────────────────────────────────
const Footer = () => {
  const { isMobile } = useBreakpoint();
  return (
  <footer style={{ borderTop: '1px solid rgba(124,58,237,0.15)', background: 'rgba(124,58,237,0.04)',
    padding: isMobile ? '20px 20px' : '28px 40px',
    display: 'flex', flexDirection: isMobile ? 'column' : 'row',
    alignItems: isMobile ? 'flex-start' : 'center',
    justifyContent: 'space-between', gap: 12 }}>
    <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: isMobile ? 11 : 14, color: 'rgba(255,255,255,0.3)', letterSpacing: 1 }}>
      © 2026 Ankit Suthar — <span style={{ color: '#7c3aed' }}>Gameplay Programmer</span>
    </div>
    <div style={{ display: 'flex', gap: 20 }}>
      {[
        { label: 'GitHub', href: 'https://github.com/ankix86' },
        { label: 'itch.io', href: 'https://ray-casting.itch.io/' },
        { label: 'Email', href: 'mailto:ankitsuthar.ca@gmail.com' },
      ].map(l => (
        <a key={l.label} href={l.href} target="_blank" rel="noopener noreferrer"
          style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 13, color: 'rgba(255,255,255,0.4)',
            textDecoration: 'none', letterSpacing: 1, transition: 'color 0.2s' }}
          onMouseEnter={e => e.target.style.color = '#7c3aed'}
          onMouseLeave={e => e.target.style.color = 'rgba(255,255,255,0.4)'}>
          {l.label}
        </a>
      ))}
    </div>
  </footer>
  );
};

// ─── APP ROOT ────────────────────────────────────────────────────────────────
const App = () => (
  <>
    <Nav />
    <Hero />
    <Videos />
    <Skills />
    <Projects />
    <Experience />
    <Education />
    <About />
    <Contact />
    <Footer />
  </>
);

Object.assign(window, { App });