/* Minimal interactive behavior: simple form handling, smooth in-page link scrolling, small micro-animations.
   No network calls. Keeps UX calm and private. */

const waitlist = document.getElementById('waitlist');
const earlyForm = document.getElementById('early-form');

function handleSubmit(e){
  e.preventDefault();
  const input = e.target.querySelector('input[type="email"]');
  if(!input) return;
  const email = (input.value || '').trim();
  if(!email) {
    input.focus();
    return;
  }
  // friendly confirmation microinteraction
  input.value = '';
  input.placeholder = 'Thanks — we’ll be in touch';
  input.disabled = true;
  const btn = e.target.querySelector('button');
  if(btn){ btn.disabled = true; btn.textContent = 'Requested' }
  setTimeout(()=>{
    input.placeholder = 'Enter your email';
    input.disabled = false;
    if(btn){ btn.disabled = false; btn.textContent = btn.classList.contains('ghost') ? 'Request Early Access' : 'Join Waitlist' }
  }, 4200);
}

waitlist && waitlist.addEventListener('submit', handleSubmit);
earlyForm && earlyForm.addEventListener('submit', handleSubmit);

/* Smooth scroll for internal anchors (if any) */
document.addEventListener('click', (e)=>{
  const a = e.target.closest('a[href^="#"]');
  if(!a) return;
  e.preventDefault();
  const tgt = document.querySelector(a.getAttribute('href'));
  if(tgt) tgt.scrollIntoView({behavior:'smooth', block:'center'});
});

/* Gentle entrance animations */
window.requestAnimationFrame(()=> {
  document.querySelectorAll('.glass').forEach((el,i)=>{
    el.style.opacity = '0';
    el.style.transform = 'translateY(8px)';
    setTimeout(()=> {
      el.style.transition = 'opacity .6s ease, transform .6s cubic-bezier(.2,.9,.3,1)';
      el.style.opacity = '1';
      el.style.transform = 'translateY(0)';
    }, 160 + i*100);
  });
});

/* small reduce-motion respect and gentle animated gradient */
const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
if(mq.matches){
  document.querySelectorAll('.float').forEach(f=> f.style.animation = 'none');
  document.querySelectorAll('.hero-card, .feature, .cta.glow').forEach(e=> e.style.transition = 'none');
} else {
  // subtle animated accent shift to feel alive but calm
  let t = 0;
  const root = document.documentElement;
  function animateAccent(){
    t += 0.0022;
    // create a slow cyclical mood flow through the signature stops
    const p = (Math.sin(t) + 1) / 2; // 0..1
    // blend between purple -> indigo -> teal -> cyan for a moving gradient
    // animate through the new MoodSwitch gradient stops (indigo -> violet -> cyan)
    root.style.setProperty('--accent-start', interpolateColor('#5B4DFF', '#7C3AED', p));
    root.style.setProperty('--accent-mid', interpolateColor('#7C3AED', '#14B8A6', p));
    root.style.setProperty('--accent-end', interpolateColor('#14B8A6', '#38BDF8', p));
    // subtle bg drift linked to the same timer
    const bgShift = 6 + Math.sin(t * 0.6) * 6;
    root.style.setProperty('--bg-shift-x', `${bgShift}px`);
    requestAnimationFrame(animateAccent);
  }

  // simple hex color interpolate (linear RGB)
  function interpolateColor(a, b, t){
    const pa = hexToRgb(a), pb = hexToRgb(b);
    const r = Math.round(pa.r + (pb.r - pa.r) * t);
    const g = Math.round(pa.g + (pb.g - pa.g) * t);
    const bl = Math.round(pa.b + (pb.b - pa.b) * t);
    return `rgb(${r}, ${g}, ${bl})`;
  }
  function hexToRgb(hex){
    const h = hex.replace('#','');
    return { r: parseInt(h.substring(0,2),16), g: parseInt(h.substring(2,4),16), b: parseInt(h.substring(4,6),16) };
  }

  requestAnimationFrame(animateAccent);

  // gentle parallax for background floats on pointer move (subtle)
  const bgFloats = document.querySelectorAll('.float');
  let pointerX = 0, pointerY = 0;
  document.addEventListener('pointermove', (e)=>{
    pointerX = (e.clientX / window.innerWidth - 0.5) * 18;
    pointerY = (e.clientY / window.innerHeight - 0.5) * 10;
    bgFloats.forEach((f,i)=>{
      const tx = pointerX * (i === 0 ? 0.6 : -0.6);
      const ty = pointerY * (i === 0 ? 0.4 : -0.4);
      f.style.transform = `translate(${tx}px, ${ty}px) scale(${i===0?0.98:0.94}) rotate(${i===0?6:-4}deg)`;
    });
  }, {passive:true});
}