script.js

/* === Portfolio JS · Fabricio Dias === */

// --- Nav ---
(function () {
  const nav = document.querySelector('.nav'), tog = document.querySelector('.nav-toggle'), lnk = document.querySelector('.nav-links');
  if (!nav) return;
  addEventListener('scroll', () => nav.classList.toggle('scrolled', scrollY > 40));
  if (tog && lnk) {
    tog.addEventListener('click', () => {
      lnk.classList.toggle('active');
      tog.classList.toggle('active');
    });
    lnk.querySelectorAll('a').forEach(a => a.addEventListener('click', () => {
      lnk.classList.remove('active');
      tog.classList.remove('active');
    }));
  }
})();

// --- Scroll reveal ---
(function () {
  const obs = new IntersectionObserver(entries => entries.forEach(en => { if (en.isIntersecting) en.target.classList.add('visible'); }), { threshold: 0.08, rootMargin: '0px 0px -40px 0px' });
  document.querySelectorAll('.fade-in').forEach(el => obs.observe(el));
})();

// --- Typing ---
(function () {
  const el = document.getElementById('typed');
  if (!el) return;
  const words = ['Desenvolvedor Full-Stack', 'Criador do Swipie', 'Dev Mobile e Web', 'Game dev nas horas vagas', 'Técnico em hardware desde os 13', 'Sustentação, automação, produto'];
  let wi = 0, ci = 0, del = false;
  function tick() {
    const w = words[wi];
    if (del) { el.textContent = w.substring(0, ci--); if (ci < 0) { del = false; wi = (wi + 1) % words.length; } }
    else { el.textContent = w.substring(0, ci++); if (ci > w.length) { del = true; setTimeout(tick, 1700); return; } }
    setTimeout(tick, del ? 28 : 62);
  }
  tick();
})();

// --- Swipe demo ---
(function () {
  const deck = document.getElementById('swipe-deck');
  if (!deck) return;
  const movies = [
    { title: 'Michael', year: '2026', genre: 'Musical/Drama', img: 'https://image.tmdb.org/t/p/w500/2FYFBgdNVVaUgVfNSh9z5WVTZ9y.jpg' },
    { title: 'O Diabo Veste Prada 2', year: '2026', genre: 'Comédia', img: 'https://image.tmdb.org/t/p/w500/clsvqIWM5ZILUcHjobQd4WtHZdu.jpg' },
    { title: 'Super Mario Galaxy: O Filme', year: '2026', genre: 'Animação', img: 'https://image.tmdb.org/t/p/w500/b3WeTp42eJSRuE4UZfyPCOJW4c.jpg' },
    { title: 'Cara de Um, Focinho de Outro', year: '2026', genre: 'Comédia/Ficção', img: 'https://image.tmdb.org/t/p/w500/ftPFJBGbldoWiiPrmesW96zBzdH.jpg' },
  ];
  let idx = 0;
  function renderCards() {
    deck.innerHTML = '';
    for (let i = Math.min(idx + 2, movies.length - 1); i >= idx; i--) {
      if (i >= movies.length) continue;
      const m = movies[i], card = document.createElement('div');
      card.className = 'swipe-card';
      card.style.zIndex = movies.length - i;
      if (i > idx) { card.style.transform = `scale(${1 - (i - idx) * .05}) translateY(${(i - idx) * 8}px)`; card.style.opacity = 1 - (i - idx) * .2; }
      card.innerHTML = `<div class="card-poster" style="background-image:url(${m.img})"></div><div class="card-info"><h4>${m.title}</h4><p>${m.year}${m.genre ? ' / ' + m.genre : ''}</p></div>`;
      const like = document.createElement('div'); like.className = 'swipe-feedback like'; like.textContent = 'MATCH!'; card.appendChild(like);
      const nope = document.createElement('div'); nope.className = 'swipe-feedback nope'; nope.textContent = 'SKIP'; card.appendChild(nope);
      if (i === idx) setupDrag(card, like, nope);
      deck.appendChild(card);
    }
    if (idx >= movies.length) {
      deck.innerHTML = '<p style="text-align:center;color:var(--green);font-family:var(--mono);font-size:.9rem;padding:40px">Match encontrado!</p>';
      setTimeout(() => { idx = 0; renderCards(); }, 2000);
    }
  }
  function setupDrag(card, likeEl, nopeEl) {
    let sx = 0, cx = 0, dragging = false;
    function start(e) { dragging = true; sx = e.type.includes('mouse') ? e.clientX : e.touches[0].clientX; card.style.transition = 'none'; }
    function move(e) {
      if (!dragging) return;
      if (e.type === 'touchmove') e.preventDefault();
      const x = (e.type.includes('mouse') ? e.clientX : e.touches[0].clientX) - sx; cx = x;
      card.style.transform = `translateX(${x}px) rotate(${x * .08}deg)`;
      if (x > 0) { likeEl.style.opacity = Math.min(Math.abs(x) / 80, 1); nopeEl.style.opacity = 0; }
      else { nopeEl.style.opacity = Math.min(Math.abs(x) / 80, 1); likeEl.style.opacity = 0; }
    }
    function end() {
      if (!dragging) return; dragging = false;
      card.style.transition = 'transform .3s ease,opacity .3s ease';
      if (Math.abs(cx) > 80) {
        card.style.transform = `translateX(${cx > 0 ? 500 : -500}px) rotate(${cx > 0 ? 30 : -30}deg)`;
        card.style.opacity = '0';
        setTimeout(() => { idx++; renderCards(); }, 300);
      } else { card.style.transform = ''; likeEl.style.opacity = 0; nopeEl.style.opacity = 0; }
      cx = 0;
    }
    card.addEventListener('mousedown', start); card.addEventListener('touchstart', start, { passive: false });
    addEventListener('mousemove', move); addEventListener('touchmove', move, { passive: false });
    addEventListener('mouseup', end); addEventListener('touchend', end);
  }
  renderCards();
})();

// --- Arcade idle preview canvas ---
(function () {
  const c = document.getElementById('arcade-canvas');
  if (!c) return;
  const ctx = c.getContext('2d');
  function sz() { const r = c.parentElement.getBoundingClientRect(); c.width = r.width; c.height = r.height; }
  sz(); addEventListener('resize', sz);
  const bugs = [];
  for (let i = 0; i < 10; i++) bugs.push({
    x: Math.random(), y: Math.random(), r: 8 + Math.random() * 10,
    vx: (Math.random() - .5) * .0016, vy: (Math.random() - .5) * .0016,
    hue: 250 + Math.random() * 40
  });
  (function loop() {
    ctx.clearRect(0, 0, c.width, c.height);
    ctx.strokeStyle = 'rgba(237,233,227,0.04)';
    for (let gx = 0; gx < c.width; gx += 26) { ctx.beginPath(); ctx.moveTo(gx, 0); ctx.lineTo(gx, c.height); ctx.stroke(); }
    for (let gy = 0; gy < c.height; gy += 26) { ctx.beginPath(); ctx.moveTo(0, gy); ctx.lineTo(c.width, gy); ctx.stroke(); }
    bugs.forEach(b => {
      b.x += b.vx; b.y += b.vy;
      if (b.x < 0 || b.x > 1) b.vx *= -1;
      if (b.y < 0 || b.y > 1) b.vy *= -1;
      const px = b.x * c.width, py = b.y * c.height;
      ctx.beginPath();
      for (let j = 0; j < 6; j++) {
        const ang = (Math.PI * 2 / 6) * j;
        const ex = px + Math.cos(ang) * b.r, ey = py + Math.sin(ang) * b.r;
        if (j === 0) ctx.moveTo(ex, ey); else ctx.lineTo(ex, ey);
      }
      ctx.closePath();
      ctx.fillStyle = `hsla(${b.hue},70%,60%,0.18)`;
      ctx.fill();
    });
    requestAnimationFrame(loop);
  })();
})();

// --- Git log (career timeline) ---
(function () {
  document.querySelectorAll('.gitlog-entry').forEach(entry => {
    entry.querySelector('.gitlog-head').addEventListener('click', () => {
      const wasOpen = entry.classList.contains('open');
      document.querySelectorAll('.gitlog-entry').forEach(e => e.classList.remove('open'));
      if (!wasOpen) entry.classList.add('open');
    });
  });
})();

// --- Hardware exploded view: drag each part into place, or click its skill ---
(function () {
  const skills = document.querySelectorAll('.hw-skill');
  const layers = document.querySelectorAll('.hw-layer[data-part]');
  const status = document.getElementById('hw-status');
  const fill = document.getElementById('hw-fill');
  const screen = document.getElementById('hw-screen');
  const pc = document.getElementById('hw-pc');
  if (!skills.length || !status || !pc) return;

  let installed = 0;
  const total = skills.length;
  const SNAP_THRESHOLD = 60;
  const msgs = {
    case: 'Gabinete preparado. Base estrutural montada.',
    mb: 'Placa-mãe encaixada. Circuitos conectados.',
    cpu: 'Processador no soquete. Pasta térmica aplicada.',
    ram: 'Memória RAM encaixada. Dual-channel ativo.',
    gpu: 'Placa de vídeo firme no slot. PCIe x16 conectado.',
    ssd: 'SSD NVMe parafusado. Armazenamento pronto.',
    psu: 'Fonte ligada. Alimentação estável.'
  };

  function layerFor(target) { return document.querySelector(`.hw-layer[data-part="${target}"]`); }
  function skillFor(target) { return document.querySelector(`.hw-skill[data-target="${target}"]`); }

  function completeInstall(target) {
    const skill = skillFor(target), layer = layerFor(target);
    if (!skill || skill.classList.contains('installed')) return;
    skill.classList.add('installed');
    layer.classList.remove('dragging', 'snap-near');
    layer.style.transform = '';
    layer.classList.add('installed');
    installed++;
    status.textContent = msgs[target] || 'Componente instalado.';
    fill.style.width = ((installed / total) * 100) + '%';
    if (installed >= total) {
      fill.style.background = 'var(--green)';
      status.textContent = 'Ligando...';
      setTimeout(startBoot, 600);
    }
  }

  skills.forEach(skill => {
    skill.addEventListener('click', () => completeInstall(skill.dataset.target));
  });

  // Drag-and-drop for every part except the case itself (the case is the frame, not a droppable piece)
  layers.forEach(layer => {
    const target = layer.dataset.part;
    if (target === 'case') return;

    let dragState = null;

    layer.addEventListener('pointerdown', e => {
      if (layer.classList.contains('installed')) return;
      layer.setPointerCapture(e.pointerId);
      const pcRect = pc.getBoundingClientRect();
      const curRect = layer.getBoundingClientRect();
      dragState = {
        grabDX: e.clientX - curRect.left,
        grabDY: e.clientY - curRect.top,
        staticLeft: pcRect.left + layer.offsetLeft,
        staticTop: pcRect.top + layer.offsetTop,
        w: layer.offsetWidth,
        h: layer.offsetHeight
      };
      layer.classList.add('dragging');
      e.preventDefault();
    });

    layer.addEventListener('pointermove', e => {
      if (!dragState) return;
      const left = e.clientX - dragState.grabDX;
      const top = e.clientY - dragState.grabDY;
      const tx = left - dragState.staticLeft;
      const ty = top - dragState.staticTop;
      layer.style.transform = `translate(${tx}px, ${ty}px)`;
      const dist = Math.hypot(tx, ty);
      layer.classList.toggle('snap-near', dist < SNAP_THRESHOLD * 1.3);
    });

    function endDrag(e) {
      if (!dragState) return;
      const left = e.clientX - dragState.grabDX;
      const top = e.clientY - dragState.grabDY;
      const tx = left - dragState.staticLeft;
      const ty = top - dragState.staticTop;
      const dist = Math.hypot(tx, ty);
      layer.classList.remove('dragging', 'snap-near');
      if (dist < SNAP_THRESHOLD) {
        completeInstall(target);
      } else {
        layer.style.transform = '';
      }
      dragState = null;
    }

    layer.addEventListener('pointerup', endDrag);
    layer.addEventListener('pointercancel', endDrag);
  });

  function startBoot() {
    if (!screen) return;
    screen.classList.add('on');
    const bios = document.getElementById('hw-bios');
    const xpLoad = document.getElementById('hw-xp-load');
    const xpDesktop = document.getElementById('hw-xp-desktop');

    setTimeout(() => {
      bios.classList.add('active');
      bios.querySelectorAll('.hw-boot-line').forEach(line => {
        const delay = parseInt(line.dataset.delay) || 0;
        setTimeout(() => line.classList.add('show'), delay);
      });

      setTimeout(() => {
        bios.classList.remove('active');
        xpLoad.classList.add('active');
        status.textContent = 'Carregando Windows XP...';

        setTimeout(() => {
          xpLoad.classList.remove('active');
          xpDesktop.classList.add('active');
          pc.classList.add('online');
          status.textContent = 'PC ligado. Clique na tela pra usar o computador.';
          screen.classList.add('clickable');
          status.style.color = 'var(--green)';
          updateClock();
          setInterval(updateClock, 60000);
        }, 3200);
      }, 2900);
    }, 400);
  }

  function updateClock() {
    const clock = document.getElementById('xp-clock');
    if (!clock) return;
    const now = new Date();
    clock.textContent = now.getHours().toString().padStart(2, '0') + ':' + now.getMinutes().toString().padStart(2, '0');
  }

  screen.addEventListener('click', () => {
    if (screen.classList.contains('clickable') && window.openFabricioOS) window.openFabricioOS();
  });
})();

// --- Fabricio OS: a small working desktop, unlocked once the PC boots ---
(function () {
  const modal = document.getElementById('os-modal');
  const desktop = document.getElementById('os-desktop');
  const windowsLayer = document.getElementById('os-windows');
  const taskButtons = document.getElementById('os-task-buttons');
  const startBtn = document.getElementById('os-start-btn');
  const startMenu = document.getElementById('os-start-menu');
  const shutdownBtn = document.getElementById('os-shutdown-btn');
  const shutdownScreen = document.getElementById('os-shutdown-screen');
  const exitBtn = document.getElementById('os-exit');
  const clockEl = document.getElementById('os-clock');
  if (!modal) return;

  let zTop = 10;
  const openWins = {};

  const CONTENT = {
    mypc: {
      title: 'Propriedades do sistema',
      width: 340,
      html: `<div class="os-props">
        <div class="os-props-row"><span>Registrado para</span><b>Fabricio Dias Galvão</b></div>
        <div class="os-props-row"><span>Sistema</span><b>Microsoft Windows XP Professional</b></div>
        <div class="os-props-row"><span>Processador</span><b>Intel Core i7-4770K @ 3.50GHz</b></div>
        <div class="os-props-row"><span>Memória</span><b>16384 MB RAM</b></div>
        <div class="os-props-row"><span>Placa de vídeo</span><b>NVIDIA GeForce GTX 1070</b></div>
        <div class="os-props-row"><span>Em produção</span><b>4+ anos</b></div>
        <div class="os-props-row"><span>Localização</span><b>São Paulo, Brasil</b></div>
      </div>`
    },
    bin: {
      title: 'Lixeira',
      width: 260,
      html: `<div class="os-bin"><p>0 itens na lixeira.</p><p>Os bugs não vêm parar aqui. Eles morrem no Arcade.</p></div>`
    },
    portfolio: {
      title: 'Portfolio',
      width: 300,
      html: `<div class="os-folder">
        <button class="os-file" data-goto="swipie"><span class="os-file-ico os-icon-app"></span>Swipie.lnk</button>
        <button class="os-file" data-goto="arcade"><span class="os-file-ico os-icon-bug"></span>BugShooter.exe</button>
        <button class="os-file" data-goto="projetos"><span class="os-file-ico os-icon-doc"></span>Projetos.lnk</button>
        <button class="os-file" data-goto="contato"><span class="os-file-ico os-icon-mail"></span>Contato.lnk</button>
      </div>`
    }
  };

  function openWindow(id) {
    if (openWins[id]) { focusWindow(id); return; }
    const def = CONTENT[id];
    if (!def) return;
    const count = Object.keys(openWins).length;
    const win = document.createElement('div');
    win.className = 'os-window';
    win.style.width = def.width + 'px';
    win.style.left = (30 + count * 26) + 'px';
    win.style.top = (24 + count * 26) + 'px';
    win.innerHTML = `<div class="os-titlebar"><span class="os-titlebar-label">${def.title}</span><button class="os-win-close" aria-label="Fechar">×</button></div><div class="os-window-body">${def.html}</div>`;
    windowsLayer.appendChild(win);
    openWins[id] = win;
    addTaskButton(id, def.title);
    focusWindow(id);
    bindDrag(win);
    win.querySelector('.os-win-close').addEventListener('click', () => closeWindow(id));
    win.addEventListener('mousedown', () => focusWindow(id));
    win.querySelectorAll('[data-goto]').forEach(btn => btn.addEventListener('click', () => goto(btn.dataset.goto)));
  }

  function closeWindow(id) {
    if (!openWins[id]) return;
    openWins[id].remove();
    delete openWins[id];
    const btn = taskButtons.querySelector(`[data-task="${id}"]`);
    if (btn) btn.remove();
  }

  function focusWindow(id) {
    const win = openWins[id];
    if (!win) return;
    win.style.zIndex = ++zTop;
    Array.from(taskButtons.children).forEach(b => b.classList.toggle('active', b.dataset.task === id));
  }

  function addTaskButton(id, title) {
    const btn = document.createElement('button');
    btn.className = 'os-task-btn';
    btn.dataset.task = id;
    btn.textContent = title;
    btn.addEventListener('click', () => focusWindow(id));
    taskButtons.appendChild(btn);
  }

  function bindDrag(win) {
    const bar = win.querySelector('.os-titlebar');
    let sx = 0, sy = 0, ox = 0, oy = 0, dragging = false;
    bar.addEventListener('pointerdown', e => {
      if (e.target.closest('.os-win-close')) return;
      dragging = true;
      bar.setPointerCapture(e.pointerId);
      sx = e.clientX; sy = e.clientY;
      ox = win.offsetLeft; oy = win.offsetTop;
    });
    bar.addEventListener('pointermove', e => {
      if (!dragging) return;
      const dRect = desktop.getBoundingClientRect();
      let nl = ox + (e.clientX - sx), nt = oy + (e.clientY - sy);
      nl = Math.max(-40, Math.min(dRect.width - 60, nl));
      nt = Math.max(0, Math.min(dRect.height - 30, nt));
      win.style.left = nl + 'px'; win.style.top = nt + 'px';
    });
    bar.addEventListener('pointerup', () => { dragging = false; });
    bar.addEventListener('pointercancel', () => { dragging = false; });
  }

  function goto(sectionId) {
    closeOS();
    setTimeout(() => {
      const el = document.getElementById(sectionId);
      if (el) el.scrollIntoView({ behavior: 'smooth' });
    }, 50);
  }

  let lastIconClick = { id: null, time: 0 };
  document.querySelectorAll('.os-icon').forEach(icon => {
    icon.addEventListener('click', e => {
      e.stopPropagation();
      document.querySelectorAll('.os-icon').forEach(i => i.classList.remove('selected'));
      icon.classList.add('selected');
      const id = icon.dataset.win, now = Date.now();
      if (lastIconClick.id === id && now - lastIconClick.time < 500) {
        openWindow(id);
        lastIconClick = { id: null, time: 0 };
      } else {
        lastIconClick = { id, time: now };
      }
    });
    icon.addEventListener('dblclick', () => openWindow(icon.dataset.win));
  });
  desktop.addEventListener('click', e => {
    if (e.target === desktop) document.querySelectorAll('.os-icon').forEach(i => i.classList.remove('selected'));
  });

  document.querySelectorAll('.os-start-item[data-win]').forEach(btn => {
    btn.addEventListener('click', () => { openWindow(btn.dataset.win); closeStartMenu(); });
  });
  const bugShooterStartItem = document.querySelector('.os-start-item[data-action="bugshooter"]');
  if (bugShooterStartItem) bugShooterStartItem.addEventListener('click', () => { window.location.href = 'bugshooter.html'; });

  function openStartMenu() { startMenu.classList.add('open'); startBtn.classList.add('active'); }
  function closeStartMenu() { startMenu.classList.remove('open'); startBtn.classList.remove('active'); }
  startBtn.addEventListener('click', e => {
    e.stopPropagation();
    if (startMenu.classList.contains('open')) closeStartMenu(); else openStartMenu();
  });
  document.addEventListener('click', e => {
    if (startMenu.classList.contains('open') && !startMenu.contains(e.target) && e.target !== startBtn) closeStartMenu();
  });

  function tickClock() {
    const now = new Date();
    clockEl.textContent = now.getHours().toString().padStart(2, '0') + ':' + now.getMinutes().toString().padStart(2, '0');
  }

  function openOS() {
    modal.classList.add('active');
    document.body.style.overflow = 'hidden';
    tickClock();
  }

  function closeOS() {
    modal.classList.remove('active');
    document.body.style.overflow = '';
    closeStartMenu();
  }

  exitBtn.addEventListener('click', closeOS);
  document.addEventListener('keydown', e => { if (e.key === 'Escape' && modal.classList.contains('active')) closeOS(); });

  shutdownBtn.addEventListener('click', () => {
    closeStartMenu();
    shutdownScreen.classList.add('show');
    setTimeout(() => {
      Object.keys(openWins).forEach(closeWindow);
      shutdownScreen.classList.remove('show');
      closeOS();
    }, 1600);
  });

  setInterval(tickClock, 30000);
  window.openFabricioOS = openOS;
})();

// --- Active nav on scroll ---
(function () {
  const secs = document.querySelectorAll('section[id]'), links = document.querySelectorAll('.nav-links a');
  addEventListener('scroll', () => {
    let cur = '';
    secs.forEach(s => { if (scrollY >= s.offsetTop - 200) cur = s.id; });
    links.forEach(l => { l.style.color = ''; if (l.getAttribute('href') === '#' + cur) l.style.color = '#c68a3d'; });
  });
})();