class FAQChat extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    
    // FAQ data
    this.faqs = [
      {
        question: "What is the $150 Live Coach add-on?",
        answer: "By purchasing the $150 Live Coach add-on, you will receive a link that allows you to sign up for one hour of real, live coaching with a trained professional."
      },
      {
        question: "What is your average reply time?",
        answer: "We try to respond to all messages within 1–2 business days."
      },
      {
        question: "Do you offer promo codes?",
        answer: "Yes! We commonly post promo codes on our TikTok and Instagram pages, so be sure to follow us there."
      },
      {
        question: "What is Amplify?",
        answer: "Amplify is a mental fitness platform that helps users build confidence, focus, and resilience through immersive VR and AR experiences and personalized coaching."
      },
      {
        question: "How do I contact support?",
        answer: "You can contact us via email at amplify.ny@veinternational.org or fill out the support form on our Help Center page. We typically respond within 1-2 business days!"
      },
      {
        question: "Do you offer group discounts?",
        answer: "Yes! We offer special group rates for schools, teams, and corporate groups. Please contact us at amplify.ny@veinternational.org with your group size for a custom quote."
      },
      {
        question: "What equipment do I need?",
        answer: "For VR experiences, you'll need a compatible VR headset (Meta Quest 2 or higher). For AR features, most modern smartphones work! Many features also work without any special equipment."
      },
      {
        question: "Who is Amplify for?",
        answer: "Amplify is for anyone who wants to improve performance under pressure, including students, professionals, and individuals preparing for presentations, interviews, or new roles."
      },
      {
        question: "Do I need VR equipment to use Amplify?",
        answer: "Some experiences are enhanced with VR or AR, but Amplify also offers features that can be used without specialized equipment."
      },
      {
        question: "What is the AI Coach?",
        answer: "The AI Coach provides instant feedback, encouragement, and guidance to help users improve their mental performance in real time."
      },
      {
        question: "How is live coaching different from the AI Coach?",
        answer: "Live coaching offers one-on-one sessions with trained professionals for personalized support, while the AI Coach provides immediate, on-demand guidance anytime."
      },
      {
        question: "Can Amplify help with public speaking or interviews?",
        answer: "Yes, Amplify places users in realistic, high-pressure scenarios such as presentations and interviews to help build confidence and performance skills."
      },
      {
        question: "Is Amplify suitable for beginners?",
        answer: "Absolutely. Amplify is designed for all experience levels, whether you're just starting or looking to refine your mental performance skills."
      }
    ];

    this.messages = [
      { 
        sender: 'bot', 
        content: 'Hi there! How can I help you today?', 
        buttons: this.faqs.map(faq => faq.question) 
      }
    ];

    this.render();
  }
    render() {
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          position: fixed;
          bottom: 20px;
          left: -400px;
          width: 350px;
          height: 500px;
          background: linear-gradient(135deg, #1a1a1a 0%, #000000 100%);
          border-radius: 15px;
          border: 1px solid #e3b341;
          box-shadow: 0 5px 20px rgba(0,0,0,0.3);
          overflow: hidden;
          z-index: 1000;
          font-family: 'Montserrat', sans-serif;
          transition: left 0.3s ease;
        }
        :host(.open) {
          left: 20px;
        }
        .chat-toggle-btn {
          position: fixed;
          bottom: 80px;
          left: 20px;
          width: 60px;
          height: 60px;
          background: linear-gradient(135deg, #1a1a1a 0%, #000000 100%);
          border-radius: 50%;
          border: 2px solid #e3b341;
          color: #e3b341;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          z-index: 999;
          box-shadow: 0 0 15px rgba(227, 179, 65, 0.5);
          transition: all 0.3s ease;
          animation: pulse 2s infinite;
        }

        @keyframes pulse {
          0% { transform: scale(1); }
          50% { transform: scale(1.1); box-shadow: 0 0 20px rgba(227, 179, 65, 0.7); }
          100% { transform: scale(1); }
        }

        .chat-toggle-btn::after {
          content: "HELP";
          position: absolute;
          bottom: -25px;
          left: 50%;
          transform: translateX(-50%);
          color: #e3b341;
          font-size: 12px;
          font-weight: bold;
          white-space: nowrap;
        }
        .chat-toggle-btn:hover {
          transform: scale(1.1) !important;
          background: #e3b341;
          color: #000;
          animation: none;
        }
        .chat-container {
          display: flex;
          flex-direction: column;
          height: 100%;
        }

        .chat-header {
          background: rgba(0,0,0,0.7);
          color: #e3b341;
          padding: 15px;
          font-size: 18px;
          font-weight: bold;
          border-bottom: 1px solid #e3b341;
          display: flex;
          align-items: center;
        }

        .chat-header i {
          margin-right: 10px;
        }

        .messages {
          flex: 1;
          padding: 15px;
          overflow-y: auto;
          display: flex;
          flex-direction: column;
          gap: 10px;
        }

        .message {
          max-width: 80%;
          padding: 10px 15px;
          border-radius: 18px;
          line-height: 1.4;
          word-wrap: break-word;
        }

        .bot-message {
          align-self: flex-start;
          background: rgba(227, 179, 65, 0.2);
          border-bottom-left-radius: 5px;
          color: white;
        }

        .user-message {
          align-self: flex-end;
          background: rgba(227, 179, 65, 0.8);
          border-bottom-right-radius: 5px;
          color: black;
        }

        .question-buttons {
          display: flex;
          flex-direction: column;
          gap: 8px;
          margin-top: 10px;
        }

        .question-btn {
          background: rgba(227, 179, 65, 0.1);
          color: #e3b341;
          border: 1px solid #e3b341;
          border-radius: 15px;
          padding: 8px 15px;
          text-align: left;
          cursor: pointer;
          transition: all 0.2s;
          font-size: 14px;
        }

        .question-btn:hover {
          background: rgba(227, 179, 65, 0.3);
          transform: translateX(2px);
        }

        .close-btn {
          margin-left: auto;
          background: none;
          border: none;
          color: #e3b341;
          cursor: pointer;
          font-size: 20px;
        }

        .typing-indicator {
          display: flex;
          align-items: center;
          gap: 5px;
          margin-top: 5px;
          opacity: 0.7;
        }

        .typing-dot {
          width: 6px;
          height: 6px;
          background-color: #e3b341;
          border-radius: 50%;
          animation: typingAnimation 1.4s infinite ease-in-out;
        }

        .typing-dot:nth-child(1) { animation-delay: 0s; }
        .typing-dot:nth-child(2) { animation-delay: 0.2s; }
        .typing-dot:nth-child(3) { animation-delay: 0.4s; }

        @keyframes typingAnimation {
          0%, 60%, 100% { transform: translateY(0); }
          30% { transform: translateY(-5px); }
        }
      </style>
      <div class="chat-toggle-btn" id="chat-toggle">
        <i data-feather="help-circle"></i>
      </div>
      <div class="chat-container">
        <div class="chat-header">
          <i data-feather="message-square"></i>
          Amplify Help Assistant
          <button class="close-btn" id="close-chat">×</button>
        </div>
        <div class="messages" id="messages-container"></div>
      </div>
    `;

    this.renderMessages();
    this.setupEventListeners();
    feather.replace();
  }

  renderMessages() {
    const container = this.shadowRoot.getElementById('messages-container');
    container.innerHTML = '';

    this.messages.forEach((msg) => {
      const messageDiv = document.createElement('div');
      messageDiv.className = `message ${msg.sender}-message`;
      messageDiv.textContent = msg.content;

      if (msg.buttons) {
        const buttonsDiv = document.createElement('div');
        buttonsDiv.className = 'question-buttons';
        msg.buttons.forEach(question => {
          const button = document.createElement('button');
          button.className = 'question-btn';
          button.textContent = question;
          button.addEventListener('click', () => this.handleQuestionClick(question));
          buttonsDiv.appendChild(button);
        });
        messageDiv.appendChild(buttonsDiv);
      }

      container.appendChild(messageDiv);
    });

    // Scroll to bottom
    container.scrollTop = container.scrollHeight;
    
    // Re-render icons for any new feather icons in messages
    if (window.feather) {
      feather.replace({ scope: this.shadowRoot });
    }
  }

  handleQuestionClick(question) {
    // Add user message
    this.messages.push({ sender: 'user', content: question });
    this.renderMessages();

    // Find answer
    const faq = this.faqs.find(item => item.question === question);
    if (faq) {
      // Simulate typing
      setTimeout(() => {
        this.messages.push({ sender: 'bot', content: faq.answer });
        this.renderMessages();
      }, 500);
    }
  }

  setupEventListeners() {
    const toggleButton = this.shadowRoot.getElementById('chat-toggle');
    const closeButton = this.shadowRoot.getElementById('close-chat');
    
    toggleButton.addEventListener('click', () => {
      this.classList.toggle('open');
      toggleButton.style.display = 'none';
    });
    
    closeButton.addEventListener('click', () => {
      this.classList.remove('open');
      toggleButton.style.display = 'flex';
    });
  }
}

customElements.define('faq-chat', FAQChat);