// ============================================
// MASTERSHOT — SHARED VISUAL COMPONENTS
// Logo, felt background, particles, ball SVGs
// ============================================

// === LOGO (brass crest with cue ball and crossed cues) ===
function MastershotLogo({ size = 80, compact = false }) {
    const s = size;
    return (
        <div style={{ display: "flex", alignItems: "center", gap: compact ? 8 : 14 }}>
            <svg width={s} height={s} viewBox="0 0 100 100">
                <defs>
                    <radialGradient id="lg-ball" cx="35%" cy="32%">
                        <stop offset="0%" stopColor="#fff"/>
                        <stop offset="40%" stopColor="#f4ecd3"/>
                        <stop offset="100%" stopColor="#a89368"/>
                    </radialGradient>
                    <linearGradient id="lg-gold" x1="0" y1="0" x2="1" y2="1">
                        <stop offset="0%" stopColor="#fce29a"/>
                        <stop offset="45%" stopColor="#e8b949"/>
                        <stop offset="100%" stopColor="#9c7a1a"/>
                    </linearGradient>
                    <linearGradient id="lg-cue" x1="0" y1="0" x2="1" y2="0">
                        <stop offset="0%" stopColor="#3a1d0f"/>
                        <stop offset="70%" stopColor="#7a421f"/>
                        <stop offset="85%" stopColor="#fce29a"/>
                        <stop offset="100%" stopColor="#a89368"/>
                    </linearGradient>
                </defs>
                {/* outer brass ring */}
                <circle cx="50" cy="50" r="46" fill="none" stroke="url(#lg-gold)" strokeWidth="2"/>
                <circle cx="50" cy="50" r="42" fill="none" stroke="url(#lg-gold)" strokeWidth="0.8" opacity="0.5"/>
                {/* crossed cues */}
                <g transform="rotate(-45 50 50)">
                    <rect x="15" y="49" width="70" height="2.2" rx="1" fill="url(#lg-cue)"/>
                </g>
                <g transform="rotate(45 50 50)">
                    <rect x="15" y="49" width="70" height="2.2" rx="1" fill="url(#lg-cue)"/>
                </g>
                {/* center ball */}
                <circle cx="50" cy="50" r="14" fill="url(#lg-ball)" stroke="#6b4731" strokeWidth="0.5"/>
                <circle cx="50" cy="50" r="7" fill="#0c0906"/>
                <text x="50" y="53.5" textAnchor="middle" fontSize="8" fontWeight="900" fill="url(#lg-gold)" fontFamily="Cinzel, serif">MS</text>
                {/* brass accent stars */}
                <circle cx="50" cy="8" r="1.6" fill="url(#lg-gold)"/>
                <circle cx="50" cy="92" r="1.6" fill="url(#lg-gold)"/>
                <circle cx="8" cy="50" r="1.6" fill="url(#lg-gold)"/>
                <circle cx="92" cy="50" r="1.6" fill="url(#lg-gold)"/>
            </svg>
            {!compact && (
                <div style={{ display: "flex", flexDirection: "column", lineHeight: 1 }}>
                    <span style={{
                        fontFamily: "var(--font-display)",
                        fontSize: size * 0.36,
                        fontWeight: 700,
                        letterSpacing: "0.14em",
                        color: "var(--gold-300)",
                        textShadow: "0 2px 0 rgba(0,0,0,.6), 0 0 20px rgba(232,185,73,.3)"
                    }}>MASTERSHOT</span>
                    <span style={{
                        fontFamily: "var(--font-display)",
                        fontSize: size * 0.18,
                        fontWeight: 500,
                        letterSpacing: "0.4em",
                        color: "var(--gold-500)",
                        marginTop: 4,
                        paddingLeft: 2,
                    }}>— PREMIUM EDITION —</span>
                </div>
            )}
        </div>
    );
}

// === POOL BALL (decorative) ===
function PoolBall({ number = 8, size = 40, striped = false }) {
    const colors = {
        1: "#e8b949", 2: "#2a5dba", 3: "#c2453a", 4: "#5a3e8a",
        5: "#e08a2e", 6: "#2d7a56", 7: "#7d2a2a", 8: "#0a0a0a",
        9: "#e8b949", 10: "#2a5dba", 11: "#c2453a", 12: "#5a3e8a",
        13: "#e08a2e", 14: "#2d7a56", 15: "#7d2a2a",
        0: "#fdfaf0" // cue ball
    };
    const isStripe = number >= 9 && number <= 15;
    const color = colors[number] || "#0a0a0a";
    const id = `ball-${number}-${size}`;
    return (
        <svg width={size} height={size} viewBox="0 0 40 40" style={{ filter: "drop-shadow(0 4px 8px rgba(0,0,0,.5))" }}>
            <defs>
                <radialGradient id={`${id}-body`} cx="32%" cy="28%">
                    <stop offset="0%" stopColor="#fff" stopOpacity="0.9"/>
                    <stop offset="15%" stopColor="#fff" stopOpacity="0.3"/>
                    <stop offset="60%" stopColor={color} stopOpacity="1"/>
                    <stop offset="100%" stopColor="#000" stopOpacity="0.4"/>
                </radialGradient>
                <radialGradient id={`${id}-white`} cx="32%" cy="28%">
                    <stop offset="0%" stopColor="#fff"/>
                    <stop offset="60%" stopColor="#f4ecd3"/>
                    <stop offset="100%" stopColor="#a89368"/>
                </radialGradient>
            </defs>
            {isStripe ? (
                <>
                    <circle cx="20" cy="20" r="19" fill={`url(#${id}-white)`}/>
                    <path d="M 2 12 A 19 19 0 0 0 2 28 L 38 28 A 19 19 0 0 0 38 12 Z" fill={color} opacity="0.95"/>
                </>
            ) : (
                <circle cx="20" cy="20" r="19" fill={`url(#${id}-body)`}/>
            )}
            {/* number circle */}
            <circle cx="20" cy="20" r="7.5" fill="#fff"/>
            <text x="20" y="23" textAnchor="middle" fontSize="9" fontWeight="900" fill="#0a0a0a" fontFamily="Cinzel, serif">{number === 0 ? "" : number}</text>
            {/* hilight */}
            <ellipse cx="13" cy="11" rx="5" ry="3" fill="#fff" opacity="0.6"/>
        </svg>
    );
}

// === AMBIENT FELT BACKGROUND (used everywhere) ===
function AmbientBackdrop({ intensity = "normal" }) {
    const strong = intensity === "strong";
    return (
        <div style={{
            position: "absolute", inset: 0, overflow: "hidden", zIndex: 0, pointerEvents: "none",
        }}>
            {/* felt gradient */}
            <div style={{
                position: "absolute", inset: 0,
                background: "radial-gradient(ellipse at 50% 45%, #184732 0%, #0f2a1d 45%, #050302 100%)",
            }}/>
            {/* felt weave texture via repeating grad */}
            <div style={{
                position: "absolute", inset: 0,
                backgroundImage: `
                    repeating-linear-gradient(45deg, rgba(255,255,255,0.015) 0 1px, transparent 1px 3px),
                    repeating-linear-gradient(-45deg, rgba(0,0,0,0.04) 0 1px, transparent 1px 3px)
                `,
                mixBlendMode: "overlay",
            }}/>
            {/* gold spotlight */}
            <div style={{
                position: "absolute",
                top: "-20%", left: "10%", width: "60%", height: "80%",
                background: "radial-gradient(ellipse, rgba(232,185,73,0.12) 0%, transparent 60%)",
                filter: "blur(40px)",
            }}/>
            <div style={{
                position: "absolute",
                bottom: "-10%", right: "-5%", width: "50%", height: "70%",
                background: "radial-gradient(ellipse, rgba(45,122,86,0.15) 0%, transparent 60%)",
                filter: "blur(50px)",
            }}/>
            {strong && (
                <div style={{
                    position: "absolute", inset: 0,
                    background: "radial-gradient(ellipse at 50% 50%, transparent 30%, rgba(0,0,0,0.7) 100%)",
                }}/>
            )}
            {/* noise */}
            <div style={{
                position: "absolute", inset: 0, opacity: 0.4,
                backgroundImage: "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='0.4'/></svg>\")",
                mixBlendMode: "overlay",
            }}/>
        </div>
    );
}

// === FLOATING PARTICLES (dust motes) ===
function Particles({ count = 20 }) {
    const particles = React.useMemo(() => {
        return Array.from({ length: count }).map((_, i) => ({
            id: i,
            x: Math.random() * 100,
            y: Math.random() * 100,
            size: 1 + Math.random() * 2,
            duration: 15 + Math.random() * 25,
            delay: -Math.random() * 20,
            drift: (Math.random() - 0.5) * 200,
        }));
    }, [count]);

    return (
        <div className="particles">
            {particles.map(p => (
                <div key={p.id}
                    className="particle"
                    style={{
                        left: p.x + "%",
                        top: p.y + "%",
                        width: p.size,
                        height: p.size,
                        animation: `particle-drift-${p.id} ${p.duration}s linear ${p.delay}s infinite`,
                    }}
                />
            ))}
            <style>{particles.map(p => `
                @keyframes particle-drift-${p.id} {
                    0% { transform: translate(0, 0); opacity: 0; }
                    20% { opacity: ${0.3 + Math.random() * 0.5}; }
                    80% { opacity: ${0.3 + Math.random() * 0.5}; }
                    100% { transform: translate(${p.drift}px, -300px); opacity: 0; }
                }
            `).join("\n")}</style>
        </div>
    );
}

// === FLAME ICON (for streaks) ===
function FlameSvg({ size = 14, intense = false }) {
    return (
        <svg width={size} height={size} viewBox="0 0 24 24">
            <defs>
                <radialGradient id={`flame-${intense}-${size}`} cx="50%" cy="70%">
                    <stop offset="0%" stopColor="#fff6a8"/>
                    <stop offset="30%" stopColor="#ffd166"/>
                    <stop offset="65%" stopColor="#ff7a2d"/>
                    <stop offset="100%" stopColor="#c2453a"/>
                </radialGradient>
            </defs>
            <path d="M12 2s1.5 3 3.5 5 4.5 4 4.5 8.5a8 8 0 01-16 0c0-3.5 2-5.5 2-8.5 0 0 3 2 3.5 5 0 0 2-2 2.5-10z"
                fill={`url(#flame-${intense}-${size})`}/>
            <path d="M12 10s1 1 1.5 3-0.5 3.5-1.5 3.5-2.5-1-2.5-3 2.5-3.5 2.5-3.5z" fill="#fff6a8" opacity="0.9"/>
        </svg>
    );
}

// === STREAK BADGE (fire if >= 3) ===
function StreakBadge({ count }) {
    const intense = count >= 5;
    const cold = count === 0;
    const cls = cold ? "streak-badge cold" : (intense ? "streak-badge hot" : "streak-badge");
    if (cold) {
        return <span className={cls}><span style={{ opacity: 0.6 }}>—</span></span>;
    }
    return (
        <span className={cls}>
            <FlameSvg size={13} intense={intense}/>
            <span>W{count}</span>
        </span>
    );
}

// === CURRENCY DISPLAY ===
function Currency({ type, amount, size = "md" }) {
    const isCoin = type === "coin";
    const cls = isCoin ? "currency currency-coin" : "currency currency-chip";
    return (
        <div className={cls} style={size === "sm" ? { padding: "4px 10px 4px 6px", fontSize: 12 } : {}}>
            <span className={`currency-icon ${type}`} style={size === "sm" ? { width: 18, height: 18, fontSize: 9 } : {}}>
                {isCoin ? "$" : "◆"}
            </span>
            <span>{amount.toLocaleString("pt-BR")}</span>
        </div>
    );
}

// === AVATAR ===
function Avatar({ initials, size = "md", level, color }) {
    const bg = color || "linear-gradient(135deg, #4a3d2e, #2a1810)";
    return (
        <div className={`avatar avatar-${size}`} style={{ background: bg }}>
            <span>{initials}</span>
            {level !== undefined && <span className="level-badge">{level}</span>}
        </div>
    );
}

// === COUNTRY FLAG (small emoji-style circle) ===
function CountryFlag({ code, size = 18 }) {
    const palette = {
        BR: ["#009c3b", "#ffdf00"], US: ["#b22234", "#3c3b6e"], GB: ["#012169", "#c8102e"],
        DE: ["#000", "#dd0000"], JP: ["#bc002d", "#fff"], KR: ["#cd2e3a", "#0047a0"],
        FR: ["#002395", "#ed2939"], IT: ["#009246", "#ce2b37"], AR: ["#74acdf", "#fcbf49"],
    };
    const [c1, c2] = palette[code] || ["#4a3d2e", "#9a866b"];
    return (
        <div style={{
            width: size, height: size, borderRadius: "50%",
            background: `linear-gradient(135deg, ${c1} 50%, ${c2} 50%)`,
            border: "1px solid rgba(0,0,0,0.4)",
            boxShadow: "0 1px 2px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.2)",
            display: "inline-flex", alignItems: "center", justifyContent: "center",
            fontSize: size * 0.5, fontWeight: 900, color: "rgba(255,255,255,0.9)",
            flexShrink: 0,
        }}>
            <span style={{ fontSize: size * 0.4, letterSpacing: "-0.05em" }}>{code}</span>
        </div>
    );
}

// Export all
Object.assign(window, {
    MastershotLogo, PoolBall, AmbientBackdrop, Particles, FlameSvg, StreakBadge, Currency, Avatar, CountryFlag
});