<template>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none">
        <defs>
            <linearGradient id="body-gradient" x1="0" y1="100" x2="100" y2="0" gradientUnits="userSpaceOnUse">
                <stop offset="0%" stop-color="#FFEC00" /> <!-- Yellow -->
                <stop offset="100%" stop-color="#009EE0" /> <!-- Blue -->
            </linearGradient>
            <linearGradient id="head-gradient" x1="20" y1="20" x2="80" y2="80" gradientUnits="userSpaceOnUse">
                <stop offset="0%" stop-color="#E30613" /> <!-- Red -->
                <stop offset="100%" stop-color="#B91C1C" /> <!-- Dark Red -->
            </linearGradient>
            
            <!-- Glow filter for modern feel -->
            <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
                <feGaussianBlur stdDeviation="2" result="blur" />
                <feComposite in="SourceGraphic" in2="blur" operator="over" />
            </filter>
        </defs>

        <!-- Modern Abstract Onboarding Icon -->
        
        <!-- The "Receptacle" / Organization / Structure (U-shape) -->
        <!-- Stylized as a smooth, continuous curve representing support/integration -->
        <path 
            d="M 20 55 C 20 85, 80 85, 80 55" 
            stroke="url(#body-gradient)" 
            stroke-width="12" 
            stroke-linecap="round" 
            fill="none" 
        />
        
        <!-- The "User" / Agent (Floating Sphere) -->
        <!-- Poised to enter or rising up, representing energy/new arrival -->
        <circle cx="50" cy="35" r="14" fill="url(#head-gradient)" />
        
        <!-- Dynamic "Connection" Dot (Success/Active status) -->
        <circle cx="82" cy="35" r="6" fill="#009EE0" stroke="white" stroke-width="2" />

    </svg>
</template>
