// FAQSection.jsx
// SEO: 此 component 將高搜尋意圖關鍵字（特斯拉事故車收購、Model Y 零件報價、
// Model 3 電池包、特斯拉工單報價單、特斯拉殘值、台灣特斯拉二手零件、
// BMW Benz Porsche 事故車收購）以純文字渲染於 DOM，使 Google 可直接索引，
// 不依賴 JavaScript 執行後抓取。

/* ── Inject component styles once ─────────────────────────────── */
(function injectFAQStyles() {
  if (document.getElementById('ev-faq-css')) return;
  var s = document.createElement('style');
  s.id = 'ev-faq-css';
  s.textContent = [
    '.ev-faq{background:var(--bg-2);padding:96px 32px;}',
    '.ev-faq__inner{max-width:680px;margin:0 auto;}',
    '.ev-faq__head{text-align:center;margin-bottom:48px;}',
    '.ev-faq__title{',
      'font-size:var(--fs-h2);font-weight:600;',
      'letter-spacing:var(--ls-headline);color:var(--ink);',
      'line-height:var(--lh-snug);margin:6px 0 0;',
    '}',
    '.ev-faq__item{border-top:1px solid var(--line);}',
    '.ev-faq__item:last-child{border-bottom:1px solid var(--line);}',
    '.ev-faq__q{',
      'width:100%;background:none;border:none;',
      'padding:20px 0;',
      'display:flex;align-items:center;justify-content:space-between;gap:16px;',
      'cursor:pointer;text-align:left;',
      'font-family:var(--font-text);font-size:17px;font-weight:500;',
      'color:var(--ink);line-height:1.4;',
      'transition:color var(--dur-fast) var(--ease-out);',
    '}',
    '.ev-faq__q:hover{color:var(--ink-2);}',
    '.ev-faq__icon{color:var(--ink-3);flex-shrink:0;}',
    '.ev-faq__a-wrap{overflow:hidden;transition:max-height 220ms var(--ease-out);}',
    '.ev-faq__a{font-size:15px;color:var(--ink-2);line-height:1.6;padding-bottom:20px;margin:0;}',
    '@media(max-width:767px){',
      '.ev-faq{padding:48px 20px;}',
      '.ev-faq__head{margin-bottom:36px;}',
    '}',
  ].join('');
  document.head.appendChild(s);
}());

/* ── Data ──────────────────────────────────────────────────────── */

const FAQ_ITEMS = [
  {
    id: 1,
    q: '特斯拉事故車收購的流程是什麼？',
    a: '加入官方 LINE @52ev，傳送事故照片，1 個工作日內提供估價。確認後安排拖車，款項當日入帳。從評估到結案，全程一個窗口。',
  },
  {
    id: 2,
    q: 'Model Y 前保桿報價怎麼看？',
    a: '零件報價依損傷程度、顏色、是否含安裝而異。加 LINE 傳照片，JR 廠長直接回覆，不需要到場。',
  },
  {
    id: 3,
    q: '除了特斯拉，你們也收其他品牌的事故車嗎？',
    a: '是的。BMW、Benz、Porsche、Lexus、Toyota 的全損車收購與零件拆賣我們都處理。加 LINE 說明車型與狀況即可。',
  },
  {
    id: 4,
    q: '特斯拉工單和報價單怎麼取得？',
    a: '傳照片給我們評估後，我們提供正式報價單與工單。所有項目逐條列明，包含零件費用與工時，無隱藏費用。',
  },
  {
    id: 5,
    q: 'Model 3 電池包有庫存嗎？',
    a: '電池包庫存依目前拆解進度而定。加 LINE 詢問當前狀況，我們會告知可用型號、測試結果與報價。',
  },
  {
    id: 7,
    q: '台灣有特斯拉二手零件可以買嗎？',
    a: '有。我們的零件全部來自自行拆解的事故車，每件均實體驗貨，可看實品、可包修、部分提供保固。',
  },
];

/* ── Icons ─────────────────────────────────────────────────────── */

function CirclePlusIcon() {
  return (
    <svg
      width="20" height="20" viewBox="0 0 24 24"
      fill="none" stroke="currentColor"
      strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"
      aria-hidden="true"
    >
      <circle cx="12" cy="12" r="10" />
      <line x1="12" y1="8" x2="12" y2="16" />
      <line x1="8"  y1="12" x2="16" y2="12" />
    </svg>
  );
}

function CircleMinusIcon() {
  return (
    <svg
      width="20" height="20" viewBox="0 0 24 24"
      fill="none" stroke="currentColor"
      strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"
      aria-hidden="true"
    >
      <circle cx="12" cy="12" r="10" />
      <line x1="8" y1="12" x2="16" y2="12" />
    </svg>
  );
}

/* ── FAQItem ────────────────────────────────────────────────────── */

function FAQItem({ item, isOpen, onToggle }) {
  // Measure real answer height for accurate max-height transition
  const answerRef = React.useRef(null);
  const [answerHeight, setAnswerHeight] = React.useState(0);

  React.useEffect(() => {
    if (answerRef.current) {
      setAnswerHeight(answerRef.current.scrollHeight);
    }
  }, []);

  return (
    <div className="ev-faq__item">
      <button
        className="ev-faq__q"
        onClick={onToggle}
        aria-expanded={isOpen}
        aria-controls={`faq-answer-${item.id}`}
        id={`faq-q-${item.id}`}
      >
        <span>{item.q}</span>
        <span className="ev-faq__icon">
          {isOpen ? <CircleMinusIcon /> : <CirclePlusIcon />}
        </span>
      </button>

      <div
        className="ev-faq__a-wrap"
        id={`faq-answer-${item.id}`}
        role="region"
        aria-labelledby={`faq-q-${item.id}`}
        style={{ maxHeight: isOpen ? `${answerHeight}px` : '0' }}
      >
        <p className="ev-faq__a" ref={answerRef}>{item.a}</p>
      </div>
    </div>
  );
}

/* ── FAQSection ─────────────────────────────────────────────────── */

function FAQSection() {
  // First item open by default
  const [openId, setOpenId] = React.useState(1);

  const toggle = (id) => setOpenId((prev) => (prev === id ? null : id));

  return (
    <section className="ev-faq">
      <div className="ev-faq__inner">

        <header className="ev-faq__head">
          <div className="ev-eyebrow ev-eyebrow--accent">常見問題</div>
          <h2 className="ev-faq__title">你可能想問的。</h2>
        </header>

        <div role="list">
          {FAQ_ITEMS.map((item) => (
            <FAQItem
              key={item.id}
              item={item}
              isOpen={openId === item.id}
              onToggle={() => toggle(item.id)}
            />
          ))}
        </div>

      </div>
    </section>
  );
}

window.FAQSection = FAQSection;