// Contact Us screen — topic selector + message form + channel links

function SettingsContactUsScreen({ theme, accent, onBack }) {
  const [topic, setTopic]     = React.useState(null);
  const [message, setMessage] = React.useState('');
  const [sent, setSent]       = React.useState(false);

  const topics = CONTACT_TOPICS;

  function handleSubmit() {
    if (!topic || !message.trim()) return;
    setSent(true);
  }

  if (sent) {
    return (
      <Screen theme={theme} padTop={0} padBottom={40}>
        <NavBar theme={theme} title="Contact us" onBack={onBack}/>
        <div style={{
          display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
          padding: '48px 24px', gap: 16, textAlign: 'center',
        }}>
          <div style={{
            width: 56, height: 56, borderRadius: 28,
            background: `${accent}1A`, color: accent,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <Ico.check size={26} stroke={accent} sw={2}/>
          </div>
          <div style={{ fontFamily: FONTS.display, fontSize: 20, color: theme.text, fontWeight: 400 }}>
            Message sent
          </div>
          <div style={{ fontSize: 13, color: theme.textDim, lineHeight: 1.55, maxWidth: 260 }}>
            We'll reply to {USER.email} within 24 hours. You can also track this in your inbox.
          </div>
          <button onClick={onBack} style={{
            marginTop: 8,
            background: theme.text, color: theme.bg,
            border: 'none', borderRadius: 25,
            padding: '13px 32px',
            fontFamily: FONTS.ui, fontSize: 13.5, fontWeight: 600, cursor: 'pointer',
          }}>Done</button>
        </div>
      </Screen>
    );
  }

  return (
    <Screen theme={theme} padTop={0} padBottom={40}>
      <NavBar theme={theme} title="Contact us" onBack={onBack}/>

      {/* Channel options */}
      <div style={{ padding: '6px 16px 0' }}>
        <SectionLabel theme={theme} style={{ padding: '0 4px 8px' }}>Reach us directly</SectionLabel>
        <Card theme={theme} padded={false}>
          {CONTACT_CHANNELS.map((ch, i) => {
            const Icon = Ico[ch.icon] || Ico.send;
            return (
              <button
                key={ch.id}
                onClick={() => { if (ch.href) window.open(ch.href, '_blank'); }}
                style={{
                  width: '100%', textAlign: 'left',
                  display: 'flex', alignItems: 'center', gap: 12,
                  padding: '13px 16px',
                  background: 'transparent', border: 'none',
                  borderBottom: i === CONTACT_CHANNELS.length - 1 ? 'none' : `0.5px solid ${theme.line}`,
                  cursor: 'pointer',
                }}>
                <div style={{
                  width: 32, height: 32, borderRadius: 10,
                  background: `${accent}1A`, color: accent,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  flexShrink: 0,
                }}><Icon size={15}/></div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 13.5, color: theme.text, fontWeight: 500, fontFamily: FONTS.ui }}>{ch.label}</div>
                  <div style={{ fontSize: 11.5, color: theme.textDim, marginTop: 1 }}>{ch.sub}</div>
                </div>
                <Ico.chevR size={14} stroke={theme.textMute}/>
              </button>
            );
          })}
        </Card>
      </div>

      {/* Message form */}
      <div style={{ padding: '20px 16px 0' }}>
        <SectionLabel theme={theme} style={{ padding: '0 4px 8px' }}>Send a message</SectionLabel>
        <Card theme={theme} padded={false}>

          {/* Topic picker */}
          <div style={{ padding: '14px 16px', borderBottom: `0.5px solid ${theme.line}` }}>
            <div style={{ fontSize: 12, color: theme.textMute, fontFamily: FONTS.mono, letterSpacing: 0.8, marginBottom: 8 }}>Topic</div>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
              {topics.map(t => (
                <button
                  key={t.id}
                  onClick={() => setTopic(t.id)}
                  style={{
                    background: topic === t.id ? theme.text : 'transparent',
                    color: topic === t.id ? theme.bg : theme.text,
                    border: `0.5px solid ${topic === t.id ? theme.text : theme.line2}`,
                    borderRadius: 999,
                    padding: '6px 12px',
                    fontSize: 12, fontFamily: FONTS.ui, fontWeight: 500,
                    cursor: 'pointer',
                    transition: 'all 120ms',
                  }}>{t.label}</button>
              ))}
            </div>
          </div>

          {/* Message textarea */}
          <div style={{ padding: '14px 16px', borderBottom: `0.5px solid ${theme.line}` }}>
            <div style={{ fontSize: 12, color: theme.textMute, fontFamily: FONTS.mono, letterSpacing: 0.8, marginBottom: 8 }}>Message</div>
            <textarea
              value={message}
              onChange={e => setMessage(e.target.value)}
              placeholder="Describe your issue or question…"
              rows={4}
              style={{
                width: '100%',
                background: 'transparent',
                border: 'none', outline: 'none', resize: 'none',
                color: theme.text, fontFamily: FONTS.ui, fontSize: 13,
                lineHeight: 1.5,
              }}
            />
            <div style={{ textAlign: 'right', fontSize: 10.5, color: theme.textMute, fontFamily: FONTS.mono, marginTop: 4 }}>
              {message.length}/500
            </div>
          </div>

          {/* Reply-to reminder */}
          <div style={{ padding: '10px 16px', display: 'flex', alignItems: 'center', gap: 8 }}>
            <Ico.info size={13} stroke={theme.textMute}/>
            <div style={{ fontSize: 11.5, color: theme.textDim }}>
              Reply will be sent to <span style={{ color: theme.text, fontWeight: 500 }}>{USER.email}</span>
            </div>
          </div>
        </Card>
      </div>

      {/* Submit */}
      <div style={{ padding: '16px 16px 0' }}>
        <button
          onClick={handleSubmit}
          disabled={!topic || !message.trim()}
          style={{
            width: '100%',
            background: topic && message.trim() ? theme.text : theme.surface2,
            color: topic && message.trim() ? theme.bg : theme.textMute,
            border: 'none', borderRadius: 25,
            padding: '14px',
            fontFamily: FONTS.ui, fontSize: 13.5, fontWeight: 600,
            cursor: topic && message.trim() ? 'pointer' : 'default',
            transition: 'background 160ms, color 160ms',
          }}>Send message</button>
      </div>
    </Screen>
  );
}

Object.assign(window, { SettingsContactUsScreen });