/* eslint-disable */
;(function(){
/* eslint-disable */
// יפן 2026 — "הגדרות (Settings)" screen (under עוד). Minimal & warm.
const ASSET_S = './assets';

function Switch({ on, onClick }) {
  return (
    <button type="button" onClick={onClick} aria-pressed={on} style={{
      appearance:'none', border:'none', cursor:'pointer', background:'transparent', padding:0, flex:'0 0 auto' }}>
      <span style={{ width:46, height:28, borderRadius:999, background:on?'var(--vegan-full)':'var(--ink-300)',
        position:'relative', transition:'background var(--dur-base)', display:'block' }}>
        <span style={{ position:'absolute', top:3, insetInlineStart:on?21:3, width:22, height:22, borderRadius:'50%',
          background:'#fff', boxShadow:'0 1px 3px rgba(74,64,58,.3)', transition:'inset-inline-start var(--dur-base) var(--ease-soft)' }} />
      </span>
    </button>
  );
}

function Group({ title, children }) {
  return (
    <section style={{ padding:'0 20px', marginTop:22 }}>
      <h2 style={{ fontFamily:'var(--font-display)', fontSize:24, color:'var(--ink-700)', margin:'0 4px 8px', letterSpacing:0.5 }}>{title}</h2>
      <div style={{ background:'var(--surface-card)', borderRadius:'var(--r-lg)', boxShadow:'var(--shadow-sm)', overflow:'hidden' }}>
        {children}
      </div>
    </section>
  );
}

function Row({ children, first }) {
  return (
    <div style={{ display:'flex', alignItems:'center', gap:12, padding:'14px 16px',
      borderTop: first ? 'none' : '1px solid var(--hairline)' }}>{children}</div>
  );
}

function SettingsScreen() {
  const [veganDefault, setVegan] = React.useState(false);
  return (
    <div style={{ paddingBottom:30 }}>
      <header style={{ position:'relative', padding:'16px 20px 4px' }}>
        <img src={`${ASSET_S}/chibi/chibi-wave2.png`} alt="" style={{ position:'absolute', top:0,
          insetInlineEnd:12, height:66, 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>
      </header>

      {/* העדפות */}
      <Group title="העדפות">
        <Row first>
          <span style={{ flex:1, minWidth:0 }}>
            <span style={{ display:'block', fontFamily:'var(--font-ui)', fontSize:15, color:'var(--ink-900)' }}>הצג רק 100% טבעוני</span>
            <span style={{ display:'block', fontFamily:'var(--font-ui)', fontSize:12.5, color:'var(--ink-500)', marginTop:1 }}>כברירת מחדל בכל הרשימות 🌱</span>
          </span>
          <Switch on={veganDefault} onClick={()=>setVegan(v=>!v)} />
        </Row>
        <Row>
          <span style={{ flex:1, fontFamily:'var(--font-ui)', fontSize:15, color:'var(--ink-900)' }}>שפה</span>
          <span style={{ fontFamily:'var(--font-ui)', fontSize:14, color:'var(--ink-500)' }}>עברית ›</span>
        </Row>
      </Group>

      {/* התקנה */}
      <Group title="התקנה">
        <Row first>
          <span aria-hidden="true" style={{ width:44, height:44, display:'grid', placeItems:'center', borderRadius:'var(--r-md)', background:'var(--sky-tint)', fontSize:22, flex:'0 0 auto' }}>📲</span>
          <span style={{ flex:1, minWidth:0 }}>
            <span style={{ display:'block', fontFamily:'var(--font-ui)', fontSize:15, color:'var(--ink-900)' }}>הוסף למסך הבית</span>
            <span style={{ display:'block', fontFamily:'var(--font-ui)', fontSize:12.5, color:'var(--ink-500)', marginTop:2, lineHeight:'var(--lh-body)' }}>
              בספארי: פותחים את תפריט השיתוף ← «הוסף למסך הבית». האפליקציה תעבוד גם ללא אינטרנט.
            </span>
          </span>
        </Row>
      </Group>

      {/* אודות */}
      <Group title="אודות">
        <div style={{ padding:'20px 16px', textAlign:'center' }}>
          <div style={{ fontSize:30 }}>⛩️</div>
          <div style={{ fontFamily:'var(--font-display)', fontSize:34, color:'var(--ink-900)', lineHeight:0.95, marginTop:6 }}>יפן <span className="ltr">2026</span></div>
          <div style={{ fontFamily:'var(--font-ui)', fontSize:14, color:'var(--ink-700)', marginTop:6 }}>אפליקציה פרטית של משה וליעוז 💛</div>
          <div style={{ fontFamily:'var(--font-ui)', fontSize:12.5, color:'var(--ink-500)', marginTop:8 }}>
            גרסה <span className="ltr">1.0</span> · <span className="date-ltr">22.9–14.10.2026</span>
          </div>
        </div>
      </Group>
    </div>
  );
}

window.JP2026Settings = SettingsScreen;

})();