// Help centre — searchable FAQ list with accordion answers

function SettingsHelpCentreScreen({ theme, accent, onBack }) {
  const [query, setQuery] = React.useState('');
  const [openId, setOpenId] = React.useState(null);

  const q = query.trim().toLowerCase();
  const results = q
    ? HELP_FAQS.filter(f => f.q.toLowerCase().includes(q) || f.a.toLowerCase().includes(q))
    : HELP_FAQS;

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

      {/* Search */}
      <div style={{ padding: '6px 16px 0' }}>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 10,
          background: theme.surface, border: `0.5px solid ${theme.line2}`,
          borderRadius: 14, padding: '11px 14px',
        }}>
          <Ico.search size={15} stroke={theme.textMute}/>
          <input
            value={query}
            onChange={e => setQuery(e.target.value)}
            placeholder="Search help articles"
            style={{
              flex: 1, background: 'transparent', border: 'none', outline: 'none',
              color: theme.text, fontFamily: FONTS.ui, fontSize: 13,
            }}
          />
          {query && (
            <button onClick={() => setQuery('')} style={{
              background: 'transparent', border: 'none', color: theme.textMute, cursor: 'pointer', padding: 0,
            }}><Ico.close size={14}/></button>
          )}
        </div>
      </div>

      {/* Top asked label */}
      <div style={{ padding: '20px 16px 0' }}>
        <SectionLabel theme={theme} style={{ padding: '0 4px 8px' }}>
          {query ? `${results.length} result${results.length === 1 ? '' : 's'}` : 'Top asked questions'}
        </SectionLabel>
        <Card theme={theme} padded={false}>
          {results.length === 0 && (
            <div style={{ padding: '22px 16px', textAlign: 'center', fontSize: 12.5, color: theme.textDim }}>
              No matches — try a different keyword.
            </div>
          )}
          {results.map((f, i) => {
            const open = openId === f.id;
            return (
              <div key={f.id} style={{ borderBottom: i === results.length - 1 ? 'none' : `0.5px solid ${theme.line}` }}>
                <button onClick={() => setOpenId(open ? null : f.id)} style={{
                  width: '100%', textAlign: 'left',
                  display: 'flex', alignItems: 'center', gap: 10,
                  padding: '14px 16px',
                  background: 'transparent', border: 'none',
                  color: theme.text, cursor: 'pointer',
                }}>
                  <span style={{ flex: 1, fontSize: 13.5, fontWeight: 500, lineHeight: 1.35 }}>{f.q}</span>
                  <span style={{ flexShrink: 0, color: theme.textMute, transform: open ? 'rotate(180deg)' : 'none', transition: 'transform 160ms' }}>
                    <Ico.chevD size={14}/>
                  </span>
                </button>
                {open && (
                  <div style={{
                    padding: '0 16px 14px',
                    fontSize: 12.5, color: theme.textDim, lineHeight: 1.55,
                  }}>{f.a}</div>
                )}
              </div>
            );
          })}
        </Card>
      </div>

      {/* Still need help */}
      <div style={{ padding: '22px 16px 0' }}>
        <button onClick={() => { window.location.href = 'mailto:hello@himma.app'; }} style={{
          width: '100%',
          background: theme.surface, border: `0.5px solid ${theme.line2}`,
          borderRadius: 16, padding: '14px',
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
          color: theme.text, fontFamily: FONTS.ui, fontSize: 13, fontWeight: 500,
          cursor: 'pointer',
        }}>
          <Ico.send size={14} stroke={theme.text}/> Contact us — reply within 24 hours
        </button>
      </div>
    </Screen>
  );
}

Object.assign(window, { SettingsHelpCentreScreen });