{{--
    Reusable privacy-policy consent block.

    Placed just before the submit button on both signup forms (investor +
    startup). Required by both `InvestorSignupRequest` and
    `StartupSignupRequest` via the `accepted` validation rule.

    The link opens the /privacy-policy page in a new tab so the user
    doesn't lose their in-progress form. `old('accepted_privacy_policy')`
    preserves the checkbox state across server-side validation errors.
--}}
<fieldset class="field privacy-consent">
    <label class="choice privacy-consent__choice">
        <input
            type="checkbox"
            name="accepted_privacy_policy"
            value="1"
            required
            @checked(old('accepted_privacy_policy'))
        >
        <span class="choice__indicator"></span>
        <span class="privacy-consent__text">
            {{ __('web.signup.common.privacy.prefix') }}
            <a href="{{ route('privacy-policy') }}" target="_blank" rel="noopener" class="privacy-consent__link">
                {{ __('web.signup.common.privacy.link_text') }}
            </a>
        </span>
    </label>

    @error('accepted_privacy_policy')
        <p class="help--error">
            <svg width="14" height="14"><use href="#icon-alert"/></svg>
            {{ $message }}
        </p>
    @enderror
</fieldset>

@once
    @push('styles')
    <style>
        /*
         * Consent block — visually grounded so users can't miss it, but
         * not so heavy it dominates the page. The whole label is the
         * click target (mobile-friendly).
         */
        .privacy-consent {
            margin-top: 8px;
            margin-bottom: 0;
            padding: 14px 16px;
            background: var(--primary-50, #eef2ff);
            border: 1px solid rgba(99, 102, 241, .22);
            border-radius: var(--radius-md, 10px);
        }
        .privacy-consent__choice {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            min-height: auto;
            padding: 4px 6px;
            border: 0 !important;
            background: transparent !important;
            font-weight: 500;
            line-height: 1.7;
            cursor: pointer;
        }
        .privacy-consent__choice:hover { background: transparent !important; }

        .privacy-consent__choice .choice__indicator {
            width: 20px; height: 20px;
            margin-top: 2px;
            flex-shrink: 0;
            border-radius: 5px !important;
            border: 2px solid var(--slate-400, #94a3b8);
        }
        .privacy-consent__choice:has(input:checked) {
            background: transparent !important;
            box-shadow: none !important;
        }
        .privacy-consent__choice:has(input:checked) .choice__indicator {
            background: var(--primary-600, #4f46e5);
            border-color: var(--primary-600, #4f46e5);
        }

        .privacy-consent__text {
            color: var(--slate-800, #1e293b);
            font-size: 14.5px;
        }
        .privacy-consent__link {
            color: var(--primary-700, #4338ca);
            font-weight: 700;
            text-decoration: underline;
            text-underline-offset: 3px;
        }
        .privacy-consent__link:hover { color: var(--primary-600, #4f46e5); }

        /* When validation fails, draw the user's eye. */
        .privacy-consent:has(.help--error) {
            background: var(--error-50, #fef2f2);
            border-color: var(--error-300, #fca5a5);
        }

        @media (max-width: 480px) {
            .privacy-consent { padding: 12px 14px; }
            .privacy-consent__text { font-size: 14px; }
        }
    </style>
    @endpush
@endonce