<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
      data-namespace-typo3-fluid="true">
<div style="padding: 10px; border: 1px solid #ccc;">
    <strong>Hero</strong> <f:if condition="{data.hero_variant}"><span style="color:#666;">({data.hero_variant})</span></f:if>
    <f:switch expression="{data.hero_variant}">
        <f:case value="parallax">
            <br /><small>Parallax — single image</small>
            <f:if condition="{data.hero_image.0}"><br /><f:image image="{data.hero_image.0}" maxWidth="120" height="80" /></f:if>
        </f:case>
        <f:case value="parallax_content">
            <br /><small>Parallax + text/button</small>
            <f:if condition="{data.hero_image.0}"><br /><f:image image="{data.hero_image.0}" maxWidth="120" height="80" /></f:if>
            <f:if condition="{data.hero_headline}"><br />Headline: {data.hero_headline -> f:format.crop(maxCharacters: 40)}</f:if>
        </f:case>
        <f:case value="swiper_simple">
            <br /><small>Swiper — image + logo</small>
            <f:if condition="{data.hero_slides}"><br />Slides: {data.hero_slides -> f:count()}</f:if>
        </f:case>
        <f:case value="swiper_text">
            <br /><small>Swiper — text/button</small>
            <f:if condition="{data.hero_slides}"><br />Slides: {data.hero_slides -> f:count()}</f:if>
        </f:case>
        <f:case value="swiper_mixed">
            <br /><small>Swiper — mixed</small>
            <f:if condition="{data.hero_slides}"><br />Slides: {data.hero_slides -> f:count()}</f:if>
        </f:case>
        <f:defaultCase>
            <f:if condition="{data.hero_image.0}"><br /><f:image image="{data.hero_image.0}" maxWidth="120" height="80" /></f:if>
        </f:defaultCase>
    </f:switch>
    <f:if condition="{data.hero_speed}"><br /><small>Parallax speed: {data.hero_speed}</small></f:if>
</div>
</html>
