import { getFaceLevel } from '../domain/index/index-level';

const INITIAL_INDEX = 0;

export const App = () => {
  const faceLevel = getFaceLevel(INITIAL_INDEX);

  return (
    <main className="app-shell">
      <header className="app-header">
        <div className="brand-lockup">
          <span className="brand-mark" aria-hidden="true">
            MI
          </span>
          <div>
            <p className="eyebrow">Индикатор встречи</p>
            <h1>Max Index</h1>
          </div>
        </div>
        <p className="privacy-note">
          <span aria-hidden="true" /> Локально, без записи
        </p>
      </header>

      <section className="meeting-stage" aria-labelledby="index-heading">
        <div className="character-zone">
          <p className="status-pill">
            <span aria-hidden="true" /> Пауза
          </p>

          <div
            className="face-frame"
            data-face-level={faceLevel}
            role="img"
            aria-label="Спокойное лицо персонажа"
          >
            <div className="face-ear face-ear-left" />
            <div className="face-ear face-ear-right" />
            <div className="face-character">
              <div className="face-brow face-brow-left" />
              <div className="face-brow face-brow-right" />
              <div className="face-eye face-eye-left" />
              <div className="face-eye face-eye-right" />
              <div className="face-mouth" />
            </div>
          </div>

          <div className="capture-state">
            <strong>Микрофон не подключён</strong>
            <span>Прослушивание выключено</span>
          </div>
        </div>

        <div className="index-zone">
          <p className="eyebrow" id="index-heading">
            Индекс встречи
          </p>
          <p className="index-value" aria-label="Индекс: 0 из 100">
            <strong>{INITIAL_INDEX}</strong>
            <span>/100</span>
          </p>
          <progress value={INITIAL_INDEX} max="100">
            {INITIAL_INDEX}%
          </progress>

          <p className="foundation-copy">
            Каркас готов. Следующий этап подключит локальное распознавание
            речи.
          </p>

          <div className="controls" aria-label="Управление прослушиванием">
            <button type="button" className="primary-action" disabled>
              Начать
            </button>
            <button type="button" className="secondary-action" disabled>
              Сбросить
            </button>
          </div>
          <p className="control-hint">
            Управление станет доступно после подключения первого сквозного
            среза.
          </p>
        </div>
      </section>

      <footer className="last-trigger">
        <div>
          <span>Последнее срабатывание</span>
          <strong>Пока ничего</strong>
        </div>
        <p>История хранится только в текущей сессии.</p>
      </footer>
    </main>
  );
};