---
interface Props {
  title: string;
  subtitle?: string;
}

const { title, subtitle } = Astro.props;
---

<section class="hero">
  <div class="hero-content">
    <h1 class="title">{title}</h1>
    {subtitle && <p class="subtitle">{subtitle}</p>}
  </div>
</section>

<style>
  .hero {
    padding: clamp(4rem, 10vw, 6rem) var(--page-padding);
    text-align: center;
  }

  .hero-content {
    max-width: 720px;
    margin: 0 auto;
  }

  .title {
    font-size: clamp(2rem, 6vw, 3rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--color-text);
  }

  .subtitle {
    margin-top: 1rem;
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    color: var(--color-text-secondary);
    line-height: 1.6;
  }
</style>