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

{% block title %}
training
{% endblock %}

{% block content %}
<div class="min-h-screen bg-black flex flex-col justify-between text-white">

    <!-- Main Content Wrapper with same max-width as navbar -->
    <div class="w-full">
        <div class="max-w-7xl mx-auto px-6 lg:px-8">

            <!-- Upper Section -->
            <div class="flex flex-col md:flex-row items-center justify-between py-12 md:py-10 gap-12 lg:gap-20">
                <div class="max-w-lg text-left">
                    <p class="text-blue-400 text-sm mb-2">Training</p>
                    <h1 class="text-5xl md:text-6xl font-bold leading-tight">
                        Football-specific<br>
                        training via app
                    </h1>
                    <p class="text-gray-300 text-xl mt-6">
                        100% for soccer players
                    </p>
                </div>

               <div class="flex-shrink-0">
    <img 
        src="{% static 'images/training1.jpg' %}"
        alt="Soccer player celebrating on the field"
        class="w-[500px] h-auto object-contain"
    />
</div>
            </div>

        </div>
    </div>

 <section >
  <div class="mx-auto">
    <div class="relative overflow-hidden rounded-[70px] bg-[#6D77FF] py-24">
      <!-- Inner container that matches the main content width (same as navbar area) -->
      <div class="max-w-7xl mx-auto px-6 flex items-center justify-between">

        <!-- Left Text -->
        <div class="text-white max-w-md z-10">
          <h2 class="text-3xl md:text-[32px] font-medium leading-snug">
            Play the best season <br />
            of your life. 
          </h2>
        </div>

        <!-- Circle Button -->
        <button
          class="w-16 h-16 bg-[#D4FF24] rounded-full flex items-center justify-center z-10 shadow-md
                 hover:scale-125 transition-transform duration-300 ease-out shrink-0"
        >
          <span class="text-black text-xl">↗</span>
        </button>

      </div>

      <!-- Curved Lines Background - full bleed behind the rounded section -->
      <div
        class="absolute inset-0 opacity-70"
        style="
          background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%221440%22 height=%22840%22 viewBox=%220 0 1440 840%22%3E%3Cg fill=%22none%22 stroke=%22%23aabcff%22 stroke-width=%223%22 opacity=%220.3%22%3E%3Cpath d=%22M-300 950 Q700 -150 1700 950%22/%3E%3Cpath d=%22M-300 850 Q700 -250 1700 850%22/%3E%3Cpath d=%22M-300 750 Q700 -350 1700 750%22/%3E%3Cpath d=%22M-300 650 Q700 -450 1700 650%22/%3E%3Cpath d=%22M-300 550 Q700 -550 1700 550%22/%3E%3Cpath d=%22M-300 450 Q700 -650 1700 450%22/%3E%3C/g%3E%3C/svg%3E');
          background-size: cover;
          background-position: center;
        "
      ></div>

    </div>
  </div>
</section>

<style>
    @keyframes shine {
        0% { transform: translateX(-100%); }
        100% { transform: translateX(200%); }
    }
    .animate-shine {
        animation: shine 3s infinite linear;
    }
    .drop-shadow-glow {
        filter: drop-shadow(0 0 20px rgba(204, 255, 0, 0.8));
    }
</style>

    <!-- Section 1: The B42 Gamechanger -->
    <section class="bg-gray-950 py-28 lg:py-36 text-white">
        <div class="max-w-7xl mx-auto px-6 lg:px-8">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-center">

                <!-- Left: Text Content -->
                <div class="max-w-xl">
                    <p class="text-blue-400 text-sm mb-2">Personalized training plans</p>
                    <h2 class="text-2xl lg:text-4xl font-bold mb-6">
                        The B42 India Gamechanger
                    </h2>

                    <p class="text-gray-300 text-m leading-relaxed mb-4">
                        Achieve your goals with the personalized 6-week plans from B42 India Gamechanger. Perfectly tailored to your performance level and season stage – whether you're looking to get back on the pitch or maximize your stamina. Optimize your training and become the best footballer you can be!
                    </p>

                    <!-- Quote -->
                    <div class="mt-8">
                        <p class="italic text-m text-gray-200 mb-4">
                            "Everyone has to give 100% on the pitch. Then nobody can blame themselves at the end of the season."
                        </p>
                        <div class="flex items-center">
                            <img src="https://image.fupa.net/news/SWW8YCB9vJ9r/2000x1125.jpeg" 
                                 alt="Daniel Hofer" 
                                 class="w-12 h-12 rounded-full object-cover mr-4 border-2 border-red-600">
                            <div>
                                <p class="text-sm text-gray-400">Daniel Hofer, Spieler</p>
                                <p class="font-semibold">SpVgg Hankofen-Hailing</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Right: Mockup -->
                <div class="relative flex justify-center lg:justify-end">
                    <div class="relative z-10">
                        <img src="{% static 'images/training2.png' %}" 
                             alt="Soccer players celebrating" 
                             class="w-full max-w-md rounded-3xl shadow-2xl object-cover">
                    </div>
                </div>

            </div>
        </div>
    </section>

    <!-- Section 2: Frighteningly effective -->
    <section class="bg-gray-950 py-28 lg:py-36 text-white">
        <div class="max-w-7xl mx-auto px-6 lg:px-8">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-center">

                <!-- Left: Mockup -->
                <div class="relative flex justify-center lg:justify-end">
                    <div class="relative z-10">
                        <img src="{% static 'images/training3.png' %}" 
                             alt="Soccer players celebrating" >
                    </div>
                </div>

                <!-- Right: Text Content -->
                <div class="max-w-xl">
                    <p class="text-blue-400 text-sm mb-2">Fitness training</p>
                    <h2 class="text-2xl lg:text-4xl font-bold mb-6">
                        Frighteningly effective
                    </h2>

                    <p class="text-gray-300 text-m leading-relaxed mb-4">
                        With B42 India, you'll lay the foundation to perform at your peak fitness level for the full 90 minutes on the pitch. 
                        Work on your power with our football app and get yourself into a physical condition that will significantly improve your tackle success rate.
                    </p>

                    <!-- Quote -->
                    <div class="mt-8">
                        <p class="italic text-m text-gray-200 mb-4">
                            “The big advantage of B42 India over the gym is clearly that all workouts promote football-specific fitness. This way, our players are actually training something meaningful.”
                        </p>
                        <div class="flex items-center">
                            <img src="https://img.heimatsport.de/ezplatform/images/_aliases/detail_teaser_item_image_variation/3/0/4/2/358102403-1-ger-DE/18cdefacf9ac-29-119530096.jpg" 
                                 alt="Tobias Beck" 
                                 class="w-12 h-12 rounded-full object-cover mr-4">
                            <div>
                                <p class="text-sm text-gray-400">Tobias Beck, player-coach</p>
                                <p class="font-semibold">SpVgg Hankofen-Hailing</p>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </section>


    <!-- Section 3: -->
        <section class="bg-gray-950 py-28 lg:py-36 text-white">
        <div class="max-w-7xl mx-auto px-6 lg:px-8">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-center">

                <!-- Left: Text Content -->
                <div class="max-w-xl">
                    <p class="text-blue-400 text-sm mb-2">Prevention training</p>
                    <h2 class="text-2xl lg:text-4xl font-bold mb-6">
                        Safety first
                    </h2>

                    <p class="text-gray-300 text-m leading-relaxed mb-4">
                     The best injury is the one that never happens. With our prevention programs, you can fight back against football injuries. They help you protect yourself from the most common injuries and specifically target the areas you need for greater stability on the pitch.
                    </p>

                    <!-- Quote -->
                    <div class="mt-8">
                        <p class="italic text-m text-gray-200 mb-4">
                            "I've completely changed my training ethic. You always think, 'If I don't have anything acute, why should I do anything?' And I think that's been underestimated all along. You can prevent a lot of problems, especially through mobility exercises."
                        </p>
                        <div class="flex items-center">
                            <img src="https://image.fupa.net/news/SWW8YCB9vJ9r/2000x1125.jpeg" 
                                 alt="Daniel Hofer" 
                                 class="w-12 h-12 rounded-full object-cover mr-4 border-2 border-red-600">
                            <div>
                                <p class="text-sm text-gray-400">Aleksandro Petrovic, player</p>
                                <p class="font-semibold">TSV Buchbach</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Right: Mockup -->
                <div class="relative flex justify-center lg:justify-end">
                    <div class="relative z-10">
                        <img src="{% static 'images/training4.png' %}" 
                             alt="Soccer players celebrating" 
                             class="w-full max-w-md rounded-3xl shadow-2xl object-cover">
                    </div>
                </div>

            </div>
        </div>
    </section>
    <section class="bg-gray-950 py-28 lg:py-36 text-white">
        <div class="max-w-7xl mx-auto px-6 lg:px-8">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-center">

                <!-- Left: Mockup -->
                <div class="relative flex justify-center lg:justify-end">
                    <div class="relative z-10">
                        <img src="{% static 'images/training5.png' %}" 
                             alt="Soccer players celebrating" >
                    </div>
                </div>

                <!-- Right: Text Content -->
                <div class="max-w-xl">
                    <p class="text-blue-400 text-sm mb-2">Comeback training</p>
                    <h2 class="text-2xl lg:text-4xl font-bold mb-6">
                        Come back stronger
                    </h2>

                    <p class="text-gray-300 text-m leading-relaxed mb-2">
Injuries are unfortunately part of football. But while the pros have access to professional sports medicine every day, your rehabilitation is limited to half an hour of physiotherapy – at most.
                    </p>
                    <p class="text-gray-300 text-m leading-relaxed mb-4">
With B42 India, you receive professional guidance and return to the pitch stronger. Your path to a full recovery starts here.
                    </p>

                    <!-- Quote -->
                    <div class="mt-8">
                        <p class="italic text-m text-gray-200 mb-4">
                           "I have regained my physical fitness and am getting playing time again after the injury."
                        </p>
                        <div class="flex items-center">
                            <img src="https://img.heimatsport.de/ezplatform/images/_aliases/detail_teaser_item_image_variation/3/0/4/2/358102403-1-ger-DE/18cdefacf9ac-29-119530096.jpg" 
                                 alt="Tobias Beck" 
                                 class="w-12 h-12 rounded-full object-cover mr-4">
                            <div>
                                <p class="text-sm text-gray-400">Florian Sommersberger, player</p>
                                <p class="font-semibold">SpVgg Hankofen-Hailing</p>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </section>

            <section class="bg-gray-950 py-28 lg:py-36 text-white">
        <div class="max-w-7xl mx-auto px-6 lg:px-8">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-center">

                <!-- Left: Text Content -->
                <div class="max-w-xl">
                    <p class="text-blue-400 text-sm mb-2">Ball-specific training
</p>
                    <h2 class="text-2xl lg:text-4xl font-bold mb-6">
                        Professional Skills
                    </h2>

                    <p class="text-gray-300 text-m leading-relaxed mb-4">
                        Tailor-made drills improve precise passing, dribbling, and ball control. Adjust the difficulty level and playfully develop your ball skills. Become a technically skilled footballer!
                    </p>

                    <!-- Quote -->
                    <div class="mt-8">
                        <p class="italic text-m text-gray-200 mb-4">
                            "I wish I had had access to such tools and workouts 5 years earlier..."
                        </p>
                        <div class="flex items-center">
                            <img src="https://image.fupa.net/news/SWW8YCB9vJ9r/2000x1125.jpeg" 
                                 alt="Daniel Hofer" 
                                 class="w-12 h-12 rounded-full object-cover mr-4 border-2 border-red-600">
                            <div>
                                <p class="text-sm text-gray-400">Bence Tóth, player
</p>
                                <p class="font-semibold">SV Straßwalchen (AT)</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Right: Mockup -->
                <div class="relative flex justify-center lg:justify-end">
                    <div class="relative z-10">
                        <img src="{% static 'images/training6.png' %}" 
                             alt="Soccer players celebrating" 
                             class="w-full max-w-md rounded-3xl shadow-2xl object-cover">
                    </div>
                </div>

            </div>
        </div>
    </section>

        <section class="bg-gray-950 py-28 lg:py-36 text-white">
        <div class="max-w-7xl mx-auto px-6 lg:px-8">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-center">

                <!-- Left: Mockup -->
                <div class="relative flex justify-center lg:justify-end">
                    <div class="relative z-10">
                        <img src="{% static 'images/training7.png' %}" 
                             alt="Soccer players celebrating" >
                    </div>
                </div>

                <!-- Right: Text Content -->
                <div class="max-w-xl">
                    <p class="text-blue-400 text-sm mb-2">
Performance diagnostics
</p>
                    <h2 class="text-2xl lg:text-4xl font-bold mb-6">
Next Level Training
                    </h2>

                    <p class="text-gray-300 text-m leading-relaxed mb-4">
                       Gain detailed insights into strength, mobility, endurance, and speed. With precise data and tailored recommendations, you can specifically address your weaknesses and improve your game. Get the edge on the field!
                    </p>

                    <!-- Quote -->
                    <div class="mt-8">
                        <p class="italic text-m text-gray-200 mb-4">
                           "The videos explain very clearly what the players need to do. Afterwards, each player receives their strengths and weaknesses profile. This allows us as coaches to compare players and use the data for further workload management. It was interesting to see where the players have deficits that can be compensated for and where they have already improved compared to their teammates."
                        </p>
                        <div class="flex items-center">
                            <img src="https://img.heimatsport.de/ezplatform/images/_aliases/detail_teaser_item_image_variation/3/0/4/2/358102403-1-ger-DE/18cdefacf9ac-29-119530096.jpg" 
                                 alt="Tobias Beck" 
                                 class="w-12 h-12 rounded-full object-cover mr-4">
                            <div>
                                <p class="text-sm text-gray-400">Tobias Beck, player-coach</p>
                                <p class="font-semibold">SpVgg Hankofen-Hailing</p>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </section>
        <section class="bg-gray-950 py-28 lg:py-36 text-white">
        <div class="max-w-7xl mx-auto px-6 lg:px-8">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-center">

                <!-- Left: Text Content -->
                <div class="max-w-xl">
                    <p class="text-blue-400 text-sm mb-2">Stress management</p>
                    <h2 class="text-2xl lg:text-4xl font-bold mb-6">
                      Smart instead of harsh
                    </h2>

                    <p class="text-gray-300 text-m leading-relaxed mb-4">
                      Maintaining a balance between exertion and recovery is essential not only from session to session, but also in the long term. B42 India helps prevent premature performance decline and injuries, and ensures sustainable training progress.
                    </p>

                    <!-- Quote -->
                    <div class="mt-8">
                        <p class="italic text-m text-gray-200 mb-4">
                           "We can see how much and how intensely players train. Players and coaches can leave notes and give feedback."
                        </p>
                        <div class="flex items-center">
                            <img src="https://image.fupa.net/news/SWW8YCB9vJ9r/2000x1125.jpeg" 
                                 alt="Daniel Hofer" 
                                 class="w-12 h-12 rounded-full object-cover mr-4 border-2 border-red-600">
                            <div>
                                <p class="text-sm text-gray-400">Musa Avlayici, U13 Coach</p>
                                <p class="font-semibold">
SC Pfullendorf</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Right: Mockup -->
                <div class="relative flex justify-center lg:justify-end">
                    <div class="relative z-10">
                        <img src="{% static 'images/training8.png' %}" 
                             alt="Soccer players celebrating" 
                             class="w-full max-w-md rounded-3xl shadow-2xl object-cover">
                    </div>
                </div>

            </div>
        </div>
    </section>

 
 <section >
  <div class="mx-auto">
    <div class="relative overflow-hidden rounded-[70px] bg-[#6D77FF] py-24">
      <!-- Inner container that matches the main content width (same as navbar area) -->
      <div class="max-w-7xl mx-auto px-6 flex items-center justify-between">

        <!-- Left Text -->
        <div class="text-white max-w-md z-10">
          <h2 class="text-3xl md:text-[32px] font-medium leading-snug">
            Play the best season <br />
            of your life. 
          </h2>
        </div>

        <!-- Circle Button -->
        <button
          class="w-16 h-16 bg-[#D4FF24] rounded-full flex items-center justify-center z-10 shadow-md
                 hover:scale-125 transition-transform duration-300 ease-out shrink-0"
        >
          <span class="text-black text-xl">↗</span>
        </button>

      </div>

      <!-- Curved Lines Background - full bleed behind the rounded section -->
      <div
        class="absolute inset-0 opacity-70"
        style="
          background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%221440%22 height=%22840%22 viewBox=%220 0 1440 840%22%3E%3Cg fill=%22none%22 stroke=%22%23aabcff%22 stroke-width=%223%22 opacity=%220.3%22%3E%3Cpath d=%22M-300 950 Q700 -150 1700 950%22/%3E%3Cpath d=%22M-300 850 Q700 -250 1700 850%22/%3E%3Cpath d=%22M-300 750 Q700 -350 1700 750%22/%3E%3Cpath d=%22M-300 650 Q700 -450 1700 650%22/%3E%3Cpath d=%22M-300 550 Q700 -550 1700 550%22/%3E%3Cpath d=%22M-300 450 Q700 -650 1700 450%22/%3E%3C/g%3E%3C/svg%3E');
          background-size: cover;
          background-position: center;
        "
      ></div>

    </div>
  </div>
</section>
<style>
    @keyframes shine {
        0% { transform: translateX(-100%); }
        100% { transform: translateX(200%); }
    }
    .animate-shine {
        animation: shine 3s infinite linear;
    }
    .drop-shadow-glow {
        filter: drop-shadow(0 0 20px rgba(204, 255, 0, 0.8));
    }
</style>
</div>
{% endblock %}