// Duyuf marketing + browse website (desktop / responsive)
// Headless web entry to the marketplace — hero search, featured
// packages, top providers, how-it-works, become-a-provider CTA, footer.

function WebNav({ theme, lang, onLanguageChange, dark, onThemeChange }) {
  const T = theme;
  const rtl = isRTL(lang);
  const ctx = useWeb();
  const [menuOpen, setMenuOpen] = React.useState(false);
  const isProvider = Boolean(localStorage.getItem('duyuf_provider_session'));
  const visitorItems = [
    { id: 'home',     ar: 'الرئيسية',   en: 'Home' },
    { id: 'browse',   ar: 'العمرة',     en: 'Umrah' },
    { id: 'browse',   ar: 'الفنادق',    en: 'Hotels' },
    { id: 'browse',   ar: 'الطيران',    en: 'Flights' },
    { id: 'browse',   ar: 'المواصلات',  en: 'Transport' },
    { id: 'contact',  ar: 'تواصل',      en: 'Contact' },
  ];
  const providerItems = [
    { id: 'provider-dashboard', ar: 'لوحة التحكم', en: 'Dashboard' },
    { id: 'provider-dashboard', ar: 'إدارة الباقات', en: 'Manage packages' },
    { id: 'provider-add-package', ar: 'إضافة باقة', en: 'Add package' },
    { id: 'provider-dashboard', ar: 'الملف التجاري', en: 'Business profile' },
  ];
  const items = isProvider ? providerItems : visitorItems;
  const navigate = (page) => {
    ctx?.setPage(page);
    setMenuOpen(false);
  };
  const logout = async () => {
    try { await firebase.auth().signOut(); } catch (_) {}
    localStorage.removeItem('duyuf_provider_session');
    localStorage.removeItem('duyuf_provider');
    setMenuOpen(false);
    ctx?.setPage('home');
  };
  return (
    <>
      <div className="web-nav" style={{
        height: 68, padding: '0 32px', display: 'flex', alignItems: 'center', gap: 24,
        background: T.surface, borderBottom: `1px solid ${T.hairline}`,
        position: 'sticky', top: 0, zIndex: 10,
      }}>
        <a onClick={() => navigate(isProvider ? 'provider-dashboard' : 'home')} style={{ cursor: 'pointer' }}>
          <DuyufWordmark height={26} color={T.text} lang={lang}/>
        </a>
        <nav className="web-nav-links" style={{ display: 'flex', gap: 4, marginInlineStart: 14, flex: 1 }}>
          {items.map((it, i) => {
            const isActive = (ctx?.page || 'home') === it.id && i === 0;
            return (
              <a key={i} onClick={() => navigate(it.id)} style={{
                padding: '8px 14px', borderRadius: 8,
                fontFamily: 'Alexandria', fontSize: 13, fontWeight: isActive ? 600 : 500,
                color: isActive ? T.primary : T.text,
                textDecoration: 'none', cursor: 'pointer',
                background: isActive ? T.camelMist : 'transparent',
              }}>{rtl ? it.ar : it.en}</a>
            );
          })}
        </nav>
        <div className="web-nav-actions" style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '7px 12px', background: T.bg, borderRadius: 99, border: `1px solid ${T.hairline}` }}>
          <Icon name="globe" size={14} color={T.text}/>
          <span style={{ fontFamily: 'Alexandria', fontSize: 12, fontWeight: 600, color: T.text }}>
            {lang === 'ar' ? 'العربية' : lang === 'ur' ? 'اردو' : 'EN'}
          </span>
          <Icon name="arrow-down" size={11} color={T.textMuted}/>
        </div>
        <button onClick={() => isProvider ? navigate('provider-dashboard') : navigate('signin')} style={{
          padding: '8px 14px', background: 'transparent', border: 0,
          fontFamily: 'Alexandria', fontWeight: 600, fontSize: 13, color: T.text, cursor: 'pointer',
        }}>{isProvider ? (rtl ? 'لوحة التحكم' : 'Dashboard') : (rtl ? 'دخول' : 'Sign in')}</button>
        {!isProvider && <button onClick={() => navigate('become-provider')} style={{
          padding: '9px 18px', background: T.ink, color: T.cream, border: 0, borderRadius: 10,
          fontFamily: 'Alexandria', fontWeight: 600, fontSize: 13, cursor: 'pointer',
        }}>{rtl ? 'انضم كمزوّد' : 'Become a provider'}</button>}
          <button className="mobile-menu-button" aria-label={rtl ? 'فتح القائمة' : 'Open menu'} aria-expanded={menuOpen} onClick={() => setMenuOpen(true)} style={{ color: T.text, borderColor: T.hairline }}>
            <span></span><span></span><span></span>
          </button>
        </div>
      </div>
      {menuOpen && <button className="mobile-menu-backdrop" aria-label={rtl ? 'إغلاق القائمة' : 'Close menu'} onClick={() => setMenuOpen(false)}/>} 
      <aside className={`mobile-menu ${menuOpen ? 'is-open' : ''}`} aria-hidden={!menuOpen} style={{ background: T.surface, color: T.text }}>
        <div className="mobile-menu-header" style={{ borderBottomColor: T.hairline }}>
          <DuyufWordmark height={26} color={T.text} lang={lang}/>
          <button aria-label={rtl ? 'إغلاق القائمة' : 'Close menu'} onClick={() => setMenuOpen(false)} style={{ color: T.text, background: T.bg }}>×</button>
        </div>
        <nav className="mobile-menu-links">
          {items.map((it, i) => (
            <button key={`${it.id}-${i}`} onClick={() => navigate(it.id)} style={{ color: T.text, borderBottomColor: T.hairline }}>
              <span>{rtl ? it.ar : it.en}</span><span aria-hidden="true">←</span>
            </button>
          ))}
          {!isProvider && <button className="mobile-provider-link" onClick={() => navigate('become-provider')} style={{ color: T.cream, background: T.ink, borderBottomColor: T.ink }}>
            <span>{rtl ? 'انضم كمزوّد' : 'Become a provider'}</span><span aria-hidden="true">←</span>
          </button>}
        </nav>
        <div className="mobile-menu-footer">
          <div className="mobile-menu-setting">
            <div className="mobile-menu-setting-label">{rtl ? 'اللغة' : 'Language'}</div>
            <div className="mobile-menu-segment" style={{ background: T.bg }}>
              <button className={lang === 'ar' ? 'active' : ''} onClick={() => onLanguageChange?.('ar')} style={lang === 'ar' ? { background: T.primary, color: '#fff' } : { color: T.text }}>عربي</button>
              <button className={lang === 'en' ? 'active' : ''} onClick={() => onLanguageChange?.('en')} style={lang === 'en' ? { background: T.primary, color: '#fff' } : { color: T.text }}>EN</button>
              <button className={lang === 'ur' ? 'active' : ''} onClick={() => onLanguageChange?.('ur')} style={lang === 'ur' ? { background: T.primary, color: '#fff' } : { color: T.text }}>اردو</button>
            </div>
          </div>
          <div className="mobile-menu-setting">
            <div className="mobile-menu-setting-label">{rtl ? 'المظهر' : 'Appearance'}</div>
            <div className="mobile-menu-segment" style={{ background: T.bg }}>
              <button className={!dark ? 'active' : ''} onClick={() => onThemeChange?.(false)} style={!dark ? { background: T.primary, color: '#fff' } : { color: T.text }}>{rtl ? '☀ نهاري' : '☀ Light'}</button>
              <button className={dark ? 'active' : ''} onClick={() => onThemeChange?.(true)} style={dark ? { background: T.primary, color: '#fff' } : { color: T.text }}>{rtl ? '☾ ليلي' : '☾ Dark'}</button>
            </div>
          </div>
          <button onClick={isProvider ? logout : () => navigate('signin')} style={{ background: T.bg, color: T.text, borderColor: T.hairline }}>{isProvider ? (rtl ? 'تسجيل الخروج' : 'Sign out') : (rtl ? 'تسجيل الدخول' : 'Sign in')}</button>
        </div>
      </aside>
    </>
  );
}

function WebHero({ theme, lang }) {
  const T = theme;
  const rtl = isRTL(lang);
  const ctx = useWeb();
  return (
    <div className="web-hero" style={{
      position: 'relative', padding: '64px 32px 80px', overflow: 'hidden',
      background: `linear-gradient(135deg, ${T.camel} 0%, ${T.camelDeep} 50%, ${T.pastelBrown} 100%)`,
      color: '#fff',
    }}>
      <div style={{ position: 'absolute', inset: 0, opacity: 0.12 }}>
        <DuyufPattern color="#fff" opacity={0.4} size={72}/>
      </div>
      <PetalAccent size={420} color="#fff" opacity={0.07} rotate={20} style={{ position: 'absolute', right: -120, top: -120 }}/>
      <PetalAccent size={260} color="#fff" opacity={0.05} rotate={-15} style={{ position: 'absolute', right: 200, bottom: -100 }}/>

      <div style={{ position: 'relative', maxWidth: 1100, margin: '0 auto' }}>
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 7,
          padding: '6px 14px', borderRadius: 99,
          background: 'rgba(255,255,255,0.16)', backdropFilter: 'blur(8px)',
          border: '1px solid rgba(255,255,255,0.22)',
        }}>
          <Icon name="shield" size={13} color="#fff"/>
          <span style={{ fontFamily: 'Alexandria', fontSize: 11.5, fontWeight: 600, letterSpacing: '0.06em', textTransform: 'uppercase' }}>
            {rtl ? 'مزوّدون معتمدون · حماية كاملة' : 'Verified providers · Protected booking'}
          </span>
        </div>
        <h1 className="web-hero-title" style={{
          margin: '18px 0 12px', fontFamily: 'Alexandria', fontWeight: 700, fontSize: 56,
          lineHeight: 1.05, letterSpacing: '-0.02em', maxWidth: 760, textWrap: 'pretty',
        }}>
          {rtl ? 'رحلتك إلى بيت الله، في خطوات ميسّرة.' : 'Your journey to the holy sites, made simple.'}
        </h1>
        <p style={{ margin: 0, fontFamily: 'Alexandria', fontSize: 16, opacity: 0.85, maxWidth: 580, lineHeight: 1.55 }}>
          {rtl
            ? 'باقات عمرة كاملة، فنادق قرب الحرم، طيران ومواصلات — من أكثر من 68 مزوّداً موثوقاً.'
            : 'Complete Umrah packages, stays near the Haram, flights and transport — from 68+ verified providers.'}
        </p>

        {/* Unified search bar (no service-tab strip — icons live in the homepage already) */}
        <div className="web-search" style={{
          marginTop: 36, background: T.surface,
          borderRadius: 20, boxShadow: '0 20px 60px rgba(31,27,23,0.25)',
          color: T.text, overflow: 'hidden',
        }}>
          <div className="web-search-grid" style={{ display: 'grid', gridTemplateColumns: '1.2fr 1.2fr 1fr 0.8fr', alignItems: 'stretch' }}>
            {[
              { l: rtl ? 'من' : 'From', v: rtl ? 'جدة' : 'Jeddah', sub: 'JED', i: 'plane' },
              { l: rtl ? 'إلى' : 'To',  v: rtl ? 'مكة المكرمة' : 'Makkah', sub: rtl ? 'العزيزية' : 'Al Aziziyah', i: 'kaaba' },
              { l: rtl ? 'الموعد' : 'Departure', v: '16 Ramadan', sub: rtl ? '10 أيام' : '10 days', i: 'calendar' },
              { l: rtl ? 'مسافرون' : 'Travelers', v: rtl ? '3 بالغين' : '3 adults', sub: '', i: 'user' },
            ].map((f, i, a) => (
              <div className="web-search-field" key={i} style={{
                padding: '20px 22px',
                borderInlineEnd: i < a.length - 1 ? `1px solid ${T.hairline}` : 'none',
              }}>
                <div style={{ fontFamily: 'Alexandria', fontSize: 10.5, fontWeight: 600, color: T.textMuted, letterSpacing: '0.06em', textTransform: 'uppercase' }}>{f.l}</div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 4 }}>
                  <Icon name={f.i} size={16} color={T.primary}/>
                  <div>
                    <div style={{ fontFamily: 'Alexandria', fontWeight: 700, fontSize: 16, color: T.text, letterSpacing: '-0.005em' }}>{f.v}</div>
                    {f.sub && <div style={{ fontFamily: 'Alexandria', fontSize: 11, color: T.textMuted }}>{f.sub}</div>}
                  </div>
                </div>
              </div>
            ))}
          </div>
          <div className="web-search-submit" style={{ padding: '0 18px 18px', display: 'flex', justifyContent: 'flex-end' }}>
            <button onClick={() => ctx?.setPage('browse')} style={{
              padding: '14px 28px', borderRadius: 12, border: 0,
              background: T.primary, color: '#fff',
              fontFamily: 'Alexandria', fontWeight: 700, fontSize: 14,
              display: 'flex', alignItems: 'center', gap: 8, cursor: 'pointer',
              boxShadow: '0 8px 20px rgba(193,152,114,0.35)',
            }}>
              <Icon name="search" size={16} color="#fff"/>
              {rtl ? 'ابحث عن باقات' : 'Search packages'}
            </button>
          </div>
        </div>

        {/* Trust stats */}
        <div style={{ display: 'flex', gap: 36, marginTop: 32, flexWrap: 'wrap' }}>
          {[
            { v: '68+', l: rtl ? 'مزوّد معتمد' : 'Verified providers' },
            { v: '12K+', l: rtl ? 'رحلة ميسّرة' : 'Trips arranged' },
            { v: '4.8★', l: rtl ? 'تقييم المعتمرين' : 'Customer rating' },
            { v: rtl ? '3 لغات' : '3 langs', l: rtl ? 'العربية · English · اردو' : 'Arabic · English · Urdu' },
          ].map((s, i) => (
            <div key={i}>
              <div style={{ fontFamily: 'Alexandria', fontWeight: 700, fontSize: 24, letterSpacing: '-0.01em' }}>{s.v}</div>
              <div style={{ fontFamily: 'Alexandria', fontSize: 12, opacity: 0.78, marginTop: 2 }}>{s.l}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function WebPackages({ theme, lang }) {
  const T = theme;
  const rtl = isRTL(lang);
  const ctx = useWeb();
  const packages = [
    { hotel: rtl ? 'فيرمونت ساعة مكة' : 'Fairmont Makkah', dates: rtl ? '16–25 رمضان' : '16–25 Ramadan', nights: 7, transport: 'flight', price: 4899, seats: 4, tag: rtl ? 'الأكثر طلباً' : 'Most booked', tone: 'dark', provider: rtl ? 'الإيلاف الفاخرة' : 'Elaf Premium' },
    { hotel: rtl ? 'سويس أوتيل الزمزم' : 'Swissôtel Al Maqam', dates: rtl ? '1–8 شوال' : '1–8 Shawwal', nights: 7, transport: 'flight', price: 3450, seats: 12, tone: 'brown', provider: rtl ? 'الرحمة للحج' : 'Al-Rahma' },
    { hotel: rtl ? 'فندق ميلينيوم' : 'Millennium Makkah', dates: rtl ? '20 رمضان' : '20 Ramadan', nights: 14, transport: 'bus', price: 1899, seats: 3, tag: rtl ? 'حصري' : 'Exclusive', tone: 'camel', provider: rtl ? 'دار البركة' : 'Dar Albaraka' },
    { hotel: rtl ? 'هيلتون مكة' : 'Hilton Makkah', dates: rtl ? '12 شوال' : '12 Shawwal', nights: 5, transport: 'flight', price: 2799, seats: 8, tone: 'cream', provider: rtl ? 'إيلاف ضيوف' : 'Elaf Guests' },
  ];

  return (
    <div style={{ padding: '72px 32px', maxWidth: 1180, margin: '0 auto', background: T.bg }}>
      <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 28 }}>
        <div>
          <div style={{ fontFamily: 'Alexandria', fontSize: 11.5, color: T.primary, fontWeight: 600, letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 8 }}>
            {rtl ? 'باقات مختارة' : 'Featured packages'}
          </div>
          <h2 style={{ margin: 0, fontFamily: 'Alexandria', fontWeight: 700, fontSize: 36, color: T.text, letterSpacing: '-0.02em', lineHeight: 1.15, maxWidth: 540 }}>
            {rtl ? 'أحدث باقات العمرة من مزوّدين موثوقين' : 'Latest Umrah packages from verified providers'}
          </h2>
        </div>
        <a onClick={() => ctx?.setPage('browse')} style={{ fontFamily: 'Alexandria', fontSize: 13, color: T.primary, fontWeight: 600, cursor: 'pointer' }}>
          {rtl ? 'كل الباقات →' : 'Browse all →'}
        </a>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20 }}>
        {packages.map((p, i) => (
          <div key={i} onClick={() => { ctx?.setPkg(p); ctx?.setPage('detail'); }} style={{
            background: T.surface, borderRadius: 18,
            border: `1px solid ${T.hairline}`, overflow: 'hidden',
            boxShadow: T.cardShadow, cursor: 'pointer',
          }}>
            <div style={{ position: 'relative' }}>
              <ImgSlot theme={T} tone={p.tone} height={170} radius={0} label={p.hotel}/>
              {p.tag && (
                <div style={{ position: 'absolute', top: 12, insetInlineStart: 12 }}>
                  <Badge tone="ink" theme={T} style={{ background: 'rgba(31,27,23,0.78)', color: '#fff', backdropFilter: 'blur(6px)' }}>{p.tag}</Badge>
                </div>
              )}
              <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={p.provider} size="xs"/>
              </div>
            </div>
            <div style={{ padding: 16 }}>
              <div style={{ fontFamily: 'Alexandria', fontWeight: 700, fontSize: 15, color: T.text, letterSpacing: '-0.005em' }}>{p.hotel}</div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 6 }}>
                <Stars value={5} size={11}/>
                <span style={{ fontFamily: 'Alexandria', fontSize: 11, color: T.textMuted }}>4.7</span>
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 8, fontSize: 11.5, color: T.textMuted }}>
                <Icon name="calendar" size={12} color={T.textMuted}/>
                <span style={{ fontFamily: 'Alexandria' }}>{p.dates}</span>
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 4, fontSize: 11.5, color: T.textMuted }}>
                <Icon name={p.transport === 'bus' ? 'bus' : 'plane'} size={12} color={T.textMuted}/>
                <span style={{ fontFamily: 'Alexandria' }}>{p.nights} {rtl ? 'ليالٍ' : 'nights'}</span>
              </div>
              <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', borderTop: `1px dashed ${T.hairline}`, paddingTop: 12, marginTop: 12 }}>
                <div>
                  <div style={{ fontSize: 10, color: T.textFaint, fontFamily: 'Alexandria' }}>{rtl ? 'يبدأ من' : 'from'}</div>
                  <div style={{ fontFamily: 'Alexandria', fontWeight: 700, fontSize: 18, color: T.text, letterSpacing: '-0.01em' }}>
                    {p.price.toLocaleString()} <span style={{ fontSize: 11, fontWeight: 500, color: T.textMuted }}>SAR</span>
                  </div>
                </div>
                <button style={{
                  padding: '8px 14px', borderRadius: 10, border: `1px solid ${T.primary}`,
                  background: 'transparent', color: T.primary,
                  fontFamily: 'Alexandria', fontWeight: 600, fontSize: 12, cursor: 'pointer',
                }}>{rtl ? 'تفاصيل' : 'Details'}</button>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function WebHowItWorks({ theme, lang }) {
  const T = theme;
  const rtl = isRTL(lang);
  const steps = [
    { n: '01', i: 'search', t: rtl ? 'اختر باقتك' : 'Pick your package', d: rtl ? 'تصفّح آلاف الباقات من مزوّدين موثوقين' : 'Browse packages from verified providers' },
    { n: '02', i: 'card',   t: rtl ? 'احجز وادفع بأمان' : 'Book securely', d: rtl ? 'دفع آمن بـ Apple Pay، مدى، فيزا، STC Pay وغيرها' : 'Apple Pay, mada, Visa, STC Pay & more' },
    { n: '03', i: 'qr',     t: rtl ? 'استلم رمز الحجز' : 'Get your QR', d: rtl ? 'تأكيد فوري ورمز QR للسفر' : 'Instant confirmation with travel QR' },
    { n: '04', i: 'kaaba',  t: rtl ? 'سافر بسلام' : 'Travel with ease', d: rtl ? 'تنبيهات وإرشادات أثناء الرحلة' : 'In-trip alerts and on-site guides' },
  ];
  return (
    <div style={{ padding: '80px 32px', background: T.surface, borderTop: `1px solid ${T.hairline}` }}>
      <div style={{ maxWidth: 1180, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', maxWidth: 540, margin: '0 auto 48px' }}>
          <div style={{ fontFamily: 'Alexandria', fontSize: 11.5, color: T.primary, fontWeight: 600, letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 8 }}>
            {rtl ? 'كيف يعمل' : 'How it works'}
          </div>
          <h2 style={{ margin: 0, fontFamily: 'Alexandria', fontWeight: 700, fontSize: 36, color: T.text, letterSpacing: '-0.02em', lineHeight: 1.15 }}>
            {rtl ? 'من البحث إلى الحرم في 4 خطوات' : 'From search to the Haram in 4 steps'}
          </h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14 }}>
          {steps.map((s, i) => (
            <div key={i} style={{
              padding: 24, borderRadius: 18,
              background: T.bg, border: `1px solid ${T.hairline}`,
              position: 'relative',
            }}>
              <div style={{ position: 'absolute', top: 16, insetInlineEnd: 18, fontFamily: 'Alexandria', fontSize: 11, fontWeight: 700, color: T.textFaint, letterSpacing: '0.08em' }}>{s.n}</div>
              <div style={{ width: 48, height: 48, borderRadius: 14, background: T.camelMist, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 14 }}>
                <Icon name={s.i} size={22} color={T.primary}/>
              </div>
              <div style={{ fontFamily: 'Alexandria', fontWeight: 700, fontSize: 16, color: T.text, letterSpacing: '-0.005em' }}>{s.t}</div>
              <div style={{ fontFamily: 'Alexandria', fontSize: 12.5, color: T.textMuted, marginTop: 6, lineHeight: 1.55 }}>{s.d}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function WebProviders({ theme, lang }) {
  const T = theme;
  const rtl = isRTL(lang);
  const providers = [
    rtl ? 'الإيلاف الفاخرة' : 'Elaf Premium',
    rtl ? 'الرحمة للحج' : 'Al-Rahma Hajj',
    rtl ? 'إيلاف ضيوف' : 'Elaf Guests',
    rtl ? 'دار الراحة' : 'Dar Al-Raha',
    rtl ? 'بوابة الكعبة' : 'Kaaba Gate',
    rtl ? 'حجاج الجزيرة' : 'Hujjaj Aljazeera',
    rtl ? 'نسائم الرحمن' : 'Nasaim Al-Rahman',
    rtl ? 'دار البركة' : 'Dar Albaraka',
  ];
  return (
    <div style={{ padding: '60px 32px', background: T.bg, borderTop: `1px solid ${T.hairline}` }}>
      <div style={{ maxWidth: 1180, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', fontFamily: 'Alexandria', fontSize: 12, fontWeight: 600, color: T.textMuted, letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 28 }}>
          {rtl ? 'موثوق من قبل أكثر من 68 مزوّداً' : 'Trusted by 68+ verified providers'}
        </div>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 14, justifyContent: 'center' }}>
          {providers.map((p, i) => (
            <div key={i} style={{
              padding: '12px 20px', borderRadius: 12,
              background: T.surface, border: `1px solid ${T.hairline}`,
            }}>
              <ProviderBadge theme={T} name={p} size="md"/>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function WebBecomeProvider({ theme, lang }) {
  const T = theme;
  const rtl = isRTL(lang);
  const ctx = useWeb();
  return (
    <div style={{ padding: '80px 32px', background: T.surface, borderTop: `1px solid ${T.hairline}` }}>
      <div style={{
        maxWidth: 1100, margin: '0 auto',
        background: `linear-gradient(135deg, ${T.ink} 0%, ${T.inkSoft} 100%)`,
        borderRadius: 28, padding: '56px 48px', color: '#fff', position: 'relative', overflow: 'hidden',
      }}>
        <div style={{ position: 'absolute', inset: 0, opacity: 0.10 }}>
          <DuyufPattern color={T.camel} opacity={0.5} size={60}/>
        </div>
        <PetalAccent size={320} color={T.camel} opacity={0.15} rotate={20} style={{ position: 'absolute', right: -80, top: -80 }}/>

        <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 40, alignItems: 'center' }}>
          <div>
            <div style={{ fontFamily: 'Alexandria', fontSize: 12, color: T.camel, fontWeight: 600, letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 12 }}>
              {rtl ? 'انضم إلى السوق' : 'Join the marketplace'}
            </div>
            <h2 style={{ margin: 0, fontFamily: 'Alexandria', fontWeight: 700, fontSize: 38, lineHeight: 1.15, letterSpacing: '-0.02em', textWrap: 'pretty' }}>
              {rtl ? 'وفّر باقاتك لآلاف المعتمرين عبر منصة ضيوف' : 'Offer your packages to thousands of pilgrims via Duyuf'}
            </h2>
            <p style={{ margin: '14px 0 0', fontFamily: 'Alexandria', fontSize: 14.5, opacity: 0.78, lineHeight: 1.6, maxWidth: 540 }}>
              {rtl
                ? 'لوحة إدارة كاملة لتكوين الباقات، إدارة الحجوزات، وتطبيق تشغيل لمتابعة العملاء أثناء الرحلة.'
                : 'A full dashboard to create packages, manage bookings, plus an operations app to track travelers during their trip.'}
            </p>
            <div style={{ display: 'flex', gap: 12, marginTop: 24 }}>
              <button onClick={() => ctx?.setPage('become-provider')} style={{
                padding: '14px 26px', borderRadius: 12, border: 0,
                background: T.camel, color: '#fff',
                fontFamily: 'Alexandria', fontWeight: 700, fontSize: 14, cursor: 'pointer',
                display: 'flex', alignItems: 'center', gap: 8,
              }}>
                {rtl ? 'سجّل كمزوّد' : 'Register as provider'} <Icon name={rtl ? 'arrow-l' : 'arrow-r'} size={16} color="#fff"/>
              </button>
              <button onClick={() => ctx?.setPage('contact')} style={{
                padding: '14px 26px', borderRadius: 12,
                background: 'transparent', color: '#fff', border: '1px solid rgba(255,255,255,0.3)',
                fontFamily: 'Alexandria', fontWeight: 600, fontSize: 14, cursor: 'pointer',
              }}>{rtl ? 'تواصل مع المبيعات' : 'Talk to sales'}</button>
            </div>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            {[
              { i: 'trend-up', t: rtl ? 'وصول لـ 12K+ معتمر شهرياً' : '12K+ pilgrims/month' },
              { i: 'percent', t: rtl ? 'عمولة شفافة من لوحة الإدارة' : 'Transparent commission' },
              { i: 'shield',  t: rtl ? 'دفعات آمنة ومجدولة' : 'Secure scheduled payouts' },
              { i: 'bell',    t: rtl ? 'تطبيق تشغيل وتنبيهات للعملاء' : 'Ops app + traveler alerts' },
            ].map((f, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '14px 16px', background: 'rgba(255,255,255,0.08)', borderRadius: 12, border: '1px solid rgba(255,255,255,0.12)' }}>
                <div style={{ width: 36, height: 36, borderRadius: 10, background: T.camel, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <Icon name={f.i} size={17} color="#fff"/>
                </div>
                <span style={{ fontFamily: 'Alexandria', fontSize: 13, fontWeight: 500 }}>{f.t}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

function WebAppDownload({ theme, lang }) {
  const T = theme;
  const rtl = isRTL(lang);
  return (
    <div style={{ padding: '80px 32px', background: T.bg }}>
      <div style={{ maxWidth: 1180, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40, alignItems: 'center' }}>
        <div>
          <div style={{ fontFamily: 'Alexandria', fontSize: 11.5, color: T.primary, fontWeight: 600, letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 12 }}>
            {rtl ? 'حمّل التطبيق' : 'Get the app'}
          </div>
          <h2 style={{ margin: 0, fontFamily: 'Alexandria', fontWeight: 700, fontSize: 36, color: T.text, letterSpacing: '-0.02em', lineHeight: 1.15 }}>
            {rtl ? 'كل رحلتك في تطبيق واحد' : 'Your whole journey in one app'}
          </h2>
          <p style={{ margin: '14px 0 24px', fontFamily: 'Alexandria', fontSize: 14.5, color: T.textMuted, lineHeight: 1.6, maxWidth: 480 }}>
            {rtl
              ? 'احجز، ادفع، تتبّع رحلتك، واستلم تنبيهات أثناء السفر — بالعربية، الإنجليزية، أو الأردية.'
              : 'Book, pay, track your trip, and receive on-trip alerts — in Arabic, English, or Urdu.'}
          </p>
          <div style={{ display: 'flex', gap: 10 }}>
            {[
              { t: rtl ? 'تنزيل من' : 'Download on', store: 'App Store', icon: '' },
              { t: rtl ? 'احصل عليه من' : 'Get it on', store: 'Google Play', icon: '▶' },
            ].map((s, i) => (
              <div key={i} style={{
                padding: '12px 20px', borderRadius: 14,
                background: T.ink, color: '#fff',
                display: 'flex', alignItems: 'center', gap: 10, cursor: 'pointer',
              }}>
                <div style={{ fontSize: 26, lineHeight: 1, fontFamily: 'Alexandria', fontWeight: 700 }}>{s.icon}</div>
                <div>
                  <div style={{ fontFamily: 'Alexandria', fontSize: 10, opacity: 0.7 }}>{s.t}</div>
                  <div style={{ fontFamily: 'Alexandria', fontSize: 15, fontWeight: 700, letterSpacing: '-0.01em' }}>{s.store}</div>
                </div>
              </div>
            ))}
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 18, fontFamily: 'Alexandria', fontSize: 12.5, color: T.textMuted }}>
            <Stars value={5} size={13}/>
            <span>4.8 · 4,200+ {rtl ? 'تقييم' : 'ratings'}</span>
          </div>
        </div>

        {/* Phone mockup */}
        <div style={{ display: 'flex', justifyContent: 'center', position: 'relative' }}>
          <div style={{ transform: 'scale(0.62)', transformOrigin: 'center' }}>
            <PhoneFrame theme={T} dir={rtl ? 'rtl' : 'ltr'} width={360} height={620}>
              <HomeScreen theme={T} lang={lang}/>
            </PhoneFrame>
          </div>
        </div>
      </div>
    </div>
  );
}

function WebFAQ({ theme, lang }) {
  const T = theme;
  const rtl = isRTL(lang);
  const faqs = rtl ? [
    { q: 'هل يمكنني الحجز كزائر دون تسجيل؟', a: 'يمكنك تصفّح كل الباقات بدون تسجيل، لكن إتمام الحجز يتطلب التحقق برقم الهاتف عبر رمز SMS.' },
    { q: 'كيف تختار المزوّدين الموجودين على المنصة؟', a: 'كل المزوّدين يمرّون بعملية توثيق KYC قبل ظهور باقاتهم. تظهر شارة "موثّق" على الباقات.', open: true },
    { q: 'ما هي سياسة الإلغاء والاسترداد؟', a: 'استرداد كامل قبل 7 أيام من السفر، وخصم 50% خلال 7 أيام. الاسترداد يصل لمحفظتك خلال 3 أيام عمل.' },
    { q: 'هل أحتاج لاختيار مقعد للعمرة بالطائرة؟', a: 'لا، باقات العمرة (بالطائرة أو الحافلة) مجدولة مسبقاً ولا تتطلب اختيار مقعد. اختيار المقاعد متاح فقط في حجوزات الطيران المستقلة من أيقونة الطيران.' },
    { q: 'بأي وسائل دفع يمكنني الدفع؟', a: 'Apple Pay، مدى، فيزا/ماستركارد، STC Pay، تابي وتمارا للأقساط، أو رصيد محفظة ضيوف.' },
    { q: 'كيف أصبح مزوّداً على المنصة؟', a: 'سجّل عبر "انضم كمزوّد"، أرسل وثائقك (سجل تجاري + ترخيص هيئة السياحة)، وبعد الموافقة ستحصل على لوحة إدارة وتطبيق التشغيل.' },
  ] : [
    { q: 'Can I book as a guest without an account?', a: 'You can browse all packages without signing up, but completing a booking requires phone verification via SMS code.' },
    { q: 'How are providers verified on Duyuf?', a: 'All providers go through KYC verification before their packages appear. Look for the "Verified" badge on package listings.', open: true },
    { q: 'What is the cancellation policy?', a: 'Full refund up to 7 days before travel, 50% within 7 days. Refunds land in your Duyuf wallet within 3 business days.' },
    { q: 'Do I select a seat for Umrah by Flight?', a: 'No. Umrah packages (flight or bus) are pre-arranged and do not require seat selection. Seat selection is only available for standalone flight bookings from the Flights icon.' },
    { q: 'Which payment methods are supported?', a: 'Apple Pay, mada, Visa/Mastercard, STC Pay, Tabby and Tamara installments, or your Duyuf wallet balance.' },
    { q: 'How do I become a provider?', a: 'Apply via "Become a provider", submit your documents (commercial registration + tourism license), and once approved you get a dashboard and operations app.' },
  ];

  return (
    <div style={{ padding: '80px 32px', background: T.bg, borderTop: `1px solid ${T.hairline}` }}>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '0.9fr 1.4fr', gap: 56, alignItems: 'start' }}>
          <div style={{ position: 'sticky', top: 92 }}>
            <div style={{ fontFamily: 'Alexandria', fontSize: 11.5, color: T.primary, fontWeight: 600, letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 12 }}>
              {rtl ? 'الأسئلة الشائعة' : 'Frequently asked'}
            </div>
            <h2 style={{ margin: 0, fontFamily: 'Alexandria', fontWeight: 700, fontSize: 34, color: T.text, letterSpacing: '-0.02em', lineHeight: 1.15 }}>
              {rtl ? 'كل ما تحتاج معرفته قبل حجز رحلتك' : 'Everything you need to know before booking'}
            </h2>
            <p style={{ margin: '14px 0 18px', fontFamily: 'Alexandria', fontSize: 13.5, color: T.textMuted, lineHeight: 1.6 }}>
              {rtl
                ? 'لم تجد إجابتك؟ تواصل مع فريق الدعم على واتساب وسنردّ خلال دقائق.'
                : "Didn't find your answer? Reach our support team on WhatsApp and we'll reply in minutes."}
            </p>
            <button style={{
              padding: '11px 18px', borderRadius: 10,
              background: T.surface, border: `1px solid ${T.hairline}`,
              fontFamily: 'Alexandria', fontWeight: 600, fontSize: 13, color: T.text,
              display: 'inline-flex', alignItems: 'center', gap: 8, cursor: 'pointer',
            }}>
              <Icon name="phone" size={14} color={T.success}/> {rtl ? 'دعم واتساب' : 'WhatsApp support'}
            </button>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {faqs.map((f, i) => (
              <div key={i} style={{
                background: T.surface, border: `1px solid ${f.open ? T.primary : T.hairline}`,
                borderRadius: 14, overflow: 'hidden',
                boxShadow: f.open ? `0 0 0 4px ${T.camelMist}` : 'none',
              }}>
                <div style={{
                  display: 'flex', alignItems: 'center', gap: 12, padding: '16px 18px',
                  cursor: 'pointer',
                }}>
                  <span style={{ flex: 1, fontFamily: 'Alexandria', fontWeight: 600, fontSize: 14.5, color: T.text, letterSpacing: '-0.005em' }}>{f.q}</span>
                  <div style={{
                    width: 28, height: 28, borderRadius: 999,
                    background: f.open ? T.primary : T.surfaceAlt,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    transition: 'transform 0.2s', transform: f.open ? 'rotate(45deg)' : 'rotate(0)',
                  }}>
                    <Icon name="plus" size={14} color={f.open ? '#fff' : T.text} strokeWidth={2.2}/>
                  </div>
                </div>
                {f.open && (
                  <div style={{ padding: '0 18px 18px', fontFamily: 'Alexandria', fontSize: 13.5, color: T.textMuted, lineHeight: 1.7, maxWidth: 600 }}>
                    {f.a}
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

function WebFooter({ theme, lang }) {
  const T = theme;
  const rtl = isRTL(lang);
  const cols = [
    { h: rtl ? 'الخدمات' : 'Services', items: rtl ? ['عمرة بالطائرة','عمرة بالحافلة','فنادق','طيران','مواصلات'] : ['Umrah by flight','Umrah by bus','Hotels','Flights','Transport'] },
    { h: rtl ? 'الشركة' : 'Company',  items: rtl ? ['عن ضيوف','قصتنا','مدونة','وظائف','الصحافة'] : ['About','Story','Blog','Careers','Press'] },
    { h: rtl ? 'المزوّدون' : 'For providers', items: rtl ? ['انضم كمزوّد','لوحة الإدارة','تطبيق التشغيل','الأسعار والعمولات','الموارد'] : ['Become a provider','Provider dashboard','Ops app','Pricing & commission','Resources'] },
    { h: rtl ? 'الدعم' : 'Support',   items: rtl ? ['مركز المساعدة','اتصل بنا','الشروط','الخصوصية','إعادة الجدولة'] : ['Help center','Contact','Terms','Privacy','Reschedules'] },
  ];
  return (
    <div style={{ padding: '60px 32px 30px', background: T.ink, color: '#fff' }}>
      <div style={{ maxWidth: 1180, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr 1fr', gap: 40, paddingBottom: 40, borderBottom: '1px solid rgba(255,255,255,0.12)' }}>
          <div>
            <DuyufWordmark height={32} color="#fff" lang={lang}/>
            <p style={{ margin: '14px 0 0', fontFamily: 'Alexandria', fontSize: 13, opacity: 0.72, lineHeight: 1.6, maxWidth: 280 }}>
              {rtl
                ? 'منصة سعودية تجمع ضيوف الرحمن مع أفضل مزوّدي خدمات العمرة.'
                : 'A Saudi marketplace connecting pilgrims with the best Umrah service providers.'}
            </p>
            <div style={{ display: 'flex', gap: 8, marginTop: 16 }}>
              {['phone','mail','globe'].map(i => (
                <div key={i} style={{ width: 36, height: 36, borderRadius: 10, background: 'rgba(255,255,255,0.08)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <Icon name={i} size={15} color="#fff"/>
                </div>
              ))}
            </div>
          </div>
          {cols.map(c => (
            <div key={c.h}>
              <div style={{ fontFamily: 'Alexandria', fontWeight: 700, fontSize: 13, marginBottom: 14, color: T.camel }}>{c.h}</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 9 }}>
                {c.items.map(it => (
                  <span key={it} style={{ fontFamily: 'Alexandria', fontSize: 12.5, opacity: 0.72, cursor: 'pointer' }}>{it}</span>
                ))}
              </div>
            </div>
          ))}
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingTop: 24, fontFamily: 'Alexandria', fontSize: 11.5, opacity: 0.55 }}>
          <span>© 2026 Duyuf · {rtl ? 'كل الحقوق محفوظة' : 'All rights reserved'}</span>
          <div style={{ display: 'flex', gap: 8 }}>
            {[
              { t: rtl ? 'حمّل من' : 'Download', store: 'App Store', icon: '' },
              { t: rtl ? 'متوفر على' : 'Get on', store: 'Google Play', icon: '▶' },
            ].map((s, i) => (
              <div key={i} style={{
                padding: '6px 12px', borderRadius: 10,
                background: 'rgba(255,255,255,0.08)', color: '#fff',
                border: '1px solid rgba(255,255,255,0.14)',
                display: 'flex', alignItems: 'center', gap: 8, cursor: 'pointer',
              }}>
                <div style={{ fontSize: 18, lineHeight: 1, fontFamily: 'Alexandria', fontWeight: 700 }}>{s.icon}</div>
                <div>
                  <div style={{ fontFamily: 'Alexandria', fontSize: 8.5, opacity: 0.7, letterSpacing: '0.04em' }}>{s.t}</div>
                  <div style={{ fontFamily: 'Alexandria', fontSize: 11, fontWeight: 700 }}>{s.store}</div>
                </div>
              </div>
            ))}
          </div>
          <span style={{ letterSpacing: '0.1em' }}>{rtl ? 'المملكة العربية السعودية · SA' : 'Saudi Arabia · SA'}</span>
        </div>
      </div>
    </div>
  );
}

// ─── Home page (the original landing) ─────────────────────────────────
function WebHomePage({ theme, lang }) {
  const T = theme;
  return (
    <>
      <WebHero theme={T} lang={lang}/>
      <WebPackages theme={T} lang={lang}/>
      <WebHowItWorks theme={T} lang={lang}/>
      <WebBecomeProvider theme={T} lang={lang}/>
      <WebAppDownload theme={T} lang={lang}/>
      <WebFAQ theme={T} lang={lang}/>
    </>
  );
}

// ─── Web App — page router ────────────────────────────────────────────
function WebApp({ theme, lang, onLanguageChange, dark = false, onThemeChange }) {
  const [page, setPage] = React.useState(() => {
    const requested = new URLSearchParams(window.location.search).get('page');
    if (requested === 'provider-dashboard' && localStorage.getItem('duyuf_provider_session')) return 'provider-dashboard';
    if (requested === 'payment-result') return 'payment-result';
    return 'home';
  });
  const [pkg, setPkg] = React.useState(null);
  const ctx = React.useMemo(() => ({ page, setPage, pkg, setPkg }), [page, pkg]);
  const T = theme;
  const rtl = isRTL(lang);

  // Scroll to top on page change
  const scrollRef = React.useRef(null);
  React.useEffect(() => { if (scrollRef.current) scrollRef.current.scrollTop = 0; }, [page]);

  const Page = ({
    home: WebHomePage,
    browse: WebBrowsePage,
    detail: WebDetailPage,
    checkout: WebCheckoutPage,
    'payment-result': WebPaymentResultPage,
    'become-provider': WebProviderSignupPage,
    contact: WebContactPage,
    signin: WebSignInPage,
    'provider-dashboard': WebProviderDashboardPage,
    'provider-add-package': WebProviderAddPackagePage,
  })[page] || WebHomePage;

  return (
    <WebContext.Provider value={ctx}>
      <div className="duyuf-site" ref={scrollRef} dir={rtl ? 'rtl' : 'ltr'} style={{ height: '100%', overflow: 'auto', background: T.bg, fontFamily: 'Alexandria, system-ui, sans-serif' }}>
        <WebNav theme={T} lang={lang} onLanguageChange={onLanguageChange} dark={dark} onThemeChange={onThemeChange}/>
        <Page theme={T} lang={lang}/>
        <WebFooter theme={T} lang={lang}/>
      </div>
    </WebContext.Provider>
  );
}

// ─── Wrapped in a browser window for the canvas ──────────────────────
function WebsiteArtboard({ theme, lang }) {
  return (
    <ChromeWindow
      tabs={[{ title: 'Duyuf · ضيوف الرحمن', active: true }, { title: 'New tab' }]}
      activeIndex={0}
      url="duyuf.app"
      width={1280}
      height={820}
    >
      <WebApp theme={theme} lang={lang}/>
    </ChromeWindow>
  );
}

Object.assign(window, {
  WebNav, WebHero, WebPackages, WebHowItWorks, WebProviders, WebBecomeProvider,
  WebAppDownload, WebFAQ, WebFooter, WebHomePage, WebApp, WebsiteArtboard,
});