// Support / 고객센터 page

const SUPPORT_CATEGORIES = [
  { key: "all", label: "전체", count: 28 },
  { key: "tracking", label: "조회 문의", count: 7 },
  { key: "reserve", label: "예약·취소", count: 9 },
  { key: "payment", label: "결제·환불", count: 5 },
  { key: "lost", label: "분실·파손", count: 4 },
  { key: "account", label: "계정 관리", count: 3 },
];

const FAQS = [
  {
    cat: "tracking",
    q: "송장번호를 입력했는데 조회가 안 돼요.",
    a: "택배사에서 송장이 등록되기까지 평균 2~6시간 정도 소요됩니다. 등록 직후라면 잠시 후 다시 시도해주세요. 그래도 안 되면 송장번호 자릿수와 택배사가 일치하는지 확인 후 1:1 문의로 알려주세요. 솔브잇은 주요 8개 택배사를 자동 인식하지만, 일부 신규 택배사는 곧 추가될 예정이에요.",
  },
  {
    cat: "tracking",
    q: "받는 사람에게도 알림이 자동으로 가나요?",
    a: "예약 시 받는 분의 휴대폰 번호를 입력하시면, 단계별 진행 상황을 카카오톡 알림톡으로 자동 발송해드립니다. 카카오톡을 사용하지 않는 경우 SMS로 대체 발송됩니다. 알림을 원치 않으시면 예약 단계에서 옵션을 해제할 수 있어요.",
  },
  {
    cat: "reserve",
    q: "예약 후에 픽업 일정을 변경할 수 있나요?",
    a: "예약된 픽업 시각의 1시간 전까지는 자유롭게 변경 가능합니다. [마이페이지 → 예약 내역]에서 해당 예약을 선택한 뒤 ‘일정 변경’을 눌러주세요. 1시간 이내 변경이 필요한 경우에는 1588-0000으로 전화해주시면 가능한 한 도와드립니다.",
  },
  {
    cat: "reserve",
    q: "예약을 취소하면 환불은 언제 받을 수 있나요?",
    a: "픽업 전 취소는 100% 환불되며, 결제 수단에 따라 즉시(간편결제) 또는 영업일 기준 3~5일 내(카드)에 환불됩니다. 픽업 완료 후에는 운송 진행 정도에 따라 부분 환불되며, 상세 기준은 이용약관을 참고해주세요.",
  },
  {
    cat: "payment",
    q: "네이버페이·카카오페이로 결제했는데 영수증을 받을 수 있나요?",
    a: "결제 완료 후 [마이페이지 → 결제 내역]에서 현금영수증과 세금계산서를 발행하실 수 있습니다. 세금계산서는 사업자등록증 정보가 등록된 계정에서만 가능하며, 등록은 [설정 → 사업자 정보]에서 진행하실 수 있어요.",
  },
  {
    cat: "lost",
    q: "택배가 분실되거나 파손된 경우 어떻게 보상되나요?",
    a: "솔브잇 모든 예약은 박스 크기에 따라 최대 50만원까지 자동 보상이 포함됩니다. 분실은 운송 시작 후 7일이 지나도 도착하지 않은 경우, 파손은 수령 후 24시간 이내에 신청하실 수 있어요. [고객센터 → 분실·파손 신청]에서 사진과 함께 접수해주시면 평균 영업일 기준 3일 내에 처리됩니다.",
  },
  {
    cat: "account",
    q: "이메일 주소나 휴대폰 번호를 변경하고 싶어요.",
    a: "[설정 → 계정 정보]에서 직접 변경하실 수 있습니다. 휴대폰 번호 변경 시에는 본인인증이 필요하며, 이메일 변경 후에는 새 이메일로 인증 메일이 발송됩니다.",
  },
];

const Support = ({ navigate }) => {
  const [query, setQuery] = React.useState("");
  const [activeCat, setActiveCat] = React.useState("all");
  const [open, setOpen] = React.useState(0);

  const filtered = FAQS.filter(f => {
    if (activeCat !== "all" && f.cat !== activeCat) return false;
    if (query.trim()) {
      const q = query.trim().toLowerCase();
      return f.q.toLowerCase().includes(q) || f.a.toLowerCase().includes(q);
    }
    return true;
  });

  return (
    <main>
      <section className="support-hero">
        <div className="container-narrow">
          <h1>무엇을 도와드릴까요?</h1>
          <p className="sub">자주 묻는 질문에서 답을 찾거나, 24시간 1:1 채팅으로 문의해주세요.</p>
          <div className="support-search">
            <Icon name="search" size={18}/>
            <input
              type="text"
              placeholder="궁금한 내용을 검색해보세요 (예: 송장번호, 예약 취소, 분실)"
              value={query}
              onChange={e => setQuery(e.target.value)}
            />
            <button className="btn btn-primary btn-sm">검색</button>
          </div>
        </div>
      </section>

      <section style={{ padding: "32px 0 0" }}>
        <div className="container">
          <div className="contact-grid">
            <div className="contact-card">
              <div className="contact-icon"><Icon name="msg" size={22}/></div>
              <h3>1:1 채팅 문의</h3>
              <p className="desc">가장 빠르게 답변받는 방법. 챗봇이 먼저 응대하고 필요시 상담사로 연결돼요.</p>
              <div className="meta"><span className="dot"></span> 평균 응답 1분 이내 · 운영 중</div>
              <a className="cta" href="#" onClick={e => { e.preventDefault(); navigate('chat'); }}>채팅 시작 <Icon name="arrow-right" size={14}/></a>
            </div>
            <div className="contact-card">
              <div className="contact-icon"><Icon name="phone" size={22}/></div>
              <h3>전화 문의</h3>
              <p className="desc">긴급한 배송 문제, 분실·파손 등 즉각 상담이 필요한 경우에 이용하세요.</p>
              <div className="meta">평일 09:00~18:00 · 1588-0000</div>
              <a className="cta" href="tel:1588-0000">전화 걸기 <Icon name="arrow-right" size={14}/></a>
            </div>
            <div className="contact-card">
              <div className="contact-icon"><Icon name="shield" size={22}/></div>
              <h3>분실·파손 신청</h3>
              <p className="desc">전용 양식으로 사진과 함께 접수해주시면 영업일 기준 3일 내 처리해드려요.</p>
              <div className="meta">평균 처리 1.8일</div>
              <a className="cta" href="#">신청하러 가기 <Icon name="arrow-right" size={14}/></a>
            </div>
          </div>
        </div>
      </section>

      <section style={{ padding: "72px 0 96px" }}>
        <div className="container">
          <div className="section-head">
            <div className="section-tag">자주 묻는 질문</div>
            <h2 style={{ fontSize: 28 }}>대부분의 궁금증은 여기서 해결돼요</h2>
            <p className="sub" style={{ fontSize: 15 }}>카테고리별로 정리된 28개의 질문과 답변을 확인해보세요.</p>
          </div>

          <div className="category-grid">
            {SUPPORT_CATEGORIES.map(c => (
              <button
                key={c.key}
                className={`category-chip ${activeCat === c.key ? "active" : ""}`}
                onClick={() => { setActiveCat(c.key); setOpen(-1); }}
              >
                <span className="num">{c.count}개 답변</span>
                <span className="ttl">{c.label}</span>
              </button>
            ))}
          </div>

          <div className="faq-list">
            {filtered.length === 0 && (
              <div style={{ padding: 48, textAlign: "center", color: "var(--muted)" }}>
                "{query}"에 해당하는 답변을 찾지 못했어요. 1:1 채팅으로 문의해주세요.
              </div>
            )}
            {filtered.map((f, i) => (
              <div key={i} className={`faq-item ${open === i ? "open" : ""}`}>
                <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                  <span className="q-mark">Q</span>
                  <span className="q-text">{f.q}</span>
                  <span className="q-chev">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none"
                         stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                      <path d="m6 9 6 6 6-6"/>
                    </svg>
                  </span>
                </button>
                <div className="faq-a">
                  <div className="faq-a-inner">
                    <div className="faq-a-text">{f.a}</div>
                  </div>
                </div>
              </div>
            ))}
          </div>

          <div className="callout">
            <div className="ic"><Icon name="bell" size={22}/></div>
            <div className="body">
              <h4>원하는 답변을 못 찾으셨나요?</h4>
              <p>운영시간 외에도 1:1 채팅으로 문의를 남기시면 다음 영업일 09시 전에 답변드려요.</p>
            </div>
            <button className="btn btn-primary" onClick={() => navigate('chat')}>
              <Icon name="msg" size={14}/> 1:1 채팅 시작
            </button>
          </div>
        </div>
      </section>
    </main>
  );
};

window.Support = Support;