---
import { ClientRouter } from 'astro:transitions';
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
import '../styles/global.css';

interface Props {
  title: string;
  description?: string;
  /** When true, render the page edge-to-edge (no .container) so full-width
   *  bands work; each section manages its own container. Used by the landing
   *  page. Blog/legal keep the default centered container. */
  wide?: boolean;
  /** Absolute or root-relative OG/Twitter share image. */
  ogImage?: string;
}

const {
  title,
  description = 'PCBJam — open-source PCB design in your browser. Real KiCad, no install. Built on KiCad.',
  wide = false,
  ogImage = '/og/og-home.png',
} = Astro.props;

// Pages may pass a complete title (containing "PCBJam"); otherwise append the suffix.
const fullTitle = title.includes('PCBJam') ? title : `${title} — PCBJam`;
// Resolve against `site` — prerendered Astro.url is localhost, and OG crawlers
// require absolute URLs anyway.
const canonical = new URL(Astro.url.pathname, Astro.site ?? Astro.url).href;
const ogImageAbs = new URL(ogImage, Astro.site ?? Astro.url).href;
---

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    {/* Favicons: .ico is the universal fallback (also satisfies Chrome's
        implicit /favicon.ico request); SVG is preferred by modern browsers;
        apple-touch-icon covers the iOS home screen. */}
    <link rel="icon" href="/favicon.ico" sizes="32x32" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
    <link rel="canonical" href={canonical} />
    <meta name="description" content={description} />
    <title>{fullTitle}</title>

    {/* Open Graph / Twitter */}
    <meta property="og:type" content="website" />
    <meta property="og:site_name" content="PCBJam" />
    <meta property="og:title" content={fullTitle} />
    <meta property="og:description" content={description} />
    <meta property="og:url" content={canonical} />
    <meta property="og:image" content={ogImageAbs} />
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content={fullTitle} />
    <meta name="twitter:description" content={description} />
    <meta name="twitter:image" content={ogImageAbs} />

    {/* Per-page extras (e.g. JSON-LD) */}
    <slot name="head" />

    {/* SPA-style navigation: swaps the page without a full reload. */}
    <ClientRouter />

    {/* Privacy-friendly analytics by Plausible (cookieless, no consent banner
        needed). The pa- script id keys the shared dashboard covering all
        pcbjam properties. Prod builds only — `astro dev` stays untracked, and
        Plausible ignores localhost regardless. Auto-tracks pageviews across
        ClientRouter navigations (History API). crossorigin="anonymous" so the
        script still loads on the COEP require-corp routes (see public/_headers):
        cross-origin subresources there must be fetched with CORS. */}
    {
      import.meta.env.PROD && (
        <>
          <script
            is:inline
            async
            crossorigin="anonymous"
            src="https://plausible.io/js/pa-KjNS9YmidydULZTstsjRg.js"></script>
          <script is:inline>
            window.plausible =
              window.plausible ||
              function () {
                (plausible.q = plausible.q || []).push(arguments);
              };
            plausible.init =
              plausible.init ||
              function (i) {
                plausible.o = i || {};
              };
            plausible.init();
          </script>
        </>
      )
    }
  </head>
  <body>
    <Header />
    {
      wide ? (
        <main class="wide">
          <slot />
        </main>
      ) : (
        <main>
          <div class="container">
            <slot />
          </div>
        </main>
      )
    }
    <Footer />
  </body>
</html>
