---
import { Icon } from 'astro-icon';
import { Picture } from '@astrojs/image/components';

interface CallToAction {
  text: string;
  href: string;
  icon?: string;
}

export interface Props {
  title?: string;
  subtitle?: string;
  callToAction?: string | CallToAction;
  callToAction2?: string | CallToAction;
  image?: string | any; // TODO: find HTMLElementProps
}

const {
  title = await Astro.slots.render('title'),
  subtitle = await Astro.slots.render('subtitle'),
  content = await Astro.slots.render('content'),
  callToAction = await Astro.slots.render('callToAction'),
  callToAction2 = await Astro.slots.render('callToAction2'),
  image = await Astro.slots.render('image'),
} = Astro.props;
---

<section class="relative md:-mt-[76px]">
  <div class="absolute inset-0 pointer-events-none" aria-hidden="true"></div>
  <div class="relative max-w-screen-xl mx-auto px-4 sm:px-6">
    <div class="pt-0 md:pt-[76px]"></div>
    <div class="py-12 md:py-20">
      <div class="text-center pb-10 md:pb-16 max-w-screen-lg mx-auto">
        {
          title && (
            <h1
              class="text-5xl md:text-6xl  font-bold leading-tighter tracking-tighter mb-4 font-heading dark:text-gray-200"
              set:html={title}
            />
          )
        }
        <div class="max-w-3xl mx-auto">
          {subtitle && <p class="text-xl text-gray-600 mb-6 dark:text-slate-300" set:html={subtitle} />}
          <div class="max-w-xs sm:max-w-md m-auto flex flex-nowrap flex-col sm:flex-row sm:justify-center gap-4">
            {
              callToAction && (
                <div class="flex w-full sm:w-auto">
                  {typeof callToAction === 'string' ? (
                    <Fragment set:html={callToAction} />
                  ) : (
                    <a class="btn btn-primary sm:mb-0 w-full" href={callToAction?.href} target="_blank" rel="noopener">
                      {callToAction?.icon && (
                        <>
                          <Icon name={callToAction.icon} class="w-5 h-5 mr-1 -ml-1.5" />{' '}
                        </>
                      )}
                      {callToAction?.text}
                    </a>
                  )}
                </div>
              )
            }
            {
              callToAction2 && (
                <div class="flex w-full sm:w-auto">
                  {typeof callToAction2 === 'string' ? (
                    <Fragment set:html={callToAction2} />
                  ) : (
                    <a class="btn w-full" href={callToAction2?.href}>
                      {callToAction2?.icon && (
                        <>
                          <Icon name={callToAction2.icon} class="w-5 h-5 mr-1 -ml-1.5" />{' '}
                        </>
                      )}
                      {callToAction2.text}
                    </a>
                  )}
                </div>
              )
            }
          </div>
        </div>
        {content && <Fragment set:html={content} />}
      </div>
      <div>
        {
          image && (
            <div class="relative m-auto max-w-5xl">
              {typeof image === 'string' ? (
                <Fragment set:html={image} />
              ) : (
                <Picture
                  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"
                  aspectRatio={1024 / 576}
                  loading="eager"
                  width={1024}
                  height={576}
                  {...image}
                />
              )}
            </div>
          )
        }
      </div>
    </div>
  </div>
</section>