// audit-cta.jsx — “Book a free audit” CTA (Uiverse marcelodolza-style animation)

const AUDIT_PLANE_ICON = (
  <svg
    viewBox="0 0 24 24"
    width="20"
    height="20"
    fill="none"
    stroke="currentColor"
    strokeWidth="2.2"
    strokeLinecap="round"
    strokeLinejoin="round"
    aria-hidden="true"
  >
    <path d="M22 2 11 13" />
    <path d="M22 2 15 22 11 13 2 9 22 2z" />
  </svg>
);

function AuditCtaInner() {
  const text = 'Book a free audit';
  const letterSpans = [...text].map((ch, i) => (
    <span key={i} style={{ '--i': i }}>
      {ch === ' ' ? '\u00a0' : ch}
    </span>
  ));
  const baseI = text.length;
  return (
    <>
      <span className="outline" aria-hidden="true" />
      <span className="state state--default">
        <span className="icon">{AUDIT_PLANE_ICON}</span>
        <p>
          {letterSpans}
          <span className="btn-marc-arrow" style={{ '--i': baseI }}>
            →
          </span>
        </p>
      </span>
    </>
  );
}

function AuditCta({
  href = '#contact',
  onClick,
  className = '',
  compact = false,
  fill = false,
  asSubmit = false,
  loading = false,
  disabled = false,
}) {
  const cls = [
    'btn-marc',
    compact && 'btn-marc--compact',
    fill && 'btn-marc--fill',
    className,
  ]
    .filter(Boolean)
    .join(' ');

  if (asSubmit) {
    return (
      <button
        type="submit"
        className={cls}
        disabled={disabled || loading}
      >
        {loading ? (
          <span className="btn-marc-loading">Sending…</span>
        ) : (
          <AuditCtaInner />
        )}
      </button>
    );
  }

  return (
    <a href={href} className={cls} onClick={onClick}>
      <AuditCtaInner />
    </a>
  );
}

window.AuditCta = AuditCta;