import './InitialLoadingOverlay.css';

const INITIAL_LOADING_LOGS = [
  'BOOT SEQUENCE :: app shell warmup',
  'CONFIG SYNC :: workspace profile applied',
  'SESSION LINK :: reconnecting realtime channel',
  'MODULE CHECK :: dashboard widgets online',
  'READY SIGNAL :: rendering main viewport',
];

export function InitialLoadingOverlay() {
  return (
    <div className="app-loading-overlay" aria-hidden="true">
      <div className="app-loading-panel">
        <span className="app-loading-panel__eyebrow">INITIALIZING</span>
        <strong className="app-loading-panel__title">AI CODE APP</strong>
        <div className="app-loading-panel__status">
          <span className="app-loading-panel__pulse" />
          live startup log
        </div>
        <div className="app-loading-log" role="presentation">
          {INITIAL_LOADING_LOGS.map((log, index) => (
            <div
              key={log}
              className="app-loading-log__line"
              style={{ animationDelay: `${index * 0.18}s` }}
            >
              <span className="app-loading-log__time">0{index}:00</span>
              <span className="app-loading-log__text">{log}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}
