---
interface Props {
  id: string;
  eyebrow: string;
  title: string;
  /** Monospace index like "01" shown beside the eyebrow. */
  index?: string;
}
const { id, eyebrow, title, index } = Astro.props;
---

<section id={id} class="section">
  <div class="container">
    <header class="section__head" data-reveal>
      <p class="eyebrow">
        {index && <span class="section__index">{index}</span>}{eyebrow}
      </p>
      <h2 class="section__title">{title}</h2>
    </header>
    <slot />
  </div>
</section>

<style>
  .section__head {
    margin-bottom: var(--space-6);
  }
  /* A short cyan→magenta tick leads each section eyebrow — board palette. */
  .section__head .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
  }
  .section__head .eyebrow::before {
    content: "";
    width: 1.7rem;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    box-shadow: 0 0 8px var(--accent-glow);
  }
  .section__index {
    color: var(--accent);
    text-shadow: var(--glow-num);
    font-size: 1.05em;
    margin-right: 0.6rem;
  }
  .section__title {
    font-family: var(--font-display);
    letter-spacing: -0.01em;
    margin-top: var(--space-3);
    font-size: var(--step-3);
    max-width: 22ch;
  }
</style>