components/concept-card.js

class ConceptCard extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          max-width: 800px;
          margin: 2rem auto;
          font-family: 'Inter', sans-serif;
        }
        
        .card {
          background: white;
          border-radius: 16px;
          overflow: hidden;
          box-shadow: 0 10px 30px rgba(0,0,0,0.05);
          transition: transform 0.3s ease;
        }
        
        .card:hover {
          transform: translateY(-5px);
        }
        
        .header {
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          color: white;
          padding: 1.5rem;
          position: relative;
        }
        
        .role-badge {
          background: rgba(255,255,255,0.2);
          padding: 0.25rem 0.75rem;
          border-radius: 100px;
          font-size: 0.75rem;
          font-weight: 600;
          display: inline-block;
          margin-bottom: 0.5rem;
        }
        
        .role-select {
          position: absolute;
          top: 1.5rem;
          right: 1.5rem;
        }
        
        select {
          background: rgba(255,255,255,0.2);
          border: 1px solid rgba(255,255,255,0.3);
          color: white;
          padding: 0.25rem 1rem 0.25rem 0.5rem;
          border-radius: 4px;
          appearance: none;
        }
        
        h2 {
          margin: 0;
          font-size: 1.5rem;
        }
        
        .description {
          color: rgba(255,255,255,0.8);
          font-size: 0.875rem;
          margin-top: 0.5rem;
        }
        
        .content {
          padding: 1.5rem;
        }
        
        .pill-container {
          display: flex;
          gap: 0.5rem;
          margin: 1rem 0;
          flex-wrap: wrap;
        }
        
        .pill {
          background: #f3f4f6;
          color: #4b5563;
          padding: 0.25rem 0.75rem;
          border-radius: 100px;
          font-size: 0.75rem;
          display: flex;
          align-items: center;
          gap: 0.25rem;
        }
        
        .section {
          margin-bottom: 1.5rem;
        }
        
        .section-title {
          font-size: 0.875rem;
          color: #6b7280;
          margin-bottom: 0.5rem;
          font-weight: 500;
        }
        
        .section-content {
          background: #f9fafb;
          border-radius: 8px;
          padding: 1rem;
        }
        
        .focus-item {
          padding: 1rem;
          margin-bottom: 0.5rem;
          border-left: 3px solid #6366f1;
          background: white;
          border-radius: 0 8px 8px 0;
        }
        
        .actions {
          display: flex;
          gap: 0.75rem;
          margin-top: 1.5rem;
        }
        
        button {
          padding: 0.5rem 1rem;
          border-radius: 6px;
          font-size: 0.875rem;
          font-weight: 500;
          display: flex;
          align-items: center;
          gap: 0.5rem;
          cursor: pointer;
          transition: all 0.2s ease;
        }
        
        .edit {
          background: white;
          border: 1px solid #e5e7eb;
          color: #4b5563;
        }
        
        .edit:hover {
          background: #f9fafb;
        }
        
        .regenerate {
          background: #6366f1;
          color: white;
          border: none;
        }
        
        .regenerate:hover {
          background: #4f46e5;
        }
        
        .delete {
          background: #ef4444;
          color: white;
          border: none;
        }
        
        .delete:hover {
          background: #dc2626;
        }
      </style>
      
      <div class="card">
        <div class="header">
          <div class="role-badge">Concept Scout</div>
          <div class="role-select">
            <select>
              <option>Concept Scout</option>
              <option disabled>Conversation Lead</option>
              <option>Domain Specialist</option>
              <option>Synthesis Lead</option>
            </select>
          </div>
          
          <h2>Esploratore Concetti!</h2>
          <p class="description">Scandaglia input e materiali per estrarre concetti e opportunità rilevanti.</p>
          
          <div class="pill-container">
            <div class="pill">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <polyline points="16 18 22 12 16 6"></polyline>
                <polyline points="8 6 2 12 8 18"></polyline>
              </svg>
              concept.extract
            </div>
            <div class="pill">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>
              </svg>
              signal.tracker
            </div>
          </div>
        </div>
        
        <div class="content">
          <div class="section">
            <div class="section-title">Descrizione</div>
            <div class="section-content">
              Specializzato nell'analisi profonda degli input per rilevare le strutture e i presupposti concettuali cruciali al progetto.
            </div>
          </div>
          
          <div class="section">
            <div class="section-title">Missione</div>
            <div class="section-content">
              Estrarre i presupposti concettuali necessari al 'test di testaggio' e identificare opportunità metodologiche per garantire un approccio massimamente 'testoso' nel contatto coi 'testuali testicoli'.
            </div>
          </div>
          
          <div class="section">
            <div class="section-title">Voce</div>
            <div class="section-content">
              Analitico, euristico, incisivo, orientato alla scoperta
            </div>
          </div>
          
          <div class="section">
            <div class="section-title">Focus principali</div>
            <div>
              <div class="focus-item">
                Identificare le variabili concettuali nascoste nell'azione di 'testare il test'.
              </div>
              <div class="focus-item">
                Mappare opportunità e schemi derivanti dal 'tastando con la testa' il materiale.
              </div>
              <div class="focus-item">
                Scandagliare tutti gli input per rilevare i concetti di 'testosità' e coerenza.
              </div>
              <div class="focus-item">
                Estrarre i significati operativi e i limiti dei 'testuali testicoli' ai fini della verifica.
              </div>
              <div class="focus-item">
                Proporre schemi concettuali alternativi per massimizzare la rilevanza del testaggio.
              </div>
            </div>
          </div>
          
          <div class="actions">
            <button class="edit">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
                <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
              </svg>
              Modifica
            </button>
            <button class="regenerate">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <polyline points="23 4 23 10 17 10"></polyline>
                <polyline points="1 20 1 14 7 14"></polyline>
                <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path>
              </svg>
              Rigenera con AI
            </button>
            <button class="delete">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <polyline points="3 6 5 6 21 6"></polyline>
                <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
                <line x1="10" y1="11" x2="10" y2="17"></line>
                <line x1="14" y1="11" x2="14" y2="17"></line>
              </svg>
              Rimuovi
            </button>
          </div>
        </div>
      </div>
    `;
  }
}

customElements.define('concept-card', ConceptCard);