feat: add multilingual selector

index.html

@@ -71,35 +71,41 @@
     <div class="max-w-6xl mx-auto px-6 py-6 flex flex-wrap items-center justify-between gap-4">
       <div class="flex items-center gap-3">
         <img src="https://odoo4projects.com/web/image/website/1/logo?unique=1be96c3" alt="ODOO4projects logo" class="h-10 w-auto" />
-        <span class="uppercase tracking-[0.3em] text-xs text-brand-smoke">ERP for NGOs</span>
+        <span class="uppercase tracking-[0.3em] text-xs text-brand-smoke" data-i18n="hero-badge"></span>
       </div>
       <nav class="flex flex-wrap items-center gap-6 text-sm">
-        <a href="#blog" class="hover:text-brand-sunrise transition">Resources</a>
+        <a href="#blog" class="hover:text-brand-sunrise transition" data-i18n="nav-resources"></a>
-        <a href="#trial" class="hover:text-brand-sunrise transition">Free Trial</a>
+        <a href="#trial" class="hover:text-brand-sunrise transition" data-i18n="nav-trial"></a>
-        <a href="#meeting" class="hover:text-brand-sunrise transition">Book a Meeting</a>
+        <a href="#meeting" class="hover:text-brand-sunrise transition" data-i18n="nav-meeting"></a>
       </nav>
       <div class="flex items-center gap-3">
-        <a href="#meeting" class="px-4 py-2 border border-white/40 rounded-full text-sm hover:bg-white/10 transition">Schedule a Meeting</a>
+        <label for="lang-selector" class="sr-only">Language</label>
-        <a href="#trial" class="px-5 py-2 bg-brand-sunrise text-brand-ink font-semibold rounded-full text-sm shadow-brand hover:translate-y-0.5 transition" data-event="cta:trial">Sign Up for Free Trial</a>
+        <select id="lang-selector" class="bg-white/10 border border-white/30 text-sm rounded-full px-3 py-1.5 focus:outline-none focus:ring-2 focus:ring-brand-sunrise/70">
+          <option value="en">English</option>
+          <option value="es">Español</option>
+          <option value="de">Deutsch</option>
+        </select>
+        <a href="#meeting" class="px-4 py-2 border border-white/40 rounded-full text-sm hover:bg-white/10 transition" data-i18n="cta-meeting"></a>
+        <a href="#trial" class="px-5 py-2 bg-brand-sunrise text-brand-ink font-semibold rounded-full text-sm shadow-brand hover:translate-y-0.5 transition" data-i18n="cta-trial" data-event="cta:trial"></a>
       </div>
     </div>
     <div class="max-w-6xl mx-auto px-6 py-16 grid md:grid-cols-2 gap-12 items-center">
       <div>
-        <p class="text-brand-sunrise font-semibold mb-4">Unified NGO ERP Platform</p>
+        <p class="text-brand-sunrise font-semibold mb-4" data-i18n="hero-pill"></p>
-        <h1 class="text-4xl md:text-5xl font-semibold leading-tight mb-6">Simplify every mission workflow with an ERP built for NGOs</h1>
+        <h1 class="text-4xl md:text-5xl font-semibold leading-tight mb-6" data-i18n="hero-headline"></h1>
-        <p class="text-lg text-white/80 mb-8">Consolidate programs, automate donor and grant reporting, and give every field office the same source of truth. Launch in weeks with templates tailored to humanitarian and community-impact teams.</p>
+        <p class="text-lg text-white/80 mb-8" data-i18n="hero-subheadline"></p>
         <div class="flex flex-wrap gap-4">
-          <a href="#trial" class="px-6 py-3 bg-brand-accent hover:bg-brand-sunrise text-brand-ink font-semibold rounded-full transition" data-event="cta:hero-trial">Sign Up for Free Trial</a>
+          <a href="#trial" class="px-6 py-3 bg-brand-accent hover:bg-brand-sunrise text-brand-ink font-semibold rounded-full transition" data-i18n="cta-trial" data-event="cta:hero-trial"></a>
-          <a href="#meeting" class="px-6 py-3 border border-white/40 rounded-full" data-event="cta:hero-meeting">Schedule a Meeting</a>
+          <a href="#meeting" class="px-6 py-3 border border-white/40 rounded-full" data-i18n="cta-meeting" data-event="cta:hero-meeting"></a>
         </div>
         <div class="mt-10 grid grid-cols-2 gap-6 text-sm text-white/80">
           <div>
             <p class="text-3xl font-semibold text-white">38%</p>
-            <p>Faster donor &amp; grant reporting cycles</p>
+            <p data-i18n="hero-stat1"></p>
           </div>
           <div>
             <p class="text-3xl font-semibold text-white">2x</p>
-            <p>Increase in volunteer onboarding speed</p>
+            <p data-i18n="hero-stat2"></p>
           </div>
         </div>
       </div>
@@ -107,9 +113,9 @@
         <div class="relative">
           <img src="https://images.unsplash.com/photo-1521737604893-d14cc237f11d?auto=format&fit=crop&w=900&q=80" alt="NGO team collaborating" class="rounded-2xl" />
           <div class="absolute -bottom-8 left-8 bg-white/90 text-brand-ink px-4 py-3 rounded-2xl shadow-lg">
-            <p class="text-xs uppercase tracking-widest text-brand-primary mb-1">Live KPI snapshot</p>
+            <p class="text-xs uppercase tracking-widest text-brand-primary mb-1" data-i18n="hero-card-title"></p>
-            <p class="text-lg font-semibold">Program Impact Dashboard</p>
+            <p class="text-lg font-semibold" data-i18n="hero-card-headline"></p>
-            <p class="text-sm text-brand-primary">Realtime budgets • Volunteer hours • Donor health</p>
+            <p class="text-sm text-brand-primary" data-i18n="hero-card-body"></p>
           </div>
         </div>
       </div>
@@ -118,16 +124,16 @@
 
   <section class="max-w-6xl mx-auto px-6 py-16 grid md:grid-cols-3 gap-8">
     <article class="bg-white rounded-2xl p-6 shadow-brand border border-brand-smoke">
-      <h2 class="text-xl font-semibold mb-2">Unified program ops</h2>
+      <h2 class="text-xl font-semibold mb-2" data-i18n="value1-title"></h2>
-      <p class="text-sm text-brand-ink/80">Track beneficiaries, service delivery, and compliance tasks from a central NGO ERP workspace with audit-ready trails.</p>
+      <p class="text-sm text-brand-ink/80" data-i18n="value1-body"></p>
     </article>
     <article class="bg-white rounded-2xl p-6 shadow-brand border border-brand-smoke">
-      <h2 class="text-xl font-semibold mb-2">Localized + multilingual</h2>
+      <h2 class="text-xl font-semibold mb-2" data-i18n="value2-title"></h2>
-      <p class="text-sm text-brand-ink/80">Configure English, Spanish, and German workspaces with consistent processes while respecting local regulations.</p>
+      <p class="text-sm text-brand-ink/80" data-i18n="value2-body"></p>
     </article>
     <article class="bg-white rounded-2xl p-6 shadow-brand border border-brand-smoke">
-      <h2 class="text-xl font-semibold mb-2">Grant-ready analytics</h2>
+      <h2 class="text-xl font-semibold mb-2" data-i18n="value3-title"></h2>
-      <p class="text-sm text-brand-ink/80">Pre-built dashboards surface impact KPIs, SDG alignment, and donor touchpoints—exportable in seconds.</p>
+      <p class="text-sm text-brand-ink/80" data-i18n="value3-body"></p>
     </article>
   </section>
 
@@ -135,30 +141,30 @@
     <div class="max-w-6xl mx-auto px-6">
       <div class="flex flex-col md:flex-row md:items-end md:justify-between gap-6 mb-12">
         <div>
-          <p class="text-sm uppercase tracking-[0.3em] text-brand-primary mb-3">Insights for NGO leaders</p>
+          <p class="text-sm uppercase tracking-[0.3em] text-brand-primary mb-3" data-i18n="blog-tagline"></p>
-          <h2 class="text-3xl font-semibold">Blog &amp; resource hub</h2>
+          <h2 class="text-3xl font-semibold" data-i18n="blog-title"></h2>
-          <p class="text-brand-ink/80">Stay ahead with tutorials, case studies, and playbooks for NGO ERP rollouts.</p>
+          <p class="text-brand-ink/80" data-i18n="blog-subtitle"></p>
         </div>
-        <a href="#" class="text-brand-accent font-semibold">Browse all articles →</a>
+        <a href="#" class="text-brand-accent font-semibold" data-i18n="blog-link"></a>
       </div>
       <div class="grid gap-6 md:grid-cols-3">
         <article class="border border-brand-smoke rounded-3xl p-6 h-full flex flex-col">
-          <p class="text-xs uppercase tracking-widest text-brand-primary mb-3">Grant compliance</p>
+          <p class="text-xs uppercase tracking-widest text-brand-primary mb-3" data-i18n="blog1-tag"></p>
-          <h3 class="text-xl font-semibold mb-3">Grant-ready NGO ERP checklist</h3>
+          <h3 class="text-xl font-semibold mb-3" data-i18n="blog1-title"></h3>
-          <p class="text-sm text-brand-ink/80 mb-6">Map every grant condition to automated workflows and never miss a reporting milestone again.</p>
+          <p class="text-sm text-brand-ink/80 mb-6" data-i18n="blog1-desc"></p>
-          <a href="#" class="mt-auto text-sm font-semibold text-brand-accent" aria-label="Read grant-ready ERP checklist">Read the guide</a>
+          <a href="#" class="mt-auto text-sm font-semibold text-brand-accent" data-i18n="blog1-link" data-i18n-aria="blog1-aria"></a>
         </article>
         <article class="border border-brand-smoke rounded-3xl p-6 h-full flex flex-col">
-          <p class="text-xs uppercase tracking-widest text-brand-primary mb-3">Field operations</p>
+          <p class="text-xs uppercase tracking-widest text-brand-primary mb-3" data-i18n="blog2-tag"></p>
-          <h3 class="text-xl font-semibold mb-3">Digitize volunteer onboarding</h3>
+          <h3 class="text-xl font-semibold mb-3" data-i18n="blog2-title"></h3>
-          <p class="text-sm text-brand-ink/80 mb-6">Standardize approvals, ID checks, and training with low-code workflows tied to your ERP.</p>
+          <p class="text-sm text-brand-ink/80 mb-6" data-i18n="blog2-desc"></p>
-          <a href="#" class="mt-auto text-sm font-semibold text-brand-accent" aria-label="Read volunteer onboarding article">View playbook</a>
+          <a href="#" class="mt-auto text-sm font-semibold text-brand-accent" data-i18n="blog2-link" data-i18n-aria="blog2-aria"></a>
         </article>
         <article class="border border-brand-smoke rounded-3xl p-6 h-full flex flex-col">
-          <p class="text-xs uppercase tracking-widest text-brand-primary mb-3">Impact storytelling</p>
+          <p class="text-xs uppercase tracking-widest text-brand-primary mb-3" data-i18n="blog3-tag"></p>
-          <h3 class="text-xl font-semibold mb-3">From KPI to donor story</h3>
+          <h3 class="text-xl font-semibold mb-3" data-i18n="blog3-title"></h3>
-          <p class="text-sm text-brand-ink/80 mb-6">Turn ERP data into visual narratives that inspire donors and board members.</p>
+          <p class="text-sm text-brand-ink/80 mb-6" data-i18n="blog3-desc"></p>
-          <a href="#" class="mt-auto text-sm font-semibold text-brand-accent" aria-label="Read donor storytelling article">See examples</a>
+          <a href="#" class="mt-auto text-sm font-semibold text-brand-accent" data-i18n="blog3-link" data-i18n-aria="blog3-aria"></a>
         </article>
       </div>
     </div>
@@ -167,33 +173,36 @@
   <section id="trial" class="bg-brand-ink text-white py-20">
     <div class="max-w-5xl mx-auto px-6 grid md:grid-cols-2 gap-12">
       <div>
-        <p class="text-brand-sunrise text-sm uppercase tracking-[0.3em] mb-4">Sign up free trial</p>
+        <p class="text-brand-sunrise text-sm uppercase tracking-[0.3em] mb-4" data-i18n="trial-tagline"></p>
-        <h2 class="text-3xl font-semibold mb-4">Launch your NGO ERP sandbox in under 5 minutes</h2>
+        <h2 class="text-3xl font-semibold mb-4" data-i18n="trial-heading"></h2>
-        <p class="text-white/80 mb-6">Experience localized NGO templates, donor CRM, and automation recipes. No credit card required—just choose your focus area and invite teammates.</p>
+        <p class="text-white/80 mb-6" data-i18n="trial-body"></p>
         <ul class="space-y-4 text-sm text-white/80">
-          <li class="flex gap-3"><span class="text-brand-emerald">✔</span> Pre-loaded NGO chart of accounts &amp; grant tracking</li>
+          <li class="flex gap-3"><span class="text-brand-emerald">✔</span><span data-i18n="trial-bullet1"></span></li>
-          <li class="flex gap-3"><span class="text-brand-emerald">✔</span> Automated donor receipts + impact dashboards</li>
+          <li class="flex gap-3"><span class="text-brand-emerald">✔</span><span data-i18n="trial-bullet2"></span></li>
-          <li class="flex gap-3"><span class="text-brand-emerald">✔</span> Guided checklists for go-live within 30 days</li>
+          <li class="flex gap-3"><span class="text-brand-emerald">✔</span><span data-i18n="trial-bullet3"></span></li>
         </ul>
       </div>
       <form class="bg-white text-brand-ink rounded-3xl p-8 shadow-brand space-y-5" data-event="form:trial">
-        <label class="block text-sm font-medium">Work email
+        <label class="block text-sm font-medium">
-          <input type="email" required placeholder="impact@yourngo.org" class="mt-2 w-full rounded-2xl border border-brand-smoke px-4 py-3 focus:outline-none focus:ring-2 focus:ring-brand-accent" />
+          <span data-i18n="trial-label-email"></span>
+          <input type="email" required class="mt-2 w-full rounded-2xl border border-brand-smoke px-4 py-3 focus:outline-none focus:ring-2 focus:ring-brand-accent" data-i18n-placeholder="trial-placeholder-email" />
         </label>
-        <label class="block text-sm font-medium">Primary priority
+        <label class="block text-sm font-medium">
+          <span data-i18n="trial-label-priority"></span>
           <select class="mt-2 w-full rounded-2xl border border-brand-smoke px-4 py-3 focus:outline-none focus:ring-2 focus:ring-brand-accent">
-            <option>Grant compliance reporting</option>
+            <option data-i18n-option="priority-1"></option>
-            <option>Volunteer management</option>
+            <option data-i18n-option="priority-2"></option>
-            <option>Donor CRM &amp; fundraising</option>
+            <option data-i18n-option="priority-3"></option>
-            <option>Finance &amp; procurement</option>
+            <option data-i18n-option="priority-4"></option>
           </select>
         </label>
-        <label class="block text-sm font-medium">Country / region
+        <label class="block text-sm font-medium">
-          <input type="text" placeholder="e.g., Paraguay, LATAM" class="mt-2 w-full rounded-2xl border border-brand-smoke px-4 py-3 focus:outline-none focus:ring-2 focus:ring-brand-accent" />
+          <span data-i18n="trial-label-region"></span>
+          <input type="text" class="mt-2 w-full rounded-2xl border border-brand-smoke px-4 py-3 focus:outline-none focus:ring-2 focus:ring-brand-accent" data-i18n-placeholder="trial-placeholder-region" />
         </label>
-        <p class="text-xs text-brand-ink/70">No credit card required. EU hosting &amp; GDPR-ready.</p>
+        <p class="text-xs text-brand-ink/70" data-i18n="trial-microcopy"></p>
-        <button type="submit" class="w-full py-3 rounded-2xl bg-brand-accent text-brand-ink font-semibold">Start Free Trial Now</button>
+        <button type="submit" class="w-full py-3 rounded-2xl bg-brand-accent text-brand-ink font-semibold" data-i18n="cta-trial"></button>
-        <p class="text-xs text-brand-ink/60 text-center">Need help? <a href="#meeting" class="underline">Book a guided setup call</a>.</p>
+        <p class="text-xs text-brand-ink/60 text-center" data-i18n="trial-help"></p>
       </form>
     </div>
   </section>
@@ -201,31 +210,33 @@
   <section id="meeting" class="py-20 bg-white">
     <div class="max-w-5xl mx-auto px-6 grid md:grid-cols-2 gap-12 items-center">
       <div>
-        <p class="uppercase text-xs tracking-[0.3em] text-brand-primary mb-3">Have a meeting</p>
+        <p class="uppercase text-xs tracking-[0.3em] text-brand-primary mb-3" data-i18n="meeting-tagline"></p>
-        <h2 class="text-3xl font-semibold mb-4">See how your NGO can streamline operations, save time, and reduce errors</h2>
+        <h2 class="text-3xl font-semibold mb-4" data-i18n="meeting-heading"></h2>
-        <p class="text-brand-ink/80 mb-6">A 30-minute live walkthrough tailored to your mission, covering localization, integrations, and governance. Walk away with a rollout roadmap.</p>
+        <p class="text-brand-ink/80 mb-6" data-i18n="meeting-body"></p>
         <ul class="space-y-4 text-sm text-brand-ink/80">
-          <li class="flex gap-3"><span class="text-brand-primary">◎</span> Baseline automation scoring</li>
+          <li class="flex gap-3"><span class="text-brand-primary">◎</span><span data-i18n="meeting-bullet1"></span></li>
-          <li class="flex gap-3"><span class="text-brand-primary">◎</span> Tech stack alignment &amp; data migration plan</li>
+          <li class="flex gap-3"><span class="text-brand-primary">◎</span><span data-i18n="meeting-bullet2"></span></li>
-          <li class="flex gap-3"><span class="text-brand-primary">◎</span> Budget templates &amp; total cost forecast</li>
+          <li class="flex gap-3"><span class="text-brand-primary">◎</span><span data-i18n="meeting-bullet3"></span></li>
         </ul>
       </div>
       <div class="bg-brand-snow border border-brand-smoke rounded-3xl p-8 shadow-brand">
-        <p class="text-sm text-brand-primary font-semibold mb-2">Book a meeting</p>
+        <p class="text-sm text-brand-primary font-semibold mb-2" data-i18n="meeting-form-title"></p>
-        <p class="text-brand-ink font-semibold text-xl mb-6">Choose a slot with an NGO ERP specialist</p>
+        <p class="text-brand-ink font-semibold text-xl mb-6" data-i18n="meeting-form-heading"></p>
         <div class="space-y-4 text-sm">
-          <label class="block">Preferred week
+          <label class="block">
+            <span data-i18n="meeting-label-week"></span>
             <input type="week" class="mt-2 w-full rounded-2xl border border-brand-smoke px-4 py-3 focus:outline-none focus:ring-2 focus:ring-brand-accent" />
           </label>
-          <label class="block">Meeting format
+          <label class="block">
+            <span data-i18n="meeting-label-format"></span>
             <select class="mt-2 w-full rounded-2xl border border-brand-smoke px-4 py-3 focus:outline-none focus:ring-2 focus:ring-brand-accent">
-              <option>Strategy deep-dive (45 min)</option>
+              <option data-i18n-option="meeting-option1"></option>
-              <option>Live product tour (30 min)</option>
+              <option data-i18n-option="meeting-option2"></option>
-              <option>Technical architecture review (60 min)</option>
+              <option data-i18n-option="meeting-option3"></option>
             </select>
           </label>
-          <button class="w-full py-3 bg-brand-primary text-white font-semibold rounded-2xl" data-event="cta:meeting">Book a Meeting</button>
+          <button class="w-full py-3 bg-brand-primary text-white font-semibold rounded-2xl" data-i18n="cta-meeting" data-event="cta:meeting"></button>
-          <p class="text-xs text-brand-ink/60 text-center">We send an agenda, video link, and checklist immediately.</p>
+          <p class="text-xs text-brand-ink/60 text-center" data-i18n="meeting-microcopy"></p>
         </div>
       </div>
     </div>
@@ -233,15 +244,277 @@
 
   <footer class="bg-brand-ink text-white py-10">
     <div class="max-w-6xl mx-auto px-6 flex flex-col md:flex-row gap-6 items-center justify-between text-sm">
-      <p>© <span id="year"></span> ODOO4projects — Hosting for the AI generation</p>
+      <p>© <span id="year"></span> <span data-i18n="footer-note"></span></p>
       <div class="flex gap-4">
-        <a href="https://odoo4projects.com/support" class="hover:text-brand-sunrise">Support</a>
+        <a href="https://odoo4projects.com/support" class="hover:text-brand-sunrise" data-i18n="footer-support"></a>
-        <a href="https://odoo4projects.com/legal" class="hover:text-brand-sunrise">Legal</a>
+        <a href="https://odoo4projects.com/legal" class="hover:text-brand-sunrise" data-i18n="footer-legal"></a>
-        <a href="https://odoo4projects.com/contactus" class="hover:text-brand-sunrise">Contact</a>
+        <a href="https://odoo4projects.com/contactus" class="hover:text-brand-sunrise" data-i18n="footer-contact"></a>
       </div>
     </div>
   </footer>
+
   <script>
+    const translations = {
+      en: {
+        'nav-resources': 'Resources',
+        'nav-trial': 'Free Trial',
+        'nav-meeting': 'Book a Meeting',
+        'hero-badge': 'ERP FOR NGOs',
+        'hero-pill': 'Unified NGO ERP Platform',
+        'hero-headline': 'Simplify every mission workflow with an ERP built for NGOs',
+        'hero-subheadline': 'Consolidate programs, automate donor and grant reporting, and give every field office the same source of truth. Launch in weeks with templates tailored to humanitarian and community-impact teams.',
+        'cta-trial': 'Sign Up for Free Trial',
+        'cta-meeting': 'Schedule a Meeting',
+        'hero-stat1': 'Faster donor & grant reporting cycles',
+        'hero-stat2': 'Increase in volunteer onboarding speed',
+        'hero-card-title': 'Live KPI snapshot',
+        'hero-card-headline': 'Program Impact Dashboard',
+        'hero-card-body': 'Realtime budgets • Volunteer hours • Donor health',
+        'value1-title': 'Unified program ops',
+        'value1-body': 'Track beneficiaries, service delivery, and compliance tasks from a central NGO ERP workspace with audit-ready trails.',
+        'value2-title': 'Localized + multilingual',
+        'value2-body': 'Configure English, Spanish, and German workspaces with consistent processes while respecting local regulations.',
+        'value3-title': 'Grant-ready analytics',
+        'value3-body': 'Pre-built dashboards surface impact KPIs, SDG alignment, and donor touchpoints—exportable in seconds.',
+        'blog-tagline': 'Insights for NGO leaders',
+        'blog-title': 'Blog & resource hub',
+        'blog-subtitle': 'Stay ahead with tutorials, case studies, and playbooks for NGO ERP rollouts.',
+        'blog-link': 'Browse all articles →',
+        'blog1-tag': 'Grant compliance',
+        'blog1-title': 'Grant-ready NGO ERP checklist',
+        'blog1-desc': 'Map every grant condition to automated workflows and never miss a reporting milestone again.',
+        'blog1-link': 'Read the guide',
+        'blog1-aria': 'Read the grant-ready NGO ERP checklist',
+        'blog2-tag': 'Field operations',
+        'blog2-title': 'Digitize volunteer onboarding',
+        'blog2-desc': 'Standardize approvals, ID checks, and training with low-code workflows tied to your ERP.',
+        'blog2-link': 'View playbook',
+        'blog2-aria': 'Read the volunteer onboarding playbook',
+        'blog3-tag': 'Impact storytelling',
+        'blog3-title': 'From KPI to donor story',
+        'blog3-desc': 'Turn ERP data into visual narratives that inspire donors and board members.',
+        'blog3-link': 'See examples',
+        'blog3-aria': 'See donor storytelling examples',
+        'trial-tagline': 'Sign up free trial',
+        'trial-heading': 'Launch your NGO ERP sandbox in under 5 minutes',
+        'trial-body': 'Experience localized NGO templates, donor CRM, and automation recipes. No credit card required—just choose your focus area and invite teammates.',
+        'trial-bullet1': 'Pre-loaded NGO chart of accounts & grant tracking',
+        'trial-bullet2': 'Automated donor receipts + impact dashboards',
+        'trial-bullet3': 'Guided checklists for go-live within 30 days',
+        'trial-label-email': 'Work email',
+        'trial-placeholder-email': 'impact@yourngo.org',
+        'trial-label-priority': 'Primary priority',
+        'priority-1': 'Grant compliance reporting',
+        'priority-2': 'Volunteer management',
+        'priority-3': 'Donor CRM & fundraising',
+        'priority-4': 'Finance & procurement',
+        'trial-label-region': 'Country / region',
+        'trial-placeholder-region': 'e.g., Paraguay, LATAM',
+        'trial-microcopy': 'No credit card required. EU hosting & GDPR-ready.',
+        'trial-help': 'Need help? <a href="#meeting" class="underline">Book a guided setup call</a>.',
+        'meeting-tagline': 'Have a meeting',
+        'meeting-heading': 'See how your NGO can streamline operations, save time, and reduce errors',
+        'meeting-body': 'A 30-minute live walkthrough tailored to your mission, covering localization, integrations, and governance. Walk away with a rollout roadmap.',
+        'meeting-bullet1': 'Baseline automation scoring',
+        'meeting-bullet2': 'Tech stack alignment & data migration plan',
+        'meeting-bullet3': 'Budget templates & total cost forecast',
+        'meeting-form-title': 'Book a meeting',
+        'meeting-form-heading': 'Choose a slot with an NGO ERP specialist',
+        'meeting-label-week': 'Preferred week',
+        'meeting-label-format': 'Meeting format',
+        'meeting-option1': 'Strategy deep-dive (45 min)',
+        'meeting-option2': 'Live product tour (30 min)',
+        'meeting-option3': 'Technical architecture review (60 min)',
+        'meeting-microcopy': 'We send an agenda, video link, and checklist immediately.',
+        'footer-note': 'ODOO4projects — Hosting for the AI generation',
+        'footer-support': 'Support',
+        'footer-legal': 'Legal',
+        'footer-contact': 'Contact'
+      },
+      es: {
+        'nav-resources': 'Recursos',
+        'nav-trial': 'Prueba gratuita',
+        'nav-meeting': 'Agendar reunión',
+        'hero-badge': 'ERP PARA ONGs',
+        'hero-pill': 'Plataforma ERP unificada para ONGs',
+        'hero-headline': 'Simplifica cada misión con un ERP diseñado para ONGs',
+        'hero-subheadline': 'Centraliza programas, automatiza reportes de donantes y subvenciones y ofrece a cada sede la misma fuente de verdad. Implementa en semanas con plantillas creadas para equipos humanitarios.',
+        'cta-trial': 'Crear prueba gratuita',
+        'cta-meeting': 'Agendar una reunión',
+        'hero-stat1': 'Ciclos más rápidos de reportes a donantes y subvenciones',
+        'hero-stat2': 'Mayor velocidad en la incorporación de voluntarios',
+        'hero-card-title': 'Panel de KPIs en vivo',
+        'hero-card-headline': 'Tablero de impacto programático',
+        'hero-card-body': 'Presupuestos en tiempo real • Horas voluntarias • Salud de donantes',
+        'value1-title': 'Operaciones unificadas',
+        'value1-body': 'Gestiona beneficiarios, entrega de servicios y cumplimiento desde un único espacio ERP listo para auditorías.',
+        'value2-title': 'Localizado y multilingüe',
+        'value2-body': 'Configura espacios en español, inglés y alemán con procesos coherentes y normativas locales.',
+        'value3-title': 'Analítica lista para subvenciones',
+        'value3-body': 'Tableros preconfigurados muestran KPIs de impacto, alineación ODS y toques con donantes al instante.',
+        'blog-tagline': 'Ideas para líderes de ONG',
+        'blog-title': 'Blog y centro de recursos',
+        'blog-subtitle': 'Aprende con tutoriales, casos prácticos y playbooks para implementar un ERP en tu ONG.',
+        'blog-link': 'Ver todos los artículos →',
+        'blog1-tag': 'Cumplimiento',
+        'blog1-title': 'Checklist ERP listo para subvenciones',
+        'blog1-desc': 'Relaciona cada requisito de la subvención con flujos automatizados y evita retrasos en los reportes.',
+        'blog1-link': 'Leer la guía',
+        'blog1-aria': 'Leer la guía ERP para subvenciones',
+        'blog2-tag': 'Operaciones de campo',
+        'blog2-title': 'Digitaliza la incorporación de voluntarios',
+        'blog2-desc': 'Estandariza aprobaciones, verificaciones e inducciones con flujos low-code conectados a tu ERP.',
+        'blog2-link': 'Ver playbook',
+        'blog2-aria': 'Ver el playbook de voluntariado',
+        'blog3-tag': 'Narrativas de impacto',
+        'blog3-title': 'Del KPI a la historia del donante',
+        'blog3-desc': 'Convierte datos del ERP en historias visuales que inspiran a donantes y juntas directivas.',
+        'blog3-link': 'Ver ejemplos',
+        'blog3-aria': 'Ver ejemplos de historias para donantes',
+        'trial-tagline': 'Activa tu prueba',
+        'trial-heading': 'Lanza tu sandbox ERP para ONG en menos de 5 minutos',
+        'trial-body': 'Explora plantillas localizadas, CRM de donantes y recetas de automatización. Sin tarjeta; solo elige tu prioridad e invita al equipo.',
+        'trial-bullet1': 'Plan contable para ONG y seguimiento de subvenciones precargado',
+        'trial-bullet2': 'Recibos automáticos más tableros de impacto',
+        'trial-bullet3': 'Checklists guiados para salir a producción en 30 días',
+        'trial-label-email': 'Correo laboral',
+        'trial-placeholder-email': 'impacto@tuong.org',
+        'trial-label-priority': 'Prioridad principal',
+        'priority-1': 'Reportes de subvenciones',
+        'priority-2': 'Gestión de voluntarios',
+        'priority-3': 'CRM y recaudación',
+        'priority-4': 'Finanzas y compras',
+        'trial-label-region': 'País / región',
+        'trial-placeholder-region': 'ej. Paraguay, LATAM',
+        'trial-microcopy': 'Sin tarjeta. Hosting en la UE y cumplimiento GDPR.',
+        'trial-help': '¿Dudas? <a href="#meeting" class="underline">Agenda una llamada guiada</a>.',
+        'meeting-tagline': 'Agenda una reunión',
+        'meeting-heading': 'Descubre cómo optimizar operaciones, ahorrar tiempo y reducir errores',
+        'meeting-body': 'Sesión de 30 minutos adaptada a tu misión, con localización, integraciones y gobernanza. Sal con un plan de implementación.',
+        'meeting-bullet1': 'Diagnóstico de automatización',
+        'meeting-bullet2': 'Plan de migración y alineación tecnológica',
+        'meeting-bullet3': 'Plantillas presupuestarias y previsión de costes',
+        'meeting-form-title': 'Agenda una reunión',
+        'meeting-form-heading': 'Elige un horario con un especialista ERP para ONG',
+        'meeting-label-week': 'Semana preferida',
+        'meeting-label-format': 'Formato de reunión',
+        'meeting-option1': 'Sesión estratégica (45 min)',
+        'meeting-option2': 'Tour del producto (30 min)',
+        'meeting-option3': 'Revisión técnica (60 min)',
+        'meeting-microcopy': 'Recibirás agenda, enlace de video y checklist al instante.',
+        'footer-note': 'ODOO4projects — Hosting para la generación IA',
+        'footer-support': 'Soporte',
+        'footer-legal': 'Legal',
+        'footer-contact': 'Contacto'
+      },
+      de: {
+        'nav-resources': 'Ressourcen',
+        'nav-trial': 'Kostenlose Testphase',
+        'nav-meeting': 'Termin buchen',
+        'hero-badge': 'ERP FÜR NGOs',
+        'hero-pill': 'Vereintes NGO-ERP',
+        'hero-headline': 'Vereinfache jeden Einsatz mit einem ERP für NGOs',
+        'hero-subheadline': 'Bündele Programme, automatisiere Spender- und Förderberichte und gib allen Standorten dieselbe Datenbasis. Starte in wenigen Wochen mit maßgeschneiderten Templates.',
+        'cta-trial': 'Kostenlose Testphase starten',
+        'cta-meeting': 'Meeting planen',
+        'hero-stat1': 'Schnellere Förder- & Spenderberichte',
+        'hero-stat2': 'Doppelt so schnelle Ehrenamtlichen-Onboardings',
+        'hero-card-title': 'Live-KPI-Überblick',
+        'hero-card-headline': 'Impact-Dashboard für Programme',
+        'hero-card-body': 'Budgets in Echtzeit • Ehrenamtsstunden • Donor Health',
+        'value1-title': 'Vernetzte Programmsteuerung',
+        'value1-body': 'Verfolge Begünstigte, Leistungsnachweise und Compliance-Aufgaben zentral mit revisionssicheren Trails.',
+        'value2-title': 'Mehrsprachig & lokalisiert',
+        'value2-body': 'Stelle englische, spanische und deutsche Workspaces mit konsistenten Prozessen und lokalen Vorgaben bereit.',
+        'value3-title': 'Förderungsfähige Analysen',
+        'value3-body': 'Fertige Dashboards zeigen Impact-KPIs, SDG-Bezug und Donor-Touchpoints und lassen sich sofort exportieren.',
+        'blog-tagline': 'Insights für NGO-Führungskräfte',
+        'blog-title': 'Blog & Wissenshub',
+        'blog-subtitle': 'Tutorials, Fallstudien und Playbooks für erfolgreiche NGO-ERP-Rollouts.',
+        'blog-link': 'Alle Artikel ansehen →',
+        'blog1-tag': 'Förder-Compliance',
+        'blog1-title': 'ERP-Checkliste für Fördermittel',
+        'blog1-desc': 'Verknüpfe jede Auflage mit automatisierten Workflows und vermeide verspätete Berichte.',
+        'blog1-link': 'Zur Anleitung',
+        'blog1-aria': 'ERP-Checkliste für Fördermittel lesen',
+        'blog2-tag': 'Feldeinsätze',
+        'blog2-title': 'Ehrenamtliche digital onboarden',
+        'blog2-desc': 'Standardisiere Freigaben, ID-Prüfungen und Schulungen mit Low-Code-Flows im ERP.',
+        'blog2-link': 'Playbook ansehen',
+        'blog2-aria': 'Playbook zur Ehrenamtlichen-Onboarding ansehen',
+        'blog3-tag': 'Impact Storytelling',
+        'blog3-title': 'Vom KPI zur Spenderstory',
+        'blog3-desc': 'Mach aus ERP-Daten visuelle Geschichten, die Spender und Boards überzeugen.',
+        'blog3-link': 'Beispiele ansehen',
+        'blog3-aria': 'Beispiele für Spenderstorys ansehen',
+        'trial-tagline': 'Kostenlos testen',
+        'trial-heading': 'Starte dein NGO-ERP-Sandbox in unter 5 Minuten',
+        'trial-body': 'Teste lokalisierte Templates, Donor-CRM und Automatisierungen. Keine Kreditkarte – wähle den Fokus und lade dein Team ein.',
+        'trial-bullet1': 'Vorkonfigurierter Kontenplan & Fördertracking',
+        'trial-bullet2': 'Automatische Spendenbelege & Impact-Dashboards',
+        'trial-bullet3': 'Geführte Checklisten für Go-Live in 30 Tagen',
+        'trial-label-email': 'Arbeits-E-Mail',
+        'trial-placeholder-email': 'impact@deinengo.org',
+        'trial-label-priority': 'Höchste Priorität',
+        'priority-1': 'Förder-Reporting',
+        'priority-2': 'Ehrenamt-Management',
+        'priority-3': 'Spender-CRM & Fundraising',
+        'priority-4': 'Finanzen & Beschaffung',
+        'trial-label-region': 'Land / Region',
+        'trial-placeholder-region': 'z. B. Paraguay, LATAM',
+        'trial-microcopy': 'Keine Kreditkarte. EU-Hosting & DSGVO-konform.',
+        'trial-help': 'Brauchen Sie Hilfe? <a href="#meeting" class="underline">Geführten Call buchen</a>.',
+        'meeting-tagline': 'Meeting vereinbaren',
+        'meeting-heading': 'Erleben Sie, wie Ihre NGO Zeit spart und Fehler reduziert',
+        'meeting-body': 'Ein 30-minütiger Walkthrough zu Lokalisierung, Integrationen und Governance – inklusive Rollout-Fahrplan.',
+        'meeting-bullet1': 'Automation-Score als Ausgangspunkt',
+        'meeting-bullet2': 'Technologie- & Migrationsplan',
+        'meeting-bullet3': 'Budgetvorlagen & Kostenprognose',
+        'meeting-form-title': 'Meeting buchen',
+        'meeting-form-heading': 'Slot mit einem NGO-ERP-Expert:innen wählen',
+        'meeting-label-week': 'Bevorzugte Woche',
+        'meeting-label-format': 'Meeting-Format',
+        'meeting-option1': 'Strategie-Deep-Dive (45 Min.)',
+        'meeting-option2': 'Live-Produktführung (30 Min.)',
+        'meeting-option3': 'Technisches Architektur-Review (60 Min.)',
+        'meeting-microcopy': 'Agenda, Videolink und Checklist folgen sofort.',
+        'footer-note': 'ODOO4projects — Hosting für die KI-Generation',
+        'footer-support': 'Support',
+        'footer-legal': 'Rechtliches',
+        'footer-contact': 'Kontakt'
+      }
+    };
+
+    function setLanguage(lang) {
+      const locale = translations[lang] ? lang : 'en';
+      document.documentElement.lang = locale;
+      document.querySelectorAll('[data-i18n]').forEach(el => {
+        const key = el.dataset.i18n;
+        const value = translations[locale][key] ?? translations.en[key] ?? '';
+        if (value !== undefined) el.innerHTML = value;
+      });
+      document.querySelectorAll('[data-i18n-placeholder]').forEach(el => {
+        const key = el.dataset.i18nPlaceholder;
+        const value = translations[locale][key] ?? translations.en[key] ?? '';
+        if (value !== undefined) el.setAttribute('placeholder', value);
+      });
+      document.querySelectorAll('[data-i18n-option]').forEach(el => {
+        const key = el.dataset.i18nOption;
+        const value = translations[locale][key] ?? translations.en[key] ?? '';
+        if (value !== undefined) el.textContent = value;
+      });
+      document.querySelectorAll('[data-i18n-aria]').forEach(el => {
+        const key = el.dataset.i18nAria;
+        const value = translations[locale][key] ?? translations.en[key] ?? '';
+        if (value !== undefined) el.setAttribute('aria-label', value);
+      });
+    }
+
+    document.getElementById('lang-selector').addEventListener('change', (event) => {
+      setLanguage(event.target.value);
+    });
+
+    setLanguage('en');
     document.getElementById('year').textContent = new Date().getFullYear();
   </script>
 </body>