// Saraya Events — Campaign landing pages + Vendor Growth page

const { useState: useStateCP } = React;

/* ================================================================
   CAMPAIGN CONFIG DATA
   Each campaign: id, hero, offer, benefits, categories, faq
   ================================================================ */
const CAMPAIGNS = {
  'wedding-planning': {
    tone: 'blush',
    icon: 'heart',
    eyebrow: { en: 'Wedding Planning', ar: 'تخطيط الزفاف' },
    title:   { en: 'Your Perfect Wedding, Beautifully Planned', ar: 'زفافك المثالي، مُخطَّط بإتقان' },
    subtitle: { en: 'One platform for every wedding detail — décor, flowers, furniture, catering, photography and more. Verified UAE vendors, transparent pricing.', ar: 'منصة واحدة لكل تفاصيل زفافك — ديكور وزهور وأثاث وضيافة وتصوير والمزيد. موردون موثّقون وأسعار شفافة.' },
    leadType: 'customer_quote',
    offer: { en: 'Submit your wedding brief once — receive competitive offers from multiple trusted vendors.', ar: 'أرسل تفاصيل زفافك مرة واحدة — واستلم عروضًا من موردين موثوقين.' },
    benefits: {
      en: ['Verified wedding vendors', 'Flower & floral design', 'Furniture & tent rentals', 'Catering & hospitality', 'Photography & videography', 'Full event design packages'],
      ar: ['موردو أعراس موثّقون', 'تصميم الزهور والورود', 'تأجير الأثاث والخيم', 'الضيافة والتموين', 'التصوير الفوتوغرافي والمرئي', 'باقات تصميم حفلات كاملة'],
    },
    categories: [
      { icon: 'flower-2',    en: 'Flowers & Floral',    ar: 'الزهور والورود',    route: 'store' },
      { icon: 'armchair',    en: 'Furniture Rentals',   ar: 'تأجير الأثاث',      route: 'rental' },
      { icon: 'tent',        en: 'Tents & Venues',      ar: 'الخيم والقاعات',    route: 'rental' },
      { icon: 'utensils',    en: 'Catering',            ar: 'الضيافة والضيافة',  route: 'services' },
      { icon: 'camera',      en: 'Photography',         ar: 'التصوير',           route: 'services' },
      { icon: 'sparkles',    en: 'Full Event Design',   ar: 'تصميم كامل',        route: 'services' },
    ],
    faq: [
      { q: { en: 'How many vendors will respond to my request?', ar: 'كم موردًا سيرد على طلبي؟' }, a: { en: 'Typically 3–5 qualified vendors respond to each RFQ within 24–48 hours.', ar: 'عادةً 3-5 موردين مؤهلين يردون على كل طلب خلال 24-48 ساعة.' } },
      { q: { en: 'Is there a fee to submit a request?', ar: 'هل هناك رسوم لتقديم الطلب؟' }, a: { en: 'Submitting a quote request is completely free. You only pay when you confirm a booking.', ar: 'تقديم طلب عرض سعر مجاني تمامًا. تدفع فقط عند تأكيد الحجز.' } },
      { q: { en: 'Can I choose a specific vendor?', ar: 'هل يمكنني اختيار مورد محدد؟' }, a: { en: 'Yes. You can browse vendors directly or submit an RFQ and compare offers.', ar: 'نعم. يمكنك تصفح الموردين مباشرة أو تقديم طلب ومقارنة العروض.' } },
    ],
    ctaLabel: { en: 'Start Planning My Wedding', ar: 'ابدأ تخطيط زفافي' },
  },

  'rental-furniture': {
    tone: 'champagne',
    icon: 'armchair',
    eyebrow: { en: 'Furniture Rental', ar: 'تأجير الأثاث' },
    title:   { en: 'Premium Event Furniture, Delivered to You', ar: 'أثاث فعاليات فاخر يُوصَّل إليك' },
    subtitle: { en: 'Rent chairs, tables, sofas, tents, screens and more from verified UAE suppliers. Flexible pricing per day, per week, or per event.', ar: 'استأجر كراسي وطاولات وأرائك وخيمًا وشاشات والمزيد من موردين موثّقين. تسعير مرن يوميًا أو أسبوعيًا أو للفعالية.' },
    leadType: 'rental_inquiry',
    offer: { en: 'Tell us what you need and when — we will match you with the right vendor and the best price.', ar: 'أخبرنا بما تحتاجه ومتى — وسنوصلك بالمورد المناسب وأفضل سعر.' },
    benefits: {
      en: ['Chiavari & banquet chairs', 'Round & rectangular tables', 'Sofas & lounge sets', 'Tents & marquees', 'Screens & AV equipment', 'Kids furniture & props'],
      ar: ['كراسي كيافاري والمآدب', 'طاولات مستديرة ومستطيلة', 'أرائك وطقم جلوس', 'خيم وأظلال', 'شاشات ومعدات AV', 'أثاث وديكور الأطفال'],
    },
    categories: [
      { icon: 'armchair',    en: 'Chairs & Seating',   ar: 'الكراسي والجلوس',  route: 'rental/furniture-seating' },
      { icon: 'layout-panel-top', en: 'Tables',        ar: 'الطاولات',          route: 'rental/tables' },
      { icon: 'sofa',        en: 'Sofas & Lounges',    ar: 'الأرائك والجلوس',  route: 'rental/furniture-seating' },
      { icon: 'tent',        en: 'Tents',              ar: 'الخيم',             route: 'rental/tents' },
      { icon: 'monitor',     en: 'Screens & AV',       ar: 'شاشات وأجهزة',     route: 'rental/screens-av' },
      { icon: 'baby',        en: 'Kids',               ar: 'الأطفال',           route: 'rental/kids' },
    ],
    faq: [
      { q: { en: 'How far in advance should I book?', ar: 'كم قبل الفعالية يجب الحجز؟' }, a: { en: 'We recommend booking at least 2 weeks in advance for large events, 3–5 days for smaller ones.', ar: 'ننصح بالحجز قبل أسبوعين على الأقل للفعاليات الكبيرة، و3-5 أيام للصغيرة.' } },
      { q: { en: 'Is delivery included in the price?', ar: 'هل التوصيل مشمول في السعر؟' }, a: { en: 'Delivery and collection fees vary by vendor and location. These are shown at checkout.', ar: 'رسوم التوصيل تختلف حسب المورد والموقع، وتُعرض عند الدفع.' } },
      { q: { en: 'What if an item arrives damaged?', ar: 'ماذا لو وصلت قطعة تالفة؟' }, a: { en: 'Contact Saraya support immediately. We hold vendor payouts until delivery is confirmed.', ar: 'تواصل مع دعم سرايا فورًا. نحتجز مدفوعات المورد حتى تأكيد الاستلام.' } },
    ],
    ctaLabel: { en: 'Request Rental Quote', ar: 'اطلب عرض سعر للإيجار' },
  },

  'corporate-events': {
    tone: 'espresso',
    icon: 'briefcase',
    eyebrow: { en: 'Corporate Events', ar: 'فعاليات الشركات' },
    title:   { en: 'Corporate Events That Leave a Lasting Impression', ar: 'فعاليات شركات تترك أثرًا دائمًا' },
    subtitle: { en: 'From board meetings to product launches — source AV, furniture, catering, and full event production from verified UAE vendors.', ar: 'من اجتماعات مجلس الإدارة إلى إطلاق المنتجات — احصل على AV وأثاث وضيافة وإنتاج فعاليات من موردين موثّقين.' },
    leadType: 'customer_quote',
    offer: { en: 'One brief, multiple vendor proposals. Corporate-grade service with full accountability.', ar: 'ملخص واحد، عدة مقترحات من الموردين. خدمة بمستوى الشركات مع مسؤولية كاملة.' },
    benefits: {
      en: ['AV & screens', 'Conference furniture', 'Hospitality & catering', 'Brand activation setups', 'Gala & award events', 'Corporate décor & staging'],
      ar: ['أجهزة AV وشاشات', 'أثاث المؤتمرات', 'الضيافة والتموين', 'إعداد تفعيل العلامة التجارية', 'حفلات الجوائز والاحتفاليات', 'ديكور ومسارح الشركات'],
    },
    categories: [
      { icon: 'monitor',     en: 'Screens & AV',        ar: 'شاشات وأجهزة',     route: 'rental/screens-av' },
      { icon: 'utensils',    en: 'Catering',            ar: 'الضيافة',           route: 'services' },
      { icon: 'layout-panel-top', en: 'Conference Tables', ar: 'طاولات المؤتمرات', route: 'rental/tables' },
      { icon: 'mic',         en: 'Sound & Lighting',    ar: 'صوت وإضاءة',        route: 'rental/sound-lighting' },
      { icon: 'flag',        en: 'Brand Activation',    ar: 'تفعيل العلامة',    route: 'services' },
      { icon: 'award',       en: 'Gala & Awards',       ar: 'حفلات الجوائز',    route: 'services' },
    ],
    faq: [
      { q: { en: 'Do you handle full event production?', ar: 'هل تتولّون الإنتاج الكامل للفعاليات؟' }, a: { en: 'Yes — submit an RFQ and select vendors who offer end-to-end event production.', ar: 'نعم — أرسل طلبًا واختر الموردين الذين يقدمون إنتاجًا كاملاً للفعاليات.' } },
      { q: { en: 'Can I get itemized quotes?', ar: 'هل يمكنني الحصول على عروض تفصيلية؟' }, a: { en: 'Yes. Vendors submit detailed proposals including individual line items.', ar: 'نعم. يقدم الموردون مقترحات تفصيلية تشمل بنودًا فردية.' } },
    ],
    ctaLabel: { en: 'Submit Corporate RFQ', ar: 'أرسل طلب عرض أسعار الشركة' },
  },

  'flowers-gifts': {
    tone: 'blush',
    icon: 'flower-2',
    eyebrow: { en: 'Flowers & Gifts', ar: 'الزهور والهدايا' },
    title:   { en: 'Fresh Flowers & Elegant Gifts, Delivered in Abu Dhabi', ar: 'زهور طازجة وهدايا راقية تُوصَّل في أبوظبي' },
    subtitle: { en: 'Order fresh flower arrangements, gift boxes, and event décor from The Saraya Events Store — delivered to your door.', ar: 'اطلب باقات زهور طازجة وصناديق هدايا وديكور مناسبات من متجر سرايا للفعاليات — مع التوصيل إلى بابك.' },
    leadType: 'customer_quote',
    offer: { en: 'Shop online or request a custom arrangement. Same-day delivery available for Abu Dhabi.', ar: 'تسوّق أونلاين أو اطلب تنسيقًا مخصصًا. توصيل في نفس اليوم متاح في أبوظبي.' },
    benefits: {
      en: ['Fresh flower arrangements', 'Wedding & event bouquets', 'Gift boxes & hampers', 'Corporate gift sets', 'Seasonal & occasion flowers', 'Custom event décor'],
      ar: ['باقات زهور طازجة', 'باقات الأعراس والمناسبات', 'صناديق الهدايا والسلال', 'مجموعات الهدايا للشركات', 'زهور الموسم والمناسبات', 'ديكور مناسبات مخصص'],
    },
    categories: [
      { icon: 'flower-2',   en: 'Fresh Flowers',    ar: 'زهور طازجة',        route: 'store' },
      { icon: 'gift',       en: 'Gift Boxes',       ar: 'صناديق الهدايا',    route: 'store' },
      { icon: 'heart',      en: 'Wedding Flowers',  ar: 'زهور الزفاف',       route: 'store' },
      { icon: 'building-2', en: 'Corporate Gifts',  ar: 'هدايا الشركات',     route: 'store' },
      { icon: 'sprout',     en: 'Plants',           ar: 'النباتات',          route: 'store' },
      { icon: 'package',    en: 'Event Décor',      ar: 'ديكور المناسبات',   route: 'store' },
    ],
    faq: [
      { q: { en: 'Can I order same-day delivery?', ar: 'هل يمكنني طلب التوصيل في نفس اليوم؟' }, a: { en: 'Yes — for Abu Dhabi orders placed before 2 PM, same-day delivery is available.', ar: 'نعم — للطلبات في أبوظبي المقدمة قبل الساعة 2 ظهرًا، التوصيل في نفس اليوم متاح.' } },
      { q: { en: 'Can I customise a flower arrangement?', ar: 'هل يمكنني تخصيص تنسيق الزهور؟' }, a: { en: 'Yes. Use the Request Quote form to describe your vision and a florist will contact you.', ar: 'نعم. استخدم نموذج طلب عرض السعر لوصف رؤيتك وسيتواصل معك أحد المحترفين.' } },
    ],
    ctaLabel: { en: 'Shop Flowers & Gifts', ar: 'تسوّق الزهور والهدايا' },
  },

  'party-rentals': {
    tone: 'champagne',
    icon: 'party-popper',
    eyebrow: { en: 'Party Rentals', ar: 'تأجير الحفلات' },
    title:   { en: 'Party Rentals Abu Dhabi | Tables, Chairs & Décor', ar: 'تأجير حفلات أبوظبي | طاولات وكراسي وديكور' },
    subtitle: { en: 'Rent tables, chairs, backdrops, lighting, balloon arches, and party essentials from verified suppliers across Abu Dhabi and UAE.', ar: 'استأجر طاولات وكراسي وخلفيات وإضاءة وأقواس بالون ومستلزمات الحفلات من موردين موثّقين في أبوظبي والإمارات.' },
    leadType: 'rental_inquiry',
    offer: { en: 'Tell us your event size and date — we will match you with the right party rental supplier and best price.', ar: 'أخبرنا بحجم مناسبتك وتاريخها — وسنوصلك بمورد تأجير حفلات مناسب وأفضل سعر.' },
    benefits: {
      en: ['Tables & banquet chairs', 'Backdrop & arch rentals', 'Balloon installations', 'LED & uplighting', 'Kids party props', 'Linens & table covers'],
      ar: ['طاولات وكراسي المآدب', 'تأجير الخلفيات والأقواس', 'تركيبات البالون', 'إضاءة LED وأضواء الجو', 'ديكورات حفلات الأطفال', 'أغطية الطاولات والمفارش'],
    },
    categories: [
      { icon: 'armchair',    en: 'Chairs & Tables',   ar: 'كراسي وطاولات',     route: 'rental/furniture-seating' },
      { icon: 'image',       en: 'Backdrops',         ar: 'الخلفيات',           route: 'rental' },
      { icon: 'party-popper',en: 'Balloons',          ar: 'البالون',            route: 'service-balloons' },
      { icon: 'lamp',        en: 'Lighting',          ar: 'الإضاءة',            route: 'rental/lighting' },
      { icon: 'layout',      en: 'Linens',            ar: 'المفارش',            route: 'rental/linens' },
      { icon: 'baby',        en: 'Kids Props',        ar: 'ديكور الأطفال',      route: 'rental/kids' },
    ],
    faq: [
      { q: { en: 'What is the minimum rental duration?', ar: 'ما الحد الأدنى لمدة الإيجار؟' }, a: { en: 'Most vendors rent by the day or per event. Minimum duration varies by supplier and item type.', ar: 'معظم الموردين يؤجّرون باليوم أو للفعالية. يختلف الحد الأدنى حسب المورد ونوع القطعة.' } },
      { q: { en: 'Is delivery and collection included?', ar: 'هل التوصيل والجمع مشمولان؟' }, a: { en: 'Delivery and collection costs are listed per vendor at checkout. Many vendors include these for events within Abu Dhabi.', ar: 'تكاليف التوصيل والجمع مُدرجة لكل مورد عند الدفع. يشملها كثير من الموردين للفعاليات داخل أبوظبي.' } },
      { q: { en: 'Can I request a complete party setup?', ar: 'هل يمكنني طلب إعداد حفلة كاملة؟' }, a: { en: 'Yes. Use the Request a Quote form to describe your full setup requirements and receive vendor proposals.', ar: 'نعم. استخدم نموذج طلب عرض السعر لوصف متطلبات إعدادك الكاملة واستقبال عروض الموردين.' } },
    ],
    ctaLabel: { en: 'Request Party Rental Quote', ar: 'اطلب عرض سعر تأجير الحفلة' },
  },

  'vendor-join': {
    tone: 'espresso',
    icon: 'store',
    eyebrow: { en: 'Join Saraya', ar: 'انضم إلى سرايا' },
    title:   { en: 'Grow Your Event Business with Saraya Marketplace', ar: 'نمّ عملك في مجال الفعاليات مع سوق سرايا' },
    subtitle: { en: 'Reach thousands of customers planning weddings, corporate events, and special occasions across Abu Dhabi and the UAE.', ar: 'اوصل إلى آلاف العملاء الذين يخططون لحفلات الزفاف والفعاليات الشركاتية والمناسبات الخاصة في أبوظبي والإمارات.' },
    leadType: 'vendor_application',
    offer: { en: 'Register your business, get approved in 2-3 days, and start receiving orders immediately.', ar: 'سجّل شركتك، احصل على الموافقة خلال 2-3 أيام، وابدأ استقبال الطلبات فورًا.' },
    benefits: {
      en: ['Reach UAE-wide customers', 'List products, rentals & services', 'Receive RFQ requests', 'Featured placement options', 'Vendor analytics dashboard', 'Grow with Saraya packages'],
      ar: ['وصول لعملاء الإمارات', 'إدراج منتجات وإيجار وخدمات', 'استقبال طلبات عروض الأسعار', 'خيارات عرض مميز', 'لوحة تحليلات الموردين', 'نمُ مع باقات سرايا'],
    },
    categories: [
      { icon: 'flower-2',   en: 'Flower Vendors',    ar: 'موردو الزهور',       route: 'partner' },
      { icon: 'armchair',   en: 'Furniture Rental',  ar: 'تأجير الأثاث',       route: 'partner' },
      { icon: 'utensils',   en: 'Catering',          ar: 'الضيافة',             route: 'partner' },
      { icon: 'music-2',    en: 'Entertainment',     ar: 'الترفيه',             route: 'partner' },
      { icon: 'camera',     en: 'Photography',       ar: 'التصوير',             route: 'partner' },
      { icon: 'sparkles',   en: 'Event Design',      ar: 'تصميم الفعاليات',    route: 'partner' },
    ],
    faq: [
      { q: { en: 'How long does approval take?', ar: 'كم يستغرق وقت الموافقة؟' }, a: { en: '2–3 business days after you submit your trade license.', ar: '2-3 أيام عمل بعد تقديم رخصتك التجارية.' } },
      { q: { en: 'Is there a subscription fee?', ar: 'هل هناك رسوم اشتراك؟' }, a: { en: 'Yes. Plans start from AED 99/month. See vendor packages for full details.', ar: 'نعم. تبدأ الخطط من 99 درهمًا شهريًا. راجع باقات الموردين لمزيد من التفاصيل.' } },
      { q: { en: 'Can I list rentals and products together?', ar: 'هل يمكنني إدراج إيجار ومنتجات معًا؟' }, a: { en: 'Yes — your vendor account supports products, rentals, and services in one dashboard.', ar: 'نعم — حسابك كمورد يدعم المنتجات والإيجار والخدمات في لوحة واحدة.' } },
    ],
    ctaLabel: { en: 'Register as Vendor', ar: 'سجّل كمورد' },
    ctaRoute: 'partner',
  },
};

/* ================================================================
   CAMPAIGN PAGE TEMPLATE
   ================================================================ */
function CampaignPage({ campaignId }) {
  const { lang } = useLang();
  const { go } = useNav();
  const ar = lang === 'ar';
  const [openFaq, setOpenFaq] = useStateCP(null);

  const c = CAMPAIGNS[campaignId] || CAMPAIGNS['wedding-planning'];
  const isVendorCampaign = campaignId === 'vendor-join';
  const ctaRoute = c.ctaRoute || 'design';

  // Inject FAQPage structured data for this campaign
  React.useEffect(() => {
    if (!c.faq || !c.faq.length) return;
    const schemaId = 'saraya-campaign-faq-schema';
    let existing = document.getElementById(schemaId);
    if (existing) existing.remove();
    const schema = {
      '@context': 'https://schema.org',
      '@type': 'FAQPage',
      'mainEntity': c.faq.map((f) => ({
        '@type': 'Question',
        'name': f.q.en,
        'acceptedAnswer': { '@type': 'Answer', 'text': f.a.en },
      })),
    };
    const el = document.createElement('script');
    el.type = 'application/ld+json';
    el.id = schemaId;
    el.textContent = JSON.stringify(schema);
    document.head.appendChild(el);
    return () => { const s = document.getElementById(schemaId); if (s) s.remove(); };
  }, [campaignId]);

  return (
    <main>
      {/* Hero */}
      <section style={{ background: 'var(--' + c.tone + ')', paddingTop: 140, paddingBottom: 72, position: 'relative', overflow: 'hidden' }}>
        <Container wide>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(min(280px,100%),1fr))', gap: 48, alignItems: 'center' }}>
            <Reveal>
              <Eyebrow color={c.tone === 'espresso' ? 'var(--gold-light)' : 'var(--gold-deep)'}>{ar ? c.eyebrow.ar : c.eyebrow.en}</Eyebrow>
              <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(34px,5.5vw,62px)', fontWeight: 500, lineHeight: 1.05, letterSpacing: '-0.01em', color: c.tone === 'espresso' ? 'var(--ivory)' : 'var(--fg-primary)', margin: '16px 0 0', maxWidth: 680 }}>
                {ar ? c.title.ar : c.title.en}
              </h1>
              <p style={{ fontSize: 'clamp(15px,1.6vw,18px)', lineHeight: 1.65, color: c.tone === 'espresso' ? 'rgba(250,246,240,0.82)' : 'var(--fg-secondary)', marginTop: 18, maxWidth: 540 }}>
                {ar ? c.subtitle.ar : c.subtitle.en}
              </p>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, marginTop: 28 }}>
                <Button variant={c.tone === 'espresso' ? 'primary' : 'gold'} size="lg" icon={c.icon}
                  onClick={() => { window.sarayaTrack('campaign_lead_submit', { campaign: campaignId }); go(ctaRoute); }}>
                  {ar ? c.ctaLabel.ar : c.ctaLabel.en}
                </Button>
                <a href={window.SARAYA.waLink(ar ? "مرحبًا سرايا، أنا مهتم بـ " + (ar ? c.eyebrow.ar : c.eyebrow.en) : "Hello Saraya, I am interested in " + c.eyebrow.en + ".")}
                  target="_blank" rel="noopener noreferrer"
                  onClick={() => window.sarayaTrack('whatsapp_click', { campaign: campaignId })}
                  style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '12px 22px', borderRadius: 10, background: '#25D366', color: 'white', fontWeight: 600, fontSize: 15, textDecoration: 'none' }}>
                  <Icon name="message-circle" size={18} />
                  {ar ? 'واتساب' : 'WhatsApp'}
                </a>
              </div>
            </Reveal>

            {/* Lead form */}
            <Reveal delay={100}>
              <div style={{ background: 'var(--white)', borderRadius: 20, padding: 'clamp(22px,4vw,34px)', boxShadow: '0 8px 40px rgba(42,31,26,0.14)', border: '1px solid var(--line)' }}>
                <LeadCapture
                  leadType={c.leadType}
                  source="campaign"
                  campaign={campaignId}
                  ar={ar}
                  title={ar ? 'أرسل طلبك' : 'Send Your Request'}
                  subtitle={ar ? c.offer.ar : c.offer.en}
                />
              </div>
            </Reveal>
          </div>
        </Container>
      </section>

      {/* Benefits */}
      <Section bg="canvas">
        <Container wide>
          <Reveal>
            <SectionHead center
              eyebrow={ar ? 'ما تحصل عليه' : 'What you get'}
              title={isVendorCampaign ? (ar ? 'لماذا تنضم لسرايا؟' : 'Why join Saraya?') : (ar ? 'كل ما تحتاجه' : 'Everything you need')}
            />
          </Reveal>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill,minmax(240px,1fr))', gap: 14, marginTop: 40 }}>
            {(ar ? c.benefits.ar : c.benefits.en).map((b, i) => (
              <Reveal key={i} delay={i * 40}>
                <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start', padding: '16px 18px', background: 'var(--white)', borderRadius: 12, border: '1px solid var(--line)' }}>
                  <Icon name="check-circle-2" size={18} style={{ color: 'var(--gold-deep)', flexShrink: 0, marginTop: 1 }} />
                  <span style={{ fontSize: 14.5, lineHeight: 1.5 }}>{b}</span>
                </div>
              </Reveal>
            ))}
          </div>
        </Container>
      </Section>

      {/* Categories */}
      <Section bg="muted">
        <Container wide>
          <Reveal>
            <SectionHead center eyebrow={ar ? 'ما نقدّمه' : 'Categories'} title={ar ? 'كل ما تحتاجه لفعاليتك' : 'Everything your event needs'} />
          </Reveal>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill,minmax(160px,1fr))', gap: 14, marginTop: 40 }}>
            {c.categories.map((cat, i) => (
              <Reveal key={i} delay={i * 35}>
                <button onClick={() => { window.sarayaTrack('category_click', { campaign: campaignId, category: cat.en }); go(cat.route); }}
                  style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10, padding: '20px 14px', background: 'var(--white)', borderRadius: 14, border: '1px solid var(--line)', cursor: 'pointer', fontFamily: 'var(--font-body)', width: '100%', boxShadow: 'var(--shadow-soft)', transition: 'transform 150ms' }}>
                  <span style={{ display: 'inline-flex', width: 48, height: 48, borderRadius: 12, background: 'var(--cream)', alignItems: 'center', justifyContent: 'center' }}>
                    <Icon name={cat.icon} size={22} style={{ color: 'var(--gold-deep)' }} />
                  </span>
                  <span style={{ fontSize: 13.5, fontWeight: 500, textAlign: 'center', lineHeight: 1.3, color: 'var(--fg-primary)' }}>{ar ? cat.ar : cat.en}</span>
                </button>
              </Reveal>
            ))}
          </div>
        </Container>
      </Section>

      {/* Trust */}
      <Section bg="canvas">
        <Container wide>
          <Reveal>
            <SectionHead center eyebrow={ar ? 'لماذا سرايا' : 'Why Saraya'} title={ar ? 'منصة موثوقة للفعاليات' : 'A trusted events platform'} />
          </Reveal>
          <div style={{ marginTop: 36 }}>
            <TrustSection audience={isVendorCampaign ? 'vendor' : 'customer'} ar={ar} />
          </div>
        </Container>
      </Section>

      {/* FAQ */}
      {c.faq && c.faq.length > 0 && (
        <Section bg="muted">
          <Container style={{ maxWidth: 680, margin: '0 auto' }}>
            <Reveal><SectionHead center eyebrow={ar ? 'الأسئلة الشائعة' : 'FAQ'} title={ar ? 'أسئلة شائعة' : 'Common questions'} /></Reveal>
            <div style={{ display: 'grid', gap: 10, marginTop: 36 }}>
              {c.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: '15px 18px', background: 'none', border: 'none', cursor: 'pointer', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12, textAlign: 'start', fontFamily: 'var(--font-body)', fontSize: 14.5, fontWeight: 600, color: 'var(--fg-primary)' }}>
                    {ar ? item.q.ar : item.q.en}
                    <Icon name={openFaq === i ? 'chevron-up' : 'chevron-down'} size={17} style={{ color: 'var(--fg-muted)', flexShrink: 0 }} />
                  </button>
                  {openFaq === i && (
                    <div style={{ padding: '0 18px 16px', fontSize: 14, color: 'var(--fg-secondary)', lineHeight: 1.65 }}>
                      {ar ? item.a.ar : item.a.en}
                    </div>
                  )}
                </div>
              ))}
            </div>
          </Container>
        </Section>
      )}

      {/* Final CTA */}
      <Section bg={c.tone === 'espresso' ? 'canvas' : 'muted'} style={{ textAlign: 'center' }}>
        <Container narrow>
          <Reveal>
            <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(28px,4vw,48px)', fontWeight: 500, lineHeight: 1.1 }}>
              {isVendorCampaign ? (ar ? 'جاهز للانضمام؟' : 'Ready to join?') : (ar ? 'جاهز للبدء؟' : 'Ready to get started?')}
            </h2>
            <p style={{ color: 'var(--fg-secondary)', fontSize: 16, lineHeight: 1.65, marginTop: 14, marginBottom: 30 }}>
              {ar ? 'لا تتأخر — ابدأ تخطيط فعاليتك اليوم.' : 'Get in touch today and let Saraya Events take care of the rest.'}
            </p>
            <div style={{ display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap' }}>
              <Button variant="primary" size="lg" icon={c.icon}
                onClick={() => { window.sarayaTrack('campaign_cta_click', { campaign: campaignId, position: 'footer' }); go(ctaRoute); }}>
                {ar ? c.ctaLabel.ar : c.ctaLabel.en}
              </Button>
              <a href={window.SARAYA.waLink("Hello Saraya Events, I am interested.")}
                target="_blank" rel="noopener noreferrer"
                onClick={() => window.sarayaTrack('whatsapp_click', { campaign: campaignId, position: 'footer' })}
                style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '12px 22px', borderRadius: 10, background: '#25D366', color: 'white', fontWeight: 600, fontSize: 15, textDecoration: 'none' }}>
                <Icon name="message-circle" size={18} />
                WhatsApp
              </a>
            </div>
          </Reveal>
        </Container>
      </Section>
    </main>
  );
}

/* ================================================================
   VENDOR GROWTH PAGE  (route: vendors/grow)
   ================================================================ */
function VendorGrowPage() {
  const { lang } = useLang();
  const { go } = useNav();
  const ar = lang === 'ar';
  const auth = window.useAuth ? window.useAuth() : null;
  const [openFaq, setOpenFaq] = useStateCP(null);

  const handleJoin = () => {
    window.sarayaTrack('join_vendor_click', { source: 'vendor_grow_page' });
    if (auth && auth.user) go('vendor-dashboard');
    else if (window.openJoinVendorModal) window.openJoinVendorModal();
    else go('vendor-packages');
  };

  const HOW_STEPS = [
    { n: '1', icon: 'user-plus',    en: 'Register your business',           ar: 'سجّل شركتك', den: 'Create your vendor account with business name, category, and contact details.', dar: 'أنشئ حساب المورد باسم الشركة والفئة وبيانات التواصل.' },
    { n: '2', icon: 'file-check',   en: 'Submit documents & get approved',  ar: 'قدّم الوثائق واحصل على الموافقة', den: 'Upload your trade license and Emirates ID. Approval typically takes 2–3 business days.', dar: 'ارفع رخصتك التجارية وبطاقة الهوية. الموافقة عادةً خلال 2-3 أيام عمل.' },
    { n: '3', icon: 'package',      en: 'List your products & services',    ar: 'أدرج منتجاتك وخدماتك', den: 'Add products, rental items, and services to your vendor storefront.', dar: 'أضف المنتجات والقطع الإيجارية والخدمات إلى واجهة متجرك.' },
    { n: '4', icon: 'trending-up',  en: 'Receive orders & grow',            ar: 'استقبل الطلبات وانمُ', den: 'Start receiving direct orders and RFQ requests from customers across the UAE.', dar: 'ابدأ استقبال الطلبات المباشرة وطلبات عروض الأسعار من عملاء الإمارات.' },
  ];

  const WHAT_CAN_LIST = [
    { icon: 'shopping-bag',    en: 'Event Products',       ar: 'منتجات الفعاليات',    desc: { en: 'Flowers, gifts, party supplies, décor', ar: 'زهور وهدايا ومستلزمات حفلات وديكور' } },
    { icon: 'armchair',        en: 'Rental Items',         ar: 'قطع للإيجار',         desc: { en: 'Furniture, tents, AV, lighting', ar: 'أثاث وخيم وأجهزة AV وإضاءة' } },
    { icon: 'briefcase',       en: 'Services',             ar: 'خدمات',               desc: { en: 'Photography, catering, entertainment', ar: 'تصوير وضيافة وترفيه' } },
    { icon: 'layers',          en: 'Packages',             ar: 'الباقات',             desc: { en: 'Bundled event packages with fixed pricing', ar: 'باقات فعاليات مجمّعة بأسعار ثابتة' } },
  ];

  const AD_OPTIONS = [
    { icon: 'star',        en: 'Homepage Featured Slot',   ar: 'مكان مميز في الصفحة الرئيسية' },
    { icon: 'layout-grid', en: 'Category Featured Vendor', ar: 'مورد مميز في الفئة' },
    { icon: 'zap',         en: 'Search Result Promotion',  ar: 'ترقية في نتائج البحث' },
    { icon: 'image',       en: 'Banner Ad Placement',      ar: 'إعلان بانر' },
    { icon: 'gem',         en: 'Vendor Spotlight Card',    ar: 'بطاقة سبوتلايت للمورد' },
  ];

  const VENDOR_FAQ = [
    { q: { en: 'What commission does Saraya charge?', ar: 'ما نسبة العمولة التي تأخذها سرايا؟' }, a: { en: 'Starter: 2% on confirmed transactions. Growth: 1% on confirmed transactions. Premium: 0.5% on confirmed transactions. There is no separate service or platform fee.', ar: 'مبتدئ: 2٪ على المعاملات المؤكدة. نمو: 1٪ على المعاملات المؤكدة. مميز: 0.5٪ على المعاملات المؤكدة. لا توجد رسوم خدمة أو رسوم منصة منفصلة.' } },
    { q: { en: 'When do I get paid?', ar: 'متى أستلم مدفوعاتي؟' }, a: { en: 'Payouts are released after the customer confirms delivery or the 3-day dispute window closes.', ar: 'تُصدَر المدفوعات بعد تأكيد العميل للاستلام أو انتهاء فترة النزاع (3 أيام).' } },
    { q: { en: 'Can I list rental items and products together?', ar: 'هل يمكنني إدراج إيجار ومنتجات معًا؟' }, a: { en: 'Yes. Your vendor dashboard supports products, rentals, and services — all in one place.', ar: 'نعم. لوحة التحكم تدعم المنتجات والإيجار والخدمات في مكان واحد.' } },
    { q: { en: 'How does the RFQ system work?', ar: 'كيف يعمل نظام طلبات عروض الأسعار؟' }, a: { en: 'Customers submit event requests. Matching vendors receive the request and can submit a competitive proposal.', ar: 'يُرسل العملاء طلبات للفعاليات. يستلم الموردون المناسبون الطلب ويمكنهم تقديم مقترح منافس.' } },
    { q: { en: 'What documents do I need to register?', ar: 'ما الوثائق المطلوبة للتسجيل؟' }, a: { en: 'A valid UAE Trade License, Emirates ID, and VAT certificate (if registered).', ar: 'رخصة تجارية إماراتية سارية، وهوية إماراتية، وشهادة ضريبة القيمة المضافة (إن وجدت).' } },
  ];

  return (
    <main>
      {/* Hero */}
      <section style={{ background: 'var(--espresso)', color: 'var(--ivory)', paddingTop: 140, paddingBottom: 80 }}>
        <Container wide>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(280px,100%), 1fr))', gap: 52, alignItems: 'center' }}>
            <Reveal>
              <Eyebrow color="var(--gold-light)">{ar ? 'للموردين' : 'For Vendors'}</Eyebrow>
              <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(36px,6vw,68px)', fontWeight: 500, lineHeight: 1.03, letterSpacing: '-0.01em', margin: '18px 0 0' }}>
                {ar ? 'نمّ عملك في مجال الفعاليات مع سرايا' : 'Grow Your Event Business with Saraya Events Marketplace'}
              </h1>
              <p style={{ fontSize: 'clamp(15px,1.7vw,19px)', lineHeight: 1.65, opacity: 0.82, marginTop: 20, maxWidth: 520 }}>
                {ar
                  ? 'اوصل إلى آلاف العملاء الذين يخططون لحفلات الزفاف والفعاليات الشركاتية والمناسبات الخاصة في أبوظبي والإمارات.'
                  : 'Reach thousands of customers planning weddings, corporate events, and special occasions across Abu Dhabi and the UAE.'}
              </p>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, marginTop: 30 }}>
                <Button variant="primary" size="lg" icon="store"
                  onClick={() => { window.sarayaTrack('join_vendor_click', { source: 'grow_hero' }); handleJoin(); }}>
                  {ar ? 'انضم كمورد' : 'Join as Vendor'}
                </Button>
                <Button variant="secondary" size="lg"
                  style={{ border: '1.5px solid rgba(250,246,240,0.35)', color: 'var(--ivory)', background: 'transparent' }}
                  onClick={() => { window.sarayaTrack('vendor_package_click', { source: 'grow_hero' }); go('vendor-packages'); }}>
                  {ar ? 'عرض الباقات' : 'View Packages'}
                </Button>
              </div>
            </Reveal>

            {/* Vendor lead form */}
            <Reveal delay={100}>
              <div style={{ background: 'var(--white)', borderRadius: 20, padding: 'clamp(22px,4vw,34px)', boxShadow: '0 8px 40px rgba(42,31,26,0.28)' }}>
                <LeadCapture
                  leadType="vendor_application"
                  source="vendor_grow_page"
                  campaign="vendor_hero"
                  ar={ar}
                  title={ar ? 'سجّل اهتمامك' : 'Register Your Interest'}
                  subtitle={ar ? 'وسيتواصل معك فريق الموردين لدينا خلال يوم عمل.' : 'Our vendor relations team will reach out within one business day.'}
                />
              </div>
            </Reveal>
          </div>
        </Container>
      </section>

      {/* Why join */}
      <Section bg="canvas">
        <Container wide>
          <Reveal>
            <SectionHead center eyebrow={ar ? 'لماذا سرايا' : 'Why Saraya'} title={ar ? 'المزايا التي تحصل عليها كمورد' : 'Benefits of joining Saraya'} />
          </Reveal>
          <div style={{ marginTop: 40 }}>
            <TrustSection audience="vendor" ar={ar} />
          </div>
        </Container>
      </Section>

      {/* What you can list */}
      <Section bg="muted">
        <Container wide>
          <Reveal>
            <SectionHead center eyebrow={ar ? 'ما يمكنك إدراجه' : 'What you can list'} title={ar ? 'كل ما يحتاجه سوق الفعاليات' : 'Everything the events market needs'} />
          </Reveal>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(230px, 1fr))', gap: 18, marginTop: 40 }}>
            {WHAT_CAN_LIST.map((item, i) => (
              <Reveal key={i} delay={i * 60}>
                <div style={{ background: 'var(--white)', borderRadius: 14, border: '1px solid var(--line)', padding: '24px 20px' }}>
                  <span style={{ display: 'inline-flex', width: 48, height: 48, borderRadius: 12, background: 'var(--cream)', alignItems: 'center', justifyContent: 'center', marginBottom: 14 }}>
                    <Icon name={item.icon} size={22} 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.desc.ar : item.desc.en}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </Container>
      </Section>

      {/* How it works */}
      <Section bg="canvas">
        <Container wide>
          <Reveal><SectionHead center eyebrow={ar ? 'كيف يعمل' : 'How it works'} title={ar ? 'من التسجيل إلى الطلبات في 4 خطوات' : 'From registration to orders in 4 steps'} /></Reveal>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(220px, 1fr))', gap: 20, marginTop: 44 }}>
            {HOW_STEPS.map((step, i) => (
              <Reveal key={i} delay={i * 55}>
                <div style={{ background: 'var(--white)', borderRadius: 14, border: '1px solid var(--line)', padding: '24px 20px' }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}>
                    <span style={{ display: 'inline-flex', width: 36, height: 36, borderRadius: '50%', background: 'var(--gold)', color: 'var(--espresso)', fontSize: 16, fontWeight: 700, fontFamily: 'var(--font-display)', alignItems: 'center', justifyContent: 'center' }}>{step.n}</span>
                    <Icon name={step.icon} size={20} style={{ color: 'var(--gold-deep)' }} />
                  </div>
                  <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 19, fontWeight: 500, margin: 0, marginBottom: 8 }}>{ar ? step.ar : step.en}</h3>
                  <p style={{ fontSize: 13.5, color: 'var(--fg-secondary)', lineHeight: 1.6, margin: 0 }}>{ar ? step.dar : step.den}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </Container>
      </Section>

      {/* Packages preview */}
      <Section bg="muted">
        <Container wide>
          <Reveal>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 16, alignItems: 'center', justifyContent: 'space-between', marginBottom: 36 }}>
              <SectionHead eyebrow={ar ? 'الباقات' : 'Packages'} title={ar ? 'اختر الخطة المناسبة لعملك' : 'Choose the right plan for your business'} />
              <Button variant="secondary" iconRight="arrow-right"
                onClick={() => { window.sarayaTrack('vendor_package_click', { source: 'grow_packages' }); go('vendor-packages'); }}>
                {ar ? 'عرض كل الباقات' : 'See all plans'}
              </Button>
            </div>
          </Reveal>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 20 }}>
            {[
              { name: { en: 'Starter', ar: 'مبتدئ' }, price: 99, features: { en: ['10 listings', 'Marketplace search', 'RFQ responses', 'Basic analytics'], ar: ['10 قوائم', 'بحث السوق', 'ردود على طلبات الأسعار', 'تحليلات أساسية'] } },
              { name: { en: 'Professional', ar: 'احترافي' }, price: 299, highlight: true, features: { en: ['50 listings', 'Featured placement', 'Priority ranking', 'Advanced analytics'], ar: ['50 قائمة', 'عرض مميز', 'أولوية في الترتيب', 'تحليلات متقدمة'] } },
              { name: { en: 'Premium', ar: 'مميز' }, price: 599, features: { en: ['Unlimited listings', 'Homepage slot', 'Dedicated manager', 'Co-marketing'], ar: ['قوائم غير محدودة', 'مكان الصفحة الرئيسية', 'مدير مخصص', 'تسويق مشترك'] } },
            ].map((plan, i) => (
              <div key={i} style={{ background: plan.highlight ? 'var(--espresso)' : 'var(--white)', border: plan.highlight ? '2px solid var(--gold)' : '1px solid var(--line)', borderRadius: 16, padding: '24px 20px', color: plan.highlight ? 'var(--ivory)' : 'var(--fg-primary)' }}>
                <p style={{ fontSize: 12, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.1em', opacity: 0.65, margin: 0 }}>{ar ? plan.name.ar : plan.name.en}</p>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, margin: '10px 0 16px' }}>
                  <span style={{ fontFamily: 'var(--font-display)', fontSize: 36, fontWeight: 500 }}>AED {plan.price}</span>
                  <span style={{ fontSize: 13, opacity: 0.6 }}>{ar ? '/شهر' : '/mo'}</span>
                </div>
                {(ar ? plan.features.ar : plan.features.en).map((f, fi) => (
                  <div key={fi} style={{ display: 'flex', gap: 8, alignItems: 'center', marginBottom: 8 }}>
                    <Icon name="check" size={14} style={{ color: plan.highlight ? 'var(--gold-light)' : 'var(--gold-deep)', flexShrink: 0 }} />
                    <span style={{ fontSize: 13.5 }}>{f}</span>
                  </div>
                ))}
                <button onClick={() => { window.sarayaTrack('vendor_package_click', { plan: plan.name.en, source: 'grow_page' }); go('vendor-packages'); }}
                  style={{ width: '100%', marginTop: 18, padding: '11px 0', borderRadius: 10, border: 'none', cursor: 'pointer', fontFamily: 'var(--font-body)', fontSize: 14, fontWeight: 600, background: plan.highlight ? 'var(--gold)' : 'var(--espresso)', color: plan.highlight ? 'var(--espresso)' : 'var(--ivory)' }}>
                  {ar ? 'اختر الخطة' : 'Select Plan'}
                </button>
              </div>
            ))}
          </div>
        </Container>
      </Section>

      {/* Ad placement options */}
      <Section bg="canvas">
        <Container wide>
          <Reveal>
            <SectionHead center eyebrow={ar ? 'الإعلانات والعروض المميزة' : 'Advertising & Featured Placement'} title={ar ? 'ابرز أمام العملاء المناسبين' : 'Stand out in front of the right customers'} />
          </Reveal>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, marginTop: 36, justifyContent: 'center' }}>
            {AD_OPTIONS.map((opt, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '12px 18px', background: 'var(--white)', borderRadius: 10, border: '1px solid var(--line)' }}>
                <Icon name={opt.icon} size={16} style={{ color: 'var(--gold-deep)' }} />
                <span style={{ fontSize: 14, fontWeight: 500 }}>{ar ? opt.ar : opt.en}</span>
                <span style={{ fontSize: 11, color: 'var(--fg-muted)', background: 'var(--cream)', padding: '2px 8px', borderRadius: 20 }}>
                  {ar ? 'باقة احترافي وأعلى' : 'Professional+'}
                </span>
              </div>
            ))}
          </div>
          <p style={{ textAlign: 'center', fontSize: 13, color: 'var(--fg-muted)', marginTop: 20 }}>
            {ar ? 'تفاصيل الإعلانات ستكون متاحة في لوحة تحكم المورد بعد الإطلاق.' : 'Ad placement details available in the vendor dashboard after launch.'}
          </p>
        </Container>
      </Section>

      {/* FAQ */}
      <Section bg="muted">
        <Container style={{ maxWidth: 700, margin: '0 auto' }}>
          <Reveal><SectionHead center eyebrow={ar ? 'أسئلة الموردين' : 'Vendor FAQ'} title={ar ? 'أسئلة شائعة' : 'Common questions'} /></Reveal>
          <div style={{ display: 'grid', gap: 10, marginTop: 36 }}>
            {VENDOR_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: '15px 18px', background: 'none', border: 'none', cursor: 'pointer', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12, textAlign: 'start', fontFamily: 'var(--font-body)', fontSize: 14.5, fontWeight: 600, color: 'var(--fg-primary)' }}>
                  {ar ? item.q.ar : item.q.en}
                  <Icon name={openFaq === i ? 'chevron-up' : 'chevron-down'} size={17} style={{ color: 'var(--fg-muted)', flexShrink: 0 }} />
                </button>
                {openFaq === i && (
                  <div style={{ padding: '0 18px 16px', fontSize: 14, color: 'var(--fg-secondary)', lineHeight: 1.65 }}>
                    {ar ? item.a.ar : item.a.en}
                  </div>
                )}
              </div>
            ))}
          </div>
        </Container>
      </Section>

      {/* Final CTA */}
      <Section bg="canvas" style={{ textAlign: 'center' }}>
        <Container narrow>
          <Reveal>
            <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(28px,4.5vw,52px)', fontWeight: 500, lineHeight: 1.08 }}>
              {ar ? 'جاهز للانضمام إلى سرايا؟' : 'Ready to join Saraya?'}
            </h2>
            <p style={{ color: 'var(--fg-secondary)', fontSize: 16, lineHeight: 1.65, marginTop: 14, marginBottom: 30 }}>
              {ar
                ? 'سجّل حسابك، ارفع وثائقك، ووقّع الاتفاقية — وابدأ البيع في غضون أيام.'
                : 'Register, 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" icon="store" onClick={handleJoin}>
                {ar ? 'انضم كمورد الآن' : 'Join as Vendor Now'}
              </Button>
              <Button variant="secondary" size="lg" onClick={() => go('vendor-packages')}>
                {ar ? 'عرض الباقات' : 'View Packages'}
              </Button>
            </div>
          </Reveal>
        </Container>
      </Section>
    </main>
  );
}

Object.assign(window, { CampaignPage, VendorGrowPage });