class AnimatedHeader extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          position: relative;
          width: 100%;
          height: 600px;
          overflow: hidden;
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          border-radius: 0 0 40px 40px;
        }
        
        .header-content {
          position: relative;
          z-index: 2;
          padding: 4rem 2rem;
          text-align: center;
          color: white;
        }
        
        .title {
          font-size: 4rem;
          font-weight: 800;
          margin-bottom: 1rem;
          text-shadow: 0 2px 10px rgba(0,0,0,0.2);
          background: linear-gradient(to right, #ffffff, #f0f0f0);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          animation: titleGlow 3s ease-in-out infinite alternate;
        }
        
        .subtitle {
          font-size: 1.5rem;
          opacity: 0.9;
          max-width: 800px;
          margin: 0 auto 2rem;
        }
        
        .floating-shapes {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: 1;
        }
        
        .shape {
          position: absolute;
          border-radius: 50%;
          background: rgba(255, 255, 255, 0.1);
          animation: floatShape 20s infinite linear;
        }
        
        @keyframes titleGlow {
          from { filter: drop-shadow(0 0 10px rgba(255,255,255,0.3)); }
          to { filter: drop-shadow(0 0 20px rgba(255,255,255,0.6)); }
        }
        
        @keyframes floatShape {
          0% { transform: translateY(0) rotate(0deg); }
          100% { transform: translateY(-1000px) rotate(720deg); }
        }
        
        .cta-button {
          display: inline-block;
          padding: 1rem 2rem;
          background: rgba(255, 255, 255, 0.2);
          backdrop-filter: blur(10px);
          border: 2px solid rgba(255, 255, 255, 0.3);
          border-radius: 50px;
          color: white;
          font-weight: 600;
          text-decoration: none;
          transition: all 0.3s ease;
          margin: 0 0.5rem;
        }
        
        .cta-button:hover {
          background: rgba(255, 255, 255, 0.3);
          transform: translateY(-5px);
          box-shadow: 0 10px 20px rgba(0,0,0,0.2);
        }
        
        @media (max-width: 768px) {
          .title {
            font-size: 2.5rem;
          }
          
          .subtitle {
            font-size: 1.2rem;
          }
        }
      </style>
      
      <div class="floating-shapes" id="shapes"></div>
      <div class="header-content">
        <h1 class="title">پایتون مستری آکادمی</h1>
        <p class="subtitle">یادگیری پایتون را با تجربه‌ای گرافیکی و تعاملی آغاز کنید. محیطی جذاب با انیمیشن‌های زیبا و جلوه‌های بصری خیره‌کننده</p>
        <div>
          <a href="/courses" class="cta-button">مشاهده دوره‌ها</a>
          <a href="/register" class="cta-button">شروع رایگان</a>
        </div>
      </div>
    `;
    
    this.createShapes();
  }
  
  createShapes() {
    const shapesContainer = this.shadowRoot.getElementById('shapes');
    
    for (let i = 0; i < 50; i++) {
      const shape = document.createElement('div');
      shape.className = 'shape';
      
      const size = Math.random() * 100 + 20;
      const left = Math.random() * 100;
      const duration = Math.random() * 20 + 10;
      const delay = Math.random() * 20;
      
      shape.style.width = `${size}px`;
      shape.style.height = `${size}px`;
      shape.style.left = `${left}%`;
      shape.style.animationDuration = `${duration}s`;
      shape.style.animationDelay = `${delay}s`;
      shape.style.opacity = Math.random() * 0.3 + 0.1;
      
      shapesContainer.appendChild(shape);
    }
  }
}

customElements.define('animated-header', AnimatedHeader);