// fc-l10n.jsx, a localization pass of one representative flow — the Today
// dashboard — across the priority locales, each paired to the sport that drives
// its audience. Demonstrates the THREE things that actually break in this app:
//   1. Number formatting — decimal comma (pt/es/fr/ru) vs period (ja/ko/ar/he).
//   2. Transcreation of the coach voice — idiom re-authored, not literally translated.
//   3. RTL layout — Arabic & Hebrew mirror the whole screen (dir="rtl").
// Division names stay as official proper nouns; the rules engine stays neutral.
// Fonts: IBM Plex Sans + its Arabic / Hebrew / JP / KR siblings (brand-consistent).
// NB: copy here is a credible design-pass draft — ship-quality strings need a
// native combat-sports writer + medical review on the safety lines (see l10n doc).

const { Phone: LPhone, StatusBar: LStatusBar, HomeIndicator: LHome } = window;

// plex sibling families by script
const F_LATIN = "'IBM Plex Sans', system-ui, sans-serif";
const F_AR = "'IBM Plex Sans Arabic', 'IBM Plex Sans', sans-serif";
const F_HE = "'IBM Plex Sans Hebrew', 'IBM Plex Sans', sans-serif";
const F_JP = "'IBM Plex Sans JP', 'IBM Plex Sans', sans-serif";
const F_KR = "'IBM Plex Sans KR', 'IBM Plex Sans', sans-serif";
const F_OSWALD = "'Oswald', sans-serif";

// Each locale: dir, fonts, whether eyebrows uppercase/track (Latin+Cyrillic yes;
// CJK/Arabic/Hebrew no), decimal separator, sport pairing, and the strings.
const LOCALES = {
  pt: { name: 'Português (BR)', flagSport: 'BJJ · Brasil', dir: 'ltr', sans: F_LATIN, disp: F_OSWALD, caps: true, dec: ',',
    s: { today: 'Hoje', sport: 'JIU-JÍTSU · LEVE', camp: 'EM PREPARAÇÃO · DIA 12', out: 'FALTAM 38 DIAS PARA A PESAGEM',
      unit: 'KG', trend: 'Tendência · dentro do plano', verdict: 'No ritmo',
      head: 'No ponto certo.', body: '0,6%/sem — abaixo do limite seguro. Mantém esse ritmo e bate o peso inteiro, sem se arrebentar.',
      cta: 'REGISTRAR PESO', goal: 'Meta', goalV: '74,4 kg', tabs: ['Hoje', 'Evolução', 'Plano', 'Mais'] } },
  es: { name: 'Español', flagSport: 'MMA · boxeo', dir: 'ltr', sans: F_LATIN, disp: F_OSWALD, caps: true, dec: ',',
    s: { today: 'Hoy', sport: 'MMA · PESO LIGERO', camp: 'EN PREPARACIÓN · DÍA 12', out: 'FALTAN 38 DÍAS PARA EL PESAJE',
      unit: 'KG', trend: 'Tendencia · según el plan', verdict: 'En ritmo',
      head: 'Justo en el punto.', body: '0,6 %/sem — por debajo del límite seguro. Mantén esto y darás el peso en plena forma.',
      cta: 'REGISTRAR PESO', goal: 'Meta', goalV: '74,4 kg', tabs: ['Hoy', 'Progreso', 'Plan', 'Más'] } },
  fr: { name: 'Français', flagSport: 'judo · boxe', dir: 'ltr', sans: F_LATIN, disp: F_OSWALD, caps: true, dec: ',',
    s: { today: 'Aujourd’hui', sport: 'JUDO · −73 KG', camp: 'EN PRÉPARATION · JOUR 12', out: 'PESÉE DANS 38 JOURS',
      unit: 'KG', trend: 'Tendance · conforme au plan', verdict: 'Dans les temps',
      head: 'Pile dans le rythme.', body: '0,6 %/sem — sous le seuil de sécurité. Tiens ça et tu feras le poids en pleine forme.',
      cta: 'ENREGISTRER LE POIDS', goal: 'Objectif', goalV: '74,4 kg', tabs: ['Accueil', 'Courbe', 'Plan', 'Plus'] } },
  ru: { name: 'Русский', flagSport: 'борьба · дзюдо', dir: 'ltr', sans: F_LATIN, disp: F_LATIN, caps: true, dec: ',',
    s: { today: 'Сегодня', sport: 'ВОЛЬНАЯ БОРЬБА · 74 КГ', camp: 'НА СБОРАХ · ДЕНЬ 12', out: 'ДО ВЗВЕШИВАНИЯ 38 ДНЕЙ',
      unit: 'КГ', trend: 'Тренд · по плану', verdict: 'В графике',
      head: 'Точно в цель.', body: '0,6%/нед — ниже безопасного предела. Держи темп и выйдешь на вес свежим, без надрыва.',
      cta: 'ЗАПИСАТЬ ВЕС', goal: 'Цель', goalV: '74,4 кг', tabs: ['Сегодня', 'Тренд', 'План', 'Ещё'] } },
  ja: { name: '日本語', flagSport: '柔道', dir: 'ltr', sans: F_JP, disp: F_JP, caps: false, dec: '.',
    s: { today: '今日', sport: '柔道 · 73kg級', camp: '減量中 · 12日目', out: '計量まで38日',
      unit: 'kg', trend: '推移 · 計画どおり', verdict: '順調',
      head: 'ぴったりのペース。', body: '週0.6% — 安全圏内。このまま行けば、万全の状態で計量を通過できます。',
      cta: '体重を記録', goal: '目標', goalV: '74.4 kg', tabs: ['今日', '推移', '計画', 'その他'] } },
  ko: { name: '한국어', flagSport: '태권도', dir: 'ltr', sans: F_KR, disp: F_KR, caps: false, dec: '.',
    s: { today: '오늘', sport: '태권도 · −68kg', camp: '감량 중 · 12일째', out: '계량까지 38일',
      unit: 'kg', trend: '추세 · 계획대로', verdict: '순조로움',
      head: '딱 좋은 페이스.', body: '주 0.6% — 안전 범위 안. 이대로 유지하면 가뿐한 상태로 계량을 통과합니다.',
      cta: '체중 기록', goal: '목표', goalV: '74.4 kg', tabs: ['오늘', '추세', '계획', '더보기'] } },
  ar: { name: 'العربية', flagSport: 'جيو جيتسو · الإمارات', dir: 'rtl', sans: F_AR, disp: F_AR, caps: false, dec: '.',
    s: { today: 'اليوم', sport: 'جيو جيتسو · وزن خفيف', camp: 'في المعسكر · اليوم 12', out: '38 يومًا حتى الوزن',
      unit: 'كغ', trend: 'المسار · ضمن الخطة', verdict: 'على المسار',
      head: 'في الإيقاع المثالي.', body: '%0.6 أسبوعيًا — تحت الحد الآمن. حافظ على هذا الإيقاع وستصل إلى الوزن بكامل طاقتك.',
      cta: 'تسجيل الوزن', goal: 'الهدف', goalV: '74.4 كغ', tabs: ['اليوم', 'المسار', 'الخطة', 'المزيد'] } },
  he: { name: 'עברית', flagSport: 'ג׳ודו', dir: 'rtl', sans: F_HE, disp: F_HE, caps: false, dec: '.',
    s: { today: 'היום', sport: 'ג׳ודו · ‎−73 ק״ג', camp: 'במחנה אימונים · יום 12', out: '38 ימים לשקילה',
      unit: 'ק״ג', trend: 'מגמה · לפי התוכנית', verdict: 'בקצב',
      head: 'בדיוק בקצב הנכון.', body: '0.6% בשבוע — מתחת לסף הבטוח. שמור על הקצב ותגיע למשקל רענן, בלי להישבר.',
      cta: 'רישום משקל', goal: 'יעד', goalV: '74.4 ק״ג', tabs: ['היום', 'מגמה', 'תוכנית', 'עוד'] } },
};

// number with locale decimal separator (digits stay Western — standard in modern
// apps incl. Gulf Arabic; Arabic-Indic ٧٦٫٠ is an option flagged in the l10n doc).
const fmtNum = (s, dec) => dec === ',' ? s.replace('.', ',') : s;

function L10nLabel({ children, loc, color, size = 11, mb = 0 }) {
  const caps = loc.caps;
  return <div style={{ fontFamily: loc.disp, fontSize: size, fontWeight: 600, letterSpacing: caps ? '0.14em' : '0.01em', textTransform: caps ? 'uppercase' : 'none', color, marginBottom: mb }}>{children}</div>;
}

// tab bar, localized + auto-mirroring (dir on the flex row handles RTL order)
function L10nTabs({ loc }) {
  const icons = [
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M4 11 L12 4 L20 11 M6 9.5 V20 H18 V9.5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>,
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M3 17 C7 17 9 7 12 7 S17 14 21 5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/></svg>,
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none"><rect x="4" y="4" width="16" height="16" rx="3" stroke="currentColor" strokeWidth="1.6"/><path d="M8 10 H16 M8 14 H13" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/></svg>,
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none"><circle cx="5" cy="12" r="1.6" fill="currentColor"/><circle cx="12" cy="12" r="1.6" fill="currentColor"/><circle cx="19" cy="12" r="1.6" fill="currentColor"/></svg>,
  ];
  return (
    <div style={{ display: 'flex', borderTop: '1px solid var(--rule)', background: 'var(--chrome-bg)', backdropFilter: 'blur(12px)', padding: '8px 8px 6px', flexShrink: 0 }}>
      {loc.s.tabs.map((t, i) => {
        const on = i === 0;
        return (
          <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4, color: on ? 'var(--accent)' : 'var(--ink-3)' }}>
            <span style={{ display: 'flex' }}>{icons[i]}</span>
            <span style={{ fontFamily: loc.sans, fontSize: 10.5, fontWeight: on ? 600 : 500 }}>{t}</span>
          </div>
        );
      })}
    </div>
  );
}

// The representative screen.
function LocalizedToday({ code = 'pt', styleKey = 'balanced' }) {
  const loc = LOCALES[code]; if (!loc) return null;
  const S = loc.s, rtl = loc.dir === 'rtl';
  return (
    <LPhone styleKey={styleKey} label={`Today · ${loc.name}`}>
      <div dir={loc.dir} style={{ flex: 1, display: 'flex', flexDirection: 'column', fontFamily: loc.sans, textAlign: rtl ? 'right' : 'left' }}>
        <LStatusBar />
        {/* camp banner (ink) */}
        <div style={{ background: 'var(--ink)', color: 'var(--paper)', padding: '11px 20px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, flexShrink: 0 }}>
          <span style={{ fontFamily: loc.disp, fontSize: 11, fontWeight: 600, letterSpacing: loc.caps ? '0.13em' : '0.01em', textTransform: loc.caps ? 'uppercase' : 'none' }}>{S.camp}</span>
          <span style={{ fontFamily: loc.disp, fontSize: 10.5, fontWeight: 600, letterSpacing: loc.caps ? '0.1em' : '0.01em', textTransform: loc.caps ? 'uppercase' : 'none', color: 'rgba(246,244,239,0.62)', whiteSpace: 'nowrap' }}>{S.out}</span>
        </div>

        {/* title */}
        <div style={{ padding: '14px 20px 6px', display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', flexShrink: 0 }}>
          <div>
            <L10nLabel loc={loc} color="var(--accent)" mb={6}>{S.sport}</L10nLabel>
            <div style={{ fontFamily: loc.disp, fontSize: 28, fontWeight: 700, letterSpacing: loc.caps ? '0.01em' : '-0.01em', textTransform: loc.caps && loc.disp === F_OSWALD ? 'uppercase' : 'none', color: 'var(--ink)', lineHeight: 1.05 }}>{S.today}</div>
          </div>
          <span style={{ width: 38, height: 38, borderRadius: '50%', background: 'var(--paper-2)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
            <svg width="18" height="18" viewBox="0 0 22 22" fill="none"><circle cx="11" cy="11" r="3" stroke="var(--ink-2)" strokeWidth="1.5"/><path d="M11 2 v3 M11 17 v3 M2 11 h3 M17 11 h3 M4.5 4.5 l2 2 M15.5 15.5 l2 2 M17.5 4.5 l-2 2 M6.5 15.5 l-2 2" stroke="var(--ink-2)" strokeWidth="1.5" strokeLinecap="round"/></svg>
          </span>
        </div>

        <div style={{ flex: 1, overflowY: 'auto', padding: '8px 20px 20px', display: 'flex', flexDirection: 'column', gap: 18 }} className="scroll">
          {/* hero number — digits stay LTR even in RTL */}
          <div>
            <div dir="ltr" style={{ display: 'flex', alignItems: 'baseline', gap: 11, justifyContent: rtl ? 'flex-end' : 'flex-start' }}>
              <span style={{ fontFamily: F_LATIN, fontWeight: 300, fontSize: 100, lineHeight: 0.82, letterSpacing: '-0.035em', color: 'var(--ink)' }}>{fmtNum('76.0', loc.dec)}</span>
              <span style={{ fontFamily: loc.disp, fontSize: 14, fontWeight: 600, letterSpacing: loc.caps ? '0.14em' : '0.02em', color: 'var(--ink-3)' }}>{S.unit}</span>
            </div>
            <div style={{ fontFamily: loc.disp, fontSize: 11.5, fontWeight: 600, letterSpacing: loc.caps ? '0.1em' : '0.01em', textTransform: loc.caps ? 'uppercase' : 'none', color: 'var(--t-green)', marginTop: 12 }}>{S.trend}</div>
          </div>

          {/* coach verdict card (the transcreated voice) */}
          <div style={{ background: 'var(--t-green-soft)', border: '1px solid color-mix(in srgb, var(--t-green) 24%, transparent)', borderRadius: 'var(--radius)', padding: '17px 19px' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
              <span style={{ width: 20, height: 20, color: 'var(--t-green)', display: 'flex', flexShrink: 0 }}>
                <svg width="20" height="20" viewBox="0 0 22 22" fill="none"><circle cx="11" cy="11" r="9" stroke="currentColor" strokeWidth="1.6"/><path d="M6.5 11.2 L9.5 14 L15 7.5" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"/></svg>
              </span>
              <L10nLabel loc={loc} color="var(--t-green)">{S.verdict}</L10nLabel>
            </div>
            <div style={{ fontFamily: loc.sans, fontSize: 17, fontWeight: 700, lineHeight: 1.3, color: 'var(--ink)', marginTop: 11, textWrap: 'balance' }}>{S.head}</div>
            <div style={{ fontFamily: loc.sans, fontSize: 13.5, fontWeight: 400, lineHeight: 1.6, color: 'var(--ink-2)', marginTop: 8, textWrap: 'pretty' }}>{S.body}</div>
          </div>

          {/* goal row */}
          <div style={{ background: 'var(--paper)', borderRadius: 'var(--radius)', boxShadow: 'var(--card-shadow)', border: 'var(--card-border)', padding: '15px 18px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <span style={{ fontFamily: loc.sans, fontSize: 15, color: 'var(--ink)' }}>{S.goal}</span>
            <span dir="ltr" style={{ fontFamily: loc.sans, fontSize: 15.5, fontWeight: 600, color: 'var(--accent)' }}>{S.goalV}</span>
          </div>

          {/* CTA */}
          <button style={{ width: '100%', background: 'var(--ink)', color: 'var(--paper)', border: 'none', borderRadius: 'var(--radius-ctl)', minHeight: 54, fontFamily: loc.disp, fontSize: 14, fontWeight: 600, letterSpacing: loc.caps ? '0.12em' : '0.01em', textTransform: loc.caps && loc.disp === F_OSWALD ? 'uppercase' : 'none' }}>{S.cta}</button>
        </div>

        <L10nTabs loc={loc} />
      </div>
      <LHome />
    </LPhone>
  );
}

Object.assign(window, { LocalizedToday, FC_LOCALES: LOCALES });