<div id='root'></div>

*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  /* defaults */
  --menu-justify-content: center; 
  --scroll-direction-x: scroll;
  --scroll-direction-y: hidden;
  --scroll-snap-type: x mandatory;
}

body {
  font-family: Arial, sans-serif;
  background-color: #1a1d1d;
  padding: 20px;
  font-size: 0.875rem;
  color: #333;
}

.container {
  background-color: #eee;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  max-width: 30rem;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.controls-container {
  display: flex;
  justify-content: space-evenly;
  width: 100%;
}

.scroll-container {
  overflow-x: var(--scroll-direction-x);
  overflow-y: var(--scroll-direction-y);
  scroll-snap-type: var(--scroll-snap-type);
  height: 250px;
  display: flex;
  

}

.scroll-item {
  flex: 0 0 100%;
  scroll-snap-align: start;
}

@media screen and (max-width: 600px) {
  body {
    padding: 5px;
  }
  .container {
    width: 100%;
  }
}

.lang-demo {
  border: 2px solid #ddd;
  margin-block-start: 20px;
  padding-inline-start: 20px;
  padding-inline-end: 20px;
  background-color: #fff;
}

.lang-demo.English {
  direction: ltr;
  text-align: left;
}

.lang-demo.Arabic {
  direction: rtl;
  text-align: right;
}

.lang-demo.Japanese {
  writing-mode: vertical-rl;
}

.lang-demo.Mongolian {
  writing-mode: vertical-lr;
}


select {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 8px 10px;
}

import React, {
  useState,
  useRef,
  useEffect,
  useReducer
} from "https://esm.sh/react@18.2.0";
import ReactDOM from "https://esm.sh/react-dom@18.2.0";

const languageInfo = {
  English: {
    writingMode: "horizontal-tb",
    textDirection: "ltr",
    justifyContent: "center",
    scrollSnapType: "x mandatory",
    scrollDirection: "horizontal",
    translations: {
    enhancedUserExperience: {
      title: "Enhanced User Experience",
      content: "Incorporating scroll snap in web design dramatically improves user experience. It offers a cleaner, more controlled scrolling interaction, ensuring content is neatly aligned and easily readable. By snapping directly to relevant sections, users no longer have to struggle with manual adjustments. This feature is especially beneficial in long, scroll-heavy pages, making navigation smooth and effortless."
    },
    improvedContentFocus: {
      title: "Improved Content Focus",
      content: "Scroll snap shines in its ability to emphasize important content. By guiding users directly to key sections, it ensures that critical information isn't missed during scrolling. This focused approach is perfect for galleries, feature lists, or product showcases, where each item deserves individual attention. It's a simple yet effective tool to highlight what matters most on your page."
    },
    responsiveAdaptiveDesign: {
      title: "Responsive and Adaptive Design",
      content: "One of the greatest strengths of scroll snap is its adaptability across different devices and screen sizes. Whether on a desktop or a mobile device, scroll snap maintains a consistent and engaging user interface. It seamlessly integrates with various layout designs, including those for different reading directions in multilingual websites, enhancing global accessibility and usability."
    }
  }
  },
  Arabic: {
    writingMode: "horizontal-tb",
    textDirection: "rtl",
    justifyContent: "center",
    scrollSnapType: "x mandatory",
    scrollDirection: "horizontal",
    translations: {
    enhancedUserExperience: {
      title: "تجربة مستخدم محسنة",
      content: "يؤدي دمج أداة التمرير في تصميم الويب إلى تحسين تجربة المستخدم بشكل كبير. فهو يوفر تفاعل تمرير أكثر وضوحًا وتحكمًا، مما يضمن محاذاة المحتوى بدقة وسهولة قراءته. ومن خلال الانتقال مباشرة إلى الأقسام ذات الصلة، لم يعد المستخدمون مضطرين إلى مواجهة التعديلات اليدوية. تعتبر هذه الميزة مفيدة بشكل خاص في الصفحات الطويلة ذات التمرير الثقيل، مما يجعل التنقل سلسًا وسهلاً."
    },
    improvedContentFocus: {
      title: "تحسين التركيز على المحتوى",
      content: "تتألق ميزة Scroll Snap في قدرتها على التركيز على المحتوى المهم. ومن خلال توجيه المستخدمين مباشرة إلى الأقسام الرئيسية، فإنه يضمن عدم تفويت المعلومات المهمة أثناء التمرير. يعد هذا النهج المركز مثاليًا للمعارض أو قوائم الميزات أو عروض المنتجات، حيث يستحق كل عنصر الاهتمام الفردي. إنها أداة بسيطة لكنها فعالة لتسليط الضوء على الأمور الأكثر أهمية في صفحتك."
    },
    responsiveAdaptiveDesign: {
      title: "تصميم سريع الاستجابة والتكيف",
      content: "واحدة من أعظم نقاط القوة في أداة التمرير المفاجئة هي قدرتها على التكيف عبر الأجهزة المختلفة وأحجام الشاشات. سواء على سطح المكتب أو جهاز محمول، تحافظ ميزة التمرير السريع على واجهة مستخدم متسقة وجذابة. فهو يتكامل بسلاسة مع تصميمات التخطيط المختلفة، بما في ذلك تلك الخاصة باتجاهات القراءة المختلفة في مواقع الويب متعددة اللغات، مما يعزز إمكانية الوصول العالمية وسهولة الاستخدام."
    }
  }
  },
  Japanese: {
    writingMode: "vertical-rl",
    textDirection: "ltr",
    justifyContent: "start",
    scrollSnapType: "y mandatory",
    scrollDirection: "vertical",
    translations: {
    enhancedUserExperience: {
      title: "強化されたユーザーエクスペリエンス",
      content: "デザインにスクロール スナップを組み込むと、ユーザー エクスペリエンスが大幅に向上します。よりクリーンでより制御されたスクロール操作を提供し、コンテンツがきちんと整列して読みやすくなります。関連するセクションに直接スナップすることで、ユーザーは手動での調整に苦労する必要がなくなります。この機能は、長くスクロールの多いページで特に有益で、ナビゲーションがスムーズかつ楽になります。"
    },
    improvedContentFocus: {
      title: "コンテンツ重視の改善",
      content: "スクロール スナップは、重要なコンテンツを強調する機能が優れています。ユーザーを主要なセクションに直接誘導することで、スクロール中に重要な情報を見逃すことがなくなります。この焦点を絞ったアプローチは、各アイテムが個別に注目されるべきギャラリー、特集リスト、製品ショーケースに最適です。これは、ページ上で最も重要なことを強調表示するためのシンプルかつ効果的なツールです。"
    },
    responsiveAdaptiveDesign: {
      title: "レスポンシブかつアダプティブなデザイン",
      content: "スクロール スナップの最大の強みの 1 つは、さまざまなデバイスや画面サイズに適応できることです。デスクトップでもモバイルデバイスでも、スクロール スナップは一貫した魅力的なユーザー インターフェイスを維持します。多言語 Web サイトでのさまざまな閲覧方向向けのデザインなど、さまざまなレイアウト デザインとシームレスに統合し、グローバルなアクセシビリティと使いやすさを向上させます。"
    }
  }
  },
  Mongolian: {
    writingMode: "vertical-lr",
    textDirection: "ltr",
    justifyContent: "start",
    scrollSnapType: "y mandatory",
    scrollDirection: "vertical",
    translations: {
    enhancedUserExperience: {
      title: "Сайжруулсан хэрэглэгчийн туршлага",
      content: "Вэб дизайнд гүйлгэх товчийг оруулах нь хэрэглэгчийн туршлагыг эрс сайжруулдаг. Энэ нь илүү цэвэр, хяналттай гүйлгэх харилцан үйлчлэлийг санал болгож, агуулгыг цэгцтэй, уншихад хялбар болгодог. Холбогдох хэсгүүдэд шууд шилжсэнээр хэрэглэгчид гарын авлагын тохируулгатай тэмцэх шаардлагагүй болсон. Энэ функц нь ялангуяа урт, гүйлгэх хүнд хуудсуудад ашигтай бөгөөд навигацийг жигд, хялбар болгодог."
    },
    improvedContentFocus: {
      title: "تحسين التركيز على المحتوى",
      content: "تتألق ميزة Scroll Snap في قدرتها على التركيز على المحتوى المهم. ومن خلال توجيه المستخدمين مباشرة إلى الأقسام الرئيسية، فإنه يضمن عدم تفويت المعلومات المهمة أثناء التمرير. يعد هذا النهج المركز مثاليًا للمعارض أو قوائم الميزات أو عروض المنتجات، حيث يستحق كل عنصر الاهتمام الفردي. إنها أداة بسيطة لكنها فعالة لتسليط الضوء على الأمور الأكثر أهمية في صفحتك."
    },
    responsiveAdaptiveDesign: {
      title: "تصميم سريع الاستجابة والتكيف",
      content: "واحدة من أعظم نقاط القوة في أداة التمرير المفاجئة هي قدرتها على التكيف عبر الأجهزة المختلفة وأحجام الشاشات. سواء على سطح المكتب أو جهاز محمول، تحافظ ميزة التمرير السريع على واجهة مستخدم متسقة وجذابة. فهو يتكامل بسلاسة مع تصميمات التخطيط المختلفة، بما في ذلك تلك الخاصة باتجاهات القراءة المختلفة في مواقع الويب متعددة اللغات، مما يعزز إمكانية الوصول العالمية وسهولة الاستخدام."
    }
  }
  }
};

function App() {
  const [language, setLanguage] = useState("English"); // Default language
  const [showInEnglish, setShowInEnglish] = useState(true);

  const currentTranslations = showInEnglish
    ? languageInfo.English.translations
    : languageInfo[language].translations;

  const handleLanguageChange = (event) => {
    const selectedLanguage = event.target.value;
    setLanguage(selectedLanguage);
    const langProps = languageInfo[selectedLanguage];
    const rootStyle = document.documentElement.style;
    rootStyle.setProperty("--menu-justify-content", langProps.justifyContent);
    if (langProps.scrollDirection === "horizontal") {
      rootStyle.setProperty("--scroll-direction-x", "scroll");
      rootStyle.setProperty("--scroll-direction-y", "hidden");
    } else {
      rootStyle.setProperty("--scroll-direction-x", "hidden");
      rootStyle.setProperty("--scroll-direction-y", "scroll");
    }
    rootStyle.setProperty("--scroll-snap-type", langProps.scrollSnapType);
  };

  const handleCheckboxChange = (event) => {
    setShowInEnglish(event.target.checked);
  };

  return (
    <div className="container">
      <div className="controls-container">
        <select onChange={handleLanguageChange}>
          <option value="English">English H-LTR</option>
          <option value="Arabic">Arabic H-RTL</option>
          <option value="Japanese">Japanese V-RTL</option>
          <option value="Mongolian">Mongolian V-LTR</option>
        </select>
        <label>
          Show in English
          <input
            type="checkbox"
            checked={showInEnglish}
            onChange={handleCheckboxChange}
          />
        </label>
      </div>

      <div className={`lang-demo ${language}`}>
        <div class="scroll-container">
          <div class="scroll-item">
            <h3>{currentTranslations.enhancedUserExperience.title}</h3>
            <p>
              {currentTranslations.enhancedUserExperience.content}
            </p>
          </div>
         <div class="scroll-item">
            <h3>{currentTranslations.improvedContentFocus.title}</h3>
            <p>
              {currentTranslations.improvedContentFocus.content}
            </p>
          </div>
          <div class="scroll-item">
            <h3>{currentTranslations.responsiveAdaptiveDesign.title}</h3>
            <p>
              {currentTranslations.responsiveAdaptiveDesign.content}
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));