Multi-Language Support

export const LANGUAGES = {
  tr: {
    code: 'tr',
    name: 'Türkçe',
    flag: '🇹🇷',
    translations: {
      // Product page
      seeOptions: "Seçenekleri Görün",
      addToCart: "Sepete Ekle",
      productDescription: "Ürün seçeneklerini inceleyin ve sipariş verin.",
      clickToOrder: "Ürüne tıklayarak WhatsApp ile sipariş verebilirsiniz",
      
      // Order button
      orderButton: "Sipariş Ver",
      orderUnavailable: "Servis Saatleri Dışındadır",
      
      // Minimum order
      minimumOrder: "Minimum sepet tutarı {minimumAmount} TL'dir",
      currentCart: "Şu anki sepet: {amount} TL",
      
      // Welcome message
      welcomeMessage: "Lütfen ilk siparişinizde adresinizi eklemeyi unutmayın, Teşekkürler.",
      understood: "Anladım",
      
      // Scroll indicator
      scrollDown: "Kaydır"
    }
  },
  ar: {
    code: 'ar',
    name: 'العربية',
    flag: '🇸🇦',
    translations: {
      // Product page
      seeOptions: "انظر الخيارات",
      addToCart: "أضف إلى السلة",
      productDescription: "تعرف على خيارات المنتج واطلبه.",
      clickToOrder: "يمكنكم الطلب عبر الواتساب بالضغط على المنتج.",
      
      // Order button
      orderButton: "اطلب",
      orderUnavailable: "خارج ساعات الخدمة",
      
      // Minimum order
      minimumOrder: "الحد الأدنى للسلة {minimumAmount} ليرة تركية",
      currentCart: "السلة الحالية: {amount} ليرة تركية",
      
      // Welcome message
      welcomeMessage: "يرجى عدم نسيان إضافة عنوانكم في طلبكم الأول، شكراً.",
      understood: "فهمت",
      
      // Scroll indicator
      scrollDown: "تمرر"
    }
  }
};

export const DEFAULT_LANGUAGE = 'tr';

export const t = (key, params = {}) => {
  const lang = getCurrentLanguage();
  const translation = LANGUAGES[lang]?.translations[key] || 
                      LANGUAGES[DEFAULT_LANGUAGE]?.translations[key] || 
                      key;
  
  // Replace parameters
  let result = translation;
  Object.keys(params).forEach(param => {
    result = result.replace(`{${param}}`, params[param]);
  });
  
  return result;
};

let currentLanguage = DEFAULT_LANGUAGE;

export const getCurrentLanguage = () => {
  // Check localStorage on first load
  if (typeof window !== 'undefined') {
    const saved = localStorage.getItem('suapp-language');
    if (saved && LANGUAGES[saved]) {
      currentLanguage = saved;
    }
  }
  return currentLanguage;
};

export const toggleLanguage = () => {
  currentLanguage = currentLanguage === 'tr' ? 'ar' : 'tr';
  
  // Save to localStorage
  if (typeof window !== 'undefined') {
    localStorage.setItem('suapp-language', currentLanguage);
  }
  
  return currentLanguage;
};

export const getCurrentLanguageInfo = () => {
  const lang = getCurrentLanguage();
  return LANGUAGES[lang];
};

import { useState, useEffect } from 'react';
import { toggleLanguage, getCurrentLanguageInfo } from '../config/language';

function LanguageSwitcher() {
  const [langInfo, setLangInfo] = useState(getCurrentLanguageInfo());

  const handleToggle = () => {
    const newLang = toggleLanguage();
    setLangInfo(getCurrentLanguageInfo());
    
    // Force re-render of entire app
    window.location.reload();
  };

  return (
    <button onClick={handleToggle} className="language-switcher">
      <span className="flag">{langInfo.flag}</span>
      <span className="name">{langInfo.name}</span>
    </button>
  );
}

export default LanguageSwitcher;

tr: {
  translations: {
    // ... existing translations
    newKey: "Yeni Çeviri"
  }
}

ar: {
  translations: {
    // ... existing translations
    newKey: "ترجمة جديدة"
  }
}

export const LANGUAGES = {
  tr: { /* ... */ },
  ar: { /* ... */ },
  en: {
    code: 'en',
    name: 'English',
    flag: '🇬🇧',
    translations: {
      seeOptions: "See Options",
      addToCart: "Add to Cart",
      productDescription: "Browse product options and order.",
      clickToOrder: "Click the product to order via WhatsApp",
      orderButton: "Place Order",
      orderUnavailable: "Outside Service Hours",
      minimumOrder: "Minimum cart amount is {minimumAmount} TL",
      currentCart: "Current cart: {amount} TL",
      welcomeMessage: "Please don't forget to add your address on your first order. Thank you.",
      understood: "Understood",
      scrollDown: "Scroll"
    }
  }
};

html[lang="ar"] {
  direction: rtl;
}

html[lang="ar"] .modal-close-btn {
  left: 1rem;
  right: auto;
}

html[lang="ar"] .quantity-controls {
  flex-direction: row-reverse;
}

import { getCurrentLanguage } from './config/language';

useEffect(() => {
  document.documentElement.setAttribute('lang', getCurrentLanguage());
}, []);

import { t } from '../config/language';

const OrderButton = () => {
  const { getTotalItems, getTotalPrice } = useCart();
  const totalItems = getTotalItems();
  const totalPrice = getTotalPrice();

  return (
    <button className="order-button">
      {t('orderButton')} - {totalPrice.toFixed(2)} TL
    </button>
  );
};

import { t } from '../config/language';

const ProductModal = ({ product, isOpen, onClose }) => {
  return (
    <div className="modal-content">
      <div className="modal-header">
        <h2>{product.name}</h2>
        <p>{t('productDescription')}</p>
      </div>
      
      <div className="modal-footer">
        <p>💬 {t('clickToOrder')}</p>
      </div>
    </div>
  );
};

import { t } from '../config/language';
import { ORDER_LIMITS } from '../config/orderLimits';

function ValidationMessage({ totalPrice }) {
  if (totalPrice < ORDER_LIMITS.minimumOrderAmount) {
    return (
      <div className="validation-error">
        {t('minimumOrder', { minimumAmount: ORDER_LIMITS.minimumOrderAmount })}
        <br />
        {t('currentCart', { amount: totalPrice.toFixed(2) })}
      </div>
    );
  }
  return null;
}