<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Zoto Sora-be</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Scheherazade&display=swap" rel="stylesheet">
    <style>
     * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        font: 400 16px Roboto, sans-serif;
        background: linear-gradient(135deg, #667eea, #764ba2);
        min-height: 100vh;
        padding: 1.5rem;
        color: #2d3748;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .container {
        width: 100%;
        max-width: 800px;
        background: #fffc;
        padding: 2rem;
        border-radius: 16px;
        box-shadow: 0 10px 25px #0003;
        backdrop-filter: blur(10px);
      }
      h1 {
        text-align: center;
        margin-bottom: 2rem;
        font: 700 2rem Roboto;
      }
      .section {
        margin-bottom: 1.5rem;
      }
      h3 {
        color: #4a5568;
        margin-bottom: 0.5rem;
        font: 700 1rem Roboto;
        display: flex;
        align-items: center;
        gap: 0.5rem;
      }
      h3:before {
        content: "▸";
        color: #667eea;
      }
      textarea {
        width: 100%;
        height: 100px;
        padding: 1rem;
        border: 2px solid #e2e8f0;
        border-radius: 8px;
        font: 400 1rem Roboto;
        transition: 0.2s;
        resize: none;
      }
      textarea:focus {
        outline: 0;
        border-color: #667eea;
        box-shadow: 0 0 0 3px #667eea1a;
      }
      .output {
        min-height: 80px;
        padding: 1rem;
        background: #f7fafc;
        border-radius: 8px;
        font: 400 1.2rem Scheherazade;
        direction: rtl;
        text-align: right;
        border: 2px solid #e2e8f0;
      }
      button {
        margin-top: 1rem;
        padding: 0.5rem 1.5rem;
        background: #667eea;
        color: #fff;
        border: none;
        border-radius: 6px;
        font: 700 0.9rem Roboto;
        cursor: pointer;
        transition: 0.2s;
      }
      button:hover {
        background: #5a67d8;
        transform: translateY(-1px);
      }
      @media (max-width: 640px) {
        .container {
          padding: 1.5rem;
        }
        h1 {
          font-size: 1.5rem;
        }
        textarea,
        .output {
          font-size: 0.9rem;
        }
        button {
          padding: 0.4rem 1rem;
          font-size: 0.8rem;
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1 data-translate="title">Zoto Sora-be</h1>
      <div class="section">
        <h3 data-translate="phraseLabel">Phrase malgache à convertir</h3>
        <textarea
          id="i"
          placeholder="Entrez votre phrase en malgache moderne ici..."
          data-translate-placeholder="inputPlaceholder"
        ></textarea>
        <button onclick="v()" data-translate="convertButton">Convertir</button>
      </div>
      <div class="section">
        <h3 data-translate="conversionLabel">Conversion sora-be</h3>
        <div class="output" id="c"></div>
      </div>
      <div class="section">
        <h3 data-translate="transcriptionLabel">Transcription arabe</h3>
        <div class="output" id="o"></div>
      </div>
    </div>

    <script>
      const m = {
        "a": "اَ", "e": "اِ", "i": "اِ", "o": "اُ", "y": "اِ",
        "b": "بْ", "d": "دْ", "f": "فْ", "g": "غْ", "h": "هْ",
        "j": "جْ", "k": "كْ", "l": "لْ", "m": "مْ", "n": "نْ",
        "p": "فّْ", "r": "رْ", "s": "سْ", "t": "طْ", "v": "وْ",
        "z": "يْ", "ba": "بَ", "be": "بِ", "bi": "بِ", "bo": "بُ",
        "by": "بِ", "da": "دَ", "de": "دِ", "di": "دِ", "do": "دُ", "dy": "دِ",
        "fa": "فَ", "fe": "فِ", "fi": "فِ", "fo": "فُ", "fy": "فِ",
        "ga": "غَ", "ge": "غِ", "gi": "غِ", "go": "غُ", "gy": "غِ",
        "ha": "هَ", "he": "هِ", "hi": "هِ", "ho": "هُ", "hy": "هِ", "ja": "جَ",
        "je": "جِ", "ji": "جِ", "jo": "جُ", "jy": "جِ", "ka": "كَ",
        "ke": "كِ", "ki": "كِ", "ko": "كُ", "ky": "كِ", "la": "لَ",
        "le": "لِ", "li": "لِ", "lo": "لُ", "ly": "لِ", "ma": "مَ",
        "me": "مِ", "mi": "مِ", "mo": "مُ", "my": "مِ", "na": "نَ",
        "ne": "نِ", "ni": "نِ", "no": "نُ", "ny": "نِ", "pa": "فَّ",
        "pe": "فِّ", "pi": "فِّ", "po": "فُّ", "py": "فِّ", "ra": "رَ",
        "re": "رِ", "ri": "رِ", "ro": "رُ", "ry": "رِ", "sa": "سَ",
        "se": "سِ", "si": "سِ", "so": "سُ", "sy": "سِ", "ta": "طَ",
        "te": "طِ", "ti": "طِ", "to": "طُ", "ty": "طِ", "va": "وَ",
        "ve": "وِ", "vi": "وِ", "vo": "وُ", "vy": "وِ", "za": "يَ",
        "ze": "يِ", "zi": "يِ", "zo": "يُ", "zy": "زِ", "mb": "بْ",
        "mba": "بَ", "mbe": "بِ", "mbi": "بِ", "mbo": "بُ",
        "mby": "بِ", "mp": "فّْ", "mpa": "فَّ", "mpe": "فِّ",
        "mpi": "فِّ", "mpo": "فُّ", "mpy": "فِّ", "ts": "تْ",
        "tsa": "تَ", "tse": "تِ", "tsi": "تِ", "tso": "تُ",
        "tsy": "تِ", "nj": "جْ", "nja": "جَ", "nje": "جِ",
        "nji": "جِ", "njo": "جُ", "njy": "جِ", "dr": "رّْ",
        "dra": "رَّ", "dre": "رِّ", "dri": "رِّ", "dro": "رُّ",
        "dry": "رِّ", "tr": "رّْ", "tra": "رَّ", "tre": "رِّ", "tri": "رِّ", "tro": "رُّ",
        "try": "رِّ", "ntr": "رّْ", "ntra": "رَّ", "ntre": "رِّ",
        "ntri": "رِّ", "ntry":"رِّ", "ntro": "رُّ", "nk": "كْ", "nka": "كَ",
        "nke": "كِ", "nki": "كِ", "nky": "كِ","nko": "كُ", "ng": "عْ",
        "nga": "عَ", "nge": "عِ", "ngi": "عِ", "ngy": "عِ", "gno": "عُ", "nts": "تْ", "ntsa": "تَ", "ntse": "تِ",
        "ntsi": "تِ", "ntso": "تُ", "ntsy": "تِ"
      };

      const a = {
        "a": "ا", "b": "ب", "d": "د", "f": "ف", "g": "غ", "h": "ح",
        "j": "ج", "k": "ك", "l": "ل", "m": "م", "n": "ن", "p": "پ",
        "r": "ر", "s": "س", "t": "ت", "v": "ڤ", "z": "ز", "e": "ي",
        "i": "ي", "o": "و", "y": "ي", "mp": "پ"
      };

      function x(t, r) {
        let n = t.toLowerCase().replace(/'/g, " ").replace(/-/g, "").replace(/,/g, "،").replace(/\?/g, "؟");
        Object.keys(r).sort((a, b) => b.length - a.length).forEach(k => {
          n = n.replace(new RegExp(k, "g"), r[k]);
        });
        return n;
      }

      function v() {
        let t = document.getElementById("i").value;
        document.getElementById("c").innerHTML = x(t, m);
        document.getElementById("o").innerHTML = x(t, a);
      }

const translations = {
        fr: {
          title: "Zoto Sora-be",
          phraseLabel: "Phrase malgache à convertir",
          conversionLabel: "Conversion sora-be",
          transcriptionLabel: "Transcription phonétique",
          inputPlaceholder: "Entrez votre phrase en malgache moderne ici...",
          convertButton: "Convertir",
        },
        ar: {
          title: "زوتو سورابي",
          phraseLabel: "الجملة المالغاشية للتحويل",
          conversionLabel: "تحويل سورابي",
          transcriptionLabel: "الكتابة الصوتية",
          inputPlaceholder: "أدخل جملتك بالملغاشية هنا ...",
          convertButton: "تحويل",
        },
        en: {
          title: "Zoto Sora-be",
          phraseLabel: "Malagasy sentence to convert",
          conversionLabel: "Sora-be conversion",
          transcriptionLabel: "Phonetic transcription",
          inputPlaceholder: "Enter your modern Malagasy sentence here...",
          convertButton: "Convert",
        },
      };

      function applyTranslations(lang) {
        const selectedLang = translations[lang] || translations.en; // Langue par défaut
        document.querySelectorAll("[data-translate]").forEach((el) => {
          el.textContent = selectedLang[el.dataset.translate];
        });
        document.querySelectorAll("[data-translate-placeholder]").forEach((el) => {
          el.placeholder = selectedLang[el.dataset.translatePlaceholder];
        });

        // Ajuster les styles pour RTL
        document.body.style.direction = lang === "ar" ? "rtl" : "ltr";
      }

      // Détection automatique
      document.addEventListener("DOMContentLoaded", () => {
        const userLang = navigator.language.split("-")[0];
        applyTranslations(userLang);
      });
</script>
  </body>
</html>