component SplitHero {
  props {
    eyebrow = ""
    title = "A better digital experience"
    highlight = ""
    description = ""
    primaryLabel = ""
    primaryHref = ""
    primaryIcon = ""
    secondaryLabel = ""
    secondaryHref = ""
    secondaryIcon = ""
    visualPosition = "right"
    reverse = false
    ratio = "balanced"
    size = "default"
    color = "primary"
    variant = "default"
    trustItems = []
    class = ""
  }

  view {
    <Section
      spacing='{size === "compact" ? "md" : "xl"}'
      variant='{variant === "soft" ? "soft" : "default"}'
      color='{color}'
      class='overflow-hidden {class}'
    >
      <div
        data-ui-component="SplitHero"
        class="grid items-center gap-10 lg:grid-cols-2 lg:gap-16"
        class:lg:grid-cols-[1.15fr_0.85fr]='ratio === "content"'
        class:lg:grid-cols-[0.85fr_1.15fr]='ratio === "visual"'
      >
        <div
          class="max-w-3xl"
          class:lg:order-2='reverse || visualPosition === "left"'
        >
          {#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="icon-[lucide--sparkles] size-4" aria-hidden="true"></span>
              <span>{eyebrow}</span>
            </div>
          {/if}

          <h1 class="text-4xl font-bold leading-[1.08] tracking-[-0.035em] text-[var(--wire-color-text)] sm:text-5xl lg:text-6xl">
            <span>{title}</span>
            {#if highlight}
              <span class="block text-[var(--wire-color-primary)]">{highlight}</span>
            {/if}
          </h1>

          {#if description}
            <p class="mt-6 text-base leading-8 text-[var(--wire-color-text-muted)] sm:text-lg">{description}</p>
          {/if}

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

          {#if trustItems.length > 0}
            <div class="mt-8 flex flex-wrap gap-x-6 gap-y-3 text-sm text-[var(--wire-color-text-muted)]">
              {#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="relative min-w-0"
          class:lg:order-1='reverse || visualPosition === "left"'
        >
          <div class="absolute -inset-8 -z-10 rounded-[2.5rem] bg-[var(--wire-color-primary-soft)] blur-2xl" aria-hidden="true"></div>
          <slot name="visual"></slot>
        </div>
      </div>
    </Section>
  }
}