CTA Glow Banner

---
/**
 * CtaGlowBanner — Full-width high-converting CTA section with radial cyber mesh and interactive action group.
 * 
 * @param {string} badge - Eyebrow badge.
 * @param {string} title - Main headline.
 * @param {string} subtitle - Description text.
 * @param {string} primaryCtaText - Primary button text.
 * @param {string} secondaryCtaText - Secondary button text.
 */
interface Props {
  badge?: string;
  title?: string;
  subtitle?: string;
  primaryCtaText?: string;
  secondaryCtaText?: string;
  className?: string;
}

const {
  badge = "Get Started Today",
  title = "Ready to Build Something Extraordinary?",
  subtitle = "Join over 10,000 developers building modern, accessible, and blindingly fast Astro web applications.",
  primaryCtaText = "Start Building Free",
  secondaryCtaText = "View Components",
  className = ""
} = Astro.props;
---

<div class="cq-cta-glow-banner-cq">
<section class={`cta-banner-section ${className}`} aria-labelledby="cta-title">
  <div class="container">
    <div class="cta-banner-card">
      <div class="cta-mesh-bg" aria-hidden="true"></div>

      <div class="cta-content">
        {badge && <span class="cta-badge">{badge}</span>}
        <h2 id="cta-title" class="cta-title">{title}</h2>
        <p class="cta-subtitle">{subtitle}</p>

        <!-- CTA Action Buttons & Email Input -->
        <div class="cta-actions">
          <form class="cta-form" onsubmit="event.preventDefault(); alert('Thank you for subscribing!');">
            <input 
              type="email" 
              placeholder="Enter your work email..." 
              required 
              class="cta-input" 
              aria-label="Email address"
            />
            <button type="submit" class="cta-btn cta-btn--primary">
              {primaryCtaText}
            </button>
          </form>
          <a href="/docs/glass-button" class="cta-btn cta-btn--ghost">
            {secondaryCtaText}
          </a>
        </div>

        <!-- Trust Badges Row -->
        <div class="cta-trust-row">
          <div class="trust-item">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10"/></svg>
            <span>SOC2 Type II Certified</span>
          </div>
          <div class="trust-item">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>
            <span>WCAG 2.1 AA Compliant</span>
          </div>
          <div class="trust-item">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/></svg>
            <span>100/100 Lighthouse Performance</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
</div>
<style>
  .cq-cta-glow-banner-cq { container-type: inline-size; }
  .cta-banner-section {
    padding: var(--sp-20, 5rem) var(--sp-6, 1.5rem);
    background: var(--c-bg-primary, #030712);
  }

  .container {
    max-width: 1100px;
    margin: 0 auto;
  }

  .cta-banner-card {
    position: relative;
    background: linear-gradient(135deg, rgba(20, 25, 55, 0.9) 0%, rgba(10, 15, 30, 0.95) 100%);
    border: 1px solid rgba(234, 179, 8, 0.25);
    border-radius: var(--r-2xl, 24px);
    padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 4vw, 3rem);
    text-align: center;
    overflow: hidden;
    box-shadow: 0 25px 60px -20px rgba(0, 0, 0, 0.8), 0 0 40px -15px rgba(234, 179, 8, 0.15);
  }

  .cta-mesh-bg {
    position: absolute;
    inset: -50%;
    background: radial-gradient(circle at 50% 50%, rgba(234, 179, 8, 0.12) 0%, rgba(99, 102, 241, 0.1) 40%, transparent 70%);
    filter: blur(80px);
    pointer-events: none;
    animation: rotateMesh 20s linear infinite;
  }

  @keyframes rotateMesh {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  .cta-content {
    position: relative;
    z-index: 1;
    max-width: 750px;
    margin: 0 auto;
  }

  .cta-badge {
    display: inline-flex;
    padding: 0.35rem 0.9rem;
    border-radius: 9999px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: color-mix(in srgb, var(--c-primary, #b8860b) 15%, transparent);
    color: #facc15;
    border: 1px solid rgba(234, 179, 8, 0.3);
    margin-bottom: var(--sp-4, 1.25rem);
  }

  .cta-title {
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    font-weight: 900;
    color: #fff;
    line-height: 1.15;
    letter-spacing: -0.03em;
    margin: 0 0 var(--sp-4, 1.25rem);
  }

  .cta-subtitle {
    font-size: clamp(1rem, 2vw, 1.2rem);
    color: #94a3b8;
    line-height: 1.6;
    margin: 0 0 2.5rem;
  }

  .cta-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2.5rem;
  }

  .cta-form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.12);
    border-radius: 12px;
    padding: 0.35rem;
    max-width: 460px;
    width: 100%;
  }

  .cta-input {
    flex: 1;
    background: transparent;
    border: none;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    color: #fff;
    outline: none;
  }

  .cta-input::placeholder {
    color: #64748b;
  }

  .cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.8rem 1.4rem;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
    border: none;
  }

  .cta-btn--primary {
    background: linear-gradient(135deg, #eab308, #d97706);
    color: #000;
    box-shadow: 0 4px 15px rgba(234, 179, 8, 0.35);
  }

  .cta-btn--primary:hover {
    filter: brightness(1.1);
    box-shadow: 0 6px 20px rgba(234, 179, 8, 0.5);
  }

  .cta-btn--ghost {
    background: rgb(var(--ink-rgb, 255 255 255) / 0.05);
    color: #fff;
    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.12);
    height: 48px;
    box-sizing: border-box;
  }

  .cta-btn--ghost:hover {
    background: rgb(var(--ink-rgb, 255 255 255) / 0.12);
    border-color: rgb(var(--ink-rgb, 255 255 255) / 0.25);
  }

  .cta-trust-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.08);
  }

  .trust-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: #94a3b8;
    font-weight: 500;
  }

  .trust-item svg {
    color: #eab308;
  }

  @container (max-width: 640px) {
    .cta-form {
      flex-direction: column;
      background: transparent;
      border: none;
      padding: 0;
    }
    .cta-input {
      width: 100%;
      background: rgba(0, 0, 0, 0.4);
      border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.12);
      border-radius: 8px;
      box-sizing: border-box;
    }
    .cta-btn {
      width: 100%;
    }
  }
</style>