<script setup lang="ts">

</script>

<!-- RadarBackground.vue -->
<template>
    <div class="radar-bg">
        <svg class="radar-svg" viewBox="0 0 800 420"
             preserveAspectRatio="xMidYMid slice"
             xmlns="http://www.w3.org/2000/svg">
            <defs>
                <radialGradient id="bgGlow" cx="50%" cy="50%" r="50%">
                    <stop offset="0%"   stop-color="#38bdf8" stop-opacity="0.04"/>
                    <stop offset="100%" stop-color="#0a0f1c" stop-opacity="0"/>
                </radialGradient>
                <clipPath id="radarClip">
                    <circle cx="400" cy="210" r="208"/>
                </clipPath>
            </defs>

            <!-- Ambient glow -->
            <ellipse cx="400" cy="210" rx="320" ry="220" fill="url(#bgGlow)"/>

            <!-- Rings -->
            <circle class="ring" cx="400" cy="210" r="52"/>
            <circle class="ring" cx="400" cy="210" r="104"/>
            <circle class="ring" cx="400" cy="210" r="156"/>
            <circle class="ring" cx="400" cy="210" r="208"/>
            <circle cx="400" cy="210" r="208" fill="none"
                    stroke="rgba(56,189,248,0.25)" stroke-width="1"/>

            <!-- Crosshairs -->
            <line class="crosshair" x1="192" y1="210" x2="608" y2="210"/>
            <line class="crosshair" x1="400" y1="2"   x2="400" y2="418"/>
            <line class="crosshair" x1="253" y1="63"  x2="547" y2="357" transform="rotate(45,400,210)"/>
            <line class="crosshair" x1="253" y1="63"  x2="547" y2="357" transform="rotate(-45,400,210)"/>

            <!-- Sweep trail + line -->
            <g clip-path="url(#radarClip)">
                <g class="trail">
                    <path d="M400,210 L400,2 A208,208 0 0,1 547,63 Z" fill="rgba(56,189,248,0.08)"/>
                    <path d="M400,210 L400,2 A208,208 0 0,1 493,42 Z" fill="rgba(56,189,248,0.10)"/>
                    <path d="M400,210 L400,2 A208,208 0 0,1 435,4  Z" fill="rgba(56,189,248,0.13)"/>
                </g>
                <g class="sweep">
                    <line x1="400" y1="210" x2="400" y2="3"
                          stroke="#38bdf8" stroke-width="1.5" stroke-opacity="0.9"/>
                </g>
            </g>

            <!-- Blip glows -->
            <g clip-path="url(#radarClip)">
                <circle class="blip-glow" cx="470" cy="148" r="8"/>
                <circle class="blip-glow" cx="340" cy="270" r="8"/>
                <circle class="blip-glow" cx="510" cy="230" r="8"/>
                <circle class="blip-glow" cx="378" cy="130" r="8"/>
                <circle class="blip-glow" cx="430" cy="310" r="8"/>
                <circle class="blip-glow" cx="290" cy="185" r="8"/>
            </g>

            <!-- Blips -->
            <g clip-path="url(#radarClip)">
                <circle class="blip" cx="470" cy="148" r="2.5"/>
                <circle class="blip" cx="340" cy="270" r="2.5"/>
                <circle class="blip" cx="510" cy="230" r="2.5"/>
                <circle class="blip" cx="378" cy="130" r="2.5"/>
                <circle class="blip" cx="430" cy="310" r="2.5"/>
                <circle class="blip" cx="290" cy="185" r="2.5"/>
            </g>

        </svg>

        <slot/>
    </div>
</template>

<style scoped>
/* In your component <style> or global CSS */

.radar-bg {
    position: fixed;
    inset: 0;
    background: var(--bg);
    overflow: hidden;
    z-index: 0;
}

.radar-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity:0.1
}

.ring       { fill: none; stroke: rgba(56,189,248,0.12); stroke-width: 1; }
.crosshair  { stroke: rgba(56,189,248,0.1); stroke-width: 0.5; }
.range-label { font-size: 9px; fill: rgba(56,189,248,0.35); font-family: monospace; }

/* Sweep */
.sweep, .trail {
    transform-origin: 400px 210px;
    animation: radar-spin 10s linear infinite;
}

@keyframes radar-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Blips */
.blip, .blip-glow {
    animation: blip-fade 4s linear infinite;
}

.blip      { fill: #38bdf8; }
.blip-glow { fill: rgba(56,189,248,0.2); }

@keyframes blip-fade {
    0%  { opacity: 0; }
    2%  { opacity: 1; }
    60% { opacity: 0.5; }
    100%{ opacity: 0; }
}

/* Stagger each blip so they don't all pulse together */
.blip:nth-child(2), .blip-glow:nth-child(2) { animation-delay: -1.1s; }
.blip:nth-child(3), .blip-glow:nth-child(3) { animation-delay: -2.3s; }
.blip:nth-child(4), .blip-glow:nth-child(4) { animation-delay: -0.5s; }
.blip:nth-child(5), .blip-glow:nth-child(5) { animation-delay: -3.1s; }
.blip:nth-child(6), .blip-glow:nth-child(6) { animation-delay: -1.8s; }
</style>
