<div
  class="tw-box-border tw-bg-background tw-text-main tw-border tw-border-secondary-100 tw-rounded-3xl tw-p-8 tw-shadow-sm tw-size-full tw-flex tw-flex-col"
>
  <!-- Title Section with Active Badge -->
  <div class="tw-flex tw-items-center tw-justify-between tw-mb-2">
    <ng-content select="[slot=title]"></ng-content>

    <!-- Active Badge (if provided) -->
    @if (activeBadge(); as activeBadgeValue) {
      <span bitBadge [variant]="activeBadgeValue.variant || 'primary'" class="tw-ml-3">
        {{ activeBadgeValue.text }}
      </span>
    }
  </div>

  <!-- Tagline with consistent height (exactly 2 lines) -->
  <div class="tw-mb-6 tw-h-6">
    <p bitTypography="helper" class="tw-text-muted tw-m-0 tw-leading-relaxed tw-line-clamp-2">
      {{ tagline() }}
    </p>
  </div>

  <!-- Price Section (if provided) -->
  @if (price(); as priceValue) {
    <div class="tw-mb-6">
      <div class="tw-flex tw-items-baseline tw-gap-1 tw-flex-wrap">
        <span class="tw-text-3xl tw-font-bold tw-leading-none tw-m-0">{{
          priceValue.amount | currency: "$"
        }}</span>
        <span bitTypography="helper" class="tw-text-muted">
          / {{ priceValue.cadence }}
          @if (priceValue.showPerUser) {
            per user
          }
        </span>
      </div>
    </div>
  }

  <!-- Button space (always reserved) -->
  <div class="tw-mb-6 tw-h-12">
    @if (button(); as buttonConfig) {
      <button
        bitButton
        [buttonType]="buttonConfig.type"
        [block]="true"
        [disabled]="buttonConfig.disabled"
        (click)="onButtonClick()"
        type="button"
      >
        @if (buttonConfig.icon?.position === "before") {
          <i class="bwi {{ buttonConfig.icon.type }} tw-me-2" aria-hidden="true"></i>
        }
        {{ buttonConfig.text }}
        @if (
          buttonConfig.icon &&
          (buttonConfig.icon.position === "after" || !buttonConfig.icon.position)
        ) {
          <i class="bwi {{ buttonConfig.icon.type }} tw-ms-2" aria-hidden="true"></i>
        }
      </button>
    }
  </div>

  <!-- Features List -->
  <div class="tw-flex-grow">
    @if (features(); as featureList) {
      @if (featureList.length > 0) {
        <ul class="tw-list-none tw-p-0 tw-m-0">
          @for (feature of featureList; track feature) {
            <li class="tw-flex tw-items-start tw-gap-2 tw-mb-2 last:tw-mb-0">
              <i
                class="bwi bwi-check tw-text-primary-600 tw-mt-0.5 tw-flex-shrink-0"
                aria-hidden="true"
              ></i>
              <span bitTypography="helper" class="tw-text-muted tw-leading-relaxed">{{
                feature
              }}</span>
            </li>
          }
        </ul>
      }
    }
  </div>
</div>
