---
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-0 pointer-events-none" aria-hidden="true">
    <slot name="bg">
      {bg ? <Fragment set:html={bg} /> : null}
    </slot>
  </div>
  <!--Header finisher-->  
<div class="pt-0 md:pt-[76px] pointer-events-none"></div>
  
<!-- Splashback -->
<div
  class="relative overflow-hidden rounded-lg bg-cover bg-no-repeat p-12 text-center"
  style="background-image: url(~/assets/images/tech-road.jpeg); height: 1000px">
  <div
    class="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-fixed"
    style="background-color: rgba(0, 0, 0, 0.6)">
    <div class="flex h-full items-center justify-center">
      <div class="text-center pb-10 md:pb-16 max-w-5xl mx-auto">
        {
          tagline && (
            <p
              class="text-base text-blue-200 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 text-gray-200 dark:text-gray-200"
              set:html={title}
            />
          )
        }
        <div class="max-w-3xl mx-auto">
          {subtitle && <p class="text-xl text-slate-300 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>
</div>
<!-- Jumbotron -->

</section>