@props([
    'href' => '#',
    'variant' => 'primary', // primary | secondary | ghost | light
    'arrow' => true,
])

@php
    $base = 'inline-flex items-center justify-center gap-2 rounded-full px-6 py-3 text-sm font-semibold transition-all focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-500';
    $variants = [
        // Solid blue — primary ProHealth CTA
        'primary' => 'bg-teal-600 text-white shadow-[0_12px_28px_-10px_rgba(31,87,196,0.75)] hover:-translate-y-0.5 hover:bg-teal-700',
        // Solid navy — alternate dark CTA
        'secondary' => 'bg-navy-900 text-white hover:-translate-y-0.5 hover:bg-navy-800',
        // Bordered on light
        'ghost' => 'border border-line bg-white text-navy-900 hover:border-teal-300 hover:text-teal-700',
        // Translucent on dark
        'light' => 'bg-white/10 text-white ring-1 ring-inset ring-white/25 hover:bg-white/20',
    ];
    $classes = $base . ' ' . ($variants[$variant] ?? $variants['primary']);
@endphp

<a href="{{ $href }}" {{ $attributes->merge(['class' => $classes]) }}>
    {{ $slot }}
    @if ($arrow)
        <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M3 10a.75.75 0 01.75-.75h9.69L9.72 5.53a.75.75 0 011.06-1.06l5 5a.75.75 0 010 1.06l-5 5a.75.75 0 11-1.06-1.06l3.72-3.72H3.75A.75.75 0 013 10z" clip-rule="evenodd"/></svg>
    @endif
</a>