frontend-admin / Daocheng-Yading

  import { useState, useEffect, useMemo } from "react";
  import { BookOpen, Smartphone, Monitor } from "lucide-react";

  import { DEFAULT_GUIDE_LOCALES } from "../guideContent";
  import { KIOSK_EVENT, loadGuideOverrides, mergeGuideLocales } from "../kioskStorage";
  import { PAGE_CONTENT_INSET } from "../pageContentInset";

  import { useI18n } from "../i18n";

  
  export function GuidePage() {

    const { lang } = useI18n();

    const [guideRev, setGuideRev] = useState(0);

  
    useEffect(() => {
      const h = () => setGuideRev((r) => r + 1);
      window.addEventListener(KIOSK_EVENT, h);
      window.addEventListener("storage", h);
      return () => {
        window.removeEventListener(KIOSK_EVENT, h);
        window.removeEventListener("storage", h);
      };
    }, []);
  
    const LOCALES = useMemo(
      () => mergeGuideLocales(DEFAULT_GUIDE_LOCALES, loadGuideOverrides()),
      [guideRev]
    );
  

    const locale = useMemo(() => {
      const hit = LOCALES.find((l) => l.htmlLang === lang);
      return hit ?? LOCALES[0]!;
    }, [LOCALES, lang]);

  
    useEffect(() => {
      document.documentElement.lang = locale.htmlLang;
      return () => {
        document.documentElement.lang = "zh-CN";
      };
    }, [locale.htmlLang]);
  
    return (
      <div
        className={`flex h-full min-h-0 w-full flex-1 flex-col overflow-hidden ${PAGE_CONTENT_INSET}`}
      >

        <div className="flex min-h-0 w-full min-w-0 flex-1 flex-col gap-3 overflow-hidden sm:gap-4">

          <header className="shrink-0 space-y-2 sm:space-y-2.5">
            <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between sm:gap-4">
              <h1
                lang={locale.htmlLang}
                className={`flex items-center gap-2 text-xl font-bold text-white sm:gap-2 sm:text-2xl ${
                  locale.htmlLang === "bo" ? "font-serif" : ""
                }`}
              >
                <BookOpen className="h-6 w-6 shrink-0 text-sky-400 sm:h-7 sm:w-7" />
                {locale.title}
              </h1>

            </div>
          </header>
  

          <div className="min-h-0 max-h-full flex-1 overflow-y-auto overscroll-y-contain [-webkit-overflow-scrolling:touch] pr-0.5">
            <div className="grid grid-cols-1 gap-4 pb-1 lg:grid-cols-2 lg:gap-6 lg:pb-0">
              <section
                className="flex min-h-0 min-w-0 flex-col rounded-2xl border border-white/20 bg-white/10 p-5 backdrop-blur-xl sm:p-6 lg:min-h-0 lg:p-8"
                aria-labelledby={`guide-touch-${locale.htmlLang}`}
              >
                <h2
                  id={`guide-touch-${locale.htmlLang}`}
                  lang={locale.htmlLang}
                  className={`mb-3 flex shrink-0 items-center gap-2 text-lg font-bold leading-snug text-white sm:mb-4 sm:text-xl ${
                    locale.htmlLang === "bo" ? "font-serif" : ""
                  }`}
                >
                  <Smartphone className="h-5 w-5 shrink-0 text-sky-400 sm:h-6 sm:w-6" />
                  {locale.touchTitle}
                </h2>
                <ul
                  className={`list-outside list-disc space-y-3 pl-10 text-sm leading-relaxed text-blue-100 marker:text-sky-400 sm:space-y-3.5 sm:pl-11 sm:text-base sm:leading-loose ${
                    locale.htmlLang === "bo" ? "font-serif" : ""
                  }`}
                  lang={locale.htmlLang}
                >
                  {locale.touchItems.map((line, idx) => (
                    <li key={`t-${idx}`} className="[overflow-wrap:anywhere]">
                      {line}
                    </li>
                  ))}
                </ul>
              </section>

              <section
                className="flex min-h-0 min-w-0 flex-col rounded-2xl border border-white/20 bg-white/10 p-5 backdrop-blur-xl sm:p-6 lg:min-h-0 lg:p-8"
                aria-labelledby={`guide-software-${locale.htmlLang}`}
              >
                <h2
                  id={`guide-software-${locale.htmlLang}`}
                  lang={locale.htmlLang}
                  className={`mb-3 flex shrink-0 items-center gap-2 text-lg font-bold leading-snug text-white sm:mb-4 sm:text-xl ${
                    locale.htmlLang === "bo" ? "font-serif" : ""
                  }`}
                >
                  <Monitor className="h-5 w-5 shrink-0 text-sky-400 sm:h-6 sm:w-6" />
                  {locale.softwareTitle}
                </h2>
                <ul
                  className={`list-outside list-disc space-y-3 pl-10 text-sm leading-relaxed text-blue-100 marker:text-sky-400 sm:space-y-3.5 sm:pl-11 sm:text-base sm:leading-loose ${
                    locale.htmlLang === "bo" ? "font-serif" : ""
                  }`}
                  lang={locale.htmlLang}
                >
                  {locale.softwareItems.map((line, idx) => (
                    <li key={`s-${idx}`} className="[overflow-wrap:anywhere]">
                      {line}
                    </li>
                  ))}
                </ul>
              </section>
            </div>
          </div>
        </div>

      </div>
    );
  }