---
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  ?? 'Modular MMVC PHP framework';
const actions  = Array.isArray(hero?.actions) ? hero.actions : [];

const shouldRender = !!hero;
---

{shouldRender && (
  <section class="atelier-hero">
    <span class="atelier-hero__number" aria-hidden="true">01</span>

    <div class="atelier-hero__grid">
      <div class="atelier-hero__copy">
        {eyebrow && <p class="atelier-hero__eyebrow">{eyebrow}</p>}
        {title && <h1 class="atelier-hero__title" set:html={title} />}
        {tagline && <p class="atelier-hero__lede" set:html={tagline} />}

        {actions.length > 0 && (
          <div class="atelier-hero__cta">
            {actions.map((a: any) => (
              <a
                href={a.link}
                class={`atelier-button ${
                  a.variant === 'minimal' || a.variant === 'secondary'
                    ? 'atelier-button--ghost'
                    : 'atelier-button--primary'
                }`}
              >
                <span>{a.text}</span>
                {a.icon === 'right-arrow' && <span class="atelier-button__arrow" aria-hidden="true">→</span>}
                {a.icon === 'external' && <span class="atelier-button__arrow" aria-hidden="true">↗</span>}
              </a>
            ))}
          </div>
        )}
      </div>

      <div class="atelier-hero__art" aria-hidden="true">
        <img
          class="atelier-hero__mark"
          src="/img/nibiru-logo.png"
          alt=""
          loading="eager"
          width="280"
          height="280"
        />
      </div>
    </div>
  </section>
)}