// p14-help.jsx — Help screen with category grid + FAQ accordion

function ScreenHelp({ onNavigate }) {
  const T = window.T;
  const [query, setQuery] = React.useState('');
  const [cat, setCat] = React.useState(null);
  const [open, setOpen] = React.useState(null);
  const [showContactSheet, setShowContactSheet] = React.useState(false);

  const cats = window.HELP_CATS;
  const faq = window.FAQ;
  const filtered = faq.filter(f =>
    (!cat || f.cat === cat) &&
    (!query || f.q.includes(query) || f.a.includes(query))
  );

  return (
    <div style={{ position: 'absolute', inset: 0, background: T.bg,
                  display: 'flex', flexDirection: 'column' }}>
      <TopBar title="도움말"
        leading={<IconButton icon={<Icons.Back size={22} color={T.ink}/>}
                             onClick={() => onNavigate('back')}/>}/>

      <div style={{ flex: 1, overflowY: 'auto', padding: '8px 20px 32px' }}>
        <div style={{
          fontSize: 26, fontWeight: 700, color: T.ink,
          letterSpacing: '-0.03em', lineHeight: 1.25,
          margin: '6px 0 18px',
        }}>어떻게<br/>도와드릴까요?</div>

        <SearchBar value={query} onChange={setQuery}
                   placeholder="궁금한 점을 검색해보세요"/>

        <div style={{ marginTop: 24 }}>
          <div style={{ fontSize: 13, fontWeight: 600, color: T.ink3,
                        marginBottom: 10, letterSpacing: '-0.01em' }}>주제별로 보기</div>
          <div style={{
            display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8,
          }}>
            {cats.map(c => {
              const on = cat === c.id;
              return (
                <button key={c.id}
                        onClick={() => setCat(on ? null : c.id)}
                        style={{
                  background: on ? T.accentSoft : T.surface,
                  border: on ? `1.5px solid ${T.accent}` : `0.5px solid ${T.hairline}`,
                  borderRadius: 14, padding: '14px 6px',
                  display: 'flex', flexDirection: 'column',
                  alignItems: 'center', gap: 6,
                  fontFamily: 'inherit', cursor: 'pointer',
                }}>
                  <div style={{ fontSize: 22, lineHeight: 1 }}>{c.icon}</div>
                  <div style={{ fontSize: 12, fontWeight: 600,
                                color: on ? T.accent : T.ink, letterSpacing: '-0.01em' }}>
                    {c.label}
                  </div>
                </button>
              );
            })}
          </div>
        </div>

        <div style={{ marginTop: 28 }}>
          <div style={{
            display: 'flex', alignItems: 'baseline', gap: 6,
            marginBottom: 10,
          }}>
            <div style={{ fontSize: 15, fontWeight: 700, color: T.ink,
                          letterSpacing: '-0.02em' }}>자주 묻는 질문</div>
            <div style={{ fontSize: 12, color: T.ink3 }}>· {filtered.length}개</div>
          </div>

          {filtered.length === 0 ? (
            <div style={{
              background: T.surface, borderRadius: 14,
              border: `1.5px dashed ${T.hairlineStrong}`,
              padding: '32px 20px', textAlign: 'center',
            }}>
              <div style={{ fontSize: 14, color: T.ink2, lineHeight: 1.5 }}>
                찾으시는 답변이 없어요.<br/>직접 문의해보세요.
              </div>
            </div>
          ) : (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {filtered.map((f, i) => {
                const on = open === i;
                return (
                  <div key={i} style={{
                    background: T.surface, borderRadius: 14,
                    border: `0.5px solid ${T.hairline}`,
                    overflow: 'hidden',
                  }}>
                    <button onClick={() => setOpen(on ? null : i)} style={{
                      width: '100%', textAlign: 'left',
                      background: 'transparent', border: 'none',
                      padding: '14px 16px',
                      display: 'flex', alignItems: 'center', gap: 12,
                      fontFamily: 'inherit', cursor: 'pointer',
                    }}>
                      <div style={{ flex: 1, fontSize: 14.5, fontWeight: 600,
                                    color: T.ink, letterSpacing: '-0.01em' }}>
                        {f.q}
                      </div>
                      <div style={{
                        width: 28, height: 28, borderRadius: 14,
                        background: on ? T.accent : T.inkOverlaySoft,
                        display: 'flex', alignItems: 'center', justifyContent: 'center',
                        color: on ? '#FFF' : T.ink2,
                        transition: 'background .15s',
                      }}>
                        {on ? <Icons.ChevronU size={14} color="#FFF"/> : <Icons.ChevronD size={14} color={T.ink2}/>}
                      </div>
                    </button>
                    {on && (
                      <div style={{
                        padding: '0 16px 14px',
                        fontSize: 13.5, color: T.ink2, lineHeight: 1.6,
                      }}>{f.a}</div>
                    )}
                  </div>
                );
              })}
            </div>
          )}
        </div>

        <div style={{
          marginTop: 24, borderRadius: 16,
          background: `linear-gradient(135deg, ${T.accentSoft} 0%, ${T.accentSoft.replace('0.14', '0.06')} 100%)`,
          padding: '20px 16px',
          display: 'flex', flexDirection: 'column',
          alignItems: 'center', gap: 12, textAlign: 'center',
        }}>
          <div style={{ width: 56, height: 56, borderRadius: '50%',
                        background: T.surface, overflow: 'hidden' }}>
            <Hamster count={5} max={10} size={56} headOnly/>
          </div>
          <div style={{ fontSize: 14, fontWeight: 600, color: T.ink,
                        letterSpacing: '-0.01em' }}>
            찾으시는 답변이 없으세요?
          </div>
          <Button kind="primary" icon={<Icons.Mail size={16} color="#FFF"/>}
                  onClick={() => setShowContactSheet(true)}>
            직접 문의하기
          </Button>
        </div>
      </div>

      <BottomSheet open={showContactSheet} onClose={() => setShowContactSheet(false)}>
        <ContactSheet onClose={() => setShowContactSheet(false)}/>
      </BottomSheet>
    </div>
  );
}

Object.assign(window, { ScreenHelp });