Multi-language Support

import { defineConfig } from 'astro/config';
import tailwindcss from '@tailwindcss/vite';
import react from '@astrojs/react';
import vercel from '@astrojs/vercel';

export default defineConfig({
  output: 'server',
  adapter: vercel(),
  vite: {
    plugins: [tailwindcss()]
  },
  i18n: {
    locales: ["es", "en", "nah-MX"],
    defaultLocale: "es",
    routing: {
      prefixDefaultLocale: false,
    },
  },
  integrations: [react()]
});

{
  "SEO_TITLE": "Revive el Xochitlallis 2026 · Zongolica",
  "SEO_DESCRIPTION": "Revive los mejores momentos del Xochitlallis 2026 en Zongolica. Galería de fotos, reels y la esencia de esta ceremonia nahua.",
  "BACK_TO_PORTAL": "Volver al portal",
  "HERO_EYEBROW": "Revive Xochitlallis 2026",
  "HERO_TITLE": "Gracias por ser parte del",
  "HERO_TITLE_EMPH": "Xochitlallis 2026.",
  "HERO_LEAD": "El 5 y 6 de marzo Zongolica vibró con la ceremonia nahua milenaria de agradecimiento a la Madre Tierra.",
  "STAT_ENTRY_VALUE": "Libre",
  "STAT_DATE_VALUE": "5 y 6 de marzo",
  "STAT_VENUE_VALUE": "Parque Juan Moctezuma y Cortés",
  "CTA_PRIMARY": "VER GALERÍA",
  "GALLERY_TITLE": "Los mejores momentos del Xochitlallis 2026"
}

{
  "SEO_TITLE": "Relive Xochitlallis 2026 · Zongolica",
  "SEO_DESCRIPTION": "Relive the best moments of Xochitlallis 2026 in Zongolica. Photo gallery, reels and the essence of this Nahua ceremony.",
  "BACK_TO_PORTAL": "Back to portal",
  "HERO_EYEBROW": "Relive Xochitlallis 2026",
  "HERO_TITLE": "Thank you for being part of",
  "HERO_TITLE_EMPH": "Xochitlallis 2026.",
  "HERO_LEAD": "On March 5 and 6, Zongolica vibrated with the ancient Nahua ceremony of gratitude to Mother Earth.",
  "STAT_ENTRY_VALUE": "Free",
  "STAT_DATE_VALUE": "March 5-6",
  "STAT_VENUE_VALUE": "Juan Moctezuma y Cortés Park",
  "CTA_PRIMARY": "VIEW GALLERY",
  "GALLERY_TITLE": "The best moments of Xochitlallis 2026"
}

{
  "SEO_TITLE": "Xochitlallis 2026 · Zongolica",
  "SEO_DESCRIPTION": "Nochi tlakatok ipan Xochitlallis 2026 Zongolica. Galeria, video wan ceremonia nahua.",
  "BACK_TO_PORTAL": "Occepa portal",
  "HERO_EYEBROW": "Xochitlallis 2026",
  "HERO_TITLE": "Tlazohcamati pampa",
  "HERO_TITLE_EMPH": "Xochitlallis 2026.",
  "HERO_LEAD": "Ipan marzo 5 wan 6, Zongolica kipia ceremonia nahua para tlazohcamati Tonantzin Tlalli.",
  "STAT_ENTRY_VALUE": "Amo tlaxtlahuilli",
  "STAT_DATE_VALUE": "Marzo 5 wan 6",
  "STAT_VENUE_VALUE": "Parque Juan Moctezuma wan Cortés",
  "CTA_PRIMARY": "GALERIA",
  "GALLERY_TITLE": "Nochi tlakatok Xochitlallis 2026"
}

---
import Layout from "@/layouts/Layout.astro";

// Import translation data
import t from "@/i18n/xochitlanis/nah-MX.json";

const lang = "nah-MX";
---

<Layout
  title={t.SEO_TITLE}
  description={t.SEO_DESCRIPTION}
  lang={lang}
>
  <main>
    <h1>{t.HERO_TITLE} <em>{t.HERO_TITLE_EMPH}</em></h1>
    <p>{t.HERO_LEAD}</p>
    <button>{t.CTA_PRIMARY}</button>
  </main>
</Layout>

---
const { currentLocale, url } = Astro;
const currentPath = url.pathname;

// Generate alternate language URLs
function getLocalizedUrl(locale: string) {
  if (locale === 'es') {
    // Remove locale prefix for Spanish
    return currentPath.replace(/^\/(en|nah-MX)/, '') || '/';
  }
  // Add locale prefix
  const basePath = currentPath.replace(/^\/(en|nah-MX)/, '') || '/';
  return `/${locale}${basePath}`;
}

const languages = [
  { code: 'es', name: 'Español', flag: '🇲🇽' },
  { code: 'en', name: 'English', flag: '🇬🇧' },
  { code: 'nah-MX', name: 'Náhuatl', flag: '🌺' }
];
---

<div class="language-switcher">
  {languages.map(lang => (
    <a 
      href={getLocalizedUrl(lang.code)}
      class:list={[
        "lang-option",
        { active: currentLocale === lang.code }
      ]}
      aria-label={`Switch to ${lang.name}`}
    >
      <span class="flag">{lang.flag}</span>
      <span class="name">{lang.name}</span>
    </a>
  ))}
</div>

<style>
  .language-switcher {
    display: flex;
    gap: 0.5rem;
  }
  
  .lang-option {
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    transition: background 0.2s;
  }
  
  .lang-option:hover {
    background: rgba(255, 130, 0, 0.1);
  }
  
  .lang-option.active {
    background: #ff8200;
    color: white;
  }
</style>

---
const { lang = 'es', url } = Astro.props;
const canonicalURL = new URL(url, Astro.site);

// Generate alternate URLs
const alternateUrls = [
  { lang: 'es', url: getLocalizedUrl('es') },
  { lang: 'en', url: getLocalizedUrl('en') },
  { lang: 'nah-MX', url: getLocalizedUrl('nah-MX') }
];
---

<head>
  <meta charset="UTF-8" />
  <html lang={lang}>
  <link rel="canonical" href={canonicalURL} />
  
  {alternateUrls.map(alt => (
    <link 
      rel="alternate" 
      hreflang={alt.lang} 
      href={new URL(alt.url, Astro.site)} 
    />
  ))}
  
  <link rel="alternate" hreflang="x-default" href={canonicalURL} />
</head>