// roamly.jsx — Roamly (travel: flights + hotels + activities). Lo-fi + Hi-fi.

const RM = {
  violet: '#6B47D9',
  violetDeep: '#5232BD',
  peach: '#FF9173',
  cream: '#FFF1E6',
  sky: '#C8DFFF',
  ink: '#181232',
  soft: '#5A547A',
};

// ============================================================
// LO-FI
// ============================================================

const LoDiscover = () => (
  <SkPhone>
    <div style={{ paddingTop: 12 }}>
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center' }}>
        <div className="sk" style={{ fontSize: 12, opacity: 0.6 }}>📍 Lisbon</div>
        <div className="sk-circle" style={{ width: 32, height: 32 }} />
      </div>
      <div className="sk-h" style={{ fontSize: 28, lineHeight: 1, marginTop: 8 }}>where to,<br/>roamer?</div>
      <SkRect h={40} style={{ marginTop: 12 }}>🔍 search anywhere</SkRect>
      <div style={{ display:'flex', gap: 6, marginTop: 10 }}>
        {['✈️ flights','🏨 hotels','🎟 activities'].map((t,i)=>(<span key={t} className="sk-pill" style={i===0?{background:'#181232',color:'#fbf7ef'}:{}}>{t}</span>))}
      </div>
      <div className="sk" style={{ fontSize: 13, marginTop: 14, marginBottom: 6 }}>trending nearby</div>
      <div style={{ display:'flex', gap: 8, overflow:'hidden' }}>
        {['Barcelona','Tangier','Porto'].map(c=>(
          <div key={c} style={{ minWidth: 110 }}>
            <div className="sk-img" style={{ height: 100 }} />
            <div className="sk-h" style={{ fontSize: 14, marginTop: 4, lineHeight: 1 }}>{c}</div>
            <div className="sk" style={{ fontSize: 10, opacity: 0.6 }}>from $89</div>
          </div>
        ))}
      </div>
      <div className="sk" style={{ fontSize: 13, marginTop: 14, marginBottom: 6 }}>your trips</div>
      <SkRect h={70} style={{ padding: 8, flexDirection:'row', gap: 8 }}>
        <div className="sk-img" style={{ width: 50, height: 54 }} />
        <div style={{ flex:1, display:'flex', flexDirection:'column', justifyContent:'center', alignItems:'flex-start' }}>
          <div className="sk-h" style={{ fontSize: 16, lineHeight: 1 }}>Tokyo getaway</div>
          <SkLines count={1} widths={['60%']} />
          <div className="sk-pill" style={{ marginTop: 4 }}>in 12 days</div>
        </div>
      </SkRect>
    </div>
    <div className="sk-tabbar">
      {['discover','trips','saved','me'].map((t,i)=>(
        <div key={t} style={{ display:'flex', flexDirection:'column', alignItems:'center', gap: 2 }}>
          <div className="sk-tab-ico" />
          <span className="sk" style={{ fontSize: 9, opacity: i===0?1:0.5 }}>{t}</span>
        </div>
      ))}
    </div>
    <SkNote top={130} right={-30} rotate={5} w={100}>scrollable carousel</SkNote>
  </SkPhone>
);

const LoFlights = () => (
  <SkPhone>
    <div style={{ paddingTop: 12 }}>
      <div style={{ display:'flex', alignItems:'center', gap: 8 }}>
        <span className="sk" style={{ fontSize: 18 }}>←</span>
        <div className="sk-h" style={{ fontSize: 18, lineHeight: 1 }}>LIS → NRT</div>
      </div>
      <SkRect h={44} style={{ marginTop: 10, padding: 8, flexDirection:'row', justifyContent:'space-between' }}>
        <span>Mar 14 → Mar 22</span>
        <span>1 adult</span>
      </SkRect>
      <div style={{ display:'flex', gap: 6, marginTop: 10 }}>
        {['cheapest','fastest','best'].map((t,i)=>(<span key={t} className="sk-pill" style={i===2?{background:'#181232',color:'#fbf7ef'}:{}}>{t}</span>))}
        <span className="sk-pill">filter ⛌</span>
      </div>
      <div style={{ display:'flex', flexDirection:'column', gap: 10, marginTop: 12 }}>
        {[
          ['TAP','06:40 → 14:20','+1','11h 40m','1 stop','$612'],
          ['LH','09:15 → 18:50','+1','13h 35m','1 stop · FRA','$589'],
          ['QR','22:30 → 19:10','+1','16h 40m','2 stops','$498'],
        ].map(([a,t,d,dur,st,p])=>(
          <SkRect key={a+t} h={84} style={{ padding: 8, flexDirection:'column', alignItems:'stretch' }}>
            <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center' }}>
              <span className="sk-pill">{a}</span>
              <span className="sk-h" style={{ fontSize: 18, lineHeight: 1 }}>{p}</span>
            </div>
            <div style={{ display:'flex', alignItems:'center', gap: 6, marginTop: 6 }}>
              <span className="sk-h" style={{ fontSize: 16 }}>{t}</span>
              <span className="sk" style={{ fontSize: 11, opacity: 0.6 }}>{d}</span>
            </div>
            <div className="sk" style={{ fontSize: 11, opacity: 0.6, marginTop: 2 }}>{dur} · {st}</div>
          </SkRect>
        ))}
      </div>
    </div>
    <SkNote top={120} left={-30} rotate={-5} w={80}>sort tabs</SkNote>
  </SkPhone>
);

const LoFlightDetail = () => (
  <SkPhone>
    <div style={{ paddingTop: 12 }}>
      <div style={{ display:'flex', alignItems:'center', gap: 8 }}>
        <span className="sk" style={{ fontSize: 18 }}>←</span>
        <div className="sk-h" style={{ fontSize: 18, lineHeight: 1 }}>flight details</div>
      </div>
      <SkRect h={56} style={{ marginTop: 10, padding: 8, flexDirection:'row', justifyContent:'space-between', alignItems:'center' }}>
        <span className="sk-pill">outbound · Mar 14</span>
        <span className="sk-h" style={{ fontSize: 18, lineHeight: 1 }}>$612</span>
      </SkRect>
      <SkRect h={160} style={{ marginTop: 10, padding: 10, flexDirection:'column', alignItems:'stretch', gap: 6 }}>
        <div style={{ display:'flex', justifyContent:'space-between' }}>
          <div>
            <div className="sk-h" style={{ fontSize: 20, lineHeight: 1 }}>06:40</div>
            <div className="sk" style={{ fontSize: 11, opacity: 0.6 }}>LIS · Lisbon</div>
          </div>
          <div style={{ flex:1, padding: '0 10px', display:'flex', flexDirection:'column', alignItems:'center' }}>
            <div className="sk" style={{ fontSize: 10, opacity: 0.6 }}>11h 40m</div>
            <div className="sk-line" style={{ width: '100%', marginTop: 4 }} />
            <div className="sk" style={{ fontSize: 10, opacity: 0.6, marginTop: 2 }}>1 stop · DOH</div>
          </div>
          <div>
            <div className="sk-h" style={{ fontSize: 20, lineHeight: 1 }}>14:20 <span style={{ fontSize: 11 }}>+1</span></div>
            <div className="sk" style={{ fontSize: 11, opacity: 0.6 }}>NRT · Tokyo</div>
          </div>
        </div>
        <div className="sk-line-dashed" style={{ marginTop: 6 }} />
        <div className="sk" style={{ fontSize: 11, marginTop: 4 }}>TAP · A330 · ⏱ 7h 20m</div>
        <SkLines count={2} widths={['80%','60%']} />
      </SkRect>
      <div className="sk" style={{ fontSize: 13, marginTop: 12 }}>select seat</div>
      <SkRect h={110} style={{ marginTop: 6, padding: 8 }}>seat map grid</SkRect>
    </div>
    <div style={{ position:'absolute', bottom: 60, left: 16, right: 16 }}>
      <SkRect h={48} fill>continue → $612</SkRect>
    </div>
    <SkNote top={210} right={-40} rotate={6} w={100}>timeline w/ stop</SkNote>
  </SkPhone>
);

const LoHotels = () => (
  <SkPhone>
    <div style={{ paddingTop: 12 }}>
      <div style={{ display:'flex', alignItems:'center', gap: 8 }}>
        <span className="sk" style={{ fontSize: 18 }}>←</span>
        <div className="sk-h" style={{ fontSize: 18, lineHeight: 1 }}>hotels in Tokyo</div>
      </div>
      <SkRect h={36} style={{ marginTop: 10 }}>Mar 14–22 · 1 room · 1 guest</SkRect>
      <div style={{ display:'flex', gap: 6, marginTop: 10, flexWrap:'wrap' }}>
        {['map','price','★★★★','breakfast','wifi'].map((t,i)=>(<span key={t} className="sk-pill" style={i===0?{background:'#181232',color:'#fbf7ef'}:{}}>{t}</span>))}
      </div>
      <div style={{ display:'flex', flexDirection:'column', gap: 10, marginTop: 12 }}>
        {[
          ['Shibuya Stream','★ 4.6 · 220 reviews','$142'],
          ['Hotel Koe','★ 4.8 · 540 reviews','$198'],
          ['Trunk House','★ 4.4 · 88 reviews','$108'],
        ].map(([n,r,p])=>(
          <SkRect key={n} h={86} style={{ padding: 6, flexDirection:'row', gap: 8 }}>
            <div className="sk-img" style={{ width: 80, height: 74 }} />
            <div style={{ flex:1, display:'flex', flexDirection:'column', justifyContent:'space-between', alignItems:'flex-start' }}>
              <div className="sk-h" style={{ fontSize: 16, lineHeight: 1 }}>{n}</div>
              <SkLines count={1} widths={['80%']} />
              <div className="sk" style={{ fontSize: 10, opacity: 0.6 }}>{r}</div>
              <div style={{ display:'flex', justifyContent:'space-between', width:'100%', alignItems:'center' }}>
                <div className="sk-pill">free cancel</div>
                <div className="sk-h" style={{ fontSize: 16 }}>{p}/nt</div>
              </div>
            </div>
          </SkRect>
        ))}
      </div>
    </div>
    <SkNote top={70} left={-20} rotate={-4} w={80}>map toggle</SkNote>
  </SkPhone>
);

const LoActivities = () => (
  <SkPhone>
    <div style={{ paddingTop: 12 }}>
      <div className="sk-h" style={{ fontSize: 22, lineHeight: 1 }}>things to do</div>
      <div className="sk" style={{ fontSize: 12, opacity: 0.6 }}>in Tokyo · Mar 14–22</div>
      <div style={{ display:'flex', gap: 6, marginTop: 10, flexWrap:'wrap' }}>
        {['food','culture','nature','nightlife','tours'].map((t,i)=>(<span key={t} className="sk-pill" style={i===1?{background:'#181232',color:'#fbf7ef'}:{}}>{t}</span>))}
      </div>
      <SkRect h={140} style={{ marginTop: 10, padding: 8, flexDirection:'column', alignItems:'stretch' }}>
        <div className="sk-img" style={{ height: 80 }} />
        <div className="sk-h" style={{ fontSize: 16, marginTop: 6, lineHeight: 1 }}>tsukiji market food tour</div>
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginTop: 4 }}>
          <div className="sk-pill">3h · ★ 4.9</div>
          <div className="sk-h" style={{ fontSize: 16 }}>$58</div>
        </div>
      </SkRect>
      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap: 10, marginTop: 10 }}>
        {['Shibuya tour','Tea ceremony','TeamLab','Mt Fuji day'].map(n=>(
          <div key={n}>
            <div className="sk-img" style={{ height: 90 }} />
            <div className="sk-h" style={{ fontSize: 13, marginTop: 4, lineHeight: 1 }}>{n}</div>
            <div className="sk" style={{ fontSize: 10, opacity: 0.6 }}>from $24</div>
          </div>
        ))}
      </div>
    </div>
    <SkNote top={170} right={-30} rotate={5} w={90}>featured card</SkNote>
  </SkPhone>
);

const LoItinerary = () => (
  <SkPhone>
    <div style={{ paddingTop: 12 }}>
      <div className="sk-h" style={{ fontSize: 22, lineHeight: 1 }}>Tokyo getaway</div>
      <div className="sk" style={{ fontSize: 12, opacity: 0.6 }}>Mar 14–22 · 8 days</div>
      <div style={{ display:'flex', gap: 4, marginTop: 10, overflowX:'hidden' }}>
        {Array.from({length: 8}).map((_,i)=>(
          <div key={i} className={i===1?'sk-rect-fill':'sk-rect'} style={{ width: 36, height: 44, display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', borderRadius: 6 }}>
            <div className="sk" style={{ fontSize: 9, opacity: 0.6 }}>{['M','T','W','T','F','S','S','M'][i]}</div>
            <div className="sk-h" style={{ fontSize: 14, lineHeight: 1 }}>{14+i}</div>
          </div>
        ))}
      </div>
      <div className="sk" style={{ fontSize: 13, marginTop: 14, marginBottom: 6 }}>day 2 · Sat Mar 15</div>
      <div style={{ display:'flex', flexDirection:'column', gap: 8 }}>
        {[
          ['09:00','✈️','Land at NRT'],
          ['12:00','🏨','Check in · Shibuya Stream'],
          ['15:00','🎟','Tsukiji food tour'],
          ['20:00','🍣','Dinner at Uobei'],
        ].map(([t,i,n])=>(
          <SkRect key={n} h={50} style={{ padding: 6, flexDirection:'row', alignItems:'center', gap: 8 }}>
            <div className="sk" style={{ fontSize: 12, width: 40 }}>{t}</div>
            <div className="sk-circle" style={{ width: 30, height: 30, display:'flex', alignItems:'center', justifyContent:'center' }}>{i}</div>
            <div style={{ flex:1, textAlign:'left' }}>
              <div className="sk-h" style={{ fontSize: 14, lineHeight: 1 }}>{n}</div>
              <SkLines count={1} widths={['70%']} />
            </div>
          </SkRect>
        ))}
      </div>
    </div>
    <SkNote top={120} right={-30} rotate={5} w={100}>day strip selector</SkNote>
  </SkPhone>
);

const LoConfirm = () => (
  <SkPhone>
    <div style={{ paddingTop: 30, display:'flex', flexDirection:'column', alignItems:'center', height: '100%' }}>
      <div style={{ fontSize: 56, marginTop: 8 }}>🎫</div>
      <div className="sk-h" style={{ fontSize: 28, lineHeight: 1, textAlign:'center', marginTop: 8 }}>you're going<br/>to tokyo!</div>
      <div className="sk" style={{ fontSize: 12, opacity:0.6, marginTop: 6 }}>booking #RM-48291</div>
      <SkRect h={200} style={{ marginTop: 18, width: '100%', padding: 12, flexDirection:'column', alignItems:'stretch', gap: 8 }}>
        <div style={{ display:'flex', justifyContent:'space-between' }}>
          <span className="sk-pill">✈️ flight</span>
          <span className="sk-h" style={{ fontSize: 14 }}>$612</span>
        </div>
        <div className="sk" style={{ fontSize: 12 }}>LIS → NRT · Mar 14, 06:40</div>
        <div className="sk-line-dashed" />
        <div style={{ display:'flex', justifyContent:'space-between' }}>
          <span className="sk-pill">🏨 hotel</span>
          <span className="sk-h" style={{ fontSize: 14 }}>$1,136</span>
        </div>
        <div className="sk" style={{ fontSize: 12 }}>Shibuya Stream · 8 nights</div>
        <div className="sk-line-dashed" />
        <div style={{ display:'flex', justifyContent:'space-between' }}>
          <span className="sk-pill">🎟 activity</span>
          <span className="sk-h" style={{ fontSize: 14 }}>$58</span>
        </div>
        <div className="sk" style={{ fontSize: 12 }}>Tsukiji food tour · Mar 15</div>
      </SkRect>
      <SkRect h={50} style={{ width: '100%', marginTop: 14, justifyContent:'space-between', padding: 12, flexDirection:'row' }}>
        <span className="sk-h" style={{ fontSize: 14 }}>total</span>
        <span className="sk-h" style={{ fontSize: 22 }}>$1,806</span>
      </SkRect>
      <div style={{ flex:1 }} />
      <SkRect h={46} fill style={{ width:'100%' }}>view itinerary</SkRect>
    </div>
    <SkNote top={210} left={-30} rotate={-6} w={100}>receipt-style card</SkNote>
  </SkPhone>
);

// ============================================================
// HI-FI
// ============================================================
const RmShell = ({ children, dark = false, bg }) => (
  <div style={{
    width: 360, height: 740, borderRadius: 44, overflow: 'hidden',
    background: bg || RM.cream, position: 'relative',
    boxShadow: '0 30px 60px rgba(24,18,50,0.18), 0 0 0 1.5px rgba(24,18,50,0.4)',
    fontFamily: "'Space Grotesk', system-ui, sans-serif", color: RM.ink,
  }}>
    <div style={{ position:'absolute', top: 10, left: '50%', transform:'translateX(-50%)', width: 100, height: 28, borderRadius: 20, background:'#000', zIndex: 50 }} />
    <div style={{ position:'absolute', top: 12, left: 18, right: 18, display:'flex', justifyContent:'space-between', alignItems:'center', zIndex: 40, fontSize: 13, fontWeight: 600, color: dark ? '#fff' : RM.ink }}>
      <span>9:41</span><span style={{ width: 100 }} /><span>● ●●● 100%</span>
    </div>
    <div style={{ position:'absolute', bottom: 8, left: '50%', transform:'translateX(-50%)', width: 120, height: 4, borderRadius: 4, background: dark?'rgba(255,255,255,0.6)':'rgba(0,0,0,0.3)', zIndex: 60 }} />
    <div style={{ paddingTop: 50, height: 'calc(100% - 50px)', overflow:'auto' }}>{children}</div>
  </div>
);

const HiDiscover = () => (
  <RmShell>
    <div style={{ padding: '8px 20px 100px' }}>
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center' }}>
        <div style={{ display:'flex', alignItems:'center', gap: 6, background:'#fff', padding:'8px 14px', borderRadius: 999, border:`2px solid ${RM.ink}` }}>
          <span style={{ fontSize: 14 }}>📍</span>
          <span style={{ fontWeight: 700, fontSize: 13 }}>Lisbon</span>
        </div>
        <div style={{ width: 44, height: 44, borderRadius: 999, background: RM.peach, border: `2px solid ${RM.ink}`, display:'flex', alignItems:'center', justifyContent:'center', fontSize: 20 }}>🦊</div>
      </div>
      <div style={{ fontFamily:"'Bricolage Grotesque'", fontWeight: 800, fontSize: 42, lineHeight: 0.95, marginTop: 14 }}>
        where to,<br/>roamer?
      </div>

      {/* Search card */}
      <div style={{ marginTop: 16, background: '#fff', border:`2px solid ${RM.ink}`, borderRadius: 22, padding: 14 }}>
        <div style={{ display:'flex', gap: 6 }}>
          {[['✈️','flights',true],['🏨','hotels'],['🎟','activities'],['🚗','cars']].map(([i,l,a])=>(
            <div key={l} style={{ flex: 1, textAlign:'center', background: a?RM.violet:'transparent', color: a?'#fff':RM.ink, borderRadius: 12, padding: '8px 4px', fontWeight: 700, fontSize: 11 }}>
              <div style={{ fontSize: 18 }}>{i}</div>{l}
            </div>
          ))}
        </div>
        <div style={{ marginTop: 12, border:`1.5px solid rgba(24,18,50,0.15)`, borderRadius: 12, padding: 10 }}>
          <div style={{ fontSize: 10, fontWeight: 700, color: RM.soft }}>FROM</div>
          <div style={{ fontFamily:"'Bricolage Grotesque'", fontWeight: 800, fontSize: 18 }}>Lisbon (LIS)</div>
        </div>
        <div style={{ marginTop: 8, border:`1.5px solid rgba(24,18,50,0.15)`, borderRadius: 12, padding: 10 }}>
          <div style={{ fontSize: 10, fontWeight: 700, color: RM.soft }}>TO</div>
          <div style={{ fontFamily:"'Bricolage Grotesque'", fontWeight: 800, fontSize: 18, color: RM.soft }}>where to?</div>
        </div>
        <button style={{ marginTop: 12, width: '100%', background: RM.ink, color:'#fff', border: 0, borderRadius: 14, padding: '14px 0', fontWeight: 800, fontSize: 15, fontFamily:'inherit' }}>search →</button>
      </div>

      <div style={{ marginTop: 22, display:'flex', alignItems:'baseline', justifyContent:'space-between' }}>
        <div style={{ fontFamily:"'Bricolage Grotesque'", fontWeight: 800, fontSize: 18 }}>trending nearby</div>
        <div style={{ fontSize: 12, color: RM.soft, fontWeight: 700 }}>see all →</div>
      </div>
      <div style={{ display:'flex', gap: 12, marginTop: 10, overflow:'visible' }}>
        {[
          ['Barcelona','from $89', RM.peach, '🏖'],
          ['Tangier','from $145', RM.sky, '🕌'],
          ['Porto','from $52', '#FFE145', '🍷'],
        ].map(([c,p,bg,e])=>(
          <div key={c} style={{ minWidth: 130, borderRadius: 20, background: bg, border:`2px solid ${RM.ink}`, padding: 12, position:'relative', overflow:'hidden' }}>
            <div style={{ position:'absolute', bottom: -10, right: -10, fontSize: 70, opacity: 0.85 }}>{e}</div>
            <div style={{ fontFamily:"'Bricolage Grotesque'", fontWeight: 800, fontSize: 18 }}>{c}</div>
            <div style={{ fontSize: 11, fontWeight: 600, marginTop: 30 }}>{p}</div>
          </div>
        ))}
      </div>
    </div>
    <div style={{ position:'absolute', bottom: 0, left: 0, right: 0, height: 80, background:'#fff', borderTop:`2px solid ${RM.ink}`, display:'flex', alignItems:'center', justifyContent:'space-around', paddingBottom: 18 }}>
      {[['🧭','discover',true],['🧳','trips'],['💜','saved'],['👤','me']].map(([i,l,a],idx)=>(
        <div key={idx} style={{ display:'flex', flexDirection:'column', alignItems:'center', gap: 2, opacity: a?1:0.5 }}>
          <div style={{ fontSize: 20 }}>{i}</div>
          <div style={{ fontSize: 10, fontWeight: 700 }}>{l}</div>
        </div>
      ))}
    </div>
  </RmShell>
);

const HiFlights = () => (
  <RmShell>
    <div style={{ padding: '8px 20px 30px' }}>
      <div style={{ display:'flex', alignItems:'center', gap: 10 }}>
        <div style={{ width: 36, height: 36, borderRadius: 999, background:'#fff', border:`2px solid ${RM.ink}`, display:'flex', alignItems:'center', justifyContent:'center', fontSize: 18 }}>←</div>
        <div>
          <div style={{ fontFamily:"'Bricolage Grotesque'", fontWeight: 800, fontSize: 22, lineHeight: 1 }}>LIS → NRT</div>
          <div style={{ fontSize: 11, color: RM.soft, fontWeight: 600 }}>Mar 14 → 22 · 1 adult</div>
        </div>
      </div>
      <div style={{ display:'flex', gap: 6, marginTop: 14, background:'#fff', border:`2px solid ${RM.ink}`, borderRadius: 999, padding: 4 }}>
        {[['cheapest'],['fastest'],['best',true]].map(([t,a])=>(
          <button key={t} style={{ flex:1, border:0, borderRadius: 999, padding:'8px 0', fontWeight:800, fontSize: 12, background: a?RM.ink:'transparent', color: a?'#fff':RM.ink, fontFamily:'inherit' }}>{t}</button>
        ))}
      </div>

      {[
        ['TAP','TAP Air','06:40','14:20','+1','11h 40m','1 stop · DOH','$612', RM.violet, '#fff'],
        ['LH','Lufthansa','09:15','18:50','+1','13h 35m','1 stop · FRA','$589', '#fff', RM.ink],
        ['QR','Qatar Airways','22:30','19:10','+1','16h 40m','2 stops','$498', RM.peach, RM.ink],
      ].map(([c,n,t1,t2,d,dur,st,p,bg,fg],i)=>(
        <div key={c} style={{ marginTop: 14, background: bg, color: fg, border:`2px solid ${RM.ink}`, borderRadius: 22, padding: 16, position:'relative' }}>
          {i===0 && <div style={{ position:'absolute', top: -10, left: 14, background: '#FFE145', color: RM.ink, fontSize: 10, fontWeight: 800, padding:'3px 8px', borderRadius: 6, border:`2px solid ${RM.ink}` }}>★ BEST DEAL</div>}
          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center' }}>
            <div style={{ display:'flex', gap: 8, alignItems:'center' }}>
              <div style={{ width: 36, height: 36, background: bg===RM.violet?'#fff':RM.ink, color: bg===RM.violet?RM.ink:'#fff', borderRadius: 8, display:'flex', alignItems:'center', justifyContent:'center', fontWeight: 800, fontSize: 11 }}>{c}</div>
              <div style={{ fontWeight: 700, fontSize: 12 }}>{n}</div>
            </div>
            <div style={{ fontFamily:"'Bricolage Grotesque'", fontWeight: 800, fontSize: 22, lineHeight: 1 }}>{p}</div>
          </div>
          <div style={{ display:'flex', alignItems:'center', marginTop: 12 }}>
            <div>
              <div style={{ fontFamily:"'Bricolage Grotesque'", fontWeight: 800, fontSize: 22, lineHeight: 1 }}>{t1}</div>
              <div style={{ fontSize: 10, opacity: 0.7, fontWeight: 600 }}>LIS</div>
            </div>
            <div style={{ flex:1, padding:'0 12px', textAlign:'center' }}>
              <div style={{ fontSize: 10, fontWeight: 700, opacity: 0.7 }}>{dur}</div>
              <div style={{ height: 2, background: 'currentColor', opacity: 0.4, marginTop: 6, position:'relative' }}>
                <div style={{ position:'absolute', top: -3, left: '40%', width: 8, height: 8, background: 'currentColor', borderRadius: 999 }} />
              </div>
              <div style={{ fontSize: 10, opacity: 0.7, fontWeight: 600, marginTop: 4 }}>{st}</div>
            </div>
            <div style={{ textAlign:'right' }}>
              <div style={{ fontFamily:"'Bricolage Grotesque'", fontWeight: 800, fontSize: 22, lineHeight: 1 }}>{t2}<span style={{ fontSize: 11 }}>{d}</span></div>
              <div style={{ fontSize: 10, opacity: 0.7, fontWeight: 600 }}>NRT</div>
            </div>
          </div>
        </div>
      ))}
    </div>
  </RmShell>
);

const HiFlightDetail = () => (
  <RmShell>
    <div style={{ padding: '8px 20px 130px' }}>
      <div style={{ display:'flex', alignItems:'center', gap: 10 }}>
        <div style={{ width: 36, height: 36, borderRadius: 999, background:'#fff', border:`2px solid ${RM.ink}`, display:'flex', alignItems:'center', justifyContent:'center', fontSize: 18 }}>←</div>
        <div style={{ fontFamily:"'Bricolage Grotesque'", fontWeight: 800, fontSize: 20 }}>Flight Details</div>
      </div>

      <div style={{ marginTop: 16, background: RM.violet, color: '#fff', borderRadius: 24, padding: 20, position:'relative', overflow:'hidden', border:`2px solid ${RM.ink}` }}>
        <div style={{ position:'absolute', right: -20, top: 10, fontSize: 100, opacity: 0.2, transform: 'rotate(20deg)' }}>✈️</div>
        <div style={{ fontSize: 11, fontWeight: 700, opacity: 0.8 }}>OUTBOUND · MAR 14</div>
        <div style={{ display:'flex', alignItems:'center', marginTop: 14, gap: 14 }}>
          <div>
            <div style={{ fontFamily:"'Bricolage Grotesque'", fontWeight: 800, fontSize: 36, lineHeight: 1 }}>06:40</div>
            <div style={{ fontSize: 12, opacity: 0.85, fontWeight: 600 }}>LIS · Lisbon</div>
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 10, opacity: 0.8, textAlign:'center', fontWeight: 700 }}>11h 40m</div>
            <div style={{ position:'relative', marginTop: 6 }}>
              <div style={{ height: 2, background:'rgba(255,255,255,0.4)' }} />
              <div style={{ position:'absolute', top: -4, left: '40%', width: 10, height: 10, background: '#FFE145', border:'2px solid #fff', borderRadius: 999 }} />
            </div>
            <div style={{ fontSize: 10, opacity: 0.8, textAlign:'center', marginTop: 4, fontWeight: 600 }}>1 stop · DOH</div>
          </div>
          <div style={{ textAlign:'right' }}>
            <div style={{ fontFamily:"'Bricolage Grotesque'", fontWeight: 800, fontSize: 36, lineHeight: 1 }}>14:20<span style={{ fontSize: 13 }}>+1</span></div>
            <div style={{ fontSize: 12, opacity: 0.85, fontWeight: 600 }}>NRT · Tokyo</div>
          </div>
        </div>
        <div style={{ display:'flex', gap: 8, marginTop: 14, fontSize: 11, fontWeight: 600 }}>
          <span style={{ background:'rgba(255,255,255,0.2)', padding:'4px 10px', borderRadius: 999 }}>TAP A330</span>
          <span style={{ background:'rgba(255,255,255,0.2)', padding:'4px 10px', borderRadius: 999 }}>Economy</span>
          <span style={{ background:'rgba(255,255,255,0.2)', padding:'4px 10px', borderRadius: 999 }}>23kg ✓</span>
        </div>
      </div>

      <div style={{ marginTop: 20, fontFamily:"'Bricolage Grotesque'", fontWeight: 800, fontSize: 18 }}>pick your seat</div>
      <div style={{ marginTop: 10, background:'#fff', border:`2px solid ${RM.ink}`, borderRadius: 18, padding: 12 }}>
        <div style={{ display:'flex', gap: 4, justifyContent:'space-between', fontSize: 10, fontWeight: 700, color: RM.soft, marginBottom: 6 }}>
          <span>A</span><span>B</span><span>C</span><span style={{ width: 12 }} /><span>D</span><span>E</span><span>F</span>
        </div>
        {[24,25,26,27].map(row=>(
          <div key={row} style={{ display:'flex', gap: 4, marginTop: 4, justifyContent:'space-between', alignItems:'center' }}>
            {['A','B','C','_','D','E','F'].map((s,i)=>(
              s==='_' ? <span key={i} style={{ width: 16, fontSize: 9, color: RM.soft, fontWeight: 700, textAlign:'center' }}>{row}</span> :
              <div key={i} style={{ width: 30, height: 30, borderRadius: 8, background: (row===25 && s==='C')?RM.peach: (row===26 && s==='D')?RM.violet:'#F0EDF8', border:`1.5px solid ${RM.ink}` }} />
            ))}
          </div>
        ))}
      </div>
    </div>
    <div style={{ position:'absolute', bottom: 0, left: 0, right: 0, padding: '14px 20px 26px', background: '#fff', borderTop:`2px solid ${RM.ink}` }}>
      <button style={{ width: '100%', background: RM.violet, color:'#fff', border:0, borderRadius: 999, padding: '18px 0', fontWeight: 800, fontSize: 16, fontFamily:'inherit' }}>continue · $612 →</button>
    </div>
  </RmShell>
);

const HiHotels = () => (
  <RmShell>
    <div style={{ padding: '8px 20px 30px' }}>
      <div style={{ display:'flex', alignItems:'center', gap: 10 }}>
        <div style={{ width: 36, height: 36, borderRadius: 999, background:'#fff', border:`2px solid ${RM.ink}`, display:'flex', alignItems:'center', justifyContent:'center', fontSize: 18 }}>←</div>
        <div>
          <div style={{ fontFamily:"'Bricolage Grotesque'", fontWeight: 800, fontSize: 22, lineHeight: 1 }}>Stay in Tokyo</div>
          <div style={{ fontSize: 11, color: RM.soft, fontWeight: 600 }}>Mar 14–22 · 1 room · 1 guest</div>
        </div>
      </div>
      <div style={{ display:'flex', gap: 8, marginTop: 14, overflow:'visible', flexWrap: 'wrap' }}>
        {[['🗺','map view',true],['$','price'],['★','4+ stars'],['🥐','breakfast'],['📶','wifi']].map(([i,l,a])=>(
          <span key={l} style={{ display:'inline-flex', alignItems:'center', gap: 4, background: a?RM.ink:'#fff', color: a?'#fff':RM.ink, border:`2px solid ${RM.ink}`, borderRadius: 999, padding:'6px 12px', fontWeight: 700, fontSize: 12 }}>{i} {l}</span>
        ))}
      </div>

      {[
        ['Shibuya Stream','★ 4.6','220','$142', RM.sky, '🌆'],
        ['Hotel Koe Tokyo','★ 4.8','540','$198', RM.peach, '🏯'],
        ['Trunk House','★ 4.4','88','$108', '#FFE145', '🏮'],
      ].map(([n,r,c,p,bg,e])=>(
        <div key={n} style={{ marginTop: 14, background:'#fff', border:`2px solid ${RM.ink}`, borderRadius: 22, overflow:'hidden' }}>
          <div style={{ height: 130, background: bg, position:'relative', display:'flex', alignItems:'center', justifyContent:'center', fontSize: 80 }}>
            {e}
            <div style={{ position:'absolute', top: 12, right: 12, width: 36, height: 36, borderRadius: 999, background: 'rgba(255,255,255,0.9)', display:'flex', alignItems:'center', justifyContent:'center', fontSize: 16 }}>♡</div>
            <div style={{ position:'absolute', bottom: 10, left: 12, background: RM.ink, color: '#fff', fontSize: 10, fontWeight: 800, padding:'4px 8px', borderRadius: 999 }}>FREE CANCEL</div>
          </div>
          <div style={{ padding: 14 }}>
            <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline' }}>
              <div style={{ fontFamily:"'Bricolage Grotesque'", fontWeight: 800, fontSize: 18 }}>{n}</div>
              <div style={{ fontFamily:"'Bricolage Grotesque'", fontWeight: 800, fontSize: 18 }}>{p}<span style={{ fontSize: 11, color: RM.soft, fontWeight: 600 }}>/nt</span></div>
            </div>
            <div style={{ fontSize: 12, fontWeight: 600, marginTop: 2 }}>{r} <span style={{ color: RM.soft, fontWeight: 500 }}>· {c} reviews · Shibuya</span></div>
          </div>
        </div>
      ))}
    </div>
  </RmShell>
);

const HiActivities = () => (
  <RmShell bg={RM.peach}>
    <div style={{ padding: '8px 20px 30px' }}>
      <div style={{ fontFamily:"'Bricolage Grotesque'", fontWeight: 800, fontSize: 36, lineHeight: 0.95 }}>things<br/>to do</div>
      <div style={{ fontSize: 13, fontWeight: 600, marginTop: 6, opacity: 0.8 }}>Tokyo · Mar 14–22</div>

      <div style={{ display:'flex', gap: 8, marginTop: 16, overflow:'visible', flexWrap: 'wrap' }}>
        {[['🍣','food',true],['⛩','culture'],['🌳','nature'],['🌃','nightlife']].map(([i,l,a])=>(
          <span key={l} style={{ display:'inline-flex', alignItems:'center', gap: 4, background: a?RM.ink:'#fff', color: a?'#fff':RM.ink, border:`2px solid ${RM.ink}`, borderRadius: 999, padding:'8px 14px', fontWeight: 700, fontSize: 13 }}>{i} {l}</span>
        ))}
      </div>

      {/* Featured */}
      <div style={{ marginTop: 18, background: RM.ink, color:'#fff', borderRadius: 24, overflow:'hidden', position:'relative' }}>
        <div style={{ height: 160, background: `linear-gradient(135deg, ${RM.violet}, ${RM.peach})`, position:'relative', display:'flex', alignItems:'center', justifyContent:'center', fontSize: 100 }}>
          🍣
          <div style={{ position:'absolute', top: 12, left: 12, background: '#FFE145', color: RM.ink, fontSize: 11, fontWeight: 800, padding:'4px 10px', borderRadius: 999 }}>★ FEATURED</div>
        </div>
        <div style={{ padding: 16 }}>
          <div style={{ fontFamily:"'Bricolage Grotesque'", fontWeight: 800, fontSize: 22, lineHeight: 1.05 }}>Tsukiji Market Food Tour</div>
          <div style={{ display:'flex', gap: 6, marginTop: 8 }}>
            <span style={{ background:'rgba(255,255,255,0.15)', padding:'4px 10px', borderRadius: 999, fontSize: 11, fontWeight: 600 }}>⏱ 3 hr</span>
            <span style={{ background:'rgba(255,255,255,0.15)', padding:'4px 10px', borderRadius: 999, fontSize: 11, fontWeight: 600 }}>★ 4.9 · 1.2k</span>
          </div>
          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginTop: 14 }}>
            <div style={{ fontFamily:"'Bricolage Grotesque'", fontWeight: 800, fontSize: 24 }}>$58</div>
            <button style={{ background: '#FFE145', color: RM.ink, border:0, borderRadius: 999, padding: '10px 18px', fontWeight: 800, fontSize: 13, fontFamily:'inherit' }}>book →</button>
          </div>
        </div>
      </div>

      <div style={{ marginTop: 18, fontFamily:"'Bricolage Grotesque'", fontWeight: 800, fontSize: 18 }}>popular picks</div>
      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap: 10, marginTop: 10 }}>
        {[
          ['Shibuya Tour','$24','🏙', RM.sky],
          ['Tea Ceremony','$32','🍵', '#FFE145'],
          ['TeamLab','$28','✨', RM.violet],
          ['Mt Fuji Day','$98','🗻', '#A8F0C6'],
        ].map(([n,p,e,bg])=>(
          <div key={n} style={{ background:'#fff', border:`2px solid ${RM.ink}`, borderRadius: 16, overflow:'hidden' }}>
            <div style={{ height: 80, background: bg, display:'flex', alignItems:'center', justifyContent:'center', fontSize: 38, color: bg===RM.violet?'#fff':RM.ink }}>{e}</div>
            <div style={{ padding: 10 }}>
              <div style={{ fontWeight: 800, fontSize: 13 }}>{n}</div>
              <div style={{ fontSize: 11, color: RM.soft, fontWeight: 600, marginTop: 2 }}>from {p}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  </RmShell>
);

const HiItinerary = () => (
  <RmShell>
    <div style={{ padding: '8px 20px 30px' }}>
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start' }}>
        <div>
          <div style={{ fontSize: 11, fontWeight: 700, color: RM.soft }}>YOUR TRIP</div>
          <div style={{ fontFamily:"'Bricolage Grotesque'", fontWeight: 800, fontSize: 28, lineHeight: 1 }}>Tokyo Getaway</div>
          <div style={{ fontSize: 12, color: RM.soft, fontWeight: 600, marginTop: 4 }}>Mar 14–22 · 8 days · 1 traveler</div>
        </div>
        <div style={{ width: 44, height: 44, borderRadius: 14, background: RM.violet, color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontSize: 22, border:`2px solid ${RM.ink}` }}>＋</div>
      </div>

      {/* Day strip */}
      <div style={{ display:'flex', gap: 6, marginTop: 16, overflow:'visible' }}>
        {Array.from({length: 8}).map((_,i)=>(
          <div key={i} style={{ flex: 1, background: i===1?RM.ink:'#fff', color: i===1?'#fff':RM.ink, border:`2px solid ${RM.ink}`, borderRadius: 12, padding: '8px 0', textAlign:'center' }}>
            <div style={{ fontSize: 9, fontWeight: 700, opacity: 0.7 }}>{['M','T','W','T','F','S','S','M'][i]}</div>
            <div style={{ fontFamily:"'Bricolage Grotesque'", fontWeight: 800, fontSize: 16 }}>{14+i}</div>
          </div>
        ))}
      </div>

      <div style={{ marginTop: 18, fontSize: 11, fontWeight: 700, color: RM.soft }}>DAY 2 · SAT MAR 15</div>
      <div style={{ marginTop: 8, position:'relative' }}>
        <div style={{ position:'absolute', left: 23, top: 18, bottom: 18, width: 2, background: 'rgba(24,18,50,0.15)' }} />
        {[
          ['09:00','✈️','Land at NRT', 'Narita International', RM.sky],
          ['12:00','🏨','Check in', 'Shibuya Stream Hotel', '#FFE145'],
          ['15:00','🎟','Tsukiji food tour','3 hour walking tour', RM.peach],
          ['20:00','🍣','Dinner at Uobei','sushi · reservation 8pm', RM.violet],
        ].map(([t,e,n,d,bg],i)=>(
          <div key={n} style={{ display:'flex', gap: 12, marginTop: i===0?0:12, position:'relative' }}>
            <div style={{ width: 48, height: 48, borderRadius: 14, background: bg, color: bg===RM.violet?'#fff':RM.ink, border:`2px solid ${RM.ink}`, display:'flex', alignItems:'center', justifyContent:'center', fontSize: 22, zIndex: 1 }}>{e}</div>
            <div style={{ flex: 1, background:'#fff', border:`2px solid ${RM.ink}`, borderRadius: 14, padding: 10 }}>
              <div style={{ display:'flex', justifyContent:'space-between' }}>
                <div style={{ fontFamily:"'Bricolage Grotesque'", fontWeight: 800, fontSize: 15 }}>{n}</div>
                <div style={{ fontSize: 11, fontWeight: 700, color: RM.soft }}>{t}</div>
              </div>
              <div style={{ fontSize: 11, color: RM.soft, fontWeight: 600, marginTop: 2 }}>{d}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  </RmShell>
);

const HiConfirm = () => (
  <RmShell bg={RM.violet}>
    <div style={{ padding: '8px 20px 40px', color: '#fff', height: '100%', display:'flex', flexDirection:'column' }}>
      <div style={{ fontSize: 70, alignSelf:'center', marginTop: 10 }}>🎫</div>
      <div style={{ fontFamily:"'Bricolage Grotesque'", fontWeight: 800, fontSize: 44, lineHeight: 0.95, textAlign:'center', marginTop: 8 }}>
        you're going<br/>to Tokyo!
      </div>
      <div style={{ fontSize: 12, opacity: 0.7, textAlign:'center', marginTop: 8, fontFamily:'DM Mono, monospace' }}>booking · #RM-48291</div>

      <div style={{ marginTop: 22, background:'#fff', color: RM.ink, borderRadius: 22, padding: 16, border:`2px solid ${RM.ink}` }}>
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center' }}>
          <div style={{ display:'flex', gap: 8, alignItems:'center' }}>
            <div style={{ width: 36, height: 36, borderRadius: 10, background: RM.violet, color:'#fff', display:'flex', alignItems:'center', justifyContent:'center' }}>✈️</div>
            <div>
              <div style={{ fontWeight: 800, fontSize: 14 }}>Flight</div>
              <div style={{ fontSize: 11, color: RM.soft, fontWeight: 600 }}>LIS → NRT · Mar 14</div>
            </div>
          </div>
          <div style={{ fontFamily:"'Bricolage Grotesque'", fontWeight: 800, fontSize: 16 }}>$612</div>
        </div>
        <div style={{ borderTop: '1.5px dashed rgba(0,0,0,0.15)', margin:'12px 0' }} />
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center' }}>
          <div style={{ display:'flex', gap: 8, alignItems:'center' }}>
            <div style={{ width: 36, height: 36, borderRadius: 10, background: RM.peach, color: RM.ink, display:'flex', alignItems:'center', justifyContent:'center' }}>🏨</div>
            <div>
              <div style={{ fontWeight: 800, fontSize: 14 }}>Hotel</div>
              <div style={{ fontSize: 11, color: RM.soft, fontWeight: 600 }}>Shibuya Stream · 8 nts</div>
            </div>
          </div>
          <div style={{ fontFamily:"'Bricolage Grotesque'", fontWeight: 800, fontSize: 16 }}>$1,136</div>
        </div>
        <div style={{ borderTop: '1.5px dashed rgba(0,0,0,0.15)', margin:'12px 0' }} />
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center' }}>
          <div style={{ display:'flex', gap: 8, alignItems:'center' }}>
            <div style={{ width: 36, height: 36, borderRadius: 10, background: '#FFE145', color: RM.ink, display:'flex', alignItems:'center', justifyContent:'center' }}>🎟</div>
            <div>
              <div style={{ fontWeight: 800, fontSize: 14 }}>Activity</div>
              <div style={{ fontSize: 11, color: RM.soft, fontWeight: 600 }}>Tsukiji tour · Mar 15</div>
            </div>
          </div>
          <div style={{ fontFamily:"'Bricolage Grotesque'", fontWeight: 800, fontSize: 16 }}>$58</div>
        </div>
        <div style={{ borderTop: `2px solid ${RM.ink}`, marginTop: 14, paddingTop: 14, display:'flex', justifyContent:'space-between', alignItems:'baseline' }}>
          <div style={{ fontWeight: 800, fontSize: 13 }}>TOTAL</div>
          <div style={{ fontFamily:"'Bricolage Grotesque'", fontWeight: 800, fontSize: 26 }}>$1,806</div>
        </div>
      </div>

      <div style={{ flex: 1 }} />
      <button style={{ marginTop: 16, background: '#FFE145', color: RM.ink, border:0, borderRadius: 999, padding: '18px 0', fontWeight: 800, fontSize: 16, fontFamily:'inherit' }}>view itinerary →</button>
      <button style={{ background:'transparent', color:'#fff', border:0, padding: 10, fontWeight: 700, fontSize: 13 }}>add to calendar</button>
    </div>
  </RmShell>
);

// ============================================================
// PAGE
// ============================================================
const RM_SCREENS = [
  ['discover','01 · Discover', LoDiscover, HiDiscover],
  ['flights','02 · Flight Results', LoFlights, HiFlights],
  ['detail','03 · Flight Details', LoFlightDetail, HiFlightDetail],
  ['hotels','04 · Hotels', LoHotels, HiHotels],
  ['activities','05 · Activities', LoActivities, HiActivities],
  ['itinerary','06 · Itinerary', LoItinerary, HiItinerary],
  ['confirm','07 · Booking', LoConfirm, HiConfirm],
];

function RoamlyApp() {
  return (
    <DesignCanvas>
      <DCSection id="lofi" title="LO-FI · Roamly" subtitle="Sketchy wireframes — flow + hierarchy">
        {RM_SCREENS.map(([id, label, Lo]) => (
          <DCArtboard key={id} id={'lo-'+id} label={label} width={340} height={700}>
            <div data-screen-label={'Lo · ' + label} style={{ width:'100%', height:'100%', background:'#fbf7ef', display:'flex', alignItems:'center', justifyContent:'center', padding: 8, fontFamily:"'Patrick Hand', cursive" }}>
              <Lo />
            </div>
          </DCArtboard>
        ))}
      </DCSection>
      <DCSection id="hifi" title="HI-FI · Roamly" subtitle="Violet + peach · big chunky type · sticker icons">
        {RM_SCREENS.map(([id, label, , Hi]) => (
          <DCArtboard key={id} id={'hi-'+id} label={label} width={380} height={780}>
            <div data-screen-label={'Hi · ' + label} style={{ width:'100%', height:'100%', display:'flex', alignItems:'center', justifyContent:'center', padding: 10 }}>
              <Hi />
            </div>
          </DCArtboard>
        ))}
      </DCSection>
    </DesignCanvas>
  );
}

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