// Saraya Events — Legal pages: Terms, Privacy, Cancellation, Complaints

const { useState: useStateLG, useRef: useRefLG } = React;

/* ---- shared legal prose helpers ---- */
function LegalSection({ title, children }) {
  return (
    <div style={{ marginBottom: 36 }}>
      <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(20px,2.5vw,26px)', fontWeight: 500, marginBottom: 12, color: 'var(--fg-primary)' }}>{title}</h2>
      {children}
    </div>
  );
}

function LegalP({ children }) {
  return <p style={{ fontSize: 15.5, lineHeight: 1.75, color: 'var(--fg-secondary)', marginBottom: 12 }}>{children}</p>;
}

function LegalList({ items }) {
  return (
    <ul style={{ paddingInlineStart: 22, margin: '8px 0 14px', display: 'grid', gap: 6 }}>
      {items.map((item, i) => (
        <li key={i} style={{ fontSize: 15, lineHeight: 1.65, color: 'var(--fg-secondary)' }}>{item}</li>
      ))}
    </ul>
  );
}

function LegalHero({ eyebrow, title, updated }) {
  return (
    <section style={{ background: 'var(--cream)', paddingTop: 140, paddingBottom: 56, borderBottom: '1px solid var(--line)' }}>
      <Container wide>
        <Eyebrow>{eyebrow}</Eyebrow>
        <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(34px,5.5vw,60px)', fontWeight: 500, margin: '16px 0 0', letterSpacing: '-0.01em' }}>{title}</h1>
        {updated && <p style={{ marginTop: 12, fontSize: 14, color: 'var(--fg-muted)' }}>{updated}</p>}
      </Container>
    </section>
  );
}

function LegalBody({ children }) {
  return (
    <Section bg="canvas">
      <Container style={{ maxWidth: 820, margin: '0 auto' }}>
        {children}
      </Container>
    </Section>
  );
}

/* ===================================================================
   TERMS & CONDITIONS
   =================================================================== */
function TermsPage() {
  const { lang } = useLang();
  const ar = lang === 'ar';
  const { go } = useNav();

  if (ar) {
    return (
      <main>
        <LegalHero eyebrow="قانوني" title="شروط الاستخدام" updated="آخر تحديث: يونيو 2026" />
        <LegalBody>
          <LegalSection title="1. مقدمة">
            <LegalP>مرحبًا بك في سرايا للفعاليات. باستخدامك لهذه المنصة، فإنك توافق على الالتزام بالشروط والأحكام التالية. يرجى قراءتها بعناية قبل الاستمرار.</LegalP>
          </LegalSection>
          <LegalSection title="2. طبيعة المنصة">
            <LegalP>سرايا للفعاليات هي منصة وسيط إلكترونية تربط بين العملاء والموردين في قطاع الفعاليات في الإمارات العربية المتحدة. سرايا ليست طرفًا في أي عقد بيع أو إيجار أو خدمة بين العميل والمورد.</LegalP>
            <LegalP>المورد وحده هو المسؤول عن جودة المنتجات والخدمات والتسليم والتركيب والضمان وخدمة ما بعد البيع.</LegalP>
          </LegalSection>
          <LegalSection title="3. التسجيل والحسابات">
            <LegalList items={[
              "يجب أن يكون عمرك 18 عامًا أو أكثر لإنشاء حساب.",
              "أنت مسؤول عن سرية بيانات دخولك.",
              "تتحمل المسؤولية الكاملة عن جميع الأنشطة التي تتم عبر حسابك.",
              "يحق لسرايا تعليق أو إلغاء أي حساب يخالف هذه الشروط.",
            ]} />
          </LegalSection>
          <LegalSection title="4. الطلبات والمدفوعات">
            <LegalP>جميع الأسعار المعروضة بالدرهم الإماراتي (AED) وتشمل ضريبة القيمة المضافة (5%). يتم تأكيد الطلب فقط بعد اكتمال الدفع الإلكتروني.</LegalP>
            <LegalP>تُحتجز المبالغ لدى سرايا حتى تأكيد التسليم أو انتهاء فترة النزاع (3 أيام). في حال وجود شكوى مفتوحة، تُجمَّد المبالغ حتى الحل.</LegalP>
          </LegalSection>
          <LegalSection title="5. حدود مسؤولية سرايا">
            <LegalP>لا تتحمل سرايا المسؤولية عن: جودة المنتجات أو الخدمات، التأخير في التسليم، الأضرار الناتجة عن استخدام المنتجات، أو أي خلافات تجارية مباشرة بين العميل والمورد.</LegalP>
          </LegalSection>
          <LegalSection title="6. التعديلات">
            <LegalP>تحتفظ سرايا بالحق في تعديل هذه الشروط في أي وقت. سيُخطَر المستخدمون المسجلون عبر البريد الإلكتروني.</LegalP>
          </LegalSection>
          <div style={{ marginTop: 40, paddingTop: 24, borderTop: '1px solid var(--line)', display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <Button variant="secondary" onClick={() => go('privacy')}>سياسة الخصوصية</Button>
            <Button variant="secondary" onClick={() => go('cancellation-refund')}>سياسة الإلغاء</Button>
            <Button variant="secondary" onClick={() => go('complaints')}>الشكاوى والنزاعات</Button>
          </div>
        </LegalBody>
      </main>
    );
  }

  return (
    <main>
      <LegalHero eyebrow="Legal" title="Terms & Conditions" updated="Last updated: June 2026" />
      <LegalBody>
        <LegalSection title="1. Introduction">
          <LegalP>Welcome to Saraya Events. By accessing or using this platform, you agree to be bound by these Terms and Conditions. Please read them carefully before proceeding.</LegalP>
        </LegalSection>
        <LegalSection title="2. Nature of the Platform">
          <LegalP>Saraya Events is an intermediary marketplace platform connecting customers with vendors in the UAE events sector. Saraya is not a party to any sale, rental, or service contract between a customer and a vendor.</LegalP>
          <LegalP>The vendor is solely responsible for product quality, accuracy, delivery, installation, warranty, after-sales service, claims, and compensation arising from their listings.</LegalP>
        </LegalSection>
        <LegalSection title="3. Accounts & Registration">
          <LegalList items={[
            "You must be 18 years or older to create an account.",
            "You are responsible for keeping your login credentials confidential.",
            "You bear full responsibility for all activity conducted through your account.",
            "Saraya reserves the right to suspend or terminate any account that violates these terms.",
          ]} />
        </LegalSection>
        <LegalSection title="4. Orders & Payments">
          <LegalP>All prices are displayed in UAE Dirhams (AED) and are inclusive of 5% VAT. Orders are confirmed only after successful electronic payment is received.</LegalP>
          <LegalP>Funds are held by Saraya until delivery is confirmed by the customer or the 3-day dispute window lapses. Open complaints freeze payouts until resolution.</LegalP>
        </LegalSection>
        <LegalSection title="5. Limitation of Saraya's Liability">
          <LegalP>Saraya shall not be liable for: product or service quality, delivery delays, damage arising from product use, or any commercial disputes directly between a customer and a vendor. Our total liability, where applicable, shall not exceed the commission collected on the transaction in question.</LegalP>
        </LegalSection>
        <LegalSection title="6. Prohibited Uses">
          <LegalList items={[
            "Creating false or misleading listings.",
            "Circumventing platform payment systems.",
            "Uploading harmful, defamatory, or illegal content.",
            "Impersonating another person or business.",
          ]} />
        </LegalSection>
        <LegalSection title="7. Governing Law">
          <LegalP>These terms are governed by the laws of the United Arab Emirates. Any disputes shall be subject to the exclusive jurisdiction of the courts of Abu Dhabi, UAE.</LegalP>
        </LegalSection>
        <LegalSection title="8. Amendments">
          <LegalP>Saraya reserves the right to amend these terms at any time. Registered users will be notified by email. Continued use of the platform constitutes acceptance of revised terms.</LegalP>
        </LegalSection>
        <LegalSection title="9. Contact">
          <LegalP>For legal enquiries, contact us at legal@sarayaevents.com or write to Saraya Events, Abu Dhabi, UAE.</LegalP>
        </LegalSection>
        <div style={{ marginTop: 40, paddingTop: 24, borderTop: '1px solid var(--line)', display: 'flex', gap: 12, flexWrap: 'wrap' }}>
          <Button variant="secondary" onClick={() => go('privacy')}>Privacy Policy</Button>
          <Button variant="secondary" onClick={() => go('cancellation-refund')}>Cancellation Policy</Button>
          <Button variant="secondary" onClick={() => go('complaints')}>Complaints</Button>
          <Button variant="secondary" onClick={() => go('vendor-terms')}>Vendor T&amp;C</Button>
          <Button variant="secondary" onClick={() => go('customer-terms')}>Customer T&amp;C</Button>
        </div>
      </LegalBody>
    </main>
  );
}

/* ===================================================================
   PRIVACY POLICY
   =================================================================== */
function PrivacyPage() {
  const { lang } = useLang();
  const ar = lang === 'ar';
  const { go } = useNav();

  if (ar) {
    return (
      <main>
        <LegalHero eyebrow="قانوني" title="سياسة الخصوصية" updated="آخر تحديث: يونيو 2026" />
        <LegalBody>
          <LegalSection title="1. البيانات التي نجمعها">
            <LegalList items={[
              "معلومات التسجيل: الاسم، البريد الإلكتروني، رقم الهاتف.",
              "بيانات الطلبات والمعاملات.",
              "بيانات استخدام المنصة وسجلات التصفح.",
              "وثائق التحقق للموردين (الرخصة التجارية، الهوية).",
            ]} />
          </LegalSection>
          <LegalSection title="2. كيف نستخدم بياناتك">
            <LegalList items={[
              "معالجة الطلبات والمدفوعات.",
              "التواصل معك بشأن طلباتك وحسابك.",
              "تحسين تجربة المنصة.",
              "الامتثال للمتطلبات القانونية في دولة الإمارات.",
            ]} />
          </LegalSection>
          <LegalSection title="3. مشاركة البيانات">
            <LegalP>لا نبيع بياناتك الشخصية لأي طرف ثالث. نشارك البيانات فقط مع: الموردين المعنيين بطلبك، ومزودي خدمات الدفع والبنية التحتية التقنية، والجهات التنظيمية عند الاقتضاء قانونًا.</LegalP>
          </LegalSection>
          <LegalSection title="4. أمان البيانات">
            <LegalP>نستخدم Supabase لتخزين البيانات مع سياسات أمان على مستوى الصفوف (RLS). جميع الاتصالات مشفرة عبر HTTPS. مفاتيح الخدمة لا تُكشف أبدًا في المتصفح.</LegalP>
          </LegalSection>
          <LegalSection title="5. حقوقك">
            <LegalList items={[
              "الوصول إلى بياناتك الشخصية وتصحيحها.",
              "طلب حذف حسابك وبياناتك.",
              "الاعتراض على معالجة بياناتك.",
            ]} />
            <LegalP>لممارسة حقوقك، تواصل معنا عبر privacy@sarayaevents.com.</LegalP>
          </LegalSection>
          <LegalSection title="6. الاحتفاظ بالبيانات">
            <LegalP>نحتفظ ببيانات الحساب طوال فترة نشاطه، وبسجلات المعاملات لمدة 7 سنوات وفق المتطلبات القانونية الإماراتية.</LegalP>
          </LegalSection>
          <div style={{ marginTop: 40, paddingTop: 24, borderTop: '1px solid var(--line)', display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <Button variant="secondary" onClick={() => go('terms')}>شروط الاستخدام</Button>
            <Button variant="secondary" onClick={() => go('cancellation-refund')}>سياسة الإلغاء</Button>
          </div>
        </LegalBody>
      </main>
    );
  }

  return (
    <main>
      <LegalHero eyebrow="Legal" title="Privacy Policy" updated="Last updated: June 2026" />
      <LegalBody>
        <LegalSection title="1. Data We Collect">
          <LegalList items={[
            "Registration information: name, email address, phone number.",
            "Order and transaction data.",
            "Platform usage data and browsing logs.",
            "Vendor verification documents (trade license, Emirates ID).",
          ]} />
        </LegalSection>
        <LegalSection title="2. How We Use Your Data">
          <LegalList items={[
            "Processing orders and payments.",
            "Communicating with you about your orders and account.",
            "Improving the platform experience.",
            "Complying with UAE legal requirements.",
          ]} />
        </LegalSection>
        <LegalSection title="3. Data Sharing">
          <LegalP>We do not sell your personal data to any third party. We share data only with: vendors involved in your order, payment and technical infrastructure service providers, and regulatory authorities where required by law.</LegalP>
        </LegalSection>
        <LegalSection title="4. Data Security">
          <LegalP>We use Supabase for data storage with Row-Level Security (RLS) policies. All communications are encrypted via HTTPS. Service-role keys are never exposed in the browser. Vendor documents are stored in private, access-controlled storage buckets.</LegalP>
        </LegalSection>
        <LegalSection title="5. Your Rights">
          <LegalList items={[
            "Access and correct your personal data.",
            "Request deletion of your account and associated data.",
            "Object to the processing of your data.",
            "Request a portable copy of your data.",
          ]} />
          <LegalP>To exercise your rights, contact us at privacy@sarayaevents.com.</LegalP>
        </LegalSection>
        <LegalSection title="6. Cookies">
          <LegalP>We use localStorage to save your language preference and shopping cart. We do not use third-party tracking cookies. Analytics, if enabled, is limited to anonymised, aggregate usage data.</LegalP>
        </LegalSection>
        <LegalSection title="7. Data Retention">
          <LegalP>Account data is retained for the duration of the account. Transaction records are kept for 7 years in line with UAE legal requirements. Vendor documents are retained for the duration of the vendor subscription plus 3 years.</LegalP>
        </LegalSection>
        <LegalSection title="8. Contact">
          <LegalP>For privacy enquiries, contact privacy@sarayaevents.com or write to Saraya Events, Abu Dhabi, UAE.</LegalP>
        </LegalSection>
        <div style={{ marginTop: 40, paddingTop: 24, borderTop: '1px solid var(--line)', display: 'flex', gap: 12, flexWrap: 'wrap' }}>
          <Button variant="secondary" onClick={() => go('terms')}>Terms & Conditions</Button>
          <Button variant="secondary" onClick={() => go('cancellation-refund')}>Cancellation Policy</Button>
        </div>
      </LegalBody>
    </main>
  );
}

/* ===================================================================
   CANCELLATION & REFUND POLICY
   =================================================================== */
function CancellationPage() {
  const { lang } = useLang();
  const ar = lang === 'ar';
  const { go } = useNav();

  if (ar) {
    return (
      <main>
        <LegalHero eyebrow="قانوني" title="سياسة الإلغاء والاسترداد" updated="آخر تحديث: يونيو 2026" />
        <LegalBody>
          <div style={{ padding: '16px 20px', borderRadius: 12, background: 'var(--cream)', border: '1px solid var(--gold-light)', marginBottom: 32 }}>
            <p style={{ margin: 0, fontSize: 14, color: 'var(--fg-secondary)', lineHeight: 1.6 }}>
              <strong style={{ color: 'var(--fg-primary)' }}>ملاحظة: </strong>
              كل مورد قد تكون له سياسة إلغاء إضافية. راجع صفحة المنتج أو تواصل مع المورد مباشرة قبل الطلب.
            </p>
          </div>
          <LegalSection title="منتجات المتجر">
            <LegalList items={[
              "إلغاء مجاني خلال ساعتين من تأكيد الطلب.",
              "استرداد كامل في حال عيب مصنعي أو تسليم خاطئ.",
              "لا يُقبل الاسترداد لمنتجات الزهور والمنتجات المخصصة بعد التصنيع.",
              "المنتجات الرقمية غير قابلة للإلغاء بعد التنزيل.",
            ]} />
          </LegalSection>
          <LegalSection title="الإيجار">
            <LegalList items={[
              "إلغاء مجاني قبل 72 ساعة من موعد التسليم.",
              "خصم 50% للإلغاء بين 24 و72 ساعة.",
              "لا استرداد للإلغاء في أقل من 24 ساعة.",
              "تُحتجز الوديعة حتى استلام القطع ومراجعتها.",
            ]} />
          </LegalSection>
          <LegalSection title="الخدمات والباقات">
            <LegalP>تُحدَّد شروط الإلغاء بحسب عقد الخدمة مع كل مورد. عمومًا: الإلغاء قبل 30 يومًا يُعيد كامل المبلغ، قبل 14 يومًا يُعيد 50%، وأقل من 14 يومًا لا استرداد.</LegalP>
          </LegalSection>
          <LegalSection title="آلية الاسترداد">
            <LegalP>يُعاد المبلغ إلى وسيلة الدفع الأصلية خلال 5-10 أيام عمل. في حالة النزاع، يُعلَّق الاسترداد حتى الحل.</LegalP>
          </LegalSection>
          <div style={{ marginTop: 40, paddingTop: 24, borderTop: '1px solid var(--line)', display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <Button variant="secondary" onClick={() => go('complaints')}>تقديم شكوى</Button>
            <Button variant="secondary" onClick={() => go('terms')}>شروط الاستخدام</Button>
          </div>
        </LegalBody>
      </main>
    );
  }

  return (
    <main>
      <LegalHero eyebrow="Legal" title="Cancellation & Refund Policy" updated="Last updated: June 2026" />
      <LegalBody>
        <div style={{ padding: '16px 20px', borderRadius: 12, background: 'var(--cream)', border: '1px solid var(--gold-light)', marginBottom: 32 }}>
          <p style={{ margin: 0, fontSize: 14, color: 'var(--fg-secondary)', lineHeight: 1.6 }}>
            <strong style={{ color: 'var(--fg-primary)' }}>Note: </strong>
            Individual vendors may have additional cancellation terms specific to their products or services. Always review the listing detail page before placing an order. To discuss a listing, use the Saraya WhatsApp button — our team will coordinate with the vendor on your behalf.
          </p>
        </div>
        <LegalSection title="Store Products">
          <LegalList items={[
            "Free cancellation within 2 hours of order confirmation.",
            "Full refund for items delivered with a manufacturing defect or incorrect item.",
            "Flower products and custom-made items are non-refundable once production has begun.",
            "Digital products are non-refundable once downloaded.",
          ]} />
        </LegalSection>
        <LegalSection title="Furniture & Equipment Rentals">
          <LegalList items={[
            "Free cancellation more than 72 hours before the scheduled delivery time.",
            "50% refund for cancellations between 24 and 72 hours before delivery.",
            "No refund for cancellations within 24 hours of delivery.",
            "Security deposits are held until items are returned and inspected.",
            "Damage charges are deducted from the deposit per the rental agreement.",
          ]} />
        </LegalSection>
        <LegalSection title="Services & Packages">
          <LegalP>Cancellation terms for services and event packages are governed by the individual service contract agreed with the vendor. General platform guidelines:</LegalP>
          <LegalList items={[
            "Cancellation 30+ days before event: full refund of platform portion.",
            "Cancellation 14-29 days before event: 50% refund of platform portion.",
            "Cancellation less than 14 days before event: no refund.",
          ]} />
          <LegalP>Vendor-held deposits may have different terms — see your contract.</LegalP>
        </LegalSection>
        <LegalSection title="How Refunds Are Processed">
          <LegalP>Refunds are returned to the original payment method within 5-10 business days. In cases of an active dispute or complaint, the refund is suspended until resolution.</LegalP>
          <LegalP>To request a cancellation or refund, contact us at support@sarayaevents.com or use the Complaints form.</LegalP>
        </LegalSection>
        <LegalSection title="Force Majeure">
          <LegalP>In cases of force majeure (natural disasters, government restrictions, pandemic measures), Saraya will work with vendors and customers on a case-by-case basis to reach a fair resolution.</LegalP>
        </LegalSection>
        <div style={{ marginTop: 40, paddingTop: 24, borderTop: '1px solid var(--line)', display: 'flex', gap: 12, flexWrap: 'wrap' }}>
          <Button variant="secondary" onClick={() => go('complaints')}>Submit a Complaint</Button>
          <Button variant="secondary" onClick={() => go('terms')}>Terms & Conditions</Button>
        </div>
      </LegalBody>
    </main>
  );
}

/* ===================================================================
   COMPLAINTS & DISPUTES
   =================================================================== */
function ComplaintsPage() {
  const { lang } = useLang();
  const ar = lang === 'ar';
  const db = window.SarayaDB;

  const auth = window.useAuth ? window.useAuth() : null;
  const user = auth ? auth.user : null;

  const COMPLAINT_TYPES = [
    { value: 'booking_issue',  en: 'Booking issue',  ar: 'مشكلة في الحجز' },
    { value: 'rental_issue',   en: 'Rental issue',   ar: 'مشكلة في الإيجار' },
    { value: 'service_issue',  en: 'Service issue',  ar: 'مشكلة في الخدمة' },
    { value: 'vendor_issue',   en: 'Vendor issue',   ar: 'مشكلة مع المورد' },
    { value: 'payment_issue',  en: 'Payment issue',  ar: 'مشكلة في الدفع' },
    { value: 'delivery_issue', en: 'Delivery issue', ar: 'مشكلة في التوصيل' },
    { value: 'other',          en: 'Other',          ar: 'أخرى' },
  ];

  const USER_TYPES = [
    { value: 'customer', en: 'Customer', ar: 'عميل' },
    { value: 'vendor',    en: 'Vendor',   ar: 'مورد' },
    { value: 'other',     en: 'Other',    ar: 'أخرى' },
  ];

  const blank = { contact_name: user ? (user.display_name || '') : '', user_type: 'customer', related_reference: '', complaint_type: '', description: '', contact_phone: '', contact_email: user ? user.email : '' };
  const [form, setForm] = useStateLG(blank);
  const [file, setFile] = useStateLG(null);
  const [busy, setBusy] = useStateLG(false);
  const [sent, setSent] = useStateLG(false);
  const [refNo, setRefNo] = useStateLG('');
  const [err, setErr] = useStateLG('');

  const set = (k, v) => setForm((p) => ({ ...p, [k]: v }));

  const submit = async (e) => {
    e.preventDefault();
    if (!form.contact_name || form.contact_name.trim().length < 2) { setErr(ar ? 'يرجى إدخال الاسم الكامل' : 'Please enter your full name'); return; }
    if (!form.complaint_type) { setErr(ar ? 'يرجى اختيار نوع الشكوى' : 'Please select a complaint type'); return; }
    if (!form.description || form.description.trim().length < 20) {
      setErr(ar ? 'يرجى وصف المشكلة بمزيد من التفاصيل (20 حرفًا على الأقل)' : 'Please describe the issue in more detail (at least 20 characters)');
      return;
    }
    if (!form.contact_email) { setErr(ar ? 'يرجى إدخال البريد الإلكتروني' : 'Please enter your contact email'); return; }
    setBusy(true); setErr('');

    if (db) {
      let attachment_url = null;
      if (file) {
        const ext = (file.name.split('.').pop() || 'bin');
        const path = `${Date.now()}-${Math.random().toString(36).slice(2, 8)}.${ext}`;
        const { error: upErr } = await db.storage.from('complaint-attachments').upload(path, file, { upsert: true });
        if (upErr) {
          setErr(ar ? 'تعذّر رفع المرفق. حاول مرة أخرى بدون المرفق أو تواصل معنا عبر البريد الإلكتروني.' : 'Could not upload the attachment. Please try again without it, or contact us by email.');
          setBusy(false); return;
        }
        attachment_url = path;
      }

      const { data, error } = await db.from('complaints').insert({
        filed_by: user ? user.id : null,
        filed_by_role: form.user_type,
        complaint_type: form.complaint_type,
        description: form.description.trim(),
        contact_name: form.contact_name.trim(),
        contact_phone: form.contact_phone || null,
        contact_email: form.contact_email || null,
        related_reference: form.related_reference || null,
        attachment_url,
        status: 'open',
      }).select('reference').single();

      if (error) { setErr(ar ? 'تعذّر إرسال الشكوى. حاول مرة أخرى أو تواصل معنا عبر البريد الإلكتروني.' : 'Submission failed. Please try again or contact us by email.'); setBusy(false); return; }
      setRefNo(data ? data.reference : '');
    } else {
      const subject = "Complaint — Saraya Events: " + (COMPLAINT_TYPES.find((t) => t.value === form.complaint_type) || {}).en;
      const body = "Name: " + form.contact_name + "\nUser type: " + form.user_type + "\nRelated order/listing/vendor: " + (form.related_reference || "N/A") + "\n\n" + form.description + "\n\nContact: " + (form.contact_email || form.contact_phone || "");
      window.location.href = window.SARAYA.mailLink(subject, body);
      setRefNo('');
    }

    setBusy(false); setSent(true); setForm(blank); setFile(null);
  };

  const inpStyle = { width: '100%', padding: '11px 14px', borderRadius: 10, border: '1.5px solid var(--line)', fontFamily: 'var(--font-body)', fontSize: 14.5, outline: 'none', background: 'var(--white)', boxSizing: 'border-box' };
  const labelStyle = { display: 'block', fontSize: 12.5, fontWeight: 600, color: 'var(--fg-secondary)', textTransform: 'uppercase', letterSpacing: '.06em', marginBottom: 6 };

  return (
    <main>
      <LegalHero
        eyebrow={ar ? 'الدعم' : 'Support'}
        title={ar ? 'الشكاوى والنزاعات' : 'Complaints & Disputes'}
        updated={ar ? 'نهدف إلى الرد على جميع الشكاوى خلال 2 يوم عمل' : 'We aim to respond to all complaints within 2 business days'}
      />

      <Section bg="canvas">
        <Container wide>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(280px,100%), 1fr))', gap: 48, alignItems: 'start' }}>

            {/* Left: Process explanation */}
            <div>
              <SectionHead eyebrow={ar ? 'الإجراء' : 'The process'} title={ar ? 'كيف نعالج شكواك' : 'How we handle your complaint'} />
              <div style={{ display: 'grid', gap: 20, marginTop: 28 }}>
                {[
                  { n: '1', icon: 'file-text', en: 'Submit your complaint', ar: 'تقديم الشكوى', den: 'Fill out the form with your details and a clear description of the issue.', dar: 'املأ النموذج ببياناتك ووصف واضح للمشكلة.' },
                  { n: '2', icon: 'clock', en: 'We review within 48 hours', ar: 'المراجعة خلال 48 ساعة', den: "Our team reviews the complaint and contacts both you and the vendor if involved.", dar: "يراجع فريقنا الشكوى ويتواصل معك ومع المورد إن وُجد." },
                  { n: '3', icon: 'shield-check', en: 'Resolution & tracking', ar: 'الحل والمتابعة', den: 'We work toward a fair resolution. Track your case status anytime using your reference number. Open complaints freeze vendor payouts until resolved.', dar: 'نسعى لحل عادل. يمكنك متابعة حالة شكواك في أي وقت برقم المرجع. الشكاوى المفتوحة تُجمِّد مدفوعات المورد حتى الحل.' },
                ].map((step) => (
                  <div key={step.n} style={{ display: 'flex', gap: 16, alignItems: 'flex-start' }}>
                    <span style={{ flexShrink: 0, width: 38, height: 38, borderRadius: '50%', background: 'var(--gold-tint)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-display)', fontSize: 18, fontWeight: 600, color: 'var(--gold-deep)' }}>{step.n}</span>
                    <div>
                      <div style={{ fontWeight: 600, fontSize: 15, marginBottom: 3 }}>{ar ? step.ar : step.en}</div>
                      <div style={{ fontSize: 13.5, color: 'var(--fg-secondary)', lineHeight: 1.6 }}>{ar ? step.dar : step.den}</div>
                    </div>
                  </div>
                ))}
              </div>
              <div style={{ marginTop: 32, padding: '16px 20px', borderRadius: 12, background: 'var(--cream)', border: '1px solid var(--gold-light)' }}>
                <p style={{ margin: 0, fontSize: 13.5, color: 'var(--fg-secondary)', lineHeight: 1.65 }}>
                  <strong style={{ color: 'var(--fg-primary)', display: 'block', marginBottom: 4 }}>{ar ? 'قناة رسمية للشكاوى' : 'An official channel for complaints'}</strong>
                  {ar
                    ? 'هذا النموذج هو القناة الرسمية للشكاوى والنزاعات حتى يمكن تتبع حالتك برقم مرجعي. للاستفسارات العامة فقط، يمكنك مراسلتنا عبر البريد الإلكتروني.'
                    : 'This form is the official channel for complaints and disputes so your case can be tracked with a reference number. For general questions only, reach us by email.'}
                </p>
              </div>
            </div>

            {/* Right: Form */}
            <div style={{ background: 'var(--white)', borderRadius: 20, border: '1px solid var(--line)', padding: 'clamp(24px,4vw,36px)', boxShadow: 'var(--shadow-soft)' }}>
              {sent ? (
                <div style={{ textAlign: 'center', padding: '32px 20px' }}>
                  <span style={{ display: 'inline-flex', width: 64, height: 64, borderRadius: '50%', background: '#DCFCE7', alignItems: 'center', justifyContent: 'center', marginBottom: 20 }}>
                    <Icon name="check-circle-2" size={32} style={{ color: '#16A34A' }} />
                  </span>
                  <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 24, fontWeight: 500, marginBottom: 10 }}>
                    {ar ? 'تم استلام شكواك' : 'Complaint Received'}
                  </h3>
                  <p style={{ color: 'var(--fg-secondary)', fontSize: 14.5, lineHeight: 1.65 }}>
                    {ar
                      ? 'سيتواصل معك فريقنا خلال يومي عمل. شكرًا لتواصلك معنا.'
                      : 'Our team will reach out within 2 business days. Thank you for contacting us.'}
                  </p>
                  {refNo && (
                    <div style={{ display: 'inline-block', padding: '12px 22px', borderRadius: 12, background: 'var(--gold-tint)', border: '1px solid var(--line)', margin: '8px 0 4px' }}>
                      <div style={{ fontSize: 11.5, fontWeight: 600, color: 'var(--fg-secondary)', textTransform: 'uppercase', letterSpacing: '.06em', marginBottom: 4 }}>
                        {ar ? 'رقم الشكوى المرجعي' : 'Your reference number'}
                      </div>
                      <div style={{ fontFamily: 'var(--font-display)', fontSize: 20, fontWeight: 600, color: 'var(--gold-deep)', letterSpacing: '.02em' }}>{refNo}</div>
                    </div>
                  )}
                  <p style={{ color: 'var(--fg-muted)', fontSize: 12.5, lineHeight: 1.6 }}>
                    {ar ? 'يرجى الاحتفاظ بهذا الرقم لمتابعة حالة شكواك.' : 'Please keep this number to track the status of your complaint.'}
                  </p>
                  <Button variant="secondary" style={{ marginTop: 24 }} onClick={() => { setSent(false); setRefNo(''); }}>
                    {ar ? 'تقديم شكوى أخرى' : 'Submit another'}
                  </Button>
                </div>
              ) : (
                <form onSubmit={submit} style={{ display: 'grid', gap: 16 }}>
                  <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 500, margin: 0, marginBottom: 4 }}>
                    {ar ? 'نموذج الشكوى' : 'Complaint Form'}
                  </h3>

                  {err && (
                    <div style={{ padding: '10px 14px', borderRadius: 9, background: '#fef2f2', color: '#dc2626', fontSize: 13.5 }}>{err}</div>
                  )}

                  <div>
                    <label style={labelStyle}>{ar ? 'الاسم الكامل *' : 'Full Name *'}</label>
                    <input required value={form.contact_name} onChange={(e) => set('contact_name', e.target.value)} placeholder={ar ? 'اسمك الكامل' : 'Your full name'} style={inpStyle} />
                  </div>

                  <div>
                    <label style={labelStyle}>{ar ? 'نوع مقدّم الشكوى *' : 'User Type *'}</label>
                    <select required value={form.user_type} onChange={(e) => set('user_type', e.target.value)} style={{ ...inpStyle, cursor: 'pointer' }}>
                      {USER_TYPES.map((t) => <option key={t.value} value={t.value}>{ar ? t.ar : t.en}</option>)}
                    </select>
                  </div>

                  <div>
                    <label style={labelStyle}>{ar ? 'الطلب / القائمة / المورد المرتبط (اختياري)' : 'Related Order / Listing / Vendor (optional)'}</label>
                    <input value={form.related_reference} onChange={(e) => set('related_reference', e.target.value)} placeholder={ar ? 'مثال: ORD-2026-001 أو اسم المورد' : 'e.g. ORD-2026-001 or vendor name'} style={inpStyle} />
                  </div>

                  <div>
                    <label style={labelStyle}>{ar ? 'نوع الشكوى *' : 'Complaint Type *'}</label>
                    <select required value={form.complaint_type} onChange={(e) => set('complaint_type', e.target.value)} style={{ ...inpStyle, cursor: 'pointer' }}>
                      <option value="">{ar ? '— اختر —' : '— Select —'}</option>
                      {COMPLAINT_TYPES.map((t) => <option key={t.value} value={t.value}>{ar ? t.ar : t.en}</option>)}
                    </select>
                  </div>

                  <div>
                    <label style={labelStyle}>{ar ? 'تفاصيل المشكلة *' : 'Issue Description *'}</label>
                    <textarea required rows={5} value={form.description} onChange={(e) => set('description', e.target.value)}
                      placeholder={ar ? 'اشرح المشكلة بالتفصيل…' : 'Please describe the issue in detail…'}
                      style={{ ...inpStyle, resize: 'vertical' }} />
                  </div>

                  <div>
                    <label style={labelStyle}>{ar ? 'مرفق (اختياري)' : 'Attachment (optional)'}</label>
                    <input type="file" accept="image/*,.pdf" onChange={(e) => setFile(e.target.files ? e.target.files[0] : null)} style={{ fontSize: 13.5 }} />
                  </div>

                  <div>
                    <label style={labelStyle}>{ar ? 'البريد الإلكتروني للتواصل *' : 'Contact Email *'}</label>
                    <input required type="email" value={form.contact_email} onChange={(e) => set('contact_email', e.target.value)} placeholder="email@example.com" style={inpStyle} />
                  </div>

                  <div>
                    <label style={labelStyle}>{ar ? 'رقم الهاتف (اختياري)' : 'Phone Number (optional)'}</label>
                    <input type="tel" value={form.contact_phone} onChange={(e) => set('contact_phone', e.target.value)} placeholder="+971 5X XXX XXXX" style={inpStyle} />
                  </div>

                  <Button variant="primary" size="lg" full type="submit" disabled={busy}>
                    {busy ? (ar ? 'جارٍ الإرسال…' : 'Submitting…') : (ar ? 'إرسال الشكوى' : 'Submit Complaint')}
                  </Button>

                  <p style={{ fontSize: 12.5, color: 'var(--fg-muted)', textAlign: 'center', lineHeight: 1.55, margin: 0 }}>
                    {ar
                      ? 'بالإرسال، أنت توافق على معالجة بياناتك وفق سياسة الخصوصية.'
                      : 'By submitting, you agree to the processing of your data in accordance with our Privacy Policy.'}
                  </p>
                </form>
              )}
            </div>

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


/* ===================================================================
   VENDOR TERMS & CONDITIONS
   =================================================================== */
function VendorTermsPage() {
  const { lang } = useLang();
  const ar = lang === 'ar';
  const { go } = useNav();

  if (ar) {
    return (
      <main>
        <LegalHero eyebrow="شروط الموردين" title="شروط وأحكام الموردين" updated="آخر تحديث: يوليو 2026" />
        <LegalBody>
          <LegalSection title="1. قبول الشروط">
            <LegalP>بتسجيلك كمورد على منصة سرايا للفعاليات وقبولك لاتفاقية المورد، فإنك توافق على الالتزام الكامل بهذه الشروط والأحكام. تُطبَّق هذه الشروط على جميع الموردين المسجلين بغض النظر عن خطة الاشتراك.</LegalP>
          </LegalSection>
          <LegalSection title="2. دور سرايا كوسيط">
            <LegalP>سرايا للفعاليات هي منصة وسيط تقني فقط. لا تتحمل سرايا أي مسؤولية عن جودة منتجاتك أو خدماتك، أو التزامك بمواعيد التسليم والتركيب، أو صحة المعلومات الواردة في قوائمك.</LegalP>
            <LegalP>أنت وحدك المسؤول قانونيًا وتجاريًا تجاه العميل عن كل ما يتعلق بتنفيذ الطلب، ويشمل ذلك: الجودة، التسليم، التركيب، الضمان، خدمة ما بعد البيع، والتعويض عن أي أضرار.</LegalP>
          </LegalSection>
          <LegalSection title="3. متطلبات التسجيل">
            <LegalList items={[
              "يجب أن تكون شركة مسجلة أو منشأة فردية مرخصة في دولة الإمارات العربية المتحدة.",
              "يُشترط تقديم رخصة تجارية سارية المفعول وهوية المفوّض بالتوقيع.",
              "جميع المعلومات المقدمة يجب أن تكون دقيقة وحديثة. الإدلاء بمعلومات مضللة يستوجب الإلغاء الفوري.",
              "يحق للمورد المسجل تفعيل حسابه فور الموافقة من فريق سرايا.",
            ]} />
          </LegalSection>
          <LegalSection title="4. باقات الاشتراك">
            <LegalP>تتوفر ثلاث باقات: الباقة الأساسية (Starter) بـ 99 درهمًا شهريًا، وباقة النمو (Growth) بـ 199 درهمًا شهريًا، والباقة المميزة (Premium) بـ 399 درهمًا شهريًا. تُحتسب الاشتراكات السنوية بخصم شهرين.</LegalP>
            <LegalP>فترة التجربة المجانية: عند إطلاق المنصة، يحصل الموردون المعتمدون تلقائيًا على 60 يومًا مجانًا بباقة النمو دون الحاجة لبيانات بطاقة ائتمانية. بعد انتهاء التجربة، يجب الاشتراك في إحدى الباقات المدفوعة للاستمرار في نشر القوائم واستقبال الطلبات.</LegalP>
            <LegalP>معدلات العمولة على المعاملات: مبتدئ 2٪، نمو 1٪، مميز 0.5٪. تُخصم العمولة تلقائيًا من كل مبلغ مستحق قبل صرفه للمورد.</LegalP>
            <LegalP>المورد في وضع "مقيّد" لا يستطيع نشر قوائم جديدة أو الرد على طلبات الأسعار أو الظهور في نتائج البحث، غير أنه يمكنه الاطلاع على لوحة التحكم وتحديث ملفه الشخصي واختيار باقة والدفع.</LegalP>
          </LegalSection>
          <LegalSection title="5. ضوابط القوائم">
            <LegalList items={[
              "يجب أن تعكس الصور والأوصاف المنتج أو الخدمة الفعلية بدقة ودون تضليل.",
              "الأسعار المعروضة يجب أن تشمل ضريبة القيمة المضافة (5%).",
              "يُمنع إدراج معلومات اتصال مباشرة (هاتف، واتساب، بريد إلكتروني) في القوائم أو الأوصاف أو الصور.",
              "يُمنع توجيه العملاء للتواصل خارج المنصة بأي شكل من الأشكال.",
              "يحق لسرايا إزالة أي قائمة تخالف هذه السياسة دون إشعار مسبق.",
            ]} />
          </LegalSection>
          <LegalSection title="6. العمولات والمدفوعات">
            <LegalP>تحتجز سرايا جميع المبالغ المدفوعة من العملاء وتحولها للمورد بعد تأكيد التسليم وانتهاء فترة النزاع (3 أيام عمل). في حال وجود شكوى مفتوحة، تُجمَّد المبالغ حتى الحل.</LegalP>
            <LegalP>تخصم سرايا نسبة عمولة متفق عليها من قيمة كل طلب قبل صرف المستحقات. لا يُسمح بأي ترتيبات مالية خارج المنصة.</LegalP>
          </LegalSection>
          <LegalSection title="7. مسؤوليات المورد">
            <LegalList items={[
              "تنفيذ الطلبات في المواعيد المحددة وبالجودة المعلنة.",
              "التواصل مع فريق سرايا في حال أي تأخير أو مشكلة تؤثر على الطلب.",
              "الالتزام بقوانين الصحة والسلامة وأنظمة الترخيص المعمول بها في الإمارات.",
              "إشعار سرايا فورًا بأي تغيير في وضع الترخيص أو طبيعة النشاط التجاري.",
            ]} />
          </LegalSection>
          <LegalSection title="8. إلغاء عقود الإيجار والخدمات">
            <LegalP>تُطبَّق سياسة إلغاء موحدة على المنصة: استرداد كامل (100٪) عند الإلغاء قبل 7 أيام أو أكثر، واسترداد جزئي (50٪) عند الإلغاء قبل 3 إلى 6 أيام، ولا استرداد عند الإلغاء خلال 48 ساعة من الموعد المحدد.</LegalP>
          </LegalSection>
          <LegalSection title="9. الإيقاف والإلغاء">
            <LegalP>تحتفظ سرايا بالحق في إيقاف أو إلغاء حساب أي مورد في الحالات التالية: انتهاك شروط الخدمة، إهمال الطلبات أو رفض تنفيذها، الشكاوى المتكررة من العملاء، انتهاء الاشتراك دون تجديد، أو أي نشاط يضر بسمعة المنصة.</LegalP>
          </LegalSection>
          <LegalSection title="10. القانون الحاكم">
            <LegalP>تخضع هذه الشروط لقوانين دولة الإمارات العربية المتحدة. أي نزاعات تُحسم أمام محاكم إمارة أبوظبي.</LegalP>
          </LegalSection>
          <div style={{ marginTop: 40, paddingTop: 24, borderTop: '1px solid var(--line)', display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <Button variant="secondary" onClick={() => go('vendor-agreement')}>اتفاقية المورد</Button>
            <Button variant="secondary" onClick={() => go('terms')}>شروط الاستخدام</Button>
          </div>
        </LegalBody>
      </main>
    );
  }

  return (
    <main>
      <LegalHero eyebrow="Vendor Legal" title="Vendor Terms & Conditions" updated="Last updated: July 2026" />
      <LegalBody>
        <LegalSection title="1. Acceptance of Terms">
          <LegalP>By registering as a vendor on the Saraya Events Marketplace and accepting the Vendor Agreement, you agree to be fully bound by these Terms and Conditions. These terms apply to all registered vendors regardless of subscription plan.</LegalP>
        </LegalSection>
        <LegalSection title="2. Saraya's Role as Intermediary">
          <LegalP>Saraya Events operates solely as a technology intermediary platform. Saraya assumes no liability for the quality of your products or services, your adherence to delivery and installation timelines, or the accuracy of information contained in your listings.</LegalP>
          <LegalP>You are solely responsible, legally and commercially, to the customer for all matters relating to the fulfilment of any order. This includes, without limitation: quality, delivery, installation, warranty, after-sales service, and compensation for any damages arising.</LegalP>
        </LegalSection>
        <LegalSection title="3. Registration Requirements">
          <LegalList items={[
            "You must be a registered company or licensed sole establishment in the UAE.",
            "A valid trade licence and authorised signatory ID are required.",
            "All information provided must be accurate and current. Providing misleading information is grounds for immediate termination.",
            "Your account becomes active upon approval by the Saraya team.",
          ]} />
        </LegalSection>
        <LegalSection title="4. Subscription Packages">
          <LegalP>Three subscription packages are available: Package 1 — Starter (AED 99/month), Package 2 — Growth (AED 199/month), and Package 3 — Premium (AED 399/month). Annual billing is available at a two-month discount.</LegalP>
          <LegalP>Free Trial: At platform launch, approved vendors receive an automatic 60-day free trial on the Growth package with no credit card required. After the trial period, a paid subscription is required to publish listings and receive orders.</LegalP>
          <LegalP>Commission rates on transactions: Starter 2%, Growth 1%, Premium 0.5%. Commission is deducted automatically from each payout before it is released to the Vendor.</LegalP>
          <LegalP>A vendor in "Restricted" status may log in, view their dashboard, update their profile, and subscribe — but cannot publish new listings, respond to RFQs, appear in search results, or receive customer leads.</LegalP>
        </LegalSection>
        <LegalSection title="5. Listing Standards">
          <LegalList items={[
            "Images and descriptions must accurately represent the actual product or service, without embellishment or deception.",
            "Prices must include 5% VAT.",
            "Direct contact information (phone, WhatsApp, email) must not appear in listings, descriptions, or images.",
            "Directing customers to communicate outside the platform is prohibited in any form.",
            "Saraya reserves the right to remove any listing that violates these policies without prior notice.",
          ]} />
        </LegalSection>
        <LegalSection title="6. Commissions & Payouts">
          <LegalP>Saraya holds all customer payments and releases them to you after delivery confirmation and the expiry of the 3-business-day dispute window. Open complaints freeze payouts until resolution.</LegalP>
          <LegalP>A platform commission percentage is deducted from each order before payout. No off-platform financial arrangements are permitted.</LegalP>
        </LegalSection>
        <LegalSection title="7. Vendor Responsibilities">
          <LegalList items={[
            "Fulfil orders on time and to the quality described in your listings.",
            "Notify the Saraya team immediately of any delay or issue affecting an order.",
            "Comply with all applicable UAE health, safety, and licensing regulations.",
            "Notify Saraya promptly of any change in licence status or the nature of your business.",
          ]} />
        </LegalSection>
        <LegalSection title="8. Cancellation Policy for Rentals & Services">
          <LegalP>The following platform-wide cancellation policy applies: full refund (100%) for cancellations 7 or more days before the event; 50% refund for cancellations 3–6 days before; no refund for cancellations within 48 hours of the scheduled time.</LegalP>
        </LegalSection>
        <LegalSection title="9. Suspension & Termination">
          <LegalP>Saraya reserves the right to suspend or terminate any vendor account in the following circumstances: breach of these terms, neglect or refusal to fulfil orders, repeated customer complaints, lapsed subscription without renewal, or any activity that damages the platform's reputation.</LegalP>
        </LegalSection>
        <LegalSection title="10. Governing Law">
          <LegalP>These terms are governed by the laws of the United Arab Emirates. Any disputes are subject to the exclusive jurisdiction of the courts of Abu Dhabi, UAE.</LegalP>
        </LegalSection>
        <div style={{ marginTop: 40, paddingTop: 24, borderTop: '1px solid var(--line)', display: 'flex', gap: 12, flexWrap: 'wrap' }}>
          <Button variant="secondary" onClick={() => go('vendor-agreement')}>Vendor Agreement</Button>
          <Button variant="secondary" onClick={() => go('terms')}>General Terms</Button>
        </div>
      </LegalBody>
    </main>
  );
}

/* ===================================================================
   CUSTOMER TERMS & CONDITIONS
   =================================================================== */
function CustomerTermsPage() {
  const { lang } = useLang();
  const ar = lang === 'ar';
  const { go } = useNav();

  if (ar) {
    return (
      <main>
        <LegalHero eyebrow="شروط العملاء" title="شروط وأحكام العملاء" updated="آخر تحديث: يوليو 2026" />
        <LegalBody>
          <LegalSection title="1. قبول الشروط">
            <LegalP>باستخدامك لمنصة سرايا للفعاليات كعميل، سواء بالتصفح أو الشراء أو تقديم طلب عرض سعر، فإنك توافق على هذه الشروط والأحكام.</LegalP>
          </LegalSection>
          <LegalSection title="2. دور سرايا">
            <LegalP>سرايا للفعاليات وسيط تقني يربط بين العملاء والموردين. جميع عمليات الدفع تتم عبر المنصة فقط. لا يجب إجراء أي مدفوعات مباشرة للموردين خارج المنصة.</LegalP>
            <LegalP>المورد هو الطرف المسؤول عن جودة المنتج أو الخدمة وتسليمها. سرايا تعمل كوسيط وحماية للعميل من خلال نظام الحجز والدفع الموحد.</LegalP>
          </LegalSection>
          <LegalSection title="3. التواصل مع الموردين">
            <LegalP>لحماية خصوصيتك وضمان سير المعاملات بشكل سليم، لا تُكشف معلومات الاتصال الخاصة بك للموردين بشكل تلقائي. يتم التواصل عبر قنوات المنصة أو من خلال فريق سرايا مباشرة.</LegalP>
            <LegalP>للاستفسار عن أي منتج أو خدمة، استخدم زر "تواصل عبر سرايا" أو خيار "طلب عرض السعر" في صفحة المنتج. سيقوم فريقنا بالتنسيق مع المورد نيابةً عنك.</LegalP>
          </LegalSection>
          <LegalSection title="4. الطلبات والدفع">
            <LegalList items={[
              "الأسعار المعروضة بالدرهم الإماراتي وتشمل ضريبة القيمة المضافة (5%).",
              "يُؤكَّد الطلب فور اكتمال الدفع الإلكتروني الآمن عبر المنصة.",
              "احتفظ بإيصال الطلب ورقم الطلب لأي مراجعة مستقبلية.",
              "لا تُجرِ أي مدفوعات نقدية أو تحويلات بنكية مباشرة للموردين — جميع المعاملات تتم عبر سرايا.",
            ]} />
          </LegalSection>
          <LegalSection title="5. الإلغاء والاسترداد">
            <LegalP>سياسة الإلغاء الموحدة: استرداد كامل (100٪) عند الإلغاء قبل 7 أيام أو أكثر من الموعد، واسترداد جزئي (50٪) عند الإلغاء قبل 3 إلى 6 أيام، ولا استرداد عند الإلغاء خلال 48 ساعة من الموعد المحدد. للمنتجات القابلة للتسليم، راجع صفحة المنتج لسياسة الإلغاء الخاصة به.</LegalP>
          </LegalSection>
          <LegalSection title="6. الشكاوى والنزاعات">
            <LegalP>في حال وجود مشكلة في طلبك، يُرجى رفع شكوى رسمية عبر صفحة الشكاوى في المنصة خلال 72 ساعة من استلام الطلب. سيتولى فريق سرايا مراجعة الشكوى والتواصل مع المورد نيابةً عنك والوصول إلى حل خلال 5 أيام عمل.</LegalP>
          </LegalSection>
          <LegalSection title="7. خصوصية بياناتك">
            <LegalP>لن تُشارَك معلومات الاتصال الشخصية الخاصة بك (الهاتف، البريد الإلكتروني) مع الموردين إلا في الحالات الضرورية تحت إشراف فريق سرايا وبموافقتك الصريحة. راجع سياسة الخصوصية لمزيد من التفاصيل.</LegalP>
          </LegalSection>
          <LegalSection title="8. القانون الحاكم">
            <LegalP>تخضع هذه الشروط لقوانين دولة الإمارات العربية المتحدة. أي نزاعات تُحسم أمام محاكم إمارة أبوظبي.</LegalP>
          </LegalSection>
          <div style={{ marginTop: 40, paddingTop: 24, borderTop: '1px solid var(--line)', display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <Button variant="secondary" onClick={() => go('terms')}>شروط الاستخدام العامة</Button>
            <Button variant="secondary" onClick={() => go('privacy')}>سياسة الخصوصية</Button>
            <Button variant="secondary" onClick={() => go('cancellation-refund')}>سياسة الإلغاء</Button>
          </div>
        </LegalBody>
      </main>
    );
  }

  return (
    <main>
      <LegalHero eyebrow="Customer Legal" title="Customer Terms & Conditions" updated="Last updated: July 2026" />
      <LegalBody>
        <LegalSection title="1. Acceptance of Terms">
          <LegalP>By using the Saraya Events Marketplace as a customer — whether browsing, purchasing, or submitting a quote request — you agree to these Terms and Conditions.</LegalP>
        </LegalSection>
        <LegalSection title="2. Saraya's Role">
          <LegalP>Saraya Events is a technology intermediary that connects customers with vendors. All payments must be made through the platform only. Do not make direct payments to vendors outside of the platform.</LegalP>
          <LegalP>The vendor is responsible for the quality, delivery, and execution of the product or service. Saraya acts as your intermediary and protects your interests through the platform's unified booking and payment system.</LegalP>
        </LegalSection>
        <LegalSection title="3. Communicating with Vendors">
          <LegalP>To protect your privacy and ensure transactions proceed correctly, your contact information is not shared with vendors automatically. Communication is managed through platform channels or directly through the Saraya team.</LegalP>
          <LegalP>To enquire about a product or service, use the "Ask Saraya" WhatsApp button or the "Request a Quote" option on the listing page. Our team will coordinate with the vendor on your behalf.</LegalP>
        </LegalSection>
        <LegalSection title="4. Orders & Payment">
          <LegalList items={[
            "All prices are displayed in UAE Dirhams (AED) and are inclusive of 5% VAT.",
            "Your order is confirmed upon successful secure payment through the platform.",
            "Keep your order receipt and reference number for any future queries.",
            "Do not make cash payments or direct bank transfers to vendors — all transactions must go through Saraya.",
          ]} />
        </LegalSection>
        <LegalSection title="5. Cancellation & Refunds">
          <LegalP>Platform-wide cancellation policy: full refund (100%) for cancellations 7 or more days before the event; 50% refund for cancellations 3–6 days before; no refund for cancellations within 48 hours of the scheduled time. For deliverable products, refer to the product listing page for its specific cancellation terms.</LegalP>
        </LegalSection>
        <LegalSection title="6. Complaints & Disputes">
          <LegalP>If you experience a problem with your order, please file a formal complaint via the Complaints page within 72 hours of receiving your order. The Saraya team will review your complaint, liaise with the vendor on your behalf, and work toward a resolution within 5 business days.</LegalP>
        </LegalSection>
        <LegalSection title="7. Your Data & Privacy">
          <LegalP>Your personal contact information (phone number, email) will not be shared with vendors except where necessary, under Saraya team supervision and with your explicit consent. Please review our Privacy Policy for full details.</LegalP>
        </LegalSection>
        <LegalSection title="8. Governing Law">
          <LegalP>These terms are governed by the laws of the United Arab Emirates. Any disputes are subject to the exclusive jurisdiction of the courts of Abu Dhabi, UAE.</LegalP>
        </LegalSection>
        <div style={{ marginTop: 40, paddingTop: 24, borderTop: '1px solid var(--line)', display: 'flex', gap: 12, flexWrap: 'wrap' }}>
          <Button variant="secondary" onClick={() => go('terms')}>General Terms of Use</Button>
          <Button variant="secondary" onClick={() => go('privacy')}>Privacy Policy</Button>
          <Button variant="secondary" onClick={() => go('cancellation-refund')}>Cancellation Policy</Button>
        </div>
      </LegalBody>
    </main>
  );
}

Object.assign(window, { TermsPage, PrivacyPage, CancellationPage, ComplaintsPage, VendorTermsPage, CustomerTermsPage });