// Home Screen
const Home = ({ onNav, dailyRune }) => {
  return (
    <div className="screen wood-grain" style={{ width: "100%", height: "100%", position: "relative", display: "flex", flexDirection: "column" }}>
      <div className="noise"/>
      <div className="vignette"/>

      <StatusBar/>

      <div style={{ flex: 1, overflowY: "auto", paddingBottom: 110, position: "relative" }}>
        <div style={{ position: "absolute", left: 20, top: 12, opacity: 0.4, pointerEvents: "none" }}>
          <div className="flicker"><Icon.Flame size={50}/></div>
        </div>
        <div style={{ position: "absolute", right: 20, top: 12, opacity: 0.4, pointerEvents: "none" }}>
          <div className="flicker" style={{ animationDelay: "1.2s" }}><Icon.Flame size={50}/></div>
        </div>

        <div style={{ padding: "8px 24px 0", textAlign: "center" }}>
          <div className="font-archaic" style={{ fontSize: 11, color: "var(--ash)", letterSpacing: "0.25em", textTransform: "uppercase" }}>Heill ok saell</div>
          <div className="font-body" style={{ fontSize: 14, color: "var(--ivory)", fontStyle: "italic", marginTop: 2 }}>Welcome back, traveler</div>
        </div>

        <div style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", padding: "16px 0 14px", position: "relative" }}>
          <div className="float">
            <div className="glow-pulse" style={{ borderRadius: "50%" }}>
              <Icon.Yggdrasil size={120} color="#C9A84C"/>
            </div>
          </div>
          <div className="font-display" style={{ fontSize: 20, letterSpacing: "0.35em", color: "var(--gold)", marginTop: 10, fontWeight: 600 }}>
            RUNE&nbsp;ORACLE
          </div>
          <div className="font-archaic" style={{ fontSize: 11, color: "var(--ash)", fontStyle: "italic", marginTop: 4 }}>
            Echoes from the nine realms of Yggdrasil
          </div>
          <Ornament width={180} opacity={0.4}/>
        </div>

        {dailyRune && (
          <div style={{ padding: "0 20px 16px" }}>
            <div className="font-display" style={{ fontSize: 9, letterSpacing: "0.25em", color: "var(--gold)", textTransform: "uppercase", textAlign: "center", marginBottom: 10 }}>
              ᛟ &nbsp; Rune of the Day &nbsp; ᛟ
            </div>
            <div onClick={() => onNav("rune-detail", dailyRune)} style={{ padding: "16px", background: "linear-gradient(135deg, rgba(201,168,76,0.1), rgba(61,43,31,0.4))", border: "1px solid rgba(201,168,76,0.25)", display: "flex", alignItems: "center", gap: 14, cursor: "pointer", position: "relative" }}>
              <div className="float">
                <RuneTile rune={dailyRune} skin="stone" size={56} glow/>
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ display: "flex", alignItems: "baseline", gap: 8 }}>
                  <div className="font-display" style={{ fontSize: 17, color: "var(--ivory)", letterSpacing: "0.08em" }}>{dailyRune.name}</div>
                  <div style={{ fontSize: 11, color: "var(--ash)", fontStyle: "italic" }}>{dailyRune.phonetic}</div>
                </div>
                <div style={{ marginTop: 6, fontSize: 13, color: "var(--ivory)", lineHeight: 1.4, opacity: 0.85, fontStyle: "italic" }}>
                  {(dailyRune.upright || "").split(".")[0]}.
                </div>
                <div style={{ marginTop: 8, display: "flex", gap: 6 }}>
                  {dailyRune.keywords.slice(0, 2).map(k => (
                    <span key={k} style={{ fontSize: 9, padding: "2px 8px", background: "rgba(201,168,76,0.1)", border: "1px solid rgba(201,168,76,0.25)", color: "var(--gold)", letterSpacing: "0.08em", textTransform: "uppercase" }}>{k}</span>
                  ))}
                </div>
              </div>
              <Icon.Sparkle color="var(--gold)" size={14}/>
            </div>
          </div>
        )}

        <div style={{ padding: "0 20px 16px" }}>
          <div onClick={() => onNav("game")} className="ornate-card fade-in" style={{ padding: 18, display: "flex", alignItems: "center", gap: 14, cursor: "pointer", background: "linear-gradient(135deg, rgba(201,168,76,0.06), rgba(61,43,31,0.3))" }}>
            <div style={{ width: 50, height: 50, display: "flex", alignItems: "center", justifyContent: "center", borderRadius: "50%", background: "rgba(201,168,76,0.1)", border: "1px solid rgba(201,168,76,0.25)" }}>
              <Icon.Trophy color="var(--gold)" size={22}/>
            </div>
            <div style={{ flex: 1 }}>
              <div className="font-display" style={{ fontSize: 13, letterSpacing: "0.15em", color: "var(--gold)", textTransform: "uppercase" }}>Guess the Rune</div>
              <div style={{ fontSize: 12, color: "var(--ivory)", marginTop: 2, opacity: 0.7 }}>Mini game - test your knowledge</div>
            </div>
            <Icon.Back size={18} color="var(--gold)" style={{ transform: "rotate(180deg)" }}/>
          </div>
        </div>

        <div style={{ padding: "8px 20px 24px", display: "flex", flexDirection: "column", gap: 10 }}>
          <button className="btn-primary" onClick={() => onNav("reading-mode")}>
            ᚱ &nbsp;&nbsp; Begin Ritual
          </button>
        </div>

        <div style={{ textAlign: "center", padding: "0 0 16px", color: "var(--ash-dim)", fontSize: 10, fontStyle: "italic", letterSpacing: "0.2em" }}>
          ᚦ &nbsp; ᚹ &nbsp; ᛗ &nbsp; ᛟ
        </div>
      </div>

      <BottomNav active="home" onNav={onNav}/>
    </div>
  );
};

window.Home = Home;