// Saraya Events — Vendor public pages: VendorPackagesPage, VendorAgreementPage

const { useState: useStatePV } = React;

/* ===================================================================
   VENDOR PACKAGES PAGE
   Public-facing subscription tier comparison
   =================================================================== */
const VENDOR_TIERS = window.VENDOR_PACKAGES;

function TierCard({ tier, ar, onSelect }) {
  return (
    <div style={{
      borderRadius: 20,
      border: tier.highlight ? '2px solid var(--gold)' : '1.5px solid var(--line)',
      background: tier.highlight ? 'var(--espresso)' : 'var(--white)',
      color: tier.highlight ? 'var(--ivory)' : 'var(--fg-primary)',
      padding: '32px 28px',
      position: 'relative',
      display: 'flex',
      flexDirection: 'column',
      boxShadow: tier.highlight ? 'var(--shadow-lift)' : 'none',
    }}>
      {tier.badge && (
        <span style={{ position: 'absolute', top: -14, left: 0, right: 0, margin: '0 auto', width: 'fit-content', background: 'var(--gold)', color: 'var(--espresso)', padding: '4px 16px', borderRadius: 20, fontSize: 12, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', whiteSpace: 'nowrap', display: 'block', textAlign: 'center' }}>
          {ar ? tier.badge.ar : tier.badge.en}
        </span>
      )}

      <div style={{ marginBottom: 24 }}>
        <p style={{ fontSize: 13, fontWeight: 600, letterSpacing: '0.1em', textTransform: 'uppercase', opacity: 0.7, margin: 0, marginBottom: 8 }}>
          {ar ? tier.ar : tier.en}
        </p>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
          <span style={{ fontFamily: 'var(--font-display)', fontSize: 48, fontWeight: 500, lineHeight: 1 }}>
            AED {tier.price}
          </span>
          <span style={{ fontSize: 14, opacity: 0.65 }}>{ar ? '/شهر' : '/mo'}</span>
        </div>
        <p style={{ fontSize: 13, opacity: 0.6, margin: '6px 0 0' }}>
          {ar ? 'يُحسب + ضريبة القيمة المضافة' : 'Billed monthly + VAT'}
        </p>
      </div>

      <div style={{ flex: 1, display: 'grid', gap: 10, marginBottom: 28 }}>
        {(ar ? tier.features.ar : tier.features.en).map((f, i) => (
          <div key={i} style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
            <Icon name="check" size={15} style={{ color: tier.highlight ? 'var(--gold-light)' : 'var(--gold-deep)', flexShrink: 0, marginTop: 2 }} />
            <span style={{ fontSize: 14, lineHeight: 1.55, opacity: 0.9 }}>{f}</span>
          </div>
        ))}
        {tier.notIncluded && (ar ? tier.notIncluded.ar : tier.notIncluded.en).map((f, i) => (
          <div key={"x" + i} style={{ display: 'flex', gap: 10, alignItems: 'flex-start', opacity: 0.4 }}>
            <Icon name="x" size={15} style={{ flexShrink: 0, marginTop: 2 }} />
            <span style={{ fontSize: 14, lineHeight: 1.55 }}>{f}</span>
          </div>
        ))}
      </div>

      <button onClick={() => onSelect(tier)} style={{
        width: '100%', padding: '13px 0', borderRadius: 12, border: 'none', cursor: 'pointer',
        fontFamily: 'var(--font-body)', fontSize: 15, fontWeight: 600,
        background: tier.highlight ? 'var(--gold)' : 'var(--espresso)',
        color: tier.highlight ? 'var(--espresso)' : 'var(--ivory)',
        transition: 'opacity 150ms',
      }}>
        {ar ? tier.cta.ar : tier.cta.en}
      </button>
    </div>
  );
}

function VendorPackagesPage() {
  const { lang } = useLang();
  const ar = lang === 'ar';
  const { go } = useNav();
  const auth = window.useAuth ? window.useAuth() : null;

  const handleSelect = (tier) => {
    try { localStorage.setItem('saraya_selected_tier', JSON.stringify({ id: tier.id, price: tier.price, en: tier.en, ar: tier.ar })); } catch (_) {}
    if (!auth || !auth.user) {
      if (window.openJoinVendorModal) { window.openJoinVendorModal(); return; }
      auth && auth.openAuthModal ? auth.openAuthModal('signup') : go('partner');
      return;
    }
    if (auth.isVendor) {
      go('vendor-dashboard');
    } else {
      go('vendor-packages');
      if (auth.openAuthModal) auth.openAuthModal('vendor-package');
    }
  };

  const FAQ = [
    {
      q: { en: 'What is the commission rate on sales?', ar: 'ما هو معدل العمولة على المبيعات؟' },
      a: { en: 'Starter: 2% on confirmed transactions. Growth: 1% on confirmed transactions. Premium: 0.5% on confirmed transactions. Commission is deducted from each payout before it is released to you.', ar: 'مبتدئ: 2٪ على المعاملات المؤكدة. نمو: 1٪ على المعاملات المؤكدة. مميز: 0.5٪ على المعاملات المؤكدة. تُخصم العمولة من كل مبلغ مستحق قبل صرفه.' },
    },
    {
      q: { en: 'Can I upgrade or downgrade my plan?', ar: 'هل يمكنني ترقية خطتي أو تخفيضها؟' },
      a: { en: 'Yes. Upgrades take effect immediately; downgrades apply at the next billing cycle.', ar: 'نعم. الترقيات تسري فورًا؛ وتخفيض الخطة يُطبَّق في دورة الفوترة التالية.' },
    },
    {
      q: { en: 'How long does vendor approval take?', ar: 'كم يستغرق الموافقة على حساب المورد؟' },
      a: { en: 'Typically 2-3 business days after all required documents are submitted.', ar: 'عادةً 2-3 أيام عمل بعد تقديم جميع الوثائق المطلوبة.' },
    },
    {
      q: { en: 'When do I receive payouts?', ar: 'متى أستلم مدفوعاتي؟' },
      a: { en: 'Payouts are released after the customer confirms delivery, or after the 3-day dispute window closes — whichever is earlier.', ar: 'تُصدَر المدفوعات بعد تأكيد العميل للاستلام أو بعد انتهاء نافذة النزاع (3 أيام).' },
    },
    {
      q: { en: 'What documents do I need to register?', ar: 'ما الوثائق المطلوبة للتسجيل؟' },
      a: { en: 'A valid UAE Trade License, Emirates ID of the authorised representative, and a VAT certificate (if registered).', ar: 'رخصة تجارية إماراتية سارية، وهوية إماراتية للممثل المفوَّض، وشهادة ضريبة القيمة المضافة (إن وجدت).' },
    },
  ];

  const [openFaq, setOpenFaq] = useStatePV(null);

  return (
    <main>
      <section style={{ background: 'var(--espresso)', color: 'var(--ivory)', paddingTop: 140, paddingBottom: 72 }}>
        <Container wide style={{ textAlign: 'center' }}>
          <Reveal>
            <Eyebrow style={{ color: 'var(--gold-light)' }}>{ar ? 'خطط الموردين' : 'Vendor Plans'}</Eyebrow>
            <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(38px,6vw,68px)', fontWeight: 500, margin: '18px 0 0', letterSpacing: '-0.01em' }}>
              {ar ? 'انمُ عملك مع سرايا' : 'Grow your business with Saraya'}
            </h1>
            <p style={{ marginTop: 20, fontSize: 'clamp(16px,1.8vw,20px)', lineHeight: 1.65, opacity: 0.8, maxWidth: 600, margin: '20px auto 0' }}>
              {ar
                ? 'اختر الخطة المناسبة لحجم أعمالك. لا رسوم إعداد. يمكنك الإلغاء في أي وقت.'
                : 'Choose the plan that fits your business. No setup fees. Cancel any time.'}
            </p>
          </Reveal>
        </Container>
      </section>

      <Section bg="muted">
        <Container wide>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(280px,100%), 1fr))', gap: 24, alignItems: 'stretch', marginTop: 0 }}>
            {VENDOR_TIERS.map((tier) => (
              <TierCard key={tier.id} tier={tier} ar={ar} onSelect={handleSelect} />
            ))}
          </div>

          <p style={{ textAlign: 'center', fontSize: 13, color: 'var(--fg-muted)', marginTop: 24 }}>
            {ar
              ? 'Secure payment workflow planned. Payment release and vendor payout features will be activated once the payment gateway and payout process are fully configured.'
             : 'All prices in AED, exclusive of 5% VAT. Saraya Events reserves the right to amend pricing with advance notice.'}
          </p>
        </Container>
      </Section>

      {/* What you get */}
      <Section bg="canvas">
        <Container wide>
          <Reveal><SectionHead center eyebrow={ar ? 'ما تحصل عليه' : 'What you get'} title={ar ? 'كل ما تحتاجه لتنمية عملك' : 'Everything you need to grow'} /></Reveal>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(260px, 1fr))', gap: 20, marginTop: 44 }}>
            {[
              { icon: 'store', en: 'Your own storefront', ar: 'متجرك الخاص', den: 'A branded vendor profile page visible to all marketplace visitors.', dar: 'صفحة موردّ مخصصة وظاهرة لجميع زوار السوق.' },
              { icon: 'calendar', en: 'Rental calendar', ar: 'تقويم الإيجار', den: 'List furniture and equipment for rent with per-day, per-week, or per-event pricing.', dar: 'أدرج الأثاث والمعدات للإيجار بأسعار يومية أو أسبوعية أو لكل فعالية.' },
              { icon: 'mail', en: 'RFQ inbox', ar: 'صندوق عروض الأسعار', den: 'Receive and quote on customer requests for services and packages.', dar: 'استقبل طلبات العملاء وقدّم عروضك للخدمات والباقات.' },
              { icon: 'bar-chart-2', en: 'Analytics', ar: 'التحليلات', den: 'Track views, inquiries, and revenue from your dashboard.', dar: 'تتبّع المشاهدات والاستفسارات والإيرادات من لوحتك.' },
              { icon: 'shield-check', en: 'Verified Vendor Setup', ar: 'إعداد الموردّ الموثّق', den: 'Complete your vendor profile, upload required business documents, and get your account prepared for marketplace visibility after Saraya review.', dar: 'أكمل ملفك الشخصي كمورّد، وارفع المستندات التجارية المطلوبة، وجهّز حسابك للظهور في السوق بعد مراجعة سرايا.' },
              { icon: 'headset', en: 'Dedicated support', ar: 'دعم مخصص', den: 'Our vendor relations team is available to help you succeed on the platform.', dar: 'فريق علاقات الموردين لدينا متاح لمساعدتك على النجاح في المنصة.' },
            ].map((item, i) => (
              <Reveal key={i} delay={(i % 3) * 60}>
                <div style={{ padding: '22px 20px', background: 'var(--white)', borderRadius: 14, border: '1px solid var(--line)' }}>
                  <span style={{ display: 'inline-flex', width: 44, height: 44, borderRadius: 12, background: 'var(--cream)', alignItems: 'center', justifyContent: 'center', marginBottom: 14 }}>
                    <Icon name={item.icon} size={20} style={{ color: 'var(--gold-deep)' }} />
                  </span>
                  <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 20, fontWeight: 500, margin: 0, marginBottom: 6 }}>{ar ? item.ar : item.en}</h3>
                  <p style={{ fontSize: 13.5, color: 'var(--fg-secondary)', lineHeight: 1.6, margin: 0 }}>{ar ? item.dar : item.den}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </Container>
      </Section>

      {/* Platform Access Comparison */}
      <Section bg="muted">
        <Container wide>
          <Reveal><SectionHead center eyebrow={ar ? 'ما تفتحه كل باقة' : 'What each plan unlocks'} title={ar ? 'وصولك إلى منصة سرايا' : 'Your access to the Saraya platform'} /></Reveal>
          <Reveal delay={80}>
            <div style={{ marginTop: 40, overflowX: 'auto' }}>
              <table style={{ width: '100%', borderCollapse: 'collapse', fontFamily: 'var(--font-body)', fontSize: 14 }}>
                <thead>
                  <tr style={{ background: 'var(--espresso)', color: 'var(--ivory)' }}>
                    <th style={{ padding: '14px 18px', textAlign: 'start', fontWeight: 600, borderRadius: '12px 0 0 0' }}>{ar ? 'الميزة' : 'Feature'}</th>
                    <th style={{ padding: '14px 18px', textAlign: 'center', fontWeight: 600 }}>{ar ? 'مبتدئ' : 'Starter'}<br /><span style={{ fontWeight: 400, opacity: 0.7, fontSize: 12 }}>AED 99/mo</span></th>
                    <th style={{ padding: '14px 18px', textAlign: 'center', fontWeight: 600, background: 'var(--gold)', color: 'var(--espresso)' }}>{ar ? 'نمو' : 'Growth'}<br /><span style={{ fontWeight: 400, opacity: 0.7, fontSize: 12 }}>AED 199/mo</span></th>
                    <th style={{ padding: '14px 18px', textAlign: 'center', fontWeight: 600, borderRadius: '0 12px 0 0' }}>{ar ? 'مميز' : 'Premium'}<br /><span style={{ fontWeight: 400, opacity: 0.7, fontSize: 12 }}>AED 399/mo</span></th>
                  </tr>
                </thead>
                <tbody>
                  {[
                    { feature: { en: 'Marketplace listings', ar: 'قوائم في السوق' }, starter: '25', pro: '125', premium: '225' },
                    { feature: { en: 'Rental catalogue', ar: 'كتالوج التأجير' }, starter: '✓', pro: '✓', premium: '✓' },
                    { feature: { en: 'Services directory', ar: 'دليل الخدمات' }, starter: '✓', pro: '✓', premium: '✓' },
                    { feature: { en: 'RFQ leads', ar: 'طلبات عروض الأسعار' }, starter: '10/mo', pro: '40/mo', premium: ar ? 'غير محدود' : 'Unlimited' },
                    { feature: { en: 'Virtual Showroom page', ar: 'صفحة المعرض الرقمي' }, starter: '✓', pro: '✓', premium: '✓' },
                    { feature: { en: 'Featured placement', ar: 'عرض مميز' }, starter: '—', pro: '✓', premium: '✓' },
                    { feature: { en: 'Homepage carousel slot', ar: 'مكان في الكاروسيل الرئيسي' }, starter: '—', pro: '—', premium: '✓' },
                    { feature: { en: 'Dedicated account manager', ar: 'مدير حساب مخصص' }, starter: '—', pro: '—', premium: '✓' },
                    { feature: { en: 'Co-marketing opportunities', ar: 'فرص تسويق مشترك' }, starter: '—', pro: '—', premium: '✓' },
                    { feature: { en: 'Commission on sales', ar: 'العمولة على المبيعات' }, starter: '2%', pro: '1%', premium: '0.5%' },
                  ].map((row, i) => (
                    <tr key={i} style={{ background: i % 2 === 0 ? 'var(--white)' : 'var(--bg-tint)', borderBottom: '1px solid var(--line)' }}>
                      <td style={{ padding: '12px 18px', fontWeight: 500 }}>{ar ? row.feature.ar : row.feature.en}</td>
                      <td style={{ padding: '12px 18px', textAlign: 'center', color: row.starter === '—' ? 'var(--fg-muted)' : 'var(--fg-primary)' }}>{row.starter}</td>
                      <td style={{ padding: '12px 18px', textAlign: 'center', background: 'rgba(201,169,97,0.07)', color: row.pro === '—' ? 'var(--fg-muted)' : 'var(--gold-deep)', fontWeight: row.pro !== '—' ? 600 : 400 }}>{row.pro}</td>
                      <td style={{ padding: '12px 18px', textAlign: 'center', color: row.premium === '—' ? 'var(--fg-muted)' : 'var(--fg-primary)' }}>{row.premium}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </Reveal>
        </Container>
      </Section>

      {/* FAQ */}
      <Section bg="muted">
        <Container style={{ maxWidth: 720, margin: '0 auto' }}>
          <Reveal><SectionHead center eyebrow={ar ? 'الأسئلة الشائعة' : 'FAQ'} title={ar ? 'أسئلة الموردين' : 'Vendor questions'} /></Reveal>
          <div style={{ display: 'grid', gap: 12, marginTop: 40 }}>
            {FAQ.map((item, i) => (
              <div key={i} style={{ background: 'var(--white)', borderRadius: 12, border: '1px solid var(--line)', overflow: 'hidden' }}>
                <button onClick={() => setOpenFaq(openFaq === i ? null : i)} style={{ width: '100%', padding: '16px 20px', background: 'none', border: 'none', cursor: 'pointer', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12, textAlign: 'start', fontFamily: 'var(--font-body)', fontSize: 15, fontWeight: 600, color: 'var(--fg-primary)' }}>
                  {ar ? item.q.ar : item.q.en}
                  <Icon name={openFaq === i ? 'chevron-up' : 'chevron-down'} size={18} style={{ color: 'var(--fg-muted)', flexShrink: 0 }} />
                </button>
                {openFaq === i && (
                  <div style={{ padding: '0 20px 18px', fontSize: 14, color: 'var(--fg-secondary)', lineHeight: 1.65 }}>
                    {ar ? item.a.ar : item.a.en}
                  </div>
                )}
              </div>
            ))}
          </div>
        </Container>
      </Section>

      {/* CTA */}
      <Section bg="canvas">
        <Container narrow style={{ textAlign: 'center' }}>
          <Reveal>
            <SectionHead center eyebrow={ar ? 'ابدأ الآن' : 'Get started'} title={ar ? 'جاهز للانضمام؟' : 'Ready to join Saraya?'} />
            <p style={{ fontSize: 16, color: 'var(--fg-secondary)', lineHeight: 1.65, marginTop: 16, marginBottom: 32 }}>
              {ar
                ? 'سجّل حسابك، ارفع وثائقك، ووقّع الاتفاقية — وابدأ البيع في غضون أيام.'
                : 'Register your account, submit your documents, sign the agreement — and start selling within days.'}
            </p>
            <div style={{ display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap' }}>
              <Button variant="primary" size="lg" onClick={() => window.openJoinVendorModal ? window.openJoinVendorModal() : go('partner')} icon="store">
                {ar ? 'انضم كمورد' : 'Join as Vendor'}
              </Button>
              <Button variant="secondary" size="lg" onClick={() => go('vendor-agreement')}>
                {ar ? 'اقرأ اتفاقية الموردين' : 'Read Vendor Agreement'}
              </Button>
            </div>
          </Reveal>
        </Container>
      </Section>
    </main>
  );
}

/* ===================================================================
   VENDOR AGREEMENT PAGE (comprehensive)
   =================================================================== */
function VendorAgreementPage() {
  const { lang } = useLang();
  const ar = lang === 'ar';
  const { go } = useNav();
  const auth = window.useAuth ? window.useAuth() : null;

  const VERSION = '2.0';
  const EFFECTIVE = 'July 2026';

  const Clause = ({ num, title, children }) => (
    <div style={{ marginBottom: 40 }}>
      <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(18px,2.2vw,24px)', fontWeight: 500, marginBottom: 14, display: 'flex', gap: 12, alignItems: 'baseline' }}>
        <span style={{ color: 'var(--gold-deep)', fontWeight: 700, fontSize: '0.8em', minWidth: 28 }}>{num}.</span>
        {title}
      </h2>
      <div style={{ paddingInlineStart: 28, borderInlineStart: '2px solid var(--line)', display: 'grid', gap: 10 }}>
        {children}
      </div>
    </div>
  );
  const P = ({ children }) => <p style={{ fontSize: 15, lineHeight: 1.8, color: 'var(--fg-secondary)', margin: 0 }}>{children}</p>;
  const UL = ({ items }) => (
    <ul style={{ margin: 0, paddingInlineStart: 20, display: 'grid', gap: 7 }}>
      {items.map((it, i) => <li key={i} style={{ fontSize: 14.5, lineHeight: 1.7, color: 'var(--fg-secondary)' }}>{it}</li>)}
    </ul>
  );
  const InfoBox = ({ icon, children }) => (
    <div style={{ padding: '14px 18px', borderRadius: 10, background: 'var(--cream)', border: '1px solid var(--gold-light)', display: 'flex', gap: 12, alignItems: 'flex-start' }}>
      <Icon name={icon} size={18} style={{ color: 'var(--gold-deep)', flexShrink: 0, marginTop: 2 }} />
      <p style={{ margin: 0, fontSize: 14, color: 'var(--fg-secondary)', lineHeight: 1.7 }}>{children}</p>
    </div>
  );

  return (
    <main>
      <section style={{ background: 'var(--cream)', paddingTop: 140, paddingBottom: 56, borderBottom: '1px solid var(--line)' }}>
        <Container wide>
          <Eyebrow>{ar ? 'قانوني' : 'Legal'}</Eyebrow>
          <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(34px,5.5vw,60px)', fontWeight: 500, margin: '16px 0 0', letterSpacing: '-0.01em' }}>
            {ar ? 'اتفاقية الموردين الشاملة' : 'Vendor Agreement'}
          </h1>
          <p style={{ marginTop: 12, fontSize: 14, color: 'var(--fg-muted)' }}>
            {ar ? "الإصدار " + VERSION + " · سارٍ من " + EFFECTIVE : "Version " + VERSION + " · Effective " + EFFECTIVE}
          </p>
          <div style={{ marginTop: 24, display: 'flex', gap: 10, flexWrap: 'wrap' }}>
            {[
              ar ? '1. تعريفات' : '1. Definitions',
              ar ? '5. الاشتراكات' : '5. Subscriptions',
              ar ? '9. العمولات' : '9. Commissions',
              ar ? '12. الالتزامات' : '12. Obligations',
              ar ? '16. القانون' : '16. Law',
            ].map((s) => (
              <span key={s} style={{ padding: '5px 13px', borderRadius: 20, background: 'var(--white)', border: '1px solid var(--line)', fontSize: 12.5, color: 'var(--fg-secondary)' }}>{s}</span>
            ))}
          </div>
        </Container>
      </section>

      <Section bg="canvas">
        <Container style={{ maxWidth: 840, margin: '0 auto' }}>

          <InfoBox icon="alert-circle">
            {ar
              ? 'هذه الاتفاقية ملزمة قانونيًا. بالضغط على "قبول" داخل لوحة التحكم، تؤكد أنك ممثل مفوض للكيان التجاري المسجَّل وأنك تلتزم بجميع البنود الواردة أدناه.'
              : 'This Agreement is legally binding. By clicking "Accept" inside your Vendor Dashboard, you confirm that you are an authorised representative of the registered business entity and agree to be bound by all clauses below.'}
          </InfoBox>

          <div style={{ height: 48 }} />

          {ar ? <>

            <Clause num="1" title="الأطراف والتعريفات">
              <P>«سرايا»: شركة سرايا للفعاليات ذ.م.م، مزود المنصة الإلكترونية.</P>
              <P>«المورد»: الكيان التجاري المسجَّل الذي وافق على هذه الاتفاقية من خلال لوحة تحكم الموردين.</P>
              <P>«المنصة»: موقع سرايا الإلكتروني وتطبيقاته التجارية ونظام إدارة الموردين والعملاء.</P>
              <P>«القائمة»: أي منتج أو خدمة أو عنصر إيجار أو باقة يتم نشرها من قِبل المورد على المنصة.</P>
              <P>«الطلب»: أي عملية شراء أو حجز أو استئجار تُنجَز من خلال المنصة.</P>
            </Clause>

            <Clause num="2" title="طبيعة العلاقة">
              <P>سرايا وسيط تقني يربط الموردين بالعملاء. لا تُنشئ هذه الاتفاقية أي علاقة توظيف أو شراكة أو وكالة أو مشاركة في الأرباح بين سرايا والمورد.</P>
              <P>المورد يعمل كيانًا تجاريًا مستقلًا ومرخصًا من الجهات الإماراتية المختصة. سرايا لا تكون طرفًا في أي عقد بيع أو إيجار أو خدمة بين المورد والعميل.</P>
              <P>سرايا تحتفظ بحق تعليق أو إلغاء أي حساب أو قائمة تُشكّل انتهاكًا لهذه الاتفاقية أو للقوانين الإماراتية المعمول بها.</P>
            </Clause>

            <Clause num="3" title="متطلبات التسجيل">
              <UL items={[
                'رخصة تجارية سارية المفعول صادرة عن جهة إماراتية معتمدة.',
                'هوية الإمارات أو جواز السفر للممثل المفوّض بالتوقيع.',
                'شهادة التسجيل في ضريبة القيمة المضافة (إن كانت مطلوبة).',
                'رقم الحساب البنكي الإماراتي لاستلام المدفوعات.',
                'بيانات التواصل الرسمية (بريد إلكتروني خاص بالعمل ورقم هاتف).',
              ]} />
              <P>يُشترط أن تكون جميع البيانات والوثائق المقدمة صحيحة وحديثة. يجب إخطار سرايا فورًا بأي تغيير جوهري.</P>
            </Clause>

            <Clause num="4" title="إجراءات الموافقة والتفعيل">
              <P>يمر حساب المورد بالمراحل التالية: التسجيل ← رفع الوثائق ← المراجعة (تستغرق عادةً من 2 إلى 5 أيام عمل) ← الموافقة ← قبول الاتفاقية ← التفعيل الكامل.</P>
              <P>عند الموافقة أثناء فترة الترويج، يحصل المورد تلقائيًا على 60 يومًا مجانًا بباقة «نمو» دون الحاجة لبيانات بطاقة ائتمانية.</P>
            </Clause>

            <Clause num="5" title="باقات الاشتراك والرسوم">
              <div style={{ overflowX: 'auto' }}>
                <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13.5 }}>
                  <thead>
                    <tr style={{ background: 'var(--espresso)', color: 'var(--ivory)' }}>
                      {['الباقة', 'السعر الشهري', 'السنوي', 'العمولة', 'الحد الأقصى للقوائم'].map((h) => (
                        <th key={h} style={{ padding: '10px 14px', textAlign: 'center', fontWeight: 600 }}>{h}</th>
                      ))}
                    </tr>
                  </thead>
                  <tbody>
                    {[
                      ['مبتدئ (Starter)', 'AED 99', 'AED 890', '2%', '10 قوائم'],
                      ['نمو (Growth)', 'AED 199', 'AED 1,790', '1%', '50 قائمة'],
                      ['مميز (Premium)', 'AED 399', 'AED 3,590', '0.5%', 'غير محدود'],
                    ].map((r, i) => (
                      <tr key={i} style={{ background: i === 1 ? 'rgba(201,169,97,0.08)' : i % 2 === 0 ? 'var(--white)' : 'var(--bg-tint)', borderBottom: '1px solid var(--line)' }}>
                        {r.map((c, j) => <td key={j} style={{ padding: '10px 14px', textAlign: 'center', fontWeight: j === 0 ? 600 : 400, color: i === 1 && j === 3 ? 'var(--gold-deep)' : 'var(--fg-primary)' }}>{c}</td>)}
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
              <P>جميع الأسعار بالدرهم الإماراتي وتشمل ضريبة القيمة المضافة (5%). الاشتراك السنوي يوفر شهرين مجانًا مقارنة بالاشتراك الشهري.</P>
            </Clause>

            <Clause num="6" title="شروط التجربة المجانية">
              <UL items={[
                'مدة التجربة: 60 يومًا ميلاديًا من تاريخ الموافقة على الحساب.',
                'الباقة خلال التجربة: نمو (Growth) — بجميع مزاياها.',
                'لا تُطلب بيانات بطاقة الائتمان خلال فترة التجربة.',
                'عند انتهاء التجربة، ينتقل الحساب تلقائيًا إلى وضع «مقيّد» حتى اختيار باقة مدفوعة.',
                'التجربة المجانية لمرة واحدة لكل كيان تجاري.',
              ]} />
            </Clause>

            <Clause num="7" title="وضع الحساب المقيّد">
              <P>المورد في وضع «مقيّد» يستطيع: تسجيل الدخول، الاطلاع على لوحة التحكم، تحديث ملفه الشخصي، ورؤية خيارات الاشتراك.</P>
              <P>المورد في وضع «مقيّد» لا يستطيع: نشر قوائم جديدة، الرد على طلبات الأسعار، ظهور قوائمه في نتائج البحث أو صفحات الفئات، أو استلام أي عملاء محتملين.</P>
            </Clause>

            <Clause num="8" title="التجديد والإلغاء">
              <UL items={[
                'الاشتراك الشهري يتجدد تلقائيًا ما لم يُلغَ قبل 24 ساعة من تاريخ التجديد.',
                'الاشتراك السنوي غير قابل للاسترداد بعد انقضاء 14 يومًا من الشراء.',
                'طلبات الإلغاء تُقدَّم عبر لوحة تحكم الموردين أو بالتواصل مع الدعم.',
                'عند الإلغاء، تستمر القوائم حتى نهاية الفترة المدفوعة ثم تُخفى تلقائيًا.',
              ]} />
            </Clause>

            <Clause num="9" title="العمولات وآلية الدفع">
              <P>تُحتجز جميع المبالغ المدفوعة من العملاء لدى سرايا. تُصرف المستحقات للمورد خلال 5 أيام عمل بعد تأكيد التسليم أو انتهاء فترة النزاع (3 أيام).</P>
              <P>تُخصم العمولة المتفق عليها بموجب الباقة من كل مبلغ قبل صرفه. لا يُسمح بأي مدفوعات خارج المنصة تحت أي مسمى.</P>
              <P>في حال وجود شكوى مفتوحة أو نزاع قيد المراجعة، تُجمَّد المبالغ ذات الصلة حتى البت في الشكوى.</P>
              <P>تحتفظ سرايا بالحق في تأخير الصرف أو تعليقه مؤقتًا إذا كان الحساب قيد المراجعة أو في حال الاشتباه بنشاط غير مشروع.</P>
            </Clause>

            <Clause num="10" title="معايير القوائم والمحتوى">
              <UL items={[
                'يجب أن تعكس الصور والأوصاف المنتج أو الخدمة الفعلية بدقة ودون تضليل.',
                'الأسعار يجب أن تشمل ضريبة القيمة المضافة (5%) وأن تكون واضحة وشاملة.',
                'يُحظر تمامًا إدراج أي معلومات اتصال مباشرة (هاتف، واتساب، بريد إلكتروني) في القوائم أو الصور أو الأوصاف.',
                'يُحظر توجيه العملاء للتواصل خارج المنصة بأي وسيلة.',
                'القوائم يجب أن تحتوي على تفاصيل كافية: الأبعاد أو المواصفات أو الشروط المتعلقة بكل منتج أو خدمة.',
                'يحق لسرايا إزالة أو تعليق أي قائمة مخالفة دون إشعار مسبق.',
              ]} />
            </Clause>

            <Clause num="11" title="مسؤوليات التنفيذ">
              <UL items={[
                'تنفيذ الطلبات في المواعيد والأماكن المتفق عليها مع العميل.',
                'ضمان جودة المنتجات والخدمات مطابقةً للمواصفات المعلنة.',
                'تحمّل تكاليف الشحن والتوصيل والتركيب كما هو محدد في القائمة.',
                'إخطار سرايا فورًا في حال أي تأخير أو عجز عن تنفيذ الطلب.',
                'تقديم ضمان على المنتجات والخدمات وفق ما هو محدد في القائمة أو وفق القانون الإماراتي.',
                'التعامل مع طلبات الشكاوى والإرجاع بما يتوافق مع سياسة المنصة.',
              ]} />
            </Clause>

            <Clause num="12" title="الالتزامات القانونية والتنظيمية">
              <P>المورد يضمن في جميع الأوقات: امتلاك رخصة تجارية سارية المفعول، الالتزام بجميع أنظمة وقوانين الإمارات المتعلقة بنشاطه، والامتثال لأنظمة الضرائب واللوائح المتعلقة بحماية المستهلك وضمان الجودة.</P>
              <P>المورد يُقرّ بأنه المسؤول القانوني الوحيد تجاه الجهات التنظيمية والعملاء عن كل ما يتعلق بمنتجاته وخدماته.</P>
            </Clause>

            <Clause num="13" title="الملكية الفكرية">
              <P>جميع الصور والمحتوى التي يرفعها المورد يجب أن يملك حقوقها القانونية أو أن يكون مفوَّضًا باستخدامها. يمنح المورد سرايا ترخيصًا غير حصري لعرض هذا المحتوى على المنصة طوال فترة الاشتراك.</P>
              <P>لوغو سرايا وعلامتها التجارية وهوية المنصة ملك حصري لسرايا. لا يحق للمورد استخدامها لأغراض خارج المنصة دون إذن كتابي.</P>
            </Clause>

            <Clause num="14" title="السرية وحماية البيانات">
              <P>يلتزم المورد بعدم الكشف عن أي معلومات تجارية سرية تتعلق بسرايا أو بعملائها أو بالموردين الآخرين.</P>
              <P>المعلومات الشخصية للعملاء (رقم الهاتف، البريد الإلكتروني، العنوان) محمية بموجب سياسة خصوصية المنصة ولا يجوز للمورد استخدامها لأغراض تجارية خارج المنصة.</P>
            </Clause>

            <Clause num="15" title="التعليق والإنهاء">
              <P>تحتفظ سرايا بالحق في تعليق أو إنهاء حساب المورد في أي من الحالات التالية:</P>
              <UL items={[
                'انتهاك أي من بنود هذه الاتفاقية.',
                'انتهاء الرخصة التجارية أو تعليقها من الجهات الرسمية.',
                'تكرار الشكاوى من العملاء (3 شكاوى مؤكدة خلال 90 يومًا).',
                'رفض أو إهمال تنفيذ الطلبات المؤكدة.',
                'انتهاء الاشتراك دون تجديد (ينتقل تلقائيًا للوضع المقيّد).',
                'أي نشاط يضر بسمعة المنصة أو يخالف القانون الإماراتي.',
              ]} />
              <P>عند الإنهاء، تُجمَّد القوائم والمستحقات حتى تسوية أي طلبات معلقة. المبالغ المستحقة تُصرف بعد تسوية جميع الشكاوى والطلبات المفتوحة.</P>
            </Clause>

            <Clause num="16" title="حدود مسؤولية سرايا">
              <P>سرايا لا تتحمل أي مسؤولية عن: جودة منتجات أو خدمات المورد، التأخير في التسليم أو التركيب، الأضرار الناتجة عن استخدام المنتجات، أو أي خسائر غير مباشرة يتكبدها المورد.</P>
              <P>الحد الأقصى لمسؤولية سرايا تجاه المورد في أي نزاع لا يتجاوز قيمة رسوم الاشتراك المدفوعة عن الأشهر الثلاثة السابقة.</P>
            </Clause>

            <Clause num="17" title="التعديلات">
              <P>تحتفظ سرايا بالحق في تعديل هذه الاتفاقية. سيُخطَر الموردون الفعّالون بأي تعديل جوهري قبل 15 يومًا من سريانه. الاستمرار في استخدام المنصة بعد التعديل يُعدّ قبولًا ضمنيًا.</P>
            </Clause>

            <Clause num="18" title="القانون الحاكم والاختصاص القضائي">
              <P>تخضع هذه الاتفاقية لقوانين دولة الإمارات العربية المتحدة. أي نزاعات تخضع للاختصاص القضائي الحصري لمحاكم إمارة أبوظبي. قبل اللجوء للقضاء، يجب استنفاد إجراءات التسوية الودية خلال 30 يومًا.</P>
            </Clause>

          </> : <>

            <Clause num="1" title="Parties & Definitions">
              <P>"Saraya" means Saraya Events LLC, the platform operator.</P>
              <P>"Vendor" means the registered business entity that has accepted this Agreement through the Vendor Dashboard.</P>
              <P>"Platform" means the Saraya Events website, its commercial applications, and vendor and customer management systems.</P>
              <P>"Listing" means any product, service, rental item, or package published by the Vendor on the Platform.</P>
              <P>"Order" means any purchase, booking, or rental completed through the Platform.</P>
            </Clause>

            <Clause num="2" title="Nature of the Relationship">
              <P>Saraya is a technology intermediary that connects Vendors with customers. This Agreement does not create any employment, partnership, agency, or profit-sharing relationship between Saraya and the Vendor.</P>
              <P>The Vendor operates as an independent, licensed commercial entity. Saraya is not a party to any sale, rental, or service contract between the Vendor and the customer.</P>
              <P>Saraya reserves the right to suspend or terminate any account or Listing that violates this Agreement or applicable UAE law.</P>
            </Clause>

            <Clause num="3" title="Registration Requirements">
              <UL items={[
                'A valid trade licence issued by a recognised UAE authority.',
                'Emirates ID or passport of the authorised signatory.',
                'VAT registration certificate (where required by UAE law).',
                'A UAE bank account for receiving payouts.',
                'Official business contact details (business email and phone number).',
              ]} />
              <P>All information and documents provided must be accurate and current. Saraya must be notified immediately of any material change.</P>
            </Clause>

            <Clause num="4" title="Approval & Activation Process">
              <P>Vendor accounts pass through the following stages: Registration → Document Upload → Review (typically 2–5 business days) → Approval → Agreement Acceptance → Full Activation.</P>
              <P>Upon approval during the launch promotion period, the Vendor automatically receives a 60-day free trial on the Growth package, with no credit card required.</P>
            </Clause>

            <Clause num="5" title="Subscription Packages & Fees">
              <div style={{ overflowX: 'auto' }}>
                <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13.5 }}>
                  <thead>
                    <tr style={{ background: 'var(--espresso)', color: 'var(--ivory)' }}>
                      {['Package', 'Monthly', 'Annual', 'Commission', 'Listing Limit'].map((h) => (
                        <th key={h} style={{ padding: '10px 14px', textAlign: 'center', fontWeight: 600 }}>{h}</th>
                      ))}
                    </tr>
                  </thead>
                  <tbody>
                    {[
                      ['Starter', 'AED 99', 'AED 890', '2% per order', 'Up to 25'],
                      ['Growth', 'AED 199', 'AED 1,790', '1% per order', 'Up to 125'],
                      ['Premium', 'AED 399', 'AED 3,590', '0.5% per order', 'Up to 225'],
                    ].map((r, i) => (
                      <tr key={i} style={{ background: i === 1 ? 'rgba(201,169,97,0.08)' : i % 2 === 0 ? 'var(--white)' : 'var(--bg-tint)', borderBottom: '1px solid var(--line)' }}>
                        {r.map((c, j) => <td key={j} style={{ padding: '10px 14px', textAlign: 'center', fontWeight: j === 0 ? 600 : 400, color: i === 1 && j === 3 ? 'var(--gold-deep)' : 'var(--fg-primary)' }}>{c}</td>)}
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
              <P>All prices are in UAE Dirhams (AED) and inclusive of 5% VAT. Annual billing saves the equivalent of two months compared to monthly billing.</P>
            </Clause>

            <Clause num="6" title="Free Trial Terms">
              <UL items={[
                'Trial duration: 60 calendar days from the date of account approval.',
                'Trial package: Growth — with full Growth-tier features.',
                'No credit card is required during the trial period.',
                'On trial expiry, the account automatically moves to "Restricted" status until a paid subscription is chosen.',
                'The free trial is available once per business entity.',
              ]} />
            </Clause>

            <Clause num="7" title="Restricted Account Status">
              <P>A Vendor in "Restricted" status may: log in, view their dashboard, update their profile, and view subscription options.</P>
              <P>A Vendor in "Restricted" status may not: publish new listings, respond to RFQs, appear in marketplace search results or category pages, or receive any customer leads.</P>
            </Clause>

            <Clause num="8" title="Renewal & Cancellation">
              <UL items={[
                'Monthly subscriptions auto-renew unless cancelled at least 24 hours before the renewal date.',
                'Annual subscriptions are non-refundable after 14 days from purchase.',
                'Cancellation requests must be submitted via the Vendor Dashboard or by contacting support.',
                'On cancellation, active listings remain visible until the end of the paid period, after which they are automatically hidden.',
              ]} />
            </Clause>

            <Clause num="9" title="Commissions & Payout Mechanism">
              <P>All customer payments are held by Saraya. Payouts are released to the Vendor within 5 business days after the customer confirms delivery or the 3-day dispute window lapses, whichever comes first.</P>
              <P>The commission rate applicable to the Vendor's current subscription package is deducted from each payout before release. No payments outside the platform are permitted under any circumstances.</P>
              <P>Where an open complaint or active dispute exists, funds related to that order are frozen until the matter is resolved.</P>
              <P>Saraya reserves the right to delay or temporarily withhold payouts where an account is under review or where fraudulent activity is suspected.</P>
            </Clause>

            <Clause num="10" title="Listing Standards & Content Policy">
              <UL items={[
                'Images and descriptions must accurately represent the actual product or service, without exaggeration or deception.',
                'Prices must be inclusive of 5% VAT and clearly presented.',
                'Direct contact information (phone number, WhatsApp, email) must not appear in listings, images, or descriptions under any circumstances.',
                'Directing customers to communicate outside the platform is strictly prohibited.',
                'Listings must include sufficient detail: dimensions, specifications, or terms applicable to each product or service.',
                'Saraya reserves the right to remove or suspend any non-compliant listing without prior notice.',
              ]} />
            </Clause>

            <Clause num="11" title="Fulfilment Obligations">
              <UL items={[
                'Fulfil all Orders on time and at the location agreed with the customer.',
                'Ensure product and service quality matches the published specifications.',
                'Bear the costs of shipping, delivery, and installation as specified in the Listing.',
                'Notify Saraya immediately in the event of any delay or inability to fulfil an Order.',
                'Provide a warranty on products and services in accordance with what is stated in the Listing or UAE consumer protection law.',
                'Handle complaint requests and returns in accordance with platform policy.',
              ]} />
            </Clause>

            <Clause num="12" title="Legal & Regulatory Compliance">
              <P>The Vendor warrants at all times that it: holds a valid and current trade licence, complies with all UAE regulations and laws applicable to its business activities, and adheres to applicable tax regulations, consumer protection requirements, and quality standards.</P>
              <P>The Vendor acknowledges that it is the sole legal entity responsible to regulatory authorities and customers for all matters relating to its products and services.</P>
            </Clause>

            <Clause num="13" title="Intellectual Property">
              <P>All images and content uploaded by the Vendor must be owned by the Vendor or used with proper authorisation. The Vendor grants Saraya a non-exclusive licence to display this content on the Platform for the duration of the subscription.</P>
              <P>The Saraya logo, brand, and platform identity are the exclusive property of Saraya Events. The Vendor may not use them for any purpose outside the Platform without written permission.</P>
            </Clause>

            <Clause num="14" title="Confidentiality & Data Protection">
              <P>The Vendor agrees not to disclose any confidential commercial information relating to Saraya, its customers, or other vendors.</P>
              <P>Customer personal data (phone number, email, address) is protected under the platform's Privacy Policy. The Vendor may not use such information for any commercial purposes outside the Platform.</P>
            </Clause>

            <Clause num="15" title="Suspension & Termination">
              <P>Saraya reserves the right to suspend or terminate a Vendor account in any of the following circumstances:</P>
              <UL items={[
                'Breach of any provision of this Agreement.',
                'Expiry or official suspension of the trade licence.',
                'Repeated customer complaints (3 confirmed complaints within any 90-day period).',
                'Refusal or neglect to fulfil confirmed Orders.',
                'Subscription expiry without renewal (account moves automatically to Restricted status).',
                'Any activity that damages the reputation of the Platform or violates UAE law.',
              ]} />
              <P>Upon termination, listings and pending payouts are frozen until all open orders and complaints are resolved. Funds due after resolution are released net of any applicable deductions.</P>
            </Clause>

            <Clause num="16" title="Limitation of Saraya's Liability">
              <P>Saraya shall not be liable for: the quality of a Vendor's products or services, delays in delivery or installation, damage arising from product use, or any indirect losses incurred by the Vendor.</P>
              <P>Saraya's maximum liability to the Vendor in any dispute shall not exceed the subscription fees paid by the Vendor in the three months preceding the claim.</P>
            </Clause>

            <Clause num="17" title="Amendments">
              <P>Saraya reserves the right to amend this Agreement. Active Vendors will be notified of any material change at least 15 days before it takes effect. Continued use of the Platform after the amendment date constitutes deemed acceptance.</P>
            </Clause>

            <Clause num="18" title="Governing Law & Jurisdiction">
              <P>This Agreement is governed by the laws of the United Arab Emirates. Any disputes are subject to the exclusive jurisdiction of the courts of Abu Dhabi, UAE. Before resorting to litigation, the parties must attempt to resolve disputes amicably within 30 days of notice of the dispute.</P>
            </Clause>

          </>}

          <div style={{ marginTop: 56, padding: '28px 32px', borderRadius: 16, background: 'var(--cream)', border: '1.5px solid var(--gold-light)' }}>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 16, fontWeight: 600, marginBottom: 8 }}>
              {ar ? 'القبول الرقمي' : 'Digital Acceptance'}
            </div>
            <p style={{ fontSize: 14, color: 'var(--fg-secondary)', lineHeight: 1.7, margin: '0 0 20px' }}>
              {ar
                ? 'يُطلب من المورد الضغط على "أقبل الاتفاقية" داخل لوحة تحكم الموردين. بهذا الإجراء يُسجَّل قبوله مع الطابع الزمني وعنوان IP كدليل إلكتروني ملزم وفق قوانين المعاملات الإلكترونية الإماراتية.'
                : 'The Vendor is required to click "I Accept the Agreement" inside the Vendor Dashboard. This action records acceptance with a timestamp and IP address as a binding electronic record under UAE electronic transactions law.'}
            </p>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <Button variant="primary" onClick={() => window.openJoinVendorModal ? window.openJoinVendorModal() : go('vendor-packages')} icon="store">
                {ar ? 'سجّل كمورد' : 'Register as Vendor'}
              </Button>
              <Button variant="secondary" onClick={() => go('vendor-dashboard')}>
                {ar ? 'لوحة التحكم' : 'Vendor Dashboard'}
              </Button>
              <Button variant="secondary" onClick={() => go('vendor-packages')}>
                {ar ? 'عرض الخطط' : 'View Plans'}
              </Button>
            </div>
          </div>

          <div style={{ marginTop: 32, paddingTop: 24, borderTop: '1px solid var(--line)', display: 'flex', gap: 12, flexWrap: 'wrap', justifyContent: 'space-between', alignItems: 'center' }}>
            <div style={{ fontSize: 12.5, color: 'var(--fg-muted)' }}>
              {ar ? 'الإصدار ' + VERSION + ' · ' + EFFECTIVE : 'Version ' + VERSION + ' · ' + EFFECTIVE}
            </div>
            <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
              <Button variant="secondary" onClick={() => go('vendor-terms')}>{ar ? 'شروط الموردين' : 'Vendor T&C'}</Button>
              <Button variant="secondary" onClick={() => go('terms')}>{ar ? 'الشروط العامة' : 'General Terms'}</Button>
            </div>
          </div>

        </Container>
      </Section>
    </main>
  );
}

Object.assign(window, { VendorPackagesPage, VendorAgreementPage });