class CustomProjects extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          padding: 100px 0;
          background-color: white;
        }
        .projects-container {
          max-width: 1200px;
          margin: 0 auto;
          padding: 0 40px;
        }
        .projects-grid {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 40px;
          margin-top: 60px;
        }
        .project-card {
          position: relative;
          overflow: hidden;
          cursor: pointer;
        }
        .project-image {
          width: 100%;
          height: 500px;
          object-fit: cover;
          transition: transform 0.5s ease;
        }
        .project-overlay {
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
          padding: 40px;
          color: white;
          transform: translateY(100%);
          transition: transform 0.5s ease;
        }
        .project-card:hover .project-overlay {
          transform: translateY(0);
        }
        .project-card:hover .project-image {
          transform: scale(1.05);
        }
        .project-title {
          font-size: 24px;
          margin-bottom: 10px;
        }
        .project-category {
          font-size: 14px;
          text-transform: uppercase;
          letter-spacing: 1px;
        }
        @media (max-width: 768px) {
          .projects-grid {
            grid-template-columns: 1fr;
          }
          .project-image {
            height: 300px;
          }
        }
      </style>
      <div class="projects-container">
        <h2>Selected Projects</h2>
        <div class="projects-grid">
          <div class="project-card">
            <img src="http://static.photos/technology/800x500/1" alt="Project 1" class="project-image">
            <div class="project-overlay">
              <h3 class="project-title">Digital Platform</h3>
              <span class="project-category">Web Development</span>
            </div>
          </div>
          <div class="project-card">
            <img src="http://static.photos/minimal/800x500/2" alt="Project 2" class="project-image">
            <div class="project-overlay">
              <h3 class="project-title">Brand Identity</h3>
              <span class="project-category">Graphic Design</span>
            </div>
          </div>
          <div class="project-card">
            <img src="http://static.photos/office/800x500/3" alt="Project 3" class="project-image">
            <div class="project-overlay">
              <h3 class="project-title">Mobile App</h3>
              <span class="project-category">UI/UX Design</span>
            </div>
          </div>
          <div class="project-card">
            <img src="http://static.photos/abstract/800x500/4" alt="Project 4" class="project-image">
            <div class="project-overlay">
              <h3 class="project-title">Marketing Campaign</h3>
              <span class="project-category">Creative Direction</span>
            </div>
          </div>
        </div>
      </div>
    `;
  }
}
customElements.define('custom-projects', CustomProjects);