---
// HeroGradient.astro — Full-screen hero with animated gradient background
interface Props {
  title?: string;
  subtitle?: string;
}

const {
  title = "Build Beautiful Interfaces",
  subtitle = "Premium open-source UI components for Astro. Copy, paste, and ship faster.",
} = Astro.props;
---

<div class="cq-hero-gradient-cq">
<section class="hero-gradient">
  <div class="hero-gradient__bg" aria-hidden="true"></div>
  <div class="hero-gradient__content">
    <span class="hero-gradient__badge">⚡ 200+ Components</span>
    <h1 class="hero-gradient__title">{title}</h1>
    <p class="hero-gradient__subtitle">{subtitle}</p>
    <div class="hero-gradient__actions">
      <button class="hero-btn hero-btn--primary">
        Get Started
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
      </button>
      <button class="hero-btn hero-btn--glass">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77 5.44 5.44 0 0 0 3.5 8.53a5.44 5.44 0 0 0-.09 2.61 3.37 3.37 0 0 0-.94 2.61s3.3 1.19 6.44 1.54"/><path d="M9 19c0 2.3 1.8 4.2 4 4.2s4-1.9 4-4.2"/></svg>
        View on GitHub
      </button>
    </div>
  </div>
</section>
</div>
<style>
  .cq-hero-gradient-cq { container-type: inline-size; }
  .hero-gradient {
    position: relative;
    min-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: var(--sp-12) var(--sp-6);
  }
  .hero-gradient__bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      135deg,
      color-mix(in srgb, var(--c-primary, #b8860b) 25%, transparent) 0%,
      transparent 40%,
      transparent 60%,
      color-mix(in srgb, var(--c-primary, #b8860b) 15%, transparent) 100%
    );
    animation: gradientShift 8s ease-in-out infinite alternate;
  }
  @keyframes gradientShift {
    0% { opacity: 0.6; transform: scale(1); }
    100% { opacity: 1; transform: scale(1.1); }
  }
  .hero-gradient__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-6);
    text-align: center;
    max-width: 800px;
  }
  .hero-gradient__badge {
    display: inline-block;
    padding: 0.4rem 1rem;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--c-primary-light);
    background: color-mix(in srgb, var(--c-primary, #b8860b) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--c-primary, #b8860b) 30%, transparent);
    border-radius: var(--r-full);
  }
  .hero-gradient__title {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 900;
    color: var(--c-text-1);
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin: 0;
  }
  .hero-gradient__subtitle {
    font-size: clamp(1rem, 2vw, 1.2rem);
    color: var(--c-text-2);
    line-height: 1.6;
    max-width: 550px;
    margin: 0;
  }
  .hero-gradient__actions {
    display: flex;
    gap: var(--sp-4);
    flex-wrap: wrap;
    justify-content: center;
    margin-top: var(--sp-2);
  }
  .hero-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 0.85rem 1.8rem;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: var(--font-sans);
    border: none;
    border-radius: var(--r-md);
    cursor: pointer;
    transition: all 0.25s ease;
    text-decoration: none;
  }
  .hero-btn--primary {
    background: linear-gradient(135deg, var(--c-primary-light), var(--c-primary));
    color: var(--c-on-primary, #0a0a0a);
    box-shadow: 0 4px 24px color-mix(in srgb, var(--c-primary, #b8860b) 30%, transparent);
  }
  .hero-btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px color-mix(in srgb, var(--c-primary, #b8860b) 45%, transparent);
  }
  .hero-btn--glass {
    background: rgb(var(--ink-rgb, 255 255 255) / 0.05);
    backdrop-filter: blur(12px);
    color: var(--c-text-1);
    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.12);
  }
  .hero-btn--glass:hover {
    background: rgb(var(--ink-rgb, 255 255 255) / 0.1);
    border-color: color-mix(in srgb, var(--c-primary, #b8860b) 30%, transparent);
    transform: translateY(-2px);
  }

  @container (max-width: 640px) {
    .hero-gradient { min-height: 70vh; padding: var(--sp-8) var(--sp-4); }
    .hero-gradient__actions { flex-direction: column; width: 100%; max-width: 280px; }
    .hero-btn { width: 100%; justify-content: center; }
  }
</style>