/* eslint-disable */
;(function(){
/* eslint-disable */
// יפן 2026 — "שיחון (Phrasebook)" screen (under עוד). Works offline.
const ASSET_P = './assets';

const SECTIONS = [
  { title:'נימוס וברכות', tint:'var(--sky-tint)', deep:'var(--sky-deep)', items:[
    { he:'שלום / צהריים טובים', ro:'Konnichiwa', jp:'こんにちは' },
    { he:'בוקר טוב', ro:'Ohayō gozaimasu', jp:'おはようございます' },
    { he:'תודה רבה', ro:'Arigatō gozaimasu', jp:'ありがとうございます' },
    { he:'סליחה / תסלח לי', ro:'Sumimasen', jp:'すみません' },
    { he:'בבקשה', ro:'Onegaishimasu', jp:'お願いします' },
    { he:'נעים להכיר', ro:'Hajimemashite', jp:'はじめまして' },
    { he:'אני לא מבין', ro:'Wakarimasen', jp:'わかりません' },
    { he:'אתה מדבר אנגלית?', ro:'Eigo o hanasemasu ka?', jp:'英語を話せますか' },
  ]},
  { title:'טבעוני 🌱', tint:'var(--vegan-full-tint)', deep:'var(--vegan-full)', star:true, items:[
    { he:'אני טבעוני', ro:'Bīgan desu', jp:'ビーガンです' },
    { he:'בלי בשר', ro:'Niku nashi de', jp:'肉なしで' },
    { he:'בלי דגים', ro:'Sakana nashi de', jp:'魚なしで' },
    { he:'בלי ביצים ומוצרי חלב', ro:'Tamago to nyūseihin nashi de', jp:'卵と乳製品なしで' },
    { he:'בלי דאשי / ציר דגים', ro:'Dashi nashi de', jp:'だしなしで' },
    { he:'זה טבעוני?', ro:'Kore wa bīgan desu ka?', jp:'これはビーガンですか' },
  ]},
  { title:'אוכל ומסעדות', tint:'var(--peach-tint)', deep:'var(--peach-deep)', items:[
    { he:'אפשר ___ בבקשה', ro:'___ o kudasai', jp:'___をください' },
    { he:'מים', ro:'O-mizu', jp:'お水' },
    { he:'החשבון בבקשה', ro:'O-kaikei onegaishimasu', jp:'お会計お願いします' },
    { he:'טעים!', ro:'Oishii', jp:'美味しい' },
    { he:'איפה השירותים?', ro:'Toire wa doko desu ka?', jp:'トイレはどこですか' },
  ]},
  { title:'תחבורה', tint:'var(--lavender-tint)', deep:'var(--lavender-deep)', items:[
    { he:'כרטיס', ro:'Kippu', jp:'切符' },
    { he:'רכבת מהירה', ro:'Shinkansen', jp:'新幹線' },
    { he:'איזו רכבת?', ro:'Dono densha?', jp:'どの電車' },
    { he:'עצור בבקשה', ro:'Tomete kudasai', jp:'止めてください' },
    { he:'אני רוצה להגיע ל___', ro:'___ ni ikitai', jp:'___に行きたい' },
  ]},
  { title:'כיוונים וחירום', tint:'var(--sun-tint)', deep:'var(--sun-deep)', items:[
    { he:'ימינה / שמאלה', ro:'Migi / Hidari', jp:'右・左' },
    { he:'ישר', ro:'Massugu', jp:'まっすぐ' },
    { he:'הצילו!', ro:'Tasukete!', jp:'助けて' },
    { he:'בית חולים', ro:'Byōin', jp:'病院' },
  ]},
];

function speak(jp) {
  try {
    window.speechSynthesis.cancel();
    const u = new SpeechSynthesisUtterance(jp);
    u.lang = 'ja-JP'; u.rate = 0.9;
    window.speechSynthesis.speak(u);
  } catch (e) {}
}

function PhraseRow({ item, deep, first }) {
  return (
    <div style={{ display:'flex', alignItems:'center', gap:12, padding:'12px 15px',
      borderTop: first ? 'none' : '1px solid var(--hairline)' }}>
      {/* Hebrew meaning (right) */}
      <span style={{ flex:1, minWidth:0, fontFamily:'var(--font-ui)', fontSize:15.5, color:'var(--ink-900)' }}>{item.he}</span>
      {/* romaji + JP (left, LTR-isolated) */}
      <span className="ltr" style={{ textAlign:'left', flex:'0 0 auto' }}>
        <span style={{ display:'block', fontFamily:'var(--font-ui)', fontSize:14, color:'var(--ink-700)' }}>{item.ro}</span>
        <span style={{ display:'block', fontFamily:'var(--font-ui)', fontSize:13, color:'var(--ink-500)', marginTop:1 }}>{item.jp}</span>
      </span>
      {/* speak */}
      <button type="button" onClick={()=>speak(item.jp)} aria-label="השמע" style={{
        appearance:'none', border:'none', cursor:'pointer', flex:'0 0 auto', width:36, height:36,
        borderRadius:'50%', background:'var(--surface-card-2)', color:deep, fontSize:16,
        display:'grid', placeItems:'center' }}>🔊</button>
    </div>
  );
}

function PhrasebookScreen() {
  const [q, setQ] = React.useState('');
  const query = q.trim().toLowerCase();
  const match = (it) => !query || it.he.toLowerCase().includes(query) || it.ro.toLowerCase().includes(query) || it.jp.includes(q.trim());
  const sections = SECTIONS.map(s => ({ ...s, items: s.items.filter(match) })).filter(s => s.items.length);
  return (
    <div style={{ paddingBottom:28 }}>
      <header style={{ position:'relative', padding:'16px 20px 8px' }}>
        <img src={`${ASSET_P}/chibi/chibi-talking.png`} alt="" style={{ position:'absolute', top:0,
          insetInlineEnd:12, height:64, borderRadius:'var(--r-md)' }} />
        <div style={{ fontFamily:'var(--font-ui)', fontSize:13, color:'var(--ink-500)' }}>עוד · שיחון</div>
        <h1 style={{ fontFamily:'var(--font-display)', fontSize:46, lineHeight:0.9, color:'var(--ink-900)', margin:'2px 0 0' }}>שיחון</h1>
        <div style={{ fontFamily:'var(--font-ui)', fontSize:14, color:'var(--ink-500)', marginTop:2 }}>מילים שיצילו את היום 🗣️</div>
      </header>

      {/* Search */}
      <div style={{ padding:'8px 20px 4px' }}>
        <div style={{ display:'flex', alignItems:'center', gap:8, background:'var(--surface-card)',
          border:'var(--border-card)', borderRadius:'var(--r-pill)', padding:'10px 16px', boxShadow:'var(--shadow-sm)' }}>
          <span aria-hidden="true" style={{ color:'var(--ink-500)' }}>🔍</span>
          <input value={q} onChange={e=>setQ(e.target.value)} placeholder="חיפוש ביטוי…"
            style={{ flex:1, border:'none', outline:'none', background:'transparent', fontFamily:'var(--font-ui)',
              fontSize:15, color:'var(--ink-900)', direction:'rtl' }} />
          {q && <button type="button" onClick={()=>setQ('')} aria-label="נקה" style={{ appearance:'none', border:'none', background:'transparent', color:'var(--ink-500)', cursor:'pointer', fontSize:16 }}>✕</button>}
        </div>
      </div>

      {/* Sections */}
      <div style={{ display:'flex', flexDirection:'column', gap:18, padding:'12px 20px 0' }}>
        {sections.length ? sections.map((s,i)=>(
          <section key={i}>
            <h2 style={{ fontFamily:'var(--font-display)', fontSize:26, color:'var(--ink-700)', margin:'0 4px 8px', letterSpacing:0.5 }}>{s.title}</h2>
            <div style={{ background:s.tint, borderRadius:'var(--r-lg)', boxShadow:'var(--shadow-sm)', overflow:'hidden',
              border: s.star ? `1.5px solid color-mix(in srgb, ${s.deep} 30%, transparent)` : 'none' }}>
              {s.items.map((it,j)=><PhraseRow key={j} item={it} deep={s.deep} first={j===0} />)}
            </div>
          </section>
        )) : (
          <div style={{ textAlign:'center', padding:'30px 10px', color:'var(--ink-500)', fontFamily:'var(--font-ui)', fontSize:15 }}>
            🍃 לא נמצא ביטוי מתאים
          </div>
        )}
      </div>
    </div>
  );
}

window.JP2026Phrasebook = PhrasebookScreen;

})();