<x-guest-layout>
  <style>
    body {
      background: #f8faff;
      font-family: 'Inter', sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      overflow-x: hidden;
    }

    .card {
      background: #fff;
      border-radius: 16px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
      width: 100%;
      max-width: 420px;
      padding: 2rem;
      border: 1px solid #e5e7eb;
      transition: 0.3s ease;
    }

    .card:hover {
      box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
      transform: translateY(-2px);
    }

    .btn-primary {
      background: linear-gradient(to right, #2563eb, #3b82f6);
      color: white;
      font-weight: 600;
      transition: all 0.2s;
      width: 100%;
      border: none;
      border-radius: 8px;
      padding: 0.6rem 1rem;
    }

    .btn-primary:hover {
      background: linear-gradient(to right, #1e40af, #2563eb);
      transform: translateY(-1px);
    }

    @media (max-width: 640px) {
      .card {
        padding: 1.5rem;
        border-radius: 14px;
      }
      .card form input {
        font-size: 15px;
      }
      h1 {
        font-size: 1.25rem !important;
      }
      p {
        font-size: 0.9rem !important;
      }
      img {
        height: 2.5rem !important;
      }
    }
  </style>

  <div class="card fade-section">
 <div class="text-center mb-5">

  <video
    autoplay
    muted
    loop
    playsinline
    preload="auto"
    class="h-10 sm:h-12 mx-auto mb-3 object-contain"
  >
    <source src="{{ asset('public/assets/logo-nusaotp.webm') }}" type="video/webm">
  </video>


      <h1 class="text-2xl sm:text-3xl font-bold text-gray-800">Daftar Akun Baru</h1>
      <p class="text-gray-500 text-sm sm:text-base mt-1">Isi data di bawah untuk membuat akun. Pastikan menggunakan Email aktif.</p>
    </div>
       <div class="tabs">
    <button
        type="button"
        class="tab-btn {{ $activeTab == 'login' ? 'active' : '' }}"
        id="loginTab">
        Login
    </button>

    <button
        type="button"
        class="tab-btn {{ $activeTab == 'register' ? 'active' : '' }}"
        id="registerTab">
        Daftar
    </button>
</div>
     <form method="POST" action="{{ route('register') }}">
      @csrf
@if(isset($refCode) && $refCode)
  <input type="hidden" name="ref" value="{{ $refCode }}">
@endif

       <div>
        <x-input-label for="name" :value="__('Nama Lengkap')" />
        <x-text-input id="name"
          class="block mt-1 w-full border-gray-300 rounded-md focus:border-blue-500 focus:ring focus:ring-blue-100"
          type="text" name="name" :value="old('name')" required autofocus autocomplete="name" placeholder="Ex: Bahlil Agung"/>
        <x-input-error :messages="$errors->get('name')" class="mt-2" />
      </div>

      <!-- Email -->
      <div class="mt-4">
        <x-input-label for="email" :value="__('Email')" />
        <x-text-input id="email"
  class="block mt-1 w-full border-gray-300 rounded-md focus:border-blue-500 focus:ring focus:ring-blue-100"
  type="email"
  name="email"
  :value="old('email')"
  required
  autocomplete="username"
  placeholder="Ex: bahlilagung@gmail.com"
  pattern="^[a-zA-Z0-9._%+-]+@gmail\.com$"
  title="Hanya email @gmail.com yang diperbolehkan" />
        <x-input-error :messages="$errors->get('email')" class="mt-2" />
      </div>
 <div class="mt-4">
    <x-input-label for="phone" :value="__('Nomor WhatsApp')" />

    <x-text-input
        id="phone"
        class="block mt-1 w-full border-gray-300 rounded-md focus:border-blue-500 focus:ring focus:ring-blue-100"
        type="text"
        name="phone"
        :value="old('phone')"
        required
        placeholder="Ex: 08xxxxxxxxxx"
        pattern="^08[0-9]{8,13}$"
        title="Masukkan nomor WhatsApp valid"
    />

    <x-input-error :messages="$errors->get('phone')" class="mt-2" />
</div>
       <div class="mt-4">
        <x-input-label for="password" :value="__('Password')" />
        <x-text-input id="password"
          class="block mt-1 w-full border-gray-300 rounded-md focus:border-blue-500 focus:ring focus:ring-blue-100"
          type="password" name="password" required autocomplete="new-password" />
        <x-input-error :messages="$errors->get('password')" class="mt-2" />
      </div>

       <div class="mt-4">
        <x-input-label for="password_confirmation" :value="__('Konfirmasi Password')" />
        <x-text-input id="password_confirmation"
          class="block mt-1 w-full border-gray-300 rounded-md focus:border-blue-500 focus:ring focus:ring-blue-100"
          type="password" name="password_confirmation" required autocomplete="new-password" />
        <x-input-error :messages="$errors->get('password_confirmation')" class="mt-2" />
      </div>
 <div class="mt-4">
    <div class="cf-turnstile"
        data-sitekey="0x4AAAAAACFFz3ZX3qh8W-cP"
        data-theme="light">
    </div>

    @error('cf_turnstile')
        <p class="text-red-600 text-sm mt-2">{{ $message }}</p>
    @enderror
</div>


       <div class="mt-6">
        <button type="submit" class="btn-primary flex items-center justify-center gap-2">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16">
  <path fill="#ffffff" d="M1 4a4 4 0 1 1 8 0a4 4 0 0 1-8 0m4-2a2 2 0 1 0 0 4a2 2 0 0 0 0-4M0 12a3 3 0 0 1 3-3h4a3 3 0 0 1 3 3v4H0zm3-1a1 1 0 0 0-1 1v2h6v-2a1 1 0 0 0-1-1zm13-3h-2v2h-2V8h-2V6h2V4h2v2h2z"/>
</svg>

          Daftar
        </button>
      </div>

       <p class="text-center text-sm text-gray-500 mt-4">
        Sudah punya akun?
        <a href="{{ route('login') }}" class="text-blue-600 hover:underline font-medium">Masuk di sini</a>
      </p>
    </form>
  </div>

  <script>
    const observer = new IntersectionObserver(entries => {
      entries.forEach(e => {
        if (e.isIntersecting) e.target.classList.add('show');
      });
    }, { threshold: 0.2 });
    document.querySelectorAll('.fade-section').forEach(el => observer.observe(el));
  </script>
</x-guest-layout>
