/**
 * CTA Button Component
 * Full-width purple button with white underlined text
 */
class CtaButton extends HTMLElement {
  static get observedAttributes() {
    return ["href"];
  }

  constructor() {
    super();
    this.attachShadow({ mode: "open" });
  }

  connectedCallback() {
    this.render();
  }

  attributeChangedCallback() {
    this.render();
  }

  get href() {
    return this.getAttribute("href") || "#";
  }

  render() {
    const isLink = this.hasAttribute("href");
    const tag = isLink ? "a" : "button";
    const hrefAttr = isLink ? `href="${this.href}"` : "";

    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          width: 100%;
        }

        .cta-button {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;
          height: 48px;
          padding: 0;
          background-color: var(--color-button-primary, #951d51);
          border: none;
          border-radius: var(--radius-sm, 0.25rem);
          color: var(--color-text-inverse, #ffffff);
          font-family: inherit;
          font-size: 16px;
          line-height: 24px;
          text-decoration: underline;
          text-underline-offset: 3px;
          cursor: pointer;
          transition: opacity var(--transition-fast, 150ms ease);
        }

        .cta-button:hover {
          opacity: 0.9;
        }

        .cta-button:active {
          opacity: 0.8;
        }

        a.cta-button {
          text-decoration: none;
        }

        a.cta-button .button-text {
          text-decoration: underline;
          text-underline-offset: 3px;
        }
      </style>
      <${tag} class="cta-button" ${hrefAttr} type="${isLink ? "" : "button"}">
        <span class="button-text">
          <slot></slot>
        </span>
      </${tag}>
    `;
  }
}

customElements.define("cta-button", CtaButton);