@push('head')
    <meta charset="utf-8">
    <meta name="title" content="WingsDiet – Nutritionists & AI-Powered Diet Plans & Weight Loss App">
    <meta name="description" content="Personalized diet plans, AI nutrition tracker, weight loss tips & live chat with dietitians. Download WingsDiet for your fitness and weight goals.">
    <meta name="keywords" content="WingsDiet, weight loss app, AI diet planner, personalized diet plan, calorie tracker, nutrition app, dietitian support, healthy meal plans, food scanner, body transformation, fat loss app, fitness goals, AI nutrition assistant, slim tea planner, detox diet app, lose weight fast, best diet app 2025">
    <meta name="robots" content="index, follow">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="WingsDiet Team">
    
    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://www.wingsdiet.com/">
    <meta property="og:title" content="WingsDiet – Nutritionists & AI-Powered Diet Plans & Weight Loss App">
    <meta property="og:description" content="Personalized wellness with real dietitians and AI-powered tools. Start your journey with WingsDiet today!">
    <meta property="og:image" content="https://wingsdiet.com/images/single-img-four.png">
    
    <!-- Twitter -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:url" content="https://www.wingsdiet.com/">
    <meta name="twitter:title" content="WingsDiet – Nutritionists & AI-Powered Diet Plans & Weight Loss App">
    <meta name="twitter:description" content="Real dietitians. Smart AI. Personalized plans. Download WingsDiet now and take control of your health.">
    <meta name="twitter:image" content="https://wingsdiet.com/images/single-img-four.png">
@endpush

<x-layout.auth>
    <div class="relative min-h-screen flex items-center justify-center px-6 py-10 bg-cover bg-no-repeat" style="background-image: url('{{ asset('assets/images/auth/map.png') }}')">
        <div class="absolute inset-0 z-0">
            <img src="{{ asset('assets/images/auth/bg-gradient.png') }}" alt="background" class="h-full w-full object-cover">
            <img src="{{ asset('assets/images/auth/coming-soon-object1.png') }}" class="absolute left-0 top-1/2 max-h-[893px] -translate-y-1/2">
            <img src="{{ asset('assets/images/auth/coming-soon-object2.png') }}" class="absolute left-24 top-0 h-40 md:left-[30%]">
            <img src="{{ asset('assets/images/auth/coming-soon-object3.png') }}" class="absolute right-0 top-0 h-[300px]">
            <img src="{{ asset('assets/images/auth/polygon-object.svg') }}" class="absolute bottom-0 end-[28%]">
        </div>

        <div class="relative z-10 w-full max-w-[870px] rounded-md p-2 bg-white/60 backdrop-blur-lg">
            <div class="px-6 py-20">
                <div class="mx-auto w-full max-w-[440px] mb-10">
                    <h1 class="text-2xl font-extrabold uppercase text-primary">WingsDiet Account Creation</h1>
                    <p class="text-base font-bold text-white-dark">Enter your name, email and phone to register</p>

                    <form method="POST" action="{{ route('register') }}" class="space-y-5 dark:text-white">
                        @csrf

                        <div>
                            <label for="Name">Name</label>
                            <input name="name" id="Name" type="text" value="{{ old('name') }}" placeholder="Enter Name" class="form-input ps-4">
                            @error('name') <small class="text-red-500">{{ $message }}</small> @enderror
                        </div>

                        <div>
                            <label for="Email">Email</label>
                            <input name="email" id="Email" type="email" value="{{ old('email') }}" placeholder="Enter Email" class="form-input ps-4">
                            @error('email') <small class="text-red-500">{{ $message }}</small> @enderror
                        </div>

                        <div>
                            <label for="Phone">Phone</label>
                            <input name="phone" id="Phone" type="tel" placeholder="Enter Phone Number" class="form-input ps-4">
                            @error('phone') <small class="text-red-500">{{ $message }}</small> @enderror
                        </div>

                        @if (request()->has('ref'))
                            <input type="hidden" name="ref" value="{{ request()->query('ref') }}">
                        @endif

                        <div class="g-recaptcha my-4" data-sitekey="{{ config('services.recaptcha.site_key') }}"></div>

                        <button type="submit" class="btn btn-gradient mt-6 w-full uppercase shadow-[0_10px_20px_-10px_rgba(67,97,238,0.44)]">Sign Up</button>
                    </form>

                    <div class="text-center mt-4">
                        <a href="{{ route('forget.password') }}" class="text-sm text-primary hover:underline">
                            Forgot Password?
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://www.google.com/recaptcha/api.js" async defer></script>

</x-layout.auth>