---
import { SITE_AUTHOR_NAME, SITE_AUTHOR_EMAIL } from "../lib/site";

interface Props {
  title: string;
  description: string;
  noindex?: boolean;
}
const { title, description, noindex = false } = Astro.props;
const path = Astro.url.pathname;
const isHome = path === "/";
const isCategorieen = path.startsWith("/categorieen");
const isVoorstellen = path.startsWith("/voorstellen");
---

<!doctype html>
<html lang="nl">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>{title} · AITestBank</title>
    <meta name="description" content={description} />
    <meta name="author" content={SITE_AUTHOR_NAME} />
    {noindex && <meta name="robots" content="noindex, nofollow" />}
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <script defer src="https://umami.911822.xyz/script.js" data-website-id="c338e090-826f-4bd3-9c4b-2d0424349799"></script>
  </head>
  <body>
    <svg width="0" height="0" style="position:absolute">
      <symbol id="robot-icon" viewBox="0 0 24 24">
        <rect x="4" y="7" width="16" height="14" rx="3"></rect>
        <rect x="10" y="2" width="4" height="4" rx="1"></rect>
        <circle class="robot-eye" cx="9" cy="14" r="1.6"></circle>
        <circle class="robot-eye" cx="15" cy="14" r="1.6"></circle>
        <rect class="robot-eye" x="9" y="17.5" width="6" height="1.6" rx="0.8"></rect>
      </symbol>
    </svg>

    <div class="shell">
      <header class="site">
        <a class="wordmark" href="/">
          <span class="name">AITestBank</span>
          <span class="tag">aitestbank.nl</span>
        </a>
        <nav class="site">
          <a href="/" aria-current={isHome ? "page" : undefined}>Reviews</a>
          <a href="/categorieen" aria-current={isCategorieen ? "page" : undefined}>Categorieën</a>
          <a href="/voorstellen" aria-current={isVoorstellen ? "page" : undefined}>Tool voorstellen</a>
        </nav>
      </header>
      <slot />
    </div>
  </body>
</html>

<style is:global>
  :root {
    --paper: #faf9f6;
    --paper-raised: #f2f0ea;
    --ink: #1c1b19;
    --muted: #6b6a64;
    --line: #dedcd5;
    --accent: #3c6e63;
    --accent-soft: #e4ece9;
    --robot-off: #d6d4cc;
    --radius: 4px;
    --sans: ui-sans-serif, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Consolas, monospace;

    --hue-teal-ink: #3c6e63;
    --hue-teal-wash: #e4ece9;
    --hue-amber-ink: #9c6b23;
    --hue-amber-wash: #f3e8d3;
    --hue-rust-ink: #a85039;
    --hue-rust-wash: #f5e0da;
    --hue-slate-ink: #3f5a7d;
    --hue-slate-wash: #dfe6ef;
    --hue-olive-ink: #6b7a3a;
    --hue-olive-wash: #e9edd9;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --paper: #17181a;
      --paper-raised: #1e2022;
      --ink: #eae8e2;
      --muted: #94928a;
      --line: #2b2d2d;
      --accent: #74ab9d;
      --accent-soft: #1c2926;
      --robot-off: #35373a;

      --hue-teal-ink: #74ab9d;
      --hue-teal-wash: #1c2926;
      --hue-amber-ink: #d9a75c;
      --hue-amber-wash: #2e2617;
      --hue-rust-ink: #d98267;
      --hue-rust-wash: #33211c;
      --hue-slate-ink: #7fa0c4;
      --hue-slate-wash: #1c2530;
      --hue-olive-ink: #a3b56a;
      --hue-olive-wash: #262c18;
    }
  }
  :root[data-theme="dark"] {
    --paper: #17181a;
    --paper-raised: #1e2022;
    --ink: #eae8e2;
    --muted: #94928a;
    --line: #2b2d2d;
    --accent: #74ab9d;
    --accent-soft: #1c2926;
    --robot-off: #35373a;
    --hue-teal-ink: #74ab9d;
    --hue-teal-wash: #1c2926;
    --hue-amber-ink: #d9a75c;
    --hue-amber-wash: #2e2617;
    --hue-rust-ink: #d98267;
    --hue-rust-wash: #33211c;
    --hue-slate-ink: #7fa0c4;
    --hue-slate-wash: #1c2530;
    --hue-olive-ink: #a3b56a;
    --hue-olive-wash: #262c18;
  }
  :root[data-theme="light"] {
    --paper: #faf9f6;
    --paper-raised: #f2f0ea;
    --ink: #1c1b19;
    --muted: #6b6a64;
    --line: #dedcd5;
    --accent: #3c6e63;
    --accent-soft: #e4ece9;
    --robot-off: #d6d4cc;
    --hue-teal-ink: #3c6e63;
    --hue-teal-wash: #e4ece9;
    --hue-amber-ink: #9c6b23;
    --hue-amber-wash: #f3e8d3;
    --hue-rust-ink: #a85039;
    --hue-rust-wash: #f5e0da;
    --hue-slate-ink: #3f5a7d;
    --hue-slate-wash: #dfe6ef;
    --hue-olive-ink: #6b7a3a;
    --hue-olive-wash: #e9edd9;
  }

  * { box-sizing: border-box; }
  html,
  body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 18px;
    line-height: 1.6;
  }
  a {
    color: var(--accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
  }
  a:focus-visible,
  button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
  .tabnum { font-variant-numeric: tabular-nums; }

  .shell { max-width: 820px; margin: 0 auto; padding: 0 24px 100px; }

  header.site {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 30px 0 24px;
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
  }
  .wordmark {
    display: flex;
    align-items: baseline;
    gap: 10px;
    text-decoration: none;
    color: var(--ink);
  }
  .wordmark .name { font-size: 21px; font-weight: 700; letter-spacing: -0.01em; }
  .wordmark .tag { font-family: var(--mono); font-size: 13px; color: var(--muted); }
  nav.site { display: flex; gap: 22px; }
  nav.site a { color: var(--muted); text-decoration: none; font-size: 15px; }
  nav.site a:hover,
  nav.site a[aria-current="page"] { color: var(--ink); }

  /* shared by RobotScore and Cover: the eyes of the #robot-icon symbol
     always need to punch through to the page background */
  .robot-eye { fill: var(--paper); }
</style>
