/* =============================================
   ROAR — Yakında Sayfası
   ============================================= */
(function(){
'use strict';

/* ——————————————————————————————
   COUNTDOWN TIMER
   Hedef tarih: 30 gün sonra (değiştirmek için aşağıyı düzenleyin)
   —————————————————————————————— */
var TARGET = new Date();
TARGET.setDate(TARGET.getDate() + 30); // 30 gün sonra

// Sabit bir tarih kullanmak isterseniz yorum satırını kaldırın:
// var TARGET = new Date('2026-09-01T00:00:00');

var daysEl  = document.getElementById('cdDays');
var hoursEl = document.getElementById('cdHours');
var minsEl  = document.getElementById('cdMins');
var secsEl  = document.getElementById('cdSecs');

function pad(n){ return String(n).padStart(2,'0'); }

function updateCountdown(){
  var now  = new Date().getTime();
  var diff = TARGET.getTime() - now;

  if(diff <= 0){
    daysEl.textContent = '00';
    hoursEl.textContent = '00';
    minsEl.textContent = '00';
    secsEl.textContent = '00';
    return;
  }

  var d = Math.floor(diff / (1000*60*60*24));
  var h = Math.floor((diff % (1000*60*60*24)) / (1000*60*60));
  var m = Math.floor((diff % (1000*60*60)) / (1000*60));
  var s = Math.floor((diff % (1000*60)) / 1000);

  // Flip animation on change
  animateNum(daysEl, pad(d));
  animateNum(hoursEl, pad(h));
  animateNum(minsEl, pad(m));
  animateNum(secsEl, pad(s));
}

function animateNum(el, val){
  if(el.textContent !== val){
    el.style.transform = 'translateY(-4px)';
    el.style.opacity = '0.4';
    setTimeout(function(){
      el.textContent = val;
      el.style.transform = 'translateY(0)';
      el.style.opacity = '1';
    }, 120);
  }
}

// Add transition to countdown numbers
[daysEl, hoursEl, minsEl, secsEl].forEach(function(el){
  if(el){
    el.style.transition = 'transform .25s cubic-bezier(.16,1,.3,1), opacity .25s';
  }
});

updateCountdown();
setInterval(updateCountdown, 1000);


/* ——————————————————————————————
   EMAIL FORM
   —————————————————————————————— */
var emailInput  = document.getElementById('emailInput');
var emailBtn    = document.getElementById('emailBtn');
var formEl      = document.getElementById('notifyForm');
var successEl   = document.getElementById('notifySuccess');

if(emailBtn && emailInput && formEl && successEl){
  emailBtn.addEventListener('click', handleSubmit);
  emailInput.addEventListener('keydown', function(e){
    if(e.key === 'Enter') handleSubmit();
  });

  function handleSubmit(){
    var email = emailInput.value.trim();

    // Simple validation
    if(!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)){
      emailInput.style.borderColor = '#ff3131';
      emailInput.style.outline = '1px solid #ff3131';
      emailInput.focus();
      setTimeout(function(){
        emailInput.style.borderColor = '';
        emailInput.style.outline = '';
      }, 2000);
      return;
    }

    // Success animation
    formEl.style.display = 'none';
    successEl.classList.add('show');

    // You can send the email to your backend here:
    // fetch('/api/subscribe', { method:'POST', body: JSON.stringify({email:email}) });

    console.log('Subscribed:', email);
  }
}


/* ——————————————————————————————
   PARALLAX ORBS ON MOUSE (desktop)
   —————————————————————————————— */
if(window.matchMedia('(pointer:fine)').matches){
  var orbs = document.querySelectorAll('.bg-orb');

  document.addEventListener('mousemove', function(e){
    var cx = (e.clientX / window.innerWidth  - 0.5) * 2; // -1 to 1
    var cy = (e.clientY / window.innerHeight - 0.5) * 2;

    orbs.forEach(function(orb, i){
      var strength = (i + 1) * 8;
      orb.style.marginLeft = (cx * strength) + 'px';
      orb.style.marginTop  = (cy * strength) + 'px';
    });
  });

  // Smooth transition
  orbs.forEach(function(orb){
    orb.style.transition = 'margin .6s cubic-bezier(.16,1,.3,1)';
  });
}

})();