'use client';

import './HeroGradient.css';

// HeroGradient.astro — Full-screen hero with animated gradient background

/** HeroGradient — ported from astro-component-kit. */
export interface HeroGradientProps {
  title?: string;
  subtitle?: string;
}

export function HeroGradient({
  title = "Build Beautiful Interfaces",
  subtitle = "Premium open-source UI components for Astro. Copy, paste, and ship faster.",
}: HeroGradientProps) {
  return (
    <>
      <div className="cq-hero-gradient-cq" data-rk-c25c97="">
      <section className="hero-gradient" data-rk-c25c97="">
        <div className="hero-gradient__bg" aria-hidden="true" data-rk-c25c97=""></div>
        <div className="hero-gradient__content" data-rk-c25c97="">
          <span className="hero-gradient__badge" data-rk-c25c97="">⚡ 200+ Components</span>
          <h1 className="hero-gradient__title" data-rk-c25c97="">{title}</h1>
          <p className="hero-gradient__subtitle" data-rk-c25c97="">{subtitle}</p>
          <div className="hero-gradient__actions" data-rk-c25c97="">
            <button className="hero-btn hero-btn--primary" data-rk-c25c97="">
              Get Started
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" data-rk-c25c97=""><path d="M5 12h14M12 5l7 7-7 7" data-rk-c25c97="" /></svg>
            </button>
            <button className="hero-btn hero-btn--glass" data-rk-c25c97="">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" data-rk-c25c97=""><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" data-rk-c25c97="" /><path d="M9 19c0 2.3 1.8 4.2 4 4.2s4-1.9 4-4.2" data-rk-c25c97="" /></svg>
              View on GitHub
            </button>
          </div>
        </div>
      </section>
      </div>
    </>
  );
}

export default HeroGradient;

/* HeroGradient — ported from astro-component-kit (sections/HeroGradient.astro) */

.cq-hero-gradient-cq:where([data-rk-c25c97]) { container-type: inline-size; }
.hero-gradient:where([data-rk-c25c97]) {
  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:where([data-rk-c25c97]) {
  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: hero-gradient-gradientShift 8s ease-in-out infinite alternate;
}
@keyframes hero-gradient-gradientShift {
  0% { opacity: 0.6; transform: scale(1); }
  100% { opacity: 1; transform: scale(1.1); }
}
.hero-gradient__content:where([data-rk-c25c97]) {
  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:where([data-rk-c25c97]) {
  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:where([data-rk-c25c97]) {
  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:where([data-rk-c25c97]) {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--c-text-2);
  line-height: 1.6;
  max-width: 550px;
  margin: 0;
}
.hero-gradient__actions:where([data-rk-c25c97]) {
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--sp-2);
}
.hero-btn:where([data-rk-c25c97]) {
  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:where([data-rk-c25c97]) {
  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:where([data-rk-c25c97]) {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px color-mix(in srgb, var(--c-primary, #b8860b) 45%, transparent);
}
.hero-btn--glass:where([data-rk-c25c97]) {
  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:where([data-rk-c25c97]) {
  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:where([data-rk-c25c97]) { min-height: 70vh; padding: var(--sp-8) var(--sp-4); }
  .hero-gradient__actions:where([data-rk-c25c97]) { flex-direction: column; width: 100%; max-width: 280px; }
  .hero-btn:where([data-rk-c25c97]) { width: 100%; justify-content: center; }
}