@extends('layouts.auth')
@section('title', 'Create Account')

@section('content')
<h2 class="text-xl font-bold text-gray-900 mb-1">Start your free trial</h2>
<p class="text-sm text-gray-500 mb-6">30 days free — no credit card required</p>

<form method="POST" action="{{ route('register') }}" class="space-y-4">
    @csrf
    <div class="grid grid-cols-1 gap-4">
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Your Name</label>
            <input type="text" name="name" value="{{ old('name') }}" required
                   class="form-input @error('name') border-red-400 @enderror"
                   placeholder="Full name">
            @error('name')<p class="text-xs text-red-600 mt-1">{{ $message }}</p>@enderror
        </div>

        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Business Name</label>
            <input type="text" name="business_name" value="{{ old('business_name') }}" required
                   class="form-input @error('business_name') border-red-400 @enderror"
                   placeholder="Your business name">
            @error('business_name')<p class="text-xs text-red-600 mt-1">{{ $message }}</p>@enderror
        </div>

        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
            <input type="email" name="email" value="{{ old('email') }}" required
                   class="form-input @error('email') border-red-400 @enderror"
                   placeholder="you@business.com">
            @error('email')<p class="text-xs text-red-600 mt-1">{{ $message }}</p>@enderror
        </div>

        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Phone (optional)</label>
            <input type="text" name="phone" value="{{ old('phone') }}"
                   class="form-input" placeholder="+91 9876543210">
        </div>

        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Password</label>
            <div class="relative" x-data="{ show: false }">
                <input :type="show ? 'text' : 'password'" name="password" required
                       class="form-input pr-10 @error('password') border-red-400 @enderror"
                       placeholder="Min. 8 characters">
                <button type="button" @click="show=!show"
                        class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                    </svg>
                </button>
            </div>
            @error('password')<p class="text-xs text-red-600 mt-1">{{ $message }}</p>@enderror
        </div>

        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Confirm Password</label>
            <input type="password" name="password_confirmation" required
                   class="form-input" placeholder="Repeat password">
        </div>
    </div>

    <p class="text-xs text-gray-400">
        By registering you agree to our <a href="#" class="text-indigo-600">Terms of Service</a> and <a href="#" class="text-indigo-600">Privacy Policy</a>.
    </p>

    <button type="submit" class="btn-primary">Create free account</button>
</form>

<p class="mt-6 text-center text-sm text-gray-500">
    Already have an account?
    <a href="{{ route('login') }}" class="text-indigo-600 font-medium hover:underline">Sign in</a>
</p>
@endsection