---
import { getSiteStats } from '../lib/entries';
import SEO from '../components/SEO.astro';
import type { OgImage } from '../components/SEO.astro';

interface Props {
  title: string;
  description?: string;
  subheader?: string;
  subheaderVariant?: 'tagline' | 'headline';
  lastUpdated?: Date;
  canonicalPath?: string;
  canonicalOverride?: string;
  ogType?: 'website' | 'article';
  ogImage?: OgImage;
  noindex?: boolean;
  publishedTime?: Date;
  modifiedTime?: Date;
  articleTags?: string[];
  jsonLd?: Record<string, unknown> | Record<string, unknown>[];
}

const {
  title,
  description = 'A small log of delightful, unique things — products, apps, phenomena, oddities.',
  subheader,
  subheaderVariant = 'tagline',
  lastUpdated,
  canonicalPath,
  canonicalOverride,
  ogType,
  ogImage,
  noindex,
  publishedTime,
  modifiedTime,
  articleTags,
  jsonLd,
} = Astro.props;
const siteName = 'Unique';
const SITE_FOUNDED = new Date(2026, 4, 3);
const stats = await getSiteStats();

const fmtLong = new Intl.DateTimeFormat('en-US', {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  timeZone: 'UTC',
});
const fmtShort = new Intl.DateTimeFormat('en-US', {
  year: 'numeric',
  month: 'short',
  day: 'numeric',
});

const updatedDate = lastUpdated ?? stats.lastUpdated;
const year = new Date().getFullYear();
---

<!doctype html>
<html lang="en">
  <head>
    <SEO
      title={title}
      description={description}
      canonicalPath={canonicalPath}
      canonicalOverride={canonicalOverride}
      ogType={ogType}
      ogImage={ogImage}
      noindex={noindex}
      publishedTime={publishedTime}
      modifiedTime={modifiedTime}
      articleTags={articleTags}
      jsonLd={jsonLd}
    />
    <script is:inline>
      (function () {
        try {
          var t = localStorage.getItem('theme');
          if (t === 'light' || t === 'dark') {
            document.documentElement.setAttribute('data-theme', t);
          }
        } catch (e) {}
      })();
    </script>
  </head>
  <body>
    <header class="masthead">
      <div class="masthead-row">
        <div class="masthead-stats">
          <span>{stats.total} entries</span>
          <span><a href="/posts/2026-05-03-why-this-exists/">founded {fmtShort.format(SITE_FOUNDED)}</a></span>
        </div>
        <a href="/" class="masthead-brand">{siteName}</a>
        <nav class="masthead-nav" aria-label="Primary">
          <a href="/about/">About</a>
          <a href="/blog/">Blog</a>
        </nav>
      </div>
      {subheader && (
        <div class="subheader">
          <p class={`subheader-line${subheaderVariant === 'headline' ? ' subheader-headline' : ''}`}>{subheader}</p>
          {updatedDate && subheaderVariant === 'headline' && (
            <p class="subheader-date">
              <time datetime={updatedDate.toISOString()}>{fmtLong.format(updatedDate)}</time>
            </p>
          )}
          {updatedDate && subheaderVariant !== 'headline' && (
            <p class="subheader-date">
              Updated <time datetime={updatedDate.toISOString()}>{fmtLong.format(updatedDate)}</time>
            </p>
          )}
        </div>
      )}
    </header>
    <main>
      <slot />
    </main>
    <footer class="site-footer">
      <div class="site-footer-cols">
        <section>
          <h4>Browse</h4>
          <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/grid/">Grid</a></li>
            <li><a href="/sources/">Sources</a></li>
          </ul>
        </section>
        <section>
          <h4>Collections</h4>
          <ul>
            <li><a href="/grid/">Reviews</a></li>
            <li><a href="/find/">Finds</a></li>
            <li><a href="/finds/">Lists</a></li>
            <li><a href="/blog/">Posts</a></li>
          </ul>
        </section>
        <section>
          <h4>About</h4>
          <ul>
            <li><a href="/about/">About</a></li>
            <li><a href="/blog/">Blog</a></li>
          </ul>
        </section>
      </div>
      <div class="site-footer-legal">
        <p>
          © {year} Unique
          <span aria-hidden="true">·</span>
          <a href="/legal/">Legal</a>
          <span aria-hidden="true">·</span>
          <a href="/settings/" class="settings-cog" aria-label="Settings">
            <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
              <circle cx="12" cy="12" r="3"></circle>
              <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
            </svg>
          </a>
        </p>
      </div>
    </footer>

    <style is:global>
      :root {
        --fg: #1a1a1a;
        --bg: #f4f0ec;
        --card-fill: #ebe6df;
        --muted: #6b6b6b;
        --accent: #b34700;
        --rule: #e0dbd2;
        --max: 42rem;
      }
      @media (prefers-color-scheme: dark) {
        :root:not([data-theme="light"]) {
          --fg: #ececea;
          --bg: #161613;
          --card-fill: #1f1f1c;
          --muted: #8d8d88;
          --accent: #ff9c5b;
          --rule: #2a2a26;
        }
      }
      :root[data-theme="dark"] {
        --fg: #ececea;
        --bg: #161613;
        --card-fill: #1f1f1c;
        --muted: #8d8d88;
        --accent: #ff9c5b;
        --rule: #2a2a26;
      }
      * { box-sizing: border-box; }
      html, body {
        margin: 0;
        padding: 0;
        background: var(--bg);
        color: var(--fg);
        font-family: ui-serif, Georgia, 'Iowan Old Style', 'Apple Garamond', 'Palatino Linotype', serif;
        font-size: 18px;
        line-height: 1.55;
        -webkit-font-smoothing: antialiased;
      }
      body {
        max-width: var(--max);
        margin: 0 auto;
        padding: 1.5rem 1.25rem 2rem;
      }
      a { color: var(--accent); text-decoration: none; }
      a:hover { text-decoration: underline; }

      /* Masthead */
      .masthead {
        margin-bottom: 2rem;
        border-top: 1px solid var(--rule);
        border-bottom: 1px solid var(--rule);
      }
      .masthead-row {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 1.5rem;
        padding: 1.1rem 0;
      }
      .masthead-stats {
        display: flex;
        flex-direction: column;
        gap: 0.15rem;
        font-family: ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', sans-serif;
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--muted);
      }
      .masthead-stats a { color: var(--muted); }
      .masthead-stats a:hover { color: var(--accent); }
      .masthead-brand {
        font-family: ui-serif, Georgia, 'Iowan Old Style', 'Apple Garamond', 'Palatino Linotype', serif;
        font-weight: 700;
        font-size: clamp(2.4rem, 6vw, 4rem);
        line-height: 1;
        letter-spacing: -0.02em;
        color: var(--fg);
        text-align: center;
        white-space: nowrap;
      }
      .masthead-brand:hover { text-decoration: none; color: var(--accent); }
      .masthead-nav {
        justify-self: end;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 0.15rem;
        font-family: ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', sans-serif;
        font-size: 0.78rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
      }
      .masthead-nav a { color: var(--muted); }
      .masthead-nav a:hover { color: var(--accent); }

      .settings-cog {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        vertical-align: middle;
        color: var(--muted);
        line-height: 0;
        transition: color 0.18s ease, transform 0.6s ease;
      }
      .settings-cog:hover {
        color: var(--accent);
        text-decoration: none;
        transform: rotate(60deg);
      }
      .settings-cog svg { display: block; }

      .subheader {
        text-align: center;
        padding: 0.85rem 0 1rem;
        border-top: 1px solid var(--rule);
      }
      .subheader-line {
        margin: 0;
        font-style: italic;
        font-size: 1rem;
        color: var(--fg);
      }
      .subheader-line.subheader-headline {
        font-family: ui-serif, Georgia, 'Iowan Old Style', 'Apple Garamond', 'Palatino Linotype', serif;
        font-style: normal;
        font-weight: 700;
        font-size: clamp(1.6rem, 4.2vw, 2.4rem);
        line-height: 1.15;
        letter-spacing: -0.01em;
        color: var(--fg);
      }
      .subheader-date {
        margin: 0.25rem 0 0;
        font-family: ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', sans-serif;
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--muted);
      }

      @media (max-width: 640px) {
        .masthead-row {
          grid-template-columns: 1fr;
          gap: 0.6rem;
          padding: 1rem 0;
          text-align: center;
        }
        .masthead-stats {
          flex-direction: row;
          flex-wrap: wrap;
          justify-content: center;
          gap: 0.5rem;
          order: 2;
        }
        .masthead-brand { order: 1; }
        .masthead-nav {
          justify-self: center;
          align-items: center;
          order: 3;
        }
      }

      main { min-height: 60vh; }

      /* Site footer */
      .site-footer {
        margin-top: 4rem;
        padding-top: 1.5rem;
        border-top: 1px solid var(--rule);
        color: var(--muted);
        font-size: 0.85rem;
      }
      .site-footer-cols {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 2.5rem;
        margin-bottom: 1.5rem;
        text-align: center;
      }
      .site-footer-cols section {
        min-width: 7rem;
      }
      .site-footer ul { align-items: center; }
      .site-footer h4 {
        margin: 0 0 0.5rem;
        font-family: ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', sans-serif;
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--fg);
        font-weight: 700;
      }
      .site-footer ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
      }
      .site-footer ul a { color: var(--muted); }
      .site-footer ul a:hover { color: var(--accent); }
      .site-footer-legal {
        padding-top: 1rem;
        border-top: 1px solid var(--rule);
        text-align: center;
      }
      .site-footer-legal p { margin: 0; }
      .site-footer-legal a { color: var(--muted); }
      .site-footer-legal a:hover { color: var(--accent); }
      .site-footer-legal span { margin: 0 0.4rem; }


      h1, h2, h3 {
        font-family: ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', sans-serif;
        letter-spacing: -0.015em;
        line-height: 1.2;
      }
      h1 { font-size: 1.85rem; margin: 0 0 0.5rem; }
      code {
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 0.9em;
        background: var(--rule);
        padding: 0.1em 0.35em;
        border-radius: 3px;
      }
      pre {
        background: var(--rule);
        padding: 1rem;
        border-radius: 6px;
        overflow-x: auto;
      }
      pre code { background: none; padding: 0; }
      blockquote {
        margin: 1.25rem 0;
        padding-left: 1rem;
        border-left: 3px solid var(--rule);
        color: var(--muted);
        font-style: italic;
      }
      hr { border: 0; border-top: 1px solid var(--rule); margin: 2rem 0; }
    </style>
  </body>
</html>
