@props(['source' => 'website', 'tone' => 'light'])

<form method="POST" action="{{ route('newsletter.subscribe') }}" class="w-full">
    @csrf
    <input type="hidden" name="source" value="{{ $source }}">
    <div class="absolute -left-[9999px]" aria-hidden="true">
        <label>Website<input type="text" name="website" tabindex="-1" autocomplete="off"></label>
    </div>

    <div class="flex flex-col gap-2.5 sm:flex-row">
        <label for="email-{{ $source }}" class="sr-only">Email address</label>
        <input id="email-{{ $source }}" type="email" name="email" required autocomplete="email"
               placeholder="you@company.com"
               value="{{ old('email') }}"
               @class([
                   'field flex-1',
                   'border-white/25 bg-white/5 text-paper placeholder:text-graphite-400' => $tone === 'dark',
               ])>
        <button type="submit" class="btn {{ $tone === 'dark' ? 'btn-signal' : 'btn-primary' }} shrink-0">Get the newsletter</button>
    </div>

    @error('email')
        <p class="mt-2 text-sm {{ $tone === 'dark' ? 'text-signal' : 'text-red-600' }}">{{ $message }}</p>
    @enderror
</form>