---
import { Font } from 'astro:assets';
import Footer from '@/components/footer/Footer.astro';
import Header from '@/components/header/Header.astro';
import { locale, t } from '@/i18n';
import '@/styles/global.css';

type Props = {
	/** Page-specific meta; falls back to the site defaults. */
	title?: string;
	description?: string;
	/** Social share image: a 1200×630 PNG in `public/`; defaults to the logo card. */
	image?: { src: string; alt: string };
	/** Error pages: kept out of search results, without canonical and og:url. */
	noindex?: boolean;
};

const {
	title = t.meta.title,
	description = t.meta.description,
	image = { src: '/og-image.png', alt: t.meta.imageAlt },
	noindex = false,
} = Astro.props;
// Astro.site is APP_URL (astro.config.mjs). Crawlers need absolute URLs.
const canonical = new URL(Astro.url.pathname, Astro.site);
const imageUrl = new URL(image.src, Astro.site).href;
---

<!doctype html>
<html lang={locale}>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />

		<title>{title}</title>
		<meta name="description" content={description} />
		{noindex ? <meta name="robots" content="noindex" /> : <link rel="canonical" href={canonical} />}

		<!-- Open Graph (Facebook, LinkedIn, Slack, Teams, ...) -->
		<meta property="og:type" content="website" />
		<meta property="og:site_name" content="Legyen Nyugta" />
		<meta property="og:locale" content="hu_HU" />
		<meta property="og:title" content={title} />
		<meta property="og:description" content={description} />
		{!noindex && <meta property="og:url" content={canonical} />}
		<meta property="og:image" content={imageUrl} />
		<meta property="og:image:type" content="image/png" />
		<meta property="og:image:width" content="1200" />
		<meta property="og:image:height" content="630" />
		<meta property="og:image:alt" content={image.alt} />

		<!-- X / Twitter: reads og:title, og:description and og:image -->
		<meta name="twitter:card" content="summary_large_image" />
		<meta name="twitter:image:alt" content={image.alt} />

		<!-- Favicons -->
		<!-- https://favicraft.com/convert -->
		<link rel="icon" href="/favicons/favicon.ico" type="image/x-icon">
		<link rel="icon" href="/favicons/favicon.svg" type="image/svg+xml">
		<link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png">
		<link rel="manifest" href="/favicons/manifest.webmanifest">

		<Font cssVariable="--font-outfit" preload />
	</head>
	<body>
		<Header />
		<main class="flex flex-col gap-8.75 pt-2.5 lg:gap-15 lg:pt-10">
			<slot />
		</main>
		<Footer />
	</body>
</html>
