function Support({ nav, from }) {
  const back = from || 'settings';
  const { Button, BottomSheet } = window.SpotureDesignSystem_f7ad96;
  const [topic, setTopic] = React.useState(null);
  const [text, setText] = React.useState('');
  const [email, setEmail] = React.useState('gukbap92@gmail.com');
  const [shots, setShots] = React.useState(0);
  const [sent, setSent] = React.useState(false);
  const [faqOpen, setFaqOpen] = React.useState(null);
  const topics = [
    { key: '위치·장소 제안', icon: 'map-pin' },
    { key: '미션 심사 결과', icon: 'flag' },
    { key: '계정·로그인', icon: 'user' },
    { key: '신고·차단', icon: 'shield' },
    { key: '오류 제보', icon: 'bug' },
    { key: '기타', icon: 'dots' }
  ];
  const faqs = [
    { q: '미션 인증이 반려됐어요', a: '가게 간판이나 메뉴가 보이지 않으면 반려될 수 있어요. 반려 사유는 미션 상세에서 확인할 수 있고, 같은 미션에 다시 응모할 수 있습니다.' },
    { q: '내 사진 위치가 잘못 확정됐어요', a: '게시물 메뉴 > 위치 수정에서 다시 지정할 수 있어요. 이웃의 제안은 작성자가 승인해야만 반영됩니다.' },
    { q: '탈퇴한 계정을 되살릴 수 있나요?', a: '탈퇴 후 30일 안에 같은 소셜 계정으로 로그인하면 게시물과 배지가 그대로 복구됩니다.' }
  ];
  const valid = topic && text.trim().length >= 10;
  if (sent) return (
    <div style={{ flex: '1 1 0%', minHeight: 0, display: 'flex', flexDirection: 'column' }}>
      <StatusBar />
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: '0 32px', textAlign: 'center' }}>
        <div style={{ width: 64, height: 64, borderRadius: '50%', background: 'var(--bg-accent)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 18 }}><i className="ti ti-send" style={{ fontSize: 28, color: 'var(--text-accent)' }}></i></div>
        <span style={{ font: 'var(--text-heading)', display: 'block', marginBottom: 10 }}>문의를 접수했어요</span>
        <p style={{ font: 'var(--text-caption)', color: 'var(--text-secondary)', lineHeight: 1.7, margin: '0 0 8px', textWrap: 'pretty' }}>평일 기준 1~2일 안에 {email}로 답변드릴게요. 접수번호는 #SP-24817입니다.</p>
        <p style={{ font: 'var(--text-micro)', color: 'var(--text-muted)', margin: '0 0 26px' }}>답변이 오면 알림으로도 알려드려요.</p>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10, width: '100%' }}>
          <button onClick={() => nav('supportTickets')} style={{ padding: '15px 34px', font: '600 15px/1 var(--font-family)', border: 'none', background: 'var(--bg-ink)', color: '#fff', borderRadius: 999, cursor: 'pointer' }}>문의 내역 보기</button>
          <button onClick={() => nav(back)} style={{ padding: '15px 34px', font: '600 15px/1 var(--font-family)', border: '1px solid var(--border-strong)', background: 'transparent', color: 'var(--text-primary)', borderRadius: 999, cursor: 'pointer' }}>확인</button>
        </div>
      </div>
    </div>
  );
  return (
    <div style={{ flex: '1 1 0%', minHeight: 0, display: 'flex', flexDirection: 'column', position: 'relative' }}>
      <StatusBar />
      <ScreenHeader title="문의하기" sub="무엇을 도와드릴까요?" onBack={() => nav(back)} />
      <div style={{ flex: '1 1 0%', minHeight: 0, overflowY: 'auto', padding: '0 20px 120px', display: 'flex', flexDirection: 'column', gap: 22 }}>
        <div onClick={() => nav('supportTickets')} style={{ display: 'flex', alignItems: 'center', gap: 12, background: 'var(--surface-1)', border: '1px solid var(--border)', borderRadius: 'var(--radius-tile)', padding: '15px 16px', cursor: 'pointer' }}>
          <i className="ti ti-message-2" style={{ fontSize: 19, color: 'var(--text-primary)' }}></i>
          <div style={{ flex: 1, minWidth: 0 }}>
            <span style={{ font: 'var(--text-body-strong)', display: 'block', marginBottom: 3 }}>문의 내역</span>
            <span style={{ font: 'var(--text-micro)', color: 'var(--text-secondary)' }}>답변 1건 · 진행 중 1건</span>
          </div>
          <span style={{ font: '600 11px/1 var(--font-family)', color: 'var(--text-accent)', background: 'var(--bg-accent)', borderRadius: 999, padding: '6px 9px' }}>새 답변</span>
          <i className="ti ti-chevron-right" style={{ fontSize: 16, color: 'var(--text-muted)' }}></i>
        </div>
        <div>
          <span style={{ font: 'var(--text-body-strong)', display: 'block', marginBottom: 10 }}>자주 묻는 질문</span>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 2, background: 'var(--surface-1)', border: '1px solid var(--border)', borderRadius: 'var(--radius-tile)', overflow: 'hidden' }}>
            {faqs.map((f, i) => (
              <div key={f.q} style={{ borderTop: i ? '1px solid var(--border)' : 'none' }}>
                <div onClick={() => setFaqOpen(faqOpen === i ? null : i)} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '15px 16px', cursor: 'pointer' }}>
                  <span style={{ flex: 1, font: 'var(--text-body)', lineHeight: 1.45 }}>{f.q}</span>
                  <i className={faqOpen === i ? 'ti ti-chevron-up' : 'ti ti-chevron-down'} style={{ fontSize: 15, color: 'var(--text-muted)', flexShrink: 0 }}></i>
                </div>
                {faqOpen === i && <p style={{ font: 'var(--text-caption)', color: 'var(--text-secondary)', lineHeight: 1.7, margin: 0, padding: '0 16px 16px', textWrap: 'pretty' }}>{f.a}</p>}
              </div>
            ))}
          </div>
        </div>
        <div>
          <span style={{ font: 'var(--text-body-strong)', display: 'block', marginBottom: 10 }}>문의 유형</span>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
            {topics.map(t => {
              const on = topic === t.key;
              return (
                <span key={t.key} onClick={() => setTopic(t.key)} style={{ display: 'inline-flex', alignItems: 'center', gap: 6, font: on ? '600 13px/1 var(--font-family)' : '400 13px/1 var(--font-family)', color: on ? '#fff' : 'var(--text-primary)', background: on ? 'var(--bg-ink)' : 'var(--surface-1)', border: '1px solid ' + (on ? 'var(--bg-ink)' : 'var(--border)'), borderRadius: 999, padding: '11px 15px', cursor: 'pointer' }}><i className={'ti ti-' + t.icon} style={{ fontSize: 14 }}></i>{t.key}</span>
              );
            })}
          </div>
        </div>
        <div>
          <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 9 }}>
            <span style={{ font: 'var(--text-body-strong)' }}>내용</span>
            <span style={{ font: 'var(--text-micro)', color: 'var(--text-muted)' }}>{text.length}/500</span>
          </div>
          <textarea value={text} onChange={e => setText(e.target.value.slice(0, 500))} rows={6} placeholder="언제, 어떤 화면에서 문제가 있었는지 알려주시면 빠르게 확인할 수 있어요." style={{ width: '100%', boxSizing: 'border-box', padding: '15px 16px', font: 'var(--text-body)', fontFamily: 'var(--font-family)', color: 'var(--text-primary)', background: 'var(--surface-1)', border: '1px solid ' + (text ? 'var(--text-accent)' : 'var(--border)'), borderRadius: 'var(--radius-tile)', outline: 'none', resize: 'none', lineHeight: 1.6 }}></textarea>
        </div>
        <div>
          <span style={{ font: 'var(--text-body-strong)', display: 'block', marginBottom: 10 }}>첨부 <span style={{ font: 'var(--text-small)', color: 'var(--text-muted)', fontWeight: 400 }}>선택 · 최대 3장</span></span>
          <div style={{ display: 'flex', gap: 8 }}>
            {[0, 1, 2].map(i => (
              <div key={i} onClick={() => setShots(s => (i < s ? i : i + 1))} style={{ width: 72, height: 72, borderRadius: 'var(--radius-tile)', border: '1.5px dashed ' + (i < shots ? 'transparent' : 'var(--border-strong)'), background: i < shots ? 'var(--surface-2)' : 'transparent', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer' }}>
                <i className={i < shots ? 'ti ti-photo' : 'ti ti-plus'} style={{ fontSize: 18, color: 'var(--text-muted)' }}></i>
              </div>
            ))}
          </div>
        </div>
        <div>
          <span style={{ font: 'var(--text-body-strong)', display: 'block', marginBottom: 9 }}>답변받을 이메일</span>
          <input value={email} onChange={e => setEmail(e.target.value)} style={{ width: '100%', boxSizing: 'border-box', padding: '15px 16px', font: 'var(--text-body)', fontFamily: 'var(--font-family)', color: 'var(--text-primary)', background: 'var(--surface-1)', border: '1px solid var(--border)', borderRadius: 'var(--radius-tile)', outline: 'none' }} />
        </div>
        <div style={{ display: 'flex', gap: 10, background: 'var(--surface-2)', borderRadius: 'var(--radius-tile)', padding: '14px 16px' }}>
          <i className="ti ti-info-circle" style={{ fontSize: 17, color: 'var(--text-muted)', flexShrink: 0, marginTop: 1 }}></i>
          <span style={{ font: 'var(--text-micro)', color: 'var(--text-secondary)', lineHeight: 1.6, textWrap: 'pretty' }}>문의 확인을 위해 기기 정보와 앱 버전(1.4.2)이 함께 전송됩니다.</span>
        </div>
      </div>
      <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, padding: '12px 20px 20px', background: 'var(--bg-app)' }}>
        <Button variant="primary" disabled={!valid} onClick={() => setSent(true)}>{valid ? '문의 보내기' : topic ? '내용을 10자 이상 적어주세요' : '문의 유형을 골라주세요'}</Button>
      </div>
    </div>
  );
}
window.Support = Support;