{{-- Newsletter section component --}}
@php
    $ts = themeService()->boot();
    $section = $ts->section('newsletter');
    if (!$section || !$section->is_active) return;

    $settings = $ts->settings('newsletter');
    $nlTitle = $ts->trans('newsletter', 'newsletter_title');
    $nlSubtitle = $ts->trans('newsletter', 'newsletter_subtitle');
    $nlPlaceholder = $ts->trans('newsletter', 'newsletter_placeholder', null, __('newsletter.email_placeholder'));
    $nlButton = $ts->trans('newsletter', 'newsletter_button', null, __('newsletter.subscribe'));
    $bgImage = $settings['background_image'] ?? null;
@endphp

<section class="product-section mt-1 mb-4 pt-0 pt-lg-4">
    <div class="container-fluid-lg">
        <div class="newsletter-wrap">
            @if($bgImage)
                <img class="newsletter-bg" src="{{ $bgImage }}" alt="Newsletter banner">
            @else
                <img class="newsletter-bg" src="{{ theme()->publicPath('images/florial/banners/newsletter4.png') }}" alt="Newsletter banner">
            @endif

            <div class="newsletter-content text-center">
                @if($nlTitle)
                    <h2 class="newsletter-title mb-2">{{ $nlTitle }}</h2>
                @endif

                @if($nlSubtitle)
                    <div class="newsletter-sub mb-3">{{ $nlSubtitle }}</div>
                @endif

                <div class="newsletter-dots mb-3"></div>

                <form id="newsletterForm" class="newsletter-form" onsubmit="return false;">
                    <div class="nl-pill">
                        <span class="nl-icon" aria-hidden="true">
                            <svg width="24" height="24" viewBox="0 0 24 24">
                                <path d="M4 6h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2z"
                                      fill="none" stroke="currentColor" stroke-width="1.6"/>
                                <path d="M22 8 12 14 2 8"
                                      fill="none" stroke="currentColor" stroke-width="1.6"/>
                            </svg>
                        </span>

                        <input class="nl-input" type="email" id="newsletterEmail"
                               placeholder="{{ $nlPlaceholder }}" required>

                        <button class="nl-btn" type="button" id="newsletterSubmit">
                            {{ $nlButton }}
                        </button>
                    </div>

                    <div id="newsletterMessage" class="mt-2" style="display:none;"></div>
                </form>
            </div>
        </div>
    </div>
</section>

<script>
document.addEventListener('DOMContentLoaded', function () {
    var btn = document.getElementById('newsletterSubmit');
    var input = document.getElementById('newsletterEmail');
    var msgDiv = document.getElementById('newsletterMessage');
    if (!btn || !input) return;

    btn.addEventListener('click', function () {
        var email = input.value.trim();
        if (!email || !email.match(/^[^\s@]+@[^\s@]+\.[^\s@]+$/)) {
            msgDiv.style.display = 'block';
            msgDiv.className = 'mt-2 text-danger';
            msgDiv.textContent = '{{ __("newsletter.invalid_email") }}';
            return;
        }

        btn.disabled = true;
        btn.textContent = '...';

        fetch('{{ route("web.newsletter.subscribe") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || '{{ csrf_token() }}'
            },
            body: JSON.stringify({ email: email })
        })
        .then(function (r) { return r.json(); })
        .then(function (data) {
            msgDiv.style.display = 'block';
            if (data.success) {
                msgDiv.className = 'mt-2 text-success fw-medium';
                msgDiv.textContent = data.message || '{{ __("newsletter.success") }}';
                input.value = '';
            } else {
                msgDiv.className = 'mt-2 text-danger';
                msgDiv.textContent = data.message || '{{ __("newsletter.error") }}';
            }
        })
        .catch(function () {
            msgDiv.style.display = 'block';
            msgDiv.className = 'mt-2 text-danger';
            msgDiv.textContent = '{{ __("newsletter.error") }}';
        })
        .finally(function () {
            btn.disabled = false;
            btn.textContent = '{{ $nlButton }}';
        });
    });
});
</script>
