class ForexSignalCard extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        .signal-card {
          background: rgba(30, 41, 59, 0.8);
          border-radius: 12px;
          padding: 1.5rem;
          border: 1px solid rgba(255, 255, 255, 0.1);
          margin-bottom: 1rem;
        }
        .signal-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 1rem;
        }
        .signal-direction {
          font-weight: bold;
          font-size: 1.25rem;
          padding: 0.5rem 1rem;
          border-radius: 8px;
        }
        .buy {
          background: rgba(74, 222, 128, 0.1);
          color: #4ade80;
          border: 1px solid #4ade80;
        }
        .sell {
          background: rgba(248, 113, 113, 0.1);
          color: #f87171;
          border: 1px solid #f87171;
        }
        .avoid {
          background: rgba(156, 163, 175, 0.1);
          color: #9ca3af;
          border: 1px solid #9ca3af;
        }
        .confidence {
          display: flex;
          align-items: center;
        }
        .progress-bar {
          width: 100px;
          height: 8px;
          background: rgba(255, 255, 255, 0.1);
          border-radius: 4px;
          margin-right: 8px;
          overflow: hidden;
        }
        .progress-fill {
          height: 100%;
          border-radius: 4px;
        }
        .levels {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 1rem;
          margin-bottom: 1rem;
        }
        .level-item {
          background: rgba(15, 23, 42, 0.5);
          padding: 0.75rem;
          border-radius: 8px;
        }
        .label {
          font-size: 0.875rem;
          color: #94a3b8;
          margin-bottom: 0.25rem;
        }
        .value {
          font-weight: bold;
        }
        .rationale {
          background: rgba(15, 23, 42, 0.5);
          padding: 1rem;
          border-radius: 8px;
          margin-top: 1rem;
        }
        .rationale-title {
          font-weight: bold;
          margin-bottom: 0.5rem;
          color: #e2e8f0;
        }
        .rationale-content {
          color: #94a3b8;
          font-size: 0.875rem;
          line-height: 1.5;
        }
      </style>
      <div class="signal-card">
        <div class="signal-header">
          <div class="signal-direction buy">
            STRONG BUY EURUSD
          </div>
          <div class="confidence">
            <div class="progress-bar">
              <div class="progress-fill" style="width: 92%; background: #4ade80;"></div>
            </div>
            <span>92%</span>
          </div>
        </div>
        
        <div class="levels">
          <div class="level-item">
            <div class="label">Entry</div>
            <div class="value">1.0825 - 1.0835</div>
          </div>
          <div class="level-item">
            <div class="label">Stop Loss</div>
            <div class="value">1.0780</div>
          </div>
          <div class="level-item">
            <div class="label">Take Profit 1</div>
            <div class="value">1.0900</div>
          </div>
          <div class="level-item">
            <div class="label">Take Profit 2</div>
            <div class="value">1.0950</div>
          </div>
        </div>
        
        <div class="rationale">
          <div class="rationale-title">Market Analysis</div>
          <div class="rationale-content">
            <p><strong>Market Structure:</strong> Bullish breakout above 1.0800 key resistance with higher highs/lows.</p>
            <p><strong>Key Levels:</strong> Strong demand zone at 1.0825-35 confirmed by 3x tests.</p>
            <p><strong>Candlestick:</strong> Bullish engulfing pattern on 4H with high volume.</p>
            <p><strong>Confluence:</strong> RSI divergence + MACD crossover above 0 line.</p>
            <p><strong>Strategy:</strong> ICT Power of 3 (Win Rate: 78% in back-testing)</p>
          </div>
        </div>
      </div>
    `;
  }
}
customElements.define('forex-signal-card', ForexSignalCard);