---
import Image from '~/components/common/Image.astro';
import Button from '~/components/ui/Button.astro';
import Background from '~/components/ui/Background.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-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]" aria-hidden="true">
    <div class="relative left-[calc(50%+3rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr from-[#89CFF0] to-[#A2CFFE] opacity-30 sm:left-[calc(50%+36rem)] sm:w-[72.1875rem]" style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"></div>
  </div>    
  <div class="absolute left-[calc(50%-4rem)] top-10 -z-10 transform-gpu blur-3xl sm:left-[calc(50%-18rem)] lg:left-48 lg:top-[calc(50%-30rem)] xl:left-[calc(50%-24rem)]" aria-hidden="true">
    <div class="aspect-[1108/632] w-[69.25rem] bg-[#80caff] opacity-10" style="clip-path: polygon(26.4% 51.7%, 8.3% 11.8%, 0% 46.4%, 2.6% 82.2%, 7.5% 84.9%, 24.3% 64%, 44.7% 47.5%, 53.5% 49.4%, 55% 62.9%, 49.7% 87.2%, 78.7% 64.1%, 99.9% 100%, 94.6% 51.1%, 78.6% 63.9%, 41.1% 0.2%, 26.4% 51.7%)"></div>
  </div> 
  <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">
      <div class="text-center pb-10 md:pb-16 max-w-5xl mx-auto">
        <div>
          {
            image && (
              <div class="relative m-auto max-w-5xl">
                {typeof image === 'string' ? (
                  <Fragment set:html={image} />
                ) : (
                  <Image
                    class="mx-auto rounded-md w-full"
                    widths={[100, 192, 256, 510]}
                    sizes="(max-width: 767px) 100px, (max-width: 1023px) 192px, (max-width: 2039px) 256px, 510px"
                    loading="eager"
                    width={256}
                    height={256}
                    {...image}
                  />
                )}
              </div>
            )
          }
        </div>
        {
          tagline && (
            <p
              class="text-base text-secondary dark:text-blue-200 font-bold tracking-wide uppercase"
              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"
              set:html={title}
            />
          )
        }
        <div class="max-w-3xl mx-auto">
          {subtitle && <p class="text-xl text-muted mb-6 dark:text-slate-300" 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">
                {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>
  </div>
</section>
