@extends('layouts.auth')

@section('content')
<div class="container mx-auto mt-10 max-w-lg p-6 bg-white rounded-lg shadow-md">
    <div class="text-center">
        <h2 class="text-2xl font-bold text-gray-800">Connect Your Facebook Account</h2>
        <p class="mt-2 text-gray-600">Link your Facebook account to enable seamless integration.</p>

        <div class="mt-6">
            <a href="{{ route('facebook.redirect') }}"
               class="flex items-center justify-center gap-2 px-4 py-2 text-white bg-blue-600 hover:bg-blue-700 rounded-md">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M22,12A10,10,0,1,0,10,22V14H7V12h3V9a4,4,0,0,1,4-4h3v2H14a2,2,0,0,0-2,2v3h4l-1,2H12v8A10,10,0,0,0,22,12Z"/>
                </svg>
                <span>Connect with Facebook</span>
            </a>
        </div>
    </div>
</div>
@endsection