---
interface Props {
  size?: 'hero' | 'lg' | 'md';
  alignment?: 'left' | 'center';
  showWordmark?: boolean;
}

const { size = 'hero', alignment = 'left', showWordmark = true } = Astro.props;

const sizeClass = `lockup--${size}`;
const alignClass = `lockup--${alignment}`;
---
<div class:list={['lockup', sizeClass, alignClass]}>
  <p class="lockup-name">
    <span class="lockup-regular">Project </span><em class="lockup-bold-italic">Bifrost</em><span class="lockup-period">.</span>
  </p>
  {showWordmark && (
    <div class="lockup-wordmark-row">
      <img src="/logo.svg" alt="Fenja AI" class="lockup-wordmark" />
    </div>
  )}
</div>

<style>
  .lockup {
    display: flex;
    flex-direction: column;
  }
  .lockup--left   { align-items: flex-start; text-align: left; }
  .lockup--center { align-items: center;     text-align: center; }

  /* ── Project name ────────────────────────────────────────────────── */
  .lockup-name {
    font-family: var(--font-serif);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
    color: var(--on-surface);
    margin: 0;
  }

  .lockup-regular     { font-weight: 400; font-style: normal; }
  .lockup-bold-italic { font-weight: 700; font-style: italic; }
  .lockup-period      { font-weight: 700; font-style: italic; }

  /* ── Sizes ───────────────────────────────────────────────────────── */
  .lockup--hero .lockup-name { font-size: var(--text-display-lg); }
  .lockup--lg   .lockup-name { font-size: var(--text-display-md); }
  .lockup--md   .lockup-name { font-size: var(--text-headline-lg); }

  /* ── Fenja wordmark — authorship signature, never auxiliary ─────── */
  .lockup-wordmark-row {
    display: flex;
    align-items: center;
  }

  /* Spacing: deliberate gap between headline and signature */
  .lockup--hero .lockup-wordmark-row { margin-top: var(--space-5); }
  .lockup--lg   .lockup-wordmark-row { margin-top: var(--space-4); }
  .lockup--md   .lockup-wordmark-row { margin-top: var(--space-4); }

  /* Sizes: ~1/4 the headline's line height at each scale. Full colour — no opacity. */
  .lockup-wordmark {
    display: block;
    width: auto;
  }
  .lockup--hero .lockup-wordmark { height: 30px; }
  .lockup--lg   .lockup-wordmark { height: 24px; }
  .lockup--md   .lockup-wordmark { height: 20px; }
</style>
