Package Card: Horizontal Display

{% set imageContainer = "flex-col items-center min-h-[170px] -mt-10" %}
{% set imageContainerHeight = "h-[170px]" %}
{% set clipPath = "product-card-header" %}

{% if horizontalDisplay %}
    {% set imageContainer = "justify-center pl-[7.5%] gap-6 min-h-[140px]" %}
    {% set leftImage = "-mt-5" %}
    {% set rightImage = "mt-5" %}
    {% set imageContainerHeight = "h-[140px] " %}
    {% set clipPath = "product-card-header-alt" %}
{% endif %}

{% set shadow = "shadow-[0_4px_4px_0_rgba(0,0,0,0.05)]" %}
{% set badgeLabel =  "bg-delta-500" %}

{% if highlight %} 
    {% set shadow = "shadow-[0_4px_60px_0_rgba(255,210,0,0.20),0_4px_28px_0_rgba(255,210,0,0.20),0_4px_16px_0_rgba(0,0,0,0.05)]" %}
    {% set badgeLabel =  "bg-gradient-to-l from-delta-500 to-[#FF9300]" %}
{% endif %}

<div class="w-full pt-10 relative h-full ">
    <div class="{{ shadow }} relative rounded-[24px] border border-grey-200 card-hover bg-white h-full flex flex-col">
        <div class="absolute left-1/2 -translate-x-1/2 w-full top-0 bg-brand-gradient-2 {{ imageContainerHeight }} z-0 {{ clipPath}} rounded-t-[24px]"></div>
        <div class="flex {{ imageContainer }} relative z-10 flex-shrink-0">
            <div>
                <img class="lazyload {{ leftImage }}" data-src="{{ badgeImage | asset }}"  width="112" height="112">
            </div>
            <div>
                <img class="lazyload {{ rightImage }}" data-src="{{ routerImage | asset }}" width="174" height="130">
            </div>
        </div>
        <div class="flex-1 flex items-center justify-center"> 
            <div class="px-12 lg:px-6 xl:px-12 flex flex-col gap-4 pt-4 pb-10">
                <div class="flex flex-col text-center gap-1.5">
                    {% if offer %}
                        <div>
                            <p class="leading-none py-3 px-4 {{ badgeLabel }} rounded-lg text-grey-800 uppercase font-bold inline-block">{{ offer }}</p>
                        </div>
                    {% endif %}
                    {% if offerDescription %}
                        <p class="text-grey-600 leading-tight text-sm">{{ offerDescription }}</p>
                    {% endif %}
                </div>
                {% if speed %}
                    <div class="flex flex-col text-center">
                        <span class="text-alpha text-4xl lg:text-5xl font-bold leading-tight">{{ speed }}</span>
                        <span class="text-bravo text-sm leading-normal">avg. download/upload</span>
                    </div>
                {% endif %}
                {% if price %}
                <div class="flex flex-col text-center gap-0.5">
                    <span class="font-bold text-bravo text-8xl">£{{ price }}</span>
                    <span class="font-bold text-bravo text-sm lg:text-base">a month</span>
                </div>
                {% endif %}
                <div class="flex items-center justify-center mt-2">
                    {% if callUs %}
                        <a href="tel:12345" class="btn group bg-bravo text-white border-2 border-bravo">
                            <div class="relative z-10 group-hover:-translate-x-2 transition ease-in-out duration-300">
                                Call us
                            </div>
                            <div class="w-3.5 h-3.5 absolute right-2 top-2/4 translate-x-2 -translate-y-2/4 -rotate-90 transition-all ease-in-out duration-300 fill-current opacity-0 group-hover:-translate-x-2 group-hover:opacity-100">
                                {% render "@icon", { name: 'icon-chevron', modifier: "w-full h-full fill-current", ariaHidden: true } %}
                            </div>
                        </a>
                    {% elseif step1 %}
                        {% render "@package-button-step-1" %}
                    {% elseif step2 %}
                        {% render "@package-button-step-2", { id: id } %}
                    {% endif %}
                </div>
                {% if features %}
                    <ul class="flex flex-col gap-3 justify-center items-center text-center">
                        {% for feature in features %}
                            <li class="flex items-center gap-2 text-sm text-grey-700">
                                {% render "@icon", { name: 'icon-tick', modifier: "w-4 h-4 text-s-green-800 shrink-0", ariaHidden: true } %}
                                <span class="font-bold text-bravo">
                                    {{ feature }}
                                </span>
                            </li>
                        {% endfor %}
                    </ul>
                {% endif %}
                <div class="flex flex-col text-center gap-2">
                    {% if disclaimerHeading %}
                        <h2 class="font-bold text-sm text-grey-500">{{ disclaimerHeading }}</h2>
                    {% endif %}
                    {% if disclaimerDescription %}
                        <p class="text-[12px] text-grey-500">{{ disclaimerDescription }}</p>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>