---
export interface Props {
  id?: string;
  title: string;
  intro?: string;
  followSection?: string;
  ctaHref?: string;
  ctaLabel?: string;
}

const {
  id,
  title,
  intro,
  followSection,
  ctaHref,
  ctaLabel,
} = Astro.props;

const resolvedFollowSection = (followSection || title || "").trim();
const showCta = Boolean(ctaHref && ctaLabel);
---

<section id={id} class="glossary-section">
  <div class="glossary-section__head">
    <div>
      <h2 data-follow-section={resolvedFollowSection}>{title}</h2>

      {intro && (
        <p class="glossary-intro">{intro}</p>
      )}
    </div>

    {showCta && (
      <a class="glossary-cta" href={ctaHref}>
        {ctaLabel}
      </a>
    )}
  </div>

  <slot />
</section>

<style>
  .glossary-section{
    margin-top: 42px;
    scroll-margin-top: calc(var(--glossary-sticky-top) + 190px);
  }

  .glossary-section__head{
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 14px;
  }

  .glossary-section h2{
    margin: 0;
    font-size: clamp(2rem, 3vw, 2.55rem);
    line-height: 1.06;
    letter-spacing: -.03em;
    font-weight: 800;
  }

  .glossary-intro{
    margin: 0;
    max-width: 72ch;
    font-size: 1.05rem;
    line-height: 1.55;
    opacity: .94;
  }

  .glossary-section__head .glossary-intro{
    margin-top: 10px;
  }

  .glossary-cta{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    border: 1px solid var(--glossary-border-strong);
    border-radius: 999px;
    padding: 7px 14px;
    color: var(--glossary-accent);
    text-decoration: none;
    white-space: nowrap;
    transition: transform 120ms ease, background 120ms ease;
  }

  .glossary-cta:hover{
    background: var(--glossary-bg-soft-strong);
    text-decoration: none;
    transform: translateY(-1px);
  }

  @media (max-width: 760px){
    .glossary-section__head{
      flex-direction: column;
      align-items: stretch;
    }

    .glossary-cta{
      width: fit-content;
    }
  }
</style>