﻿// Saraya Events — reusable cards + HomePage.

const { useState: useStateH, useEffect: useEffectH } = React;

// ── Platform hero image from CMS ────────────────────────────────────────────
function usePlatformHero() {
  const [heroUrl, setHeroUrl] = useStateH(null);
  useEffectH(() => {
    if (!window.supabaseConfigured || !window.SarayaDB) return;
    window.SarayaDB
      .from('platform_images')
      .select('image_url')
      .eq('page_key', 'home')
      .eq('section_key', 'hero')
      .eq('is_active', true)
      .order('image_order')
      .limit(1)
      .then(({ data }) => {
        if (data && data.length > 0) setHeroUrl(data[0].image_url);
      })
      .catch(() => {});
  }, []);
  return heroUrl;
}

/* ===== Reusable cards (exported for other pages) ===== */

function ServiceCard({ s, onClick }) {
  const { lang } = useLang();
  const admin = useAdmin();
  s = admin.resolveEntity('svc:' + s.id, s);
  const editFields = [
    { key: 'name.en', label: 'Service name (EN)' }, { key: 'name.ar', label: 'Service name (AR)', dir: 'rtl' },
    { key: 'tag.en', label: 'Tagline (EN)' }, { key: 'tag.ar', label: 'Tagline (AR)', dir: 'rtl' },
    { key: 'blurb.en', label: 'Description (EN)', type: 'textarea' }, { key: 'blurb.ar', label: 'Description (AR)', type: 'textarea', dir: 'rtl' },
  ];
  const card = (
    <div onClick={onClick} role="button" tabIndex={0} onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onClick(); } }} className="saraya-lift" style={{
      display: 'flex', flexDirection: 'column', textAlign: 'start', cursor: 'pointer',
      background: 'var(--white)', border: '1px solid var(--line)', borderRadius: 16, overflow: 'hidden',
      boxShadow: 'var(--shadow-soft)', font: 'inherit', color: 'inherit', height: '100%',
    }}>
      <Img tone={s.tone} icon={s.icon} ratio="16/11" radius={0} slot={'svc:' + s.id} />
      <div style={{ padding: '20px 22px 22px', display: 'flex', flexDirection: 'column', flex: 1 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, color: 'var(--gold-deep)' }}>
          <Icon name={s.icon} size={17} />
          <span style={{ fontSize: 11, fontWeight: 600, letterSpacing: '0.16em', textTransform: 'uppercase' }}>{s.tag[lang]}</span>
        </div>
        <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 24, fontWeight: 500, margin: '10px 0 8px', lineHeight: 1.12 }}>{s.name[lang]}</h3>
        <p style={{ fontSize: 14, lineHeight: 1.6, color: 'var(--fg-secondary)', flex: 1 }}>{s.blurb[lang]}</p>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7, marginTop: 16, color: 'var(--fg-primary)', fontSize: 13.5, fontWeight: 500 }}>
          {useLang().t('cta.explore')} <Icon name="arrow-right" size={15} className="saraya-arrow" />
        </span>
      </div>
    </div>
  );
  return <AdminCardWrap onEdit={() => admin.openEdit({ title: 'Edit service', fields: editFields, values: s, onSave: (v) => admin.mergeEntity('svc:' + s.id, v) })}>{card}</AdminCardWrap>;
}

function PackageCard({ p, onQuote }) {
  const { t, lang } = useLang();
  const admin = useAdmin();
  p = admin.resolveEntity('pkg:' + p.id, p);
  const heads = { blush: 'blush', rose: 'rose', espresso: 'espresso', champagne: 'champagne', cream: 'cream' };
  const editFields = [
    { key: 'name.en', label: 'Package name (EN)' }, { key: 'name.ar', label: 'Package name (AR)', dir: 'rtl' },
    { key: 'from.en', label: 'Starting price / from (EN)' }, { key: 'from.ar', label: 'Starting price / from (AR)', dir: 'rtl' },
    { key: 'desc.en', label: 'Description (EN)', type: 'textarea' }, { key: 'desc.ar', label: 'Description (AR)', type: 'textarea', dir: 'rtl' },
    { key: 'items.en', label: 'Included — one per line (EN)', type: 'list' }, { key: 'items.ar', label: 'Included — one per line (AR)', type: 'list', dir: 'rtl' },
  ];
  const card = (
    <div className="saraya-lift" style={{ display: 'flex', flexDirection: 'column', background: 'var(--white)', borderRadius: 16, overflow: 'hidden', boxShadow: 'var(--shadow-soft)', border: '1px solid var(--line)', height: '100%', position: 'relative' }}>
      {p.featured && <span style={{ position: 'absolute', top: 16, insetInlineStart: 16, zIndex: 2 }}><Badge tone="gold">{lang === 'ar' ? 'الأكثر طلبًا' : 'Popular'}</Badge></span>}
      <Img tone={heads[p.tone]} icon="sparkles" ratio="16/8" radius={0} slot={'pkg:' + p.id} />
      <div style={{ padding: '22px 24px 24px', display: 'flex', flexDirection: 'column', flex: 1 }}>
        <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 26, fontWeight: 500, lineHeight: 1.1 }}>{p.name[lang]}</h3>
        <div style={{ fontSize: 12.5, color: 'var(--gold-deep)', fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase', marginTop: 6 }}>{t('common.from')} · {p.from[lang]}</div>
        <p style={{ fontSize: 14, lineHeight: 1.6, color: 'var(--fg-secondary)', marginTop: 12 }}>{p.desc[lang]}</p>
        <div style={{ margin: '18px 0 22px', display: 'grid', gap: 9 }}>
          {p.items[lang].map((it, i) => (
            <div key={i} style={{ display: 'flex', gap: 10, alignItems: 'flex-start', fontSize: 13.5, color: 'var(--fg-primary)' }}>
              <Icon name="check" size={15} style={{ color: 'var(--gold-deep)', marginTop: 2, flexShrink: 0 }} />{it}
            </div>
          ))}
        </div>
        <div style={{ marginTop: 'auto', display: 'flex', gap: 8 }}>
          <Button variant="primary" size="sm" full onClick={onQuote}>{t('cta.quote')}</Button>
          <Button variant="whatsapp" size="sm" icon="message-circle" href={window.SARAYA.waLink(`Hello Saraya Events, I'm interested in the ${p.name.en}.`)} target="_blank" />
        </div>
      </div>
    </div>
  );
  return <AdminCardWrap onEdit={() => admin.openEdit({ title: 'Edit package', fields: editFields, values: p, onSave: (v) => admin.mergeEntity('pkg:' + p.id, v) })}>{card}</AdminCardWrap>;
}

function CatalogueCard({ item }) {
  const { t, lang } = useLang();
  const { add, has } = useInquiry();
  const admin = useAdmin();
  item = admin.resolveEntity('cat:' + item.id, item);
  const cat = window.SARAYA.CATALOGUE_CATEGORIES.find((c) => c.id === item.category);
  const added = has(item.id);
  const desc = item.desc && item.desc[lang];
  const meta = [item.code, item.color, item.qty ? (lang === 'ar' ? 'الكمية: ' : 'Qty: ') + item.qty : null].filter(Boolean).join(' · ');
  const editFields = [
    { key: 'name.en', label: 'Product name (EN)' }, { key: 'name.ar', label: 'Product name (AR)', dir: 'rtl' },
    { key: 'category', label: 'Category', type: 'select', options: window.SARAYA.CATALOGUE_CATEGORIES.map((c) => ({ value: c.id, label: c.name.en })) },
    { key: 'code', label: 'Product code / reference' },
    { key: 'color', label: 'Colour / material' },
    { key: 'qty', label: 'Quantity available' },
    { key: 'desc.en', label: 'Short description (EN)', type: 'textarea' }, { key: 'desc.ar', label: 'Short description (AR)', type: 'textarea', dir: 'rtl' },
    { key: 'notes', label: 'Internal notes', type: 'textarea' },
  ];
  const card = (
    <div className="saraya-lift" style={{ background: 'var(--white)', border: '1px solid var(--line)', borderRadius: 14, overflow: 'hidden', boxShadow: 'var(--shadow-soft)', display: 'flex', flexDirection: 'column', height: '100%' }}>
      <Img tone={item.tone} icon={cat ? cat.icon : 'sparkles'} ratio="1/1" radius={0} src={item.src} slot={'cat:' + item.id} fit="contain" />
      <div style={{ padding: '14px 16px 16px', display: 'flex', flexDirection: 'column', flex: 1 }}>
        <div style={{ fontSize: 10.5, color: 'var(--gold-deep)', fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase' }}>{cat ? cat.name[lang] : ''}</div>
        <div style={{ fontFamily: 'var(--font-serif)', fontSize: 18, fontWeight: 500, margin: '4px 0 4px', lineHeight: 1.15 }}>{item.name[lang]}</div>
        {desc && <p style={{ fontSize: 12.5, lineHeight: 1.5, color: 'var(--fg-secondary)', margin: '0 0 6px' }}>{desc}</p>}
        {meta && <div style={{ fontSize: 11, color: 'var(--fg-muted)', marginBottom: 12 }}>{meta}</div>}
        <button onClick={() => add({ ...item, categoryName: cat ? cat.name : null })} disabled={added} style={{
          marginTop: 'auto', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 7,
          padding: '9px 12px', borderRadius: 8, cursor: added ? 'default' : 'pointer', fontFamily: 'var(--font-body)', fontSize: 13, fontWeight: 500,
          background: added ? 'var(--success-bg)' : 'var(--cream)', color: added ? 'var(--success)' : 'var(--fg-primary)',
          border: '1px solid ' + (added ? 'transparent' : 'var(--line-strong)'), transition: 'all 180ms var(--ease-out)',
        }}>
          <Icon name={added ? 'check' : 'plus'} size={15} />{added ? t('cta.added') : t('cta.addInquiry')}
        </button>
      </div>
    </div>
  );
  return <AdminCardWrap
    onEdit={() => admin.openEdit({ title: 'Edit product', fields: editFields, values: item, onSave: (v) => admin.mergeEntity('cat:' + item.id, v) })}
    onDelete={() => { if (window.confirm('Delete this product card?')) admin.deleteCatalogueItem(item.id); }}>{card}</AdminCardWrap>;
}

/* ===== Homepage ===== */
function HomePage({ heroHeadline }) {
  const { t, lang } = useLang();
  const { go } = useNav();
  const admin = useAdmin();
  const auth = window.useAuth ? window.useAuth() : null;
  const S = window.SARAYA;
  const platformHeroUrl = usePlatformHero();

  return (
    <main>
      {/* HERO */}
      <section style={{ position: 'relative', minHeight: '92vh', display: 'flex', alignItems: 'flex-end', overflow: 'hidden' }}>
        {platformHeroUrl
          ? <img src={platformHeroUrl} alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
          : <Img tone="blush" icon="flower-2" ratio="auto" radius={0} plain slot="home-hero" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }} />}
        <span style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to top, rgba(42,31,26,0.82) 0%, rgba(42,31,26,0.34) 45%, rgba(42,31,26,0.20) 100%)' }} />
        <Container wide style={{ position: 'relative', paddingBottom: 'clamp(56px,9vw,110px)', paddingTop: 120, width: '100%' }}>
          <div style={{ maxWidth: 760 }}>
            <Eyebrow color="var(--gold-light)">{lang === 'ar' ? 'سرايا للفعاليات · أبوظبي' : 'Saraya Events · Abu Dhabi'}</Eyebrow>
            <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(40px,7vw,86px)', lineHeight: 1.02, fontWeight: 500, color: 'var(--ivory)', margin: '20px 0 0', letterSpacing: '-0.01em' }}>{heroHeadline}</h1>
            <p style={{ marginTop: 22, fontSize: 'clamp(16px,1.8vw,20px)', lineHeight: 1.6, color: 'rgba(250,246,240,0.86)', maxWidth: 560 }}>
              {lang === 'ar'
                ? 'من الأعراس والمناسبات الرسمية إلى لقاءات المنزل — نُصمّم وننفّذ كل تفصيلة بذوقٍ راقٍ في أبوظبي والإمارات.'
                : 'From weddings and official ceremonies to gatherings at home — we design and deliver every detail, beautifully, across Abu Dhabi and the UAE.'}
            </p>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, marginTop: 32 }}>
              <Button variant="whatsapp" size="lg" icon="message-circle" href={S.waLink("Hello Saraya Events, I'd like to plan an event.")} target="_blank">{t('cta.whatsapp')}</Button>
              <Button variant="onDark" size="lg" icon="pen-line" onClick={() => go('design')}>{t('cta.quote')}</Button>
              <Button variant="onDark" size="lg" icon="shopping-bag" onClick={() => go('store')}>{t('cta.browse')}</Button>
            </div>
          </div>
        </Container>
      </section>

      {/* QUICK LEAD ACTIONS */}
      <div style={{ background: 'var(--espresso)', color: 'var(--ivory)' }}>
        <Container wide style={{ display: 'flex', flexWrap: 'wrap', gap: 10, justifyContent: 'center', paddingBlock: 18 }}>
          {[
            { icon: 'calendar-check', label: t('cta.consult'), msg: "Hello Saraya Events, I'd like to book a consultation." },
            { icon: 'tag', label: t('cta.price'), msg: 'Hello Saraya Events, could you share pricing for my event?' },
            { icon: 'image', label: t('cta.inspo'), msg: "Hello Saraya Events, I'd like to send some inspiration photos." },
            { icon: 'gift', label: t('cta.package'), msg: 'Hello Saraya Events, which package would suit my event?' },
          ].map((a, i) => (
            <a key={i} href={S.waLink(a.msg)} target="_blank" rel="noopener" className="saraya-quicklink" style={{ display: 'inline-flex', alignItems: 'center', gap: 9, padding: '9px 16px', borderRadius: 999, border: '1px solid rgba(250,246,240,0.2)', color: 'var(--ivory)', textDecoration: 'none', fontFamily: 'var(--font-body)', fontSize: 13.5, fontWeight: 500 }}>
              <Icon name={a.icon} size={16} style={{ color: 'var(--gold-light)' }} />{a.label}
            </a>
          ))}
        </Container>
      </div>

      {/* MARKETPLACE INTRO — 3 user paths */}
      <Section bg="canvas">
        <Container wide>
          <Reveal>
            <SectionHead center
              eyebrow={lang === 'ar' ? 'سوق سرايا' : 'Saraya Marketplace'}
              title={lang === 'ar' ? 'كل ما تحتاجه لفعاليتك، في مكان واحد' : 'Everything for your event, in one place'}
              intro={lang === 'ar' ? 'منتجات للشراء، معدات للإيجار، خدمات للحجز، وطلبات عروض أسعار من أفضل الموردين في أبوظبي والإمارات.' : 'Products to buy, equipment to rent, services to book, and quote requests from the best vendors across Abu Dhabi and the UAE.'}
            />
          </Reveal>
          <div className="saraya-grid-3" style={{ marginTop: 48 }}>
            {[
              {
                icon: 'shopping-bag',
                tone: 'blush',
                en: { title: 'Browse & Buy', sub: 'Customer', desc: 'Explore flowers, gifts, decor, and event supplies. Add to cart, pay online, get delivered.' },
                ar: { title: 'تصفح واشترِ', sub: 'للعملاء', desc: 'استكشف الزهور والهدايا والديكور ومستلزمات الفعاليات. أضف للسلة، ادفع أونلاين، واستلم توصيلك.' },
                cta: { en: 'Browse Marketplace', ar: 'تصفح السوق' },
                route: 'store',
              },
              {
                icon: 'calendar-search',
                tone: 'champagne',
                en: { title: 'Request Quotes', sub: 'Customer', desc: 'Need a full event package? Send one request and get competitive offers from multiple qualified vendors.' },
                ar: { title: 'اطلب عروض أسعار', sub: 'للعملاء', desc: 'تحتاج باقة كاملة لفعاليتك؟ أرسل طلباً واحداً واحصل على عروض منافسة من عدة موردين معتمدين.' },
                cta: { en: 'Request a Quote', ar: 'اطلب عرض سعر' },
                route: 'design',
              },
              {
                icon: 'store',
                tone: 'espresso',
                en: { title: 'Sell & Grow', sub: 'For Vendors', desc: 'List your products, rentals, and services. Reach event planners and customers across Abu Dhabi.' },
                ar: { title: 'بيع وانمُ', sub: 'للموردين', desc: 'أدرج منتجاتك وخدمات التأجير وخدماتك. اوصل إلى منظمي الفعاليات والعملاء في أبوظبي.' },
                cta: { en: 'Join as Vendor', ar: 'انضم كمورد' },
                action: 'vendor-signup',
              },
            ].map((card, i) => {
              const c = lang === 'ar' ? card.ar : card.en;
              const ctaLabel = lang === 'ar' ? card.cta.ar : card.cta.en;
              const handleClick = () => {
                if (card.action === 'vendor-signup') {
                  if (window.openJoinVendorModal) window.openJoinVendorModal();
                  else go('vendor-packages');
                } else {
                  go(card.route);
                }
              };
              return (
                <Reveal key={i} delay={i * 80}>
                  <div className="saraya-lift" style={{ background: 'var(--white)', border: '1px solid var(--line)', borderRadius: 18, overflow: 'hidden', boxShadow: 'var(--shadow-soft)', display: 'flex', flexDirection: 'column', height: '100%' }}>
                    <div style={{ padding: '28px 28px 20px' }}>
                      <div style={{ display: 'inline-flex', width: 52, height: 52, borderRadius: 14, background: 'var(--cream)', alignItems: 'center', justifyContent: 'center', marginBottom: 18 }}>
                        <Icon name={card.icon} size={26} style={{ color: 'var(--gold-deep)' }} />
                      </div>
                      <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--gold-deep)', marginBottom: 8 }}>{c.sub}</div>
                      <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 26, fontWeight: 500, lineHeight: 1.1, margin: '0 0 12px' }}>{c.title}</h3>
                      <p style={{ fontSize: 14.5, lineHeight: 1.65, color: 'var(--fg-secondary)' }}>{c.desc}</p>
                    </div>
                    <div style={{ padding: '0 28px 28px', marginTop: 'auto' }}>
                      <Button variant={i === 2 ? 'primary' : 'secondary'} iconRight="arrow-right" onClick={handleClick}>{ctaLabel}</Button>
                    </div>
                  </div>
                </Reveal>
              );
            })}
          </div>
        </Container>
      </Section>

      {/* HOW IT WORKS */}
      <Section bg="muted">
        <Container wide>
          <Reveal>
            <SectionHead center
              eyebrow={lang === 'ar' ? 'كيف يعمل السوق' : 'How it works'}
              title={lang === 'ar' ? 'بسيط، سريع، موثوق' : 'Simple, fast, trusted'}
            />
          </Reveal>
          <div className="saraya-hiw-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(240px,1fr))', gap: 32, marginTop: 48 }}>
            {/* For customers */}
            <Reveal>
              <div style={{ background: 'var(--white)', borderRadius: 18, padding: '28px 26px', boxShadow: 'var(--shadow-soft)', border: '1px solid var(--line)' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 20 }}>
                  <span style={{ display: 'inline-flex', width: 40, height: 40, borderRadius: 10, background: 'var(--cream)', alignItems: 'center', justifyContent: 'center' }}>
                    <Icon name="user" size={20} style={{ color: 'var(--gold-deep)' }} />
                  </span>
                  <span style={{ fontFamily: 'var(--font-body)', fontSize: 13, fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--gold-deep)' }}>{lang === 'ar' ? 'للعملاء' : 'For Customers'}</span>
                </div>
                {[
                  { n: '1', en: 'Browse freely — no account needed', ar: 'تصفح بحرية — لا حساب مطلوب' },
                  { n: '2', en: 'Browse products, rentals & services', ar: 'تصفح المنتجات والتأجير والخدمات' },
                  { n: '3', en: 'Order directly or request a quote', ar: 'اطلب مباشرة أو اطلب عرض سعر' },
                  { n: '4', en: 'Track your order & confirm delivery', ar: 'تابع طلبك وأكّد الاستلام' },
                ].map((s) => (
                  <div key={s.n} style={{ display: 'flex', gap: 14, alignItems: 'flex-start', marginBottom: 16 }}>
                    <span style={{ display: 'inline-flex', minWidth: 28, height: 28, borderRadius: '50%', background: 'var(--gold)', color: 'var(--espresso)', fontSize: 13, fontWeight: 700, alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>{s.n}</span>
                    <span style={{ fontSize: 14.5, color: 'var(--fg-primary)', lineHeight: 1.5, paddingTop: 4 }}>{lang === 'ar' ? s.ar : s.en}</span>
                  </div>
                ))}
                <Button variant="secondary" size="sm" iconRight="arrow-right" onClick={() => go('store')}>{lang === 'ar' ? 'ابدأ التسوق' : 'Start Shopping'}</Button>
              </div>
            </Reveal>
            {/* For vendors */}
            <Reveal delay={100}>
              <div style={{ background: 'var(--white)', borderRadius: 18, padding: '28px 26px', boxShadow: 'var(--shadow-soft)', border: '1px solid var(--line)' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 20 }}>
                  <span style={{ display: 'inline-flex', width: 40, height: 40, borderRadius: 10, background: 'var(--cream)', alignItems: 'center', justifyContent: 'center' }}>
                    <Icon name="briefcase" size={20} style={{ color: 'var(--gold-deep)' }} />
                  </span>
                  <span style={{ fontFamily: 'var(--font-body)', fontSize: 13, fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--gold-deep)' }}>{lang === 'ar' ? 'للموردين' : 'For Vendors'}</span>
                </div>
                {[
                  { n: '1', en: 'Register your business', ar: 'سجّل شركتك' },
                  { n: '2', en: 'Upload trade license & get approved', ar: 'ارفع الترخيص وانتظر الموافقة' },
                  { n: '3', en: 'List products, rentals & services', ar: 'أدرج منتجاتك والتأجير والخدمات' },
                  { n: '4', en: 'Receive orders & respond to RFQs', ar: 'استقبل الطلبات وردّ على طلبات الأسعار' },
                ].map((s) => (
                  <div key={s.n} style={{ display: 'flex', gap: 14, alignItems: 'flex-start', marginBottom: 16 }}>
                    <span style={{ display: 'inline-flex', minWidth: 28, height: 28, borderRadius: '50%', background: 'var(--gold)', color: 'var(--espresso)', fontSize: 13, fontWeight: 700, alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>{s.n}</span>
                    <span style={{ fontSize: 14.5, color: 'var(--fg-primary)', lineHeight: 1.5, paddingTop: 4 }}>{lang === 'ar' ? s.ar : s.en}</span>
                  </div>
                ))}
                <Button variant="primary" size="sm" iconRight="arrow-right" onClick={() => {
                  if (window.openJoinVendorModal) window.openJoinVendorModal();
                  else go('vendor-packages');
                }}>{lang === 'ar' ? 'انضم كمورد' : 'Join as Vendor'}</Button>
              </div>
            </Reveal>
          </div>
        </Container>
      </Section>

      {/* RFQ BAND */}
      <Section bg="muted">
        <Container wide>
          <div className="saraya-rfq-band" style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 32, alignItems: 'center', flexWrap: 'wrap' }}>
            <Reveal>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '4px 12px', borderRadius: 999, background: 'var(--gold-tint)', color: 'var(--gold-deep)', fontSize: 11.5, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', marginBottom: 12 }}>
                <Icon name="layers" size={11} />
                {lang === 'ar' ? 'قارن عروض الموردين' : 'Compare Vendor Offers'}
              </span>
              <Eyebrow color="var(--gold-deep)">{lang === 'ar' ? 'طلب عروض أسعار' : 'Request for Quotation'}</Eyebrow>
              <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(26px,4vw,44px)', lineHeight: 1.1, fontWeight: 500, color: 'var(--fg-primary)', margin: '12px 0 14px' }}>
                {lang === 'ar' ? 'تحتاج باقة كاملة لفعاليتك؟' : 'Need a full event package?'}
              </h2>
              <p style={{ fontSize: 16.5, lineHeight: 1.6, color: 'var(--fg-secondary)', maxWidth: 520 }}>
                {lang === 'ar'
                  ? 'أرسل طلباً واحداً واستقبل عروضاً من الموردين المعتمدين — أو دع سرايا تنسّق باقة مخصّصة لمناسبتك.'
                  : 'Send one request and receive offers from qualified vendors — or ask Saraya Events to help coordinate a custom package for you.'}
              </p>
            </Reveal>
            <Reveal delay={80}>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 12, minWidth: 200 }}>
                <Button variant="gold" size="lg" icon="pen-line" onClick={() => go('design')}>{lang === 'ar' ? 'اطلب عرض سعر' : 'Request a Quote'}</Button>
                <Button variant="secondary" icon="wand-sparkles" onClick={() => go('design')}>{lang === 'ar' ? 'اطلب تنسيق سرايا' : 'Ask Saraya to Coordinate'}</Button>
              </div>
            </Reveal>
          </div>
        </Container>
      </Section>

      {/* SERVICES OVERVIEW */}
      <Section bg="canvas" id="services">
        <Container wide>
          <Reveal>
            <div style={{ display: 'flex', gap: 8, justifyContent: 'center', flexWrap: 'wrap', marginBottom: 16 }}>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '4px 12px', borderRadius: 999, background: 'var(--espresso)', color: 'var(--gold-light)', fontSize: 11.5, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase' }}>
                <Icon name="star" size={11} />{lang === 'ar' ? 'من سرايا للفعاليات' : 'By Saraya Events'}
              </span>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '4px 12px', borderRadius: 999, background: 'var(--cream)', color: 'var(--espresso)', fontSize: 11.5, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', border: '1px solid var(--line)' }}>
                <Icon name="store" size={11} />{lang === 'ar' ? 'من موردين معتمدين' : 'By Approved Vendors'}
              </span>
            </div>
            <SectionHead center eyebrow={lang === 'ar' ? 'سوق خدمات الفعاليات' : 'Event Services Marketplace'} title={lang === 'ar' ? 'كل ما تحتاجه مناسبتك' : 'Everything your occasion needs'} intro={lang === 'ar' ? 'استكشف خدمات من سرايا والموردين المعتمدين — اختر خدمة واحدة أو اجمع عدة خدمات أو اطلب تنسيقاً كاملاً.' : 'Explore services from Saraya Events and approved vendors — choose one service, combine several, or request full coordination.'} />
          </Reveal>
          <div className="saraya-grid-3" style={{ marginTop: 48 }}>
            {S.SERVICES.slice(0, 6).map((s, i) => (
              <Reveal key={s.id} delay={(i % 3) * 70}><ServiceCard s={s} onClick={() => go(s.route || 'services')} /></Reveal>
            ))}
          </div>
          <div style={{ textAlign: 'center', marginTop: 40 }}>
            <Button variant="secondary" iconRight="arrow-right" onClick={() => go('services')}>{lang === 'ar' ? 'كل الخدمات' : 'All services'}</Button>
          </div>
        </Container>
      </Section>

      {/* DESIGN YOUR EVENT teaser */}
      <Section bg="muted">
        <Container wide>
          <div className="saraya-split" style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 56, alignItems: 'center' }}>
            <Reveal>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '4px 12px', borderRadius: 999, background: 'var(--espresso)', color: 'var(--gold-light)', fontSize: 11.5, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', marginBottom: 12 }}>
                <Icon name="star" size={11} />{lang === 'ar' ? 'تنسيق سرايا' : 'Saraya Coordination'}
              </span>
              <Eyebrow color="var(--gold-deep)">{lang === 'ar' ? 'خصّص مع سرايا' : 'Customize with Saraya'}</Eyebrow>
              <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(30px,4.5vw,52px)', lineHeight: 1.08, fontWeight: 500, color: 'var(--fg-primary)', margin: '16px 0 0' }}>{lang === 'ar' ? 'دعنا نُصمّم مناسبتك معك' : 'Let Saraya Design Your Event'}</h2>
              <p style={{ marginTop: 18, fontSize: 17, lineHeight: 1.65, color: 'var(--fg-secondary)', maxWidth: 460 }}>{lang === 'ar' ? 'أخبرنا عن مناسبتك وفريقنا يساعدك في تشكيل الباقة والخدمات والإيجارات ودعم الموردين المناسبين.' : 'Tell us about your occasion, and our team will help shape the right package, services, rentals, and vendor support.'}</p>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, marginTop: 28 }}>
                <Button variant="gold" size="lg" icon="wand-sparkles" onClick={() => go('design')}>{lang === 'ar' ? 'خصّص مع سرايا' : 'Customize with Saraya'}</Button>
                <Button variant="whatsapp" size="lg" icon="message-circle" href={S.waLink("Hello Saraya Events, I'd like to plan a custom event.")} target="_blank">{lang === 'ar' ? 'راسلنا على واتساب' : 'Message on WhatsApp'}</Button>
              </div>
            </Reveal>
            <Reveal delay={120}>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: 14 }}>
                {S.BUILDER.eventTypes.slice(0, 6).map((e) => (
                  <button key={e.id} onClick={() => go('design')} style={{ display: 'flex', flexDirection: 'column', gap: 10, padding: '20px 18px', borderRadius: 14, background: 'var(--white)', border: '1px solid var(--line)', color: 'var(--fg-primary)', cursor: 'pointer', textAlign: 'start', fontFamily: 'var(--font-body)', boxShadow: '0 2px 8px rgba(42,31,26,0.06)' }}>
                    <Icon name={e.icon} size={24} style={{ color: 'var(--gold-deep)' }} />
                    <span style={{ fontSize: 15, fontWeight: 500 }}>{e[lang]}</span>
                  </button>
                ))}
              </div>
            </Reveal>
          </div>
        </Container>
      </Section>

      {/* PACKAGES */}
      <Section bg="muted">
        <Container wide>
          <Reveal>
            <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 16 }}>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '4px 12px', borderRadius: 999, background: 'var(--espresso)', color: 'var(--gold-light)', fontSize: 11.5, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase' }}>
                <Icon name="star" size={11} />{lang === 'ar' ? 'من سرايا للفعاليات' : 'By Saraya Events'}
              </span>
            </div>
            <SectionHead center eyebrow={lang === 'ar' ? 'باقات سرايا للفعاليات' : 'Saraya Event Packages'} title={lang === 'ar' ? 'باقات منسّقة لكل مناسبة' : 'Curated packages for every occasion'} intro={lang === 'ar' ? 'باقات منسّقة من سرايا للفعاليات — اختر نقطة انطلاق أو اطلب باقة مخصّصة تُصمَّم حول مناسبتك.' : 'Curated packages by Saraya Events — choose a starting point or request a custom package designed around your occasion.'} />
          </Reveal>
          <div className="saraya-grid-3" style={{ marginTop: 48 }}>
            {S.PACKAGES.slice(0, 3).map((p, i) => (
              <Reveal key={p.id} delay={(i % 3) * 70}><PackageCard p={p} onQuote={() => go('design')} /></Reveal>
            ))}
          </div>
          <div style={{ textAlign: 'center', marginTop: 40 }}>
            <Button variant="secondary" iconRight="arrow-right" onClick={() => go('packages')}>{lang === 'ar' ? 'كل الباقات' : 'View all packages'}</Button>
          </div>
        </Container>
      </Section>

      {/* STORE preview */}
      <Section bg="canvas">
        <Container wide>
          <Reveal>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 20, alignItems: 'flex-end', justifyContent: 'space-between' }}>
              <SectionHead eyebrow={lang === 'ar' ? 'السوق' : 'Marketplace'} title={lang === 'ar' ? 'سوق سرايا للفعاليات' : 'Saraya Events Marketplace'} intro={lang === 'ar' ? 'من الزهور والهدايا إلى ديكورات المناسبات ومستلزماتها — استكشف منتجات من سرايا والموردين المعتمدين.' : 'From flowers and gifts to décor accents and event essentials, explore products from Saraya Events and approved vendors.'} />
              <Button variant="secondary" iconRight="arrow-right" onClick={() => go('store')}>{t('cta.viewAll')}</Button>
            </div>
          </Reveal>
          <div className="saraya-grid-4" style={{ marginTop: 44 }}>
            {admin.resolveStore().slice(0, 4).map((it, i) => (
              <Reveal key={it.id} delay={(i % 4) * 60}><StoreCard item={it} /></Reveal>
            ))}
          </div>
        </Container>
      </Section>

      {/* FEATURED VENDORS & PRODUCTS */}
      <FeaturedVendorsSection />

      {/* VENDOR JOIN / PARTNERSHIP teaser */}
      <Section bg="tint">
        <Container wide>
          <div className="saraya-split" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48, alignItems: 'center' }}>
            <Reveal><Img tone="champagne" icon="store" ratio="4/3" label={lang === 'ar' ? 'معرض سرايا' : 'Saraya Showroom'} radius={20} slot="home-partner" /></Reveal>
            <Reveal delay={100}>
              <Eyebrow>{lang === 'ar' ? 'للموردين والشركاء' : 'For Vendors & Partners'}</Eyebrow>
              <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(28px,4vw,46px)', lineHeight: 1.1, fontWeight: 500, margin: '16px 0 0' }}>
                {lang === 'ar' ? 'بيع منتجاتك وخدماتك عبر سرايا' : 'Sell your products & services through Saraya'}
              </h2>
              <p style={{ marginTop: 18, fontSize: 17, lineHeight: 1.65, color: 'var(--fg-secondary)', maxWidth: 460 }}>
                {lang === 'ar'
                  ? 'سواء كنت مورد زهور، مزود أثاث، شركة ضيافة، أو أي خدمة للفعاليات — انضم إلى سوق سرايا واوصل إلى آلاف العملاء في أبوظبي والإمارات.'
                  : 'Whether you supply flowers, furniture, catering, decor, or any event service — join Saraya Marketplace and reach thousands of customers across Abu Dhabi and the UAE.'}
              </p>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, marginTop: 26 }}>
                <Button variant="primary" size="lg" icon="store" onClick={() => {
                  if (window.openJoinVendorModal) window.openJoinVendorModal();
                  else go('vendor-packages');
                }}>{lang === 'ar' ? 'انضم كمورد' : 'Join as Vendor'}</Button>
                <Button variant="secondary" size="lg" iconRight="arrow-right" onClick={() => go('partner')}>{t('nav.partner')}</Button>
              </div>
            </Reveal>
          </div>
        </Container>
      </Section>

      <MarketingBanner type="vendor" />

      {/* FAQ — bilingual, with FAQPage JSON-LD schema injected */}
      <HomeFAQ />

      <ClosingCTA />
    </main>
  );
}

/* Closing CTA band — reused across pages */
function ClosingCTA() {
  const { t, lang } = useLang();
  const { go } = useNav();
  return (
    <Section bg="muted" style={{ textAlign: 'center' }}>
      <Container narrow>
        <Reveal>
          <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 22 }}><OrnamentRule width={140} /></div>
          <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(30px,4.6vw,54px)', lineHeight: 1.08, fontWeight: 500, color: 'var(--fg-primary)' }}>{lang === 'ar' ? 'لنبدأ بتخطيط مناسبتك' : "Let's Begin Planning Your Occasion"}</h2>
          <p style={{ marginTop: 18, fontSize: 17.5, lineHeight: 1.6, color: 'var(--fg-secondary)', maxWidth: 520, marginInline: 'auto' }}>{lang === 'ar' ? 'تواصل مع سرايا عبر واتساب أو اطلب عرض سعر. سنساعدك في الاختيار بين باقة سرايا أو موردي السوق أو حل فعالية مخصّص بالكامل.' : "Message Saraya Events on WhatsApp or request a quote. We'll help you choose between a Saraya package, marketplace vendors, or a fully customized event solution."}</p>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, justifyContent: 'center', marginTop: 30 }}>
            <Button variant="whatsapp" size="lg" icon="message-circle" href={window.SARAYA.waLink("Hello Saraya Events, I'd like to plan an event.")} target="_blank">{t('cta.whatsapp')}</Button>
            <Button variant="gold" size="lg" icon="pen-line" onClick={() => go('design')}>{t('cta.quote')}</Button>
          </div>
        </Reveal>
      </Container>
    </Section>
  );
}

/* ===== Homepage FAQ ===== */
function HomeFAQ() {
  const { lang } = useLang();
  const { go } = useNav();
  const ar = lang === 'ar';
  const [open, setOpen] = useStateH(null);

  const faqs = [
    {
      q: { en: 'How do I request an event quote?', ar: 'كيف أطلب عرض سعر لفعاليتي؟' },
      a: { en: 'Click "Request a Quote" on any page. Tell us your event type, date, and location. Our team or marketplace vendors will respond with tailored proposals, usually within 24 hours.', ar: 'انقر على "اطلب عرض سعر" في أي صفحة. أخبرنا بنوع الفعالية والتاريخ والموقع. سيرد فريقنا أو موردو السوق بعروض مخصّصة، عادةً خلال 24 ساعة.' },
    },
    {
      q: { en: 'Can I rent furniture, décor, and equipment for my event?', ar: 'هل يمكنني استئجار أثاث وديكور ومعدات لفعاليتي؟' },
      a: { en: 'Yes. Browse the Rentals section for chairs, tables, sofas, tents, screens, lighting, and more — available by day, week, or full event from verified UAE suppliers.', ar: 'نعم. تصفّح قسم الإيجار للحصول على كراسي وطاولات وأرائك وخيم وشاشات وإضاءة والمزيد — متوفّرة باليوم أو الأسبوع أو للفعالية الكاملة من موردين موثّقين.' },
    },
    {
      q: { en: 'Are the vendors on the platform verified?', ar: 'هل الموردون على المنصة موثّقون؟' },
      a: { en: 'All vendors are reviewed and approved by Saraya Events before listing. We verify trade licences, documents, and service quality before activation.', ar: 'جميع الموردين مراجعون ومعتمدون من سرايا للفعاليات قبل الإدراج. نتحقق من الرخص التجارية والوثائق وجودة الخدمة قبل التفعيل.' },
    },
    {
      q: { en: 'Can Saraya Events coordinate a full event package?', ar: 'هل تستطيع سرايا للفعاليات تنسيق باقة فعالية كاملة؟' },
      a: { en: 'Yes. Saraya Events offers curated packages covering décor, flowers, furniture, catering, and more. You can also request a fully custom package via the Request a Quote flow.', ar: 'نعم. تقدّم سرايا للفعاليات باقات منسّقة تشمل الديكور والزهور والأثاث والضيافة والمزيد. يمكنك أيضًا طلب باقة مخصّصة بالكامل عبر نموذج طلب السعر.' },
    },
    {
      q: { en: 'Who handles delivery, installation, and after-event collection?', ar: 'من يتولى التوصيل والتركيب والجمع بعد الفعالية؟' },
      a: { en: 'Each vendor is responsible for delivery, installation, and collection of their items. Saraya Events facilitates the booking and holds payment until delivery is confirmed.', ar: 'كل مورد مسؤول عن توصيل وتركيب وجمع منتجاته. تُسهّل سرايا للفعاليات الحجز وتحتجز الدفع حتى تأكيد الاستلام.' },
    },
    {
      q: { en: 'How can vendors join the Saraya Events Marketplace?', ar: 'كيف يمكن للموردين الانضمام إلى سوق سرايا للفعاليات؟' },
      a: { en: 'Click "Join as Vendor" and complete the registration. After document review and approval, you can list products, rentals, and services to reach thousands of event customers across the UAE.', ar: 'انقر على "انضم كمورد" وأكمل التسجيل. بعد مراجعة الوثائق والموافقة، يمكنك إدراج منتجاتك وخدمات الإيجار والخدمات للوصول إلى آلاف العملاء في الإمارات.' },
    },
    {
      q: { en: 'What is the Virtual Showroom?', ar: 'ما هو المعرض الافتراضي؟' },
      a: { en: 'The Virtual Showroom lets event businesses display their products, rentals, and services online with a professional profile visible to customers across the UAE — no physical showroom required.', ar: 'يتيح المعرض الافتراضي لشركات الفعاليات عرض منتجاتها وخدمات التأجير وخدماتها عبر الإنترنت بملف تعريفي احترافي يراه العملاء في الإمارات — دون الحاجة إلى معرض فعلي.' },
    },
    {
      q: { en: 'How are complaints and disputes handled?', ar: 'كيف تُعالج الشكاوى والنزاعات؟' },
      a: { en: 'Submit a complaint through the Complaints page within 3 days of your event. Saraya Events holds vendor payouts during the review period and works to resolve disputes fairly for both parties.', ar: 'قدّم شكواك عبر صفحة الشكاوى في غضون 3 أيام من فعاليتك. تحتجز سرايا مدفوعات المورد خلال فترة المراجعة وتعمل على حل النزاعات بشكل عادل لكلا الطرفين.' },
    },
  ];

  // Inject FAQPage schema when this component mounts
  React.useEffect(() => {
    const schemaId = 'saraya-faq-schema';
    let existing = document.getElementById(schemaId);
    if (existing) existing.remove();
    const schema = {
      '@context': 'https://schema.org',
      '@type': 'FAQPage',
      'mainEntity': faqs.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(); };
  }, []);

  return (
    <Section bg="canvas">
      <Container style={{ maxWidth: 860 }}>
        <Reveal>
          <SectionHead center
            eyebrow={ar ? 'الأسئلة الشائعة' : 'Frequently Asked Questions'}
            title={ar ? 'كل ما تريد معرفته' : 'Everything you need to know'}
            intro={ar ? 'إجابات على أكثر الأسئلة شيوعًا حول خدمات سرايا وسوقها.' : 'Answers to the most common questions about Saraya Events services and marketplace.'}
          />
        </Reveal>
        <div style={{ marginTop: 40, display: 'grid', gap: 10 }}>
          {faqs.map((faq, i) => (
            <Reveal key={i} delay={i * 30}>
              <div style={{ borderRadius: 12, border: '1px solid var(--line)', overflow: 'hidden', background: 'var(--white)' }}>
                <button
                  onClick={() => setOpen(open === i ? null : i)}
                  style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, padding: '18px 22px', background: 'none', border: 'none', cursor: 'pointer', fontFamily: 'var(--font-body)', textAlign: 'start', color: 'var(--fg-primary)' }}
                  aria-expanded={open === i}
                >
                  <span style={{ fontSize: 15.5, fontWeight: 600, lineHeight: 1.35 }}>{faq.q[lang]}</span>
                  <Icon name={open === i ? 'chevron-up' : 'chevron-down'} size={18} style={{ color: 'var(--gold-deep)', flexShrink: 0 }} />
                </button>
                {open === i && (
                  <div style={{ padding: '0 22px 20px', fontSize: 14.5, lineHeight: 1.7, color: 'var(--fg-secondary)', borderTop: '1px solid var(--line)' }}>
                    <p style={{ margin: '16px 0 0' }}>{faq.a[lang]}</p>
                  </div>
                )}
              </div>
            </Reveal>
          ))}
        </div>
        <div style={{ textAlign: 'center', marginTop: 32 }}>
          <Button variant="secondary" icon="message-circle" href={window.SARAYA.waLink('Hello Saraya Events, I have a question.')} target="_blank">
            {ar ? 'لديك سؤال آخر؟ راسلنا' : 'Have another question? Message us'}
          </Button>
        </div>
      </Container>
    </Section>
  );
}

Object.assign(window, { ServiceCard, PackageCard, CatalogueCard, HomePage, ClosingCTA, HomeFAQ });
