WRNexusJS/packages/ui/components/CTASection.wrn

component CTASection {
  props {
    eyebrow = ""
    title = "Ready to get started?"
    description = ""
    icon = ""
    align = "center"
    size = "default"
    color = "primary"
    variant = "solid"
    primaryLabel = "Get started"
    primaryHref = "#"
    primaryIcon = ""
    secondaryLabel = ""
    secondaryHref = ""
    secondaryIcon = ""
    backgroundImage = ""
    maxWidth = "xl"
    class = ""
  }

  view {
    <Section
      spacing='{size === "compact" ? "md" : "lg"}'
      variant="default"
      color='{color}'
      maxWidth='{maxWidth}'
      class='{class}'
    >
      <div
        data-ui-component="CTASection"
        class="relative isolate overflow-hidden rounded-3xl border border-[var(--wire-color-border)] p-8 shadow-xl sm:p-10 lg:p-14"
        class:bg-[var(--wire-color-primary)]='variant === "solid" && color === "primary"'
        class:text-[var(--wire-color-on-primary)]='variant === "solid" && color === "primary"'
        class:bg-[var(--wire-color-danger)]='variant === "solid" && color === "danger"'
        class:text-[var(--wire-color-on-danger)]='variant === "solid" && color === "danger"'
        class:bg-[var(--wire-color-primary-soft)]='variant === "soft" && color === "primary"'
        class:bg-[var(--wire-color-success-soft)]='variant === "soft" && color === "success"'
        class:bg-[var(--wire-color-warning-soft)]='variant === "soft" && color === "warning"'
        class:bg-[var(--wire-color-danger-soft)]='variant === "soft" && color === "danger"'
        class:bg-[var(--wire-color-surface-raised)]='variant === "default" || variant === "outline"'
        class:bg-gradient-to-br='variant === "gradient"'
        class:from-[var(--wire-color-primary)]='variant === "gradient"'
        class:to-[var(--wire-color-secondary)]='variant === "gradient"'
        class:text-[var(--wire-color-on-primary)]='variant === "gradient"'
        class:text-center='align === "center"'
      >
        {#if backgroundImage}
          <img
            src='{backgroundImage}'
            alt=""
            aria-hidden="true"
            class="absolute inset-0 -z-20 h-full w-full object-cover opacity-15"
          />
        {/if}

        <div
          class="pointer-events-none absolute -right-20 -top-20 -z-10 size-72 rounded-full bg-white/15 blur-3xl"
          aria-hidden="true"
        ></div>
        <div
          class="pointer-events-none absolute -bottom-24 -left-20 -z-10 size-72 rounded-full bg-black/10 blur-3xl"
          aria-hidden="true"
        ></div>

        <div
          class="flex flex-col gap-8"
          class:items-center='align === "center"'
          class:lg:flex-row='align === "split"'
          class:lg:items-center='align === "split"'
          class:lg:justify-between='align === "split"'
        >
          <div class="max-w-3xl">
            {#if icon}
              <span
                class="mb-5 inline-flex size-12 items-center justify-center rounded-2xl bg-white/15"
                class:bg-[var(--wire-color-primary-soft)]='variant !== "solid" && variant !== "gradient"'
                class:text-[var(--wire-color-primary)]='variant !== "solid" && variant !== "gradient"'
              >
                <span class='{icon + " size-6"}' aria-hidden="true"></span>
              </span>
            {/if}

            {#if eyebrow}
              <p
                class="text-xs font-bold uppercase tracking-[0.18em]"
                class:text-[var(--wire-color-primary)]='variant !== "solid" && variant !== "gradient"'
                class:opacity-80='variant === "solid" || variant === "gradient"'
              >
                {eyebrow}
              </p>
            {/if}

            <h2
              class="mt-3 text-3xl font-bold leading-tight tracking-tight sm:text-4xl lg:text-5xl"
              class:text-[var(--wire-color-text)]='variant !== "solid" && variant !== "gradient"'
            >
              {title}
            </h2>

            {#if description}
              <p
                class="mt-4 text-base leading-7 sm:text-lg"
                class:text-[var(--wire-color-text-muted)]='variant !== "solid" && variant !== "gradient"'
                class:opacity-85='variant === "solid" || variant === "gradient"'
              >
                {description}
              </p>
            {/if}

            <slot></slot>
          </div>

          <HeroActions
            actions='{[
              {
                label: primaryLabel,
                href: primaryHref,
                icon: primaryIcon,
                variant: "default",
                color: color,
                controlClass: variant === "solid" || variant === "gradient" ? "!bg-white !text-[var(--wire-color-primary)] hover:!bg-white/90" : ""
              },
              {
                label: secondaryLabel,
                href: secondaryHref,
                icon: secondaryIcon,
                variant: "outline",
                color: color,
                controlClass: variant === "solid" || variant === "gradient" ? "!border-white/50 !text-white hover:!bg-white/10" : ""
              }
            ]}'
            align='{align === "center" ? "center" : "right"}'
            stackOnMobile="true"
            fullWidthMobile="true"
            size="lg"
            color='{color}'
            class="shrink-0"
          >
            <slot name="actions"></slot>
          </HeroActions>

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

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