---
import { site } from '../lib/site.js';

const {
  title,
  description = site.description,
  canonical,
  image,
  structuredData,
} = Astro.props;

const pageTitle = title || site.name;
const ogUrl = canonical || Astro.url.toString();
const year = new Date().getFullYear();
const ads = site.ads;
const analytics = site.analytics;
---
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>{pageTitle}</title>
  <meta name="description" content={description} />
  {canonical && <link rel="canonical" href={canonical} />}

  <link rel="icon" href="/favicon.ico" sizes="any" />
  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
  <link rel="apple-touch-icon" href="/favicon.png" />

  <meta property="og:type" content="website" />
  <meta property="og:site_name" content={site.name} />
  <meta property="og:title" content={pageTitle} />
  <meta property="og:description" content={description} />
  {image && <meta property="og:image" content={image} />}
  <meta property="og:url" content={ogUrl} />

  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content={pageTitle} />
  <meta name="twitter:description" content={description} />
  {image && <meta name="twitter:image" content={image} />}

  {structuredData && (
    <script type="application/ld+json" set:html={structuredData} />
  )}

  <link rel="alternate" type="application/rss+xml" title={`${site.name} RSS`} href="/rss.xml" />

  {ads?.enabled && (
    <script
      async
      src={`https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-${ads.publisherId}`}
      crossorigin="anonymous"
    />
  )}

  {analytics?.measurementId && (
    <>
      <script async src={`https://www.googletagmanager.com/gtag/js?id=${analytics.measurementId}`} />
      <script set:html={`
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());
        gtag('config', '${analytics.measurementId}');
      `} />
    </>
  )}

  <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=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700;9..144,800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Bungee+Shade&family=Bungee&display=swap" rel="stylesheet" />

  <style is:global>
    :root {
      --bg: #fff9f3;
      --bg-card: #ffffff;
      --bg-soft: #fbecf3;
      --ink: #1a121d;
      --ink-soft: #4f3f57;
      --ink-muted: #897a8f;
      --line: #f1dfe6;
      /* Y2K multi-color palette — magenta primary, cyan + lemon supporting,
         electric purple links */
      --accent:    #ec3a8e;        /* hot magenta */
      --accent-soft: #ffd8eb;
      --cyan:      #2bb6e2;        /* electric cyan */
      --cyan-soft: #cdf0fb;
      --lemon:     #fbcc31;        /* lemon yellow */
      --lemon-soft:#fff1c2;
      --grape:     #9b3de5;        /* electric purple */
      --link:      #9b3de5;
      --link-hover: #6f1ec3;
      --display-bubble: 'Bungee Shade', 'Bungee', cursive;
      --display-bungee: 'Bungee', 'Inter', sans-serif;
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }

    html {
      background: var(--bg);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
    }

    body {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
      font-size: 17px;
      line-height: 1.65;
      color: var(--ink);
      background:
        radial-gradient(circle at  6% -4%, rgba(236,  58, 142, 0.12) 0%, transparent 38%),
        radial-gradient(circle at 96%  4%, rgba( 43, 182, 226, 0.12) 0%, transparent 40%),
        radial-gradient(circle at 50%102%, rgba(251, 204,  49, 0.10) 0%, transparent 45%),
        radial-gradient(circle at 18% 95%, rgba(155,  61, 229, 0.08) 0%, transparent 42%),
        var(--bg);
      min-height: 100vh;
    }

    .container {
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 28px;
    }

    /* ========== Site header ========== */
    header.hero {
      padding: 36px 0 28px;
      border-bottom: 1px solid var(--line);
      margin-bottom: 48px;
    }
    .hero-row {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 24px;
      flex-wrap: wrap;
    }
    .brand-link { text-decoration: none; color: inherit; display: inline-block; }
    .ascii-brand {
      font-family: 'Fraunces', 'Times New Roman', serif;
      font-weight: 800;
      font-size: 42px;
      letter-spacing: -0.025em;
      color: var(--ink);
      line-height: 1;
      font-variation-settings: 'opsz' 144;
      display: inline-block;
    }
    /* Bubble-letter Y2K accent on the "mvp" word — Bungee Shade has built-in
       3D shadow + bevel that reads as MTV/sticker even at small sizes. */
    .ascii-brand .cursor {
      font-family: var(--display-bubble);
      color: var(--accent);
      font-weight: 400;
      font-size: 0.78em;
      letter-spacing: 0.04em;
      margin-left: 6px;
      vertical-align: 6px;
    }
    .tagline {
      color: var(--ink-soft);
      font-family: 'Fraunces', serif;
      font-style: italic;
      font-size: 16px;
      margin-top: 6px;
      max-width: 520px;
      font-variation-settings: 'opsz' 14;
    }
    nav.nav {
      display: flex;
      gap: 24px;
      font-size: 14px;
      font-weight: 500;
    }
    nav.nav a {
      color: var(--ink-soft);
      text-decoration: none;
      letter-spacing: 0.02em;
      transition: color 0.15s;
    }
    nav.nav a:hover { color: var(--accent); }

    /* Site search — slim Google-redirect input, Y2K palette */
    .site-search { display: inline-flex; }
    .site-search input {
      background: var(--bg-card);
      border: 1.5px solid var(--accent-soft);
      color: var(--ink);
      font-family: inherit;
      font-size: 13px;
      padding: 6px 14px;
      border-radius: 999px;
      width: 150px;
      transition: width 0.2s ease, border-color 0.15s, box-shadow 0.15s;
    }
    .site-search input::placeholder {
      color: var(--ink-muted);
    }
    .site-search input:focus {
      outline: none;
      width: 200px;
      border-color: var(--accent);
      box-shadow:
        2px 2px 0 var(--cyan),
        4px 4px 0 var(--lemon);
    }

    main { padding: 0 0 64px; }

    /* ========== Index post cards ========== */
    .post {
      background: var(--bg-card);
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 28px 32px;
      margin-bottom: 18px;
      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    }
    .post:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 32px -16px rgba(80, 30, 80, 0.18);
      border-color: #ddd0d8;
    }
    .post-title {
      font-family: 'Fraunces', serif;
      font-weight: 600;
      font-size: 26px;
      line-height: 1.2;
      letter-spacing: -0.015em;
      margin-bottom: 8px;
      font-variation-settings: 'opsz' 80;
    }
    .post-title a {
      color: var(--ink);
      text-decoration: none;
    }
    .post-title a:hover { color: var(--accent); }
    .post-meta {
      color: var(--ink-muted);
      font-size: 13px;
      letter-spacing: 0.02em;
      margin-bottom: 12px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
    }
    .post-excerpt {
      color: var(--ink-soft);
      font-size: 16px;
      line-height: 1.6;
    }

    /* ========== Tags ========== */
    .tag {
      display: inline-block;
      background: var(--bg-soft);
      color: var(--ink-soft);
      padding: 2px 10px;
      border-radius: 999px;
      border: 1px solid var(--line);
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.02em;
      transition: background 0.15s, color 0.15s;
    }
    .tag a { color: inherit; text-decoration: none; }
    .tag:hover { background: var(--accent-soft); color: var(--accent); }

    /* ========== Article (post detail) ========== */
    .post-content {
      max-width: 720px;
      margin: 0 auto;
      padding: 0;
      background: transparent;
      border: none;
      font-size: 18px;
      line-height: 1.75;
      color: var(--ink);
    }
    .post-content h1 {
      font-family: 'Fraunces', serif;
      font-weight: 700;
      font-size: clamp(32px, 5vw, 48px);
      line-height: 1.1;
      letter-spacing: -0.02em;
      color: var(--ink);
      margin-bottom: 18px;
      font-variation-settings: 'opsz' 144;
    }
    .post-content h2 {
      font-family: 'Fraunces', serif;
      font-weight: 600;
      font-size: 28px;
      line-height: 1.25;
      letter-spacing: -0.015em;
      color: var(--ink);
      margin: 44px 0 14px;
      font-variation-settings: 'opsz' 80;
    }
    .post-content h3 {
      font-family: 'Fraunces', serif;
      font-weight: 600;
      font-size: 22px;
      line-height: 1.3;
      color: var(--ink);
      margin: 32px 0 10px;
      font-variation-settings: 'opsz' 36;
    }
    .post-content p {
      margin-bottom: 22px;
      color: var(--ink);
    }
    .post-content > p:first-of-type::first-letter {
      font-family: 'Fraunces', serif;
      font-weight: 800;
      font-size: 72px;
      float: left;
      line-height: 0.9;
      padding: 6px 14px 0 0;
      color: var(--accent);
      font-variation-settings: 'opsz' 144;
      /* Y2K chromatic — magenta + cyan offset */
      text-shadow:
        3px 3px 0 var(--cyan),
        6px 6px 0 var(--lemon);
    }
    .post-content a {
      color: var(--link);
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-underline-offset: 3px;
      transition: color 0.15s;
    }
    .post-content a:hover { color: var(--link-hover); }
    .post-content img {
      max-width: 100%;
      height: auto;
      border-radius: 10px;
      margin: 28px 0;
      box-shadow: 0 12px 36px -18px rgba(80, 30, 80, 0.25);
    }
    .post-content blockquote {
      border-left: 3px solid var(--accent);
      margin: 28px 0;
      padding: 4px 0 4px 24px;
      font-family: 'Fraunces', serif;
      font-style: italic;
      font-size: 21px;
      line-height: 1.5;
      color: var(--ink-soft);
      font-variation-settings: 'opsz' 36;
    }
    .post-content code {
      background: var(--bg-soft);
      color: var(--accent);
      padding: 1px 7px;
      border-radius: 4px;
      font-family: 'JetBrains Mono', 'SF Mono', monospace;
      font-size: 0.88em;
    }
    .post-content pre {
      background: #1a1a1f;
      color: #e8e6df;
      padding: 18px 20px;
      border-radius: 10px;
      overflow-x: auto;
      margin: 24px 0;
      font-family: 'JetBrains Mono', 'SF Mono', monospace;
      font-size: 14px;
      line-height: 1.65;
    }
    .post-content pre code {
      background: transparent;
      color: inherit;
      padding: 0;
    }
    .post-content ul, .post-content ol {
      margin: 18px 0 22px 28px;
    }
    .post-content li { margin-bottom: 8px; }
    .post-content hr {
      border: none;
      border-top: 1px solid var(--line);
      margin: 40px 0;
    }

    .back-link {
      display: inline-block;
      color: var(--ink-muted);
      text-decoration: none;
      margin-bottom: 24px;
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 0.02em;
      transition: color 0.15s;
    }
    .back-link:hover { color: var(--accent); }

    /* ========== Pagination ========== */
    .pagination {
      max-width: 720px;
      margin: 48px auto 0;
      padding-top: 24px;
      border-top: 1px solid var(--line);
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
    }
    .pagination-link {
      display: inline-block;
      padding: 8px 18px;
      background: var(--bg-card);
      border: 1px solid var(--line);
      border-radius: 999px;
      color: var(--ink);
      text-decoration: none;
      font-size: 14px;
      font-weight: 500;
      transition: background 0.15s, border-color 0.15s, color 0.15s;
    }
    .pagination-link:hover {
      background: var(--accent);
      border-color: var(--accent);
      color: #fff;
    }
    .pagination-info {
      color: var(--ink-muted);
      font-size: 13px;
    }

    /* ========== Related posts ========== */
    .related-posts {
      max-width: 1100px;
      margin: 64px auto 0;
      padding-top: 36px;
      border-top: 1px solid var(--line);
    }
    .related-posts h3 {
      font-family: 'Fraunces', serif;
      font-weight: 600;
      font-size: 22px;
      letter-spacing: -0.01em;
      color: var(--ink);
      margin-bottom: 22px;
      font-variation-settings: 'opsz' 36;
    }
    .related-posts-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
      gap: 16px;
    }
    .related-post-card {
      background: var(--bg-card);
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 20px;
      transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
    }
    .related-post-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 28px -16px rgba(80, 30, 80, 0.18);
      border-color: #ddd0d8;
    }
    .related-post-link { text-decoration: none; color: inherit; display: block; }
    .related-post-link h4 {
      font-family: 'Fraunces', serif;
      font-weight: 600;
      font-size: 18px;
      line-height: 1.25;
      color: var(--ink);
      margin-bottom: 8px;
      font-variation-settings: 'opsz' 36;
    }
    .related-post-excerpt {
      color: var(--ink-soft);
      font-size: 14px;
      line-height: 1.55;
      margin-bottom: 10px;
    }
    .related-post-date {
      color: var(--ink-muted);
      font-size: 12px;
      letter-spacing: 0.02em;
    }

    /* ========== Footer ========== */
    footer {
      max-width: 1100px;
      margin: 80px auto 0;
      padding: 28px 28px 36px;
      border-top: 1px solid var(--line);
      color: var(--ink-muted);
      font-size: 13px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      flex-wrap: wrap;
    }
    footer .footer-brand {
      font-family: 'Fraunces', serif;
      font-weight: 600;
      color: var(--ink-soft);
      letter-spacing: -0.01em;
    }
    footer .footer-brand .accent { color: var(--accent); }

    /* ========== Mobile ========== */
    @media (max-width: 700px) {
      .container { padding: 0 18px; }
      header.hero { padding: 24px 0 20px; margin-bottom: 32px; }
      .ascii-brand { font-size: 30px; }
      .tagline { font-size: 14px; }
      .post { padding: 22px 22px; }
      .post-title { font-size: 22px; }
      .post-excerpt { font-size: 15px; }
      .post-content { font-size: 17px; }
      .post-content > p:first-of-type::first-letter { font-size: 52px; }
      .related-posts-grid { grid-template-columns: 1fr; }
    }

    /* ========== Reveal animation for cards ========== */
    [data-reveal] {
      opacity: 0;
      transform: translateY(12px);
      transition: opacity 0.6s ease, transform 0.6s ease;
    }
    [data-reveal].is-visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* ========== Tag banner ========== */
    .tag-banner {
      font-family: 'Fraunces', 'Noto Serif SC', serif;
      font-weight: 600;
      font-size: 24px;
      color: var(--ink);
      margin-bottom: 28px;
      padding-bottom: 16px;
      border-bottom: 1px solid var(--line);
      font-variation-settings: 'opsz' 36;
    }
    .tag-banner em { font-style: italic; color: var(--accent); }

    /* ========== Hero card ========== */
    .post-hero {
      position: relative;
      display: grid;
      grid-template-columns: 1.1fr 1fr;
      align-items: stretch;
      margin-bottom: 44px;
      border-radius: 14px;
      overflow: hidden;
      background: var(--bg-card);
      border: 1px solid var(--line);
      transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    }
    .post-hero:hover {
      transform: translateY(-2px);
      box-shadow: 0 22px 56px -22px rgba(236, 58, 142, 0.32);
      border-color: var(--accent-soft);
    }
    .post-hero-img {
      position: relative;
      overflow: hidden;
      background: var(--bg-soft);
      min-height: 360px;
      min-width: 0;
    }
    .post-hero-img img {
      position: absolute;
      inset: 0;
      width: 100%; height: 100%;
      object-fit: cover; display: block;
      transition: transform 0.6s ease;
    }
    .post-hero:hover .post-hero-img img { transform: scale(1.04); }
    .post-hero-body {
      padding: 36px 40px;
      min-width: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    /* Stretched-link pattern */
    .post-hero-title .card-link {
      color: inherit;
      text-decoration: none;
    }
    .post-hero-title .card-link::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
    }
    .post-hero:hover .post-hero-title .card-link { color: var(--accent); }
    /* Y2K sticker flag — Bungee + colored bg pill, slight tilt for sticker feel */
    .post-hero-flag {
      display: inline-block;
      font-family: var(--display-bungee);
      background: var(--accent);
      color: #fff;
      font-size: 12px;
      letter-spacing: 0.12em;
      padding: 4px 14px;
      border-radius: 999px;
      margin-bottom: 14px;
      transform: rotate(-1.5deg);
      box-shadow:
        2px 2px 0 var(--cyan),
        4px 4px 0 var(--lemon);
      text-transform: uppercase;
    }
    .post-hero-title {
      font-family: 'Fraunces', 'Noto Serif SC', serif;
      font-weight: 700;
      font-size: clamp(26px, 3.5vw, 36px);
      line-height: 1.12;
      letter-spacing: -0.02em;
      color: var(--ink);
      margin-bottom: 14px;
      font-variation-settings: 'opsz' 144;
      transition: color 0.15s;
    }
    .post-hero-excerpt {
      color: var(--ink-soft);
      font-size: 16px;
      line-height: 1.6;
      margin-bottom: 18px;
    }
    .post-hero-meta {
      display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
      color: var(--ink-muted);
      font-size: 13px;
      letter-spacing: 0.02em;
    }
    .post-hero-tag {
      display: inline-block;
      padding: 2px 10px;
      border: 1px solid var(--line);
      border-radius: 999px;
      color: var(--ink-soft);
      font-size: 12px;
      font-weight: 600;
    }
    .post-hero-tag a { color: inherit; text-decoration: none; position: relative; z-index: 2; }
    /* Rotating Y2K pastel sticker colors per nth-child */
    .post-hero-tag:nth-child(2)  { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-soft); }
    .post-hero-tag:nth-child(3)  { background: var(--cyan-soft);   color: #1a7eaa;       border-color: var(--cyan-soft); }
    .post-hero-tag:nth-child(4)  { background: var(--lemon-soft);  color: #8a6c00;       border-color: var(--lemon-soft); }
    .post-hero-tag:nth-child(5)  { background: #efdcfb;            color: var(--grape);  border-color: #efdcfb; }

    /* ========== Row cards ========== */
    .post-row {
      position: relative;
      display: grid;
      grid-template-columns: 240px 1fr;
      align-items: stretch;
      background: var(--bg-card);
      border: 1px solid var(--line);
      border-radius: 12px;
      margin-bottom: 16px;
      overflow: hidden;
      transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    }
    .post-row:hover {
      transform: translateY(-2px);
      box-shadow: 0 16px 40px -18px rgba(236, 58, 142, 0.25);
      border-color: var(--accent-soft);
    }
    .post-row:has(.post-row-body:only-child) {
      grid-template-columns: 1fr;
    }
    .post-row-img {
      position: relative;
      overflow: hidden;
      background: var(--bg-soft);
      min-width: 0;
    }
    .post-row-img img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.5s ease;
    }
    .post-row:hover .post-row-img img { transform: scale(1.04); }
    .post-row-body {
      padding: 22px 26px;
      min-width: 0;
      display: flex; flex-direction: column;
      justify-content: center;
      gap: 6px;
    }
    .post-row-title {
      font-family: 'Fraunces', 'Noto Serif SC', serif;
      font-weight: 600;
      font-size: 22px;
      line-height: 1.22;
      letter-spacing: -0.015em;
      color: var(--ink);
      margin-bottom: 4px;
      font-variation-settings: 'opsz' 80;
    }
    .post-row-title .card-link {
      color: inherit;
      text-decoration: none;
      transition: color 0.15s;
    }
    .post-row-title .card-link::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
    }
    .post-row:hover .post-row-title .card-link { color: var(--accent); }
    .post-row-excerpt {
      color: var(--ink-soft);
      font-size: 15px;
      line-height: 1.55;
      margin-bottom: 12px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .post-row-meta {
      display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
      color: var(--ink-muted);
      font-size: 12px;
      letter-spacing: 0.02em;
    }
    .post-row-tag {
      display: inline-block;
      padding: 1px 10px;
      background: var(--bg-soft);
      border: 1px solid transparent;
      border-radius: 999px;
      color: var(--ink-soft);
      font-size: 11px;
      font-weight: 600;
    }
    .post-row-tag a { color: inherit; text-decoration: none; position: relative; z-index: 2; }
    .post-row-tag:nth-child(2) { background: var(--accent-soft); color: var(--accent); }
    .post-row-tag:nth-child(3) { background: var(--cyan-soft);   color: #1a7eaa; }
    .post-row-tag:nth-child(4) { background: var(--lemon-soft);  color: #8a6c00; }

    .post-empty {
      color: var(--ink-muted);
      text-align: center;
      padding: 80px 0;
      font-size: 15px;
    }

    @media (max-width: 820px) {
      .post-hero { grid-template-columns: 1fr; }
      .post-hero-img { min-height: 220px; max-height: 280px; }
      .post-hero-body { padding: 24px 22px; }
    }
    @media (max-width: 700px) {
      .post-row { grid-template-columns: 110px 1fr; }
      .post-row-body { padding: 16px 18px; }
      .post-row-title { font-size: 17px; }
      .post-row-excerpt { font-size: 13px; }
    }

  </style>
</head>
<body>
  <div class="container">
    <header class="hero">
      <div class="hero-row">
        <div>
          <a href="/" class="brand-link">
            <span class="ascii-brand">viral<span class="cursor">mvp</span></span>
          </a>
          <div class="tagline">{site.description}</div>
        </div>
        <nav class="nav">
          <a href="/">Home</a>
          <a href="/about/">About</a>
          <a href="/rss.xml">RSS</a>
          <form class="site-search" role="search"
                onsubmit="event.preventDefault();window.open('https://www.google.com/search?q='+encodeURIComponent('site:viralmvp.com '+this.q.value),'_blank');this.q.value='';">
            <input type="search" name="q" placeholder="Search…" aria-label="Search viralmvp" required />
          </form>
        </nav>
      </div>
    </header>

    <main>
      <slot />
    </main>

    <footer>
      <div class="footer-brand">viral<span class="accent">mvp</span></div>
      <div>© {year} {site.name}</div>
    </footer>
  </div>
</body>
</html>
