Glass Section Header

---
/**
 * GlassSectionHeader — A section header with glassmorphism styling and accent underline.
 *
 * Displays a title with an optional subtitle and a decorative accent line.
 * The accent line uses the primary color from design tokens.
 * Suitable for introducing new sections on landing pages or documentation.
 *
 * @param {string} title - Main heading text. Required.
 * @param {string} subtitle - Supporting description. Optional.
 * @param {'left' | 'center'} align - Text alignment. Default: 'left'.
 * @param {string} className - Additional CSS class to apply.
 *
 * @example
 * ```astro
 * <GlassSectionHeader
 *   title="Why Astro Components Kit"
 *   subtitle="Build faster with premium components"
 *   align="center"
 * />
 * ```
 */
interface Props {
  title: string;
  subtitle?: string;
  align?: 'left' | 'center';
  className?: string;
}

const { title, subtitle = '', align = 'left', className = '' } = Astro.props;
---

<div class:list={['glass-section-header', { 'is-centered': align === 'center' }, className]}>
  <h2 class="glass-section-header__title">{title}</h2>
  {subtitle && <p class="glass-section-header__subtitle">{subtitle}</p>}
  <div class="glass-section-header__line" aria-hidden="true"></div>
</div>

<style>
  .glass-section-header {
    margin-bottom: var(--sp-8);
  }
  .glass-section-header.is-centered {
    text-align: center;
  }
  .glass-section-header__title {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 800;
    color: var(--c-text-1);
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.02em;
  }
  .glass-section-header__subtitle {
    font-size: clamp(0.9rem, 1.5vw, 1rem);
    color: var(--c-text-3);
    margin: var(--sp-2) 0 0;
    max-width: 600px;
    line-height: 1.6;
  }
  .is-centered .glass-section-header__subtitle {
    margin-left: auto;
    margin-right: auto;
  }
  .glass-section-header__line {
    height: 4px;
    width: 60px;
    background: var(--c-primary-light);
    border-radius: 2px;
    margin-top: var(--sp-4);
  }
  .is-centered .glass-section-header__line {
    margin-left: auto;
    margin-right: auto;
  }
</style>