@extends('layouts.public')

@section('title', 'Register | KunciLink | Social Unlock & Link in Bio Indonesia')

@section('meta_description')
Daftar gratis di KunciLink - platform social unlock terdepan Indonesia. Bergabung dengan ribuan creator untuk meningkatkan subscriber, followers & monetisasi konten Anda.
@endsection

@section('content')
<div class="max-w-md mx-auto px-4 py-12">
    <div class="text-center mb-8">
        <a href="/" class="flex items-center justify-center mb-6 text-2xl font-semibold text-gray-900">
            <img class="w-8 h-8 mr-2" src="{{ asset('favicon.ico?v=2') }}" alt="logo">
            KunciLink
        </a>
        <h1 class="text-2xl font-bold text-gray-900 mb-2">Daftar Akun Baru</h1>
        <p class="text-gray-600">Bergabung dengan ribuan kreator Indonesia</p>
    </div>

    <!-- QRIS Payment Notice -->
    @if(session('redirect_after_login') && strpos(session('redirect_after_login'), '/payment/qris/') !== false)
    <div class="mb-6 p-4 bg-blue-50 border border-blue-200 rounded-lg">
        <div class="flex">
            <div class="flex-shrink-0">
                <svg class="h-5 w-5 text-blue-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
                </svg>
            </div>
            <div class="ml-3">
                <h3 class="text-sm font-medium text-blue-800">Pembayaran QRIS</h3>
                <div class="mt-2 text-sm text-blue-700">
                    <p>Anda perlu mendaftar akun KunciLink untuk menyelesaikan pembayaran QRIS Anda. Setelah registrasi, Anda akan secara otomatis dialihkan ke halaman pembayaran.</p>
                </div>
            </div>
        </div>
    </div>
    @endif
    <!-- End QRIS Payment Notice -->

    <div class="bg-white rounded-lg shadow-sm border p-8">
        <p class="text-center text-gray-600 mb-6">Daftar dengan mudah menggunakan Google</p>

        {{-- Validation Errors --}}
        @if ($errors->any())
            <div class="mb-4 p-4 bg-red-50 border border-red-200 rounded-lg">
                <div class="text-sm text-red-600">
                    <ul class="list-disc pl-5">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            </div>
        @endif

        <a href="{{ route('google.login') }}@if(request('redirect'))?redirect={{ request('redirect') }}@endif" id="gSignInWrapper" style="cursor: pointer;" class="block">
            <div id="customBtn1" class="flex items-center justify-center gap-4 py-3 rounded-lg bg-blue-500 hover:bg-blue-600 transition-colors">
                <img width="20" src="/img/google.svg" alt="Google">
                <span class="font-medium text-white">Continue with Google</span>
            </div>
        </a>

        {{-- Pemisah --}}
        <div class="flex items-center gap-2 mt-6 opacity-60">
            <hr class="flex-1 opacity-40">
            <span class="text-sm text-gray-500">atau</span>
            <hr class="flex-1 opacity-40">
        </div>

        {{-- Link ke Login --}}
        <div class="text-center mt-6">
            <p class="text-sm text-gray-500">Sudah punya akun?</p>
            <a href="{{ route('login') }}" class="inline-block mt-2 px-6 py-2 bg-gray-100 hover:bg-gray-200 text-sm font-medium rounded-lg text-gray-800 transition-colors">
                Login
            </a>
        </div>
    </div>
    
    {{-- Social Sharing Section --}}
    <div class="mt-8">
        @include('components.social-sharing-buttons', [
            'showTitle' => true,
            'shareTitle' => 'Bagikan KunciLink.id',
            'class' => 'my-4',
            'title' => 'Register KunciLink.id - Social Unlock Platform',
            'description' => 'Bergabung dengan KunciLink.id - Platform social unlock terbaik Indonesia untuk YouTuber, influencer & content creator.'
        ])
    </div>
</div>
@endsection