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

{% block title %}Press{% endblock %}
{% block content %}

<!-- Dark background for the entire page -->
<div class="bg-custom-dark text-white min-h-screen">

    <!-- Header with "Press" title -->
    <header class="py-12 text-center">
        <h1 class="text-3xl md:text-5xl font-bold uppercase tracking-wider">Press</h1>
        <p class="mt-8 max-w-3xl mx-auto text-lg md:text-xl px-4">
            To best present your partnership with B42 India to your coaches, players, fans 
            and members, we have compiled some helpful information and content 
            for you here.
        </p>
    </header>

    <!-- Main content -->
    <div class="max-w-7xl mx-auto px-6 pb-20">
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-12">
            <!-- Left Column: Sticky Press Kit + Download Button -->
            <div class="lg:col-span-4 space-y-8 lg:sticky lg:top-24 lg:self-start">
                <h2 class="text-3xl font-bold">B42 India Press Kit</h2>
                <div class="bg-custom-light rounded-3xl shadow-2xl h-52 overflow-hidden">
                    <div class="relative w-full h-64"> <!-- Adjusted height for better visual -->
                        <img 
                            src="{% static 'images/press1.jpg' %}" 
                            alt="B42 App Previews"
                            class="absolute inset-0 w-full h-full object-cover"
                        />
                    </div>
                    <div class="p-6">
                        <!-- Optional description can go here -->
                    </div>
                </div>

                <!-- Download Button -->
                <div class="mt-8 text-center">
                    <a href="https://B42-assets.azureedge.net/presse/B42%20Press%20Kit.zip" 
                       class="inline-block bg-yellow-400 text-black font-bold px-8 py-4 rounded-full hover:bg-yellow-300 transition shadow-lg text-xl">
                        Download
                    </a>
                </div>
            </div>

            <!-- Right Column: Article cards -->
            <div class="lg:col-span-8 space-y-12">

                <!-- Reusable card pattern – image now fully covers the left section -->
                <div class="bg-[#6366f1] text-white rounded-[3rem] overflow-hidden shadow-2xl flex flex-col md:flex-row">
                    <div class="bg-white md:w-1/3 h-48 md:h-auto overflow-hidden"> <!-- Fixed height on mobile -->
                        <img src="{% static 'images/press2.svg' %}" alt="SVE Logo" class="w-full h-full object-cover">
                    </div>
                    <div class="p-6 md:p-8 md:w-2/3 flex flex-col justify-center">
                        <h3 class="text-2xl font-bold mb-3">
                            2nd anniversary of the B42 India Premium Partnership!
                        </h3>
                        <p class="text-lg opacity-90 leading-snug">
                            We say !Thank you! to B42 India and look forward to our future together!
                        </p>
                    </div>
                </div>

                <div class="bg-[#6366f1] text-white rounded-[3rem] overflow-hidden shadow-2xl flex flex-col md:flex-row">
                    <div class="bg-white md:w-1/3 h-48 md:h-auto overflow-hidden">
                        <img src="{% static 'images/pres3.jpg' %}" alt="Press image" class="w-full h-full object-cover">
                    </div>
                    <div class="p-6 md:p-8 md:w-2/3 flex flex-col justify-center">
                        <h3 class="text-2xl font-bold mb-3">B42 India Doubles</h3>
                        <p class="text-lg opacity-90 leading-snug">
                            Football and FIFA are inextricably linked. Attempts to merge them are made repeatedly – this time with an app.
                        </p>
                    </div>
                </div>

                <div class="bg-[#6366f1] text-white rounded-[3rem] overflow-hidden shadow-2xl flex flex-col md:flex-row">
                    <div class="bg-white md:w-1/3 h-48 md:h-auto overflow-hidden">
                        <img src="{% static 'images/pres4.jpg' %}" alt="Press image" class="w-full h-full object-cover">
                    </div>
                    <div class="p-6 md:p-8 md:w-2/3 flex flex-col justify-center">
                        <h3 class="text-2xl font-bold mb-3">Training programs like those used in professional football</h3>
                        <p class="text-lg opacity-90 leading-snug">
                            How training with apps and video analysis is changing amateur football.
                        </p>
                    </div>
                </div>

                <div class="bg-[#6366f1] text-white rounded-[3rem] overflow-hidden shadow-2xl flex flex-col md:flex-row">
                    <div class="bg-white md:w-1/3 h-48 md:h-auto overflow-hidden">
                        <img src="{% static 'images/press5.jpg' %}" alt="Press image" class="w-full h-full object-cover">
                    </div>
                    <div class="p-6 md:p-8 md:w-2/3 flex flex-col justify-center">
                        <h3 class="text-2xl font-bold mb-3">If you don't move with the times, you'll be left behind</h3>
                        <p class="text-lg opacity-90 leading-snug">
                            Between professional and amateur - With Andreas Gschaider & Leo Preschi
                        </p>
                    </div>
                </div>

                <div class="bg-[#6366f1] text-white rounded-[3rem] overflow-hidden shadow-2xl flex flex-col md:flex-row">
                    <div class="bg-white md:w-1/3 h-48 md:h-auto overflow-hidden">
                        <img src="{% static 'images/pres6.jpg' %}" alt="Press image" class="w-full h-full object-cover">
                    </div>
                    <div class="p-6 md:p-8 md:w-2/3 flex flex-col justify-center">
                        <h3 class="text-2xl font-bold mb-3">Major innovation at BFV partner B42 India</h3>
                        <p class="text-lg opacity-90 leading-snug">
                            New app version with many new team features
                        </p>
                    </div>
                </div>

                <div class="bg-[#6366f1] text-white rounded-[3rem] overflow-hidden shadow-2xl flex flex-col md:flex-row">
                    <div class="bg-white md:w-1/3 h-48 md:h-auto overflow-hidden">
                        <img src="{% static 'images/pres7.jpg' %}" alt="Press image" class="w-full h-full object-cover">
                    </div>
                    <div class="p-6 md:p-8 md:w-2/3 flex flex-col justify-center">
                        <h3 class="text-2xl font-bold mb-3">B42 India becomes a UEFA partner</h3>
                        <p class="text-lg opacity-90 leading-snug">
                            An Erding police officer becomes an app developer and gets footballers all over Europe moving with B42 India.
                        </p>
                    </div>
                </div>

                <div class="bg-[#6366f1] text-white rounded-[3rem] overflow-hidden shadow-2xl flex flex-col md:flex-row">
                    <div class="bg-white md:w-1/3 h-48 md:h-auto overflow-hidden">
                        <img src="{% static 'images/press8.jpg' %}" alt="Press image" class="w-full h-full object-cover">
                    </div>
                    <div class="p-6 md:p-8 md:w-2/3 flex flex-col justify-center">
                        <h3 class="text-2xl font-bold mb-3">When Uli Hoeneß suddenly calls...</h3>
                        <p class="text-lg opacity-90 leading-snug">
                            Football start-up B42 India
                        </p>
                    </div>
                </div>

                <div class="bg-[#6366f1] text-white rounded-[3rem] overflow-hidden shadow-2xl flex flex-col md:flex-row">
                    <div class="bg-white md:w-1/3 h-48 md:h-auto overflow-hidden">
                        <img src="{% static 'images/pres9.jpg' %}" alt="Press image" class="w-full h-full object-cover">
                    </div>
                    <div class="p-6 md:p-8 md:w-2/3 flex flex-col justify-center">
                        <h3 class="text-2xl font-bold mb-3">Fit Friends meets B42 India</h3>
                        <p class="text-lg opacity-90 leading-snug">
                            Paulick vs. Boss - Your training counts!
                        </p>
                    </div>
                </div>

                <div class="bg-[#6366f1] text-white rounded-[3rem] overflow-hidden shadow-2xl flex flex-col md:flex-row">
                    <div class="bg-white md:w-1/3 h-48 md:h-auto overflow-hidden">
                        <img src="{% static 'images/pres10.jpg' %}" alt="Press image" class="w-full h-full object-cover">
                    </div>
                    <div class="p-6 md:p-8 md:w-2/3 flex flex-col justify-center">
                        <h3 class="text-2xl font-bold mb-3">Kick Off Your Best Season Yet with Andreas Gschaider</h3>
                        <p class="text-lg opacity-90 leading-snug">
                            A Dive into B42's India Sport Tech Phenomenon
                        </p>
                    </div>
                </div>

                <div class="bg-[#6366f1] text-white rounded-[3rem] overflow-hidden shadow-2xl flex flex-col md:flex-row">
                    <div class="bg-white md:w-1/3 h-48 md:h-auto overflow-hidden">
                        <img src="{% static 'images/pres11.jpg' %}" alt="Press image" class="w-full h-full object-cover">
                    </div>
                    <div class="p-6 md:p-8 md:w-2/3 flex flex-col justify-center">
                        <h3 class="text-2xl font-bold mb-3">From punk to police officer to entrepreneur</h3>
                        <p class="text-lg opacity-90 leading-snug">
                            The crazy biography of startup founder Andreas Gschaider in the podcast
                        </p>
                    </div>
                </div>

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

<section class="py-10 bg-[#1e1e1e]">
  <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">
            Give your team <br />
            what it needs <br />
            to be successful .
          </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>
    .bg-custom-dark {
        background-color: #0f172a;
    }
    .bg-custom-light {
        background-color: #f1f5f9;
    }
</style>

{% endblock %}