@php
    $providers = [
        'google' => 'Google',
        'facebook' => 'Facebook',
        'kakao' => 'KakaoTalk',
    ];

    $buttonText = $context === 'login' ? 'Continue with' : 'Sign up with';
    $dividerText = $context === 'login' ? 'Or continue with' : 'Or sign up with';
@endphp

<div class="social-auth-block mb-4">
    <div class="social-auth-divider">
        <span>{{ $dividerText }}</span>
    </div>

    <div class="social-auth-grid">
        @foreach ($providers as $provider => $label)
            <a
                href="{{ route('social.redirect', ['provider' => $provider, 'context' => $context]) }}"
                class="social-auth-button {{ $provider === 'kakao' ? 'social-auth-button--kakao' : '' }}"
                aria-label="{{ $buttonText }} {{ $label }}"
                title="{{ $buttonText }} {{ $label }}"
            >
                @switch($provider)
                    @case('google')
                        <svg viewBox="0 0 24 24" aria-hidden="true">
                            <path fill="#EA4335" d="M12 10.2v3.98h5.64c-.25 1.28-.98 2.36-2.05 3.08l3.32 2.58c1.94-1.79 3.05-4.42 3.05-7.54 0-.72-.06-1.41-.19-2.1H12z"/>
                            <path fill="#34A853" d="M12 22c2.76 0 5.08-.92 6.78-2.49l-3.32-2.58c-.92.62-2.1.99-3.46.99-2.66 0-4.92-1.8-5.72-4.22l-3.42 2.64A10 10 0 0 0 12 22z"/>
                            <path fill="#4A90E2" d="M6.28 13.7A6 6 0 0 1 6 12c0-.59.1-1.17.28-1.7L2.86 7.66A10 10 0 0 0 2 12c0 1.61.39 3.13 1.08 4.46l3.2-2.76z"/>
                            <path fill="#FBBC05" d="M12 6.08c1.5 0 2.84.52 3.9 1.54l2.92-2.92C17.07 3.06 14.76 2 12 2A10 10 0 0 0 3.08 7.54l3.2 2.76C7.08 7.88 9.34 6.08 12 6.08z"/>
                        </svg>
                        @break

                    @case('facebook')
                        <svg viewBox="0 0 24 24" aria-hidden="true">
                            <path fill="currentColor" d="M13.37 21v-8.06h2.71l.41-3.14h-3.12V7.8c0-.91.26-1.53 1.56-1.53h1.67V3.45c-.29-.04-1.28-.12-2.43-.12-2.4 0-4.04 1.46-4.04 4.15V9.8H7.4v3.14h2.73V21h3.24z"/>
                        </svg>
                        @break

                    @case('kakao')
                        <svg viewBox="0 0 32 32" aria-hidden="true">
                            <path fill="currentColor" d="M16 4c-6.08 0-11 3.82-11 8.54 0 3.06 2.07 5.73 5.19 7.24l-1.3 4.8a.77.77 0 0 0 1.14.83l5.55-3.5c.47.04.94.08 1.42.08 6.08 0 11-3.82 11-8.54S22.08 4 16 4z"/>
                            <text x="16" y="15.6" text-anchor="middle" font-size="7.2" font-family="Arial, sans-serif" font-weight="700" fill="#fff">Talk</text>
                        </svg>
                        @break
                @endswitch
            </a>
        @endforeach
    </div>
</div>