{{--
    Button hierarchy (PRD §22): primary = filled, secondary = outline, tertiary = text link.
    Renders <a> when given an href, otherwise <button>. Min 44px touch target (PRD §25).
    Responsive visibility belongs on a wrapper: Tailwind 4 resolves conflicting utilities (e.g. `hidden` vs the
    button's `inline-flex`) by stylesheet order, not class order.
--}}
@props([
    'variant' => 'primary',
    'href' => null,
    'type' => 'button',
    'newTab' => false,
    'loading' => false,
    'disabled' => false,
    'onDark' => false,
    'track' => null,
    'trackProps' => [],
])
@php
    $base = 'btn inline-flex min-h-11 items-center justify-center gap-2 rounded-md py-2.5 text-[0.9375rem] font-semibold leading-tight no-underline transition-colors duration-150 disabled:cursor-not-allowed disabled:opacity-60 aria-disabled:cursor-not-allowed aria-disabled:opacity-60';
    $variants = [
        // Colour roles only: inside a dark section (.surface-inverse) the roles re-point, so `onDark` needs no variant.
        'primary' => 'px-5 bg-accent text-on-accent hover:bg-accent-hover hover:text-on-accent',
        'secondary' => 'px-5 border border-ink text-ink hover:bg-ink hover:text-page',
        'tertiary' => 'px-1 text-link underline decoration-2 underline-offset-4 hover:text-link-hover',
    ];
    $classes = $base.' '.($variants[$variant] ?? $variants['primary']);
    $trackAttributes = $track ? ['data-track' => $track, 'data-track-props' => json_encode($trackProps, JSON_UNESCAPED_SLASHES)] : [];
@endphp
@if ($href !== null && ! $disabled)
    <a href="{{ $href }}"
       @if ($newTab) target="_blank" rel="noopener" @endif
       {{ $attributes->merge(['class' => $classes])->merge($trackAttributes) }}>
        {{ $slot }}
        @if ($newTab)<span class="sr-only">{{ __('portfolio.a11y.opens_new_tab') }}</span>@endif
    </a>
@else
    <button type="{{ $type }}"
            @disabled($disabled || $loading)
            @if ($loading) aria-busy="true" @endif
            {{ $attributes->merge(['class' => $classes])->merge($trackAttributes) }}>
        @if ($loading)
            <svg class="size-4 animate-spin" viewBox="0 0 24 24" fill="none" aria-hidden="true"><circle cx="12" cy="12" r="9" stroke="currentColor" stroke-opacity="0.3" stroke-width="3"/><path d="M21 12a9 9 0 0 0-9-9" stroke="currentColor" stroke-width="3" stroke-linecap="round"/></svg>
        @endif
        {{ $slot }}
    </button>
@endif