/* Saraya Events — Public vendor store (#vendors/{slug}) and Vendors index (#vendors).
   Bilingual (EN/AR), brand-consistent. Shows real trade names (bypasses the vendor mask
   for approved public storefronts). SEO title/description + Organization JSON-LD per store. */
(function () {
  const R = window.React;
  const { useState, useEffect, useMemo } = R;
  const SITE = 'https://sarayaevents.com';

  const imgOf = (it) => (it && it.images && it.images.length ? it.images[0] : null);
  const listingRoute = (type, id) => (type === 'product' ? 'product/' : type === 'rental' ? 'rental-item/' : 'service-item/') + id;
  const priceLabel = (it, type, ar) => {
    if (type === 'product') return 'AED ' + (Number(it.price) || 0);
    if (type === 'rental') return 'AED ' + (Number(it.price_per_day) || 0) + (ar ? ' / يوم' : ' / day');
    if (it.pricing_type === 'custom_quote') return ar ? 'عند الطلب' : 'On request';
    return 'AED ' + (Number(it.base_price) || 0);
  };

  function Stars({ value, size }) {
    const v = Math.round(Number(value) || 0);
    const s = size || 14;
    return R.createElement('span', { style: { display: 'inline-flex', gap: 1, verticalAlign: 'middle' } },
      [1, 2, 3, 4, 5].map((i) => R.createElement(window.Icon, { key: i, name: 'star', size: s,
        style: { color: i <= v ? 'var(--gold-deep)' : 'var(--line-strong)', fill: i <= v ? 'var(--gold-deep)' : 'none' } })));
  }

  function ListingCard({ it, type, ar, go }) {
    const img = imgOf(it);
    const name = (ar && it.name_ar) ? it.name_ar : it.name_en;
    return R.createElement('button', {
      onClick: () => go(listingRoute(type, it.id)),
      style: { textAlign: 'start', border: '1px solid var(--line)', borderRadius: 14, overflow: 'hidden',
        background: 'var(--white)', cursor: 'pointer', padding: 0, display: 'flex', flexDirection: 'column' },
    },
      window.RentalImageFrame
        ? R.createElement(window.RentalImageFrame, { src: img, alt: name })
        : R.createElement('div', { style: { aspectRatio: '4/3', background: 'var(--cream)' } },
            img ? R.createElement('img', { src: img, alt: name, style: { width: '100%', height: '100%', objectFit: 'cover' } }) : null),
      R.createElement('div', { style: { padding: '12px 14px' } },
        R.createElement('div', { style: { fontFamily: 'var(--font-display)', fontSize: 15.5, marginBottom: 6, lineHeight: 1.25 } }, name),
        R.createElement('div', { style: { fontSize: 13, color: 'var(--gold-deep)', fontWeight: 600 } }, priceLabel(it, type, ar))
      )
    );
  }

  function setStoreSeo(v, ar) {
    if (!v) return;
    const name = (ar && v.trade_name_ar) ? v.trade_name_ar : (v.trade_name || 'Vendor');
    const desc = (ar ? (v.short_description_ar || v.description_ar) : (v.short_description_en || v.description_en))
      || (ar ? ('مورّد معتمد على سوق سرايا للفعاليات.') : ('An approved vendor on the Saraya Events marketplace.'));
    // Run after the app-level route meta effect so the vendor title wins.
    setTimeout(() => {
      try {
        document.title = name + ' | Saraya Events';
        let m = document.querySelector('meta[name="description"]');
        if (!m) { m = document.createElement('meta'); m.setAttribute('name', 'description'); document.head.appendChild(m); }
        m.setAttribute('content', String(desc).slice(0, 300));
        const ld = {
          '@context': 'https://schema.org', '@type': 'Organization',
          name: v.trade_name || name, alternateName: v.trade_name_ar || undefined,
          url: SITE + '/#vendors/' + v.slug,
          logo: v.logo_url || undefined,
          description: String(desc).slice(0, 500),
          areaServed: (v.service_areas && v.service_areas.length ? v.service_areas : (v.city ? [v.city] : undefined)),
          address: v.city ? { '@type': 'PostalAddress', addressLocality: v.city, addressCountry: 'AE' } : undefined,
          knowsAbout: (v.business_category && v.business_category.length ? v.business_category : undefined),
          parentOrganization: { '@type': 'Organization', name: 'Saraya Events', url: SITE },
        };
        let s = document.getElementById('vendor-jsonld');
        if (!s) { s = document.createElement('script'); s.id = 'vendor-jsonld'; s.type = 'application/ld+json'; document.head.appendChild(s); }
        s.textContent = JSON.stringify(ld);
      } catch (e) { /* noop */ }
    }, 0);
  }
  function clearStoreSeo() {
    const s = document.getElementById('vendor-jsonld');
    if (s && s.parentNode) s.parentNode.removeChild(s);
  }

  function Grid({ children }) {
    return <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(180px, 1fr))', gap: 16 }}>{children}</div>;
  }

  function VendorStorePage({ slug }) {
    const { lang } = useLang();
    const { go } = useNav();
    const ar = lang === 'ar';
    const db = window.SarayaDB;
    const [st, setSt] = useState({ loading: true, vendor: null, products: [], rentals: [], services: [], reviews: [] });
    const [tab, setTab] = useState('all');

    useEffect(() => {
      let cancelled = false;
      (async () => {
        if (!db) { setSt((s) => ({ ...s, loading: false })); return; }
        // vendor_profiles is not anon-readable (holds sensitive fields), so load the
        // public-safe vendor via a security-definer RPC — works for logged-out visitors.
        const { data: vrows } = await db.rpc('saraya_vendor_by_slug', { p_slug: slug });
        const v = Array.isArray(vrows) ? vrows[0] : vrows;
        if (cancelled) return;
        if (!v) { setSt({ loading: false, vendor: null, products: [], rentals: [], services: [], reviews: [] }); return; }
        const [pR, rR, sR, revR] = await Promise.all([
          db.from('products').select('id,name_en,name_ar,price,images').eq('vendor_id', v.id).eq('is_active', true).eq('status', 'approved').order('created_at', { ascending: false }),
          db.from('rentals').select('id,name_en,name_ar,price_per_day,images').eq('vendor_id', v.id).eq('is_active', true).eq('status', 'approved').order('created_at', { ascending: false }),
          db.from('services').select('id,name_en,name_ar,base_price,pricing_type,images').eq('vendor_id', v.id).eq('is_active', true).eq('status', 'approved').order('created_at', { ascending: false }),
          db.from('reviews').select('id,rating,title,body,created_at').eq('vendor_id', v.id).eq('status', 'published').order('created_at', { ascending: false }).limit(50),
        ]);
        if (cancelled) return;
        setSt({ loading: false, vendor: v, products: (pR && pR.data) || [], rentals: (rR && rR.data) || [], services: (sR && sR.data) || [], reviews: (revR && revR.data) || [] });
      })();
      return () => { cancelled = true; };
    }, [slug]);

    const v = st.vendor;
    useEffect(() => { if (v) setStoreSeo(v, ar); }, [v, ar]);
    useEffect(() => () => clearStoreSeo(), []);

    if (st.loading) return <main style={{ paddingTop: 140, paddingBottom: 100, textAlign: 'center', color: 'var(--fg-muted)' }}>{ar ? 'جارٍ التحميل…' : 'Loading…'}</main>;
    if (!v) return (
      <main style={{ paddingTop: 140, paddingBottom: 100, textAlign: 'center' }}>
        <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 28, marginBottom: 10 }}>{ar ? 'المتجر غير موجود' : 'Store not found'}</h1>
        <p style={{ color: 'var(--fg-muted)', marginBottom: 20 }}>{ar ? 'هذا المتجر غير متاح أو لم يُعتمد بعد.' : 'This store is unavailable or not yet approved.'}</p>
        <button onClick={() => go('vendors')} style={{ padding: '10px 20px', borderRadius: 999, border: '1px solid var(--line)', background: 'var(--white)', cursor: 'pointer', fontWeight: 600 }}>{ar ? 'كل الموردين' : 'All vendors'}</button>
      </main>
    );

    const name = (ar && v.trade_name_ar) ? v.trade_name_ar : (v.trade_name || (ar ? 'مورّد' : 'Vendor'));
    const desc = (ar ? v.description_ar : v.description_en) || (ar ? v.description_en : v.description_ar) || '';
    const cats = Array.isArray(v.business_category) ? v.business_category : [];
    const areas = (v.service_areas && v.service_areas.length) ? v.service_areas : (v.city ? [v.city] : []);
    const activeCount = st.products.length + st.rentals.length + st.services.length;
    const avg = st.reviews.length ? (st.reviews.reduce((a, r) => a + Number(r.rating || 0), 0) / st.reviews.length) : 0;

    const hasP = st.products.length > 0, hasR = st.rentals.length > 0, hasS = st.services.length > 0;
    const TABS = [
      { key: 'all', label: { en: 'All Listings', ar: 'كل القوائم' }, show: hasP || hasR || hasS },
      { key: 'products', label: { en: 'Products', ar: 'المنتجات' }, show: hasP },
      { key: 'rentals', label: { en: 'Rentals', ar: 'الإيجارات' }, show: hasR },
      { key: 'services', label: { en: 'Services', ar: 'الخدمات' }, show: hasS },
      { key: 'about', label: { en: 'About', ar: 'نبذة' }, show: true },
      { key: 'reviews', label: { en: 'Reviews', ar: 'التقييمات' }, show: true },
      { key: 'policies', label: { en: 'Policies', ar: 'السياسات' }, show: true },
    ].filter((t) => t.show);
    const activeTab = TABS.some((t) => t.key === tab) ? tab : 'all';

    const requestQuote = () => {
      window.sarayaTrack && window.sarayaTrack('vendor_quote_click', { vendor_id: v.id });
      if (window.openRequestQuoteModal) window.openRequestQuoteModal({ vendorId: v.id, vendorName: name });
      else go('design');
    };

    const allItems = [
      ...st.products.map((it) => ({ it, type: 'product' })),
      ...st.rentals.map((it) => ({ it, type: 'rental' })),
      ...st.services.map((it) => ({ it, type: 'service' })),
    ];

    return (
      <main style={{ paddingTop: 104, paddingBottom: 80, background: 'var(--bg-canvas)' }}>
        <div style={{ maxWidth: 1120, margin: '0 auto', padding: '0 20px' }}>
          <button onClick={() => go('vendors')} style={{ display: 'inline-flex', alignItems: 'center', gap: 6, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--fg-muted)', fontSize: 13, fontWeight: 600, padding: '10px 0' }}>
            <window.Icon name="arrow-left" size={15} />{ar ? 'كل الموردين' : 'All vendors'}
          </button>

          {/* Header */}
          <div style={{ display: 'flex', gap: 20, alignItems: 'flex-start', flexWrap: 'wrap', padding: '8px 0 24px', borderBottom: '1px solid var(--line)' }}>
            <div style={{ width: 88, height: 88, borderRadius: 18, background: 'var(--cream)', border: '1px solid var(--line)', overflow: 'hidden', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              {v.logo_url ? <img src={v.logo_url} alt={name} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                : <span style={{ fontFamily: 'var(--font-display)', fontSize: 34, color: 'var(--gold-deep)' }}>{(name || 'V').slice(0, 1)}</span>}
            </div>
            <div style={{ flex: 1, minWidth: 240 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
                <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(24px,3.4vw,34px)', fontWeight: 500, margin: 0, lineHeight: 1.15 }}>{name}</h1>
                {v.is_verified && (
                  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, padding: '4px 11px', borderRadius: 999, background: '#DCFCE7', color: '#15803D', fontSize: 12, fontWeight: 700 }}>
                    <window.Icon name="badge-check" size={14} />{ar ? 'موثّق' : 'Verified'}
                  </span>
                )}
              </div>
              {cats.length > 0 && (
                <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginTop: 10 }}>
                  {cats.map((c) => <span key={c} style={{ padding: '3px 10px', borderRadius: 999, background: 'var(--gold-tint)', color: 'var(--gold-deep)', fontSize: 11.5, fontWeight: 600 }}>{c}</span>)}
                </div>
              )}
              <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap', marginTop: 12, fontSize: 13, color: 'var(--fg-muted)' }}>
                {areas.length > 0 && <span><window.Icon name="map-pin" size={13} style={{ verticalAlign: 'middle', marginInlineEnd: 4 }} />{areas.join('، ')}</span>}
                <span><window.Icon name="layers" size={13} style={{ verticalAlign: 'middle', marginInlineEnd: 4 }} />{activeCount} {ar ? 'قائمة نشطة' : (activeCount === 1 ? 'active listing' : 'active listings')}</span>
                {st.reviews.length > 0 && <span><Stars value={avg} size={13} /> <span style={{ verticalAlign: 'middle' }}>{avg.toFixed(1)} ({st.reviews.length})</span></span>}
              </div>
            </div>
            <button onClick={requestQuote} style={{ padding: '11px 22px', borderRadius: 10, border: 'none', background: 'var(--gold)', color: '#fff', fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 14, cursor: 'pointer', whiteSpace: 'nowrap' }}>
              {ar ? 'اطلب عرض سعر' : 'Request Quote'}
            </button>
          </div>

          {/* Tabs */}
          <div style={{ display: 'flex', gap: 4, overflowX: 'auto', borderBottom: '1px solid var(--line)', margin: '0 -20px', padding: '0 20px' }}>
            {TABS.map((t) => (
              <button key={t.key} onClick={() => setTab(t.key)}
                style={{ padding: '14px 14px', background: 'none', border: 'none', borderBottom: activeTab === t.key ? '2px solid var(--gold-deep)' : '2px solid transparent', color: activeTab === t.key ? 'var(--fg-primary)' : 'var(--fg-muted)', fontFamily: 'var(--font-body)', fontSize: 14, fontWeight: 600, cursor: 'pointer', whiteSpace: 'nowrap' }}>
                {ar ? t.label.ar : t.label.en}
              </button>
            ))}
          </div>

          {/* Tab content */}
          <div style={{ padding: '28px 0' }}>
            {activeTab === 'all' && <Grid>{allItems.map(({ it, type }) => <ListingCard key={type + it.id} it={it} type={type} ar={ar} go={go} />)}</Grid>}
            {activeTab === 'products' && <Grid>{st.products.map((it) => <ListingCard key={it.id} it={it} type="product" ar={ar} go={go} />)}</Grid>}
            {activeTab === 'rentals' && <Grid>{st.rentals.map((it) => <ListingCard key={it.id} it={it} type="rental" ar={ar} go={go} />)}</Grid>}
            {activeTab === 'services' && <Grid>{st.services.map((it) => <ListingCard key={it.id} it={it} type="service" ar={ar} go={go} />)}</Grid>}

            {activeTab === 'about' && (
              <div style={{ maxWidth: 720 }}>
                {desc ? <p style={{ fontSize: 15.5, lineHeight: 1.75, color: 'var(--fg-secondary)', whiteSpace: 'pre-wrap' }}>{desc}</p>
                  : <p style={{ color: 'var(--fg-muted)' }}>{ar ? 'لم يضف هذا المورّد نبذة بعد.' : 'This vendor has not added a description yet.'}</p>}
                <div style={{ display: 'grid', gap: 12, marginTop: 22 }}>
                  {cats.length > 0 && <div><b style={{ fontSize: 13 }}>{ar ? 'الفئات: ' : 'Categories: '}</b><span style={{ color: 'var(--fg-secondary)' }}>{cats.join('، ')}</span></div>}
                  {areas.length > 0 && <div><b style={{ fontSize: 13 }}>{ar ? 'مناطق الخدمة: ' : 'Service areas: '}</b><span style={{ color: 'var(--fg-secondary)' }}>{areas.join('، ')}</span></div>}
                  {v.website && <div><b style={{ fontSize: 13 }}>{ar ? 'الموقع: ' : 'Website: '}</b><a href={v.website} target="_blank" rel="noopener noreferrer" style={{ color: 'var(--gold-deep)' }}>{v.website}</a></div>}
                  {v.created_at && <div style={{ fontSize: 13, color: 'var(--fg-muted)' }}>{ar ? 'عضو منذ ' : 'Member since '}{new Date(v.created_at).getFullYear()}</div>}
                </div>
              </div>
            )}

            {activeTab === 'reviews' && (
              <div style={{ maxWidth: 720 }}>
                {st.reviews.length === 0 ? <p style={{ color: 'var(--fg-muted)' }}>{ar ? 'لا توجد تقييمات موثّقة بعد.' : 'No verified reviews yet.'}</p> : (
                  <>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 18 }}>
                      <span style={{ fontFamily: 'var(--font-display)', fontSize: 30, color: 'var(--gold-deep)' }}>{avg.toFixed(1)}</span>
                      <div><Stars value={avg} size={16} /><div style={{ fontSize: 12.5, color: 'var(--fg-muted)' }}>{st.reviews.length} {ar ? 'تقييم' : 'reviews'}</div></div>
                    </div>
                    <div style={{ display: 'grid', gap: 14 }}>
                      {st.reviews.map((r) => (
                        <div key={r.id} style={{ padding: '14px 16px', border: '1px solid var(--line)', borderRadius: 12, background: 'var(--white)' }}>
                          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                            <Stars value={r.rating} size={14} />
                            <span style={{ fontSize: 12, color: 'var(--fg-muted)' }}>{new Date(r.created_at).toLocaleDateString(ar ? 'ar-AE' : 'en-AE', { year: 'numeric', month: 'short', day: 'numeric' })}</span>
                          </div>
                          {r.title && <div style={{ fontWeight: 700, fontSize: 14, marginTop: 8 }}>{r.title}</div>}
                          {r.body && <p style={{ fontSize: 13.5, color: 'var(--fg-secondary)', margin: '6px 0 0', lineHeight: 1.6 }}>{r.body}</p>}
                        </div>
                      ))}
                    </div>
                  </>
                )}
              </div>
            )}

            {activeTab === 'policies' && (
              <div style={{ maxWidth: 720, display: 'grid', gap: 16 }}>
                {[
                  { t: { en: 'Payments & payouts', ar: 'المدفوعات والمستحقات' }, d: { en: 'Payments are collected securely by Saraya and released to the vendor after the customer confirms delivery or completion, or once the 3-day dispute window closes.', ar: 'تُحصّل المدفوعات بأمان عبر سرايا وتُصرف للمورّد بعد تأكيد العميل للتسليم أو الإنجاز، أو عند انتهاء نافذة النزاع البالغة 3 أيام.' } },
                  { t: { en: 'Delivery & installation', ar: 'التسليم والتركيب' }, d: { en: 'The vendor is responsible for delivery, installation and after-sales service of its products, rentals and services, per the terms shown on each listing.', ar: 'المورّد مسؤول عن التسليم والتركيب وخدمة ما بعد البيع لمنتجاته وإيجاراته وخدماته، وفقاً للشروط الموضّحة في كل قائمة.' } },
                  { t: { en: 'Cancellations & refunds', ar: 'الإلغاء والاسترداد' }, d: { en: 'Cancellations, returns and refunds follow the UAE Consumer Protection Law and Saraya policies. Defective or misdescribed items are the vendor’s responsibility.', ar: 'يخضع الإلغاء والإرجاع والاسترداد لقانون حماية المستهلك الإماراتي وسياسات سرايا. الأصناف المعيبة أو المخالفة للوصف من مسؤولية المورّد.' } },
                  { t: { en: 'Verified vendor', ar: 'مورّد موثّق' }, d: { en: 'This vendor is reviewed and approved by Saraya, including trade licence verification, before appearing on the marketplace.', ar: 'تمت مراجعة هذا المورّد واعتماده من سرايا، بما في ذلك التحقق من الرخصة التجارية، قبل ظهوره في السوق.' } },
                ].map((p, i) => (
                  <div key={i} style={{ padding: '14px 16px', border: '1px solid var(--line)', borderRadius: 12, background: 'var(--white)' }}>
                    <div style={{ fontWeight: 700, fontSize: 14, marginBottom: 5 }}>{ar ? p.t.ar : p.t.en}</div>
                    <p style={{ fontSize: 13.5, color: 'var(--fg-secondary)', margin: 0, lineHeight: 1.6 }}>{ar ? p.d.ar : p.d.en}</p>
                  </div>
                ))}
              </div>
            )}
          </div>
        </div>
      </main>
    );
  }

  function VendorsIndexPage() {
    const { lang } = useLang();
    const { go } = useNav();
    const ar = lang === 'ar';
    const db = window.SarayaDB;
    const [rows, setRows] = useState(null);

    useEffect(() => {
      let cancelled = false;
      (async () => {
        if (!db) { if (!cancelled) setRows([]); return; }
        const { data } = await db.rpc('saraya_public_vendors');
        if (!cancelled) setRows((data || []));
      })();
      return () => { cancelled = true; };
    }, []);

    useEffect(() => {
      setTimeout(() => { try { document.title = (ar ? 'الموردون' : 'Vendors') + ' | Saraya Events'; } catch (e) {} }, 0);
    }, [ar]);

    const Card = (v) => {
      const name = (ar && v.trade_name_ar) ? v.trade_name_ar : (v.trade_name || (ar ? 'مورّد' : 'Vendor'));
      const cats = Array.isArray(v.business_category) ? v.business_category : [];
      const areas = (v.service_areas && v.service_areas.length) ? v.service_areas : (v.city ? [v.city] : []);
      return (
        <div key={v.id} style={{ border: '1px solid var(--line)', borderRadius: 16, padding: 18, background: 'var(--white)', display: 'flex', flexDirection: 'column', gap: 10 }}>
          <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
            <div style={{ width: 52, height: 52, borderRadius: 12, background: 'var(--cream)', border: '1px solid var(--line)', overflow: 'hidden', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              {v.logo_url ? <img src={v.logo_url} alt={name} style={{ width: '100%', height: '100%', objectFit: 'cover' }} /> : <span style={{ fontFamily: 'var(--font-display)', fontSize: 22, color: 'var(--gold-deep)' }}>{(name || 'V').slice(0, 1)}</span>}
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                <span style={{ fontFamily: 'var(--font-display)', fontSize: 17, lineHeight: 1.2 }}>{name}</span>
                {v.is_verified && <window.Icon name="badge-check" size={15} style={{ color: '#15803D', flexShrink: 0 }} />}
              </div>
              {cats.length > 0 && <div style={{ fontSize: 11.5, color: 'var(--gold-deep)', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.05em', marginTop: 3 }}>{cats[0]}</div>}
            </div>
          </div>
          <div style={{ fontSize: 12.5, color: 'var(--fg-muted)', display: 'flex', gap: 14, flexWrap: 'wrap' }}>
            {areas.length > 0 && <span><window.Icon name="map-pin" size={12} style={{ verticalAlign: 'middle', marginInlineEnd: 3 }} />{areas.join('، ')}</span>}
            <span>{v.active_listings} {ar ? 'قائمة' : (v.active_listings === 1 ? 'listing' : 'listings')}</span>
          </div>
          <button onClick={() => go('vendors/' + v.slug)} style={{ marginTop: 4, padding: '9px 0', borderRadius: 9, border: '1px solid var(--line)', background: 'var(--white)', color: 'var(--fg-primary)', fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 13, cursor: 'pointer' }}>
            {ar ? 'عرض المتجر' : 'View Store'}
          </button>
        </div>
      );
    };

    return (
      <main style={{ paddingTop: 116, paddingBottom: 80, background: 'var(--bg-canvas)', minHeight: '70vh' }}>
        <div style={{ maxWidth: 1120, margin: '0 auto', padding: '0 20px' }}>
          <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(28px,4vw,40px)', fontWeight: 500, textAlign: 'center', marginBottom: 6 }}>{ar ? 'موردون معتمدون' : 'Approved vendors'}</h1>
          <p style={{ textAlign: 'center', color: 'var(--fg-muted)', marginBottom: 30 }}>{ar ? 'تصفّح متاجر الموردين المعتمدين على سرايا.' : 'Browse the storefronts of approved vendors on Saraya.'}</p>
          {rows === null ? <p style={{ textAlign: 'center', color: 'var(--fg-muted)' }}>{ar ? 'جارٍ التحميل…' : 'Loading…'}</p>
            : rows.length === 0 ? <p style={{ textAlign: 'center', color: 'var(--fg-muted)' }}>{ar ? 'لا يوجد موردون معتمدون بعد.' : 'No approved vendors yet.'}</p>
            : <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(240px, 1fr))', gap: 18 }}>{rows.map(Card)}</div>}
        </div>
      </main>
    );
  }

  window.VendorStorePage = VendorStorePage;
  window.VendorsIndexPage = VendorsIndexPage;
})();