// Korea Trip — React app
const {useState,useEffect,useRef,useMemo} = React;

/* ————— Icons ————— */
const Icon = {
  map:   <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M9 4l-6 2v14l6-2 6 2 6-2V4l-6 2z"/><path d="M9 4v16M15 6v16"/></svg>,
  book:  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M4 5a2 2 0 0 1 2-2h13v16H6a2 2 0 0 0-2 2V5z"/><path d="M4 19a2 2 0 0 0 2 2h13"/></svg>,
  lang:  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M4 5h12M10 3v2M6 5c0 4 4 9 8 10M4 13c3 0 6-1 8-4"/><path d="M14 21l5-12 5 12M16 17h6"/></svg>,
  info:  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><circle cx="12" cy="12" r="9"/><path d="M12 8v.01M11 12h1v4h1"/></svg>,
  pack:  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M5 8h14l-1 12H6L5 8z"/><path d="M9 8V6a3 3 0 0 1 6 0v2"/></svg>,
  train: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><rect x="5" y="3" width="14" height="15" rx="2"/><path d="M5 11h14M9 18l-2 3M15 18l2 3"/><circle cx="9" cy="15" r=".5" fill="currentColor"/><circle cx="15" cy="15" r=".5" fill="currentColor"/></svg>,
  walk:  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><circle cx="13" cy="4" r="2"/><path d="M10 21l2-6-3-3 2-5 3 3 3 1M10 12l-3 2"/></svg>,
  arrow: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M9 6l6 6-6 6"/></svg>
};

/* ————— Masthead ————— */
function Masthead(){
  return (
    <header className="masthead">
      <div className="eyebrow">
        <span className="vol"><span className="dot"/>Spring '26</span>
        <span>Seoul · Jeonju · Busan</span>
      </div>
      <h1 className="serif">
        Korea,<br/>eight days
        <span className="kr">대한민국 · 팔일</span>
      </h1>
      <div className="sub">
        <b>Thu Apr 23 — Thu Apr 30, 2026</b> · Seoul, Jeonju, Busan · Seattle ↔ ICN
      </div>
      <div className="stamp">
        <div>
          <div className="big">8</div>
          <div className="sm">Days</div>
        </div>
      </div>
    </header>
  );
}

/* Stats row removed */

/* ————— Day chips ————— */
function Chips({days, active, onPick}){
  return (
    <div className="chips">
      <button className={"chip "+(active===0?"on":"")} onClick={()=>onPick(0)}>
        <span className="n serif">—</span>All days
      </button>
      {days.map(d=>(
        <button key={d.day} className={"chip "+(active===d.day?"on":"")} onClick={()=>onPick(d.day)}>
          <span className="cdot" style={{background:CITY[d.type].color}}/>
          <span className="n serif">{d.day}</span>
          {d.short}
        </button>
      ))}
    </div>
  );
}

/* ————— Stop ————— */
function Stop({s, accent}){
  const kr = NAVER_NAMES[s.name];
  const naver = "https://map.naver.com/p/search/"+encodeURIComponent(kr || s.name);
  const google = "https://maps.google.com/?q="+s.lat+","+s.lng;
  const modeIcon = s.mode?.toLowerCase().includes("walk") ? Icon.walk :
                   (s.mode?.toLowerCase().includes("ktx")||s.mode?.toLowerCase().includes("subway")||s.mode?.toLowerCase().includes("arex")||s.mode?.toLowerCase().includes("line")) ? Icon.train : null;
  return (
    <div className="stop">
      <div className="stop-time serif">{s.time}</div>
      <div className="stop-name">
        {s.name}
        {kr && <span className="kr">{kr}</span>}
      </div>
      <div className="stop-desc">{s.desc}</div>
      {s.mode && <div className="stop-mode">{modeIcon}{s.mode}</div>}
      {s.badges?.length>0 && <div className="badges">{s.badges.map(b=><span key={b} className={"badge "+b}>{b}</span>)}</div>}
      <div className="stop-actions">
        <a href={naver} target="_blank" rel="noopener">Naver Map</a>
        <a href={google} target="_blank" rel="noopener">Google Map</a>
      </div>
    </div>
  );
}

/* ————— Day card ————— */
function DayCard({d, openAll, forceOpen}){
  const [open,setOpen] = useState(forceOpen ?? (d.day===1));
  useEffect(()=>{ if(openAll!==null) setOpen(openAll); },[openAll]);
  useEffect(()=>{ if(forceOpen!==undefined) setOpen(forceOpen); },[forceOpen]);
  const city = CITY[d.type];
  return (
    <article className={"day "+(open?"open":"")} id={"day-"+d.day}>
      <div className="day-head">
        <div className="day-num">
          <span className="big serif">{String(d.day).padStart(2,"0")}</span>
          <span>Day</span>
        </div>
        <div className="day-date">
          {d.date}
          <div className="tag" style={{background:city.soft,color:city.color}}>{d.tag}</div>
        </div>
      </div>
      <h3 className="day-title serif">{d.title}</h3>
      <p className="day-summary">{d.summary}</p>

      {d.coordination && (
        <div className="coordination">
          <h4>{d.coordination.title}</h4>
          <ul>{d.coordination.items.map((t,i)=><li key={i}>{t}</li>)}</ul>
        </div>
      )}

      <button className="day-toggle" onClick={()=>setOpen(!open)}>
        {open?"Hide":"Show"} {d.stops.length} stops
        <span className="arr">{Icon.arrow}</span>
      </button>

      <div className="timeline">
        {d.stops.map((s,i)=><Stop key={i} s={s} accent={city.color}/>)}
        {d.notes?.length>0 && (
          <div className="notes">
            {d.notes.map((n,i)=>(
              <div key={i} className={"note "+n.tone}>
                <span className="l">{n.tone==="warn"?"Heads up":"Tip"}</span>
                <span>{n.text}</span>
              </div>
            ))}
          </div>
        )}
      </div>
    </article>
  );
}

/* ————— Itinerary view ————— */
function Itinerary(){
  const [active,setActive] = useState(0);
  const [openAll,setOpenAll] = useState(null);
  const days = active===0 ? DAYS : DAYS.filter(d=>d.day===active);
  const touch = useRef({x:0,y:0,t:0});

  // swipe only when viewing a single day
  const onTouchStart = (e)=>{
    if(active===0) return;
    touch.current = {x:e.touches[0].clientX, y:e.touches[0].clientY, t:Date.now()};
  };
  const onTouchEnd = (e)=>{
    if(active===0) return;
    const dx = e.changedTouches[0].clientX - touch.current.x;
    const dy = e.changedTouches[0].clientY - touch.current.y;
    const dt = Date.now() - touch.current.t;
    if(dt > 500 || Math.abs(dy) > Math.abs(dx) || Math.abs(dx) < 60) return;
    const dir = dx < 0 ? 1 : -1;
    const next = active + dir;
    if(next >= 1 && next <= DAYS.length){
      setActive(next);
      setOpenAll(true);
      window.scrollTo({top:0});
    }
  };

  const prev = ()=>{ if(active>1){ setActive(active-1); setOpenAll(true); window.scrollTo({top:0}); } };
  const next = ()=>{ if(active<DAYS.length){ setActive(active+1); setOpenAll(true); window.scrollTo({top:0}); } };

  return (
    <div className="view on" onTouchStart={onTouchStart} onTouchEnd={onTouchEnd}>
      <Masthead/>
      <Chips days={DAYS} active={active} onPick={(d)=>{setActive(d);setOpenAll(d!==0);window.scrollTo({top:0});}}/>

      {active!==0 && (
        <div style={{
          display:'flex',alignItems:'center',justifyContent:'center',gap:14,
          padding:'10px 22px',fontSize:10.5,letterSpacing:'.16em',textTransform:'uppercase',
          color:'var(--muted)',fontWeight:600
        }}>
          <span style={{opacity: active>1 ? 1 : .25}}>‹</span>
          <span>Swipe</span>
          <span style={{opacity: active<DAYS.length ? 1 : .25}}>›</span>
        </div>
      )}

      <div className="section" style={{padding:"0"}}>
        {days.map(d=><DayCard key={d.day} d={d} openAll={openAll} forceOpen={active!==0 ? true : undefined}/>)}
      </div>
      <div style={{padding:"18px 22px 40px",textAlign:"center",color:"var(--muted)",fontSize:"11px",letterSpacing:".14em",textTransform:"uppercase",borderTop:"1px solid var(--rule)"}}>
        End of itinerary · 안녕히 가세요
      </div>
    </div>
  );
}

/* ————— Map view ————— */
function MapView(){
  const ref = useRef();
  const mapRef = useRef(null);
  const layerRef = useRef(null);
  const [active,setActive] = useState(0); // 0 = all
  const [sheet,setSheet] = useState(null); // {s, day}

  // init map once
  useEffect(()=>{
    if(!ref.current || mapRef.current) return;
    const map = L.map(ref.current,{zoomControl:true,scrollWheelZoom:false}).setView([36.5,128],6.8);
    L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png',{
      attribution:'© OpenStreetMap © CARTO', maxZoom:18
    }).addTo(map);
    mapRef.current = map;
  },[]);

  // redraw markers + fit when day changes
  useEffect(()=>{
    const map = mapRef.current; if(!map) return;
    if(layerRef.current){ layerRef.current.clearLayers(); map.removeLayer(layerRef.current); }
    const group = L.featureGroup().addTo(map);
    layerRef.current = group;

    const visibleDays = active===0 ? DAYS : DAYS.filter(d=>d.day===active);
    const latlngs = [];

    visibleDays.forEach(d=>{
      const dayPts = [];
      d.stops.forEach((s,idx)=>{
        if(!s.lat) return;
        const icon = L.divIcon({
          className:'pin',
          html:`<div style="background:${CITY[d.type].color}">${active===0?d.day:(idx+1)}</div>`,
          iconSize:[22,22], iconAnchor:[11,11]
        });
        L.marker([s.lat,s.lng],{icon})
          .addTo(group)
          .on('click', ()=> setSheet({s, day:d}));
        dayPts.push([s.lat,s.lng]);
        latlngs.push([s.lat,s.lng]);
      });
      // per-day route line when viewing one day
      if(active!==0 && dayPts.length>1){
        L.polyline(dayPts,{color:CITY[d.type].color,weight:2.5,opacity:.7}).addTo(group);
      }
    });

    // KTX legs only when showing all, or matching day
    INTERCITY.forEach(leg=>{
      if(active!==0 && leg.day!==active) return;
      L.polyline([leg.from,leg.to],{color:leg.color,weight:2.5,dashArray:"6 4",opacity:.7}).addTo(group)
        .bindPopup(leg.label);
      latlngs.push(leg.from,leg.to);
    });

    if(latlngs.length){
      map.fitBounds(L.latLngBounds(latlngs),{padding:[24,24],maxZoom:14});
    } else {
      map.fitBounds([[35.05,126.4],[37.65,129.25]],{padding:[10,10]});
    }
  },[active]);

  const activeDay = DAYS.find(d=>d.day===active);

  return (
    <div className="view on">
      <div className="section">
        <div className="section-head">
          <span className="num serif">§ Map</span>
          <h2 className="serif">{active===0 ? "The whole route" : activeDay.title}</h2>
        </div>

        {/* Day filter — native select, thumb-friendly */}
        <div style={{position:'relative',marginBottom:14}}>
          <select
            value={active}
            onChange={e=>setActive(Number(e.target.value))}
            style={{
              appearance:'none',WebkitAppearance:'none',
              width:'100%',padding:'14px 44px 14px 16px',
              background:'var(--card)',border:'1px solid var(--rule)',borderRadius:4,
              fontFamily:"'Inter',sans-serif",fontSize:15,fontWeight:500,color:'var(--ink)',
              cursor:'pointer'
            }}>
            <option value={0}>All 8 days — full route</option>
            {DAYS.map(d=>(
              <option key={d.day} value={d.day}>
                Day {d.day} · {d.short} · {CITY[d.type].label}
              </option>
            ))}
          </select>
          <span style={{
            position:'absolute',right:16,top:'50%',transform:'translateY(-50%)',
            fontFamily:"'Instrument Serif',serif",fontSize:20,color:'var(--muted)',
            pointerEvents:'none'
          }}>▾</span>
        </div>

        <div ref={ref} id="map"/>

        {active!==0 && activeDay && (
          <div style={{marginTop:12,fontSize:13,color:'var(--ink-2)',lineHeight:1.55}}>
            <div style={{fontSize:11,letterSpacing:'.14em',textTransform:'uppercase',color:'var(--muted)',fontWeight:600,marginBottom:6}}>
              {activeDay.date} · {activeDay.stops.length} stops
            </div>
            {activeDay.summary}
          </div>
        )}

        {active===0 && (
          <div className="map-legend">
            {Object.entries(CITY).map(([k,v])=>(
              <div key={k} className="item">
                <span className="sw" style={{background:v.color}}/>{v.label}
              </div>
            ))}
            <div className="item"><span className="sw" style={{background:"transparent",borderTop:"2px dashed var(--muted)",borderRadius:0,height:2}}/>KTX</div>
          </div>
        )}
      </div>
      <div className="section">
        <div className="section-head">
          <span className="num serif">§ Rail</span>
          <h2 className="serif">Three KTX legs</h2>
        </div>
        <div className="lines">
          {INTERCITY.map((l,i)=>(
            <div key={i} className="line" style={{borderLeft:`3px solid ${l.color}`}}>
              <div className="badge-num" style={{background:l.color}}>{l.day}</div>
              <div className="stops">{l.label}</div>
            </div>
          ))}
        </div>
      </div>
      <MapSheet payload={sheet} onClose={()=>setSheet(null)}/>
    </div>
  );
}

/* ————— Map stop bottom sheet ————— */
function MapSheet({payload, onClose}){
  const on = !!payload;
  const s = payload?.s, d = payload?.day;
  const kr = s ? NAVER_NAMES[s.name] : null;
  const naver = s ? "https://map.naver.com/p/search/"+encodeURIComponent(kr || s.name) : "#";
  const google = s ? "https://maps.google.com/?q="+s.lat+","+s.lng : "#";
  return (
    <React.Fragment>
      <div className={"sheet-backdrop "+(on?"on":"")} onClick={onClose}/>
      <div className={"sheet "+(on?"on":"")} role="dialog" aria-hidden={!on}>
        <div className="grab"/>
        {s && (
          <React.Fragment>
            <div className="s-day">
              <span>Day {d.day} · {d.short}</span>
              <span style={{color:CITY[d.type].color}}>{CITY[d.type].label}</span>
            </div>
            <div className="s-time serif">{s.time}</div>
            <div className="s-name">{s.name}{kr && <span className="kr">{kr}</span>}</div>
            <div className="s-desc">{s.desc}</div>
            {s.mode && <div className="s-mode">{s.mode}</div>}
            <div className="s-acts">
              <a className="primary" href={naver} target="_blank" rel="noopener">Open in Naver Maps</a>
              <a href={google} target="_blank" rel="noopener">Google Maps</a>
              <a href="#" onClick={(e)=>{e.preventDefault();onClose();}}>Close</a>
            </div>
          </React.Fragment>
        )}
      </div>
    </React.Fragment>
  );
}
function Bookings(){
  const items = [];
  DAYS.forEach(d=>d.stops.forEach(s=>{
    if(s.badges?.includes("book")) items.push({day:d.day, date:d.short, city:d.type, ...s});
  }));
  return (
    <div className="view on">
      <div className="section">
        <div className="section-head">
          <span className="num serif">§ Book</span>
          <h2 className="serif">Must book ahead</h2>
          <span className="aside">{items.length} items</span>
        </div>
        <p style={{fontSize:13,color:'var(--muted)',marginBottom:18,maxWidth:'40ch'}}>
          These anchors need reservations — some 1+ week out, some day-of. Tackle in this order.
        </p>
        <div style={{display:'flex',flexDirection:'column',gap:12}}>
          {items.map((s,i)=>(
            <div key={i} style={{background:'var(--card)',border:'1px solid var(--rule)',borderRadius:4,padding:'14px'}}>
              <div style={{display:'flex',justifyContent:'space-between',alignItems:'baseline',marginBottom:6}}>
                <span style={{fontFamily:"'Instrument Serif',serif",fontSize:22,letterSpacing:'-.02em'}}>Day {s.day}</span>
                <span style={{fontSize:11,color:'var(--muted)',letterSpacing:'.1em',textTransform:'uppercase'}}>{s.date} · {s.time}</span>
              </div>
              <div style={{fontSize:16,fontWeight:600,marginBottom:4}}>{s.name}</div>
              <div style={{fontSize:13,color:'var(--ink-2)',lineHeight:1.5}}>{s.desc}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

/* ————— Language ————— */
function Language(){
  const openPapago = ()=>{
    // Try Papago app scheme; fall back to App Store after a beat
    const now = Date.now();
    window.location.href = "papago://";
    setTimeout(()=>{
      if(Date.now()-now < 1600){
        window.location.href = "https://apps.apple.com/app/id1018350611";
      }
    },1200);
  };
  return (
    <div className="view on">
      <div className="section">
        <div className="section-head">
          <span className="num serif">§ Talk</span>
          <h2 className="serif">Translate on the fly</h2>
        </div>
        <p style={{fontSize:14,color:'var(--ink-2)',lineHeight:1.55,maxWidth:'40ch',marginBottom:18}}>
          Naver Papago handles voice, camera, and conversation mode — better than memorizing phrases. Install once, point it at menus.
        </p>
        <button
          onClick={openPapago}
          style={{
            width:'100%', display:'flex', alignItems:'center', justifyContent:'space-between',
            padding:'16px 18px', background:'var(--ink)', color:'var(--paper)',
            border:0, borderRadius:4, cursor:'pointer', textAlign:'left'
          }}>
          <div>
            <div style={{fontFamily:"'Instrument Serif',serif",fontSize:22,letterSpacing:'-.02em',lineHeight:1}}>Open Papago</div>
            <div style={{fontSize:11,letterSpacing:'.14em',textTransform:'uppercase',marginTop:6,opacity:.7}}>Naver · iOS</div>
          </div>
          <span style={{fontFamily:"'Instrument Serif',serif",fontSize:32,lineHeight:1}}>→</span>
        </button>
        <a
          href="https://apps.apple.com/app/id1018350611"
          target="_blank" rel="noopener"
          style={{
            display:'block',marginTop:10,textAlign:'center',
            fontSize:11,letterSpacing:'.14em',textTransform:'uppercase',
            color:'var(--muted)',textDecoration:'none',fontWeight:600
          }}>
          Don't have it? Get on App Store
        </a>
      </div>

      <div className="section">
        <div className="section-head">
          <span className="num serif">§ Know</span>
          <h2 className="serif">Customs &amp; quirks</h2>
        </div>
        <div className="custom-list">
          {CUSTOMS.map((c,i)=>(
            <div key={i} className="custom">
              <div className="mark serif">§</div>
              <div className="txt"><b>{c.b}</b> {c.t}</div>
            </div>
          ))}
        </div>
      </div>

      <div className="section">
        <div className="section-head">
          <span className="num serif">§ Subway</span>
          <h2 className="serif">Lines you'll ride</h2>
        </div>
        <div className="lines">
          {SUBWAY.map((l,i)=>(
            <div key={i} className="line">
              <div className="badge-num" style={{background:l.color}}>{l.num}</div>
              <div className="stops">{l.stops}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

/* ————— Info (emergency + colophon) ————— */
function Info(){
  return (
    <div className="view on">
      <div className="section">
        <div className="section-head">
          <span className="num serif">§ SOS</span>
          <h2 className="serif">Emergency</h2>
        </div>
        <div className="emerg">
          {EMERGENCY.map((e,i)=>(
            e.href ? <a key={i} href={e.href}><span>{e.l}</span><span className="n serif">{e.n}</span></a>
                   : <div key={i}><span>{e.l}</span><span className="n serif">{e.n}</span></div>
          ))}
        </div>
      </div>

      <div className="section" style={{paddingBottom:40}}>
        <div className="section-head">
          <span className="num serif">§ Meta</span>
          <h2 className="serif">Colophon</h2>
        </div>
        <p style={{fontSize:13,color:'var(--ink-2)',lineHeight:1.6,maxWidth:'42ch'}}>
          Typeset in <i>Instrument Serif</i> and <i>Inter</i>, with <i>Noto Serif KR</i> for Hangul.
          Map tiles by CARTO &amp; OpenStreetMap. Compiled Spring 2026 for eight days across the peninsula.
        </p>
      </div>
    </div>
  );
}

/* ————— Tweaks ————— */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#b23a28",
  "paper": "#f5f1ea"
}/*EDITMODE-END*/;

function Tweaks({show, onClose}){
  const [accent,setAccent] = useState(TWEAK_DEFAULTS.accent);
  const [paper,setPaper] = useState(TWEAK_DEFAULTS.paper);
  const setBoth = (a,p)=>{
    document.documentElement.style.setProperty('--accent',a);
    document.documentElement.style.setProperty('--paper',p);
    window.parent.postMessage({type:'__edit_mode_set_keys',edits:{accent:a,paper:p}},'*');
  };
  const ACCENTS = ["#b23a28","#3b5b8c","#2f7a6b","#a85a2c","#1b1815"];
  const PAPERS  = [{n:"Cream",c:"#f5f1ea"},{n:"White",c:"#fafaf7"},{n:"Slate",c:"#e8e6e1"}];
  if(!show) return null;
  return (
    <div className="tweaks on">
      <h5 className="serif">Tweaks <span className="x" onClick={onClose}>close</span></h5>
      <div className="row">
        <label>Accent</label>
        <div className="swatches">
          {ACCENTS.map(c=>(
            <div key={c} className={"sw "+(accent===c?"on":"")} style={{background:c}} onClick={()=>{setAccent(c);setBoth(c,paper)}}/>
          ))}
        </div>
      </div>
      <div className="row">
        <label>Paper</label>
        <div className="btns">
          {PAPERS.map(p=>(
            <button key={p.c} className={paper===p.c?"on":""} onClick={()=>{setPaper(p.c);setBoth(accent,p.c)}}>{p.n}</button>
          ))}
        </div>
      </div>
    </div>
  );
}

/* ————— Tab bar ————— */
function TabBar({tab,setTab}){
  const tabs = [
    {id:'itin',  label:'Itinerary', icon:Icon.map},
    {id:'map',   label:'Map',       icon:Icon.info},
    {id:'book',  label:'Book',      icon:Icon.book},
    {id:'lang',  label:'Talk',      icon:Icon.lang},
    {id:'info',  label:'Info',      icon:Icon.pack}
  ];
  return (
    <nav className="tabbar">
      <div className="tabbar-inner">
        {tabs.map(t=>(
          <button key={t.id} className={"tab "+(tab===t.id?"on":"")} onClick={()=>{setTab(t.id);window.scrollTo({top:0})}}>
            {t.icon}<span>{t.label}</span>
          </button>
        ))}
      </div>
    </nav>
  );
}

/* ————— iOS Add-to-Home-Screen tip banner ————— */
function A2HSBanner(){
  const [show,setShow] = useState(false);
  useEffect(()=>{
    if(localStorage.getItem('kr_a2hs_dismissed')==='1') return;
    const ua = navigator.userAgent;
    const isIOS = /iPad|iPhone|iPod/.test(ua) && !window.MSStream;
    const isSafari = /Safari/.test(ua) && !/CriOS|FxiOS|EdgiOS/.test(ua);
    const isStandalone = window.navigator.standalone === true ||
                         window.matchMedia('(display-mode: standalone)').matches;
    if(isIOS && isSafari && !isStandalone) setShow(true);
  },[]);
  const dismiss = ()=>{ localStorage.setItem('kr_a2hs_dismissed','1'); setShow(false); };
  if(!show) return null;
  return (
    <div className="a2hs" role="status">
      <div className="ico">🇰🇷</div>
      <div className="txt">
        <b>Add to Home Screen</b>
        Tap <span className="inline">
          <svg width="12" height="14" viewBox="0 0 16 20" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M8 2v12M4 6l4-4 4 4M3 10v7a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-7"/></svg>
          Share
        </span> then <b style={{display:'inline',letterSpacing:0,textTransform:'none',fontSize:'inherit',opacity:1}}>"Add to Home Screen"</b>
      </div>
      <button className="x" onClick={dismiss} aria-label="Dismiss">×</button>
    </div>
  );
}

/* ————— App ————— */
function App(){
  const [tab,setTab] = useState(()=>localStorage.getItem('kr_tab')||'itin');
  const [showTweaks,setShowTweaks] = useState(false);
  useEffect(()=>{localStorage.setItem('kr_tab',tab)},[tab]);

  // Edit mode protocol
  useEffect(()=>{
    const h = (e)=>{
      if(e.data?.type==='__activate_edit_mode') setShowTweaks(true);
      if(e.data?.type==='__deactivate_edit_mode') setShowTweaks(false);
    };
    window.addEventListener('message',h);
    window.parent.postMessage({type:'__edit_mode_available'},'*');
    // apply persisted
    document.documentElement.style.setProperty('--accent',TWEAK_DEFAULTS.accent);
    document.documentElement.style.setProperty('--paper',TWEAK_DEFAULTS.paper);
    return ()=>window.removeEventListener('message',h);
  },[]);

  return (
    <div className="shell" data-screen-label={"0"+["1 Itinerary","2 Map","3 Bookings","4 Talk","5 Info"][['itin','map','book','lang','info'].indexOf(tab)]}>
      <A2HSBanner/>      {tab==='itin' && <Itinerary/>}
      {tab==='map'  && <MapView/>}
      {tab==='book' && <Bookings/>}
      {tab==='lang' && <Language/>}
      {tab==='info' && <Info/>}
      <Tweaks show={showTweaks} onClose={()=>setShowTweaks(false)}/>
      <TabBar tab={tab} setTab={setTab}/>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App/>);