---
// Copyright © SixtyFPS GmbH <info@slint.dev>
// SPDX-License-Identifier: MIT
import Image from "~/components/common/Image.astro";
import Button from "~/components/ui/Button.astro";

import type { Hero as Props } from "~/types";

const {
    title = await Astro.slots.render("title"),
    subtitle = await Astro.slots.render("subtitle"),
    tagline,

    content = await Astro.slots.render("content"),
    actions = await Astro.slots.render("actions"),
    image = await Astro.slots.render("image"),

    id,
    bg = await Astro.slots.render("bg"),
} = Astro.props;
---

<section class="relative md:-mt-[76px] not-prose" {...id ? { id } : {}}>
  <div class="absolute inset-0 pointer-events-none" aria-hidden="true">
    <slot name="bg">
      {bg ? <Fragment set:html={bg} /> : null}
    </slot>
  </div>
  <div class="relative max-w-7xl mx-auto px-4 sm:px-6">
    <div class="pt-0 md:pt-[76px] pointer-events-none"></div>
    <div class="py-12 md:py-20 lg:py-0 lg:flex lg:items-center lg:h-screen lg:gap-8">
      <div class="basis-1/2 text-center lg:text-left pb-10 md:pb-16 mx-auto">
        {
          tagline && (
            <p
              class="text-base text-secondary dark:text-blue-200 font-bold tracking-wide uppercase intersect-once motion-safe:md:intersect:animate-fade motion-safe:md:opacity-0 intersect-quarter"
              set:html={tagline}
            />
          )
        }
        {
          title && (
            <h1
              class="text-5xl md:text-6xl font-bold leading-tighter tracking-tighter mb-4 font-heading dark:text-gray-200 intersect-once motion-safe:md:intersect:animate-fade motion-safe:md:opacity-0 intersect-quarter"
              set:html={title}
            />
          )
        }
        <div class="max-w-3xl mx-auto lg:max-w-none">
          {
            subtitle && (
              <p
                class="text-xl text-muted mb-6 dark:text-slate-300 intersect-once motion-safe:md:intersect:animate-fade motion-safe:md:opacity-0 intersect-quarter"
                set:html={subtitle}
              />
            )
          }

          {
            actions && (
              <div class="max-w-xs sm:max-w-md m-auto flex flex-nowrap flex-col sm:flex-row sm:justify-center gap-4 lg:justify-start lg:m-0 lg:max-w-7xl intersect-once motion-safe:md:intersect:animate-fade motion-safe:md:opacity-0 intersect-quarter">
                {Array.isArray(actions) ? (
                  actions.map((action) => (
                    <div class="flex w-full sm:w-auto">
                      <Button {...(action || {})} class="w-full sm:mb-0" />
                    </div>
                  ))
                ) : (
                  <Fragment set:html={actions} />
                )}
              </div>
            )
          }
        </div>
        {content && <Fragment set:html={content} />}
      </div>
      <div class="basis-1/2">
        {
          image && (
            <div class="relative m-auto max-w-5xl intersect-once intercept-no-queue motion-safe:md:intersect:animate-fade motion-safe:md:opacity-0 intersect-quarter">
              {typeof image === 'string' ? (
                <Fragment set:html={image} />
              ) : (
                <Image
                  class="mx-auto rounded-md w-full"
                  widths={[400, 768, 1024, 2040]}
                  sizes="(max-width: 767px) 400px, (max-width: 1023px) 768px, (max-width: 2039px) 1024px, 2040px"
                  loading="eager"
                  width={600}
                  height={600}
                  {...image}
                />
              )}
            </div>
          )
        }
      </div>
    </div>
  </div>
</section>
