/** 与 index.html #df-splash-host 结构一致，共用 .df-splash 样式 */
export function AppSplash() {
  return (
    <div className="df-splash" role="status" aria-live="polite" aria-busy="true" aria-label="正在加载 Domainflare">
      <div className="df-splash-halo" aria-hidden />
      <div className="df-splash-inner">
        <div className="df-splash-logo-wrap">
          <div className="df-splash-rings" aria-hidden>
            <span className="df-splash-ring" />
            <span className="df-splash-ring" />
            <span className="df-splash-ring" />
          </div>
          <img className="df-splash-logo" src="/logo192.png" alt="" width={192} height={192} decoding="async" />
        </div>
        <h1 className="df-splash-title">Domainflare</h1>
        <p className="df-splash-sub">加载中</p>
        <div className="df-splash-dots" aria-hidden>
          <span className="df-splash-dot" />
          <span className="df-splash-dot" />
          <span className="df-splash-dot" />
        </div>
      </div>
    </div>
  );
}
