---
import '../styles/global.css';
import LangSwitcher from '../components/LangSwitcher.astro';
import type { Locale } from '../i18n';
import { locales, t } from '../i18n';

interface Props {
  locale: Locale;
}

const { locale } = Astro.props;
const strings = t(locale);
const site = Astro.site?.toString().replace(/\/$/, '') ?? 'https://clawdie.si';
const path = Astro.url.pathname;
const stripPrefix = (p: string, l: Locale) => {
  const pref = `/${l}`;
  return p.startsWith(pref) ? p.slice(pref.length) || '/' : p;
};
const sharedPath = stripPrefix(path, locale);
---

<!doctype html>
<html lang={locale}>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>{strings.meta.title}</title>
    <meta name="description" content={strings.meta.description} />
    {
      locales.map((l) => (
        <link
          rel="alternate"
          hreflang={l}
          href={`${site}/${l}${sharedPath === '/' ? '/' : sharedPath}`}
        />
      ))
    }
    <link
      rel="alternate"
      hreflang="x-default"
      href={`${site}/en${sharedPath === '/' ? '/' : sharedPath}`}
    />
    <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=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=DM+Mono:wght@300;400&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <div class="triangle-bg"></div>
    <div class="container">
      <LangSwitcher current={locale} />
      <slot />
      <footer class="site-footer">
        <div>
          {strings.footer.tagline}<br />
          <a href="https://docs.clawdie.si/">{strings.footer.docsLink}</a>
          ·
          <a href="https://codeberg.org/Clawdie/Clawdie-AI">{strings.footer.sourceLink}</a>
          <br />
          {strings.footer.rights}
        </div>
        <div class="footer-mark"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="32" height="32"><path d="M32 11 53 50H11L32 11Z" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="round"/><path d="M21.5 30.5 L42.5 30.5 L32 50 Z" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="round"/></svg></div>
      </footer>
    </div>
  </body>
</html>
