feat(i18n): add internationalization with DE, FR, ES, PT translations (#12)

Add a compile-time i18n system with 270 translation keys across 5 locales
(EN, DE, FR, ES, PT). Translations are embedded via include_str! and parsed
lazily into flat HashMaps with English fallback for missing keys.

- Add src/i18n module with Locale enum, t()/tw() lookup functions, and tests
- Add JSON translation files for all 5 locales under assets/i18n/
- Provide locale Signal via Dioxus context in App, persisted to localStorage
- Replace all hardcoded UI strings across 33 component/page files
- Add compact locale picker (globe icon + ISO alpha-2 code) in sidebar header
- Add click-outside backdrop dismissal for locale dropdown

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Co-authored-by: Sharang Parnerkar <parnerkarsharang@gmail.com>
Reviewed-on: #12

src/components/pricing_card.rs

@@ -1,6 +1,8 @@
-use crate::models::PricingPlan;
 use dioxus::prelude::*;
 
+use crate::i18n::{t, tw, Locale};
+use crate::models::PricingPlan;
+
 /// Renders a pricing plan card with features list and call-to-action button.
 ///
 /// # Arguments
@@ -9,6 +11,9 @@ use dioxus::prelude::*;
 /// * `on_select` - Callback fired when the CTA button is clicked
 #[component]
 pub fn PricingCard(plan: PricingPlan, on_select: EventHandler<String>) -> Element {
+    let locale = use_context::<Signal<Locale>>();
+    let l = *locale.read();
+
     let card_class = if plan.highlighted {
         "pricing-card pricing-card--highlighted"
     } else {
@@ -16,8 +21,8 @@ pub fn PricingCard(plan: PricingPlan, on_select: EventHandler<String>) -> Elemen
     };
 
     let seats_label = match plan.max_seats {
-        Some(n) => format!("Up to {n} seats"),
-        None => "Unlimited seats".to_string(),
+        Some(n) => tw(l, "common.up_to_seats", &[("n", &n.to_string())]),
+        None => t(l, "common.unlimited_seats"),
     };
 
     rsx! {
@@ -25,7 +30,7 @@ pub fn PricingCard(plan: PricingPlan, on_select: EventHandler<String>) -> Elemen
             h3 { class: "pricing-card-name", "{plan.name}" }
             div { class: "pricing-card-price",
                 span { class: "pricing-card-amount", "{plan.price_eur}" }
-                span { class: "pricing-card-period", " EUR / month" }
+                span { class: "pricing-card-period", " {t(l, \"common.eur_per_month\")}" }
             }
             p { class: "pricing-card-seats", "{seats_label}" }
             ul { class: "pricing-card-features",
@@ -39,7 +44,7 @@ pub fn PricingCard(plan: PricingPlan, on_select: EventHandler<String>) -> Elemen
                     let id = plan.id.clone();
                     move |_| on_select.call(id.clone())
                 },
-                "Get Started"
+                "{t(l, \"common.get_started\")}"
             }
         }
     }