/* eslint-disable */
;(function(){
/* eslint-disable */
// יפן 2026 — "מסך פתיחה" welcome / onboarding (first screen before the trip).
const ASSET_W = './assets';

const ROUTE = [
  { name:'טוקיו',  c:'var(--city-tokyo)' },
  { name:'האקונה', c:'var(--city-hakone)' },
  { name:'קיוטו',  c:'var(--city-kyoto)' },
  { name:'אוסקה',  c:'var(--city-osaka)' },
  { name:'טוקיו',  c:'var(--city-tokyo)' },
];

// Days until departure (22.9.2026), min 0.
function daysToGo() {
  const dep = new Date(2026, 8, 22);
  const now = new Date();
  const d = Math.ceil((dep - now) / 86400000);
  return d > 0 ? d : 0;
}

function WelcomeScreen({ onContinue } = {}) {
  const days = daysToGo();
  return (
    <div style={{ minHeight:'100%', display:'flex', flexDirection:'column', alignItems:'center',
      textAlign:'center', padding:'8px 24px 26px' }}>
      {/* Hero chibi */}
      <img src={`${ASSET_W}/welcome-hero.png`} alt="משה וליעוז מנופפים לשלום מול הר פוג׳י"
        style={{ width:230, height:'auto', marginTop:14, borderRadius:'var(--r-lg)' }} />

      {/* Title */}
      <h1 style={{ fontFamily:'var(--font-display)', fontSize:70, lineHeight:0.82, color:'var(--ink-900)', margin:'6px 0 0' }}>
        יפן <span className="ltr">2026</span>
      </h1>
      <div style={{ fontFamily:'var(--font-ui)', fontSize:16, color:'var(--ink-700)', marginTop:8 }}>
        המסע שלנו מתחיל בקרוב ⛩️
      </div>

      {/* Countdown */}
      <div style={{ marginTop:22, background:'var(--city-tokyo-tint)', borderRadius:'var(--r-xl)',
        padding:'16px 30px', boxShadow:'var(--shadow-sm)' }}>
        <div style={{ fontFamily:'var(--font-ui)', fontSize:13, color:'var(--city-tokyo-deep)' }}>עד ההמראה</div>
        <div style={{ fontFamily:'var(--font-display)', fontSize:54, lineHeight:0.9, color:'var(--ink-900)', marginTop:2 }}>
          עוד <span className="ltr">{days}</span> ימים
        </div>
      </div>

      {/* Route line */}
      <div style={{ display:'flex', alignItems:'center', justifyContent:'center', flexWrap:'nowrap',
        gap:4, marginTop:26, direction:'rtl', width:'100%' }}>
        {ROUTE.map((r,i)=>(
          <React.Fragment key={i}>
            <span style={{ display:'inline-flex', alignItems:'center', gap:4, whiteSpace:'nowrap' }}>
              <span style={{ width:9, height:9, borderRadius:'50%', background:r.c, flex:'0 0 auto',
                boxShadow:'0 1px 2px rgba(74,64,58,.2)' }} />
              <span style={{ fontFamily:'var(--font-ui)', fontSize:13, color:'var(--ink-700)' }}>{r.name}</span>
            </span>
            {i < ROUTE.length-1 && <span aria-hidden="true" style={{ color:'var(--ink-300)', fontSize:13 }}>←</span>}
          </React.Fragment>
        ))}
      </div>

      {/* CTA */}
      <button type="button" onClick={onContinue} className="jp-press" style={{
        appearance:'none', border:'none', marginTop:'auto', width:'100%', padding:'16px',
        borderRadius:'var(--r-lg)', background:'var(--ink-900)', color:'var(--paper-cream)',
        fontFamily:'var(--font-ui)', fontSize:17, cursor:'pointer', boxShadow:'var(--shadow-card)',
        display:'flex', alignItems:'center', justifyContent:'center', gap:8 }}>
        יאללה, בואו נתחיל <span aria-hidden="true">←</span>
      </button>
    </div>
  );
}

window.JP2026Welcome = WelcomeScreen;

})();