/* eslint-disable */
;(function(){
/* eslint-disable */
// יפן 2026 — "מפה (Map)" screen. Polarsteps-style whole-journey route map.
const DSm = window.Ds2026DesignSystem_dc290c;
const ASSET_M = './assets';

// Stays in travel order. x/y = pin position on the map art (%).
const STAYS = [
  { n:1, id:'tokyo1',  city:'tokyo',  name:'טוקיו',  nights:6, x:80, y:41 },
  { n:2, id:'hakone',  city:'hakone', name:'האקונה', nights:2, x:63, y:55 },
  { n:3, id:'kyoto',   city:'kyoto',  name:'קיוטו',  nights:7, x:28, y:49 },
  { n:4, id:'osaka',   city:'osaka',  name:'אוסקה',  nights:4, x:22, y:66 },
  { n:5, id:'tokyo2',  city:'tokyo',  name:'טוקיו',  nights:2, x:86, y:57, ret:true },
];

const CMAP = {
  tokyo:  ['var(--city-tokyo)','var(--city-tokyo-tint)','var(--city-tokyo-deep)'],
  hakone: ['var(--city-hakone)','var(--city-hakone-tint)','var(--city-hakone-deep)'],
  kyoto:  ['var(--city-kyoto)','var(--city-kyoto-tint)','var(--city-kyoto-deep)'],
  osaka:  ['var(--city-osaka)','var(--city-osaka-tint)','var(--city-osaka-deep)'],
};

/* ---------- Pin ---------- */
function Pin({ s, selected, onClick }) {
  const [c] = CMAP[s.city];
  const size = selected ? 34 : 27;
  return (
    <button type="button" onClick={onClick} aria-label={s.name} style={{
      position:'absolute', left:`${s.x}%`, top:`${s.y}%`, transform:'translate(-50%,-100%)',
      appearance:'none', border:'none', background:'transparent', cursor:'pointer', padding:0,
      zIndex: selected ? 5 : 3, transition:'transform var(--dur-base) var(--ease-soft)' }}>
      <span style={{ position:'relative', display:'block', width:size, height:size,
        background:c, borderRadius:'50% 50% 50% 0', transform:'rotate(-45deg)',
        boxShadow:`0 3px 6px rgba(74,64,58,.3)${selected?`, 0 0 0 5px color-mix(in srgb, ${c} 30%, transparent)`:''}`,
        border:'2px solid var(--surface-white)' }}>
        <span style={{ position:'absolute', inset:0, transform:'rotate(45deg)', display:'grid',
          placeItems:'center', color:'#fff', fontFamily:'var(--font-ui)', fontSize: selected?14:12 }}>
          <span className="ltr">{s.n}</span>
        </span>
      </span>
    </button>
  );
}

/* ---------- City-stay card ---------- */
function StayCard({ s, selected, onClick, last }) {
  const [c, tint, deep] = CMAP[s.city];
  return (
    <button type="button" onClick={onClick} style={{
      appearance:'none', textAlign:'start', width:'100%', display:'flex', alignItems:'center', gap:12,
      padding:'12px 14px', background: selected ? tint : 'var(--surface-card)',
      border: selected ? `1.5px solid ${c}` : 'var(--border-card)', borderRadius:'var(--r-md)',
      boxShadow:'var(--shadow-sm)', cursor:'pointer', transition:'background var(--dur-fast)' }}>
      <span style={{ flex:'0 0 auto', width:40, height:40, display:'grid', placeItems:'center',
        borderRadius:'50% 50% 50% 0', transform:'rotate(-45deg)', background:c,
        boxShadow:'inset 0 -2px 0 rgba(0,0,0,.08)' }}>
        <span className="ltr" style={{ transform:'rotate(45deg)', color:'#fff',
          fontFamily:'var(--font-display)', fontSize:22, lineHeight:1 }}>{s.n}</span>
      </span>
      <div style={{ flex:1, minWidth:0 }}>
        <div style={{ display:'flex', alignItems:'baseline', gap:8 }}>
          <span style={{ fontFamily:'var(--font-display)', fontSize:26, lineHeight:0.9, color:'var(--ink-900)' }}>{s.name}</span>
          {s.ret && <span style={{ fontFamily:'var(--font-ui)', fontSize:11, color:deep,
            background:'var(--surface-card-2)', padding:'2px 8px', borderRadius:999 }}>חזרה</span>}
        </div>
        <div style={{ fontFamily:'var(--font-ui)', fontSize:13, color:deep, marginTop:1 }}>{s.nights} לילות</div>
      </div>
      <span aria-hidden="true" style={{ color:'var(--ink-300)', fontSize:20 }}>‹</span>
    </button>
  );
}

/* ---------- Screen ---------- */
function MapScreen({ onOpenStay }) {
  const [sel, setSel] = React.useState('kyoto');
  // dotted route through pins (right-to-left travel)
  const pts = STAYS.map(s => `${s.x},${s.y}`).join(' ');
  return (
    <div style={{ paddingBottom:20 }}>
      <header style={{ position:'relative', padding:'16px 20px 10px' }}>
        <img src={`${ASSET_M}/chibi/chibi-point.png`} alt="" style={{ position:'absolute', top:12,
          insetInlineEnd:12, height:66, borderRadius:'var(--r-md)' }} />
        <h1 style={{ fontFamily:'var(--font-display)', fontSize:46, lineHeight:0.88, color:'var(--ink-900)', margin:0 }}>מפה</h1>
        <div style={{ fontFamily:'var(--font-ui)', fontSize:14, color:'var(--ink-500)', marginTop:2 }}>כל המסע במבט אחד 🗺️</div>
      </header>

      {/* Route map hero (asset slot) */}
      <div style={{ margin:'6px 16px 0', position:'relative' }}>
        <DSm.Washi color="var(--city-kyoto)" width={96} height={24} rotate={-4}
          style={{ position:'absolute', top:-11, insetInlineStart:26, zIndex:6 }} />
        <div style={{ position:'relative', borderRadius:'var(--r-lg)', overflow:'hidden',
          boxShadow:'var(--shadow-card)', background:'var(--paper-cream-deep)', aspectRatio:'16 / 11' }}>
          {/* map art (asset slot — uploaded poster, veiled to mute baked labels) */}
          <img src={`${ASSET_M}/map/japan-route.png`} alt="מפת המסע ביפן"
            style={{ position:'absolute', inset:0, width:'100%', height:'100%', objectFit:'cover' }} />
          <div style={{ position:'absolute', inset:0, background:'rgba(251,244,227,0.5)' }} />
          {/* dotted route */}
          <svg viewBox="0 0 100 100" preserveAspectRatio="none" style={{ position:'absolute', inset:0, width:'100%', height:'100%', pointerEvents:'none' }}>
            <polyline points={pts} fill="none" stroke="var(--route-dot)" strokeWidth="0.7"
              strokeDasharray="1.6 1.8" strokeLinecap="round" vectorEffect="non-scaling-stroke" />
          </svg>
          {STAYS.map(s => <Pin key={s.id} s={s} selected={sel===s.id} onClick={()=>setSel(s.id)} />)}
        </div>
      </div>

      {/* Stays list (Polarsteps-style) */}
      <h2 style={{ fontFamily:'var(--font-display)', fontSize:26, color:'var(--ink-700)', margin:'20px 20px 12px', letterSpacing:0.5 }}>
        התחנות שלנו 📍
      </h2>
      <div style={{ display:'flex', flexDirection:'column', gap:10, padding:'0 20px' }}>
        {STAYS.map((s,i) => <StayCard key={s.id} s={s} selected={sel===s.id} last={i===STAYS.length-1}
          onClick={()=>{ setSel(s.id); onOpenStay && onOpenStay(s.n); }} />)}{/* s.n = travel-order pin; matches store stay.pin (the uuid `id` differs per backend) */}
      </div>

      <div style={{ margin:'16px 20px 0', textAlign:'center', fontFamily:'var(--font-ui)', fontSize:13, color:'var(--ink-500)' }}>
        22 ימים · 5 תחנות · <span className="ltr">22.9–14.10</span>
      </div>
    </div>
  );
}

window.JP2026Map = MapScreen;

})();