---
import "@/styles/starwind.css";
import "@/styles/global.css";
import Footer1 from "@/components/starwind-pro/footer-01/Footer1.astro";
import TopBarDropdown from "@/components/TopBarDropdown.astro";
import { Image } from "astro:assets";
import LogoLight from "@/assets/logo-light.svg";

interface Props {
  title: string;
  description?: string;
  image?: string;
  url?: string;
}

const {
  title,
  description = "Resuely",
  image = "/og-image.jpg",
  url = "https://resuely.com",
} = Astro.props;

const siteUrl = Astro.site?.toString() ?? url;
const canonicalUrl = new URL(Astro.url.pathname, siteUrl).toString();
const ogImageUrl = new URL(image, siteUrl).toString();
const orgLogoUrl = new URL("/apple-touch-icon.png", siteUrl).toString();

const websiteSchema = {
  "@context": "https://schema.org",
  "@type": "WebSite",
  name: "Resuely",
  url: siteUrl,
  inLanguage: "es-VE",
};

const organizationSchema = {
  "@context": "https://schema.org",
  "@type": "Organization",
  name: "Resuely",
  url: siteUrl,
  logo: orgLogoUrl,
  sameAs: ["https://git.rlugo.dev/resuely"],
};
---

<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{title}</title>
    <meta name="description" content={description}>
    <meta name="robots" content="index,follow">

    <link rel="canonical" href={canonicalUrl}>

    <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="96x96" href="/favicon-96x96.png">
    <link rel="apple-touch-icon" href="/apple-touch-icon.png">
    <link rel="manifest" href="/site.webmanifest">
    <meta name="theme-color" content="#ffffff">

    <meta property="og:type" content="website">
    <meta property="og:site_name" content="Resuely">
    <meta property="og:locale" content="es_VE">
    <meta property="og:url" content={canonicalUrl}>
    <meta property="og:title" content={title}>
    <meta property="og:description" content={description}>
    <meta property="og:image" content={ogImageUrl}>
    <meta property="og:image:alt" content="Resuely">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@resuely">
    <meta name="twitter:url" content={canonicalUrl}>
    <meta name="twitter:title" content={title}>
    <meta name="twitter:description" content={description}>
    <meta name="twitter:image" content={ogImageUrl}>

    <script type="application/ld+json" is:inline set:html={JSON.stringify(organizationSchema)}></script>
    <script type="application/ld+json" is:inline set:html={JSON.stringify(websiteSchema)}></script>

    <slot name="head" />
  </head>
  <body>
    <header
      class="sticky top-0 border-b border-neutral-200 bg-background/60 backdrop-blur z-50"
    >
      <nav
        class="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between gap-4"
      >
        <a
          href="/"
          class="flex items-center font-heading text-lg text-heading uppercase font-bold tracking-resuely"
        >
          <Image class="h-12 w-min" src={LogoLight} alt="Resuely" />
          <p class="">resuely</p>
        </a>
        <TopBarDropdown />
      </nav>
    </header>
    <main>
      <slot />
    </main>
    <footer>
      <Footer1 />
    </footer>
  </body>
</html>
