{{--
    SmartCard Contract (Phase 1 — Engine only, no visual change)

    Ownership:
      Interaction layer  → hover / focus / spotlight / border (never layout)
      Media zone         → aspect-ratio + overlay stack; variant supplies content
      Body zone          → eyebrow / body / meta / intelligence (content only)
      Footer zone        → CTA ownership; variant supplies footer content

    Slots:
      media, badges, media-actions, eyebrow, body, meta, intelligence, footer
      `actions` is a deprecated alias of `media-actions`
      default `slot` is a compatibility fallback for `body` — do not use in new variants
--}}
@props([
    'variant' => 'product',
    'href' => null,
    'label' => null,
    'overlayLink' => true,
])

@php
    $mediaActionSlot = isset($mediaActions) ? $mediaActions : (isset($actions) ? $actions : null);
@endphp

<article
    {{ $attributes->class([
        'eca-smart-card group',
        'eca-smart-card--' . $variant,
    ]) }}
    x-data="ecaSmartCard()"
    @mousemove="onMove($event)"
    @mouseleave="onLeave()"
    data-reveal="card"
    data-reveal-item
>
    <div class="eca-smart-card__interaction" aria-hidden="true">
        <div class="eca-smart-card__spotlight pointer-events-none absolute inset-0 z-0 opacity-0 transition-opacity duration-300 group-hover:opacity-100" :style="spotlightStyle()"></div>
        <div class="eca-smart-card__border pointer-events-none absolute inset-0 z-0"></div>
    </div>

    <div class="eca-smart-card__engine relative z-[1] flex h-full flex-col">
        <div class="eca-smart-card__main relative flex min-h-0 flex-1 flex-col">
            @if ($href && $overlayLink)
                <a href="{{ $href }}" class="eca-smart-card__hit" @if ($label) aria-label="{{ $label }}" @endif></a>
            @endif
            @if (isset($media))
                <div class="eca-smart-card__media-zone">
                    {{ $media }}
                    @if (isset($badges))
                        <div class="eca-smart-card__badge-zone">
                            {{ $badges }}
                        </div>
                    @endif
                    @if ($mediaActionSlot)
                        <div class="eca-smart-card__media-actions-zone">
                            {{ $mediaActionSlot }}
                        </div>
                    @endif
                </div>
            @endif

            <div class="eca-smart-card__body-zone">
                @if (isset($eyebrow))
                    <div class="eca-smart-card__eyebrow-zone">{{ $eyebrow }}</div>
                @endif

                @if (isset($body))
                    <div class="eca-smart-card__content-zone">{{ $body }}</div>
                @elseif (! $slot->isEmpty())
                    {{-- Compatibility fallback only. New variants must use the `body` slot. --}}
                    <div class="eca-smart-card__content-zone">{{ $slot }}</div>
                @endif

                @if (isset($meta))
                    <div class="eca-smart-card__meta-zone">{{ $meta }}</div>
                @endif

                @if (isset($intelligence))
                    <div class="eca-smart-card__intelligence-zone">{{ $intelligence }}</div>
                @endif
            </div>
        </div>

        @if (isset($footer))
            <footer class="eca-smart-card__footer-zone">
                {{ $footer }}
            </footer>
        @endif
    </div>
</article>