@props([
    'size' => 'md', // sm, md, lg
    'withText' => true,
    'class' => ''
])

@php
    $dimensions = match($size) {
        'sm' => ['box' => 'w-8 h-8', 'icon' => 'w-4 h-4', 'text' => 'text-base'],
        'md' => ['box' => 'w-10 h-10', 'icon' => 'w-5 h-5', 'text' => 'text-xl'],
        'lg' => ['box' => 'w-12 h-12', 'icon' => 'w-6 h-6', 'text' => 'text-2xl'],
        default => ['box' => 'w-10 h-10', 'icon' => 'w-5 h-5', 'text' => 'text-xl'],
    };
@endphp

<div x-data="{ showText: {{ $withText ? 'true' : 'false' }} }" {{ $attributes }} class="flex items-center gap-3 {{ $class }}">
    <!-- Logo Symbol -->
    <div class="relative group">
        <!-- Outer Glow -->
        <div class="absolute -inset-2 bg-gradient-to-tr from-pink-500/20 to-emerald-500/20 rounded-2xl blur-lg opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
        
        <!-- Icon Container -->
        <div class="{{ $dimensions['box'] }} bg-zinc-900 border border-white/10 rounded-xl flex items-center justify-center relative overflow-hidden shadow-xl">
            <!-- Subtle Mesh Background -->
            <div class="absolute inset-0 bg-[radial-gradient(circle_at_50%_0%,rgba(236,72,153,0.1),transparent)]"></div>
            
            <!-- Stylized "Z" / Envelope Fold -->
            <svg class="{{ $dimensions['icon'] }} text-transparent" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <defs>
                    <linearGradient id="logo-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
                        <stop offset="0%" style="stop-color:#ec4899" />
                        <stop offset="100%" style="stop-color:#be185d" />
                    </linearGradient>
                </defs>
                <path d="M4 19L20 5M4 19H14M20 5H10" stroke="url(#logo-gradient)" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M4 5L20 19" stroke="white" stroke-opacity="0.1" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>

            <!-- Activity Pulsar (Top Right) -->
            <div class="absolute top-1.5 right-1.5 w-1.5 h-1.5 bg-emerald-500 rounded-full shadow-[0_0_8px_rgba(16,185,129,0.5)]">
                <div class="absolute inset-0 bg-emerald-500 rounded-full animate-ping opacity-75"></div>
            </div>
        </div>
    </div>

    <div class="flex items-center" x-show="showText" x-transition:opacity>
        <span class="{{ $dimensions['text'] }} font-black tracking-tighter text-white italic uppercase">zemail</span>
        <span class="{{ $dimensions['text'] }} font-black tracking-tighter text-pink-500 leading-none italic uppercase">.me</span>
    </div>
</div>