// Splash Screen
const Splash = ({ onDone }) => {
  React.useEffect(() => {
    const t = setTimeout(onDone, 2400);
    return () => clearTimeout(t);
  }, []);
  return (
    <div className="screen wood-grain" style={{ width: "100%", height: "100%", position: "relative", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center" }}>
      <div className="vignette"/>
      <div className="noise"/>
      <div className="float" style={{ position: "relative" }}>
        <div className="glow-pulse" style={{ borderRadius: "50%", padding: 20 }}>
          <Icon.Yggdrasil size={140} color="#C9A84C"/>
        </div>
      </div>
      <div className="font-display" style={{ marginTop: 32, fontSize: 32, letterSpacing: "0.3em", color: "var(--gold)", fontWeight: 600 }}>
        RUNE
      </div>
      <div className="font-display" style={{ fontSize: 18, letterSpacing: "0.5em", color: "var(--ivory)", marginTop: 4 }}>
        ORACLE
      </div>
      <Ornament width={180} opacity={0.4}/>
      <div className="font-archaic" style={{ marginTop: 12, fontSize: 13, color: "var(--ash)", fontStyle: "italic" }}>
        ᚱ&nbsp;&nbsp;&nbsp;Hear the whispers of the ancestors&nbsp;&nbsp;&nbsp;ᚱ
      </div>
      <div style={{ position: "absolute", bottom: 60, fontSize: 10, color: "var(--ash-dim)", letterSpacing: "0.3em", textTransform: "uppercase" }}>
        ᚦ &nbsp; ᚹ &nbsp; ᛗ &nbsp; ᛟ
      </div>
    </div>
  );
};

window.Splash = Splash;