---
import '../styles/global.css';
import '@fontsource-variable/fraunces/opsz.css';
import '@fontsource-variable/fraunces/opsz-italic.css';
import '@fontsource-variable/instrument-sans/wght.css';
import '@fontsource-variable/bricolage-grotesque/opsz.css';
import '@fontsource-variable/dm-sans/wght.css';
import { getImage } from 'astro:assets';
import { theme, noindex, cfBeacon } from '../lib/theme';
import { LOCALES, DEFAULT_LANG, type Lang } from '../data/locales';
import { getUi } from '../lib/content';
import { absUrl } from '../lib/seo';
import { Header } from '../components/themed';
import Footer from '../components/Footer.astro';
import JsonLd from '../components/JsonLd.astro';
import { photos } from '../assets/photos';

interface Props {
  lang: Lang;
  title: string;
  description: string;
  alternates: Record<Lang, string>;
  jsonLd?: object[];
  ogImage?: ImageMetadata;
  transparentHeader?: boolean;
  bodyClass?: string;
}
const { lang, title, description, alternates, jsonLd = [], ogImage = photos.pane, transparentHeader = false, bodyClass } = Astro.props;
const ui = await getUi(lang);
const og = await getImage({ src: ogImage, width: 1200, height: 630, format: 'jpeg' });
const canonical = absUrl(alternates[lang]);
---
<!doctype html>
<html lang={lang} data-theme={theme}>
  <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, nofollow" />}
    <link rel="canonical" href={canonical} />
    {LOCALES.map((l) => <link rel="alternate" hreflang={l} href={absUrl(alternates[l])} />)}
    <link rel="alternate" hreflang="x-default" href={absUrl(alternates[DEFAULT_LANG])} />
    <meta property="og:type" content="website" />
    <meta property="og:site_name" content="Pane di Triora" />
    <meta property="og:title" content={title} />
    <meta property="og:description" content={description} />
    <meta property="og:url" content={canonical} />
    <meta property="og:image" content={absUrl(og.src)} />
    <meta property="og:locale" content={lang} />
    <meta name="twitter:card" content="summary_large_image" />
    <link rel="icon" href="/favicon.ico" sizes="any" />
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png" />
    <link rel="apple-touch-icon" href="/favicon/apple-icon-180x180.png" />
    <link rel="manifest" href="/manifest.webmanifest" />
    <meta name="theme-color" content={theme === 'notte' ? '#140C0A' : '#F4ECDC'} />
    <link rel="sitemap" href="/sitemap-index.xml" />
    <JsonLd data={jsonLd} />
  </head>
  <body class={bodyClass}>
    <a class="skip" href="#main">{ui.a11y.skip}</a>
    <Header lang={lang} ui={ui} transparent={transparentHeader} />
    <main id="main"><slot /></main>
    <Footer lang={lang} ui={ui} alternates={alternates} />
    {cfBeacon && <script defer src="https://static.cloudflareinsights.com/beacon.min.js" data-cf-beacon={`{"token": "${cfBeacon}"}`}></script>}
  </body>
</html>
