---
import AppLayout from '../layouts/AppLayout.astro';

const user = Astro.locals.user;
---
<AppLayout title="Welcome" user={user}>
  <div class="page">

    <!-- Greeting -->
    <section class="greeting-zone">
      <p class="label-md eyebrow">Project Bifrost</p>
      <h1 class="display-lg greeting">
        Welcome, <em class="name">{user.name.split(' ')[0]}.</em>
      </h1>
      <p class="lead framing">
        This is the private working space for the Bifrost pilot — where you follow what we are building,
        shape it with your experience, and meet the people building it with you.
      </p>
    </section>

    <!-- Navigation cards -->
    <nav class="cards" aria-label="Quick navigation">
      <a href="/updates" class="card">
        <span class="label-sm card-label">Latest update</span>
        <h2 class="card-title">
          See what <em class="card-em">changed.</em>
        </h2>
        <p class="body-sm card-body">
          Progress notes from Fenja — what shipped, what shifted, what is next.
        </p>
        <span class="card-arrow" aria-hidden="true">↗</span>
      </a>

      <a href="/calendar" class="card">
        <span class="label-sm card-label">Next meeting</span>
        <h2 class="card-title">
          The CAB <em class="card-em">calendar.</em>
        </h2>
        <p class="body-sm card-body">
          Upcoming sessions, agendas, and notes from past meetings.
        </p>
        <span class="card-arrow" aria-hidden="true">↗</span>
      </a>

      <a href="/contribute" class="card">
        <span class="label-sm card-label">Contribute</span>
        <h2 class="card-title">
          Share an <em class="card-em">idea.</em>
        </h2>
        <p class="body-sm card-body">
          Post an idea, a question, or something that inspired you. Everyone in the hub sees it.
        </p>
        <span class="card-arrow" aria-hidden="true">↗</span>
      </a>

      <a href="/roadmap" class="card">
        <span class="label-sm card-label">Roadmap</span>
        <h2 class="card-title">
          What is <em class="card-em">next.</em>
        </h2>
        <p class="body-sm card-body">
          In progress, coming soon, and further out — the full picture of where we are going.
        </p>
        <span class="card-arrow" aria-hidden="true">↗</span>
      </a>

      <a href="/preview" class="card">
        <span class="label-sm card-label">Product preview</span>
        <h2 class="card-title">
          See the <em class="card-em">platform.</em>
        </h2>
        <p class="body-sm card-body">
          Screenshots and walkthroughs of the sovereign AI platform you are piloting.
        </p>
        <span class="card-arrow" aria-hidden="true">↗</span>
      </a>

      <a href="/participants" class="card">
        <span class="label-sm card-label">Participants</span>
        <h2 class="card-title">
          The <em class="card-em">people.</em>
        </h2>
        <p class="body-sm card-body">
          Everyone in the pilot — who they are, where they are from, and what they bring.
        </p>
        <span class="card-arrow" aria-hidden="true">↗</span>
      </a>
    </nav>

  </div>
</AppLayout>

<style>
  .page {
    padding: var(--space-12) var(--space-20) var(--space-16);
    max-width: var(--content-max);
    margin: 0 auto;
  }

  /* ── Greeting ─────────────────────────────────────────────────── */
  .greeting-zone {
    max-width: 44rem;
    margin-bottom: var(--space-12);
  }

  .eyebrow {
    color: var(--on-surface-muted);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    margin-bottom: var(--space-4);
  }

  .greeting {
    margin-bottom: var(--space-6);
  }

  .name {
    font-weight: 700;
    font-style: italic;
  }

  .framing {
    max-width: var(--reading-max);
    color: var(--on-surface-variant);
  }

  /* ── Navigation cards ─────────────────────────────────────────── */
  .cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
  }

  .card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-6);
    background: var(--surface-container-lowest);
    border-radius: var(--radius-md);
    color: var(--on-surface);
    border-bottom: none;
    text-decoration: none;
    transition: background var(--duration-med) var(--ease-standard);
  }
  .card:hover {
    background: var(--surface-container-low);
    border-bottom: none;
    color: var(--on-surface);
  }

  .card-label {
    color: var(--on-surface-muted);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
  }

  .card-title {
    font-size: var(--text-headline-sm);
    font-family: var(--font-serif);
    font-weight: 400;
    letter-spacing: var(--tracking-snug);
    line-height: var(--leading-snug);
    margin: 0;
    color: var(--on-surface);
  }

  .card-em {
    font-weight: 700;
    font-style: italic;
  }

  .card-body {
    margin: 0;
    color: var(--on-surface-variant);
    flex: 1;
  }

  .card-arrow {
    font-family: var(--font-serif);
    font-size: var(--text-body-sm);
    color: var(--secondary);
    align-self: flex-end;
    transition: color var(--duration-fast) var(--ease-standard);
  }
  .card:hover .card-arrow {
    color: var(--secondary-dim);
  }
</style>