// 튜브픽 v2 — faq.html
const TP2FAQPage = () => {
  const T = window.TP2_THEME;
  const D = window.TP2_DATA;
  const [query, setQuery] = React.useState('');

  const filtered = D.faq.filter(f =>
    !query || f.q.toLowerCase().includes(query.toLowerCase()) || f.a.toLowerCase().includes(query.toLowerCase())
  );

  return (
    <TP2Page active="faq.html">
      {/* HERO */}
      <section style={{ padding: '80px 48px 48px', textAlign: 'center', borderBottom: `1px solid ${T.line}` }}>
        <div style={{ maxWidth: 980, margin: '0 auto' }}>
          <div style={{ fontSize: 13, color: T.accent, fontWeight: 700, letterSpacing: 1.5, marginBottom: 16 }}>
            ━━ FAQ
          </div>
          <h1 style={{ fontSize: 84, fontWeight: 900, letterSpacing: -3, margin: '0 0 20px', lineHeight: 1 }}>
            자주 묻는 질문.
          </h1>
          <p style={{ fontSize: 19, color: T.sub, lineHeight: 1.6, margin: '0 auto 32px', maxWidth: 600 }}>
            궁금한 점을 모두 해결해 드립니다. 더 궁금한 점은 오픈톡으로 편하게 문의해 주세요.
          </p>

          {/* 검색 */}
          <div style={{
            maxWidth: 560, margin: '0 auto',
            display: 'flex', alignItems: 'center', gap: 12,
            background: T.card, border: `1px solid ${T.line}`,
            borderRadius: 999, padding: '6px 6px 6px 24px',
            boxShadow: T.shadowSoft,
          }}>
            <span style={{ fontSize: 18, color: T.sub }}>⌕</span>
            <input
              type="text"
              value={query}
              onChange={(e) => setQuery(e.target.value)}
              placeholder="질문을 검색해보세요…"
              style={{
                flex: 1, border: 'none', outline: 'none',
                fontSize: 15, padding: '12px 0',
                fontFamily: T.sans, color: T.ink, background: 'transparent',
              }}
            />
            {query && (
              <button onClick={() => setQuery('')} style={{
                background: 'rgba(14,14,26,.06)', border: 'none',
                width: 32, height: 32, borderRadius: '50%',
                cursor: 'pointer', color: T.sub, fontSize: 14,
              }}>×</button>
            )}
          </div>
        </div>
      </section>

      {/* FAQ LIST */}
      <section style={{ padding: '64px 48px' }}>
        <div style={{ maxWidth: 920, margin: '0 auto' }}>
          {filtered.length === 0 ? (
            <div style={{ textAlign: 'center', padding: '80px 0', color: T.sub }}>
              검색 결과가 없습니다. 오픈톡으로 문의해 주세요.
            </div>
          ) : (
            <TP2FAQ items={filtered} defaultOpen={0} />
          )}

          {/* Quick links */}
          <div style={{ marginTop: 56, padding: 32, background: T.card, border: `1px solid ${T.line}`, borderRadius: 20 }}>
            <h3 style={{ fontSize: 20, fontWeight: 800, margin: '0 0 16px' }}>여기서 답을 찾지 못하셨나요?</h3>
            <p style={{ fontSize: 14, color: T.sub, margin: '0 0 20px', lineHeight: 1.7 }}>
              개별 채널 사양, 항소완료 채널 재고, 대량 구매 견적 등 모든 문의는 카카오톡 오픈채팅으로 받고 있습니다.
              평균 30분 이내 답변드립니다.
            </p>
            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
              <a href="https://open.kakao.com/o/sqs5vuti" target="_blank" style={{
                background: T.ink, color: '#fff', padding: '12px 20px',
                borderRadius: 10, fontSize: 14, fontWeight: 700,
                display: 'inline-flex', alignItems: 'center', gap: 8,
              }}>💬 오픈톡 문의 →</a>
              <a href="channels.html" style={{
                background: T.bg, color: T.ink, border: `1px solid ${T.line}`,
                padding: '12px 20px', borderRadius: 10, fontSize: 14, fontWeight: 700,
              }}>가격표 보기</a>
              <a href="guide.html" style={{
                background: T.bg, color: T.ink, border: `1px solid ${T.line}`,
                padding: '12px 20px', borderRadius: 10, fontSize: 14, fontWeight: 700,
              }}>구매절차 보기</a>
            </div>
          </div>
        </div>
      </section>

      <TP2CTABanner title="더 궁금한 점이 있으신가요?" sub="카카오톡으로 편하게 문의해 주세요." />
    </TP2Page>
  );
};

window.TP2FAQPage = TP2FAQPage;