Feature Hero Section

'use client';

import type { CSSProperties, ReactNode } from 'react';
import './FeatureHero.css';

/** class:list → className */
function cx(...args: unknown[]): string {
  const out: string[] = [];
  const walk = (v: unknown) => {
    if (!v) return;
    if (typeof v === 'string' || typeof v === 'number') out.push(String(v));
    else if (Array.isArray(v)) v.forEach(walk);
    else if (typeof v === 'object') for (const [k, on] of Object.entries(v as Record<string, unknown>)) if (on) out.push(k);
  };
  args.forEach(walk);
  return out.join(' ');
}

/** "a: b; --c: d" → style object */
function st(css: string | undefined): CSSProperties {
  const o: Record<string, string> = {};
  for (const decl of String(css ?? '').split(';')) {
    const i = decl.indexOf(':');
    if (i < 0) continue;
    const k = decl.slice(0, i).trim();
    if (k) o[k.startsWith('--') ? k : k.replace(/-([a-z])/g, (_, c) => c.toUpperCase())] = decl.slice(i + 1).trim();
  }
  return o as CSSProperties;
}

/**
 * FeatureHero — A visually striking hero section with animated gradient background and glassmorphism overlay.
 *
 * Features a full-screen hero with subtle gradient background, glass-effect card overlay,
 * and customizable title, subtitle, and action slots. Designed for landing pages and
 * product showcase sections.
 *
 * @param {string} title - Main headline text. Default: 'Experience the Next Dimension of Design'.
 * @param {string} subtitle - Supporting description text. Default: 'Build stunning interfaces faster than ever with our premium component ecosystem.'.
 * @param {string} gradientFrom - Start color of the background gradient. Default: 'rgba(99,102,241,0.15)'.
 * @param {string} gradientTo - End color of the background gradient. Default: 'transparent'.
 * @param {string} className - Additional CSS class to apply.
 *
 * @example
 * ```astro
 * <FeatureHero
 *   title="Ship Faster with Premium Components"
 *   subtitle="200+ production-ready UI components for Astro."
 * >
 *   <a href="/docs">Browse Components</a>
 * </FeatureHero>
 * ```
 */
export interface FeatureHeroProps {
  title?: string;
  subtitle?: string;
  gradientFrom?: string;
  gradientTo?: string;
  className?: string;
  children?: ReactNode;
}

export function FeatureHero({
  title = 'Experience the Next Dimension of Design',
  subtitle = 'Build stunning interfaces faster than ever with our premium component ecosystem.',
  gradientFrom = 'rgba(99,102,241,0.15)',
  gradientTo = 'transparent',
  className = '',
  children
}: FeatureHeroProps) {
  return (
    <>
      <div className="cq-feature-hero-cq" data-rk-4c81ec="">
      <section className={cx(['feature-hero', className])} data-rk-4c81ec="">
        <div className="feature-hero__bg" aria-hidden="true" data-rk-4c81ec="">
          <div className="feature-hero__gradient" style={st(`--gradient-from: ${gradientFrom}; --gradient-to: ${gradientTo}`)} data-rk-4c81ec=""></div>
        </div>
        <div className="feature-hero__overlay" aria-hidden="true" data-rk-4c81ec=""></div>
        <div className="feature-hero__inner" data-rk-4c81ec="">
          <h1 className="feature-hero__title" data-rk-4c81ec="">{title}</h1>
          <p className="feature-hero__subtitle" data-rk-4c81ec="">{subtitle}</p>
          <div className="feature-hero__actions" data-rk-4c81ec="">
            {children}
          </div>
        </div>
      </section>
      </div>
    </>
  );
}

export default FeatureHero;

/* FeatureHero — ported from astro-component-kit (layout/FeatureHero.astro) */

.cq-feature-hero-cq:where([data-rk-4c81ec]) { container-type: inline-size; }
.feature-hero:where([data-rk-4c81ec]) {
  position: relative;
  padding: var(--sp-16) var(--sp-6);
  text-align: center;
  overflow: hidden;
  background: radial-gradient(
    circle at top,
    var(--gradient-from, rgba(99,102,241,0.15)) 0%,
    var(--gradient-to, transparent) 70%
  );
}

.feature-hero__bg:where([data-rk-4c81ec]) {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.feature-hero__gradient:where([data-rk-4c81ec]) {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 50% 0%,
    var(--gradient-from, rgba(99,102,241,0.15)) 0%,
    var(--gradient-to, transparent) 60%
  );
  animation: feature-hero-hero-pulse 8s ease-in-out infinite alternate;
}

@keyframes feature-hero-hero-pulse {
  0% { opacity: 0.5; transform: scale(1); }
  100% { opacity: 1; transform: scale(1.05); }
}

.feature-hero__overlay:where([data-rk-4c81ec]) {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(
    ellipse at center,
    rgba(0,0,0,0.3) 0%,
    rgba(0,0,0,0.6) 100%
  );
  pointer-events: none;
}

.feature-hero__inner:where([data-rk-4c81ec]) {
  position: relative;
  z-index: 2;
  max-width: 800px;
  margin: 0 auto;
}

.feature-hero__title:where([data-rk-4c81ec]) {
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 900;
  line-height: 1.1;
  margin: 0 0 var(--sp-6);
  color: var(--c-text-1);
  text-shadow:
    0 2px 20px rgba(0,0,0,0.5),
    0 0 40px rgba(99,102,241,0.3);
}

.feature-hero__subtitle:where([data-rk-4c81ec]) {
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: var(--c-text-2);
  line-height: 1.6;
  margin: 0 0 var(--sp-8);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.feature-hero__actions:where([data-rk-4c81ec]) {
  display: flex;
  justify-content: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

@media (prefers-reduced-motion: reduce) {
  .feature-hero__gradient:where([data-rk-4c81ec]) {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@container (max-width: 640px) {
  .feature-hero:where([data-rk-4c81ec]) {
    padding: var(--sp-12) var(--sp-4);
  }
}