<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
      data-namespace-typo3-fluid="true">

<section class="mask-hero relative w-full min-h-[480px] flex items-center overflow-hidden">

    <f:if condition="{data.tx_mask_hero_bg_image}">
        <div class="absolute inset-0 z-0">
            <f:for each="{data.tx_mask_hero_bg_image}" as="bgImage">
                <f:image image="{bgImage}" maxWidth="1920" class="w-full h-full object-cover" alt="" />
            </f:for>
            <div class="absolute inset-0 bg-black/50"></div>
        </div>
    </f:if>

    <div class="relative z-10 bido-container px-5 py-16 text-white">
        <f:if condition="{data.tx_mask_hero_title}">
            <h1 class="text-4xl md:text-5xl font-bold mb-4 leading-tight">
                {data.tx_mask_hero_title}
            </h1>
        </f:if>

        <f:if condition="{data.tx_mask_hero_subtitle}">
            <p class="text-lg md:text-xl mb-8 text-white/80">
                {data.tx_mask_hero_subtitle}
            </p>
        </f:if>

        <f:if condition="{data.tx_mask_hero_button_link}">
            <f:link.typolink parameter="{data.tx_mask_hero_button_link}"
                             class="inline-block px-8 py-3 bg-primary text-white font-semibold rounded-lg hover:bg-primary/90 transition">
                <f:if condition="{data.tx_mask_hero_button_text}">
                    <f:then>{data.tx_mask_hero_button_text}</f:then>
                    <f:else>Learn More</f:else>
                </f:if>
            </f:link.typolink>
        </f:if>
    </div>

</section>

</html>
