---
import Nav from "../components/Nav.astro";
interface Props {
  title: string;
}

const { title } = Astro.props;
import SpeedInsights from "@vercel/speed-insights/astro";
---

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="description" content="Astro description" />
    <meta name="viewport" content="width=device-width" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;700&family=Fira+Code:wght@300;400;700&display=swap"
      rel="stylesheet"
    />
    <SpeedInsights />
    <meta name="generator" content={Astro.generator} />
    <title>{title}</title>
  </head>
  <body>
    <Nav />
    <div class="flex flex-col min-h-screen">
      <slot />
    </div>

    <footer class="bottom-0 w-full z-10 bg-black border-t border-green-500 text-green-500 p-4">
      <p class="text-center font-mono">{new Date().getFullYear()} Ryan Kazokas</p>
    </footer>
  </body><style is:global>
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      font-family: "JetBrains Mono", "Fira Code", monospace;
    }
    body {
      background: #0d0d0d;
      color: #00ff41;
      font-family: "JetBrains Mono", "Fira Code", monospace;
    }

    /* Matrix-style text glow */
    .matrix-glow {
      text-shadow: 0 0 5px rgba(0, 255, 65, 0.5), 0 0 10px rgba(0, 255, 65, 0.3);
    }

    /* Scanline effect */
    body::before {
      content: "";
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.15),
        rgba(0, 0, 0, 0.15) 1px,
        transparent 1px,
        transparent 2px
      );
      pointer-events: none;
      z-index: 1000;
    }
  </style>
</html>
