---
import BrainMark from "./BrainMark.astro";

const { data } = Astro.locals.starlightRoute.entry;
const { title = data.title, tagline, actions = [] } = data.hero || {};
---

<div class="hero">
  <div class="hero-glow" aria-hidden="true">
    <div class="hero-hairline" aria-hidden="true"></div>
  </div>
  <div class="hero-inner">
    <div class="hero-mark">
      <BrainMark size={160} title="ThinkWork" />
    </div>

    <div class="hero-copy">
      <h1 id="_top" data-page-title set:html={title} />
      {tagline && <div class="hero-tagline" set:html={tagline} />}
    </div>

    {actions.length > 0 && (
      <div class="hero-actions">
        {actions.map(({ link: href, text, variant }) => (
          <a href={href} class:list={["hero-btn", variant === "primary" ? "primary" : "secondary"]}>
            {text}
          </a>
        ))}
      </div>
    )}
  </div>
</div>

<style>
  .hero {
    position: relative;
    padding: 5rem 1.5rem 4rem;
  }

  @media (min-width: 50rem) {
    .hero {
      padding: 6rem 1.5rem 5rem;
    }
  }

  /* Viewport-bleed horizontally + extend vertically beyond .hero's padding
     so the blurred ellipses fade into transparent in every direction
     instead of being clipped at hero-box edges. Mirrors www's hero glow
     wrapper (apps/www Hero.astro: inset-x-0 -top-24 -bottom-32).
     Relies on html { overflow-x: hidden } in custom.css to guard against
     100vw > document width on Windows + classic scrollbars. */
  .hero-glow {
    position: absolute;
    left: 50%;
    top: -6rem;
    bottom: -8rem;
    width: 100vw;
    transform: translateX(-50%);
    overflow: hidden;
    pointer-events: none;
  }

  /* Top-edge hairline — matches apps/www Hero's inset-x-0 top-0 h-px
     gradient rule so side-by-side visual coherence holds. */
  .hero-hairline {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(
      to right,
      transparent,
      rgba(255, 255, 255, 0.1),
      transparent
    );
  }

  /* Dark-mode glow — toned down from www's 8%/10% because the docs hero
     is shorter than www's, so the same intensity reads as a rectangular
     panel rather than ambient light. 3%/4% keeps the brand tint
     perceptible but not dominant. */
  .hero-glow::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -6%;
    width: 1200px;
    height: 720px;
    transform: translateX(-50%);
    border-radius: 9999px;
    background: color-mix(in srgb, var(--sl-color-accent) 3%, transparent);
    filter: blur(160px);
  }

  .hero-glow::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 30%;
    width: 880px;
    height: 480px;
    transform: translateX(-50%);
    border-radius: 9999px;
    background: color-mix(in srgb, var(--sl-color-accent) 4%, transparent);
    filter: blur(140px);
  }

  .hero-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    max-width: 48rem;
    margin: 0 auto;
    text-align: center;
  }

  .hero-mark {
    color: var(--sl-color-accent);
    filter: drop-shadow(0 0 40px color-mix(in srgb, var(--sl-color-accent) 35%, transparent));
    line-height: 0;
  }

  .hero-mark :global(svg) {
    width: 120px;
    height: 120px;
  }

  @media (min-width: 50rem) {
    .hero-mark :global(svg) {
      width: 160px;
      height: 160px;
    }
  }

  .hero-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }

  h1 {
    font-size: clamp(var(--sl-text-3xl), calc(0.25rem + 5vw), var(--sl-text-6xl));
    line-height: 1.05;
    font-weight: 800;
    color: var(--sl-color-white);
    letter-spacing: -0.02em;
    text-wrap: balance;
  }

  .hero-tagline {
    font-size: clamp(var(--sl-text-base), calc(0.0625rem + 2vw), var(--sl-text-xl));
    color: var(--sl-color-gray-3);
    max-width: 42rem;
    line-height: 1.6;
    text-wrap: pretty;
  }

  .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    justify-content: center;
    margin-top: 0.75rem;
  }

  .hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.75rem;
    border-radius: 0.75rem;
    font-size: var(--sl-text-base);
    font-weight: 600;
    text-decoration: none;
    transition:
      background 0.15s,
      border-color 0.15s,
      transform 0.15s;
  }

  .hero-btn.primary {
    background: var(--sl-color-accent);
    color: #020617; /* Tailwind slate-950 — matches apps/www Hero primary CTA */
    box-shadow: 0 10px 25px -10px
      color-mix(in srgb, var(--sl-color-accent) 40%, transparent);
  }

  .hero-btn.primary:hover {
    background: var(--sl-color-accent-high);
    transform: translateY(-1px);
  }

  .hero-btn.secondary {
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--sl-color-white);
    background: rgba(255, 255, 255, 0.03);
  }

  .hero-btn.secondary:hover {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.06);
  }
</style>
