app.js

/**
 * GUZ (ガズ) - Web Application Logic & Interactivity
 */

// Tracks & Audio Samples Configuration
const audioTracks = {
  basic: {
    title: "GUZ BASIC (Tom B2)",
    artist: "Amostra Oficial • CVVV (Pop / J-Pop)",
    src: "assets/sample_basic.ogg",
    cover: "assets/guz_main.webp"
  },
  cute: {
    title: "GUZ CUTE (Tom F#3)",
    artist: "Amostra Oficial • CVVV (Kawaii / Fofo)",
    src: "assets/sample_cute.ogg",
    cover: "assets/guz_main.webp"
  },
  magical: {
    title: "GUZ MAGICAL (Tom G3)",
    artist: "Amostra Oficial • CVVC (Feitiço Pop)",
    src: "assets/sample_magical.wav",
    cover: "assets/guz_magical.webp"
  }
};

const trackKeys = Object.keys(audioTracks);
let currentTrackKey = "basic";
const audioPlayer = new Audio();
audioPlayer.src = audioTracks[currentTrackKey].src;

// DOM Elements
const audioBar = document.getElementById("globalAudioBar");
const currentTrackTitle = document.getElementById("currentTrackTitle");
const currentTrackArtist = document.getElementById("currentTrackArtist");
const currentTrackCover = document.getElementById("currentTrackCover");
const audioTogglePlay = document.getElementById("audioTogglePlay");
const audioPlayIcon = document.getElementById("audioPlayIcon");
const audioPrev = document.getElementById("audioPrev");
const audioNext = document.getElementById("audioNext");
const currentTimeLabel = document.getElementById("currentTime");
const totalDurationLabel = document.getElementById("totalDuration");
const progressFill = document.getElementById("progressFill");
const progressBar = document.getElementById("progressBar");
const volumeSlider = document.getElementById("volumeSlider");
const heroPlayBtn = document.getElementById("heroPlayBtn");

// Designs Data
const designsData = {
  basic: {
    title: "GUZ BASIC — O Moletom Lilás do Cogumelo",
    tag: "OUTFIT OFICIAL #1",
    img: "assets/guz_main.webp",
    biotipo: "Biotipo: Gordinho & Confortável",
    text: "Blusa de moletom de mangas longas lilás com um grande cogumelo bege estampado e gola alta aconchegante. Acompanha bermuda marrom com uma faixa rosa-clara estampada com corações pendurada ao cós esquerdo, pingentes brilhantes de estrelas amarelas nas barras e polainas beges cobrindo dos joelhos aos calcanhares.",
    features: [
      "Moletom lilás com cogumelo estampado",
      "Faixa rosa com estampa de corações no cós",
      "Pingentes de estrela amarela reluzente",
      "Polainas beges confortáveis nos tornozelos"
    ]
  },
  cute: {
    title: "GUZ CUTE — O Nobre Idol de Wonderland",
    tag: "OUTFIT OFICIAL #2",
    img: "assets/guz_main.webp",
    biotipo: "Biotipo: Esguio & Estatura Alta",
    text: "Blusa branca de mangas longas e gola alta com cauda em formato de V e forro interno vermelho vibrante. Ombreiras detalhadas simulando manga fofa realçam sua postura graciosa. Acompanha calça flare com corações, faixa temática no cós, cartola icônica com laço rosa e bilhete '10/3', empunhando seu tripé-machado com coração!",
    features: [
      "Cartola nobre com laço rosa & bilhete 10/3",
      "Blusa cauda em V com forro vermelho",
      "Calça flare estilizada com corações",
      "Microfone tripé com machado temático"
    ]
  },
  magical: {
    title: "GUZ MAGICAL — O Feitiço Místico Pop",
    tag: "OUTFIT OFICIAL #3",
    img: "assets/guz_magical.webp",
    biotipo: "Biotipo: Encantador & Mágico",
    text: "Uma roupagem estelar repleta de tons arroxeados, pingentes mágicos e detalhes cintilantes inspirados na magia ancestral de Wonderland. Proporciona uma presença de palco única e imponente.",
    features: [
      "Traje com ressonância mística e brilho estelar",
      "Configuração CVVC avançada (Rosaaah)",
      "Projeção vocal encorpada com WORLDLINE-R",
      "Pingente de lua crescente em destaque"
    ]
  },
  starlight: {
    title: "GUZ STARLIGHT — A Sinfonia Galáctica",
    tag: "OUTFIT OFICIAL #4",
    img: "assets/guz_magical.webp",
    biotipo: "Biotipo: Versátil & Multi-Color",
    text: "A mais nova e completa versão vocal e estética do GUZ! Apresenta três paletas expressivas: o vocal Natural e firme, o Voice Color Soft (doce, sussurrado e aveludado) e o Voice Color Moe (ultra açucarado).",
    features: [
      "Vocal Natural + Cores Soft & Moe",
      "Alcance tonal estendido de C2 a C5",
      "Configurado com maestria por Gusta-P",
      "Design cósmico cintilante"
    ]
  }
};

// Play Specific Sample Function
function playSample(trackKey) {
  if (audioTracks[trackKey]) {
    currentTrackKey = trackKey;
    const track = audioTracks[trackKey];
    audioPlayer.src = track.src;
    currentTrackTitle.textContent = track.title;
    currentTrackArtist.textContent = track.artist;
    currentTrackCover.src = track.cover;
    
    audioPlayer.play().then(() => {
      updatePlayButtonUI(true);
    }).catch(err => {
      console.warn("Autoplay prevention:", err);
    });
  }
}

// Update Play / Pause Icon
function updatePlayButtonUI(isPlaying) {
  if (isPlaying) {
    audioPlayIcon.classList.remove("fa-play");
    audioPlayIcon.classList.add("fa-pause");
    if (heroPlayBtn) heroPlayBtn.innerHTML = '<i class="fa-solid fa-pause"></i>';
  } else {
    audioPlayIcon.classList.remove("fa-pause");
    audioPlayIcon.classList.add("fa-play");
    if (heroPlayBtn) heroPlayBtn.innerHTML = '<i class="fa-solid fa-play"></i>';
  }
}

// Toggle Play/Pause
audioTogglePlay.addEventListener("click", () => {
  if (audioPlayer.paused) {
    audioPlayer.play();
    updatePlayButtonUI(true);
  } else {
    audioPlayer.pause();
    updatePlayButtonUI(false);
  }
});

if (heroPlayBtn) {
  heroPlayBtn.addEventListener("click", () => {
    if (audioPlayer.paused) {
      playSample("basic");
    } else {
      audioPlayer.pause();
      updatePlayButtonUI(false);
    }
  });
}

// Previous & Next Track
audioPrev.addEventListener("click", () => {
  let currentIndex = trackKeys.indexOf(currentTrackKey);
  currentIndex = (currentIndex - 1 + trackKeys.length) % trackKeys.length;
  playSample(trackKeys[currentIndex]);
});

audioNext.addEventListener("click", () => {
  let currentIndex = trackKeys.indexOf(currentTrackKey);
  currentIndex = (currentIndex + 1) % trackKeys.length;
  playSample(trackKeys[currentIndex]);
});

// Update Progress Bar
audioPlayer.addEventListener("timeupdate", () => {
  if (audioPlayer.duration) {
    const current = audioPlayer.currentTime;
    const duration = audioPlayer.duration;
    const pct = (current / duration) * 100;
    progressFill.style.width = `${pct}%`;
    currentTimeLabel.textContent = formatTime(current);
    totalDurationLabel.textContent = formatTime(duration);
  }
});

audioPlayer.addEventListener("ended", () => {
  updatePlayButtonUI(false);
  progressFill.style.width = "0%";
});

progressBar.addEventListener("click", (e) => {
  const rect = progressBar.getBoundingClientRect();
  const clickX = e.clientX - rect.left;
  const width = rect.width;
  if (audioPlayer.duration) {
    audioPlayer.currentTime = (clickX / width) * audioPlayer.duration;
  }
});

// Volume Slider
volumeSlider.addEventListener("input", (e) => {
  audioPlayer.volume = e.target.value;
});

// Format Time in mm:ss
function formatTime(secs) {
  const m = Math.floor(secs / 60);
  const s = Math.floor(secs % 60);
  return `${m}:${s < 10 ? '0' : ''}${s}`;
}

// Open YouTube Video Helper
function openYouTube(videoId) {
  window.open(`https://www.youtube.com/watch?v=${videoId}`, '_blank');
}

// Design Tabs Switcher
const designTabs = document.querySelectorAll(".design-tab");
const designTitle = document.getElementById("designTitle");
const designTag = document.getElementById("designTag");
const designText = document.getElementById("designText");
const designDetailImg = document.getElementById("designDetailImg");
const designBiotipo = document.getElementById("designBiotipo");
const designFeatures = document.getElementById("designFeatures");

designTabs.forEach(tab => {
  tab.addEventListener("click", () => {
    designTabs.forEach(t => t.classList.remove("active"));
    tab.classList.add("active");
    
    const dKey = tab.getAttribute("data-design");
    const data = designsData[dKey];
    if (data) {
      designTitle.textContent = data.title;
      designTag.textContent = data.tag;
      designText.textContent = data.text;
      designDetailImg.src = data.img;
      designBiotipo.textContent = data.biotipo;

      // Animate Image
      designDetailImg.style.opacity = '0';
      designDetailImg.style.transform = 'scale(0.95)';
      setTimeout(() => {
        designDetailImg.style.opacity = '1';
        designDetailImg.style.transform = 'scale(1)';
      }, 150);

      // Render features
      designFeatures.innerHTML = data.features.map(f => `
        <div class="feature-item">
          <i class="fa-solid fa-circle-check"></i>
          <span>${f}</span>
        </div>
      `).join('');
    }
  });
});

// Floating Particle Generator (Coffee beans & sparkles)
function initParticles() {
  const container = document.getElementById("particles");
  const icons = ['☕', '✨', '♥', '★', '🎵', '🍰'];
  const count = 22;

  for (let i = 0; i < count; i++) {
    const particle = document.createElement("div");
    particle.className = "particle";
    particle.textContent = icons[Math.floor(Math.random() * icons.length)];
    particle.style.left = `${Math.random() * 100}vw`;
    particle.style.animationDuration = `${8 + Math.random() * 10}s`;
    particle.style.animationDelay = `${Math.random() * 5}s`;
    particle.style.fontSize = `${12 + Math.random() * 16}px`;
    container.appendChild(particle);
  }
}

// Mobile Menu Toggle
const mobileToggle = document.getElementById("mobileToggle");
const navMenu = document.getElementById("navMenu");

if (mobileToggle) {
  mobileToggle.addEventListener("click", () => {
    navMenu.classList.toggle("open");
  });
}

document.querySelectorAll(".nav-link").forEach(link => {
  link.addEventListener("click", () => {
    navMenu.classList.remove("open");
  });
});

// Initialize on DOM load
document.addEventListener("DOMContentLoaded", () => {
  initParticles();
});