{% extends 'public_base.html' %}
{% load static %}

{% block title %}Book an Appointment - RegisterYourStartup.com{% endblock %}
{% block meta_description %}Schedule a consultation with our business experts. Book an appointment for personalized guidance on incorporation, compliance, and business growth strategies.{% endblock %}

{% block content %}

<section class="bg-black py-16">
  <div class="w-full max-w-md py-16 px-4 m-auto">

    <!-- Header -->
        <div class="flex items-center gap-3 mb-6 text-white">
          <button
            id="backBtn"
            onclick="prevStep()"
            class="hidden text-2xl font-bold">
            ←
          </button>
        
          <h1 class="font-semibold text-lg">
            B42 India for teams - Create a team now for free
          </h1>
        </div>
    
        <!-- Progress -->
        <div class="w-full h-2 bg-gray-600 rounded-full overflow-hidden mb-10">
          <div
            id="progressBar"
            class="h-full bg-indigo-400 transition-all duration-300"
            style="width: 33%">
          </div>
        </div>
    
        <!-- STEP 1 -->
        <div class="step">
          <h2 class="text-center font-semibold mb-6 text-white">Who are you?</h2>
    
          <div class="space-y-4">
            <input class="input" placeholder="Your first name*" />
            <input class="input" placeholder="Your club*" />
            <input class="input" placeholder="Your team*" />
            <select class="input">
              <option>Category*</option>
            </select>
          </div>
        </div>
    
        <!-- STEP 2 -->
        <div class="step hidden">
          <h2 class="text-center font-semibold mb-6 text-white">
            What do you want to use B42 India for?
          </h2>
    
          <div class="space-y-4">
            <div onclick="selectCard(this)" class="card active text-white">
              <span>✔</span> Organize my team better
            </div>
            <div onclick="selectCard(this)" class="card text-white">
              📋 Increase training participation
            </div>
            <div onclick="selectCard(this)" class="card text-white">
              💪 Make my team fit
            </div>
          </div>
        </div>
    
        <!-- STEP 3 -->
        <div class="step hidden">
          <h2 class="text-center font-semibold mb-8 text-white">
            You can achieve this with B42 India!
          </h2>
    
          <div class="space-y-6 text-sm text-gray-300">
            <div class="border-b border-gray-700 pb-4">
              👍 <strong class="text-white">Organize yourself professionally</strong><br/>
              Digital appointment scheduling with absences
            </div>
    
            <div class="border-b border-gray-700 pb-4">
              💬 <strong class="text-white">Improve communication</strong><br/>
              Feedback for training and games
            </div>
    
            <div>
              📋 <strong class="text-white">Well prepared for team training</strong><br/>
              Share training plans with your team
            </div>
          </div>
        </div>
    
         <!-- STEP 4 -->
    
        <div class="step">
            <h2 class="text-center font-semibold mb-6 text-white">
            Who are you?
            </h2>
        
          <div class="space-y-4">
        
            <!-- Recommendation -->
            <div class="flex items-center gap-4 p-4 rounded-xl border border-white/20 bg-white/10 text-white cursor-pointer hover:bg-white/20 transition">
              <i class="fa-solid fa-thumbs-up text-green-400 text-xl"></i>
              <span class="font-medium">Recommendation</span>
            </div>
        
            <!-- B42 India India Player App -->
            <div class="flex items-center gap-4 p-4 rounded-xl border border-white/20 bg-white/10 text-white cursor-pointer hover:bg-white/20 transition">
              <i class="fa-solid fa-mobile-screen text-blue-400 text-xl"></i>
              <span class="font-medium">B42 India India Player App</span>
            </div>
        
            <!-- Instagram / Google Search -->
            <div class="flex items-center gap-4 p-4 rounded-xl border border-white/20 bg-white/10 text-white cursor-pointer hover:bg-white/20 transition">
              <i class="fa-brands fa-instagram text-pink-400 text-xl"></i>
              <span class="font-medium"> Google Search</span>
            </div>
        
            <div class="flex items-center gap-4 p-4 rounded-xl border border-white/20 bg-white/10 text-white cursor-pointer hover:bg-white/20 transition">
              <i class="fa-brands fa-google text-red-500 text-xl"></i>
              <span class="font-medium"> Google Search</span>
            </div>
        
            <!-- Other -->
            <div class="flex items-center gap-4 p-4 rounded-xl border border-white/20 bg-white/10 text-white cursor-pointer hover:bg-white/20 transition">
              <span class="font-medium">Other</span>
            </div>
        
          </div>
        </div>
        
            <!-- NEXT BUTTON -->
        <button onclick="nextStep()"
          class="w-full mt-10 bg-lime-400 text-black font-semibold py-4 rounded-full">
          NEXT
        </button>
    
      </div>

      
    
</section>

  <!-- Styles -->
  <style>
    .input {
      width: 100%;
      padding: 14px;
      border-radius: 12px;
      background: #1f1f1f;
      border: 1px solid #444;
      color: white;
    }

    .card {
      background: #2a2a2a;
      padding: 16px;
      border-radius: 14px;
      cursor: pointer;
      border: 1px solid transparent;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .card.active {
      border-color: #c6ff00;
      background: #303030;
    }
  </style>

  <!-- JS -->
<script>
  let step = 0
  const steps = document.querySelectorAll('.step')
  const bar = document.getElementById('progressBar')
  const backBtn = document.getElementById('backBtn')

  function update() {
    steps.forEach((s, i) => s.classList.toggle('hidden', i !== step))

    // Correct progress calculation
    const progress = (step / (steps.length - 1)) * 100
    bar.style.width = `${progress}%`

    backBtn.classList.toggle('hidden', step === 0)
  }

  function nextStep() {
    if (step < steps.length - 1) step++
    update()
  }

  function prevStep() {
    if (step > 0) step--
    update()
  }

  function selectCard(el) {
    document.querySelectorAll('.card').forEach(c => c.classList.remove('active'))
    el.classList.add('active')
  }

  // initialize on load
  update()
</script>
{% endblock%}