// Help & Shortcuts — faithful to the app's HelpTab (Core Shortcuts + docs note).
function HelpScreen() {
  const { PageHead } = window.RokkorScreens;
  const { Section, Inset } = window.RokkorKit;
  const I = window.RokkorIcons;

  function Keys({ combo }) {
    return (
      <div style={{ display: "flex", gap: 6 }}>
        {combo.map((k, i) => (
          <span key={i} style={{ font: "500 12.5px/1 var(--font-mono)", color: "var(--ink-800)", background: "var(--paper-50)", border: "1px solid var(--border-strong)", borderRadius: 6, padding: "6px 10px" }}>{k}</span>
        ))}
      </div>
    );
  }

  const shortcuts = [
    ["Toggle dictation", ["Ctrl", "Shift", "Space"]],
    ["Push-to-talk (hold)", ["Ctrl", "Win"]],
    ["Scratchpad note (hold)", ["Ctrl", "Alt", "Win"]],
    ["Apply Next Capture override (hold)", ["Ctrl", "Shift", "Win"]],
    ["Learn last correction", ["Ctrl", "Shift", "L"]],
  ];

  return (
    <div style={{ maxWidth: 720 }}>
      <PageHead title="Help & Shortcuts" subtitle="Everything you need to drive ROKKOR by voice — hotkeys are configurable in Settings." />

      <div style={{ display: "flex", flexDirection: "column", gap: 22 }}>
        <Section icon={I.Settings} title="Core Shortcuts" desc="Global hotkeys. Change any of these under Settings → General.">
          <div style={{ display: "flex", flexDirection: "column" }}>
            {shortcuts.map(([label, combo], i) => (
              <div key={i} style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16, padding: "14px 0", borderTop: i ? "1px solid var(--border)" : "none" }}>
                <span style={{ font: "400 14.5px/1.3 var(--font-sans)", color: "var(--ink-900)" }}>{label}</span>
                <Keys combo={combo} />
              </div>
            ))}
          </div>
        </Section>

        <Section icon={I.Mic} title="Dictation basics" desc="The two-second version.">
          <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            {[
              ["Hold to talk", "Press and hold your push-to-talk key, speak naturally, release. The text lands at your cursor."],
              ["Self-correct out loud", 'Say "scratch that" or "no wait, I meant…" and ROKKOR drops the false start.'],
              ["Teach a fix once", "Edit any output, then press Learn last correction — ROKKOR remembers your preference for next time."],
            ].map(([t, d], i) => (
              <Inset key={i}>
                <div style={{ font: "600 14px/1.2 var(--font-sans)", color: "var(--ink-900)" }}>{t}</div>
                <div style={{ font: "400 13px/1.5 var(--font-sans)", color: "var(--ink-500)", marginTop: 5 }}>{d}</div>
              </Inset>
            ))}
          </div>
        </Section>

        <div style={{ font: "400 13px/1.6 var(--font-sans)", color: "var(--ink-500)", borderLeft: "2px solid var(--border-strong)", paddingLeft: 14 }}>
          Full documentation, troubleshooting, and Linux-specific notes will live here. ROKKOR is designed to be delightful on Windows and Linux.
        </div>
      </div>
    </div>
  );
}

window.RokkorScreens = Object.assign(window.RokkorScreens || {}, { HelpScreen });