// Shortcuts help overlay
const Shortcuts = ({ onClose }) => {
  const sections = [
    {
      title: "Global",
      items: [
        { keys: ["⌘", "⇧", "T"], label: "Toggle Taskify dropdown" },
        { keys: ["⌘", "N"],      label: "Quick-add task (anywhere)" },
        { keys: ["⌘", "⇧", "F"], label: "Open fullscreen workspace" },
        { keys: ["Esc"],         label: "Close current overlay" },
      ],
    },
    {
      title: "Navigation",
      items: [
        { keys: ["↑", "↓"],   label: "Move focus" },
        { keys: ["←", "→"],   label: "Switch tabs / pane" },
        { keys: ["1", "2", "3"], label: "Jump to Today / Upcoming / Calendar" },
        { keys: ["⌘", "K"],   label: "Search tasks & projects" },
        { keys: ["⌘", "?"],   label: "Show this help" },
      ],
    },
    {
      title: "Task actions",
      items: [
        { keys: ["↵"],         label: "Open / edit selected task" },
        { keys: ["␣"],         label: "Toggle complete" },
        { keys: ["⌘", "↵"],    label: "Save task" },
        { keys: ["⌘", "D"],    label: "Set due date…" },
        { keys: ["⌘", "P"],    label: "Move to project…" },
        { keys: ["⌘", "⇧", "P"], label: "Set priority" },
        { keys: ["#"],         label: "Add tag (in editor)" },
        { keys: ["@"],         label: "Mention person (in editor)" },
        { keys: ["⌫"],         label: "Delete task" },
      ],
    },
  ];

  return (
    <div className="qa-backdrop" onClick={onClose}>
      <div className="shortcuts-panel" onClick={(e) => e.stopPropagation()}>
        <div className="qa-glass" />
        <header className="sc-header">
          <h2>Keyboard shortcuts</h2>
          <button className="iconbtn" onClick={onClose}><Icon name="x" size={13} /></button>
        </header>
        <div className="sc-cols">
          {sections.map(s => (
            <div key={s.title} className="sc-col">
              <div className="sc-title">{s.title}</div>
              {s.items.map((it, i) => (
                <div key={i} className="sc-row">
                  <span className="sc-label">{it.label}</span>
                  <span className="sc-keys">
                    {it.keys.map((k, j) => <Kbd key={j}>{k}</Kbd>)}
                  </span>
                </div>
              ))}
            </div>
          ))}
        </div>
        <footer className="sc-footer">
          Built for meetings — never lift your hands off the keyboard.
        </footer>
      </div>
    </div>
  );
};

window.Shortcuts = Shortcuts;