---
import '../styles/global.css';

interface Props {
  title: string;
  description?: string;
  canonical?: string;
  ogImage?: string;
}

const {
  title,
  description = 'Formación Profesional en Informática con proyectos reales y conexión directa con el mercado laboral.',
  canonical = 'https://ornitonautas.com',
  ogImage = '/og-default.png',
} = Astro.props;

const currentPath = Astro.url.pathname;
const lang = currentPath.startsWith('/en') ? 'en' : 'es';
---

<!DOCTYPE html>
<html lang={lang}>
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <!-- Fonts -->
  <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=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet" />

  <!-- SEO -->
  <title>{title}</title>
  <meta name="description" content={description} />
  <link rel="canonical" href={canonical} />

  <!-- Open Graph -->
  <meta property="og:type" content="website" />
  <meta property="og:title" content={title} />
  <meta property="og:description" content={description} />
  <meta property="og:image" content={ogImage} />
  <meta property="og:locale" content={lang === 'es' ? 'es_ES' : 'en_US'} />
  <meta property="og:site_name" content="Ornitonautas" />

  <!-- Hreflang -->
  <link rel="alternate" hreflang="es" href="https://ornitonautas.com/" />
  <link rel="alternate" hreflang="en" href="https://ornitonautas.com/en/" />
  <link rel="alternate" hreflang="x-default" href="https://ornitonautas.com/" />

  <!-- Favicon -->
  <link rel="icon" type="image/png" href="/ornito_logo.png" />
</head>
<body class="bg-paper text-navy antialiased">
  <a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 bg-orange text-white px-4 py-2 rounded-lg z-50 font-bold">
    Saltar al contenido principal
  </a>

  <slot />

  <!-- JSON-LD -->
  <script type="application/ld+json" set:html={JSON.stringify({
    "@context": "https://schema.org",
    "@type": "EducationalOrganization",
    "name": "Ornitonautas",
    "description": description,
    "url": canonical,
    "sameAs": [],
    "address": {
      "@type": "PostalAddress",
      "addressCountry": "ES"
    },
    "areaServed": {
      "@type": "Country",
      "name": "España"
    },
    "knowsAbout": [
      "Formación Profesional",
      "Informática",
      "Desarrollo de Aplicaciones",
      "Desarrollo Web",
      "Sistemas Informáticos"
    ]
  })} />
</body>
</html>
