---
import { getLangFromUrl, useTranslations, type Lang } from '@/i18n/utils';
import { getHreflangUrl } from '@/i18n/hreflang-map';

interface Props {
  title: string;
  description: string;
  ogImage?: string;
  canonical?: string;
  lang?: Lang;
  pageType?: 'website' | 'article';
}

const { title, description, ogImage = '/og-image.jpg', canonical, lang, pageType = 'website' } = Astro.props;
const currentLang = lang ?? getLangFromUrl(Astro.url);
const t = useTranslations(currentLang);
const siteUrl = Astro.site?.toString().replace(/\/$/, '') ?? 'https://hostingdelsur.net';
const canonicalUrl = canonical ? `${siteUrl}${canonical}` : `${siteUrl}${Astro.url.pathname}`;
const esHreflang = getHreflangUrl(Astro.url.pathname, currentLang, 'es');
const enHreflang = getHreflangUrl(Astro.url.pathname, currentLang, 'en');

import '@/styles/global.css';
import Navbar from '@/components/Navbar.astro';
import Footer from '@/components/Footer.astro';
import Preloader from '@/components/Preloader.astro';
import WhatsappFab from '@/components/WhatsappFab.astro';
import BackToTop from '@/components/BackToTop.astro';
import ScrollReveal from '@/components/ScrollReveal.astro';
import LenisScroll from '@/components/LenisScroll.astro';

const orgJsonLd = {
  '@context': 'https://schema.org',
  '@type': 'Organization',
  name: 'Hosting del Sur',
  url: siteUrl,
  logo: `${siteUrl}/logo/hds-color.svg`,
  description: description,
  telephone: '+59899812487',
  email: 'contacto@hostingdelsur.net',
  address: {
    '@type': 'PostalAddress',
    addressCountry: 'UY',
    addressLocality: 'Maldonado',
  },
  areaServed: [
    { '@type': 'Country', name: 'Uruguay' },
    { '@type': 'Country', name: 'Canada' },
    { '@type': 'Country', name: 'United States' },
    { '@type': 'Country', name: 'Germany' },
  ],
};

const localBusinessJsonLd = {
  '@context': 'https://schema.org',
  '@type': 'ProfessionalService',
  name: 'Hosting del Sur',
  image: `${siteUrl}/og-image.jpg`,
  '@id': siteUrl,
  url: siteUrl,
  telephone: '+59899812487',
  email: 'contacto@hostingdelsur.net',
  priceRange: '$$',
  address: {
    '@type': 'PostalAddress',
    addressCountry: 'UY',
    addressLocality: 'Maldonado',
  },
  areaServed: [
    { '@type': 'Country', name: 'Uruguay' },
    { '@type': 'Country', name: 'Canada' },
    { '@type': 'Country', name: 'United States' },
    { '@type': 'Country', name: 'Germany' },
  ],
};
---
<!doctype html>
<html lang={currentLang}>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="theme-color" content="#FAF6EE" media="(prefers-color-scheme: light)" />
    <meta name="theme-color" content="#1A1612" media="(prefers-color-scheme: dark)" />
    <title>{title} | Hosting del Sur</title>
    <meta name="description" content={description} />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <link rel="canonical" href={canonicalUrl} />

    <meta property="og:type" content={pageType} />
    <meta property="og:url" content={canonicalUrl} />
    <meta property="og:title" content={`${title} | Hosting del Sur`} />
    <meta property="og:description" content={description} />
    <meta property="og:image" content={`${siteUrl}${ogImage}`} />
    <meta property="og:locale" content={currentLang === 'en' ? 'en_US' : 'es_UY'} />
    <meta property="og:site_name" content="Hosting del Sur" />

    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content={`${title} | Hosting del Sur`} />
    <meta name="twitter:description" content={description} />
    <meta name="twitter:image" content={`${siteUrl}${ogImage}`} />

    {esHreflang && <link rel="alternate" hreflang="es" href={esHreflang} />}
    {enHreflang && <link rel="alternate" hreflang="en" href={enHreflang} />}

    <script type="application/ld+json" set:html={JSON.stringify(orgJsonLd)} />
    <script type="application/ld+json" set:html={JSON.stringify(localBusinessJsonLd)} />

    <script is:inline>
      (function() {
        try {
          var stored = localStorage.getItem('theme');
          var prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
          var theme = stored || (prefersDark ? 'dark' : 'light');
          if (theme === 'dark') {
            document.documentElement.classList.add('dark');
          }
        } catch(e) {}
      })();
    </script>
  </head>
  <body>
    <a href="#main" class="skip-link">
      {currentLang === 'en' ? 'Skip to content' : 'Saltar al contenido'}
    </a>
    <Preloader />
    <div class="noise-overlay" aria-hidden="true"></div>
    <Navbar t={t} lang={currentLang} />
    <main id="main">
      <slot />
    </main>
    <Footer t={t} lang={currentLang} />
    <LenisScroll />
    <ScrollReveal />
    <WhatsappFab lang={currentLang} />
    <BackToTop />
  </body>
</html>
