class CustomVideoDemo extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        .demo-container {
          padding: 4rem 0;
          background: #f9fafb;
        }
        .video-wrapper {
          border-radius: 12px;
          overflow: hidden;
          box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
          max-width: 900px;
          margin: 0 auto;
        }
        video {
          width: 100%;
          display: block;
        }
      </style>
      <section class="demo-container">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div class="text-center mb-12">
            <h2 class="text-3xl font-bold mb-4">See it in action</h2>
            <p class="text-xl text-gray-600 max-w-3xl mx-auto">Watch how Short AI transforms your content creation process</p>
          </div>
          <div class="video-wrapper">
            <video controls poster="http://static.photos/technology/1200x630/15">
              <source src="https://example.com/demo-video.mp4" type="video/mp4">
              Your browser does not support the video tag.
            </video>
          </div>
        </div>
      </section>
    `;
  }
}
customElements.define('custom-video-demo', CustomVideoDemo);