@php
    $fieldClass = 'block w-full rounded-none border border-line bg-surface-raised px-4 py-3 font-sans text-body text-on-surface placeholder:text-on-surface-muted transition-colors duration-fast ease-out-soft focus:border-accent-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent-500/20';
@endphp

<div>
    @if ($subscribed)
        <x-alert variant="success" title="{{ $alreadySubscribed ? 'Ya estás suscrito' : 'Suscripción confirmada' }}">
            {{ $alreadySubscribed
                ? 'Tu correo ya forma parte de nuestra lista. Seguiremos enviándote guías de piedra natural.'
                : 'Gracias por suscribirte. Recibirás guías de piedra natural, ideas y novedades.' }}
        </x-alert>

        <p class="mt-3 font-sans text-xs text-on-surface-muted">Referencia: {{ $successToken }}</p>
    @else
        @error('form')
            <x-alert variant="error" title="Revisa tu correo" class="mb-5">{{ $message }}</x-alert>
        @enderror

        <div class="grid gap-4 sm:grid-cols-2">
            <div>
                <label for="newsletter-email" class="mb-1 block font-sans text-sm font-medium text-on-surface-muted">Correo electrónico</label>
                <input id="newsletter-email" type="email" wire:model="email" class="{{ $fieldClass }}"
                       placeholder="tu@correo.com" autocomplete="email">
                @error('email') <p role="alert" class="mt-1 font-sans text-sm text-error-text">{{ $message }}</p> @enderror
            </div>

            <div>
                <label for="newsletter-name" class="mb-1 block font-sans text-sm font-medium text-on-surface-muted">Nombre (opcional)</label>
                <input id="newsletter-name" type="text" wire:model="name" class="{{ $fieldClass }}"
                       placeholder="Tu nombre" autocomplete="name">
                @error('name') <p role="alert" class="mt-1 font-sans text-sm text-error-text">{{ $message }}</p> @enderror
            </div>
        </div>

        <div class="mt-4">
            <label class="flex items-start gap-3 font-sans text-sm text-on-surface-muted">
                <input type="checkbox" wire:model="consent"
                       class="mt-0.5 h-4 w-4 rounded-none border-brand-500 text-accent-500 transition-colors duration-fast ease-out-soft focus:outline-none focus:ring-2 focus:ring-accent-500/25">
                <span>Acepto recibir comunicaciones por correo. Puedo darme de baja cuando quiera.</span>
            </label>
            @error('consent') <p role="alert" class="mt-1 font-sans text-sm text-error-text">{{ $message }}</p> @enderror
        </div>

        <div class="hidden" aria-hidden="true">
            <label for="newsletter-honeypot">No completar</label>
            <input id="newsletter-honeypot" type="text" wire:model="honeypot" tabindex="-1" autocomplete="off">
        </div>

        <div class="mt-5">
            <x-button type="button" variant="primary" wire:click="submit" data-track="newsletter_submit">
                Suscribirme
                <x-icon name="arrow-right" :size="16" />
            </x-button>
        </div>
    @endif
</div>