class ProjectCard extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }

  static get observedAttributes() {
    return ['title', 'description', 'image', 'tags', 'demo-url', 'code-url'];
  }

  connectedCallback() {
    this.render();
  }

  attributeChangedCallback() {
    this.render();
  }

  render() {
    const title = this.getAttribute('title') || '';
    const description = this.getAttribute('description') || '';
    const image = this.getAttribute('image') || '';
    const tags = JSON.parse(this.getAttribute('tags') || '[]');
    const demoUrl = this.getAttribute('demo-url') || '#';
    const codeUrl = this.getAttribute('code-url') || '#';

    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          animation: fadeInUp 0.6s ease-out both;
        }
        
        .project-card {
          position: relative;
          background: rgba(30, 41, 59, 0.5);
          border: 1px solid rgba(148, 163, 184, 0.1);
          border-radius: 1.5rem;
          overflow: hidden;
          height: 100%;
          display: flex;
          flex-direction: column;
          transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .project-card:hover {
          transform: translateY(-8px) scale(1.02);
          border-color: rgba(99, 102, 241, 0.3);
          box-shadow: 0 20px 40px rgba(99, 102, 241, 0.15);
        }
        
        .project-image {
          width: 100%;
          height: 200px;
          object-fit: cover;
          transition: transform 0.4s ease;
        }
        
        .project-card:hover .project-image {
          transform: scale(1.05);
        }
        
        .project-content {
          padding: 1.5rem;
          flex: 1;
          display: flex;
          flex-direction: column;
        }
        
        .project-title {
          font-size: 1.25rem;
          font-weight: 600;
          margin-bottom: 0.75rem;
          color: #f1f5f9;
        }
        
        .project-description {
          color: #94a3b8;
          margin-bottom: 1rem;
          flex: 1;
          line-height: 1.6;
        }
        
        .project-tags {
          display: flex;
          flex-wrap: wrap;
          gap: 0.5rem;
          margin-bottom: 1.5rem;
        }
        
        .tag {
          padding: 0.25rem 0.75rem;
          border-radius: 9999px;
          font-size: 0.75rem;
          font-weight: 500;
          background: rgba(99, 102, 241, 0.1);
          color: #c7d2fe;
          border: 1px solid rgba(99, 102, 241, 0.2);
        }
        
        .project-links {
          display: flex;
          gap: 1rem;
          margin-top: auto;
        }
        
        .project-link {
          flex: 1;
          padding: 0.5rem 1rem;
          border-radius: 0.5rem;
          text-decoration: none;
          font-weight: 500;
          font-size: 0.875rem;
          text-align: center;
          transition: all 0.3s ease;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 0.5rem;
        }
        
        .demo-link {
          background: linear-gradient(135deg, #6366f1, #a855f7);
          color: white;
        }
        
        .demo-link:hover {
          opacity: 0.9;
          transform: translateY(-1px);
        }
        
        .code-link {
          background: rgba(30, 41, 59, 0.8);
          color: #c7d2fe;
          border: 1px solid rgba(99, 102, 241, 0.3);
        }
        
        .code-link:hover {
          background: rgba(99, 102, 241, 0.1);
          color: #e0e7ff;
        }
        
        @keyframes fadeInUp {
          from {
            opacity: 0;
            transform: translateY(30px);
          }
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }
      </style>
      
      <div class="project-card">
        <img src="${image}" alt="${title}" class="project-image">
        
        <div class="project-content">
          <h3 class="project-title">${title}</h3>
          <p class="project-description">${description}</p>
          
          <div class="project-tags">
            ${tags.map(tag => `<span class="tag">${tag}</span>`).join('')}
          </div>
          
          <div class="project-links">
            <a href="${demoUrl}" class="project-link demo-link">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
                <polyline points="15 3 21 3 21 9"></polyline>
                <line x1="10" y1="14" x2="21" y2="3"></line>
              </svg>
              Live Demo
            </a>
            <a href="${codeUrl}" class="project-link code-link">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
              </svg>
              Code
            </a>
          </div>
        </div>
      </div>
    `;
  }
}

customElements.define('project-card', ProjectCard);