{% extends "_layouts/base.twig" %}
{% block content %}

{% set approachCards = entry.approachCards.all() %}

{# Hero #}
<section
    class="bg-navy text-white text-center pt-[200px] flex flex-col gap-3xl overflow-hidden -mt-[var(--nav-height)]">
    <div class="container mb-s sm:mb-m lg:mb-xl">
        <div class="flex flex-col gap-m">
            <h1 class="h1 flex flex-col [&_br]:mb-s md:[&_br]:mb-0">{{entry.heroHeading}}</h1>
        </div>
    </div>
    <div class="w-full flex gap-s sm:gap-m lg:gap-2xl rotate-[-2.5deg]">
        {% for image in entry.heroImages %}
        <div
            class="w-1/3 dropshadow relative {% if loop.index == 1 %}translate-y-[-40px]{% elseif loop.index == 3 %}translate-y-[-80px]{% endif %}">
            <img src="/assets/graphics/Tape {{loop.index}}.png" alt="{{image.title}}"
                class="absolute top-0 left-[50%] translate-y-[-50%] translate-x-[-50%] h-[20%]">
            <img src="{{image.url}}" alt="{{image.title}}" class="w-full h-full object-cover">
        </div>
        {% endfor %}
    </div>
</section>

{# Positioning #}
<section class="py-2xl bg-indigo text-white">
    <div class="container items-center">
        <div class="flex flex-col gap-m p text-center max-w-[1040px]">
            {{entry.positioning}}
        </div>
    </div>
</section>

{# Case Studies — mobile Swiper + desktop flex grid; deck tilt in `.challenge-card-deck` #}
<section class="challenge-deck-section py-2xl flex flex-col gap-xl sm:gap-3xl overflow-x-hidden">
    <div class="container flex flex-col xl:flex-row justify-between items-center">
        <h2 class="h2 text-navy text-center xl:text-left">{{entry.challengesHeading}}</h2>
        <a href="{{entry.challengesLink.url}}" class="button">{{entry.challengesLink.label}}</a>
    </div>
    {% if entry.challengeCards | length %}
    {# Mobile: horizontal carousel (hidden from sm / 40rem up) #}
    <div class="sm:hidden flex flex-col gap-m overflow-x-clip">
        <div class="challenge-cards-swiper swiper w-full px-l">
            <div class="swiper-wrapper items-stretch">
                {% for challenge in entry.challengeCards %}
                {% set sign = loop.index0 is even ? -1 : 1 %}
                <div class="swiper-slide challenge-cards-swiper-item h-auto">
                    {% include "_includes/challengeCard.twig" with {
                    challenge: challenge,
                    cardRotate: sign * random(5, 15),
                    cardTranslate: sign * random(0, 70),
                    cardDelay: random(0, 500) / 1000,
                    } %}
                </div>
                {% endfor %}
            </div>
        </div>
        <div class="container flex flex-row justify-center gap-s">
            <button type="button"
                class="cursor-pointer button-outline-sm-prev challenge-carousel-prev">Previous</button>
            <button type="button" class="cursor-pointer button-outline-sm challenge-carousel-next">Next</button>
        </div>
    </div>

    {# Desktop: original flex-wrap deck grid (hidden below sm) #}
    <div class="hidden sm:flex flex-wrap gap-xl justify-center">
        {% for challenge in entry.challengeCards %}
        {% set sign = loop.index0 is even ? -1 : 1 %}
        <div class="challenge-cards-grid-item">
            {% include "_includes/challengeCard.twig" with {
            challenge: challenge,
            cardRotate: sign * random(5, 15),
            cardTranslate: sign * random(0, 70),
            cardDelay: random(0, 500) / 1000,
            } %}
        </div>
        {% endfor %}
    </div>
    {% endif %}
</section>

<section class="py-2xl bg-cream">
    <div class="container flex flex-col xl:flex-row justify-between items-center">
        <h2 class="h2 text-navy text-center xl:text-left">{{entry.approachHeading}}</h2>
        <a href="{{entry.approachLink.url}}" class="button-alt">{{entry.approachLink.label}}</a>
    </div>

    <div class="container pt-3xl flex flex-col lg:gap-3xl items-center">

        <div class="flex flex-col gap-m lg:grid lg:grid-cols-9 lg:gap-x-l lg:gap-y-2xl xl:gap-y-3x lg:items-center">
            {% include "_includes/approachCard.twig" with {
            approach: approachCards[0],
            index: 0,
            } %}

            <div class="hidden text-center lg:block lg:col-span-1 ">
                <img src="/assets/graphics/Curved Arrows 1.png" alt="" class="inline-block max-w-[140px]">
            </div>

            {% include "_includes/approachCard.twig" with {
            approach: approachCards[1],
            index: 1,
            } %}
        </div>

        <div class="lg:grid lg:grid-cols-10 lg:gap-x-l lg:gap-y-2xl xl:gap-y-3xl">
            <div id="spacer" class="hidden text-center lg:block lg:col-span-2 "></div>

            <div class="hidden text-center lg:block lg:col-span-1   lg:translate-y-[-20%]">
                <img src="/assets/graphics/Curved Arrows 2.png" alt="" class="inline-block max-w-[140px]">
            </div>

            {% include "_includes/approachCard.twig" with {
            approach: approachCards[2],
            index: 2,
            } %}

            <div class="hidden text-center lg:block lg:col-span-1 lg:translate-y-[-30%]">
                <img src="/assets/graphics/Curved Arrows 3.png" alt="" class="inline-block max-w-[140px]">
            </div>

            <div id="spacer" class="hidden text-center lg:block lg:col-span-2 "></div>
        </div>
    </div>

</section>

<section class="py-2xl overflow-hidden">
    <div class="container flex flex-col gap-m md:grid md:grid-cols-12 items-center">
        <div class="flex flex-col gap-m items-start md:col-span-5">
            <div class="flex flex-col ">
                <h2 class="h2 text-navy mb-0">{{entry.whoWeAreHeading}}</h2>
                <div class="text-0">{{entry.whoWeAreContent}} </div>
            </div>
            <a href=" {{entry.whoWeAreLink.url}}" class="button self-start">
                {{entry.whoWeAreLink.label}}</a>
        </div>
        <div class="md:col-span-1"></div>
        <div class="@container relative w-[calc(100%-40px)]  translate-x-[40px] md:col-span-6 my-xl">
            <img src="/assets/graphics/binderClip.png" alt="Dots"
                class="absolute top-[-20px] left-1/2 z-10 w-[25cqw] translate-x-[-50%] translate-y-[-50%] rotate-[2.5deg]">
            {% for image in entry.whoWeAreImages %}
            <img src="{{image.url}}" alt="{{image.title}}"
                class="w-full dropshadow {% if loop.index0 > 0 %}absolute top-0 left-0 {%else%} relative {% endif %}"
                style="transform: translate({{loop.index0 * -20}}px, {{loop.index0 * 20}}px) rotate({{loop.index0 * 2.5}}deg); z-index: {{5-loop.index0}};">
            {% endfor %}
        </div>
    </div>

    {# Logo Marquee #}
    {% if entry.logos | length %}

    <div class="logo-marquee-fade pt-3xl">
        <div class="logo-marquee-track" aria-label="Client logos">
            {% for logo in entry.logos %}
            <div class="px-xl flex items-center justify-center shrink-0">
                <img src="{{logo.url}}" alt="{{logo.title}}"
                    class="h-10 md:h-14 w-auto max-w-[160px] object-contain transition-all duration-300">
            </div>
            {% endfor %}
            {% for logo in entry.logos %}
            <div class="px-xl flex items-center justify-center shrink-0" aria-hidden="true">
                <img src="{{logo.url}}" alt=""
                    class="h-10 md:h-14 w-auto max-w-[160px] object-contain transition-all duration-300">
            </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}
</section>


{% include "_includes/cta.twig" %}
{% endblock %}

{% block scripts %}
<script src="/js/challengeCardsCarousel.js" defer></script>
{% endblock %}