// Shared primitives & context

const I18N = React.createContext({ lang: 'zh', t: (zh, en) => zh });

const useI18N = () => React.useContext(I18N);

// bilingual text helper: <Bi zh="中文" en="English" />
function Bi({ zh, en, sep = " · " }) {
  const { lang } = useI18N();
  if (lang === 'zh') return <>{zh}</>;
  if (lang === 'en') return <>{en}</>;
  return <>{zh}{sep}<span style={{ color: 'var(--muted)' }}>{en}</span></>;
}

// Stable time in HH:MM:SS, updates every second
function useClock() {
  const [t, setT] = React.useState(() => new Date());
  React.useEffect(() => {
    const id = setInterval(() => setT(new Date()), 1000);
    return () => clearInterval(id);
  }, []);
  return t;
}

const pad = (n) => String(n).padStart(2, '0');
const fmtTime = (d) => `${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
const fmtDate = (d) => `${d.getFullYear()}.${pad(d.getMonth()+1)}.${pad(d.getDate())}`;

// Image placeholder (striped) with caption text
function Placeholder({ label = "IMG" }) {
  return (
    <div className="ph">
      <span>{label}</span>
    </div>
  );
}

Object.assign(window, { I18N, useI18N, Bi, useClock, fmtTime, fmtDate, Placeholder });