components/hero.js

class HeroSection extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        .hero {
          height: 80vh;
          background-size: cover;
          background-position: center;
          display: flex;
          flex-direction: column;
          justify-content: center;
          padding: 0 4%;
          position: relative;
          color: white;
        }
        .hero::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: linear-gradient(to right, rgba(0,0,0,0.7), transparent);
          z-index: 1;
        }
        .hero-content {
          max-width: 600px;
          z-index: 2;
        }
        .hero-title {
          font-size: 3rem;
          margin-bottom: 1rem;
          animation: fadeInUp 1s ease;
        }
        .hero-desc {
          font-size: 1.2rem;
          margin-bottom: 1.5rem;
          animation: fadeInUp 1s ease 0.3s forwards;
          opacity: 0;
        }
        .hero-buttons {
          display: flex;
          gap: 1rem;
          animation: fadeInUp 1s ease 0.6s forwards;
          opacity: 0;
        }
        .play-btn, .info-btn {
          padding: 0.8rem 1.8rem;
          border: none;
          border-radius: 4px;
          font-size: 1rem;
          font-weight: bold;
          cursor: pointer;
          display: flex;
          align-items: center;
          gap: 0.5rem;
          transition: all 0.3s;
        }
        .play-btn {
          background-color: white;
          color: black;
        }
        .play-btn:hover {
          background-color: rgba(255,255,255,0.8);
        }
        .info-btn {
          background-color: rgba(109, 109, 110, 0.7);
          color: white;
        }
        .info-btn:hover {
          background-color: rgba(109, 109, 110, 0.4);
        }
        @keyframes fadeInUp {
          from {
            opacity: 0;
            transform: translateY(20px);
          }
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }
        @media (max-width: 768px) {
          .hero {
            height: 60vh;
          }
          .hero-title {
            font-size: 2rem;
          }
          .hero-desc {
            font-size: 1rem;
          }
          .hero-buttons {
            flex-direction: column;
          }
        }
      </style>
      <div class="hero">
        <div class="hero-content">
          <h1 class="hero-title">Unlimited movies, TV shows, and more.</h1>
          <p class="hero-desc">Watch anywhere. Cancel anytime.</p>
          <div class="hero-buttons">
            <button class="play-btn">▶ Play</button>
            <button class="info-btn">ℹ More Info</button>
          </div>
        </div>
      </div>
    `;

    // Random hero image from TMDB API
    this.fetchHeroImage();
  }

  async fetchHeroImage() {
    try {
      const response = await fetch(`https://api.themoviedb.org/3/movie/popular?api_key=8f2b224acadeeebc64ef32b4c04919de&language=en-US&page=1`);
      const data = await response.json();
      const randomMovie = data.results[Math.floor(Math.random() * data.results.length)];
      this.shadowRoot.querySelector('.hero').style.backgroundImage = `url(https://image.tmdb.org/t/p/original${randomMovie.backdrop_path})`;
      this.shadowRoot.querySelector('.hero-title').textContent = randomMovie.title;
      this.shadowRoot.querySelector('.hero-desc').textContent = randomMovie.overview;
    } catch (error) {
      console.error('Error fetching hero image:', error);
      this.shadowRoot.querySelector('.hero').style.backgroundImage = `url(http://static.photos/movie/1200x630/1)`;
    }
  }
}
customElements.define('hero-section', HeroSection);