class HostingInfo extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        .hosting-container {
          background: rgba(255,255,255,0.1);
          border-radius: 16px;
          padding: 2rem;
          margin: 2rem 0;
          backdrop-filter: blur(10px);
          border: 1px solid rgba(255,255,255,0.2);
        }
        h3 {
          color: white;
          font-size: 1.5rem;
          margin-bottom: 1rem;
        }
        ol {
          color: rgba(255,255,255,0.8);
          padding-left: 1.5rem;
          line-height: 1.6;
        }
        li {
          margin-bottom: 0.8rem;
        }
        code {
          background: rgba(0,0,0,0.3);
          padding: 0.2rem 0.4rem;
          border-radius: 4px;
          font-family: monospace;
        }
        a {
          color: #38bdf8;
          text-decoration: none;
          border-bottom: 1px dashed currentColor;
        }
      </style>
      <div class="hosting-container">
        <h3>How to Host This Website</h3>
        <ol>
          <li><strong>GitHub Pages:</strong> Upload to a GitHub repository, go to Settings > Pages, and enable GitHub Pages for the main branch</li>
          <li><strong>Netlify:</strong> Drag and drop your project folder into Netlify's dashboard or connect your GitHub repository</li>
          <li><strong>Vercel:</strong> Import your Git repository and deploy with zero configuration</li>
          <li><strong>Local Server:</strong> For testing, run <code>npx serve</code> or <code>python -m http.server 8000</code> in your project directory</li>
        </ol>
        <p>For production hosting, consider services like <a href="https://vercel.com" target="_blank">Vercel</a>, <a href="https://netlify.com" target="_blank">Netlify</a>, or <a href="https://pages.github.com" target="_blank">GitHub Pages</a>.</p>
      </div>
    `;
  }
}
customElements.define('hosting-info', HostingInfo);