// Home screen + Umrah entry + Services hub
// Spec:
// - Top promo banner slider
// - Service icons grid (no search bar)
// - Recommended / Last minute / Luxury / Best price carousels
// - Large modern package cards with full-width images

// ─── Banner slide ─────────────────────────────────────────────────────
function PromoBanner({ theme, lang, variant = 'main' }) {
  const T = theme;
  const l = L[lang];
  const rtl = isRTL(lang);
  const v = {
    main:   { headline: rtl ? 'عمرة رمضان' : 'Ramadan Umrah', sub: rtl ? 'باقات تبدأ من 1,499 ر.س' : 'Packages from 1,499 SAR', tone: 'camel', tag: rtl ? 'حصري' : 'Exclusive' },
    deal:   { headline: rtl ? 'خصم 30% على الفنادق' : '30% off select hotels', sub: rtl ? 'لفترة محدودة' : 'Limited time', tone: 'dark', tag: rtl ? 'صفقة' : 'Deal' },
    luxury: { headline: rtl ? 'إقامة فاخرة قرب الحرم' : 'Luxury stays near the Haram', sub: rtl ? '5 نجوم — موقع متميز' : '5★ • Prime location', tone: 'brown', tag: rtl ? 'فاخر' : 'Luxury' },
  }[variant];

  return (
    <div style={{
      position: 'relative', height: 168, borderRadius: 22, overflow: 'hidden',
      background: v.tone === 'camel'
        ? `linear-gradient(135deg, ${T.camel} 0%, ${T.camelDeep} 100%)`
        : v.tone === 'dark'
        ? `linear-gradient(135deg, ${T.ink} 0%, ${T.inkSoft} 100%)`
        : `linear-gradient(135deg, ${T.pastelBrown} 0%, ${T.camelDeep} 100%)`,
      color: '#fff',
    }}>
      <div style={{ position: 'absolute', inset: 0, opacity: 0.16 }}>
        <DuyufPattern color="#fff" opacity={0.4} size={60}/>
      </div>
      <PetalAccent size={180} color="#fff" opacity={0.10} rotate={20} style={{ position: 'absolute', right: -40, top: -50 }}/>
      <PetalAccent size={120} color="#fff" opacity={0.08} rotate={-30} style={{ position: 'absolute', right: 40, bottom: -50 }}/>
      <div style={{ position: 'relative', padding: 20, height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
        <Badge tone="ink" theme={T} style={{ background: 'rgba(255,255,255,0.18)', color: '#fff', backdropFilter: 'blur(8px)', alignSelf: 'flex-start' }}>{v.tag}</Badge>
        <div>
          <div style={{ fontFamily: 'Alexandria', fontWeight: 700, fontSize: 22, letterSpacing: '-0.01em', lineHeight: 1.15 }}>{v.headline}</div>
          <div style={{ fontFamily: 'Alexandria', fontSize: 13, opacity: 0.85, marginTop: 4 }}>{v.sub}</div>
        </div>
      </div>
    </div>
  );
}

// ─── Service icon ─────────────────────────────────────────────────────
function ServiceIcon({ icon, label, theme, accent }) {
  const T = theme;
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
      <div style={{
        width: 56, height: 56, borderRadius: 18,
        background: accent || T.camelMist,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        border: `1px solid ${T.hairline}`,
      }}>
        <Icon name={icon} size={26} color={T.primary} strokeWidth={1.6}/>
      </div>
      <span style={{ fontFamily: 'Alexandria', fontSize: 11.5, fontWeight: 500, color: T.text, textAlign: 'center' }}>{label}</span>
    </div>
  );
}

// ─── Package card (small horizontal carousel item) ────────────────────
function PackageCard({ theme, lang, title, hotel, dates, nights, transport, price, seats, tag, tone = 'camel', width = 260, provider = 'Al-Rahma Packages' }) {
  const T = theme;
  const l = L[lang];
  return (
    <div style={{
      width, flex: '0 0 auto',
      background: T.surface, borderRadius: 20,
      border: `1px solid ${T.hairline}`,
      boxShadow: T.cardShadow,
      overflow: 'hidden',
    }}>
      <div style={{ position: 'relative' }}>
        <ImgSlot theme={T} tone={tone} height={148} radius={0} label={title}/>
        {tag && (
          <div style={{ position: 'absolute', top: 10, insetInlineStart: 10 }}>
            <Badge tone="ink" theme={T} style={{ background: 'rgba(31,27,23,0.78)', color: '#fff', backdropFilter: 'blur(6px)' }}>{tag}</Badge>
          </div>
        )}
        <button style={{
          position: 'absolute', top: 10, insetInlineEnd: 10,
          width: 32, height: 32, borderRadius: 999, background: 'rgba(255,255,255,0.9)',
          border: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', backdropFilter: 'blur(6px)',
        }}>
          <Icon name="heart" size={16} color={T.ink}/>
        </button>
        {/* Provider chip pinned to image */}
        <div style={{
          position: 'absolute', bottom: 8, insetInlineStart: 8,
          background: 'rgba(255,255,255,0.92)', backdropFilter: 'blur(6px)',
          borderRadius: 99, padding: '4px 8px 4px 4px',
        }}>
          <ProviderBadge theme={T} name={provider} size="xs"/>
        </div>
      </div>
      <div style={{ padding: 14 }}>
        <div style={{ fontFamily: 'Alexandria', fontWeight: 600, fontSize: 14, color: T.text, marginBottom: 2, lineHeight: 1.25, textWrap: 'pretty' }}>{hotel}</div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 4, marginBottom: 8 }}>
          <Stars value={4} size={11}/>
          <span style={{ fontSize: 11, color: T.textMuted, fontFamily: 'Alexandria' }}>4.6</span>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 11.5, color: T.textMuted, marginBottom: 4 }}>
          <Icon name="calendar" size={12} color={T.textMuted}/>
          <span style={{ fontFamily: 'Alexandria' }}>{dates}</span>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 11.5, color: T.textMuted, marginBottom: 10 }}>
          <Icon name={transport === 'bus' ? 'bus' : 'plane'} size={12} color={T.textMuted}/>
          <span style={{ fontFamily: 'Alexandria' }}>{nights} {l.nights} · {transport === 'bus' ? l.umrahBus : l.umrahFlight}</span>
        </div>
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', borderTop: `1px dashed ${T.hairline}`, paddingTop: 10 }}>
          <div>
            <div style={{ fontSize: 10, color: T.textFaint, fontFamily: 'Alexandria' }}>{l.from2}</div>
            <div style={{ fontFamily: 'Alexandria', fontWeight: 700, fontSize: 18, color: T.text, letterSpacing: '-0.01em' }}>
              {price.toLocaleString()} <span style={{ fontSize: 11, fontWeight: 500, color: T.textMuted }}>{l.sar}</span>
            </div>
          </div>
          <span style={{ fontSize: 10.5, color: T.danger, fontFamily: 'Alexandria', fontWeight: 600 }}>
            {seats} {l.seats}
          </span>
        </div>
      </div>
    </div>
  );
}

// ─── Large package card (full-width hero) ─────────────────────────────
function HeroPackageCard({ theme, lang, hotel, dates, nights, transport, price, seats, countdown, tone = 'dark', provider = 'Al-Rahma Packages' }) {
  const T = theme;
  const l = L[lang];
  const rtl = isRTL(lang);
  return (
    <div style={{
      background: T.surface, borderRadius: 22, overflow: 'hidden',
      border: `1px solid ${T.hairline}`, boxShadow: T.cardShadow,
    }}>
      <div style={{ position: 'relative' }}>
        <ImgSlot theme={T} tone={tone} height={170} radius={0} label={rtl ? 'صورة الفندق / الحرم' : 'hotel · haram view'}/>
        <div style={{ position: 'absolute', top: 12, insetInlineStart: 12, display: 'flex', gap: 6 }}>
          <Badge tone="ink" theme={T} style={{ background: 'rgba(31,27,23,0.78)', color: '#fff', backdropFilter: 'blur(6px)' }}>
            <Icon name="pin" size={10} color="#fff"/> {rtl ? 'قرب الحرم' : 'Near Haram'}
          </Badge>
          <Badge tone="camel" theme={T} style={{ background: T.camel, color: '#fff' }}>{rtl ? '5 نجوم' : '5★'}</Badge>
        </div>
        <div style={{ position: 'absolute', bottom: 12, insetInlineEnd: 12 }}>
          <div style={{
            background: 'rgba(255,255,255,0.95)', backdropFilter: 'blur(8px)',
            borderRadius: 10, padding: '6px 10px',
            display: 'flex', alignItems: 'center', gap: 6,
          }}>
            <Icon name="bell" size={12} color={T.danger}/>
            <span style={{ fontFamily: 'ui-monospace, monospace', fontSize: 12, fontWeight: 700, color: T.danger }}>
              02:14:38
            </span>
          </div>
        </div>
      </div>
      <div style={{ padding: 16 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 10 }}>
          <div style={{ flex: 1, minWidth: 0 }}>
            <ProviderBadge theme={T} name={provider} size="sm" style={{ marginBottom: 6 }}/>
            <div style={{ fontFamily: 'Alexandria', fontWeight: 700, fontSize: 17, color: T.text, lineHeight: 1.2, letterSpacing: '-0.01em' }}>{hotel}</div>
            <div style={{ marginTop: 4, display: 'flex', alignItems: 'center', gap: 6, color: T.textMuted, fontSize: 12 }}>
              <Stars value={5} size={11}/>
              <span style={{ fontFamily: 'Alexandria' }}>4.8 · {rtl ? '320 تقييم' : '320 reviews'}</span>
            </div>
          </div>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 0,
          marginTop: 12, background: T.surfaceAlt, borderRadius: 12, padding: '10px 0',
        }}>
          {[
            { icon: 'calendar', t: dates },
            { icon: 'bed', t: `${nights} ${l.nights}` },
            { icon: transport === 'bus' ? 'bus' : 'plane', t: transport === 'bus' ? l.umrahBus : l.umrahFlight },
          ].map((m, i) => (
            <div key={i} style={{
              display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4,
              borderInlineEnd: i < 2 ? `1px solid ${T.hairline}` : 'none',
              fontSize: 11, fontFamily: 'Alexandria', color: T.text,
            }}>
              <Icon name={m.icon} size={14} color={T.primary}/>
              <span style={{ fontWeight: 500 }}>{m.t}</span>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 14, display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between' }}>
          <div>
            <div style={{ fontSize: 10.5, color: T.textFaint, fontFamily: 'Alexandria' }}>{l.from2}</div>
            <div style={{ fontFamily: 'Alexandria', fontWeight: 700, fontSize: 22, color: T.text, letterSpacing: '-0.01em' }}>
              {price.toLocaleString()} <span style={{ fontSize: 12, fontWeight: 500, color: T.textMuted }}>{l.sar} {l.perPerson}</span>
            </div>
            <div style={{ fontSize: 11, color: T.danger, fontFamily: 'Alexandria', fontWeight: 600, marginTop: 2 }}>
              {seats} {rtl ? 'مقاعد متبقية' : 'seats remaining'}
            </div>
          </div>
          <Button kind="primary" size="md" theme={T}>{l.book}</Button>
        </div>
      </div>
    </div>
  );
}

// ─── HOME screen ──────────────────────────────────────────────────────
function HomeScreen({ theme, lang }) {
  const T = theme;
  const l = L[lang];
  const rtl = isRTL(lang);
  const nav = useNav();

  const serviceRoute = {
    umrah: 'umrah', fl: 'flights', ht: 'hotels', tr: 'transport',
  };

  const services = [
    { id: 'umrah', icon: 'kaaba', label: rtl ? 'العمرة' : 'Umrah' },
    { id: 'fl', icon: 'plane', label: l.flights },
    { id: 'ht', icon: 'bed', label: l.hotels },
    { id: 'tr', icon: 'car', label: l.transport },
  ];

  const recommended = [
    { hotel: rtl ? 'فندق رويال داركم' : 'Royal Dar Al Madinah', dates: rtl ? '14–24 رمضان' : '14–24 Ramadan', nights: 10, transport: 'flight', price: 2899, seats: 6, tag: rtl ? 'موصى به' : 'Top pick', tone: 'camel', provider: rtl ? 'الرحمة للحج' : 'Al-Rahma' },
    { hotel: rtl ? 'انتركونتيننتال مكة' : 'InterContinental Makkah', dates: rtl ? '1–8 شوال' : '1–8 Shawwal', nights: 7, transport: 'flight', price: 3450, seats: 12, tone: 'brown', provider: rtl ? 'إيلاف ضيوف' : 'Elaf Guests' },
    { hotel: rtl ? 'فندق ميلينيوم' : 'Millennium Makkah', dates: rtl ? '20 رمضان' : '20 Ramadan', nights: 14, transport: 'bus', price: 1899, seats: 3, tag: rtl ? 'حصري' : 'Exclusive', tone: 'dark', provider: rtl ? 'دار البركة' : 'Dar Albaraka' },
  ];

  return (
    <PhoneFrame theme={T} dir={rtl ? 'rtl' : 'ltr'}>
      {/* Header */}
      <div style={{
        position: 'absolute', top: 0, left: 0, right: 0, height: 116, zIndex: 4,
        padding: '54px 20px 0', background: T.bg,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <div>
            <div style={{ fontFamily: 'Alexandria', fontSize: 12, color: T.textMuted }}>{rtl ? 'السلام عليكم،' : 'Assalamu alaikum,'}</div>
            <div style={{ fontFamily: 'Alexandria', fontWeight: 700, fontSize: 17, color: T.text, marginTop: 2, letterSpacing: '-0.01em' }}>{rtl ? 'محمد الفهد' : 'Mohammed AlFahd'}</div>
          </div>
          <div style={{ display: 'flex', gap: 8 }}>
            <button onClick={() => nav?.nav('notifs')} style={{ width: 40, height: 40, borderRadius: 999, background: T.surface, border: `1px solid ${T.hairline}`, display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative', cursor: 'pointer' }}>
              <Icon name="bell" size={18} color={T.text}/>
              <div style={{ position: 'absolute', top: 9, right: 10, width: 7, height: 7, borderRadius: 999, background: T.primary, border: `2px solid ${T.surface}`}}/>
            </button>
          </div>
        </div>
      </div>

      <div style={{ position: 'absolute', inset: 0, paddingTop: 116, paddingBottom: 90, overflow: 'auto' }}>
        {/* Banner carousel */}
        <div style={{
          display: 'flex', gap: 12, padding: '6px 20px 4px',
          overflowX: 'auto', scrollSnapType: 'x mandatory',
        }}>
          <div style={{ minWidth: '88%', scrollSnapAlign: 'start' }}><PromoBanner theme={T} lang={lang} variant="main"/></div>
          <div style={{ minWidth: '88%', scrollSnapAlign: 'start' }}><PromoBanner theme={T} lang={lang} variant="deal"/></div>
        </div>
        {/* Banner dots */}
        <div style={{ display: 'flex', justifyContent: 'center', gap: 5, padding: '8px 0 4px' }}>
          <div style={{ width: 18, height: 5, borderRadius: 99, background: T.primary }}/>
          <div style={{ width: 5, height: 5, borderRadius: 99, background: T.hairlineStrong }}/>
          <div style={{ width: 5, height: 5, borderRadius: 99, background: T.hairlineStrong }}/>
        </div>

        {/* Services grid */}
        <div style={{ padding: '10px 16px 4px' }}>
          <Card theme={T} padding={14} radius={20}>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8 }}>
              {services.map(s => (
                <div key={s.id} onClick={() => nav?.nav(serviceRoute[s.id])} style={{ cursor: 'pointer' }}>
                  <ServiceIcon {...s} theme={T}/>
                </div>
              ))}
            </div>
          </Card>
        </div>

        {/* Recommended */}
        <SectionHead title={l.forYou} action={l.seeAll} theme={T}/>
        <div style={{ display: 'flex', gap: 12, padding: '0 20px 6px', overflowX: 'auto' }}>
          {recommended.map((p, i) => (
            <div key={i} onClick={() => nav?.nav('detail')} style={{ cursor: 'pointer' }}>
              <PackageCard {...p} theme={T} lang={lang}/>
            </div>
          ))}
        </div>

        {/* Last minute */}
        <SectionHead title={rtl ? 'عروض اللحظة الأخيرة' : 'Last minute deals'} action={l.seeAll} theme={T}/>
        <div style={{ padding: '0 16px', cursor: 'pointer' }} onClick={() => nav?.nav('detail')}>
          <HeroPackageCard theme={T} lang={lang}
            hotel={rtl ? 'سويس أوتيل مكة — برج الزمزم' : 'Swissôtel Makkah — Zamzam Tower'}
            dates={rtl ? '12 شوال' : '12 Shawwal'} nights={5} transport="flight"
            price={1799} seats={2} tone="dark"
            provider={rtl ? 'دار الراحة' : 'Dar Al-Raha'}/>
        </div>

        {/* Luxury */}
        <SectionHead title={rtl ? 'باقات فاخرة' : 'Luxury packages'} action={l.seeAll} theme={T}/>
        <div style={{ display: 'flex', gap: 12, padding: '0 20px 6px', overflowX: 'auto' }}>
          <PackageCard theme={T} lang={lang}
            hotel={rtl ? 'فيرمونت ساعة مكة' : 'Fairmont Makkah Clock Tower'}
            dates={rtl ? '5–12 شوال' : '5–12 Shawwal'}
            nights={7} transport="flight" price={6499} seats={4}
            tag={rtl ? 'فاخر' : 'Luxury'} tone="dark"
            provider={rtl ? 'الإيلاف الفاخرة' : 'Elaf Premium'}/>
          <PackageCard theme={T} lang={lang}
            hotel={rtl ? 'موڤنبيك حجاج' : 'Mövenpick Hajar'}
            dates={rtl ? '20 شوال' : '20 Shawwal'}
            nights={10} transport="flight" price={5290} seats={7}
            tone="brown"
            provider={rtl ? 'بوابة الكعبة' : 'Kaaba Gate'}/>
        </div>

        {/* Best price */}
        <SectionHead title={rtl ? 'الأفضل سعراً' : 'Best price'} action={l.seeAll} theme={T}/>
        <div style={{ display: 'flex', gap: 12, padding: '0 20px 20px', overflowX: 'auto' }}>
          <PackageCard theme={T} lang={lang}
            hotel={rtl ? 'الصفوة رويال أوركيد' : 'Al Safwah Royal Orchid'}
            dates={rtl ? '8 ذو القعدة' : '8 Dhul Qadah'}
            nights={6} transport="bus" price={1199} seats={9}
            tag={rtl ? 'أرخص' : 'Cheapest'} tone="cream"
            provider={rtl ? 'حجاج الجزيرة' : 'Hujjaj Aljazeera'}/>
          <PackageCard theme={T} lang={lang}
            hotel={rtl ? 'إيلاف مشاعل' : 'Elaf Mashaer'}
            dates={rtl ? '15 ذو القعدة' : '15 Dhul Qadah'}
            nights={5} transport="bus" price={999} seats={11}
            tone="camel"
            provider={rtl ? 'نسائم الرحمن' : 'Nasaim Al-Rahman'}/>
        </div>
      </div>

      <BottomTabs active="home" theme={T} lang={lang} onSelect={(id) => nav?.nav(id === 'trips' ? 'bookings' : id === 'me' ? 'profile' : 'home')}/>
    </PhoneFrame>
  );
}

// ─── Umrah entry — two big cards ──────────────────────────────────────
function UmrahEntryScreen({ theme, lang }) {
  const T = theme;
  const l = L[lang];
  const rtl = isRTL(lang);
  const nav = useNav();
  return (
    <PhoneFrame theme={T} dir={rtl ? 'rtl' : 'ltr'}>
      <div style={{ padding: '60px 20px 0', height: '100%', display: 'flex', flexDirection: 'column', paddingBottom: 80 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 18 }}>
          <button onClick={() => nav?.back()} style={{ width: 40, height: 40, borderRadius: 12, background: T.surfaceAlt, border: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer' }}>
            <Icon name={rtl ? 'arrow-r' : 'arrow-l'} size={18} color={T.text}/>
          </button>
          <h1 style={{ margin: 0, fontFamily: 'Alexandria', fontWeight: 700, fontSize: 22, color: T.text, letterSpacing: '-0.01em' }}>
            {rtl ? 'العمرة' : 'Umrah'}
          </h1>
        </div>

        <p style={{ margin: '0 0 18px', fontFamily: 'Alexandria', fontSize: 14, color: T.textMuted, lineHeight: 1.5 }}>
          {rtl ? 'اختر طريقة السفر المفضّلة لديك' : 'Choose your preferred way to travel'}
        </p>

        {/* By Flight */}
        <div onClick={() => nav?.nav('city', { mode: 'flight' })} style={{ marginBottom: 14, borderRadius: 22, overflow: 'hidden', border: `1px solid ${T.hairline}`, boxShadow: T.cardShadow, background: T.surface, cursor: 'pointer' }}>
          <div style={{ position: 'relative', height: 150 }}>
            <ImgSlot theme={T} tone="dark" height={150} radius={0} label={rtl ? 'صورة طائرة' : 'Aircraft'}/>
            <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, transparent 0%, rgba(31,27,23,0.7) 100%)' }}/>
            <div style={{ position: 'absolute', bottom: 12, insetInlineStart: 16, color: '#fff' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
                <Icon name="plane" size={20} color="#fff"/>
                <span style={{ fontFamily: 'Alexandria', fontSize: 11, fontWeight: 500, opacity: 0.8, letterSpacing: '0.1em', textTransform: 'uppercase' }}>{rtl ? 'الأسرع' : 'Fastest'}</span>
              </div>
              <h2 style={{ margin: 0, fontFamily: 'Alexandria', fontWeight: 700, fontSize: 22, letterSpacing: '-0.01em' }}>{l.umrahFlight}</h2>
            </div>
          </div>
          <div style={{ padding: '14px 16px' }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <span style={{ fontFamily: 'Alexandria', fontSize: 13, color: T.textMuted }}>{rtl ? '24 وجهة · من 1,799 ر.س' : '24 cities · from 1,799 SAR'}</span>
              <Icon name={rtl ? 'arrow-l' : 'arrow-r'} size={18} color={T.primary}/>
            </div>
          </div>
        </div>

        {/* By Bus */}
        <div onClick={() => nav?.nav('bus-route', { mode: 'bus' })} style={{ borderRadius: 22, overflow: 'hidden', border: `1px solid ${T.hairline}`, boxShadow: T.cardShadow, background: T.surface, cursor: 'pointer' }}>
          <div style={{ position: 'relative', height: 150 }}>
            <ImgSlot theme={T} tone="brown" height={150} radius={0} label={rtl ? 'صورة حافلة' : 'Coach'}/>
            <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, transparent 0%, rgba(127,109,95,0.85) 100%)' }}/>
            <div style={{ position: 'absolute', bottom: 12, insetInlineStart: 16, color: '#fff' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
                <Icon name="bus" size={22} color="#fff"/>
                <span style={{ fontFamily: 'Alexandria', fontSize: 11, fontWeight: 500, opacity: 0.85, letterSpacing: '0.1em', textTransform: 'uppercase' }}>{rtl ? 'الأوفر' : 'Best value'}</span>
              </div>
              <h2 style={{ margin: 0, fontFamily: 'Alexandria', fontWeight: 700, fontSize: 22, letterSpacing: '-0.01em' }}>{l.umrahBus}</h2>
            </div>
          </div>
          <div style={{ padding: '14px 16px' }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <span style={{ fontFamily: 'Alexandria', fontSize: 13, color: T.textMuted }}>{rtl ? 'عادي وفاخر · من 999 ر.س' : 'Regular & luxury · from 999 SAR'}</span>
              <Icon name={rtl ? 'arrow-l' : 'arrow-r'} size={18} color={T.primary}/>
            </div>
          </div>
        </div>

        <div style={{ marginTop: 'auto', padding: '14px 4px', display: 'flex', alignItems: 'center', gap: 10, fontSize: 12, color: T.textMuted, fontFamily: 'Alexandria' }}>
          <Icon name="shield" size={16} color={T.success}/>
          <span>{rtl ? 'كل الباقات من مزوّدين موثوقين' : 'All packages from verified providers'}</span>
        </div>
      </div>
      <BottomTabs active="home" theme={T} lang={lang} onSelect={(id) => nav?.nav(id === 'trips' ? 'bookings' : id === 'me' ? 'profile' : 'home')}/>
    </PhoneFrame>
  );
}

Object.assign(window, { PromoBanner, ServiceIcon, PackageCard, HeroPackageCard, HomeScreen, UmrahEntryScreen });