---
import { site } from "../data/site";
import { cvAvailable } from "../lib/assets";
import { fleetFacts } from "../data/fleet";
import Constellation from "./Constellation.astro";
---

<section class="hero">
  <!-- hero-scoped atmosphere over the site-wide board art: directional scrims,
       a static radial glow, and a 56px grid masked to an ellipse -->
  <div class="hero__scrim hero__scrim--x" aria-hidden="true"></div>
  <div class="hero__scrim hero__scrim--y" aria-hidden="true"></div>
  <div class="hero__glow" aria-hidden="true"></div>
  <div class="hero__grid" aria-hidden="true"></div>

  <div class="container hero__inner">
    <div class="hero__copy">
      <p class="eyebrow hero__eyebrow">{site.role}</p>

      <h1 class="hero__title">
        {site.name}
      </h1>

      <p class="hero__positioning">{site.positioning}</p>

      <p class="hero__tags mono" aria-label="Core technologies">
        {site.tagline.map((t, i) => (
          <Fragment>
            {i > 0 && <span class="hero__sep" aria-hidden="true">▸</span>}
            <span>{t}</span>
          </Fragment>
        ))}
      </p>

      <div class="hero__cta">
        <a class="btn btn--primary" href="/#projects">View Projects →</a>
        {cvAvailable && (
          <a class="btn" href="/cv.pdf" download>
            Download CV
          </a>
        )}
        <a class="btn" href="/#contact">Contact</a>
      </div>

      <!-- the typing fleet-fact bar: real numbers, cycled by site.js (external, CSP-safe);
           with JS off / reduced motion it shows the first fact statically -->
      <div
        class="hero__fact mono"
        id="fleet-fact"
        data-facts={JSON.stringify(fleetFacts)}
      >
        <span class="hero__fact-prompt">~/{site.handle} ▸</span>
        <span class="hero__fact-line"
          ><span id="fleet-fact-text">{fleetFacts[0]}</span><span
            class="hero__caret"
            aria-hidden="true">▮</span
          ></span
        >
      </div>
    </div>

    <div class="hero__viz" aria-hidden="false">
      <Constellation />
    </div>
  </div>

  <div class="hero__scroll mono" aria-hidden="true">
    <span class="hero__diamond"></span>
    <span>SCROLL — DESCENDING: EDGE / CLUSTER / WORKLOAD / SECURITY</span>
  </div>
</section>

<style>
  .hero {
    position: relative;
    min-height: min(92vh, 820px);
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--border-accent);
    overflow: hidden;
  }

  /* atmosphere layers (scoped to the hero, over the global board art) */
  .hero__scrim,
  .hero__glow,
  .hero__grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  .hero__scrim--x {
    background: linear-gradient(
      90deg,
      rgba(9, 12, 20, 0.96) 0%,
      rgba(9, 12, 20, 0.88) 42%,
      rgba(9, 12, 20, 0.62) 70%,
      rgba(9, 12, 20, 0.55) 100%
    );
  }
  .hero__scrim--y {
    background: linear-gradient(
      180deg,
      rgba(9, 12, 20, 0.55) 0%,
      transparent 30%,
      transparent 70%,
      rgba(9, 12, 20, 0.9) 100%
    );
  }
  :global([data-theme="light"]) .hero__scrim--x {
    background: linear-gradient(
      90deg,
      rgba(246, 248, 251, 0.96) 0%,
      rgba(246, 248, 251, 0.86) 42%,
      rgba(246, 248, 251, 0.6) 70%,
      rgba(246, 248, 251, 0.5) 100%
    );
  }
  :global([data-theme="light"]) .hero__scrim--y {
    background: linear-gradient(
      180deg,
      rgba(246, 248, 251, 0.55) 0%,
      transparent 30%,
      transparent 70%,
      rgba(246, 248, 251, 0.92) 100%
    );
  }
  .hero__glow {
    background:
      radial-gradient(900px 600px at 78% 40%, rgba(232, 121, 249, 0.1), transparent 65%),
      radial-gradient(1000px 700px at 15% 25%, rgba(63, 186, 245, 0.12), transparent 60%);
  }
  .hero__grid {
    background-image:
      linear-gradient(var(--grid-line) 1px, transparent 1px),
      linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 80% 70% at 60% 40%, black 30%, transparent 75%);
  }

  .hero__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 640px) minmax(0, 1fr);
    align-items: center;
    gap: var(--space-6);
    padding-block: var(--space-9);
    width: 100%;
  }
  .hero__copy {
    display: flex;
    flex-direction: column;
  }
  .hero__viz {
    justify-self: end;
    width: min(48vw, 720px);
    margin-right: -8%;
  }

  .hero__eyebrow {
    margin-bottom: var(--space-4);
    letter-spacing: 0.18em;
    text-shadow: 0 0 14px rgba(63, 186, 245, 0.5);
  }
  .hero__title {
    font-family: var(--font-display);
    font-size: var(--step-5);
    line-height: 1.05;
    letter-spacing: -0.005em;
    padding-bottom: 0.14em;
    /* two-line nameplate (mock parity) — wrap at the space, keep the column clear
       of the constellation's left-most node labels */
    max-width: min-content;
    background:
      linear-gradient(
        105deg,
        transparent 0%,
        rgba(255, 255, 255, 0.9) 50%,
        transparent 100%
      ),
      linear-gradient(100deg, var(--accent) 0%, #7c3aed 50%, var(--accent-2) 100%);
    background-size: 220% 100%, 100% 100%;
    background-position: 135% 0, 0 0;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 1px 1px rgba(2, 6, 23, 0.22))
      drop-shadow(0 6px 22px var(--accent-glow));
  }
  .hero__positioning {
    margin-top: var(--space-5);
    max-width: 32rem;
    font-size: var(--step-1);
    line-height: 1.55;
    color: var(--text-dim);
    font-weight: 400;
    text-wrap: pretty;
  }
  .hero__tags {
    margin: var(--space-5) 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.6rem;
    font-size: var(--step--1);
    color: var(--text-label);
    line-height: 1.7;
  }
  .hero__sep {
    color: var(--accent);
  }
  .hero__cta {
    margin-top: var(--space-6);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
  }

  /* the typing bar — glass panel */
  .hero__fact {
    margin-top: var(--space-6);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    background: var(--panel);
    border: 1px solid var(--border-accent);
    border-radius: var(--radius-btn);
    backdrop-filter: var(--panel-blur);
    -webkit-backdrop-filter: var(--panel-blur);
    /* one-liner: the box sizes to its fact (smaller type) and may run a little
       past the copy column — there's clear board under it until the viz */
    width: max-content;
    max-width: min(52rem, calc(100vw - 2 * var(--space-5)));
    min-height: 20px;
    font-size: 11.5px;
  }
  .hero__fact-prompt {
    color: var(--accent);
    flex-shrink: 0;
  }
  .hero__fact-line {
    color: var(--text-body-strong);
    white-space: nowrap;
    line-height: 1.4;
  }
  .hero__caret {
    color: var(--accent);
    animation: bzCaret 1.1s step-end infinite;
  }

  .hero__scroll {
    position: absolute;
    left: max(calc((100vw - var(--measure)) / 2), var(--space-5));
    bottom: 28px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    color: var(--text-faint);
    z-index: 1;
  }
  .hero__diamond {
    width: 8px;
    height: 8px;
    border: 1px solid var(--accent);
    transform: rotate(45deg);
    display: block;
  }

  @keyframes bzCaret {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
  }

  @media (prefers-reduced-motion: no-preference) {
    .hero__title {
      animation: heroSheen 1.6s var(--ease) 0.7s both;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .hero__caret { animation: none; }
  }
  @keyframes heroSheen {
    from { background-position: 135% 0, 0 0; }
    to { background-position: -35% 0, 0 0; }
  }

  /* responsive: constellation folds under, then hides on small screens */
  @media (max-width: 1100px) {
    .hero__inner {
      grid-template-columns: 1fr;
    }
    .hero__viz {
      justify-self: center;
      width: min(88vw, 560px);
      margin-right: 0;
      order: 2;
    }
  }
  @media (max-width: 560px) {
    .hero__viz { display: none; }
    .hero__scroll { display: none; }
    /* phones: the fact bar fills the column and WRAPS like a real terminal —
       the desktop one-liner (nowrap + max-content) busts a 390px viewport */
    .hero__fact {
      font-size: 12px;
      width: 100%;
      max-width: 100%;
    }
    .hero__fact-line {
      white-space: normal;
      overflow-wrap: anywhere;
      line-height: 1.5;
    }
  }
</style>
