---
// Custom Starlight Hero (used when frontmatter `hero` exists)
const { data } = Astro.locals.starlightRoute.entry;
const { title = data.title, tagline } = data.hero || {};

const actions = [
  {
    href: "/getting-started/installation/",
    text: "Get Started",
    variant: "primary",
  },
  {
    href: "https://github.com/swadhinbiswas/OpencodeHub",
    text: "View on GitHub",
    variant: "secondary",
    external: true,
  },
];
---

<section class="och-hero" data-och-hero>
  <div class="och-bg" aria-hidden="true">
    <div class="orb orb-1"></div>
    <div class="orb orb-2"></div>
    <div class="orb orb-3"></div>

    <svg class="grid" viewBox="0 0 1200 600" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <linearGradient id="ochGrid" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0" stop-color="#8be9fd" stop-opacity="0.20"></stop>
          <stop offset="0.5" stop-color="#bd93f9" stop-opacity="0.16"></stop>
          <stop offset="1" stop-color="#ff79c6" stop-opacity="0.12"></stop>
        </linearGradient>
        <pattern
          id="gridPattern"
          width="44"
          height="44"
          patternUnits="userSpaceOnUse"
        >
          <path
            d="M 44 0 L 0 0 0 44"
            fill="none"
            stroke="url(#ochGrid)"
            stroke-width="1"></path>
        </pattern>
      </defs>
      <rect width="1200" height="600" fill="url(#gridPattern)" opacity="0.35"
      ></rect>
    </svg>

    <svg class="spark" viewBox="0 0 380 180" xmlns="http://www.w3.org/2000/svg">
      <path
        d="M20 120 C70 40, 120 160, 170 90 S280 120, 350 60"
        fill="none"
        stroke="currentColor"
        stroke-width="3"
        stroke-linecap="round"></path>
      <circle cx="20" cy="120" r="5"></circle>
    </svg>
  </div>

  <div class="och-inner">
    <div class="copy">
      <div class="badges" aria-label="Highlights">
        <span class="badge">Stacked PRs</span>
        <span class="badge">AI Review</span>
        <span class="badge">Merge Queue</span>
      </div>

      <h1 class="title">
        <span class="title-top" set:html={title} />
        <span class="title-bottom">Documentation</span>
      </h1>

      {tagline && <p class="tagline" set:html={tagline} />}

      <div class="actions">
        {
          actions.map((a) => (
            <a
              class={`btn ${a.variant}`}
              href={a.href}
              target={a.external ? "_blank" : undefined}
              rel={a.external ? "noopener" : undefined}
            >
              <span>{a.text}</span>
              {a.variant === "primary" && (
                <svg
                  width="16"
                  height="16"
                  viewBox="0 0 16 16"
                  fill="none"
                  aria-hidden="true"
                >
                  <path
                    d="M6 12L10 8L6 4"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  />
                </svg>
              )}
              {a.variant === "secondary" && (
                <svg
                  width="16"
                  height="16"
                  viewBox="0 0 24 24"
                  fill="currentColor"
                  aria-hidden="true"
                >
                  <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
                </svg>
              )}
            </a>
          ))
        }
      </div>
    </div>

    <div class="visual" aria-hidden="true">
      <div class="logo-wrap">
        <img src="/logo-light.png" alt="" class="logo logo-light" />
        <img src="/logo-dark.png" alt="" class="logo logo-dark" />

        <svg
          class="ring"
          viewBox="0 0 240 240"
          xmlns="http://www.w3.org/2000/svg"
        >
          <defs>
            <linearGradient id="ringGrad" x1="0" y1="0" x2="1" y2="1">
              <stop offset="0" stop-color="#8be9fd"></stop>
              <stop offset="0.5" stop-color="#bd93f9"></stop>
              <stop offset="1" stop-color="#ff79c6"></stop>
            </linearGradient>
          </defs>
          <circle
            cx="120"
            cy="120"
            r="92"
            fill="none"
            stroke="url(#ringGrad)"
            stroke-width="3"
            stroke-dasharray="10 10"
            opacity="0.65"></circle>
        </svg>

        <div class="glow"></div>
      </div>
    </div>
  </div>
</section>

<script>
  (() => {
    const el = document.querySelector("[data-och-hero]");
    if (!(el instanceof HTMLElement)) return;

    const reduce = window.matchMedia?.(
      "(prefers-reduced-motion: reduce)",
    )?.matches;
    if (reduce) return;

    const setVars = (clientX: number, clientY: number) => {
      const r = el.getBoundingClientRect();
      const x = (clientX - r.left) / r.width;
      const y = (clientY - r.top) / r.height;
      el.style.setProperty("--mx", String((x - 0.5) * 2));
      el.style.setProperty("--my", String((y - 0.5) * 2));
    };

    const onMove = (e: MouseEvent | TouchEvent) => {
      if (e instanceof TouchEvent) {
        const touch = e.touches?.[0];
        if (touch) setVars(touch.clientX, touch.clientY);
        return;
      }
      setVars(e.clientX, e.clientY);
    };

    const onLeave = () => {
      el.style.setProperty("--mx", "0");
      el.style.setProperty("--my", "0");
    };

    el.addEventListener("mousemove", onMove, { passive: true });
    el.addEventListener("touchmove", onMove, { passive: true });
    el.addEventListener("mouseleave", onLeave, { passive: true });
  })();
</script>

<style>
  @layer starlight.core {
    .och-hero {
      --mx: 0;
      --my: 0;
      position: relative;
      padding-block: clamp(2.25rem, 4vw, 4rem);
      margin: 0;
    }

    .och-inner {
      position: relative;
      display: grid;
      grid-template-columns: 1.2fr 0.8fr;
      gap: clamp(1.5rem, 3vw, 3rem);
      align-items: center;
      border: 1px solid
        color-mix(in srgb, var(--sl-color-gray-5) 70%, transparent);
      background: color-mix(in srgb, var(--sl-color-bg) 92%, transparent);
      border-radius: 22px;
      padding: clamp(1.25rem, 3vw, 2.25rem);
      overflow: hidden;
      box-shadow: 0 20px 70px rgba(0, 0, 0, 0.35);
    }

    .och-bg {
      position: absolute;
      inset: 0;
      pointer-events: none;
      overflow: hidden;
    }

    .orb {
      position: absolute;
      border-radius: 999px;
      filter: blur(90px);
      opacity: 0.35;
      transform: translate(calc(var(--mx) * 14px), calc(var(--my) * 14px));
      transition: transform 120ms ease;
      animation: floaty 18s ease-in-out infinite;
    }

    .orb-1 {
      width: 520px;
      height: 520px;
      left: -220px;
      top: -240px;
      background:
        radial-gradient(circle at 30% 30%, #8be9fd, transparent 60%),
        radial-gradient(circle at 70% 70%, #2dd4bf, transparent 55%);
    }

    .orb-2 {
      width: 480px;
      height: 480px;
      right: -220px;
      top: 30px;
      animation-delay: -6s;
      background:
        radial-gradient(circle at 35% 30%, #bd93f9, transparent 60%),
        radial-gradient(circle at 65% 70%, #ff79c6, transparent 55%);
    }

    .orb-3 {
      width: 420px;
      height: 420px;
      left: 40%;
      bottom: -250px;
      animation-delay: -12s;
      background:
        radial-gradient(circle at 30% 30%, #2dd4bf, transparent 60%),
        radial-gradient(circle at 70% 70%, #bd93f9, transparent 55%);
    }

    .grid {
      position: absolute;
      inset: -25% -25% -25% -25%;
      width: 150%;
      height: 150%;
      opacity: 0.28;
      transform: translate(calc(var(--mx) * -10px), calc(var(--my) * -10px))
        rotate(-2deg);
      transition: transform 120ms ease;
    }

    .spark {
      position: absolute;
      left: 6%;
      bottom: 14%;
      width: min(520px, 60%);
      color: color-mix(in srgb, #8be9fd 60%, #bd93f9);
      opacity: 0.5;
    }

    .spark path {
      stroke-dasharray: 450;
      stroke-dashoffset: 450;
      animation: draw 1.6s ease forwards;
    }

    .spark circle {
      fill: currentColor;
      opacity: 0.9;
      animation: dot 2.8s ease-in-out infinite;
    }

    .copy {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      z-index: 1;
    }

    .badges {
      display: flex;
      gap: 0.5rem;
      flex-wrap: wrap;
    }

    .badge {
      font-size: 0.85rem;
      padding: 0.35rem 0.6rem;
      border-radius: 999px;
      border: 1px solid
        color-mix(in srgb, var(--sl-color-gray-5) 70%, transparent);
      background: color-mix(in srgb, var(--sl-color-bg) 86%, transparent);
      color: var(--sl-color-gray-2);
    }

    .title {
      margin: 0;
      line-height: 1.05;
      font-weight: 800;
      letter-spacing: -0.02em;
      font-size: clamp(2.2rem, 4vw, 3.6rem);
    }

    .title-bottom {
      display: block;
      margin-top: 0.35rem;
      background: linear-gradient(
        135deg,
        #8be9fd 0%,
        #bd93f9 45%,
        #ff79c6 100%
      );
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      background-size: 200% 200%;
      animation: shift 8s ease infinite;
    }

    .tagline {
      margin: 0;
      max-width: 58ch;
      font-size: 1.08rem;
      color: var(--sl-color-gray-2);
      line-height: 1.65;
    }

    .actions {
      display: flex;
      gap: 0.75rem;
      flex-wrap: wrap;
      margin-top: 0.25rem;
    }

    .btn {
      display: inline-flex;
      gap: 0.55rem;
      align-items: center;
      padding: 0.8rem 1.1rem;
      border-radius: 12px;
      font-weight: 700;
      text-decoration: none;
      border: 1px solid transparent;
      transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        background 180ms ease,
        border-color 180ms ease;
      will-change: transform;
    }

    .btn.primary {
      background: linear-gradient(
        135deg,
        #8be9fd 0%,
        #bd93f9 50%,
        #ff79c6 100%
      );
      color: #0b1020;
      box-shadow: 0 14px 40px rgba(139, 233, 253, 0.18);
    }

    .btn.primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 18px 60px rgba(189, 147, 249, 0.25);
    }

    .btn.secondary {
      background: color-mix(in srgb, var(--sl-color-bg) 84%, transparent);
      border-color: color-mix(in srgb, var(--sl-color-gray-5) 70%, transparent);
      color: var(--sl-color-white);
    }

    .btn.secondary:hover {
      transform: translateY(-2px);
      border-color: color-mix(in srgb, #8be9fd 40%, var(--sl-color-gray-5));
      box-shadow: 0 14px 50px rgba(0, 0, 0, 0.25);
    }

    .visual {
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 1;
    }

    .logo-wrap {
      position: relative;
      width: min(360px, 100%);
      aspect-ratio: 16 / 9;
      display: grid;
      place-items: center;
      transform: translate(calc(var(--mx) * 6px), calc(var(--my) * 6px));
      transition: transform 120ms ease;
    }

    .logo {
      width: 100%;
      height: auto;
      object-fit: contain;
      filter: drop-shadow(0 24px 60px rgba(0, 0, 0, 0.35));
      animation: floatLogo 6.2s ease-in-out infinite;
    }

    .logo-light {
      display: block;
    }

    .logo-dark {
      display: none;
    }

    html[data-theme="dark"] .logo-light {
      display: none;
    }

    html[data-theme="dark"] .logo-dark {
      display: block;
    }

    .ring {
      position: absolute;
      inset: -10%;
      width: 120%;
      height: 120%;
      opacity: 0.6;
      animation: spin 18s linear infinite;
      filter: blur(0.2px);
    }

    .glow {
      position: absolute;
      inset: 18%;
      border-radius: 999px;
      background: radial-gradient(
        circle,
        rgba(139, 233, 253, 0.22),
        transparent 65%
      );
      filter: blur(40px);
      animation: pulse 3.2s ease-in-out infinite;
    }

    @media (max-width: 900px) {
      .och-inner {
        grid-template-columns: 1fr;
        text-align: center;
      }
      .actions {
        justify-content: center;
      }
      .badges {
        justify-content: center;
      }
      .spark {
        left: 10%;
        bottom: 6%;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .orb,
      .ring,
      .logo,
      .spark path,
      .spark circle {
        animation: none !important;
      }
    }

    @keyframes floaty {
      0%,
      100% {
        transform: translate(calc(var(--mx) * 14px), calc(var(--my) * 14px))
          translate(0, 0);
      }
      50% {
        transform: translate(calc(var(--mx) * 14px), calc(var(--my) * 14px))
          translate(18px, -14px);
      }
    }

    @keyframes shift {
      0%,
      100% {
        background-position: 0% 50%;
      }
      50% {
        background-position: 100% 50%;
      }
    }

    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }

    @keyframes pulse {
      0%,
      100% {
        opacity: 0.35;
        transform: scale(1);
      }
      50% {
        opacity: 0.65;
        transform: scale(1.08);
      }
    }

    @keyframes draw {
      to {
        stroke-dashoffset: 0;
      }
    }

    @keyframes dot {
      0%,
      100% {
        transform: translateX(0);
        opacity: 0.7;
      }
      50% {
        transform: translateX(320px);
        opacity: 1;
      }
    }

    @keyframes floatLogo {
      0%,
      100% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-14px);
      }
    }
  }
</style>