import { CommonModule } from '@angular/common';
import { Component, computed, EventEmitter, inject, input, Output } from '@angular/core';
import { RouterLink } from '@angular/router';
import { IonButton } from '@ionic/angular/standalone';
import { I18nService } from '../../../services/i18n';
import { AUTH_CTA_DEFAULTS } from './types';
import * as i0 from "@angular/core";
const IONIC_COLORS = ['primary', 'secondary', 'tertiary', 'success', 'warning', 'danger', 'light', 'medium', 'dark'];
const AUTH_CTA_I18N = {
    es: { login: 'Iniciar sesión', register: 'Registrarse' },
    en: { login: 'Log in', register: 'Sign up' },
};
/**
 * val-auth-cta
 *
 * Full-width CTA section inviting unauthenticated users to sign up or log in.
 * Desktop: text on the left, optional image on the right.
 * Mobile: stacked, image below text.
 *
 * Auto-registers its own i18n defaults (AuthCta namespace) so there are never
 * missing keys, even if the consumer does not register them.
 *
 * @example
 * ```html
 * <val-auth-cta
 *   [props]="{
 *     title: 'Join Valtech today',
 *     subtitle: 'The platform built for teams that ship.',
 *     loginRoute: '/login',
 *     registerRoute: '/register'
 *   }"
 *   (onLogin)="openLogin()"
 *   (onRegister)="openRegister()"
 * />
 * ```
 */
export class AuthCtaComponent {
    constructor() {
        this.i18n = inject(I18nService);
        /** Component configuration */
        this.props = input({});
        /** Emitted when the login button is clicked */
        this.onLogin = new EventEmitter();
        /** Emitted when the register button is clicked */
        this.onRegister = new EventEmitter();
        /** Merged configuration with defaults */
        this.config = computed(() => ({
            ...AUTH_CTA_DEFAULTS,
            ...this.props(),
        }));
        this.loginLabel = computed(() => this.config().loginLabel ?? this.i18n.t('AuthCta.login'));
        this.registerLabel = computed(() => this.config().registerLabel ?? this.i18n.t('AuthCta.register'));
        this.resolvedBg = computed(() => {
            const bg = this.config().backgroundColor;
            if (!bg)
                return undefined;
            return IONIC_COLORS.includes(bg) ? `var(--ion-color-${bg})` : bg;
        });
        if (!this.i18n.hasNamespace('AuthCta')) {
            this.i18n.registerContent('AuthCta', AUTH_CTA_I18N);
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AuthCtaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AuthCtaComponent, isStandalone: true, selector: "val-auth-cta", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onLogin: "onLogin", onRegister: "onRegister" }, ngImport: i0, template: `
    <div
      class="auth-cta"
      [class.auth-cta--center]="config().align === 'center'"
      [class.auth-cta--has-image]="!!config().image"
      [style.padding]="config().padding"
      [style.border-radius]="config().borderRadius"
      [style.background-color]="resolvedBg()"
    >
      <div class="auth-cta__text">
        @if (config().eyebrow) {
          <span class="auth-cta__eyebrow">{{ config().eyebrow }}</span>
        }

        <h2 class="auth-cta__title">{{ config().title }}</h2>

        @if (config().subtitle) {
          <p class="auth-cta__subtitle">{{ config().subtitle }}</p>
        }

        <div class="auth-cta__actions">
          <ion-button
            class="auth-cta__btn-register"
            fill="solid"
            color="dark"
            shape="round"
            [routerLink]="config().registerRoute ?? null"
            [attr.href]="config().registerHref ?? null"
            (click)="onRegister.emit()"
          >
            {{ registerLabel() }}
          </ion-button>

          <ion-button
            class="auth-cta__btn-login"
            fill="outline"
            color="dark"
            shape="round"
            [routerLink]="config().loginRoute ?? null"
            [attr.href]="config().loginHref ?? null"
            (click)="onLogin.emit()"
          >
            {{ loginLabel() }}
          </ion-button>
        </div>
      </div>

      @if (config().image) {
        <div class="auth-cta__image-wrap">
          <img class="auth-cta__image" [src]="config().image" [alt]="config().imageAlt ?? ''" loading="lazy" />
        </div>
      }
    </div>
  `, isInline: true, styles: [":host{display:block}.auth-cta{display:flex;flex-direction:row;align-items:center;gap:3rem;background:var(--ion-background-color)}.auth-cta--center{text-align:center}.auth-cta--center .auth-cta__actions{justify-content:center}.auth-cta--has-image{text-align:start}.auth-cta--has-image .auth-cta__actions{justify-content:flex-start}.auth-cta__text{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:1rem}.auth-cta__eyebrow{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--ion-color-primary)}.auth-cta__title{margin:0;font-size:2rem;font-weight:800;line-height:1.2;color:var(--ion-text-color)}.auth-cta__subtitle{margin:0;font-size:1.05rem;line-height:1.6;color:var(--ion-color-medium-shade)}.auth-cta__actions{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;margin-top:.5rem}.auth-cta__image-wrap{flex:0 0 auto;max-width:420px;width:40%}.auth-cta__image{display:block;width:100%;height:auto;border-radius:12px;object-fit:cover}@media (max-width: 768px){.auth-cta{flex-direction:column;gap:2rem;text-align:center}.auth-cta--has-image{text-align:center}.auth-cta--has-image .auth-cta__actions{justify-content:center}.auth-cta__image-wrap{max-width:100%;width:100%}.auth-cta__actions{justify-content:center}}:host-context(body.dark) .auth-cta__title,:host-context(html.ion-palette-dark) .auth-cta__title,:host-context([data-theme=dark]) .auth-cta__title{color:var(--ion-text-color)}:host-context(body.dark) .auth-cta__subtitle,:host-context(html.ion-palette-dark) .auth-cta__subtitle,:host-context([data-theme=dark]) .auth-cta__subtitle{color:var(--ion-color-medium)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AuthCtaComponent, decorators: [{
            type: Component,
            args: [{ selector: 'val-auth-cta', standalone: true, imports: [CommonModule, RouterLink, IonButton], template: `
    <div
      class="auth-cta"
      [class.auth-cta--center]="config().align === 'center'"
      [class.auth-cta--has-image]="!!config().image"
      [style.padding]="config().padding"
      [style.border-radius]="config().borderRadius"
      [style.background-color]="resolvedBg()"
    >
      <div class="auth-cta__text">
        @if (config().eyebrow) {
          <span class="auth-cta__eyebrow">{{ config().eyebrow }}</span>
        }

        <h2 class="auth-cta__title">{{ config().title }}</h2>

        @if (config().subtitle) {
          <p class="auth-cta__subtitle">{{ config().subtitle }}</p>
        }

        <div class="auth-cta__actions">
          <ion-button
            class="auth-cta__btn-register"
            fill="solid"
            color="dark"
            shape="round"
            [routerLink]="config().registerRoute ?? null"
            [attr.href]="config().registerHref ?? null"
            (click)="onRegister.emit()"
          >
            {{ registerLabel() }}
          </ion-button>

          <ion-button
            class="auth-cta__btn-login"
            fill="outline"
            color="dark"
            shape="round"
            [routerLink]="config().loginRoute ?? null"
            [attr.href]="config().loginHref ?? null"
            (click)="onLogin.emit()"
          >
            {{ loginLabel() }}
          </ion-button>
        </div>
      </div>

      @if (config().image) {
        <div class="auth-cta__image-wrap">
          <img class="auth-cta__image" [src]="config().image" [alt]="config().imageAlt ?? ''" loading="lazy" />
        </div>
      }
    </div>
  `, styles: [":host{display:block}.auth-cta{display:flex;flex-direction:row;align-items:center;gap:3rem;background:var(--ion-background-color)}.auth-cta--center{text-align:center}.auth-cta--center .auth-cta__actions{justify-content:center}.auth-cta--has-image{text-align:start}.auth-cta--has-image .auth-cta__actions{justify-content:flex-start}.auth-cta__text{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:1rem}.auth-cta__eyebrow{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--ion-color-primary)}.auth-cta__title{margin:0;font-size:2rem;font-weight:800;line-height:1.2;color:var(--ion-text-color)}.auth-cta__subtitle{margin:0;font-size:1.05rem;line-height:1.6;color:var(--ion-color-medium-shade)}.auth-cta__actions{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;margin-top:.5rem}.auth-cta__image-wrap{flex:0 0 auto;max-width:420px;width:40%}.auth-cta__image{display:block;width:100%;height:auto;border-radius:12px;object-fit:cover}@media (max-width: 768px){.auth-cta{flex-direction:column;gap:2rem;text-align:center}.auth-cta--has-image{text-align:center}.auth-cta--has-image .auth-cta__actions{justify-content:center}.auth-cta__image-wrap{max-width:100%;width:100%}.auth-cta__actions{justify-content:center}}:host-context(body.dark) .auth-cta__title,:host-context(html.ion-palette-dark) .auth-cta__title,:host-context([data-theme=dark]) .auth-cta__title{color:var(--ion-text-color)}:host-context(body.dark) .auth-cta__subtitle,:host-context(html.ion-palette-dark) .auth-cta__subtitle,:host-context([data-theme=dark]) .auth-cta__subtitle{color:var(--ion-color-medium)}\n"] }]
        }], ctorParameters: () => [], propDecorators: { onLogin: [{
                type: Output
            }], onRegister: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 