component Hero {
  props {
    eyebrow = ""
    title = "Build something remarkable"
    highlight = ""
    description = ""
    align = "left"
    size = "default"
    color = "primary"
    variant = "default"
    primaryLabel = ""
    primaryHref = ""
    primaryIcon = ""
    secondaryLabel = ""
    secondaryHref = ""
    secondaryIcon = ""
    tertiaryLabel = ""
    tertiaryHref = ""
    badges = []
    trustItems = []
    maxWidth = "xl"
    class = ""
  }

  view {
    <Section
      spacing='{size === "compact" ? "md" : (size === "large" ? "xl" : "lg")}'
      maxWidth='{maxWidth}'
      variant='{variant === "solid" ? "solid" : (variant === "soft" ? "soft" : "default")}'
      color='{color}'
      class='overflow-hidden {class}'
    >
      <div
        data-ui-component="Hero"
        class="relative isolate"
        class:text-center='align === "center"'
      >
        {#if variant === "gradient"}
          <div
            class="pointer-events-none absolute inset-0 -z-10 rounded-[2rem] opacity-80"
            style="background: radial-gradient(circle at 15% 20%, var(--wire-color-primary-muted), transparent 35%), radial-gradient(circle at 85% 75%, var(--wire-color-secondary-muted), transparent 36%);"
            aria-hidden="true"
          ></div>
        {/if}

        <div
          class="max-w-4xl"
          class:mx-auto='align === "center"'
          class:ml-auto='align === "right"'
        >
          <slot name="eyebrow"></slot>

          {#if eyebrow}
            <div
              class="mb-6 inline-flex items-center gap-2 rounded-full border border-[var(--wire-color-primary-muted)] bg-[var(--wire-color-primary-soft)] px-4 py-2 text-sm font-semibold text-[var(--wire-color-primary)]"
            >
              <span class="size-2 rounded-full bg-[var(--wire-color-primary)]" aria-hidden="true"></span>
              <span>{eyebrow}</span>
            </div>
          {/if}

          <h1
            class="font-bold leading-[1.06] tracking-[-0.04em]"
            class:text-4xl='size === "compact"'
            class:sm:text-5xl='size === "compact"'
            class:text-5xl='size === "default"'
            class:sm:text-6xl='size === "default"'
            class:lg:text-7xl='size === "default" || size === "large"'
            class:text-[var(--wire-color-text)]='variant !== "solid"'
          >
            <span>{title}</span>
            {#if highlight}
              <span class="block bg-gradient-to-r from-[var(--wire-color-primary)] to-[var(--wire-color-secondary)] bg-clip-text text-transparent">
                {highlight}
              </span>
            {/if}
          </h1>

          {#if description}
            <p
              class="mt-6 max-w-3xl text-base leading-8 text-[var(--wire-color-text-muted)] sm:text-lg"
              class:mx-auto='align === "center"'
              class:ml-auto='align === "right"'
              class:text-[var(--wire-color-on-primary)]='variant === "solid"'
              class:opacity-85='variant === "solid"'
            >
              {description}
            </p>
          {/if}

          {#if badges.length > 0}
            <div class="mt-6 flex flex-wrap gap-2" class:justify-center='align === "center"' class:justify-end='align === "right"'>
              {#each badges as badge}
                <Badge
                  label='{badge.label || badge.title || badge}'
                  icon='{badge.icon || ""}'
                  color='{badge.color || color}'
                  variant='{badge.variant || "soft"}'
                  size='{badge.size || "sm"}'
                />
              {/each}
            </div>
          {/if}

          <div class="mt-8">
            <HeroActions
              actions='{[
                { label: primaryLabel, href: primaryHref, icon: primaryIcon, variant: "default", color: color },
                { label: secondaryLabel, href: secondaryHref, icon: secondaryIcon, variant: "outline", color: color },
                { label: tertiaryLabel, href: tertiaryHref, variant: "ghost", color: color }
              ]}'
              align='{align}'
              stackOnMobile="true"
              fullWidthMobile="true"
              size='{size === "compact" ? "default" : "lg"}'
              color='{color}'
            >
              <slot name="actions"></slot>
            </HeroActions>
          </div>

          {#if trustItems.length > 0}
            <div
              class="mt-8 flex flex-wrap items-center gap-x-6 gap-y-3 text-sm text-[var(--wire-color-text-muted)]"
              class:justify-center='align === "center"'
              class:justify-end='align === "right"'
            >
              {#each trustItems as item}
                <span class="inline-flex items-center gap-2">
                  <span class='{(item.icon || "icon-[lucide--check-circle-2]") + " size-4 text-[var(--wire-color-primary)]"}' aria-hidden="true"></span>
                  <span>{item.label || item.title || item}</span>
                </span>
              {/each}
            </div>
          {/if}

          <slot name="trust"></slot>
          <slot></slot>
        </div>

        <div class="mt-10">
          <slot name="visual"></slot>
        </div>

        <slot name="footer"></slot>
      </div>
    </Section>
  }
}