/* eslint-disable */
;(function(){
/* eslint-disable */
// יפן 2026 — "היום (Today)" screen. Day 11, Kyoto, Sat 3.10.
const DS = window.Ds2026DesignSystem_dc290c;
const { VeganBadge, StatusChip, Washi } = DS;
const { useState } = React;
const ASSET = './assets';

const DAY = {
  n: 11, total: 22, city: 'kyoto', cityName: 'קיוטו',
  weekday: 'שבת', date: '3.10',
  theme: 'סמטאות עתיקות, זן, ושקיעה על הנהר',
};

// status: 'done' (past) · 'next' (up next) · 'later'
const ACT = [
  { time:'09:30', label:'קפה בוקר',            place:'Silver Backs Cafe',        cat:'בית קפה', icon:'🍵', vegan:'full',  status:'done' },
  { time:'10:30', label:'סמטאות עתיקות וגיון',  place:'Sannenzaka & Ninenzaka',   cat:'אתר',    icon:'🏮',                status:'done' },
  { time:'12:30', label:'סדנת מקלות אכילה',      place:'Gion Chopsticks Workshop', cat:'סדנה',   icon:'🥢',                status:'next',
    address:'京都府京都市東山区祇園町北側347', postal:'605-0073', chips:[{preset:'cash'}] },
  { time:'14:15', label:'צהריים טבעוני',         place:'cafe vegan terrace',       cat:'מסעדה',  icon:'🍽️', vegan:'full',  status:'later' },
  { time:'15:30', label:'מקדש זן',               place:'Kennin-ji',                cat:'מקדש',   icon:'⛩️',                status:'later' },
  { time:'16:30', label:'שקיעה',                 place:'Kiyomizu-dera',            cat:'תצפית',  icon:'🌅',                status:'later' },
  { time:'18:00', label:'ערב על הנהר',           place:'Kamo River & Pontocho',    cat:'טבע',    icon:'🏞️',                status:'later' },
  { time:'19:30', label:'ארוחת ערב',             place:'Vegan Ramen UZU Kyoto',    cat:'מסעדה',  icon:'🍜', vegan:'full',  status:'later',
    chips:[{preset:'cash'}] },
];

const LAV = 'var(--city-kyoto)', LAV_T = 'var(--city-kyoto-tint)', LAV_D = 'var(--city-kyoto-deep)';

/* ---------- Time chip (bidi-isolated) ---------- */
function Time({ children, muted }) {
  return <span className="time-range" style={{ fontFamily:'var(--font-ui)', fontSize:14,
    color: muted ? 'var(--ink-500)' : 'var(--ink-900)', letterSpacing:0.3 }}>{children}</span>;
}

/* ---------- Next-up hero card ---------- */
function NextUp({ act, onTaxi }) {
  return (
    <div style={{ margin:'8px 20px 4px', position:'relative' }}>
      <Washi color={LAV} width={88} height={24} rotate={-4}
        style={{ position:'absolute', top:-11, insetInlineStart:24, zIndex:3 }} />
      <div style={{ background:LAV_T, borderRadius:'var(--r-xl)', padding:'18px 18px 16px',
        borderInlineStart:`4px solid ${LAV}`, boxShadow:'var(--shadow-card)' }}>
        <div style={{ display:'flex', alignItems:'center', gap:8, marginBottom:6 }}>
          <span style={{ fontFamily:'var(--font-ui)', fontSize:12, color:LAV_D,
            background:'rgba(255,255,255,.6)', padding:'3px 10px', borderRadius:999 }}>הבא בתור</span>
          <Time>{act.time}</Time>
        </div>
        <div style={{ display:'flex', alignItems:'baseline', gap:8, flexWrap:'wrap' }}>
          <span style={{ fontFamily:'var(--font-display)', fontSize:34, lineHeight:0.9, color:'var(--ink-900)' }}>{act.label}</span>
          <span aria-hidden="true" style={{ fontSize:20 }}>{act.icon}</span>
        </div>
        <div className="ltr" style={{ fontFamily:'var(--font-ui)', fontSize:14, color:'var(--ink-700)', marginTop:2 }}>{act.place}</div>
        <div style={{ display:'flex', gap:8, alignItems:'center', marginTop:12 }}>
          <button type="button" onClick={onTaxi} style={{ appearance:'none', border:'none', flex:1,
            padding:'13px', borderRadius:'var(--r-md)', background:'var(--ink-900)', color:'var(--paper-cream)',
            fontFamily:'var(--font-ui)', fontSize:15, cursor:'pointer', display:'flex', alignItems:'center',
            justifyContent:'center', gap:8, boxShadow:'var(--shadow-card)' }}>
            <span aria-hidden="true" style={{ fontSize:18 }}>🚕</span> הראה לנהג
          </button>
        </div>
      </div>
    </div>
  );
}

/* ---------- Timeline ---------- */
function TimelineItem({ act, last }) {
  const done = act.status==='done', next = act.status==='next';
  return (
    <div style={{ display:'flex', gap:12, opacity: done ? 0.55 : 1 }}>
      {/* rail */}
      <div style={{ position:'relative', flex:'0 0 44px', textAlign:'center' }}>
        <Time muted={!next}>{act.time}</Time>
        <div style={{ position:'absolute', top:26, bottom:-16, insetInlineStart:'50%', width:0,
          borderInlineStart: last ? 'none' : '2px dotted var(--route-dot)', transform:'translateX(50%)' }} />
        <div style={{ position:'absolute', top:24, insetInlineStart:'50%', transform:'translate(50%,0)',
          width: next?16:12, height: next?16:12, borderRadius:'50%',
          background: done ? 'var(--ink-300)' : LAV, border:'2px solid var(--surface-card)',
          boxShadow: next ? `0 0 0 4px ${LAV_T}` : 'none', zIndex:1 }} />
      </div>
      {/* content */}
      <div style={{ flex:1, minWidth:0, marginBottom:16, background:'var(--surface-card)',
        border: next ? `1.5px solid ${LAV}` : 'var(--border-card)', borderRadius:'var(--r-md)',
        padding:'11px 13px', boxShadow:'var(--shadow-sm)' }}>
        <div style={{ display:'flex', alignItems:'center', gap:7 }}>
          <span aria-hidden="true" style={{ fontSize:16 }}>{act.icon}</span>
          <span style={{ fontFamily:'var(--font-ui)', fontSize:16, color:'var(--ink-900)' }}>{act.label}</span>
          {done && <span aria-hidden="true" style={{ marginInlineStart:'auto', color:'var(--matcha-deep)', fontSize:15 }}>✓</span>}
        </div>
        <div style={{ display:'flex', alignItems:'center', gap:8, marginTop:3, flexWrap:'wrap' }}>
          <span className="ltr" style={{ fontSize:12.5, color:'var(--ink-500)' }}>{act.place}</span>
          <span style={{ fontSize:11, color:LAV_D }}>· {act.cat}</span>
        </div>
        {(act.vegan || act.chips) && (
          <div style={{ display:'flex', gap:6, marginTop:8, flexWrap:'wrap' }}>
            {act.vegan && <VeganBadge status={act.vegan} />}
            {(act.chips||[]).map((c,i)=><StatusChip key={i} preset={c.preset} />)}
          </div>
        )}
      </div>
    </div>
  );
}

/* ---------- Taxi overlay (large type for the driver) ---------- */
function TaxiOverlay({ act, onClose }) {
  return (
    <div onClick={onClose} className="jp-fade-in" style={{ position:'absolute', inset:0, zIndex:60, background:LAV_T,
      display:'flex', flexDirection:'column' }}>
      <div style={{ padding:'18px 20px', display:'flex', justifyContent:'space-between', alignItems:'center' }}>
        <span style={{ fontFamily:'var(--font-display)', fontSize:26, color:LAV_D }}>הראה לנהג 🚕</span>
        <button type="button" onClick={onClose} style={{ appearance:'none', border:'none', background:'rgba(255,255,255,.6)',
          width:38, height:38, borderRadius:999, fontSize:18, color:'var(--ink-700)', cursor:'pointer' }}>✕</button>
      </div>
      <div style={{ flex:1, display:'flex', alignItems:'center', justifyContent:'center', padding:'0 22px' }}>
        <div style={{ background:'var(--surface-white)', borderRadius:'var(--r-xl)', padding:'28px 24px',
          boxShadow:'var(--shadow-lift)', textAlign:'center', width:'100%' }}>
          <div style={{ fontFamily:'var(--font-ui)', fontSize:13, color:'var(--ink-500)', marginBottom:14 }}>{act.label} · <span className="ltr">{act.place}</span></div>
          <div className="jp-address" style={{ fontSize:30, lineHeight:1.5, color:'var(--ink-900)', textAlign:'center' }}>
            <div style={{ fontSize:18, color:'var(--ink-500)', marginBottom:6 }}>〒{act.postal}</div>
            {act.address}
          </div>
        </div>
      </div>
      <div style={{ padding:'0 22px 30px', textAlign:'center', fontFamily:'var(--font-ui)', fontSize:13, color:'var(--ink-500)' }}>
        געו במסך כדי לסגור
      </div>
    </div>
  );
}

/* ---------- Screen ---------- */
function TodayScreen() {
  const next = ACT.find(a=>a.status==='next');
  const [taxi, setTaxi] = useState(false);
  return (
    <div style={{ paddingBottom:20 }}>
      {/* Day header */}
      <header style={{ position:'relative', padding:'16px 20px 8px' }}>
        <img src={`${ASSET}/chibi/chibi-welcome.png`} alt="" style={{ position:'absolute', top:12,
          insetInlineEnd:12, height:72, borderRadius:'var(--r-md)', pointerEvents:'none' }} />
        <div style={{ fontFamily:'var(--font-ui)', fontSize:13, color:'var(--ink-500)' }}>
          {DAY.weekday} · <span className="date-ltr">{DAY.date}</span> · בוקר טוב ☀️
        </div>
        <h1 style={{ fontFamily:'var(--font-display)', fontSize:46, lineHeight:0.88, color:'var(--ink-900)', margin:'2px 0 0' }}>היום</h1>
        <div style={{ display:'flex', alignItems:'baseline', gap:8, marginTop:4 }}>
          <span style={{ fontFamily:'var(--font-display)', fontSize:30, color:LAV_D, lineHeight:0.9 }}>
            יום {DAY.n} · {DAY.cityName}
          </span>
          <span style={{ fontFamily:'var(--font-ui)', fontSize:12, color:'var(--ink-500)' }}>מתוך {DAY.total}</span>
        </div>
        <div style={{ fontFamily:'var(--font-ui)', fontSize:14, color:'var(--ink-700)', marginTop:4 }}>{DAY.theme}</div>
      </header>

      <NextUp act={next} onTaxi={()=>setTaxi(true)} />

      <h2 style={{ fontFamily:'var(--font-display)', fontSize:26, color:'var(--ink-700)', margin:'18px 20px 12px', letterSpacing:0.5 }}>
        מסלול היום 🗓️
      </h2>
      <div style={{ padding:'0 20px' }}>
        {ACT.map((a,i)=><TimelineItem key={i} act={a} last={i===ACT.length-1} />)}
      </div>

      {/* Reminders (quiet for Day 11) */}
      <div style={{ margin:'6px 20px 0', padding:'12px 14px', borderRadius:'var(--r-md)',
        border:'1.5px dashed var(--hairline)', display:'flex', alignItems:'center', gap:8,
        fontFamily:'var(--font-ui)', fontSize:13, color:'var(--ink-500)' }}>
        <span aria-hidden="true">🔔</span> אין תזכורות להיום — יום רגוע 🌿
      </div>

      {taxi && <TaxiOverlay act={next} onClose={()=>setTaxi(false)} />}
    </div>
  );
}

window.JP2026Today = TodayScreen;

})();