<f:layout name="Default" />

<!-- No extra heading from the parent layout -->
<f:section name="Header" />

<f:section name="Main">
  <f:asset.css identifier="CBHero" href="{cb:assetPath()}/frontend.css" />

  <div class="hero-inner">
    <div class="hero">
      <h2 class="hero-subheader">{data.subheader}</h2>
      <h1 class="hero-title">{data.header}</h1>
      <div class="hero-text">
        <f:format.html>{data.bodytext}</f:format.html>
      </div>
      <div class="hero-social-icons">
        <a href="https://www.instagram.com/lena.ats/" target="_blank" aria-label="Lena Schillings Instagram" class="btn social-icon"><i class="ci ci-instagram"></i></a>
        <a href="https://www.tiktok.com/@dieschilling" target="_blank" aria-label="Lena Schillings TikTok" class="btn social-icon"><i class="ci ci-tiktok"></i></a>
      </div>
      <div class="hero-image-wrapper">
        <f:if condition="{data.image}">
          <f:then>
            <figure>
                <!-- WEBP source -->
                <source
                  type="image/webp"
                  srcset="
                    {f:uri.image(image:data.image.0, width:'320c', cropVariant:'default', fileExtension:'webp')} 320w,
                    {f:uri.image(image:data.image.0, width:'768c', cropVariant:'default', fileExtension:'webp')} 768w,
                    {f:uri.image(image:data.image.0, width:'430c', cropVariant:'default', fileExtension:'webp')} 1024w"
                  sizes="(max-width: 320px) 80vw,
                         (max-width: 768px) 80px,
                         430px" />

                <!-- Fallback source -->
              <source
                srcset="
                  {f:uri.image(image:data.image.0, width:'320c', cropVariant:'default')} 320w,
                  {f:uri.image(image:data.image.0, width:'600c', cropVariant:'default')} 600w,
                  {f:uri.image(image:data.image.0, width:'430c', cropVariant:'default')} 1024w"
                sizes="(max-width: 320px) 80vw,
                       (max-width: 768px) 80vw,
                       430px" />
              <f:image
                image="{data.image.0}"
                treatIdAsReference="1"
                fetchpriority="high"
                cropVariant="default"
                width="430c"
                alt="Hero Image"
                loading="lazy"
                class="hero-image" />
            </figure>
          </f:then>
          <f:else>
            <p>No image available</p>
          </f:else>
        </f:if>
      </div>
    </div>
  </div>
</f:section>
