// Initialize Vibe Player Web Component
class VibePlayer extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        .player-container {
          background: #f8fafc;
          padding: 2rem;
          border-radius: 12px;
          max-width: 400px;
          margin: 2rem auto;
        }
        .frequency-slider {
          width: 100%;
          margin: 1rem 0;
        }
      </style>
      <div class="player-container">
        <h3>Vibe Generator</h3>
        <input type="range" min="20" max="2000" value="432" class="frequency-slider">
        <p>Frequenz: <span class="frequency-value">432</span> Hz</p>
      </div>
    `;
    
    const slider = this.shadowRoot.querySelector('.frequency-slider');
    const valueDisplay = this.shadowRoot.querySelector('.frequency-value');
    
    slider.addEventListener('input', () => {
      valueDisplay.textContent = slider.value;
      // In a real app, this would change the oscillator frequency
    });
  }
}
customElements.define('vibe-player', VibePlayer);

// Scroll animation for sections
document.addEventListener('DOMContentLoaded', () => {
    const sections = document.querySelectorAll('section');
    
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('fade-in');
            }
        });
    }, {
        threshold: 0.1
    });

    sections.forEach(section => {
        observer.observe(section);
    });

    // Smooth scroll for anchor links
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function(e) {
            e.preventDefault();
            const target = document.querySelector(this.getAttribute('href'));
            if (target) {
                target.scrollIntoView({
                    behavior: 'smooth'
                });
            }
        });
    });
});

// Form handling
document.querySelectorAll('form').forEach(form => {
    form.addEventListener('submit', (e) => {
        e.preventDefault();
        const email = form.querySelector('input[type="email"]').value;
        if (email && email.includes('@')) {
            alert('Danke für deine Anmeldung! Wir melden uns bald bei dir.');
            form.reset();
        } else {
            alert('Bitte gib eine gültige E-Mail-Adresse ein.');
        }
    });
});