function Splash() {
  const { t, lang, toggle } = useT();
  const mobile = useMobile();

  return (
    <section id="splash" data-bg="splash" style={{
      position: "relative",
      minHeight: "100vh",
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      overflow: "hidden"
    }}>

      {/* Logo — absolutely positioned, independent of text */}
      <div style={{
        position: "absolute",
        top: mobile ? "calc(50% - 136px)" : "calc(50% - 248px)",
        left: "50%",
        transform: "translateX(-50%)",
        width: "clamp(240px, 24.7vw, 475px)",
        zIndex: 1,
        animation: "tb-mark-in 1.2s var(--tb-ease) both"
      }}>
        <div style={{
          position: "absolute", inset: -40, borderRadius: "50%",
          background: "radial-gradient(circle, rgba(45,212,191,0.18) 0%, rgba(59,130,246,0.10) 40%, transparent 70%)",
          filter: "blur(10px)",
          animation: "tb-halo 4s ease-in-out infinite"
        }} />
        <img
          src="assets/timeback-mark-color.png"
          alt="TimeBack AI"
          style={{ position: "relative", width: "100%", height: "auto", display: "block" }}
        />
      </div>

      {/* Text block — flex-centered independently */}
      <div style={{
        position: "relative",
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        textAlign: "center",
        marginTop: "80px",
        zIndex: 1,
        animation: "tb-fade-up 1s var(--tb-ease) 0.4s both"
      }}>
        <div style={{
          fontSize: "clamp(42px, 5vw, 96px)",
          fontWeight: 700,
          letterSpacing: "-0.03em",
          lineHeight: 1,
          color: "#fff",
          marginBottom: "clamp(12px, 1.2vw, 20px)"
        }}>
          TimeBack <span style={{ color: "#60A5FA" }}>AI</span>
        </div>

        <div style={{
          fontSize: "clamp(18px, 1.875vw, 36px)",
          fontWeight: 400,
          color: "#F59E0B",
          letterSpacing: "-0.01em",
          marginBottom: "clamp(6px, 0.5vw, 10px)"
        }}>
          {t("splash.tagline")}
        </div>

        <div style={{
          fontSize: "clamp(14px, 1.35vw, 26px)",
          fontWeight: 400,
          fontStyle: "italic",
          color: "#94A3B8"
        }}>
          {t("splash.sub")}
        </div>
      </div>

      {/* Language toggle */}
      <button onClick={toggle} aria-label="Switch language" style={{
        position: "absolute", top: 24, right: 32,
        display: "inline-flex", alignItems: "center", gap: 0,
        font: "600 12px/1 'JetBrains Mono'", letterSpacing: "0.06em",
        background: "rgba(15,19,32,0.6)",
        border: "1px solid rgba(148,163,184,0.18)",
        borderRadius: 999, padding: 0, cursor: "pointer",
        overflow: "hidden", zIndex: 10
      }}>
        {["en", "es"].map((l) => (
          <span key={l} style={{
            padding: "8px 14px",
            color: lang === l ? "#fff" : "#64748B",
            background: lang === l ? "rgba(59,130,246,0.25)" : "transparent",
            transition: "background 200ms, color 200ms"
          }}>{l.toUpperCase()}</span>
        ))}
      </button>

      {/* Scroll cue */}
      <a href="#top" style={{
        position: "absolute", bottom: 36, left: "50%",
        transform: "translateX(-50%)",
        display: "flex", flexDirection: "column", alignItems: "center", gap: 10,
        textDecoration: "none", color: "#64748B",
        font: "500 11px/1 'Inter'", letterSpacing: "0.18em", textTransform: "uppercase",
        zIndex: 1
      }}>
        <span>{t("splash.scrollCue")}</span>
        <span style={{
          width: 1, height: 36,
          background: "linear-gradient(180deg, transparent 0%, #2DD4BF 50%, transparent 100%)",
          backgroundSize: "100% 200%",
          animation: "tb-scroll-line 2s ease-in-out infinite"
        }} />
      </a>

      <style>{`
        @keyframes tb-mark-in {
          0%   { opacity: 0; transform: translateX(-50%) scale(0.92); }
          100% { opacity: 1; transform: translateX(-50%) scale(1); }
        }
        @keyframes tb-fade-up {
          0%   { opacity: 0; transform: translateY(14px); }
          100% { opacity: 1; transform: translateY(0); }
        }
        @keyframes tb-halo {
          0%, 100% { opacity: 0.6; transform: scale(1); }
          50%      { opacity: 1.0; transform: scale(1.07); }
        }
        @keyframes tb-scroll-line {
          0%, 100% { background-position: 0% 0%; }
          50%      { background-position: 0% 100%; }
        }
      `}</style>
    </section>
  );
}

window.Splash = Splash;