---
interface Props {
  badge?: string;
  title: string;
  description?: string;
  align?: "left" | "center";
}

const { badge, title, description, align = "center" } = Astro.props;
---

<div class={`section-header section-header-${align}`}>
  {badge && <span class="section-badge">{badge}</span>}
  <h2 class="section-title" set:html={title}></h2>
  {description && <p class="section-desc" set:html={description}></p>}
</div>

<style>
  .section-header {
    margin-bottom: 60px;
  }
  .section-header-left { text-align: left; }
  .section-header-center { text-align: center; }
  .section-badge {
    display: inline-block;
    background: var(--color-primary);
    color: var(--color-black);
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 16px;
  }
  .section-title {
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 700;
    color: var(--color-black);
    line-height: 1.2;
  }
  .section-header-center .section-title { max-width: 600px; margin: 0 auto 16px; }
  .section-desc {
    font-size: 18px;
    color: var(--color-medium-gray);
    line-height: 1.6;
    max-width: 600px;
  }
  .section-header-center .section-desc { margin: 0 auto; }
</style>