<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>InspectAI - Register</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet">
  <script>
    (function () {
      const theme = localStorage.getItem('theme') || 'light';
      document.documentElement.classList.toggle('dark', theme === 'dark');
    })();
    tailwind.config = {
      darkMode: 'class',
      theme: {
        extend: {
          fontFamily: { sans: ['DM Sans', 'sans-serif'], mono: ['DM Mono', 'monospace'] },
          colors: { primary: { DEFAULT: '#4f6ef7', foreground: '#ffffff' } }
        }
      }
    }
  </script>
  <style>
    body { font-family: 'DM Sans', sans-serif; }
    .dark body { background: #0f172a; color: #e5e7eb; }
    .dark .bg-white { background-color: #111827 !important; }
    .dark .bg-gray-50 { background-color: #0f172a !important; }
    .dark .bg-gray-100 { background-color: #1f2937 !important; }
    .dark .bg-emerald-50 { background-color: rgba(16,185,129,.12) !important; }
    .dark .bg-\[\#eff3fe\] { background-color: rgba(79,110,247,.14) !important; }
    .dark .bg-gradient-to-br { background-image: none !important; background-color: #111827 !important; }
    .dark .border-gray-100,
    .dark .border-gray-200 { border-color: #263244 !important; }
    .dark .border-\[\#c7d3fc\] { border-color: rgba(124,148,255,.34) !important; }
    .dark .text-gray-950,
    .dark .text-gray-900 { color: #f8fafc !important; }
    .dark .text-gray-700 { color: #e5e7eb !important; }
    .dark .text-gray-600 { color: #cbd5e1 !important; }
    .dark .text-gray-500 { color: #94a3b8 !important; }
    .dark .text-gray-400 { color: #64748b !important; }
    .dark .text-emerald-500,
    .dark .text-emerald-600 { color: #34d399 !important; }
    .dark .hover\:bg-gray-50:hover,
    .dark .hover\:bg-white:hover { background-color: #1f2937 !important; }
    .dark .focus\:bg-white:focus { background-color: #111827 !important; }
    .dark input,
    .dark select,
    .dark textarea { background-color: #0f172a !important; color: #e5e7eb !important; border-color: #334155 !important; }
    .dark input::placeholder { color: #64748b !important; }
    .dark option { background-color: #111827; color: #e5e7eb; }
    .auth-card { transition: transform .25s ease, box-shadow .25s ease; }
    .auth-card:hover { transform: translateY(-2px); box-shadow: 0 4px 20px rgba(0,0,0,.08); }
    .dark .auth-card:hover { box-shadow: 0 12px 32px rgba(0,0,0,.35); }
    .progress-bar { transition: width .6s ease; }
  </style>
</head>
<body class="min-h-screen bg-gray-50 text-gray-900">
  <main class="grid min-h-screen lg:grid-cols-[0.95fr_1.05fr]">
    <section class="flex min-h-screen items-center justify-center px-4 py-8 sm:px-6 lg:px-10">
      <div class="w-full max-w-md">
        <div class="mb-8 flex items-center justify-between lg:hidden">
          <a href="{{ route('register') }}" class="flex items-center gap-3">
            <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-[#4f6ef7]">
              <span class="text-sm font-bold text-white">IA</span>
            </div>
            <div class="flex flex-col">
              <span class="text-base font-semibold tracking-tight">InspectAI</span>
              <span class="text-[11px] text-gray-400">Property Intelligence</span>
            </div>
          </a>
          <a href="{{ route('login') }}" class="rounded-xl border border-gray-200 bg-white px-3 py-2 text-xs font-medium text-gray-600 hover:bg-gray-50">Login</a>
        </div>

        <div class="rounded-2xl border border-gray-100 bg-white p-6 shadow-sm sm:p-8">
          <div class="mb-7">
            <div class="mb-3 flex h-11 w-11 items-center justify-center rounded-xl bg-[#eff3fe]">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-[#4f6ef7]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><line x1="19" y1="8" x2="19" y2="14"></line><line x1="22" y1="11" x2="16" y2="11"></line></svg>
            </div>
            <h2 class="text-2xl font-bold tracking-tight">Create account</h2>
            <p class="mt-2 text-sm leading-6 text-gray-500">Set up your workspace for property inspection reports and AI findings.</p>
          </div>

          <form method="POST" action="{{ route('register.store') }}" class="space-y-5">
            @csrf
            <label class="block">
              <span class="mb-2 block text-sm font-medium text-gray-700">Full name</span>
              <input name="name" type="text" value="{{ old('name') }}" required placeholder="Your name" class="h-11 w-full rounded-xl border border-gray-200 bg-gray-50 px-4 text-sm placeholder:text-gray-400 focus:border-[#4f6ef7] focus:bg-white focus:outline-none focus:ring-2 focus:ring-[#4f6ef7]/20">
              @error('name') <span class="mt-2 block text-xs font-medium text-red-500">{{ $message }}</span> @enderror
            </label>

            <label class="block">
              <span class="mb-2 block text-sm font-medium text-gray-700">Email address</span>
              <input name="email" type="email" value="{{ old('email') }}" required placeholder="inspector@example.com" class="h-11 w-full rounded-xl border border-gray-200 bg-gray-50 px-4 text-sm placeholder:text-gray-400 focus:border-[#4f6ef7] focus:bg-white focus:outline-none focus:ring-2 focus:ring-[#4f6ef7]/20">
              @error('email') <span class="mt-2 block text-xs font-medium text-red-500">{{ $message }}</span> @enderror
            </label>

            <label class="block">
              <span class="mb-2 block text-sm font-medium text-gray-700">Role</span>
              <select name="role" class="h-11 w-full rounded-xl border border-gray-200 bg-gray-50 px-4 text-sm text-gray-700 focus:border-[#4f6ef7] focus:bg-white focus:outline-none focus:ring-2 focus:ring-[#4f6ef7]/20">
                @foreach (['Inspector', 'Property Manager', 'Estimator', 'Admin'] as $role)
                  <option value="{{ $role }}" @selected(old('role', 'Inspector') === $role)>{{ $role }}</option>
                @endforeach
              </select>
              @error('role') <span class="mt-2 block text-xs font-medium text-red-500">{{ $message }}</span> @enderror
            </label>

            <div class="grid gap-4 sm:grid-cols-2">
              <label class="block">
                <span class="mb-2 block text-sm font-medium text-gray-700">Password</span>
                <input name="password" type="password" required placeholder="Password" class="h-11 w-full rounded-xl border border-gray-200 bg-gray-50 px-4 text-sm placeholder:text-gray-400 focus:border-[#4f6ef7] focus:bg-white focus:outline-none focus:ring-2 focus:ring-[#4f6ef7]/20">
                @error('password') <span class="mt-2 block text-xs font-medium text-red-500">{{ $message }}</span> @enderror
              </label>
              <label class="block">
                <span class="mb-2 block text-sm font-medium text-gray-700">Confirm</span>
                <input name="password_confirmation" type="password" required placeholder="Repeat" class="h-11 w-full rounded-xl border border-gray-200 bg-gray-50 px-4 text-sm placeholder:text-gray-400 focus:border-[#4f6ef7] focus:bg-white focus:outline-none focus:ring-2 focus:ring-[#4f6ef7]/20">
              </label>
            </div>

            <label class="flex items-start gap-2 text-sm leading-5 text-gray-500">
              <input name="terms" type="checkbox" required class="mt-0.5 h-4 w-4 rounded border-gray-300 text-[#4f6ef7] focus:ring-[#4f6ef7]">
              I agree to receive inspection alerts and accept the workspace terms.
            </label>

            <button type="submit" class="flex h-11 w-full items-center justify-center gap-2 rounded-xl bg-[#4f6ef7] px-4 text-sm font-medium text-white shadow-sm transition-colors hover:bg-[#3d5ce0]">
              Create account
              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
            </button>
          </form>

          <div class="my-5 flex items-center gap-3">
            <div class="h-px flex-1 bg-gray-100"></div>
            <span class="text-xs font-medium uppercase tracking-wide text-gray-400">{{ __('or') }}</span>
            <div class="h-px flex-1 bg-gray-100"></div>
          </div>

          @include('auth.partials.google-button')

          <p class="mt-6 text-center text-sm text-gray-500">
            Already have an account?
            <a href="{{ route('login') }}" class="font-medium text-[#4f6ef7] hover:text-[#3d5ce0]">Sign in</a>
          </p>
        </div>
      </div>
    </section>

    <section class="relative hidden overflow-hidden border-l border-gray-100 bg-white p-8 lg:flex lg:flex-col">
      <div class="absolute left-0 top-0 h-72 w-72 -translate-x-24 -translate-y-24 rounded-full bg-[#4f6ef7]/10 blur-3xl"></div>
      <div class="absolute bottom-20 right-10 h-56 w-56 rounded-full bg-emerald-500/10 blur-3xl"></div>

      <a href="{{ route('dashboard') }}" class="relative ml-auto flex w-fit items-center gap-3">
        <div class="flex flex-col text-right">
          <span class="text-base font-semibold tracking-tight">InspectAI</span>
          <span class="text-[11px] text-gray-400">Property Intelligence</span>
        </div>
        <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-[#4f6ef7]">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg>
        </div>
      </a>

      <div class="relative mt-14 rounded-2xl border border-[#c7d3fc] bg-gradient-to-br from-[#eff3fe] via-[#e8eefe] to-[#eff3fe] p-6">
        <div class="flex items-center gap-2">
          <div class="flex h-7 w-7 items-center justify-center rounded-lg bg-[#4f6ef7]">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z"></path><path d="M17 4a2 2 0 0 0 2 2a2 2 0 0 0 -2 2a2 2 0 0 0 -2 -2a2 2 0 0 0 2 -2"></path></svg>
          </div>
          <span class="text-xs font-medium text-[#4f6ef7]">Workspace preview</span>
        </div>
        <h1 class="mt-4 text-4xl font-bold tracking-tight text-gray-950 xl:text-5xl">Start inspecting properties with AI support.</h1>
        <p class="mt-4 max-w-lg text-sm leading-6 text-gray-500">Create an account to manage inspections, document findings, export reports, and track cost estimates from one dashboard.</p>
      </div>

      <div class="relative mt-6 space-y-4">
        <div class="auth-card rounded-2xl border border-gray-100 bg-white p-5 shadow-sm">
          <div class="mb-4 flex items-center justify-between">
            <div>
              <p class="text-sm font-semibold text-gray-900">Inspection setup</p>
              <p class="text-xs text-gray-400">Onboarding progress</p>
            </div>
            <span class="rounded-lg bg-emerald-50 px-2 py-1 text-xs font-medium text-emerald-600">Ready</span>
          </div>
          <div class="h-2 overflow-hidden rounded-full bg-gray-100">
            <div class="progress-bar h-full w-[72%] rounded-full bg-[#4f6ef7]"></div>
          </div>
        </div>
      </div>
    </section>
  </main>
</body>
</html>
