@extends('layouts.app')

@section('title', 'Create Account - Ghost Compiler')

@section('content')
<div class="min-h-[75vh] flex flex-col items-center justify-center px-4 py-12">
    <!-- Logo outside and above the card -->
    <div class="text-center mb-6">
        <a href="{{ route('projects.index') }}" class="inline-block transition hover:opacity-90">
            <img src="https://res.cloudinary.com/djgvfl1tv/image/upload/v1780666791/logo_mqnqn4.png" alt="Ghost Compiler Logo" class="h-12 w-12 rounded-xl object-contain border border-brand-border shadow-md">
        </a>
        <h1 class="text-xl font-light text-brand-text mt-4 tracking-tight">Create your Ghost Compiler account</h1>
    </div>

    <!-- Alert Messages -->
    @if($errors->any())
        <div class="w-full max-w-[340px] mb-4">
            <div class="rounded-lg border border-rose-500/20 bg-rose-500/10 p-3 text-xs text-rose-500">
                <ul class="list-disc pl-4 space-y-0.5">
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        </div>
    @endif

    <!-- Register Card (GitHub-Style) -->
    <div class="w-full max-w-[340px] rounded-lg border border-brand-border bg-brand-card p-5 shadow-sm">
        <form action="{{ route('register') }}" method="POST" class="space-y-4">
            @csrf
            
            <!-- Name -->
            <div class="space-y-1.5">
                <label for="name" class="block text-xs font-semibold text-brand-text">Username</label>
                <input type="text" id="name" name="name" value="{{ old('name') }}" required autofocus placeholder="e.g. johndoe" class="w-full rounded-md border border-brand-border bg-brand-bg px-3 py-1.5 text-xs text-brand-text outline-none focus:border-brand-accent focus:ring-1 focus:ring-brand-accent/30 transition">
            </div>

            <!-- Email -->
            <div class="space-y-1.5">
                <label for="email" class="block text-xs font-semibold text-brand-text">Email address</label>
                <input type="email" id="email" name="email" value="{{ old('email') }}" required placeholder="name@example.com" class="w-full rounded-md border border-brand-border bg-brand-bg px-3 py-1.5 text-xs text-brand-text outline-none focus:border-brand-accent focus:ring-1 focus:ring-brand-accent/30 transition">
            </div>

            <!-- Password -->
            <div class="space-y-1.5">
                <label for="password" class="block text-xs font-semibold text-brand-text">Password</label>
                <input type="password" id="password" name="password" required placeholder="Min. 8 characters" class="w-full rounded-md border border-brand-border bg-brand-bg px-3 py-1.5 text-xs text-brand-text outline-none focus:border-brand-accent focus:ring-1 focus:ring-brand-accent/30 transition">
            </div>

            <!-- Password Confirmation -->
            <div class="space-y-1.5">
                <label for="password_confirmation" class="block text-xs font-semibold text-brand-text">Confirm password</label>
                <input type="password" id="password_confirmation" name="password_confirmation" required placeholder="Repeat password" class="w-full rounded-md border border-brand-border bg-brand-bg px-3 py-1.5 text-xs text-brand-text outline-none focus:border-brand-accent focus:ring-1 focus:ring-brand-accent/30 transition">
            </div>

            <!-- Date of Birth -->
            <div class="space-y-1.5">
                <label for="dob" class="block text-xs font-semibold text-brand-text">Date of birth</label>
                <input type="date" id="dob" name="dob" value="{{ old('dob') }}" required class="w-full rounded-md border border-brand-border bg-brand-bg px-3 py-1.5 text-xs text-brand-text outline-none focus:border-brand-accent focus:ring-1 focus:ring-brand-accent/30 transition">
            </div>

            <button type="submit" class="w-full rounded-md bg-emerald-600 hover:bg-emerald-500 py-1.5 text-xs font-bold text-white transition active:scale-[0.99] shadow-sm cursor-pointer mt-2">
                Create Account
            </button>

            @php
                $showGithub = !empty(config('services.github.client_id')) && !empty(config('services.github.client_secret'));
                $showGoogle = !empty(config('services.google.client_id')) && !empty(config('services.google.client_secret'));
            @endphp

            @if($showGithub || $showGoogle)
                <!-- Divider -->
                <div class="relative flex py-2 items-center">
                    <div class="flex-grow border-t border-brand-border/60"></div>
                    <span class="flex-shrink mx-3 text-[10px] text-brand-muted uppercase tracking-wider font-semibold">or continue with</span>
                    <div class="flex-grow border-t border-brand-border/60"></div>
                </div>

                <!-- Social Logins -->
                <div class="space-y-2">
                    @if($showGithub)
                        <a href="{{ route('auth.social.redirect', 'github') }}" class="w-full flex items-center justify-center gap-2 rounded-md border border-brand-border bg-brand-bg/50 hover:bg-brand-bg py-2 text-xs font-semibold text-brand-text transition hover:border-brand-accent/50 cursor-pointer">
                            <svg class="h-4 w-4 fill-current" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
                                <path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z"/>
                            </svg>
                            <span>Sign up with GitHub</span>
                        </a>
                    @endif
                    @if($showGoogle)
                        <a href="{{ route('auth.social.redirect', 'google') }}" class="w-full flex items-center justify-center gap-2 rounded-md border border-brand-border bg-brand-bg/50 hover:bg-brand-bg py-2 text-xs font-semibold text-brand-text transition hover:border-brand-accent/50 cursor-pointer">
                            <svg class="h-4 w-4" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/>
                                <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/>
                                <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.06H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.94l2.85-2.22.81-.63z" fill="#FBBC05"/>
                                <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.06l3.66 2.84c.87-2.6 3.3-4.52 6.16-4.52z" fill="#EA4335"/>
                            </svg>
                            <span>Sign up with Google</span>
                        </a>
                    @endif
                </div>
            @endif
        </form>
    </div>

    <!-- Sign In Box (GitHub-Style) -->
    <div class="w-full max-w-[340px] mt-4 rounded-lg border border-brand-border bg-brand-card/45 p-4 text-center text-xs text-brand-muted">
        Already have an account? 
        <a href="{{ route('login') }}" class="font-bold text-brand-accent hover:underline ml-1">Sign In</a>
    </div>

    <!-- Policy Links -->
    <div class="w-full max-w-[340px] mt-6 flex justify-center gap-4 text-[10px] text-brand-muted">
        <a href="{{ route('policies.privacy') }}" class="hover:text-brand-text transition hover:underline">Privacy Policy</a>
        <span>&bull;</span>
        <a href="{{ route('policies.terms') }}" class="hover:text-brand-text transition hover:underline">Terms of Service</a>
        <span>&bull;</span>
        <a href="{{ route('policies.conditions') }}" class="hover:text-brand-text transition hover:underline">Terms & Conditions</a>
    </div>
</div>
@endsection