// Final homepage wrapper — renders one of three home "view modes" with a
// floating mode switcher overlay. The switcher is interactive (clickable).

function ModeSwitcher({ mode, setMode, darkContext = false }) {
  const fgInactive = darkContext ? "rgba(244,239,230,0.78)" : "var(--sumi)";
  const fgLabel    = darkContext ? "rgba(244,239,230,0.55)" : "rgba(27,27,27,0.55)";
  const bg         = darkContext ? "rgba(17,17,17,0.86)"   : "rgba(244,239,230,0.94)";
  const border     = darkContext ? "rgba(244,239,230,0.2)" : "rgba(27,27,27,0.18)";

  return (
    <div style={{
      position: "absolute", top: 18, right: 18, zIndex: 100,
      background: bg, border: `1px solid ${border}`,
      backdropFilter: "blur(10px)", WebkitBackdropFilter: "blur(10px)",
      padding: 4, display: "flex", alignItems: "center",
      boxShadow: "0 6px 20px rgba(0,0,0,0.15)",
    }}>
      <span className="mono" style={{
        fontSize: 8.5, letterSpacing: "0.22em",
        color: fgLabel, padding: "0 12px",
      }}>VIEW · 表示</span>
      {[
        { k: "emakimono", jp: "絵巻物", en: "Scroll"   },
        { k: "ma",        jp: "間",     en: "Minimal"  },
        { k: "classic",   jp: "古典",   en: "Classic"  },
      ].map(opt => {
        const active = mode === opt.k;
        const activeFg = darkContext ? "var(--sumi)"  : "var(--washi)";
        const activeBg = darkContext ? "var(--washi)" : "var(--sumi)";
        return (
          <button key={opt.k} onClick={() => setMode(opt.k)} style={{
            background: active ? activeBg : "transparent",
            color: active ? activeFg : fgInactive,
            border: "none", padding: "9px 14px",
            cursor: "pointer", transition: "all .15s ease",
            display: "flex", flexDirection: "column",
            alignItems: "center", gap: 2, lineHeight: 1,
            fontFamily: "var(--sans)",
          }}>
            <span className="serif" style={{ fontSize: 14 }}>{opt.jp}</span>
            <span className="mono" style={{ fontSize: 8, letterSpacing: "0.15em", opacity: active ? 0.9 : 0.6 }}>{opt.en.toUpperCase()}</span>
          </button>
        );
      })}
    </div>
  );
}

function FinalHome({ defaultMode = "emakimono" }) {
  const [mode, setMode] = React.useState(defaultMode);
  const darkContext = mode === "emakimono" || mode === "ma";

  return (
    <div style={{ position: "relative", width: "100%", height: "100%", overflow: "hidden" }}>
      {mode === "emakimono" && <AltEmakimono />}
      {mode === "ma"        && <AltMa        />}
      {mode === "classic"   && <DesktopHome  />}
      <ModeSwitcher mode={mode} setMode={setMode} darkContext={darkContext} />
    </div>
  );
}

window.FinalHome     = FinalHome;
window.ModeSwitcher  = ModeSwitcher;