@props([
    'heading' => 'Get new articles by email',
    'description' => 'Occasional writing on Laravel, performance and shipping real projects. No more than a couple of emails a month, and one click to leave.',
])

{{--
    Newsletter signup (PRD 10.21). Appears below blog articles and at the foot
    of the blog listing. Posts to a normal Laravel route — no third-party
    marketing script, no external embed, so nothing loads from another origin
    on a content page.
--}}
<section id="newsletter" {{ $attributes->merge(['class' => 'section']) }}>
    <div class="container-site">
        <div class="container-panel text-center">
            <h2 class="section-title mb-3">{{ $heading }}</h2>
            <p class="mx-auto mb-4" style="max-width: 560px; color: var(--color-paragraph);">
                {{ $description }}
            </p>

            <form
                method="POST"
                action="{{ route('newsletter.store') }}"
                class="d-flex flex-column flex-sm-row justify-content-center gap-2 mx-auto"
                style="max-width: 520px;"
            >
                @csrf

                {{-- Honeypot, matching the contact form's approach (PRD 13.9). --}}
                <div aria-hidden="true" style="position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;">
                    <label for="newsletter_website_url">Leave this field empty</label>
                    <input type="text" name="website_url" id="newsletter_website_url" tabindex="-1" autocomplete="off">
                </div>

                <label for="newsletter_email" class="visually-hidden">Email address</label>
                <input
                    type="email"
                    name="email"
                    id="newsletter_email"
                    class="form-control @error('email') is-invalid @enderror"
                    placeholder="you@company.com"
                    value="{{ old('email') }}"
                    maxlength="180"
                    required
                    autocomplete="email"
                    style="border-radius: var(--radius-form); padding: .875rem 1rem;"
                >
                <button type="submit" class="btn btn-primary-gradient flex-shrink-0">Subscribe</button>
            </form>

            @error('email')
                <p class="mt-2 mb-0" style="color: #DC3545; font-size: var(--fs-small);">{{ $message }}</p>
            @enderror
        </div>
    </div>
</section>