<script setup>
defineProps({
  title: { type: String, required: true },
  subtitle: { type: String, default: '' },
  kicker: { type: String, default: '' },
})
</script>

<template>
  <section class="pageHero">
    <div class="container pageHero__inner">
      <div class="pageHero__content">
        <div v-if="kicker" class="section-kicker">{{ kicker }}</div>
        <h1 class="pageHero__title">{{ title }}</h1>
        <p v-if="subtitle" class="muted pageHero__subtitle">{{ subtitle }}</p>
        <div class="pageHero__actions">
          <slot name="actions"></slot>
        </div>
      </div>
    </div>
  </section>
</template>

<style scoped>
.pageHero {
  padding: 52px 0 24px;
  background:
    radial-gradient(900px 420px at 20% 10%, rgba(37, 99, 235, 0.18), transparent 60%),
    radial-gradient(900px 420px at 80% 30%, rgba(56, 189, 248, 0.14), transparent 60%),
    linear-gradient(180deg, #ffffff, var(--bg-soft));
  border-bottom: 1px solid var(--border);
}

.pageHero__title {
  margin-top: 12px;
  font-size: 34px;
  line-height: 1.18;
  letter-spacing: -0.03em;
}

.pageHero__subtitle {
  margin-top: 10px;
  max-width: 70ch;
}

.pageHero__actions {
  margin-top: 16px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

@media (max-width: 520px) {
  .pageHero {
    padding: 44px 0 18px;
  }

  .pageHero__title {
    font-size: 28px;
  }
}
</style>

