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

{% block title %}B42 India solution for coaches{% endblock %}


{% block content %}

<section class="bg-black py-20 relative overflow-hidden">
    <!-- Decorative lime curved lines background (top-right) -->
    <div class="absolute top-0 right-0 w-full max-w-2xl opacity-30 pointer-events-none -z-10">
        <img 
            src="https://www.shutterstock.com/image-vector/lime-green-wavy-lines-on-600nw-2639041765.jpg" 
            alt="" 
            class="w-full h-auto object-cover"
        >
    </div>

    <div class="max-w-7xl mx-auto px-6 relative z-10">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <!-- Left: Text Content -->
            <div class="space-y-10 text-white">
                <h1 class="text-5xl lg:text-6xl font-bold leading-tight">
                    Your digital<br>assistant coach
                </h1>
                <p class="text-xl text-gray-300">
                    The app for successful coaches & teams that play to win.
                </p>
                <div class="flex flex-wrap gap-6">
                    <a href="{% url 'team_create' %}" class="inline-block px-8 py-4 bg-gradient-to-r from-purple-500 to-blue-500 text-white font-semibold rounded-xl hover:from-purple-600 hover:to-blue-600 transition duration-300">
                        Start now 
                    </a>
                      <a href="#team" class="inline-block px-8 py-4 bg-white text-gray-900 font-semibold rounded-xl hover:bg-gray-100 transition duration-300 ">
                        Learn more
                    </a>
                </div>
            </div>

            <!-- Right: Layered Images -->
            <div class="relative h-[500px] lg:h-[650px]">
                <!-- Back layer: team1a (aerial team huddle - shaped like a circle) -->
             <div class="absolute inset-0 overflow-hidden shadow-2xl opacity-90">
                <img 
                    src="{% static 'images/team1.jpg' %}"  
                    alt="Soccer team in motivational huddle circle on the field"
                    class="w-full h-full object-cover rounded-tl-[25%]"
                >
            </div> 
            <!-- Front layer: team1 (coach with tactical board) - positioned to overlap nicely -->
            <div class="absolute bottom-0 right-[-80px] w-full max-w-2xl rounded-3xl">
                <img 
                    src="{% static 'images/team1.png' %}"  
                    alt="Soccer coach explaining tactics with board to players"
                    class="w-full h-full object-cover"
                >
            </div>
            
            </div>
        </div>
    </div>
</section>
<section class="py-16 px-4 max-w-6xl mx-auto">
        <div class="text-center mb-8">
            <p class="text-sm text-blue-600 mb-4">Have time for what really counts:</p>
            <h2 class="text-4xl font-bold text-gray-900">Make your team better and celebrate success</h2>
        </div>

        <p class="text-center text-lg mb-12 max-w-3xl mx-auto">
            So that you can develop your full potential as a coach and get the best out of your team, we provide you with your digital assistant trainer. It saves you valuable time and takes care of:
        </p>

        <div class="grid md:grid-cols-3 gap-12">
            <!-- Organization -->
            <div class="text-center">
                <div class="flex justify-center mb-6">
                    <div class="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center">
                        <svg class="w-10 h-10 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                        </svg>
                    </div>
                </div>
                <h3 class="text-xl font-semibold mb-2">organization</h3>
                <p class="text-sm text-gray-600 mb-4">He organizes your team.<br><span class="text-green-600 font-medium">Free. 24/7.</span></p>
                <p class="text-sm text-gray-600">Squad planning, team calendar, training participation and much more.</p>
            </div>

            <!-- Motivation -->
            <div class="text-center">
                <div class="flex justify-center mb-6">
                    <div class="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center">
                        <svg class="w-10 h-10 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
                        </svg>
                    </div>
                </div>
                <h3 class="text-xl font-semibold mb-2">motivation</h3>
                <p class="text-sm text-gray-600 mb-4">It motivates your team.<br><span class="text-green-600 font-medium">Every day.</span></p>
                <p class="text-sm text-gray-600">Cohesion and motivation through an open feedback culture and leader boards.</p>
            </div>

            <!-- Team Development -->
            <div class="text-center">
                <div class="flex justify-center mb-6">
                    <div class="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center">
                        <svg class="w-10 h-10 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                        </svg>
                    </div>
                </div>
                <h3 class="text-xl font-semibold mb-2">team development</h3>
                <p class="text-sm text-gray-600 mb-4">He trains your team.<br><span class="text-green-600 font-medium">All year round.</span></p>
                <p class="text-sm text-gray-600">Individual training plans for athletics, technique and after injuries.</p>
            </div>
        </div>
    </section>
    <section class="max-w-6xl mx-auto mt-28  mb-12 overflow-hidden flex flex-col lg:flex-row">
        <!-- Image Section -->
        <div class="w-full lg:w-1/2 relative">
            <img 
                src="{% static 'images/team2.jpg' %}" 
                alt="Tennis coach celebrating victory with arms raised" 
                class="w-full h-full object-cover"
            >
        </div>

        <!-- Content Section -->
        <div class="w-full lg:w-1/2 p-10 lg:p-16 flex flex-col justify-center bg-gray-50">
            <p class="text-blue-500 text-sm font-semibold mb-4">Try it now</p>
            <h2 class="text-3xl lg:text-4xl font-bold text-gray-900 mb-8">
                Get your assistant coach on the team
            </h2>

            <ul class="space-y-6 mb-10">
                <li class="flex items-start">
                    <span class="text-purple-500 text-2xl mr-4 mt-1">✔</span>
                    <p class="text-gray-700 text-lg">
                        7-day trial period for your assistant trainer — get one week of free support
                    </p>
                </li>
                <li class="flex items-start">
                    <span class="text-purple-500 text-2xl mr-4 mt-1">✔</span>
                    <p class="text-gray-700 text-lg">
                        Your assistant trainer shows you all features — you keep full control
                    </p>
                </li>
                <li class="flex items-start">
                    <span class="text-purple-500 text-2xl mr-4 mt-1">✔</span>
                    <p class="text-gray-700 text-lg">
                        Save yourself time: Let your assistant coach organize, motivate and develop your team
                    </p>
                </li>
            </ul>

            <a href="{% url 'team_create' %}"
               class="inline-block bg-lime-400 hover:bg-lime-500 text-black font-bold text-xl py-4 px-10 rounded-lg shadow-lg transition duration-300 w-fit">
              Try it now for free
            </a>
        </div>
    </section>

    <section id="team" class="max-w-6xl mx-auto mt-28  mb-12  overflow-hidden flex flex-col lg:flex-row ">
        <!-- Content Section (Left) -->
        <div class="w-full lg:w-1/2 p-10 lg:p-20 flex flex-col justify-center">
            <p class="text-blue-500 text-sm font-semibold mb-4">Fit team - without injuries</p>
            <h2 class="text-3xl lg:text-4xl font-bold text-gray-900 mb-8">
                Get the most out of your preparation!
            </h2>
            <p class="text-gray-700 text-lg mb-10 leading-relaxed">
                In preparation for the second half, the foundation for success is laid! With individual training plans and optimal load management, our assistant trainer will assist you during this phase - and will also be there for you in case of injuries.
            </p>
            <a href="{% url 'team_create' %}"
               class="inline-block bg-lime-400 hover:bg-lime-500 text-black font-bold text-xl py-4 px-10 rounded-lg shadow-lg transition duration-300 w-fit">
              Try it now for free
            </a>

        </div>

        <!-- Image Section (Right) -->
        <div class="w-full lg:w-1/2 relative bg-gray-50 flex items-center justify-center p-8">
            <img 
                src="{% static 'images/team3.png' %}" 
                alt="Mockup of smartphones displaying dark-themed sports coaching app with dashboard, training plans, and player stats" 
                class="w-full max-w-lg object-contain drop-shadow-2xl"
            >
        </div>
    </section>

<section class="max-w-7xl mt-36 mb-28 mx-auto">
    <!-- Top Intro -->
    <div class="text-left mb-10">
      <p class="text-blue-600 text-sm font-semibold mb-2">
        Organization, motivation & team development
      </p>
      <h2 class="text-2xl md:text-4xl font-bold text-gray-900 leading-tight">
        This is what your digital assistant trainer can do<br />
        for you
      </h2>
      <p class="text-gray-700 text-lg mt-6 max-w-3xl">
        Focus on what counts: making your team better and celebrating success together.
        Your digital assistant trainer will do the rest.
      </p>
    </div>

    <!-- Main Layout -->
    <div class="flex flex-col lg:flex-row items-center gap-12 lg:gap-20">
      
      <!-- LEFT IMAGE AREA -->
      <div class="w-full lg:w-1/2 flex justify-center">
        <img
          id="featureImage"
          src="{% static 'images/team3.png' %}"
          class="max-w-full h-auto transition-opacity duration-500 opacity-100 drop-shadow-2xl"
        />
      </div>

      <!-- RIGHT TEXT AREA -->
      <div class="w-full lg:w-1/2 space-y-10 border-l-4 border-blue-600 pl-6">
        
        <div class="featureItem cursor-pointer" data-img="{% static 'images/team3.png' %}">
          <h3 class="text-2xl font-bold text-gray-900 mb-2">Everything you need to organize it's done.</h3>
          <p class="text-gray-700">
            Training a soccer team always involves planning, administration and organization.
            Topics that take a lot of time but don’t make any player better.
          </p>
        </div>

        <div class="featureItem cursor-pointer opacity-60" data-img="{% static 'images/team4.png' %}">
          <h3 class="text-2xl font-bold text-gray-900 mb-2">Let your team's fire burn.</h3>
          <p class="text-gray-700">
            Increase training participation. Through transparent communication and a
            motivating and performance-related feedback culture.
          </p>
        </div>

        <div class="featureItem cursor-pointer opacity-60" data-img="{% static 'images/team5.png' %}">
          <h3 class="text-2xl font-bold text-gray-900 mb-2">Get the most out of your players.</h3>
          <p class="text-gray-700">
            Successful coaches not only make their team better, but also every team member.
            Professional coaches have an entire coaching staff for this. You have your
            digital assistant trainer.
          </p>
        </div>

      </div>
    </div>
  </section>
<section class="bg-black py-28">
   <div class="max-w-7xl mx-auto  ">
    <!-- Heading -->
    <div class="text-center mb-12">
      <h2 class="text-3xl text-white md:text-4xl font-bold">A good assistant coach is priceless. Until now.</h2>
      <p class="text-gray-300 mt-2">7-day free trial period. No credit card required!</p>
    </div>

    <!-- Pricing Cards -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-10">
      
      <!-- Free -->
      <div class="bg-white text-gray-900 rounded-2xl px-8 py-10 shadow-xl flex flex-col">
        <h3 class="text-xl font-semibold mb-3">Free</h3>
        <p class="text-4xl font-bold">€0</p>
        <p class="text-sm text-gray-600 mb-6">Free forever</p>

         <a href="{% url 'team_create' %}"
            class="block w-full py-3 rounded-md bg-indigo-500 text-white font-semibold hover:bg-indigo-600 transition text-center">
           Get started now
         </a>

        <div class="border-t my-6"></div>

        <ul class="space-y-3 text-gray-700">
          <li class="flex items-start gap-2"><span class="text-lime-500">✔</span> Team calendar</li>
          <li class="flex items-start gap-2"><span class="text-lime-500">✔</span> Event feedback</li>
          <li class="flex items-start gap-2"><span class="text-lime-500">✔</span> Announcements</li>
          <li class="flex items-start gap-2"><span class="text-lime-500">✔</span> Team Treasury</li>
          <li class="flex items-start gap-2"><span class="text-lime-500">✔</span> Team absences</li>
        </ul>

        <div class="border-t my-6"></div>
        <p class="text-gray-500 text-sm">Access for a team of 25 players</p>
      </div>

      <!-- Basic -->
      <div class="bg-white text-gray-900 rounded-2xl px-8 py-10 shadow-xl flex flex-col">
        <h3 class="text-xl font-semibold mb-3">Basic</h3>
        <p class="text-4xl font-bold">€299.90</p>
        <p class="text-sm text-gray-600 mb-6">Annual payment</p>

         <a href="{% url 'team_create' %}"
            class="block w-full py-3 rounded-md bg-indigo-500 text-white font-semibold hover:bg-indigo-600 transition text-center">
           Get started now
         </a>

        <div class="border-t my-6"></div>

        <ul class="space-y-3 text-gray-700">
          <li class="flex items-start gap-2"><span class="text-lime-500">✔</span> Everything from Free</li>
          <li class="flex items-start gap-2"><span class="text-lime-500">✔</span> Athletic, Technical & Rehab Training</li>
          <li class="flex items-start gap-2"><span class="text-lime-500">✔</span> Individual performance tests & workouts</li>
          <li class="flex items-start gap-2"><span class="text-lime-500">✔</span> Team challenges</li>
          <li class="flex items-start gap-2"><span class="text-lime-500">✔</span> Team leaderboards</li>
        </ul>

        <div class="border-t my-6"></div>
        <p class="text-gray-500 text-sm">Access for a team of 25 players</p>
      </div>

      <!-- Pro -->
      <div class="bg-white text-gray-900 rounded-2xl px-8 py-10 shadow-xl flex flex-col relative">
        
        <!-- Discount Badge -->
        <span class="absolute top-3 right-4 text-xs bg-lime-400 text-black font-bold px-2 py-1 rounded">50% OFF</span>
        <span class="absolute top-3 left-4 text-xs bg-indigo-100 text-indigo-700 font-bold px-2 py-1 rounded">Popular</span>

        <h3 class="text-xl font-semibold mb-3">Pro</h3>

        <p class="text-4xl font-bold">€499.90
          <span class="text-gray-400 line-through text-lg">€999</span>
        </p>

        <p class="text-sm text-gray-600 mb-6">Annual payment</p>

         <a href="{% url 'team_create' %}"
            class="block w-full py-3 rounded-md bg-indigo-500 text-white font-semibold hover:bg-indigo-600 transition text-center">
           Get started now
         </a>

        <div class="border-t my-6"></div>

        <ul class="space-y-3 text-gray-700">
          <li class="flex items-start gap-2"><span class="text-lime-500">✔</span> Everything from Basic</li>
          <li class="flex items-start gap-2"><span class="text-lime-500">✔</span> Personalized training plans</li>
          <li class="flex items-start gap-2"><span class="text-lime-500">✔</span> Individual performance tests & workouts</li>
          <li class="flex items-start gap-2"><span class="text-lime-500">✔</span> Load control</li>
          <li class="flex items-start gap-2"><span class="text-lime-500">✔</span> Workout editor</li>
        </ul>

        <!-- Blue highlight box -->
        <div class="bg-indigo-100 text-indigo-700 rounded-lg p-4 mt-6 font-semibold text-sm">
          Plus: Premium access for all players<br>
          <span class="font-normal">25x B42 India Premium App included<br>(Value: 25 × 99.99€ = 2499.75€)</span>
        </div>

        <div class="border-t my-6"></div>
        <p class="text-gray-500 text-sm">Access for a team of 25 players</p>
      </div>

    </div>

    <!-- Bottom banner -->
    <div class="mt-14 bg-white text-center rounded-2xl py-10 px-6 border border-white/10">
      <p class="text-lg font-medium">Are you looking for a solution for the entire club or an academy?</p>
      <p class="text-gray-300 mt-1">Individualized offers for the entire club/academy and all teams</p>
        <a href="{% url 'team_create' %}"
           class="inline-block mt-6 px-6 py-3 bg-indigo-500 hover:bg-indigo-600 rounded-md font-semibold text-white transition">
          Get in touch
        </a>
    </div>
 </div>
  </section>

<!-- =============================
   TESTIMONIALS + CTA SECTION
============================= -->
<section class="bg-[#F5F5F7] py-20 px-6">
  <div class="max-w-7xl mx-auto">

    <!-- Heading -->
    <h2 class="text-center text-2xl md:text-3xl font-semibold mb-12">
      Visionary trainers &amp; clubs trust us
    </h2>

    <!-- Slider container -->
    <div class="overflow-x-auto scrollbar-hide">
      <div class="flex space-x-6 min-w-max pb-4">

        <!-- Testimonial Card -->
        <div class="bg-white shadow-sm rounded-2xl p-6 w-80 flex-shrink-0">
          <div class="text-yellow-400 mb-2">★★★★★</div>
          <p class="text-gray-700 text-sm mb-6">
            “Football training starts at home. The progress of our Academy players
            has been unbelievable — that's exactly what we've been missing.”
          </p>
          <div class="flex items-center gap-3">
            <img src="https://via.placeholder.com/40" class="w-8 h-8 rounded-full" alt="">
            <div>
              <p class="text-gray-900 text-sm font-semibold">Leonardo Pinto</p>
              <p class="text-xs text-gray-500">ELLE FOOTBALL ACADEMY</p>
            </div>
          </div>
        </div>

        <!-- Duplicate this card for more testimonials -->
        <div class="bg-white shadow-sm rounded-2xl p-6 w-80 flex-shrink-0">
          <div class="text-yellow-400 mb-2">★★★★★</div>
          <p class="text-gray-700 text-sm mb-6">
            “In team training, the boys naturally prefer to be on the field than
            stability workouts. With B42 India, we outsource this &amp; save time.”
          </p>
          <div class="flex items-center gap-3">
            <img src="https://via.placeholder.com/40" class="w-8 h-8 rounded-full" alt="">
            <div>
              <p class="text-gray-900 text-sm font-semibold">Fabian Stierle</p>
              <p class="text-xs text-gray-500">DFI Bad Aibling</p>
            </div>
          </div>
        </div> <div class="bg-white shadow-sm rounded-2xl p-6 w-80 flex-shrink-0">
          <div class="text-yellow-400 mb-2">★★★★★</div>
          <p class="text-gray-700 text-sm mb-6">
            “Football training starts at home. The progress of our Academy players
            has been unbelievable — that's exactly what we've been missing.”
          </p>
          <div class="flex items-center gap-3">
            <img src="https://via.placeholder.com/40" class="w-8 h-8 rounded-full" alt="">
            <div>
              <p class="text-gray-900 text-sm font-semibold">Leonardo Pinto</p>
              <p class="text-xs text-gray-500">ELLE FOOTBALL ACADEMY</p>
            </div>
          </div>
        </div>

        <!-- Duplicate this card for more testimonials -->
        <div class="bg-white shadow-sm rounded-2xl p-6 w-80 flex-shrink-0">
          <div class="text-yellow-400 mb-2">★★★★★</div>
          <p class="text-gray-700 text-sm mb-6">
            “In team training, the boys naturally prefer to be on the field than
            stability workouts. With B42 India, we outsource this &amp; save time.”
          </p>
          <div class="flex items-center gap-3">
            <img src="https://via.placeholder.com/40" class="w-8 h-8 rounded-full" alt="">
            <div>
              <p class="text-gray-900 text-sm font-semibold">Fabian Stierle</p>
              <p class="text-xs text-gray-500">DFI Bad Aibling</p>
            </div>
          </div>
        </div> <div class="bg-white shadow-sm rounded-2xl p-6 w-80 flex-shrink-0">
          <div class="text-yellow-400 mb-2">★★★★★</div>
          <p class="text-gray-700 text-sm mb-6">
            “Football training starts at home. The progress of our Academy players
            has been unbelievable — that's exactly what we've been missing.”
          </p>
          <div class="flex items-center gap-3">
            <img src="https://via.placeholder.com/40" class="w-8 h-8 rounded-full" alt="">
            <div>
              <p class="text-gray-900 text-sm font-semibold">Leonardo Pinto</p>
              <p class="text-xs text-gray-500">ELLE FOOTBALL ACADEMY</p>
            </div>
          </div>
        </div>

        <!-- Duplicate this card for more testimonials -->
        <div class="bg-white shadow-sm rounded-2xl p-6 w-80 flex-shrink-0">
          <div class="text-yellow-400 mb-2">★★★★★</div>
          <p class="text-gray-700 text-sm mb-6">
            “In team training, the boys naturally prefer to be on the field than
            stability workouts. With B42 India, we outsource this &amp; save time.”
          </p>
          <div class="flex items-center gap-3">
            <img src="https://via.placeholder.com/40" class="w-8 h-8 rounded-full" alt="">
            <div>
              <p class="text-gray-900 text-sm font-semibold">Fabian Stierle</p>
              <p class="text-xs text-gray-500">DFI Bad Aibling</p>
            </div>
          </div>
        </div>

        <!-- Add as many as needed -->
        <!-- ... copy & customize ... -->
      </div>
    </div>

    <!-- Navigation (static demo icons) -->
    <div class="flex justify-center gap-3 mt-4">
      <button class="w-8 h-8 grid place-items-center bg-white shadow rounded-full hover:bg-gray-100">
        ←
      </button>
      <button class="w-8 h-8 grid place-items-center bg-white shadow rounded-full hover:bg-gray-100">
        →
      </button>
    </div>

<!-- CTA Banner -->
<div class="mt-20 max-w-6xl mx-auto bg-indigo-500 text-white rounded-2xl p-6
            flex flex-col lg:flex-row items-center justify-between gap-10">
  
  <!-- CTA Text -->
  <div class="max-w-sm flex-1">
    <h3 class="text-2xl md:text-3xl font-semibold mb-4">Start your free trial now</h3>
    <p class="text-white/80 text-sm mb-6">
      Try it out: Use your digital assistant trainer and save yourself time.
      It’s free.
    </p>
     <a href="{% url 'team_create' %}"
        class="inline-block px-5 py-3 bg-black rounded-md text-white text-sm font-semibold hover:bg-gray-900 transition">
       Try it now
     </a>
  </div>

  <!-- CTA Image -->
  <img 
    src="{% static 'images/team3.png' %}" 
    class="rounded-xl w-full lg:w-1/2"
    alt="app preview"
  />
</div>
  </div>
</section>

<script>
  const featureItems = document.querySelectorAll(".featureItem");
  const featureImage = document.getElementById("featureImage");

  featureItems.forEach(item => {
    item.addEventListener("click", () => {
      const newImg = item.getAttribute("data-img");

      // Fade effect
      featureImage.style.opacity = 0;
      setTimeout(() => {
        featureImage.src = newImg;
        featureImage.style.opacity = 1;
      }, 200);

      // Active visual state
      featureItems.forEach(f => f.classList.add("opacity-60"));
      item.classList.remove("opacity-60");
    });
  });
</script>
{% endblock %}