{% extends 'public_base.html' %}
{% load static %}
{% block title %}Help & Support{% endblock %}
{% block content %}

<section class="bg-black py-16">

  <div class="w-full mx-auto text-center py-20 px-4">
    <h1 class="text-4xl md:text-5xl font-bold text-white mb-4">
      Schedule Appointment
    </h1>
    <p class="text-white/90 max-w-5xl mx-auto text-base md:text-lg">
     You are curious and want to learn more, or you have a question about using B-42? Book an appointment with us directly!
    </p>
  </div>

<div class="max-w-4xl mx-auto bg-white rounded-lg shadow-lg overflow-hidden grid grid-cols-1 md:grid-cols-2">

  <!-- LEFT: Calendar -->
  <div class="bg-[#425a70] text-white p-8">
    
    <!-- Icon -->
<div class="flex justify-center mb-4">
  <div class="w-20 h-20  rounded-full flex items-center justify-center">
    <img
      src="{% static 'images/logo.png' %}"
      alt="B42 Logo"
      class=" object-contain"
    />
  </div>
</div>
    

    <h2 class="text-center text-xl font-semibold mb-1">
      Meet with Andreas Gschaider
    </h2>

    <p class="text-center text-lg font-bold mb-6">
      January 2026
    </p>

    <!-- Weekdays -->
    <div class="grid grid-cols-7 text-xs text-center mb-3 font-semibold">
      <span>SUN</span><span>MON</span><span>TUE</span>
      <span>WED</span><span>THU</span><span>FRI</span><span>SAT</span>
    </div>

    <!-- Calendar Days -->
    <div class="grid grid-cols-7 gap-2 text-center text-sm">
      <span></span><span></span><span></span><span></span>
      <span class="opacity-50">1</span>
      <span class="opacity-50">2</span>
      <span class="opacity-50">3</span>

      <span class="opacity-50">4</span>
      <span class="opacity-50">5</span>
      <span class="opacity-50">6</span>
      <span class="opacity-50">7</span>
      <span class="opacity-50">8</span>
      <span class="opacity-50">9</span>
      <span class="opacity-50">10</span>

      <span class="opacity-50">11</span>
      <span class="opacity-50">12</span>

      <!-- Active date -->
      <button
        onclick="selectDate('January 13, 2026')"
        class="bg-white text-[#425a70] rounded-full w-9 h-9 mx-auto font-semibold">
        13
      </button>

      <span class="font-semibold">14</span>
      <span class="opacity-50">15</span>
      <span class="opacity-50">16</span>
      <span class="opacity-50">17</span>

      <span class="opacity-50">18</span>
      <span class="opacity-50">19</span>
      <span class="font-semibold">20</span>
      <span class="font-semibold">21</span>
      <span class="font-semibold">22</span>
      <span class="opacity-50">23</span>
      <span class="opacity-50">24</span>

      <span class="opacity-50">25</span>
      <span class="opacity-50">26</span>
      <span class="font-semibold">27</span>
      <span class="font-semibold">28</span>
      <span class="font-semibold">29</span>
      <span class="opacity-50">30</span>
      <span class="opacity-50">31</span>
    </div>
  </div>

  <!-- RIGHT: Time Slots -->
  <div class="p-8">

    <!-- Duration -->
    <h3 class="font-semibold mb-3">How long do you need?</h3>
    <div class="flex border rounded overflow-hidden w-fit mb-6">
      <button class="px-6 py-2 bg-gray-200 text-sm font-medium">30 mins</button>
      <button class="px-6 py-2 bg-white border-l text-sm">1 hour</button>
    </div>

    <!-- Selected Date -->
    <h3 class="font-semibold mb-1">What time works best?</h3>
    <p class="text-sm text-gray-600 mb-1">
      Showing times for <span id="selectedDate" class="font-semibold">January 13, 2026</span>
    </p>
    <p class="text-xs text-blue-600 mb-4">
      UTC +05:30 New Delhi, Mumbai, Calcutta
    </p>

    <!-- Time slots -->
    <div class="max-h-80 overflow-y-auto space-y-3 pr-2">
      <button onclick="selectTime(this)" class="w-full border rounded py-3 hover:bg-gray-50">6:00 pm</button>
      <button onclick="selectTime(this)" class="w-full border rounded py-3 hover:bg-gray-50">6:15 pm</button>
      <button onclick="selectTime(this)" class="w-full border rounded py-3 hover:bg-gray-50">6:30 pm</button>
      <button onclick="selectTime(this)" class="w-full border rounded py-3 hover:bg-gray-50">6:45 pm</button>
      <button onclick="selectTime(this)" class="w-full border rounded py-3 hover:bg-gray-50">7:00 pm</button>
      <button onclick="selectTime(this)" class="w-full border rounded py-3 hover:bg-gray-50">7:15 pm</button>
    </div>
  </div>
</div>

</section>

<section class="bg-[#6f7df5] w-full">

  <div class="max-w-6xl mx-auto px-4 py-28 text-center">

    <!-- Small top text -->
    <p class="text-white text-sm font-semibold tracking-wide uppercase mb-4 text-white">
    Ready to start your B-42 journey?
    </p>

    <!-- Main heading -->
    <h1 class="text-white text-4xl md:text-5xl font-extrabold mb-4 text-white">
      The Soccer Training Platform
    </h1>

    <!-- Subheading -->
    <p class="text-white/90 text-sm md:text-base font-semibold mb-10 uppercase text-white">
      Get everything you need for Team success
    </p>

    <!-- CTA Button -->
    <a
      href="#"
      class="inline-flex items-center gap-3 bg-lime-400 hover:bg-lime-500 text-black font-semibold px-8 py-3 rounded-full transition"
    >
      <span class="inline-flex items-center justify-center w-5 h-5 bg-black rounded-full">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="w-3 h-3 text-lime-400 ml-[1px]"
          fill="currentColor"
          viewBox="0 0 16 16"
        >
          <path d="M6 4l6 4-6 4V4z" />
        </svg>
      </span>
     Start now
    </a>

  </div>

</section>


<!-- JS -->
<script>
  function selectDate(date) {
    document.getElementById("selectedDate").innerText = date;
  }

  function selectTime(btn) {
    document.querySelectorAll("button").forEach(b => b.classList.remove("bg-blue-50", "border-blue-500"));
    btn.classList.add("bg-blue-50", "border-blue-500");
    alert("Time selected: " + btn.innerText);
  }
</script>

{% endblock %}





































{% comment %} <section class="min-h-screen bg-gradient-to-b from-[#1a1a1a] to-[#111] flex items-center justify-center px-4">

  <div class="w-full max-w-md text-center text-white">

    <!-- Heading -->
    <h1 class="text-2xl font-semibold mb-2">Log in</h1>
    <p class="text-sm text-gray-300 mb-8">
      Register in the CoachZone
    </p>

    <!-- Email -->
    <div class="mb-4">
      <input
        type="email"
        placeholder="E-mail address"
        class="w-full bg-transparent border border-gray-600 rounded-full px-5 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-lime-400"
      />
    </div>

    <!-- Password -->
    <div class="relative mb-2">
      <input
        type="password"
        placeholder="password"
        class="w-full bg-transparent border border-gray-600 rounded-full px-5 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-lime-400"
      />
      <span class="absolute right-4 top-1/2 -translate-y-1/2 text-gray-400 cursor-pointer">
        👁
      </span>
    </div>

    <!-- Forgot -->
    <div class="text-right mb-6">
      <a href="#" class="text-lime-400 text-xs hover:underline">
        Forgotten your password?
      </a>
    </div>

    <!-- Login Button -->
    <button
      class="w-full bg-gray-600 text-black font-semibold py-3 rounded-full mb-6 cursor-not-allowed opacity-70"
      disabled
    >
      LOG IN
    </button>

    <!-- Register -->
    <p class="text-sm text-gray-300 mb-3">
      Don't have an account yet?
    </p>

    <button
      class="w-full bg-lime-400 hover:bg-lime-500 text-black font-bold py-3 rounded-full mb-6 transition"
    >
      CREATE TEAM AND ACCOUNT NOW
    </button>

    <!-- Divider -->
    <div class="flex items-center gap-4 mb-6">
      <div class="flex-1 h-px bg-gray-600"></div>
      <span class="text-sm text-gray-400">or</span>
      <div class="flex-1 h-px bg-gray-600"></div>
    </div>

    <!-- Social Buttons -->
    <div class="space-y-3">

      <!-- Google -->
      <button
        class="w-full bg-white text-black py-2 rounded-full flex items-center justify-center gap-3 text-sm font-medium"
      >
        <img src="https://www.svgrepo.com/show/475656/google-color.svg" class="w-5 h-5" />
        Sign in with Google
      </button>

      <!-- Facebook -->
      <button
        class="w-full bg-[#1877f2] text-white py-2 rounded-full flex items-center justify-center gap-3 text-sm font-medium"
      >
        <img src="https://www.svgrepo.com/show/475647/facebook-color.svg" class="w-5 h-5" />
        Log in with Facebook
      </button>

      <!-- Apple -->
      <button
        class="w-full bg-black text-white py-2 rounded-full flex items-center justify-center gap-3 text-sm font-medium"
      >
        <img src="https://www.svgrepo.com/show/511330/apple.svg" class="w-5 h-5 invert" />
        Sign in with Apple
      </button>

    </div>

  </div>

</section> {% endcomment %}