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

{% block title %}Via B42{% endblock %}


{% block content %}
 <section class="bg-[#1E1E1E] text-white py-24">
  <div class="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-12 items-center px-6">
    
    <!-- LEFT TEXT -->
    <div class="text-center lg:text-left">
      <h2 class="text-xl md:text-2xl lg:text-3xl font-bold tracking-wide">
        OUR MOTIVATION — WE LIVE SOCCER
      </h2>

      <!-- underline -->
     <div class="mt-4 w-40 h-1 ml-auto bg-gradient-to-r from-green-400 to-transparent rounded-full"></div>


      <p class="mt-10 text-lg leading-relaxed max-w-2xl mx-auto lg:mx-0">
        We stood or are standing on the pitch ourselves, have got to know 
        the soccer fields and turf fields of this republic and know the smell 
        of freshly cut grass coming out of Eff Eff. It is this passion that drives us.
        <br><br>
        We want to get back to the soccer that captivated us as a child. 
        Where gender, sexual orientation or skin color did not play a role. 
        We stand for equality, respect and community cooperation in amateur sports. 
        For us, “EqualGame” or “FairPlay” are more than trendy hashtags on social 
        media platforms — they are the basis of our corporate culture.
      </p>
    </div>

    <!-- RIGHT IMAGE -->
    <div class="flex justify-center lg:justify-end">
      <img 
        src="{% static 'images/about1.png' %}"
        alt="Player Jumping"
        class=" w-full max-w-xl object-cover"
      />
    </div>

  </div>
</section>

<section class="bg-[#1E1E1E] text-white py-24">
  <div class="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-12 items-center px-6">

    <!-- LEFT IMAGE -->
    <div class="flex justify-center lg:justify-start">
      <img 
        src="{% static 'images/about2.jpg' %}"
        alt="Players Team"
        class="rounded-lg w-full max-w-xl object-cover"
      />
    </div>

    <!-- RIGHT CONTENT -->
    <div class="text-center lg:text-left max-w-2xl mx-auto lg:mx-0">

      <!-- TITLES -->
      <h2 class="inline-block bg-white text-black font-bold px-4 py-2 mb-2 text-lg md:text-xl">
        OUR GOAL - BETTER TEAMS
      </h2>
      <br />
      <h2 class="inline-block bg-white text-black font-bold px-4 py-2 mb-6 text-lg md:text-xl">
        BETTER SOCCER
      </h2>

      <!-- PARAGRAPH -->
      <p class="text-lg leading-relaxed mt-4">
        As a startup, we have set ourselves an ambitious goal: nothing less 
        than taking amateur soccer to a new level. With our soccer platform 
        for ambitious players, coaches and clubs, we give you the tools to 
        significantly improve your performance on the pitch.
      </p>

      <p class="text-lg leading-relaxed mt-6">
        With advanced methods and expertise from professional sports, B42 makes it 
        possible to improve the skills of each individual player for optimal team performance.
      </p>

      <!-- BUTTON -->
      <div class="mt-10 flex justify-center lg:justify-start">
        <a href="#"
           class="border-2 border-lime-400 text-white font-semibold rounded-full px-6 py-3 text-sm tracking-wide hover:bg-lime-400 hover:text-black transition">
          BOOST YOUR GAME
        </a>
      </div>

    </div>

  </div>
</section>

<section class="bg-[#E8E8F2] py-24">
  <div class="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-12 items-center px-6">

    <!-- LEFT: TEAM GRID -->
    <div class="grid grid-cols-2 gap-6">
      <img src="{% static 'images/about3.jpg' %}" 
           alt="Team 1"
           class="rounded-3xl w-full h-full object-cover" />

      <img src="{% static 'images/about4.jpg' %}"
           alt="Team 2"
           class="rounded-3xl w-full h-full object-cover" />

      <img src="{% static 'images/about5.jpg' %}"
           alt="Team 3"
           class="rounded-3xl w-full h-full object-cover" />

      <img src="{% static 'images/about6.jpg' %}"
           alt="Team 4"
           class="rounded-3xl w-full h-full object-cover" />
    </div>

    <!-- RIGHT: CONTENT -->
    <div class="text-center lg:text-left max-w-2xl mx-auto lg:mx-0">

      <h2 class="inline-block bg-black text-white font-bold px-4 py-2 mb-2 text-lg md:text-xl">
        THAT'S US - THE
      </h2>
      <br />
      <h2 class="inline-block bg-black text-white font-bold px-4 py-2 mb-6 text-lg md:text-xl">
        B42 India DREAMTEAM
      </h2>

      <p class="text-xl text-gray-800 leading-relaxed">
        The game is ruled by those who have the courage,
        ambition, and ability to move forward, cross borders,
        and challenge the status quo.
      </p>

      <div class="mt-10 flex justify-center lg:justify-start">
        <a href="#"
           class="bg-[#6C63FF] hover:bg-[#5a52e0] text-white font-semibold rounded-full px-6 py-3 text-sm tracking-wide transition">
          VACANCIES
        </a>
      </div>

    </div>

  </div>
</section>

<section class="relative bg-[#161616] py-20 overflow-hidden">

  <!-- BG pattern layer -->
  <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/diagonal-stripes.png')] opacity-20"></div>

  <div class="relative max-w-7xl mx-auto px-6">

    <!-- Heading -->
    <h2 class="text-white font-bold text-2xl md:text-3xl mb-10 text-center lg:text-left">
      OUR COMMITMENT — FOR A BETTER SOCCER
    </h2>

    <!-- Slider -->
    <div id="slider" class="relative">

      <!-- Slide 1 -->
      <div class="slide grid grid-cols-1 lg:grid-cols-2 gap-0 bg-white rounded-2xl overflow-hidden">
        <!-- Left: Text -->
        <div class="p-10 flex flex-col justify-center text-center lg:text-left space-y-4">
<span class="inline-block bg-black text-white font-bold px-4 py-2 text-sm">
  slide tackle against Right
</span>


          <p class="text-gray-800 leading-relaxed text-lg">
            Young soccer players will shape our society and define our values in the future. On and off the square

Through sport, but also in everyday life in general, they have the opportunity and responsibility to construct social cooperation that does not ostracize and discriminate, but above all respect, diversity and tolerance.
          </p>

          <p class="text-gray-800 leading-relaxed text-lg">
            With this in mind, we have created a platform for
            women’s soccer with Play for Her.
          </p>
        </div>

        <!-- Right: Image -->
        <div class="h-80 lg:h-auto">
          <img
            src="{% static 'images/about7.jpg' %}"
            alt="Women Soccer"
            class="w-full h-full object-cover"
          />
        </div>
      </div>

      <!-- Slide 2 -->
      <div class="slide hidden grid grid-cols-1 lg:grid-cols-2 gap-0 bg-white rounded-2xl overflow-hidden">
        <!-- Left: Text -->
        <div class="p-10 flex flex-col justify-center text-center lg:text-left space-y-4">
          <span class="inline-block bg-black text-white font-bold px-4 py-2 text-sm">
          Play 4 Her
          </span>

          <p class="text-gray-800 leading-relaxed text-lg">
           Women's football is of great importance to B42 India. We are convinced that football can break down barriers and bring significant social benefits. Supporting women who want to pursue their passion is undoubtedly linked to this goal.


          </p>

          <p class="text-gray-800 leading-relaxed text-lg">
            With this in mind, we have created Play for Her, a platform for women's football.
          </p>
        </div>

        <!-- Right: Image -->
        <div class="h-80 lg:h-auto">
          <img
            src="{% static 'images/about8.jpg' %}"
            alt="Another Soccer Image"
            class="w-full h-full object-cover"
          />
        </div>
      </div>

    </div>

    <!-- Slider dots -->
    <div class="flex justify-center gap-3 mt-8">
      <button class="dot w-4 h-1 rounded-full bg-white" onclick="showSlide(0)"></button>
      <button class="dot w-4 h-1 rounded-full bg-white/30" onclick="showSlide(1)"></button>
    </div>

  </div>
</section>

<section class="bg-blue-500 min-h-80 flex items-center justify-center px-4">
        <div class="text-center text-white">
            <h1 class="text-3xl md:text-4xl font-bold mb-4">PLAY IT REAL - EVEN IN YOUR INBOX.</h1>
            <p class="text-lg md:text-xl mb-6">Receive exclusive training tips, mental support and updates from the B42 India Arena.</p>
            <p class="text-lg md:text-xl mb-10">No spam. Just real performance.</p>
            
            <form class="flex flex-col sm:flex-row gap-4 max-w-md mx-auto">
                <input 
                    type="email" 
                    placeholder="Enter your email address" 
                    class="px-6 py-4 rounded-full text-gray-800 text-lg flex-1 focus:outline-none"
                    required
                >
                <button 
                    type="submit" 
                    class="bg-black text-white px-8 py-4 rounded-full text-lg font-semibold hover:bg-gray-900 transition"
                >
                    Register
                </button>
            </form>
        </div>
    </section>
<script>
  const slides = document.querySelectorAll('#slider .slide');
  const dots = document.querySelectorAll('.dot');

  function showSlide(index) {
    slides.forEach((slide, i) => {
      slide.classList.toggle('hidden', i !== index);
      dots[i].classList.toggle('bg-white', i === index);
      dots[i].classList.toggle('bg-white/30', i !== index);
    });
  }
</script>



{% endblock %}