// ROAMR — Stays / Campfind partner search.
// Search + filter listings, list/map toggle, stay detail with amenities,
// reviews, "Book on Campfind ↗" CTA + powered-by footer.

const { Photo: S_Photo, Pill: S_Pill, SaveBtn: S_SaveBtn, MapMockV2: S_Map,
  CampfindMark, PoweredByCampfind } = window;

// ─── Sample data ────────────────────────────────────────────────────────
const STAYS = [
  {
    id: 's1', name: 'Woodsmoke Pitches',
    kind: 'CAMPSITE', region: 'Lake District · Borrowdale',
    distFromYou: '142 km', price: 14, unit: 'per pitch',
    rating: 4.8, reviews: 312, sleeps: 6,
    tags: ['Fire pits', 'By stream', 'Dogs OK', 'No bookings · just turn up'],
    amenities: ['firepit', 'water', 'toilet', 'dogs', 'parking'],
    photo: 0, available: true,
    about: 'A scruffy, perfect riverside campsite at the foot of Honister Pass. Wood smoke, sheep wandering through, and the kind of stars you forget exist in cities.',
  },
  {
    id: 's2', name: 'Glasdir Glamping Pods',
    kind: 'GLAMPING', region: 'Snowdonia · Dolgellau',
    distFromYou: '210 km', price: 78, unit: 'per pod',
    rating: 4.9, reviews: 188, sleeps: 4,
    tags: ['Hot tub', 'Log burner', 'EV charger', 'Linen included'],
    amenities: ['shower', 'wifi', 'parking', 'firepit'],
    photo: 1, available: true,
    about: 'Six insulated A-frame pods tucked into the woods. Hot tubs, a log burner, and a walking path that drops you onto the Mawddach trail.',
  },
  {
    id: 's3', name: 'Old Forge Bothy',
    kind: 'BOTHY', region: 'Knoydart · NW Highlands',
    distFromYou: '590 km', price: 40, unit: 'per bunk',
    rating: 5.0, reviews: 64, sleeps: 4,
    tags: ['Wood stove', 'Boat-in', 'Remote', 'Bring everything'],
    amenities: ['firepit', 'water'],
    photo: 2, available: true,
    about: 'You arrive by boat or a 17-mile walk. Once inside: bunks, a wood stove, and the deepest quiet in mainland Britain.',
  },
  {
    id: 's4', name: 'Stanage View Yurt',
    kind: 'GLAMPING', region: 'Peak District · Hathersage',
    distFromYou: '42 km', price: 110, unit: 'per night',
    rating: 4.7, reviews: 96, sleeps: 4,
    tags: ['Wood-fired hot tub', 'Sleeps 4', 'No phone signal'],
    amenities: ['firepit', 'shower', 'parking'],
    photo: 3, available: true,
    about: 'A canvas yurt with a king bed, two bunks and a wood-fired hot tub looking straight at Stanage Edge. Walk straight onto the trail.',
  },
  {
    id: 's5', name: 'Riverside Hostel',
    kind: 'HOSTEL', region: 'Brecon Beacons · Talybont',
    distFromYou: '244 km', price: 28, unit: 'per bed',
    rating: 4.6, reviews: 421, sleeps: 28,
    tags: ['Private rooms', 'Drying room', 'Bike store', 'Café'],
    amenities: ['wifi', 'kitchen', 'shower', 'parking'],
    photo: 4, available: true,
    about: 'Converted mill on the canal. Drying room for soaked gear, a café that opens at six, and quiet bunks once the day-trippers leave.',
  },
  {
    id: 's6', name: 'Honeysuckle B&B',
    kind: 'B&B', region: 'Cornwall · Boscastle',
    distFromYou: '388 km', price: 95, unit: 'per night',
    rating: 4.9, reviews: 152, sleeps: 2,
    tags: ['Cooked breakfast', 'Coastal path access', 'Cyclist-friendly'],
    amenities: ['breakfast', 'wifi', 'parking'],
    photo: 0, available: false,
    about: 'A small slate-roofed B&B run by two ex-mountain-leaders. Crab on toast for breakfast and a backyard that ends at the coast path.',
  },
];

const AMENITY_ICONS = {
  firepit: '🔥', water: '💧', toilet: 'WC', wifi: '📶', kitchen: '🍳',
  shower: '🚿', dogs: '🐾', parking: '🅿️', breakfast: '☕', ev: '⚡',
};

// ─── STAYS SEARCH SCREEN ───────────────────────────────────────────────
function StaysSearchScreen({ onBack, onOpenStay }) {
  const T = window.TOKENS;
  const [kind, setKind] = React.useState('ALL');
  const [view, setView] = React.useState('list');
  const kinds = ['ALL', 'CAMPSITE', 'GLAMPING', 'BOTHY', 'HOSTEL', 'B&B'];
  const filtered = kind === 'ALL' ? STAYS : STAYS.filter(s => s.kind === kind);

  return (
    <div style={{ background: T.bg, paddingBottom: 100, minHeight: '100%' }}>
      {/* Header */}
      <div style={{
        padding: '12px 16px 8px', display: 'flex', alignItems: 'center', gap: 10,
        position: 'sticky', top: 0, zIndex: 5,
        background: T.modeName === 'light' ? 'rgba(255,255,255,0.9)' : 'rgba(14,17,13,0.92)',
        backdropFilter: 'blur(14px)',
        borderBottom: `1px solid ${T.border}`,
      }}>
        <button onClick={onBack} style={{
          width: 38, height: 38, borderRadius: 19, padding: 0,
          background: T.card, border: `1px solid ${T.border}`,
          color: T.textHi, fontSize: 18, cursor: 'pointer',
        }}>←</button>
        <div style={{ flex: 1 }}>
          <div style={{ fontFamily: T.fontD, fontSize: 17, fontWeight: 600, color: T.textHi }}>Stays</div>
          <PoweredByCampfind />
        </div>
        <button onClick={() => setView(view === 'list' ? 'map' : 'list')} style={{
          padding: '8px 14px', borderRadius: 100,
          background: T.card, border: `1px solid ${T.borderSoft}`,
          color: T.textHi, fontFamily: T.fontB, fontSize: 12, fontWeight: 500, cursor: 'pointer',
          display: 'inline-flex', alignItems: 'center', gap: 6,
        }}>
          {view === 'list' ? '◉ Map' : '☰ List'}
        </button>
      </div>

      {/* Search row */}
      <div style={{ padding: '14px 16px 12px', display: 'flex', flexDirection: 'column', gap: 10 }}>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 10,
          background: T.card, border: `1px solid ${T.border}`,
          padding: '12px 14px', borderRadius: 100,
        }}>
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke={T.textMid} strokeWidth="1.7"><circle cx="7" cy="7" r="4.5"/><path d="M10.5 10.5 L14 14"/></svg>
          <input
            placeholder="Where to sleep?"
            defaultValue="Lake District"
            style={{
              flex: 1, border: 'none', background: 'transparent', outline: 'none',
              fontFamily: T.fontB, fontSize: 14, color: T.textHi,
            }} />
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <div style={{
            flex: 1, padding: '12px 14px',
            background: T.card, border: `1px solid ${T.border}`, borderRadius: 100,
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          }}>
            <div>
              <div style={{ fontFamily: T.fontM, fontSize: 9, color: T.textMute, letterSpacing: 1 }}>WHEN</div>
              <div style={{ fontFamily: T.fontB, fontSize: 13, color: T.textHi, marginTop: 2 }}>Fri 5 — Sun 7</div>
            </div>
            <span style={{ color: T.textMute, fontSize: 12 }}>›</span>
          </div>
          <div style={{
            padding: '12px 14px',
            background: T.card, border: `1px solid ${T.border}`, borderRadius: 100,
            display: 'flex', alignItems: 'center', gap: 6,
          }}>
            <div>
              <div style={{ fontFamily: T.fontM, fontSize: 9, color: T.textMute, letterSpacing: 1 }}>WHO</div>
              <div style={{ fontFamily: T.fontB, fontSize: 13, color: T.textHi, marginTop: 2 }}>2 adults</div>
            </div>
            <span style={{ color: T.textMute, fontSize: 12 }}>›</span>
          </div>
        </div>
      </div>

      {/* Kind chips */}
      <div style={{ overflowX: 'auto', paddingBottom: 14 }}>
        <div style={{ display: 'inline-flex', gap: 6, padding: '0 16px' }}>
          {kinds.map(k => (
            <button key={k} onClick={() => setKind(k)} style={{
              padding: '8px 14px', borderRadius: 100, cursor: 'pointer',
              fontFamily: T.fontB, fontWeight: 500, fontSize: 12,
              background: kind === k ? T.textHi : T.card,
              color: kind === k ? T.bg : T.text,
              border: `1px solid ${kind === k ? T.textHi : T.border}`,
              whiteSpace: 'nowrap',
            }}>{k}</button>
          ))}
        </div>
      </div>

      {/* Results */}
      {view === 'list' && (
        <div style={{ padding: '4px 16px', display: 'flex', flexDirection: 'column', gap: 16 }}>
          <div style={{ fontFamily: T.fontM, fontSize: 10, color: T.textMute, letterSpacing: 1.4 }}>{filtered.length} STAYS · SORTED BY DISTANCE</div>
          {filtered.map((s, i) => (
            <StayCard key={s.id} stay={s} onClick={() => onOpenStay(s)} photoTone={s.photo} />
          ))}
          <div style={{
            padding: '14px 16px',
            background: T.cardElev, border: `1px solid ${T.border}`,
            borderRadius: 14,
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          }}>
            <div>
              <div style={{ fontFamily: T.fontD, fontSize: 14, fontWeight: 600, color: T.textHi, marginBottom: 3 }}>340+ more on Campfind</div>
              <div style={{ fontFamily: T.fontB, fontSize: 12, color: T.textLo }}>Open the full catalogue with map and live availability.</div>
            </div>
            <button style={{
              padding: '10px 14px', background: T.signal, color: '#fff',
              border: 'none', borderRadius: 100,
              fontFamily: T.fontB, fontSize: 12, fontWeight: 600, cursor: 'pointer',
              whiteSpace: 'nowrap',
            }}>Open ↗</button>
          </div>
        </div>
      )}

      {view === 'map' && (
        <div style={{ padding: '4px 16px', display: 'flex', flexDirection: 'column', gap: 12 }}>
          <div style={{
            position: 'relative', borderRadius: 14, overflow: 'hidden',
            border: `1px solid ${T.border}`, height: 380,
          }}>
            <S_Map height={380}
              pins={[
                { x: 95, y: 65, label: '£', size: 14, color: T.signal },
                { x: 180, y: 110, label: '£', size: 14, color: T.signal },
                { x: 280, y: 80, label: '£', size: 14, color: T.signal },
                { x: 230, y: 165, label: '£', size: 14, color: T.signal },
                { x: 340, y: 145, label: '£', size: 14, color: T.signal },
                { x: 50, y: 175, label: '£', size: 14, color: T.signal },
              ]}
              showLabels="LAKE DISTRICT · 6 STAYS" />
            <div style={{ position: 'absolute', left: 14, bottom: 14, right: 14,
              background: T.card, border: `1px solid ${T.border}`, borderRadius: 12,
              padding: 12, display: 'flex', alignItems: 'center', gap: 12,
            }}>
              <div style={{ width: 56, height: 56, borderRadius: 8, overflow: 'hidden', flexShrink: 0 }}>
                <S_Photo caption="campsite" tone={0} height={56} />
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontFamily: T.fontD, fontSize: 14, fontWeight: 600, color: T.textHi }}>{STAYS[0].name}</div>
                <div style={{ fontFamily: T.fontB, fontSize: 12, color: T.textLo, marginTop: 2 }}>{STAYS[0].kind} · £{STAYS[0].price} {STAYS[0].unit}</div>
              </div>
              <button onClick={() => onOpenStay(STAYS[0])} style={{
                background: T.signal, color: '#fff', border: 'none',
                borderRadius: 100, padding: '8px 12px',
                fontFamily: T.fontB, fontSize: 12, fontWeight: 600, cursor: 'pointer',
              }}>View</button>
            </div>
          </div>
        </div>
      )}

      {/* Footer */}
      <div style={{
        padding: '24px 16px 16px', textAlign: 'center',
        fontFamily: T.fontB, fontSize: 11, color: T.textMute, lineHeight: 1.5,
      }}>
        Stays sourced live from <CampfindMark size={11} color={T.textLo} />. Bookings and prices managed by Campfind hosts.
      </div>
    </div>
  );
}

// ─── Stay card ─────────────────────────────────────────────────────────
function StayCard({ stay, onClick, photoTone = 0 }) {
  const T = window.TOKENS;
  const radius = T.density?.radius ?? 14;
  return (
    <div role="button" tabIndex={0} onClick={onClick} style={{
      background: T.card, border: `1px solid ${T.border}`,
      borderRadius: radius, overflow: 'hidden', cursor: 'pointer',
      display: 'flex', flexDirection: 'column',
    }}>
      <div style={{ position: 'relative', height: 200 }}>
        <S_Photo caption={stay.kind.toLowerCase()} tone={photoTone} height={200} />
        <div style={{ position: 'absolute', top: 10, left: 10, display: 'flex', gap: 6 }}>
          <S_Pill glass>{stay.kind}</S_Pill>
          {!stay.available && <S_Pill glass>FULL</S_Pill>}
        </div>
        <div style={{ position: 'absolute', top: 10, right: 10 }}>
          <S_SaveBtn />
        </div>
        <div style={{
          position: 'absolute', bottom: 10, left: 10,
          background: 'rgba(0,0,0,0.55)', backdropFilter: 'blur(10px)',
          padding: '4px 10px', borderRadius: 100,
          fontFamily: 'Space Grotesk', fontWeight: 600, fontSize: 13, color: '#fff',
        }}>
          £{stay.price} <span style={{ opacity: 0.7, fontSize: 10, fontWeight: 500 }}>{stay.unit}</span>
        </div>
      </div>
      <div style={{ padding: '14px 16px 16px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 4, gap: 12 }}>
          <div style={{ flex: 1 }}>
            <div style={{ fontFamily: T.fontD, fontSize: 16, fontWeight: 600, color: T.textHi, letterSpacing: -0.2, lineHeight: 1.2 }}>{stay.name}</div>
            <div style={{ fontFamily: T.fontB, fontSize: 12, color: T.textLo, marginTop: 3 }}>{stay.region} · {stay.distFromYou}</div>
          </div>
          <div style={{ fontFamily: T.fontM, fontSize: 11, color: T.signal, whiteSpace: 'nowrap' }}>★ {stay.rating} <span style={{ color: T.textMute }}>({stay.reviews})</span></div>
        </div>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4, marginTop: 8 }}>
          {stay.tags.slice(0, 3).map((t, i) => (
            <span key={i} style={{
              fontFamily: T.fontB, fontSize: 11, color: T.text,
              background: T.bg, border: `1px solid ${T.border}`,
              padding: '3px 8px', borderRadius: 100,
            }}>{t}</span>
          ))}
        </div>
      </div>
    </div>
  );
}

// ─── STAY DETAIL ────────────────────────────────────────────────────────
function StayDetailScreen({ stay, onBack }) {
  const T = window.TOKENS;
  const s = stay || STAYS[0];
  return (
    <div style={{ background: T.bg, paddingBottom: 130, minHeight: '100%' }}>
      {/* Hero */}
      <div style={{ position: 'relative', height: 320 }}>
        <S_Photo caption={s.kind.toLowerCase()} tone={s.photo} height={320} />
        <div style={{ position: 'absolute', inset: 0,
          background: 'linear-gradient(180deg, rgba(0,0,0,0.45) 0%, transparent 35%, transparent 60%, rgba(0,0,0,0.7) 100%)' }} />
        <button onClick={onBack} style={{
          position: 'absolute', top: 12, left: 14, width: 40, height: 40, borderRadius: 20,
          background: 'rgba(0,0,0,0.42)', backdropFilter: 'blur(10px)',
          border: '1px solid rgba(255,255,255,0.2)', color: '#fff', fontSize: 18, cursor: 'pointer',
        }}>←</button>
        <div style={{ position: 'absolute', top: 12, right: 14, display: 'flex', gap: 8 }}>
          <S_SaveBtn />
        </div>
        <div style={{ position: 'absolute', left: 0, right: 0, bottom: 12, display: 'flex', justifyContent: 'center', gap: 5 }}>
          {[0, 1, 2, 3, 4].map(i => (
            <span key={i} style={{
              width: i === 0 ? 18 : 6, height: 6, borderRadius: 3,
              background: i === 0 ? '#fff' : 'rgba(255,255,255,0.5)',
            }} />
          ))}
        </div>
        <div style={{
          position: 'absolute', left: 14, bottom: 28,
          background: 'rgba(245,138,74,0.92)', backdropFilter: 'blur(8px)',
          padding: '4px 10px', borderRadius: 100,
          display: 'inline-flex', alignItems: 'center', gap: 6,
          fontFamily: 'JetBrains Mono', fontSize: 9, color: '#fff', letterSpacing: 1.4,
        }}>
          <CampfindMark size={10} color="#fff" mono /> · LISTING
        </div>
      </div>

      {/* Title */}
      <div style={{ padding: '20px 20px 14px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 14 }}>
          <div style={{ flex: 1 }}>
            <div style={{ fontFamily: T.fontM, fontSize: 10, color: T.signal, letterSpacing: 1.6, marginBottom: 6 }}>{s.kind} · {s.sleeps} GUESTS</div>
            <div style={{ fontFamily: T.fontD, fontSize: 26, fontWeight: 600, color: T.textHi, letterSpacing: -0.5, lineHeight: 1.1 }}>{s.name}</div>
            <div style={{ fontFamily: T.fontB, fontSize: 13, color: T.textLo, marginTop: 6 }}>{s.region} · {s.distFromYou} from you</div>
          </div>
          <div style={{ textAlign: 'right' }}>
            <div style={{ fontFamily: T.fontD, fontSize: 22, fontWeight: 600, color: T.textHi, letterSpacing: -0.4 }}>£{s.price}</div>
            <div style={{ fontFamily: T.fontM, fontSize: 9, color: T.textMute, letterSpacing: 1, marginTop: 2 }}>{s.unit.toUpperCase()}</div>
          </div>
        </div>
      </div>

      {/* Rating strip */}
      <div style={{
        margin: '0 20px',
        padding: 14, background: T.card, border: `1px solid ${T.border}`, borderRadius: 14,
        display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12,
      }}>
        <div style={{ flex: 1 }}>
          <div style={{ fontFamily: T.fontD, fontSize: 18, fontWeight: 600, color: T.textHi }}>★ {s.rating}</div>
          <div style={{ fontFamily: T.fontM, fontSize: 10, color: T.textMute, letterSpacing: 1, marginTop: 2 }}>{s.reviews} VERIFIED REVIEWS</div>
        </div>
        <div style={{ width: 1, height: 30, background: T.border }} />
        <div style={{ flex: 1, textAlign: 'center' }}>
          <div style={{ fontFamily: T.fontD, fontSize: 14, fontWeight: 600, color: T.lichen }}>{s.available ? 'Available' : 'Full'}</div>
          <div style={{ fontFamily: T.fontM, fontSize: 10, color: T.textMute, letterSpacing: 1, marginTop: 2 }}>FRI 5 — SUN 7</div>
        </div>
        <div style={{ width: 1, height: 30, background: T.border }} />
        <div style={{ flex: 1, textAlign: 'right' }}>
          <div style={{ fontFamily: T.fontD, fontSize: 14, fontWeight: 600, color: T.textHi }}>{s.sleeps} guests</div>
          <div style={{ fontFamily: T.fontM, fontSize: 10, color: T.textMute, letterSpacing: 1, marginTop: 2 }}>MAX OCCUPANCY</div>
        </div>
      </div>

      {/* About */}
      <div style={{ padding: '24px 20px 0' }}>
        <div style={{ fontFamily: T.fontM, fontSize: 10, color: T.signal, letterSpacing: 1.6, marginBottom: 12 }}>§ ABOUT THIS STAY</div>
        <div style={{ fontFamily: T.fontB, fontSize: 14, color: T.text, lineHeight: 1.6 }}>{s.about}</div>
      </div>

      {/* Amenities */}
      <div style={{ padding: '24px 20px 0' }}>
        <div style={{ fontFamily: T.fontM, fontSize: 10, color: T.signal, letterSpacing: 1.6, marginBottom: 12 }}>§ WHAT'S HERE</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 10 }}>
          {s.amenities.map(a => (
            <div key={a} style={{
              display: 'flex', alignItems: 'center', gap: 10,
              padding: '10px 12px', background: T.card,
              border: `1px solid ${T.border}`, borderRadius: 10,
              fontFamily: T.fontB, fontSize: 13, color: T.text,
            }}>
              <span style={{
                width: 26, height: 26, borderRadius: 13,
                background: T.cardElev, display: 'flex',
                alignItems: 'center', justifyContent: 'center',
                fontSize: 13,
              }}>{AMENITY_ICONS[a] || '●'}</span>
              <span style={{ textTransform: 'capitalize' }}>{a}</span>
            </div>
          ))}
        </div>
      </div>

      {/* Tags */}
      <div style={{ padding: '24px 20px 0' }}>
        <div style={{ fontFamily: T.fontM, fontSize: 10, color: T.signal, letterSpacing: 1.6, marginBottom: 12 }}>§ HIGHLIGHTS</div>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
          {s.tags.map((t, i) => (
            <span key={i} style={{
              fontFamily: T.fontB, fontSize: 13, color: T.text,
              background: T.card, border: `1px solid ${T.border}`,
              padding: '6px 12px', borderRadius: 100,
            }}>{t}</span>
          ))}
        </div>
      </div>

      {/* Reviews */}
      <div style={{ padding: '24px 20px 0' }}>
        <div style={{ fontFamily: T.fontM, fontSize: 10, color: T.signal, letterSpacing: 1.6, marginBottom: 12 }}>§ FROM RECENT GUESTS</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {[
            { who: 'Lina', when: '3d', body: 'Magic spot. The hot tub at dusk with sheep on the next field — unbeatable.', rating: 5 },
            { who: 'Marco', when: '1w', body: 'Pads are warm and dry. The site owner left a flask of tea outside our door when we arrived after dark.', rating: 5 },
          ].map((r, i) => (
            <div key={i} style={{ background: T.card, border: `1px solid ${T.border}`, borderRadius: 12, padding: 14 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
                <span style={{ fontFamily: T.fontB, fontWeight: 600, fontSize: 13, color: T.textHi }}>{r.who}</span>
                <span style={{ fontFamily: T.fontM, fontSize: 11, color: T.signal }}>{'★'.repeat(r.rating)}</span>
              </div>
              <div style={{ fontFamily: T.fontB, fontSize: 13, color: T.text, lineHeight: 1.5 }}>{r.body}</div>
              <div style={{ fontFamily: T.fontM, fontSize: 10, color: T.textMute, letterSpacing: 0.8, marginTop: 6 }}>{r.when.toUpperCase()} AGO · via <CampfindMark size={9} color={T.textLo} mono /></div>
            </div>
          ))}
        </div>
      </div>

      {/* Sticky booking footer */}
      <div style={{
        position: 'absolute', left: 0, right: 0, bottom: 0,
        padding: '14px 16px 30px',
        background: T.modeName === 'light' ? 'rgba(255,255,255,0.95)' : 'rgba(14,17,13,0.96)',
        backdropFilter: 'blur(16px)',
        borderTop: `1px solid ${T.border}`,
        display: 'flex', flexDirection: 'column', gap: 10,
      }}>
        <button style={{
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
          padding: '14px', background: T.signal, color: '#fff', border: 'none',
          borderRadius: 100, fontFamily: T.fontB, fontSize: 15, fontWeight: 600, cursor: 'pointer',
        }}>
          Book on <CampfindMark size={15} color="#fff" /> <span style={{ marginLeft: 4 }}>↗</span>
        </button>
        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 12 }}>
          <PoweredByCampfind />
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { STAYS, StaysSearchScreen, StayDetailScreen, StayCard });