// ============================================
// TITLE SCREEN — cinematic entry
// ============================================

function TitleScreen({ navigate }) {
    // Pressionar Start: vai pro menu se já autenticado, senão pra login.
    const onStart = () => {
        if (!navigate) return;
        const authed = window.MastershotAuth && window.MastershotAuth.isAuthenticated();
        navigate(authed ? "menu" : "login");
    };
    const [tick, setTick] = React.useState(0);
    React.useEffect(() => {
        const id = setInterval(() => setTick(t => t + 1), 100);
        return () => clearInterval(id);
    }, []);

    return (
        <div className="screen active" style={{ opacity: 1 }}>
            <AmbientBackdrop intensity="strong"/>
            <Particles count={40}/>

            {/* large ambient pool balls drifting */}
            <div style={{ position: "absolute", inset: 0, zIndex: 1, pointerEvents: "none" }}>
                <div style={{ position: "absolute", top: "12%", left: "8%", animation: "float-ball 8s ease-in-out infinite" }}>
                    <div style={{ opacity: 0.35, filter: "blur(1px)" }}><PoolBall number={8} size={70}/></div>
                </div>
                <div style={{ position: "absolute", top: "22%", right: "10%", animation: "float-ball 10s ease-in-out 1s infinite" }}>
                    <div style={{ opacity: 0.3, filter: "blur(0.5px)" }}><PoolBall number={9} size={52}/></div>
                </div>
                <div style={{ position: "absolute", bottom: "18%", left: "15%", animation: "float-ball 12s ease-in-out 2s infinite" }}>
                    <div style={{ opacity: 0.25 }}><PoolBall number={3} size={44}/></div>
                </div>
                <div style={{ position: "absolute", bottom: "25%", right: "18%", animation: "float-ball 9s ease-in-out 0.5s infinite" }}>
                    <div style={{ opacity: 0.3 }}><PoolBall number={15} size={58}/></div>
                </div>
                <div style={{ position: "absolute", top: "55%", left: "5%", animation: "float-ball 11s ease-in-out 3s infinite" }}>
                    <div style={{ opacity: 0.2 }}><PoolBall number={2} size={40}/></div>
                </div>
            </div>

            {/* center content */}
            <div style={{
                position: "relative", zIndex: 10,
                width: "100%", height: "100%",
                display: "flex", flexDirection: "column",
                alignItems: "center", justifyContent: "center",
                textAlign: "center",
                padding: 40,
            }}>
                {/* big logo */}
                <div style={{ animation: "title-entry 1.4s cubic-bezier(.22,1,.36,1) both" }}>
                    <MastershotLogo size={180}/>
                </div>

                {/* tagline */}
                <div style={{
                    marginTop: 48,
                    fontFamily: "var(--font-display)",
                    fontSize: 16,
                    letterSpacing: "0.5em",
                    color: "var(--gold-500)",
                    textTransform: "uppercase",
                    animation: "title-fade 1.4s ease-out 0.6s both",
                    paddingLeft: "0.5em",
                }}>
                    O Clássico. Reinventado.
                </div>

                {/* decorative rule */}
                <div style={{
                    marginTop: 32, width: 280,
                    display: "flex", alignItems: "center", gap: 12,
                    animation: "title-fade 1.4s ease-out 0.9s both",
                }}>
                    <div style={{ flex: 1, height: 1, background: "linear-gradient(90deg, transparent, var(--gold-700))" }}/>
                    <svg width="14" height="14" viewBox="0 0 14 14"><circle cx="7" cy="7" r="3" fill="var(--gold-500)"/></svg>
                    <div style={{ flex: 1, height: 1, background: "linear-gradient(-90deg, transparent, var(--gold-700))" }}/>
                </div>

                {/* press start */}
                <div style={{
                    marginTop: 64,
                    animation: "title-fade 1.4s ease-out 1.4s both",
                }}>
                    <button className="btn-cta" onClick={onStart} style={{ animation: "pulse-gold 2s ease-in-out 2s infinite" }}>
                        {window.Icon && <span dangerouslySetInnerHTML={{ __html: window.Icon.play(18) }}/>}
                        <span>Pressionar Start</span>
                    </button>
                </div>

                {/* version + build */}
                <div style={{
                    position: "absolute", bottom: 32, left: 0, right: 0,
                    display: "flex", justifyContent: "space-between",
                    padding: "0 40px",
                    fontSize: 11, color: "var(--ink-400)",
                    letterSpacing: "0.15em",
                    textTransform: "uppercase",
                    animation: "title-fade 1.4s ease-out 1.8s both",
                }}>
                    <span>v1.0.4 · Build 2026.04</span>
                    <span style={{ display: "flex", gap: 16 }}>
                        <span style={{ color: "var(--win)" }}>● {(28451 + (tick % 10)).toLocaleString()} ONLINE</span>
                        <span>© Mastershot Studios</span>
                    </span>
                </div>
            </div>

            <style>{`
                @keyframes title-entry {
                    0% { transform: translateY(30px) scale(0.9); opacity: 0; filter: blur(10px); }
                    100% { transform: translateY(0) scale(1); opacity: 1; filter: blur(0); }
                }
                @keyframes title-fade {
                    0% { opacity: 0; transform: translateY(12px); }
                    100% { opacity: 1; transform: translateY(0); }
                }
                @keyframes float-ball {
                    0%, 100% { transform: translate(0, 0) rotate(0); }
                    33% { transform: translate(15px, -20px) rotate(120deg); }
                    66% { transform: translate(-10px, 10px) rotate(240deg); }
                }
            `}</style>
        </div>
    );
}

window.TitleScreen = TitleScreen;