// FOOTPASS Messenger v2 · iOS-style keyboard, localized (FR = AZERTY, EN = QWERTY)
function FPKeyboard({ dark, lang = 'fr' }) {
  const fr = lang === 'fr';
  const row1 = fr ? ['A','Z','E','R','T','Y','U','I','O','P'] : ['Q','W','E','R','T','Y','U','I','O','P'];
  const row2 = fr ? ['Q','S','D','F','G','H','J','K','L','M'] : ['A','S','D','F','G','H','J','K','L'];
  const row3 = fr ? ['W','X','C','V','B','N'] : ['Z','X','C','V','B','N','M'];
  const suggestions = fr ? ['Je', "J'ai", "D'accord"] : ['I', 'The', "I'm"];
  return (
    <div className={`kb ${dark ? 'dark' : ''}`}>
      <div className="kb-suggest">
        <span>{suggestions[0]}</span>
        <span className="kb-sep"></span>
        <span>{suggestions[1]}</span>
        <span className="kb-sep"></span>
        <span>{suggestions[2]}</span>
      </div>
      <div className="kb-rows">
        <div className="kb-row kb-row-1">
          {row1.map(k => <div key={k} className="kb-key">{k}</div>)}
        </div>
        <div className="kb-row kb-row-2" style={fr ? { padding: 0 } : undefined}>
          {row2.map(k => <div key={k} className="kb-key">{k}</div>)}
        </div>
        <div className="kb-row kb-row-3">
          <div className="kb-key kb-shift kb-shift-active" aria-label="Maj">
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 1.5L1.5 7h3v5.5h5V7h3L7 1.5z" fill="#0F0F0F" stroke="#0F0F0F" strokeWidth="1" strokeLinejoin="round"></path></svg>
          </div>
          {row3.map(k => <div key={k} className="kb-key">{k}</div>)}
          <div className="kb-key kb-delete" aria-label="Effacer">
            <svg width="20" height="14" viewBox="0 0 20 14" fill="none"><path d="M6.5 1.5H17.5a1.5 1.5 0 011.5 1.5v8a1.5 1.5 0 01-1.5 1.5H6.5L1 7l5.5-5.5z" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round" fill="none"></path><path d="M10 5l5 4M15 5l-5 4" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"></path></svg>
          </div>
        </div>
        <div className="kb-row kb-bottom">
          <div className="kb-key kb-mod kb-wide">123</div>
          <div className="kb-key kb-mod kb-emoji" aria-label="Emoji">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
              <circle cx="10" cy="10" r="8" stroke="currentColor" strokeWidth="1.3"></circle>
              <circle cx="7" cy="8.5" r="0.9" fill="currentColor"></circle>
              <circle cx="13" cy="8.5" r="0.9" fill="currentColor"></circle>
              <path d="M6.5 12.5C7.5 13.7 8.7 14.3 10 14.3C11.3 14.3 12.5 13.7 13.5 12.5" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round"></path>
            </svg>
          </div>
          <div className="kb-key kb-space"><span className="kb-space-word">{fr ? 'espace' : 'space'}</span></div>
          <div className="kb-key kb-mod kb-return">{fr ? 'retour' : 'return'}</div>
        </div>
      </div>
      <div className="kb-chrome">
        <button className="kb-chrome-btn" aria-label="Langue">
          <svg width="22" height="22" viewBox="0 0 22 22" fill="none"><circle cx="11" cy="11" r="9" stroke="currentColor" strokeWidth="1.4"></circle><path d="M2 11h18M11 2c2.8 3.5 2.8 14 0 18M11 2C8.2 5.5 8.2 16 11 20" stroke="currentColor" strokeWidth="1.4"></path></svg>
        </button>
        <button className="kb-chrome-btn" aria-label="Dictée">
          <svg width="18" height="22" viewBox="0 0 18 22" fill="none"><rect x="6" y="2" width="6" height="11" rx="3" stroke="currentColor" strokeWidth="1.4"></rect><path d="M2 10C2 13.9 5.1 17 9 17C12.9 17 16 13.9 16 10M9 17V21M5 21H13" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"></path></svg>
        </button>
      </div>
    </div>
  );
}
Object.assign(window, { FPKeyboard });