---
/**
 * GalaxyHero — splash hero, v4 "Cosmos" dialect.
 *
 * Full-viewport dark cosmic stage with a vanilla-canvas2d constellation,
 * gradient-text headline, hero CTA links and a telemetry strip at the
 * bottom edge. No three.js, no WebGL — works on every browser, respects
 * prefers-reduced-motion.
 *
 * Hero contract (matches the Atelier hero):
 *   data.hero.eyebrow → eyebrow row above the headline
 *   data.hero.title   → display headline (HTML allowed; wrap accent words in <em>, end with .period span)
 *   data.hero.tagline → sub copy (HTML allowed)
 *   data.hero.actions → CTA links (variant: primary | secondary | minimal)
 */
const { data } = Astro.locals.starlightRoute.entry;
const hero = data.hero;

const title    = hero?.title    ?? data.title ?? '';
const tagline  = hero?.tagline  ?? data.description ?? '';
const eyebrow  = hero?.eyebrow  ?? 'Open source · PHP 8 · MMVC';
const actions  = Array.isArray(hero?.actions) ? hero.actions : [];

const shouldRender = !!hero;
---

{shouldRender && (
  <section class="hero" aria-labelledby="hero-h">
    <canvas id="constellation" aria-hidden="true"></canvas>

    <div class="container hero-inner">
      {eyebrow && (
        <div class="hero-meta">
          <span class="eyebrow">{eyebrow}</span>
        </div>
      )}

      {title && (
        <h1 id="hero-h" class="hero-headline" set:html={title} />
      )}

      {tagline && (
        <p class="hero-sub" set:html={tagline} />
      )}

      {actions.length > 0 && (
        <div class="hero-ctas">
          {actions.map((a: any, i: number) => (
            <a
              href={a.link}
              class={`hero-link${i === 0 ? '' : ' muted'}`}
            >
              {a.text} <span class="arrow" aria-hidden="true">→</span>
            </a>
          ))}
        </div>
      )}
    </div>

    <div class="hero-telemetry" aria-hidden="true">
      <div class="tele-cell"><span class="pulse"></span> <strong>NIBIRU SYSTEM</strong> · live</div>
      <div class="tele-cell">FRAMEWORK <strong>v0.9.2</strong></div>
      <div class="tele-cell">MODULES <strong>4 in orbit</strong></div>
      <div class="tele-cell">CONTROLLER <strong>idle</strong></div>
      <div class="tele-cell">MIT</div>
    </div>

    {/* Tooltip placeholder for hero module-hover labels — positioned by nibiru-scene.js */}
    <div class="module-tip" id="moduleTip" role="tooltip" aria-hidden="true">
      <span class="name"></span>
      <span class="sig"></span>
    </div>
  </section>
)}

<style is:global>
  .hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    isolation: isolate;
    /* Wider than the docs content — full viewport bleed */
    width: 100vw;
    margin-left: 50%;
    margin-right: 50%;
    transform: translateX(-50%);
    background: var(--nibiru-gradient-nebula);
    color: var(--nibiru-star);
  }
  #constellation {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
  }
  /* Bottom fade so the headline reads cleanly against the field below */
  .hero::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: 0; height: 50%;
    background: linear-gradient(to top, var(--nibiru-space) 0%, rgba(10, 4, 20, 0.7) 30%, transparent 100%);
    pointer-events: none;
    z-index: 1;
  }
  .hero-inner {
    position: relative; z-index: 2;
    max-width: var(--nibiru-container, 1280px);
    margin: 0 auto;
    padding: 220px 32px 140px;
    width: 100%;
  }
  .hero-meta {
    display: flex;
    gap: 24px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 36px;
  }
  .hero-headline {
    font-family: var(--font-display);
    font-size: var(--nibiru-text-hero, clamp(3.5rem, 7vw + 0.5rem, 7.75rem));
    line-height: 0.95;
    letter-spacing: var(--nibiru-tracking-display, -0.04em);
    font-weight: 400;
    margin: 0;
    max-width: 14ch;
    color: var(--nibiru-star);
  }
  .hero-headline em {
    font-style: normal;
    font-weight: 500;
    background: var(--nibiru-gradient-headline);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
  .hero-headline .period {
    color: var(--nibiru-nebula-amber);
    font-weight: 500;
  }
  .hero-sub {
    margin: 40px 0 0;
    font-size: 1.125rem;
    color: rgba(244, 238, 219, 0.72);
    max-width: 48ch;
    line-height: 1.5;
  }
  .hero-ctas {
    display: flex;
    gap: 28px;
    align-items: center;
    margin-top: 48px;
    flex-wrap: wrap;
  }
  .hero-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--nibiru-star);
    font-size: 1rem;
    padding: 4px 0;
    border-bottom: 1px solid rgba(244, 238, 219, 0.4);
    text-decoration: none;
    transition: gap 200ms ease, border-color 200ms ease, color 200ms ease;
  }
  .hero-link:hover {
    gap: 18px;
    border-bottom-color: var(--nibiru-star);
  }
  .hero-link .arrow {
    font-family: var(--font-mono);
    transition: transform 200ms ease;
  }
  .hero-link:hover .arrow { transform: translateX(4px); }
  .hero-link.muted {
    color: rgba(244, 238, 219, 0.6);
    border-bottom-color: rgba(244, 238, 219, 0.18);
  }
  .hero-link.muted:hover { color: var(--nibiru-star); }

  .hero-telemetry {
    position: absolute;
    bottom: 32px; left: 0; right: 0;
    z-index: 3;
    display: flex;
    gap: 48px;
    justify-content: space-between;
    padding: 0 32px;
    font-family: var(--font-mono);
    font-size: 0.69rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--nibiru-muted);
    flex-wrap: wrap;
  }
  .hero-telemetry .tele-cell strong {
    color: rgba(244, 238, 219, 0.85);
    font-weight: 500;
  }
  .hero-telemetry .tele-cell .pulse {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--nibiru-success, #7ad6a3);
    box-shadow: 0 0 8px rgba(122, 214, 163, 0.7);
    animation: tele-pulse 2.4s ease-in-out infinite;
  }
  @media (max-width: 960px) {
    .hero-headline { font-size: clamp(3rem, 12vw, 5rem); }
    .hero-telemetry { display: none; }
    .hero-inner { padding: 160px 24px 100px; }
  }
  @media (prefers-reduced-motion: reduce) {
    #constellation { display: none; }
  }
</style>

