---
interface Props {
  eyebrow?: string;
  title: string;
  description?: string;
  align?: 'left' | 'center';
}
const { eyebrow, title, description, align = 'left' } = Astro.props;
const alignCls = align === 'center' ? 'text-center mx-auto' : 'text-left';
---
<div class={`max-w-3xl ${alignCls}`}>
  {eyebrow && (
    <div class="text-[11px] uppercase tracking-[0.18em] text-muted-foreground font-mono mb-3">{eyebrow}</div>
  )}
  <h2 class="text-[28px] md:text-[40px] font-semibold tracking-[-0.025em] leading-[1.08] text-heading">{title}</h2>
  {description && (
    <p class="mt-4 text-[15.5px] md:text-[16.5px] text-foreground/75 leading-relaxed">{description}</p>
  )}
</div>
