// Saraya Events — core pages: PageHero, About, Services, ServiceDetail, Packages, Gallery, Contact.

/* Reusable inner-page hero */
function PageHero({ eyebrow, title, intro, tone = 'champagne', icon = 'sparkles', slot, editKey, backTo, backLabel }) {
  const admin = useAdmin();
  const { lang } = useLang();
  const { go } = useNav();
  const E = editKey ? admin.getText(editKey + '.eyebrow:' + lang, eyebrow) : eyebrow;
  const T = editKey ? admin.getText(editKey + '.title:' + lang, title) : title;
  const I = editKey ? admin.getText(editKey + '.intro:' + lang, intro) : intro;
  const heroEdit = () => admin.openEdit({
    title: 'Edit page header (' + lang.toUpperCase() + ')',
    fields: [{ key: 'eyebrow', label: 'Eyebrow' }, { key: 'title', label: 'Title' }, { key: 'intro', label: 'Intro', type: 'textarea' }],
    values: { eyebrow: E, title: T, intro: I || '' },
    onSave: (v) => { admin.setText(editKey + '.eyebrow:' + lang, v.eyebrow); admin.setText(editKey + '.title:' + lang, v.title); admin.setText(editKey + '.intro:' + lang, v.intro); },
  });
  return (
    <section style={{ position: 'relative', paddingTop: 140, paddingBottom: 'clamp(48px,7vw,84px)', overflow: 'hidden', background: 'var(--cream)' }}>
      <Img tone={tone} icon={icon} ratio="auto" radius={0} plain slot={slot} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0.5 }} />
      <span style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to top, var(--bg-canvas) 2%, rgba(243,237,227,0.4) 100%)' }} />
      {editKey && <div style={{ position: 'absolute', top: 96, insetInlineEnd: 'var(--page-gutter)', zIndex: 6 }}><AdminEditButton onClick={heroEdit} label="Edit header" /></div>}
      <Container wide style={{ position: 'relative' }}>
        <Reveal>
          {backTo && <button onClick={() => go(backTo)} style={{ display: 'inline-flex', alignItems: 'center', gap: 7, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--fg-secondary)', fontSize: 13.5, marginBottom: 14 }}><Icon name={lang === 'ar' ? 'arrow-right' : 'arrow-left'} size={16} />{backLabel}</button>}
          <Eyebrow>{E}</Eyebrow>
          <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(36px,6vw,68px)', lineHeight: 1.04, fontWeight: 500, margin: '18px 0 0', letterSpacing: '-0.01em', maxWidth: 820 }}>{T}</h1>
          {I && <p style={{ marginTop: 20, fontSize: 'clamp(16px,1.7vw,20px)', lineHeight: 1.6, color: 'var(--fg-secondary)', maxWidth: 620 }}>{I}</p>}
        </Reveal>
      </Container>
    </section>
  );
}

/* ===== About ===== */
function AboutPage() {
  const { lang } = useLang();
  const pillars = [
    { icon: 'pen-line', en: 'Designed, not decorated', ar: 'تصميمٌ لا مجرّد تزيين', den: 'Every event starts with a concept and a palette — then we build the room around it.', dar: 'كل فعالية تبدأ بفكرة ولوحة ألوان، ثم نبني القاعة حولها.' },
    { icon: 'hand-heart', en: 'Hosted with care', ar: 'استضافة باهتمام', den: 'We treat your celebration as our own — discreet, calm, and present on the day.', dar: 'نتعامل مع مناسبتك كأنها لنا — بهدوء واحترافية وحضور يوم الحفل.' },
    { icon: 'gem', en: 'Quietly luxurious', ar: 'فخامة هادئة', den: 'Gold as an accent, never a shout. Generous space, fresh florals, considered detail.', dar: 'الذهب لمسةٌ لا صخب. مساحة وفيرة وزهور طازجة وتفاصيل مدروسة.' },
  ];
  return (
    <main>
      <PageHero editKey="about-hero" slot="about-hero" eyebrow={lang === 'ar' ? 'من نحن' : 'About us'} tone="blush" icon="gem"
        title={lang === 'ar' ? 'سرايا للفعاليات' : 'Saraya Events'}
        intro={lang === 'ar' ? 'فريق تصميم فعاليات في الإمارات، نُحوّل المناسبات إلى ذكريات بتفاصيل راقية وتنفيذ مدروس.' : 'A UAE event-design house turning milestones into memories — with refined detail and calm, careful execution.'} />
      <Section bg="canvas">
        <Container wide>
          <div className="saraya-split" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'center' }}>
            <Reveal><Img tone="champagne" icon="sparkles" ratio="4/5" label={lang === 'ar' ? 'منصة زفاف' : 'Wedding stage'} radius={20} slot="about-story" /></Reveal>
            <Reveal delay={100}>
              <SectionHead eyebrow={lang === 'ar' ? 'قصّتنا' : 'Our story'} title={lang === 'ar' ? 'الجمال في كل تفصيلة' : 'Beauty in every detail'} />
              <p style={{ marginTop: 18, fontSize: 17, lineHeight: 1.7, color: 'var(--fg-secondary)' }}>{lang === 'ar' ? 'من الأعراس الكبرى إلى لقاءات المجلس الصغيرة، نُصمّم فعاليات تشبه أصحابها. نهتم بالضيافة الإماراتية الكريمة، والذوق الخليجي الراقي، والتنفيذ الذي لا يترك شيئًا للصدفة.' : 'From grand weddings to intimate majlis gatherings, we design events that feel like the people they’re for. We care about generous Emirati hospitality, refined Gulf taste, and execution that leaves nothing to chance.'}</p>
              <p style={{ marginTop: 16, fontSize: 17, lineHeight: 1.7, color: 'var(--fg-secondary)' }}>{lang === 'ar' ? 'ومن معرضنا نقدّم الزهور والأثاث والديكور ومستلزمات الحفلات تحت سقف واحد.' : 'And from our showroom, we bring flowers, furniture, decor and party supplies together under one roof.'}</p>
            </Reveal>
          </div>
        </Container>
      </Section>
      <Section bg="muted">
        <Container wide>
          <Reveal><SectionHead center eyebrow={lang === 'ar' ? 'نهجنا' : 'Our approach'} title={lang === 'ar' ? 'كيف نعمل' : 'How we work'} /></Reveal>
          <div className="saraya-grid-3" style={{ marginTop: 48 }}>
            {pillars.map((p, i) => (
              <Reveal key={i} delay={(i % 3) * 70}>
                <div style={{ background: 'var(--white)', borderRadius: 16, padding: '30px 28px', boxShadow: 'var(--shadow-soft)', border: '1px solid var(--line)', height: '100%' }}>
                  <span style={{ display: 'inline-flex', width: 52, height: 52, borderRadius: 12, alignItems: 'center', justifyContent: 'center', background: 'var(--gold-tint)', color: 'var(--gold-deep)' }}><Icon name={p.icon} size={24} /></span>
                  <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 23, fontWeight: 500, margin: '18px 0 8px' }}>{lang === 'ar' ? p.ar : p.en}</h3>
                  <p style={{ fontSize: 14.5, lineHeight: 1.65, color: 'var(--fg-secondary)' }}>{lang === 'ar' ? p.dar : p.den}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </Container>
      </Section>
      <ClosingCTA />
    </main>
  );
}

/* ===== Services (all 12) ===== */
function ServicesPage() {
  const { lang } = useLang();
  const { go } = useNav();
  // Live vendor services from Supabase — append below Saraya's built-in services
  const { items: dbServices, loading: dbSvcsLoading } = window.useServices
    ? window.useServices({ onlyActive: true })
    : { items: [], loading: false };
  // Adapt DB services to the shape ServiceCard expects
  const dbServiceCards = (window.supabaseConfigured ? dbServices : []).map((s) => ({
    id: s.id, _fromDB: true,
    name: s.name,
    tag: s.categoryName && (s.categoryName.en || s.categoryName.ar)
      ? s.categoryName
      : { en: 'Vendor Service', ar: 'خدمة من مورد' },
    blurb: s.desc,
    price: s.price,
    meta: s.meta,
    tone: 'cream', icon: 'store',
    route: 'design',
    src: s.src,
    vendor_id: s.vendor_id,
    category: s.category,
    pricingType: s.pricingType,
    popular: s.popular,
  }));

  return (
    <main>
      <PageHero editKey="services-hero" slot="services-hero" eyebrow={lang === 'ar' ? 'سوق الخدمات' : 'Event Services Marketplace'} tone="champagne" icon="sparkles"
        title={lang === 'ar' ? 'سوق خدمات الفعاليات' : 'Event Services Marketplace'}
        intro={lang === 'ar' ? 'استكشف خدمات الفعاليات من سرايا والموردين المعتمدين — من التخطيط والديكور إلى التصوير والضيافة والزهور والترفيه وأكثر.' : 'Explore event services from Saraya Events and approved vendors — from planning and décor to photography, hospitality, flowers, entertainment, and more.'} />
      <Section bg="canvas">
        <Container wide>
          {/* Source badges */}
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 32, flexWrap: 'wrap' }}>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '5px 14px', borderRadius: 999, background: 'var(--espresso)', color: 'var(--gold-light)', fontSize: 12, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase' }}>
              <Icon name="star" size={12} />
              {lang === 'ar' ? 'من سرايا للفعاليات' : 'By Saraya Events'}
            </span>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '5px 14px', borderRadius: 999, background: 'var(--cream)', color: 'var(--espresso)', fontSize: 12, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', border: '1px solid var(--line)' }}>
              <Icon name="store" size={12} />
              {lang === 'ar' ? 'من موردين معتمدين' : 'By Approved Vendors'}
            </span>
            <span style={{ fontSize: 13, color: 'var(--fg-muted)' }}>
              {lang === 'ar' ? 'بعض الخدمات تُقدَّم من سرايا مباشرةً، وبعضها من موردين سوق معتمدين.' : 'Some services are delivered directly by Saraya, others by approved marketplace vendors.'}
            </span>
          </div>
          {/* Saraya built-in services */}
          <div className="saraya-grid-3">
            {window.SARAYA.SERVICES.map((s, i) => (
              <Reveal key={s.id} delay={(i % 3) * 60}><ServiceCard s={s} onClick={() => go(s.route || 'design')} /></Reveal>
            ))}
          </div>
          {/* Live vendor services from Supabase */}
          {dbSvcsLoading && (
            <p style={{ textAlign: 'center', color: 'var(--fg-muted)', fontSize: 14, marginTop: 32 }}>
              {lang === 'ar' ? 'جارٍ تحميل الخدمات…' : 'Loading vendor services…'}
            </p>
          )}
          {dbServiceCards.length > 0 && (
            <div style={{ marginTop: 40 }}>
              <SectionHead eyebrow={lang === 'ar' ? 'مميزة' : 'Featured'} title={lang === 'ar' ? 'خدمات مميزة' : 'Featured Services'} />
              <div className="saraya-grid-3" style={{ marginTop: 28 }}>
                {dbServiceCards.map((s, i) => (
                  <Reveal key={s.id} delay={(i % 3) * 60}>
                    <ServiceCardDB s={s} onClick={function () { if (window.openItemRFQModal) window.openItemRFQModal(s); else go('design'); }} />
                  </Reveal>
                ))}
              </div>
            </div>
          )}
          <div style={{ display: 'flex', gap: 12, justifyContent: 'center', marginTop: 40, flexWrap: 'wrap' }}>
            <Button variant="secondary" iconRight="arrow-right" onClick={() => go('services')}>
              {lang === 'ar' ? 'تصفح الخدمات' : 'Browse Services'}
            </Button>
            <Button variant="gold" icon="pen-line" onClick={() => go('design')}>
              {lang === 'ar' ? 'اطلب عرض سعر خدمة' : 'Request Service Quote'}
            </Button>
          </div>
        </Container>
      </Section>
      <ClosingCTA />
    </main>
  );
}

/* Rich content for the four dedicated service pages */
const SERVICE_DETAILS = {
  weddings: {
    icon: 'gem', tone: 'blush',
    highlights: {
      en: [['Stage & Kosha', 'Bride sofa, floral arch, draping and lighting — the centrepiece of the room.', 'crown'],
           ['Florals', 'Bouquets, aisle and centerpieces in your palette, fresh on the day.', 'flower'],
           ['Guest Experience', 'Seating, dining, signage and flow, arranged for comfort.', 'users'],
           ['On-Day Coordination', 'A calm team running the timeline so you can be present.', 'clock']],
      ar: [['المنصة والكوشة', 'أريكة العروس وقوس الزهور والستائر والإضاءة — قلب القاعة.', 'crown'],
           ['الزهور', 'الباقات والممر والتنسيقات بألوانك، طازجة في يومك.', 'flower'],
           ['تجربة الضيوف', 'الجلوس والطعام واللافتات والتنسيق للراحة.', 'users'],
           ['تنسيق اليوم', 'فريق هادئ يدير الجدول لتكون حاضرًا بالكامل.', 'clock']],
    },
  },
  corporate: {
    icon: 'briefcase', tone: 'espresso',
    highlights: {
      en: [['Branded Staging', 'Stages and backdrops built to your brand guidelines.', 'panels-top-left'],
           ['AV & Lighting', 'Trusted production partners for sound, screens and light.', 'lightbulb'],
           ['Registration & Flow', 'Welcome desks, seating and signage that runs smoothly.', 'clipboard-list'],
           ['Catering & Breaks', 'Refreshments and meals timed to your agenda.', 'utensils']],
      ar: [['منصات بعلامتك', 'منصات وخلفيات تُبنى وفق هويتك.', 'panels-top-left'],
           ['الصوت والإضاءة', 'شركاء إنتاج موثوقون للصوت والشاشات والإضاءة.', 'lightbulb'],
           ['التسجيل والتنظيم', 'مكاتب استقبال وجلوس ولافتات تسير بسلاسة.', 'clipboard-list'],
           ['الضيافة والاستراحات', 'مشروبات ووجبات موقوتة مع جدولك.', 'utensils']],
    },
  },
  catering: {
    icon: 'utensils', tone: 'sage',
    highlights: {
      en: [['Mini Buffets', 'Beautifully styled buffets for intimate gatherings.', 'utensils'],
           ['Grazing Tables', 'Abundant grazing spreads as a centrepiece.', 'grape'],
           ['Full Catering', 'Emirati, Arabic and international menus — all halal.', 'chef-hat'],
           ['Dessert & Coffee', 'Dessert tables and Arabic coffee corners.', 'coffee']],
      ar: [['بوفيهات مصغّرة', 'بوفيهات منسّقة بجمال للقاءات الحميمة.', 'utensils'],
           ['طاولات الضيافة', 'طاولات وفيرة كقطعة محورية.', 'grape'],
           ['ضيافة كاملة', 'قوائم إماراتية وعربية وعالمية — كلها حلال.', 'chef-hat'],
           ['الحلويات والقهوة', 'طاولات حلويات وأركان قهوة عربية.', 'coffee']],
    },
  },
  flowers: {
    icon: 'flower', tone: 'blush',
    highlights: {
      en: [['Bridal Bouquets', 'Hand-tied bouquets in seasonal blooms.', 'flower-2'],
           ['Centerpieces', 'Table florals designed to your palette.', 'flower'],
           ['Installations', 'Arches, canopies and floral walls.', 'panels-top-left'],
           ['Gifting & Retail', 'Bouquets and arrangements from our showroom.', 'gift']],
      ar: [['باقات العروس', 'باقات منسّقة يدويًا بزهور موسمية.', 'flower-2'],
           ['التنسيقات', 'زهور الطاولات بألوانك.', 'flower'],
           ['التركيبات', 'أقواس ومظلات وجدران زهور.', 'panels-top-left'],
           ['الإهداء والبيع', 'باقات وتنسيقات من معرضنا.', 'gift']],
    },
  },
  graduation: {
    icon: 'graduation-cap', tone: 'champagne',
    highlights: {
      en: [['Styled Stage & Backdrop', 'A personalised graduation stage with your name, school crest and graduation year.', 'panels-top-left'],
           ['Photo Corner', 'Framed backdrop, florals and props so every photo is frame-worthy.', 'camera'],
           ['Mini Buffet', 'A halal spread — savoury bites, pastries and a graduation cake — served to your timeline.', 'utensils'],
           ['Balloon Styling', 'Organic balloon arches and number balloons in your palette, never over-the-top.', 'party-popper']],
      ar: [['منصة وخلفية منسّقة', 'منصة تخرج مخصّصة بالاسم وشعار المدرسة وسنة التخرج.', 'panels-top-left'],
           ['ركن التصوير', 'خلفية مؤطّرة وزهور وقطع ديكور لصورٍ تستحق الإطار.', 'camera'],
           ['بوفيه مصغّر', 'ضيافة حلال — مقبّلات ومخبوزات وكيك تخرج — تُقدَّم في توقيتك.', 'utensils'],
           ['تنسيق بالونات', 'أقواس بالونات عضوية وبالونات أرقام بألوانك، بذوقٍ راقٍ دائمًا.', 'party-popper']],
    },
  },
  birthdays: {
    icon: 'cake', tone: 'rose',
    highlights: {
      en: [['Themed Décor & Styling', 'Full room styling around your chosen theme — from princess parties to sleek adult milestones.', 'sparkles'],
           ['Cake & Dessert Table', 'Custom cake and a styled dessert spread in matching palette, delivered and set up.', 'cake'],
           ['Balloon Installations', 'Arches, columns and organic balloon clusters tailored to your colours.', 'party-popper'],
           ['Kids Activity Setup', 'Soft play areas, craft corners and entertainment styling for younger guests.', 'smile']],
      ar: [['ديكور وتنسيق مع ثيم', 'تنسيق كامل للقاعة حول الثيم المختار — من حفلات الأميرات إلى مناسبات البالغين الأنيقة.', 'sparkles'],
           ['الكيك وطاولة الحلويات', 'كيك مخصّص وطاولة حلويات منسّقة بألوانك، تُسلَّم وتُجهَّز.', 'cake'],
           ['تركيبات البالونات', 'أقواس وأعمدة وتجمّعات بالونات عضوية بألوانك.', 'party-popper'],
           ['إعداد أنشطة الأطفال', 'مناطق ألعاب ناعمة وأركان رسم وتنسيق ترفيه للضيوف الصغار.', 'smile']],
    },
  },
  decor: {
    icon: 'sparkles', tone: 'champagne',
    highlights: {
      en: [['Backdrops & Feature Walls', 'Floral walls, fabric backdrops and custom printed panels for any occasion.', 'image'],
           ['Stage Builds', 'Raised stage platforms, steps and fascia built and styled to your spec.', 'panels-top-left'],
           ['Draping & Lighting', 'Ceiling draping, fairy lights and ambient lighting that transforms a room.', 'lightbulb'],
           ['Signage & Props', 'Custom neon signs, acrylic boards, arches and entrance pieces.', 'pen-line']],
      ar: [['خلفيات وجدران مميزة', 'جدران زهور وخلفيات قماشية ولوحات مطبوعة مخصّصة لأي مناسبة.', 'image'],
           ['تشييد المنصات', 'منصات مرتفعة وسلالم وواجهات تُبنى وتُنسَّق وفق مواصفاتك.', 'panels-top-left'],
           ['الستائر والإضاءة', 'ستائر سقفية وأضواء خيالية وإضاءة محيطية تحوّل القاعة.', 'lightbulb'],
           ['اللافتات والديكور', 'لافتات نيون وألواح أكريليك وأقواس وقطع مداخل مخصّصة.', 'pen-line']],
    },
  },
  balloons: {
    icon: 'party-popper', tone: 'rose',
    highlights: {
      en: [['Organic Balloon Arches', 'Free-form balloon arches in your palette — never rigid, always styled.', 'party-popper'],
           ['Balloon Garlands', 'Flowing garland installations for tables, walls and entrances.', 'sparkles'],
           ['Number & Letter Balloons', 'Giant foil numbers and letters for milestone moments.', 'hash'],
           ['Full Balloon Ceilings', 'Cloud-like canopies of balloons filling the ceiling above your guests.', 'cloud']],
      ar: [['أقواس بالونات عضوية', 'أقواس بالونات حرة الشكل بألوانك — دائمًا منسّقة وبذوقٍ رفيع.', 'party-popper'],
           ['أكاليل بالونات', 'تركيبات أكاليل متدفّقة للطاولات والجدران والمداخل.', 'sparkles'],
           ['بالونات أرقام وحروف', 'أرقام وحروف فويل عملاقة للمناسبات المميزة.', 'hash'],
           ['سقوف بالونات', 'مظلات شبيهة بالسحاب تملأ سقف القاعة فوق ضيوفك.', 'cloud']],
    },
  },
  majlis: {
    icon: 'home', tone: 'cream',
    highlights: {
      en: [['Majlis Styling', 'Traditional floor seating arranged and styled — cushions, rugs, side tables, lanterns.', 'home'],
           ['Florals & Fragrance', 'Seasonal flowers and oud or bakhoor arrangements to welcome your guests.', 'flower'],
           ['Catering Setup', 'Arabic coffee, dates, savoury bites and a dessert spread — halal and beautifully laid.', 'coffee'],
           ['Setup & Clear', 'We arrive early, set everything up, and clear after your guests have left.', 'clock']],
      ar: [['تنسيق المجلس', 'جلوس أرضي تقليدي منسّق ومرتّب — وسائد وسجّاد وطاولات جانبية وفوانيس.', 'home'],
           ['الزهور والعطور', 'زهور موسمية وترتيبات عود أو بخور لاستقبال ضيوفك.', 'flower'],
           ['إعداد الضيافة', 'قهوة عربية وتمر ومقبّلات وطاولة حلويات — حلال ومرتّبة بجمال.', 'coffee'],
           ['التجهيز والإزالة', 'نصل مبكرًا ونجهّز كل شيء ونرفعه بعد مغادرة ضيوفك.', 'clock']],
    },
  },
  photography: {
    icon: 'camera', tone: 'espresso',
    highlights: {
      en: [['Full-Day Coverage', 'Photographer and videographer on-site from prep to the last dance.', 'camera'],
           ['Cinematic Highlights', 'An edited highlight reel, ready to share within days.', 'film'],
           ['Detail & Drone Shots', 'Aerial coverage and macro shots of d\u00e9cor, rings and details.', 'sparkles'],
           ['Fast Delivery', 'Edited galleries and reels delivered quickly, so memories don\u2019t wait.', 'clock']],
      ar: [['\u062a\u063a\u0637\u064a\u0629 \u0643\u0627\u0645\u0644\u0629 \u0644\u0644\u064a\u0648\u0645', '\u0645\u0635\u0648\u0631 \u0648\u0645\u0635\u0648\u0631 \u0641\u064a\u062f\u064a\u0648 \u0641\u064a \u0627\u0644\u0645\u0648\u0642\u0639 \u0645\u0646 \u0627\u0644\u062a\u062d\u0636\u064a\u0631 \u062d\u062a\u0649 \u0646\u0647\u0627\u064a\u0629 \u0627\u0644\u062d\u0641\u0644.', 'camera'],
           ['\u0644\u0642\u0637\u0627\u062a \u0633\u064a\u0646\u0645\u0627\u0626\u064a\u0629', '\u0631\u064a\u0644 \u0645\u062e\u062a\u0627\u0631\u0627\u062a \u0645\u062d\u0631\u0631 \u062c\u0627\u0647\u0632 \u0644\u0644\u0645\u0634\u0627\u0631\u0643\u0629 \u062e\u0644\u0627\u0644 \u0623\u064a\u0627\u0645.', 'film'],
           ['\u0644\u0642\u0637\u0627\u062a \u062c\u0648\u064a\u0629 \u0648\u062a\u0641\u0627\u0635\u064a\u0644', '\u062a\u063a\u0637\u064a\u0629 \u062c\u0648\u064a\u0629 \u0648\u0644\u0642\u0637\u0627\u062a \u0645\u0642\u0631\u0651\u0628\u0629 \u0644\u0644\u062f\u064a\u0643\u0648\u0631 \u0648\u0627\u0644\u062e\u0648\u0627\u062a\u0645.', 'sparkles'],
           ['\u062a\u0633\u0644\u064a\u0645 \u0633\u0631\u064a\u0639', '\u0645\u0639\u0627\u0631\u0636 \u0648\u0644\u0642\u0637\u0627\u062a \u0645\u062d\u0631\u0631\u0629 \u062a\u064f\u0633\u0644\u0651\u0645 \u0628\u0633\u0631\u0639\u0629.', 'clock']],
    },
  },
  entertainment: {
    icon: 'smile', tone: 'rose',
    highlights: {
      en: [['Kids Activities', 'Face painting, soft play and craft corners for little guests.', 'smile'],
           ['Live Entertainers', 'Magicians, performers and character appearances.', 'sparkles'],
           ['Party Hosts & MCs', 'A host who keeps the programme moving and guests engaged.', 'mic'],
           ['Game Stations', 'Fun stations and prizes for group games and activities.', 'gamepad-2']],
      ar: [['\u0623\u0646\u0634\u0637\u0629 \u0644\u0644\u0623\u0637\u0641\u0627\u0644', '\u0631\u0633\u0645 \u0639\u0644\u0649 \u0627\u0644\u0648\u062c\u0647 \u0648\u0623\u0644\u0639\u0627\u0628 \u0646\u0627\u0639\u0645\u0629 \u0648\u0623\u0631\u0643\u0627\u0646 \u062d\u0631\u0641\u064a\u0629 \u0644\u0636\u064a\u0648\u0641 \u0627\u0644\u0635\u063a\u0627\u0631.', 'smile'],
           ['\u0641\u0646\u0627\u0646\u0648\u0646 \u062a\u0631\u0641\u064a\u0647\u064a\u0648\u0646', '\u0633\u062d\u0631\u0629 \u0648\u0641\u0646\u0627\u0646\u0648\u0646 \u0648\u0634\u062e\u0635\u064a\u0627\u062a \u0645\u062d\u0628\u0648\u0628\u0629.', 'sparkles'],
           ['\u0645\u0642\u062f\u0645\u0648 \u062d\u0641\u0644\u0627\u062a', '\u0645\u0642\u062f\u0651\u0645 \u064a\u062d\u0627\u0641\u0638 \u0639\u0644\u0649 \u0633\u064a\u0631 \u0627\u0644\u0628\u0631\u0646\u0627\u0645\u062c \u0648\u062a\u0641\u0627\u0639\u0644 \u0627\u0644\u0636\u064a\u0648\u0641.', 'mic'],
           ['\u0645\u062d\u0637\u0627\u062a \u0623\u0644\u0639\u0627\u0628', '\u0645\u062d\u0637\u0627\u062a \u0645\u0631\u062d\u0629 \u0648\u062c\u0648\u0627\u0626\u0632 \u0644\u0644\u0623\u0644\u0639\u0627\u0628 \u0627\u0644\u062c\u0645\u0627\u0639\u064a\u0629.', 'gamepad-2']],
    },
  },
  transport: {
    icon: 'truck', tone: 'cream',
    highlights: {
      en: [['Guest Shuttles', 'Scheduled shuttle transport for guests to and from the venue.', 'bus'],
           ['VIP Transport', 'Private, chauffeured transport for the wedding party or VIP guests.', 'car'],
           ['Equipment Logistics', 'Delivery, load-in and load-out for d\u00e9cor, rentals and staging.', 'truck'],
           ['On-Site Coordination', 'A logistics lead managing timing and movement throughout the event.', 'clipboard-list']],
      ar: [['\u062d\u0627\u0641\u0644\u0627\u062a \u0646\u0642\u0644 \u0627\u0644\u0636\u064a\u0648\u0641', '\u0646\u0642\u0644 \u0645\u062c\u062f\u0648\u0644 \u0644\u0644\u0636\u064a\u0648\u0641 \u0645\u0646 \u0648\u0625\u0644\u0649 \u0627\u0644\u0645\u0648\u0642\u0639.', 'bus'],
           ['\u0646\u0642\u0644 \u0641\u0627\u062e\u0631', '\u0646\u0642\u0644 \u062e\u0627\u0635 \u0645\u0639 \u0633\u0627\u0626\u0642 \u0644\u0641\u0631\u064a\u0642 \u0627\u0644\u0639\u0631\u0633 \u0623\u0648 \u0636\u064a\u0648\u0641 \u0627\u0644\u0634\u0631\u0641.', 'car'],
           ['\u0644\u0648\u062c\u0633\u062a\u064a\u0643\u0633 \u0627\u0644\u0645\u0639\u062f\u0627\u062a', '\u062a\u0648\u0635\u064a\u0644 \u0648\u062a\u062d\u0645\u064a\u0644 \u0648\u062a\u0641\u0631\u064a\u063a \u0644\u0644\u062f\u064a\u0643\u0648\u0631 \u0648\u0627\u0644\u062a\u0623\u062c\u064a\u0631 \u0648\u0627\u0644\u0645\u0646\u0635\u0627\u062a.', 'truck'],
           ['\u062a\u0646\u0633\u064a\u0642 \u0641\u064a \u0627\u0644\u0645\u0648\u0642\u0639', '\u0645\u0633\u0624\u0648\u0644 \u0644\u0648\u062c\u0633\u062a\u064a\u0627\u062a \u064a\u062f\u064a\u0631 \u0627\u0644\u062a\u0648\u0642\u064a\u062a \u0648\u0627\u0644\u062d\u0631\u0643\u0629 \u0637\u0648\u0627\u0644 \u0627\u0644\u0641\u0639\u0627\u0644\u064a\u0629.', 'clipboard-list']],
    },
  },
  planning: {
    icon: 'clipboard-check', tone: 'champagne',
    highlights: {
      en: [['Full Planning', 'End-to-end planning from concept and budget to final execution.', 'clipboard-check'],
           ['Vendor Coordination', 'A single point of contact managing every vendor and supplier.', 'users'],
           ['Timeline Management', 'A detailed run-of-show so every moment happens on schedule.', 'calendar-clock'],
           ['Day-Of Coordination', 'On-site management so you can enjoy the event, not run it.', 'clock']],
      ar: [['\u062a\u062e\u0637\u064a\u0637 \u0643\u0627\u0645\u0644', '\u062a\u062e\u0637\u064a\u0637 \u0634\u0627\u0645\u0644 \u0645\u0646 \u0627\u0644\u0641\u0643\u0631\u0629 \u0648\u0627\u0644\u0645\u064a\u0632\u0627\u0646\u064a\u0629 \u062d\u062a\u0649 \u0627\u0644\u062a\u0646\u0641\u064a\u0630 \u0627\u0644\u0646\u0647\u0627\u0626\u064a.', 'clipboard-check'],
           ['\u062a\u0646\u0633\u064a\u0642 \u0627\u0644\u0645\u0648\u0631\u062f\u064a\u0646', '\u062c\u0647\u0629 \u0627\u062a\u0635\u0627\u0644 \u0648\u0627\u062d\u062f\u0629 \u062a\u062f\u064a\u0631 \u0643\u0644 \u0645\u0648\u0631\u062f \u0648\u0645\u0632\u0648\u062f.', 'users'],
           ['\u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u062c\u062f\u0648\u0644 \u0627\u0644\u0632\u0645\u0646\u064a', '\u062c\u062f\u0648\u0644 \u062a\u0641\u0635\u064a\u0644\u064a \u0644\u0636\u0645\u0627\u0646 \u062d\u062f\u0648\u062b \u0643\u0644 \u0634\u064a\u0621 \u0641\u064a \u0645\u0648\u0639\u062f\u0647.', 'calendar-clock'],
           ['\u062a\u0646\u0633\u064a\u0642 \u064a\u0648\u0645 \u0627\u0644\u0641\u0639\u0627\u0644\u064a\u0629', '\u0625\u062f\u0627\u0631\u0629 \u0641\u064a \u0627\u0644\u0645\u0648\u0642\u0639 \u0644\u062a\u0633\u062a\u0645\u062a\u0639 \u0628\u0627\u0644\u0641\u0639\u0627\u0644\u064a\u0629 \u0628\u062f\u0644\u0627\u064b \u0645\u0646 \u0625\u062f\u0627\u0631\u062a\u0647\u0627.', 'clock']],
    },
  },
};

// Compare Prices: map ServiceDetailPage's serviceId (route param) to the matching
// SERVICE_CATEGORIES dbSlug, so we can query real vendor listings for this category.
// Kept as an explicit table (not derived) because a few ids intentionally diverge
// from their dbSlug (e.g. 'majlis' -> 'majlis-svc').
const SERVICE_ID_TO_CATSLUG = {
  weddings: 'wedding-svc',
  corporate: 'corporate-svc',
  catering: 'catering',
  flowers: 'decor-svc',
  graduation: 'graduation-svc',
  birthdays: 'birthdays-svc',
  decor: 'decor-svc',
  balloons: 'balloons-svc',
  majlis: 'majlis-svc',
  photography: 'photography',
  entertainment: 'entertainment',
  transport: 'transport',
  planning: 'planning',
};

// Real vendor service cards for this category ("From our work") — styled like product/rental cards.
// Renders nothing if there are no live approved services in this category.
function ServiceCategoryCardsGrid({ categorySlug }) {
  const { lang } = useLang();
  const { go } = useNav();
  const [rows, setRows] = React.useState(null);

  React.useEffect(function () {
    let cancelled = false;
    (async function () {
      const svc = window.SarayaService;
      if (!window.supabaseConfigured || !svc || !categorySlug) { if (!cancelled) setRows([]); return; }
      try {
        const list = await svc.services.list({ categorySlug: categorySlug, onlyActive: true, limit: 50 });
        if (!cancelled) setRows(list || []);
      } catch (e) {
        if (!cancelled) setRows([]);
      }
    })();
    return function () { cancelled = true; };
  }, [categorySlug]);

  if (!rows || rows.length === 0) return null;

  const cards = rows.map(function (r) {
    return {
      id: r.id, _fromDB: true,
      name: r.name,
      tag: (r.categoryName && (r.categoryName.en || r.categoryName.ar)) ? r.categoryName : { en: 'Vendor Service', ar: '\u062e\u062f\u0645\u0629 \u0645\u0646 \u0645\u0648\u0631\u062f' },
      blurb: r.desc,
      price: r.price,
      meta: r.meta,
      src: r.src,
    };
  });

  return (
    <div className="saraya-grid-3" style={{ marginTop: 40 }}>
      {cards.map(function (c, i) {
        return (
          <Reveal key={c.id} delay={(i % 3) * 60}>
            <ServiceCardDB s={c} onClick={function () { if (window.openItemRFQModal) window.openItemRFQModal(c); else go('design'); }} />
          </Reveal>
        );
      })}
    </div>
  );
}

// Compare Prices: lightweight, additive "vendors offering this service" grid.
// Queries the real services table (window.SarayaService.services.list) so customers
// have real listings to select for the Compare Prices modal. Renders nothing if
// fewer than 2 live vendor listings exist for this category -- comparison needs 2+.
function ServiceVendorsCompareGrid({ categorySlug, fallbackIcon }) {
  const { lang } = useLang();
  const ar = lang === 'ar';
  const [rows, setRows] = React.useState(null);

  React.useEffect(function () {
    let cancelled = false;
    (async function () {
      const svc = window.SarayaService;
      if (!svc || !svc.services || !svc.services.list || !categorySlug) { if (!cancelled) setRows([]); return; }
      try {
        const list = await svc.services.list({ categorySlug: categorySlug, onlyActive: true, limit: 50 });
        if (!cancelled) setRows(list || []);
      } catch (e) {
        if (!cancelled) setRows([]);
      }
    })();
    return function () { cancelled = true; };
  }, [categorySlug]);

  if (!rows || rows.length < 2) return null;

  return (
    <Section bg="canvas">
      <Container wide>
        <Reveal><SectionHead eyebrow={ar ? 'قارن' : 'Compare'} title={ar ? 'مزودو هذه الخدمة' : 'Vendors offering this service'} /></Reveal>
        <p style={{ textAlign: 'center', color: 'var(--fg-muted)', marginTop: -20, marginBottom: 32, fontSize: 14 }}>
          {ar ? 'اختر عرضين أو أكثر لمقارنة الأسعار جنبًا إلى جنب.' : 'Select two or more to compare prices side by side.'}
        </p>
        <div className="saraya-grid-3">
          {rows.map(function (r) {
            return (
              <div key={r.id} className="saraya-lift" style={{ background: 'var(--white)', border: '1px solid var(--line)', borderRadius: 'var(--radius-lg)', boxShadow: 'var(--shadow-soft)', overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
                <div style={{ aspectRatio: '4 / 3', position: 'relative', background: 'var(--gold-tint)', overflow: 'hidden' }}>
                  {r.src
                    ? <img src={r.src} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
                    : <Img tone="champagne" icon={fallbackIcon} ratio="auto" radius={0} plain style={{ width: '100%', height: '100%' }} />}
                  {window.CompareCheckbox && (
                    <div style={{ position: 'absolute', top: 8, insetInlineStart: 8, zIndex: 5 }}>
                      <window.CompareCheckbox listingType="service" item={r} />
                    </div>
                  )}
                </div>
                <div style={{ padding: 14, display: 'flex', flexDirection: 'column', gap: 8, flex: 1 }}>
                  <strong style={{ fontSize: 15 }}>{r.name ? (ar ? (r.name.ar || r.name.en) : (r.name.en || r.name.ar)) : '—'}</strong>
                  <span style={{ fontSize: 13, color: 'var(--fg-muted)' }}>
                    {window.SarayaCompare ? (function () { const p = window.SarayaCompare.priceDisplay(window.SarayaCompare.makeEntry('service', r)); return ar ? p.ar : p.en; })() : ''}
                  </span>
                  <button
                    onClick={function () { if (window.openItemRFQModal) window.openItemRFQModal(r); }}
                    style={{ marginTop: 'auto', padding: '9px 12px', borderRadius: 'var(--radius-md)', border: 'none', background: 'var(--fg-primary)', color: 'var(--white)', fontSize: 13, fontWeight: 700, cursor: 'pointer' }}
                  >
                    {ar ? 'اطلب عرض سعر' : 'Request a Quote'}
                  </button>
                </div>
              </div>
            );
          })}
        </div>
      </Container>
    </Section>
  );
}

function ServiceDetailPage({ serviceId }) {
  const { t, lang } = useLang();
  const { go } = useNav();
  const admin = useAdmin();
  let s = window.SARAYA.SERVICES.find((x) => x.id === serviceId);
  const d = SERVICE_DETAILS[serviceId];
  React.useEffect(function () {
    try {
      if (!s) return;
      window.sarayaTrack && window.sarayaTrack('view_item', {
        currency: 'AED', value: 0,
        items: [{ item_id: serviceId, item_name: (s.name && (s.name.en || s.name)) || '', item_category: 'service', price: 0 }],
      });
    } catch (e) {}
  }, [serviceId]);
  if (!s || !d) { go('services'); return null; }
  s = admin.resolveEntity('svc:' + serviceId, s);
  const galleryTones = ['blush', 'champagne', 'cream', 'rose', 'sage', 'espresso'];
  return (
    <main>
      <PageHero slot={'svc:' + serviceId} eyebrow={s.tag[lang]} tone={d.tone} icon={d.icon} title={s.name[lang]} intro={s.blurb[lang]} backTo="services" backLabel={lang === 'ar' ? 'الخدمات' : 'Services'} />
      <Section bg="canvas">
        <Container wide>
          <Reveal><SectionHead eyebrow={lang === 'ar' ? 'ما نقدّمه' : 'What’s included'} title={lang === 'ar' ? 'تفاصيل تصنع الفرق' : 'The details that make it'} /></Reveal>
          <div className="saraya-grid-2" style={{ marginTop: 44 }}>
            {d.highlights[lang].map((h, i) => (
              <Reveal key={i} delay={(i % 2) * 80}>
                <div style={{ display: 'flex', gap: 18, padding: '26px 24px', background: 'var(--white)', borderRadius: 16, boxShadow: 'var(--shadow-soft)', border: '1px solid var(--line)', height: '100%' }}>
                  <span style={{ flexShrink: 0, display: 'inline-flex', width: 50, height: 50, borderRadius: 12, alignItems: 'center', justifyContent: 'center', background: 'var(--gold-tint)', color: 'var(--gold-deep)' }}><Icon name={h[2]} size={23} /></span>
                  <div>
                    <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 500, marginBottom: 6 }}>{h[0]}</h3>
                    <p style={{ fontSize: 14.5, lineHeight: 1.6, color: 'var(--fg-secondary)' }}>{h[1]}</p>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
        </Container>
      </Section>
      <Section bg="muted">
        <Container wide>
          <ServiceCategoryCardsGrid categorySlug={SERVICE_ID_TO_CATSLUG[serviceId]} />
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, justifyContent: 'center', marginTop: 44 }}>
            <Button variant="primary" size="lg" icon="pen-line" onClick={() => go('design')}>{t('cta.quote')}</Button>
          </div>
          <div style={{ textAlign: 'center', marginTop: 14, fontSize: 13, color: 'var(--fg-secondary)' }}>
            {lang === 'ar' ? 'يلزم دفع عربون بحد أدنى 10% لتأكيد الحجز.' : 'A minimum 10% deposit is required to confirm your booking.'}
          </div>
        </Container>
      </Section>
      <ServiceVendorsCompareGrid categorySlug={SERVICE_ID_TO_CATSLUG[serviceId]} fallbackIcon={d.icon} />
    </main>
  );
}

/* ===== Packages ===== */
function PackagesPage() {
  const { lang } = useLang();
  const { go } = useNav();
  return (
    <main>
      <PageHero editKey="packages-hero" slot="packages-hero" eyebrow={lang === 'ar' ? 'باقات سرايا للفعاليات' : 'Saraya Event Packages'} tone="rose" icon="gift"
        title={lang === 'ar' ? 'باقات سرايا للفعاليات' : 'Saraya Event Packages'}
        intro={lang === 'ar' ? 'باقات منسّقة من سرايا للفعاليات — اختر نقطة انطلاق جاهزة أو اطلب باقة مخصّصة تُصمَّم حول مناسبتك.' : 'Curated packages by Saraya Events — choose a ready starting point or request a custom package designed around your occasion.'} />
      <Section bg="canvas">
        <Container wide>
          {/* Source badge */}
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 32, justifyContent: 'center' }}>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '5px 14px', borderRadius: 999, background: 'var(--espresso)', color: 'var(--gold-light)', fontSize: 12, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase' }}>
              <Icon name="star" size={12} />
              {lang === 'ar' ? 'من سرايا للفعاليات' : 'By Saraya Events'}
            </span>
            <span style={{ fontSize: 13, color: 'var(--fg-muted)' }}>
              {lang === 'ar' ? 'جميع الباقات منسّقة ومُقدَّمة من فريق سرايا مباشرةً.' : 'All packages are curated and delivered directly by the Saraya Events team.'}
            </span>
          </div>
          <div className="saraya-grid-3">
            {window.SARAYA.PACKAGES.map((p, i) => (
              <Reveal key={p.id} delay={(i % 3) * 60}><PackageCard p={p} onQuote={() => go('design')} /></Reveal>
            ))}
          </div>
          <Reveal>
            <p style={{ textAlign: 'center', marginTop: 40, fontSize: 14.5, color: 'var(--fg-muted)', maxWidth: 560, marginInline: 'auto' }}>
              {lang === 'ar' ? 'كل الأسعار تُحدَّد حسب التفاصيل وعدد الضيوف والموقع. تواصل معنا لعرض سعر دقيق.' : 'All pricing is tailored to your details, guest count and venue. Get in touch for an exact quote.'}
            </p>
            <div style={{ display: 'flex', gap: 12, justifyContent: 'center', marginTop: 20, flexWrap: 'wrap' }}>
              <Button variant="gold" size="lg" icon="wand-sparkles" onClick={() => go('design')}>
                {lang === 'ar' ? 'خصّص مع سرايا' : 'Customize with Saraya'}
              </Button>
              <Button variant="secondary" size="lg" icon="pen-line" onClick={() => go('design')}>
                {lang === 'ar' ? 'اطلب عرض سعر للباقة' : 'Request Package Quote'}
              </Button>
            </div>
          </Reveal>
        </Container>
      </Section>
      <ClosingCTA />
    </main>
  );
}

/* ===== Gallery ===== */
function GalleryPage() {
  const { lang } = useLang();
  const admin = useAdmin();
  const items = admin.resolveGallery();
  const addPhoto = () => {
    const id = 'gal-' + Date.now().toString(36);
    admin.addGalleryItem({ id, tone: 'cream', span: '', label: { en: 'New photo', ar: 'صورة جديدة' } });
    admin.toastMsg('Photo added — hover it to upload an image');
  };
  return (
    <main>
      <PageHero editKey="gallery-hero" slot="gallery-hero" eyebrow={lang === 'ar' ? 'المعرض' : 'Gallery'} tone="champagne" icon="image"
        title={lang === 'ar' ? 'فعالياتٌ نفخر بها' : 'Events we’re proud of'}
        intro={lang === 'ar' ? 'لمحات من أعراس وخطوبات وفعاليات شركات ولقاءات منزلية صمّمناها.' : 'Glimpses of weddings, engagements, corporate events and home gatherings we’ve designed.'} />
      <Section bg="canvas">
        <Container wide>
          {admin.editMode && (
            <div style={{ marginBottom: 24, display: 'flex', justifyContent: 'center' }}>
              <AdminAddButton onClick={addPhoto} label={lang === 'ar' ? 'أضف صورة للمعرض' : 'Add a gallery photo'} />
            </div>
          )}
          <div className="saraya-gallery-full">
            {items.map((g, i) => (
              <Reveal key={g.id} delay={(i % 3) * 50} className={'saraya-g-' + (g.span || 'sq')} style={{ height: '100%' }}>
                <div style={{ position: 'relative', height: '100%' }}>
                  <Img tone={g.tone} icon="image" ratio="auto" label={g.label[lang]} radius={14} slot={'gal:' + g.id} style={{ height: '100%', minHeight: 220 }} />
                  {admin.editMode && (
                    <div style={{ position: 'absolute', top: 8, insetInlineEnd: 8, zIndex: 20, display: 'flex', gap: 6 }}>
                      <button title="Move back" onClick={() => admin.moveGallery(g.id, -1)} style={galTool}><Icon name="arrow-left" size={14} /></button>
                      <button title="Move forward" onClick={() => admin.moveGallery(g.id, 1)} style={galTool}><Icon name="arrow-right" size={14} /></button>
                      <button title="Edit caption" onClick={() => admin.openEdit({ title: 'Edit photo caption', fields: [{ key: 'label.en', label: 'Caption (EN)' }, { key: 'label.ar', label: 'Caption (AR)', dir: 'rtl' }, { key: 'span', label: 'Size', type: 'select', options: [{ value: '', label: 'Standard' }, { value: 'wide', label: 'Wide' }, { value: 'tall', label: 'Tall' }] }], values: g, onSave: (v) => admin.mergeEntity('gal:' + g.id, v) })} style={galTool}><Icon name="pencil" size={14} /></button>
                      <button title="Remove" onClick={() => { if (window.confirm('Remove this photo?')) admin.deleteGalleryItem(g.id); }} style={Object.assign({}, galTool, { color: 'var(--error)' })}><Icon name="trash-2" size={14} /></button>
                    </div>
                  )}
                </div>
              </Reveal>
            ))}
          </div>
        </Container>
      </Section>
      <ClosingCTA />
    </main>
  );
}
const galTool = { width: 30, height: 30, borderRadius: 7, background: 'rgba(255,255,255,0.95)', border: '1px solid var(--line-strong)', boxShadow: 'var(--shadow-soft)', cursor: 'pointer', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: 'var(--fg-primary)' };

/* ===== Contact ===== */
function ContactPage() {
  const { t, lang } = useLang();
  const admin = useAdmin();
  const C = window.SARAYA.CONTACT;
  const g = (k) => admin.getText('contact.' + k, C[k]);
  const cards = [
    { icon: 'message-circle', label: lang === 'ar' ? 'واتساب / هاتف' : 'WhatsApp / Phone', value: g('phoneDisplay'), href: window.SARAYA.waLink('Hello Saraya Events') },
    { icon: 'mail', label: lang === 'ar' ? 'البريد' : 'Email', value: g('email'), href: 'mailto:' + g('email') },
    { icon: 'map-pin', label: lang === 'ar' ? 'الموقع' : 'Location', value: g('city') },
    { icon: 'store', label: lang === 'ar' ? 'المعرض' : 'Showroom', value: g('showroom') },
  ];
  const editContact = () => admin.openEdit({
    title: 'Edit contact details',
    fields: [
      { key: 'phoneDisplay', label: 'Phone (display)' }, { key: 'phoneIntl', label: 'WhatsApp number — digits only (e.g. 971529692965)' },
      { key: 'email', label: 'Email' }, { key: 'city', label: 'City' }, { key: 'showroom', label: 'Showroom address' }, { key: 'instagram', label: 'Instagram handle' },
    ],
    values: { phoneDisplay: g('phoneDisplay'), phoneIntl: g('phoneIntl'), email: g('email'), city: g('city'), showroom: g('showroom'), instagram: g('instagram') },
    onSave: (v) => Object.keys(v).forEach((k) => admin.setText('contact.' + k, v[k])),
  });
  return (
    <main>
      <PageHero editKey="contact-hero" slot="contact-hero" eyebrow={lang === 'ar' ? 'تواصل معنا' : 'Contact us'} tone="cream" icon="message-circle"
        title={lang === 'ar' ? 'لنتحدّث عن مناسبتك' : 'Let’s talk about your event'}
        intro={lang === 'ar' ? 'نرد عادةً خلال ٢٤ ساعة. واتساب هو أسرع طريقة للوصول إلينا.' : 'We usually reply within 24 hours. WhatsApp is the fastest way to reach us.'} />
      <Section bg="canvas">
        <Container wide>
          <div className="saraya-split" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'start' }}>
            <Reveal>
              {admin.editMode && <div style={{ marginBottom: 14 }}><AdminEditButton onClick={editContact} label="Edit contact details" /></div>}
              <div style={{ display: 'grid', gap: 14 }}>
                {cards.map((c, i) => {
                  const Comp = c.href ? 'a' : 'div';
                  return (
                    <Comp key={i} href={c.href} target={c.href && c.href.startsWith('http') ? '_blank' : undefined} style={{ display: 'flex', alignItems: 'center', gap: 16, padding: '20px 22px', background: 'var(--white)', borderRadius: 14, boxShadow: 'var(--shadow-soft)', border: '1px solid var(--line)', textDecoration: 'none', color: 'inherit' }}>
                      <span style={{ flexShrink: 0, display: 'inline-flex', width: 48, height: 48, borderRadius: 12, alignItems: 'center', justifyContent: 'center', background: 'var(--gold-tint)', color: 'var(--gold-deep)' }}><Icon name={c.icon} size={22} /></span>
                      <div>
                        <div style={{ fontSize: 11.5, color: 'var(--fg-muted)', letterSpacing: '0.14em', textTransform: 'uppercase', fontWeight: 600 }}>{c.label}</div>
                        <div style={{ fontFamily: 'var(--font-serif)', fontSize: 20, fontWeight: 500, marginTop: 3 }}>{c.value}</div>
                      </div>
                    </Comp>
                  );
                })}
              </div>
              <div style={{ marginTop: 16 }}>
                <Img tone="sage" icon="map-pin" ratio="16/9" radius={14} label={lang === 'ar' ? 'أبوظبي، الإمارات' : 'Abu Dhabi, UAE'} slot="contact-map" />
              </div>
            </Reveal>
            <Reveal delay={100}>
              <ContactForm />
            </Reveal>
          </div>
        </Container>
      </Section>
    </main>
  );
}

function ContactForm() {
  const { t, lang } = useLang();
  const [sent, setSent] = React.useState(false);
  const [f, setF] = React.useState({ name: '', phone: '', email: '', message: '' });
  const submit = (e) => {
    e.preventDefault();
    const subject = `Website enquiry — ${f.name || 'New message'}`;
    const body = `Name: ${f.name}\nPhone: ${f.phone}\nEmail: ${f.email}\n\nMessage:\n${f.message}`;
    window.location.href = window.SARAYA.mailLink(subject, body);
    setSent(true);
  };
  return (
    <form onSubmit={submit} style={{ background: 'var(--white)', borderRadius: 18, padding: 'clamp(24px,4vw,38px)', boxShadow: 'var(--shadow-lift)', border: '1px solid var(--line)', display: 'grid', gap: 16 }}>
      <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 26, fontWeight: 500 }}>{lang === 'ar' ? 'أرسل رسالة' : 'Send a message'}</h3>
      <Field label={t('form.name')}><TextInput required value={f.name} onChange={(e) => setF({ ...f, name: e.target.value })} placeholder={lang === 'ar' ? 'اسمك' : 'Your name'} /></Field>
      <Field label={t('form.phone')}><TextInput required value={f.phone} onChange={(e) => setF({ ...f, phone: e.target.value })} placeholder="+971 5X XXX XXXX" /></Field>
      <Field label={lang === 'ar' ? 'بريدك الإلكتروني' : 'Your email'}><TextInput type="email" required value={f.email} onChange={(e) => setF({ ...f, email: e.target.value })} placeholder={lang === 'ar' ? 'name@email.com' : 'name@email.com'} /></Field>
      <Field label={t('form.message')}><Textarea value={f.message} onChange={(e) => setF({ ...f, message: e.target.value })} placeholder={lang === 'ar' ? 'نوع المناسبة، التاريخ، عدد الضيوف…' : 'Event type, date, guest count…'} /></Field>
      <Button variant="primary" size="lg" icon="mail" type="submit" full>{lang === 'ar' ? 'أرسل عبر البريد' : 'Send Message'}</Button>
      {sent && <p style={{ fontSize: 13.5, color: 'var(--success)', textAlign: 'center', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 7 }}><Icon name="check-circle" size={16} />{lang === 'ar' ? 'يُفتح بريدك الآن لإرسال الرسالة إلى sales@sarayaevents.com…' : 'Opening your email to send to sales@sarayaevents.com…'}</p>}
    </form>
  );
}

/* Booking-payment resolver. Reads the vendor's per-service setting from meta
   (deposit_type: 'percent' | 'fixed' | 'full'; deposit_value). Falls back to a
   10% deposit when nothing is configured, preserving the original behaviour. */
function svcDepositInfo(price, meta) {
  price = Number(price) || 0;
  var type = (meta && meta.deposit_type) || 'percent';
  var raw = meta && meta.deposit_value;
  if (type === 'full') return { type: 'full', amount: Math.round(price * 100) / 100, pct: 100 };
  if (type === 'fixed') {
    var amt = Number(raw) || 0;
    if (!(amt > 0)) amt = Math.round(price * 0.10 * 100) / 100;
    if (price > 0 && amt > price) amt = price;
    return { type: 'fixed', amount: Math.round(amt * 100) / 100, pct: price > 0 ? Math.round(amt / price * 100) : 0 };
  }
  var pct = Number(raw);
  if (!(pct > 0)) pct = 10;
  if (pct > 100) pct = 100;
  return { type: 'percent', amount: Math.round(price * pct / 100 * 100) / 100, pct: pct };
}
window.svcDepositInfo = svcDepositInfo;
function svcDepositName(dep, ar) {
  if (dep.type === 'full')  return ar ? 'دفع كامل' : 'Full payment';
  if (dep.type === 'fixed') return ar ? 'عربون' : 'Deposit';
  return ar ? ('عربون ' + dep.pct + '٪') : (dep.pct + '% Deposit');
}

/* Vendor service card (for live Supabase services) — no admin overlay needed */
function ServiceCardDB({ s, onClick }) {
  const { lang } = useLang();
  const { go } = useNav();
  const cart = useCart();
  const ar = lang === 'ar';
  const dep = svcDepositInfo(s.price, s.meta);
  const deposit = dep.amount;
  // Booking a service needs a date, so send the customer to the service page
  // (where the availability calendar lives) rather than straight to checkout.
  const bookNow = (e) => {
    e.stopPropagation();
    go('service-item/' + s.id);
  };
  return (
    <div onClick={() => go('service-item/' + s.id)} role="button" tabIndex={0} onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); go('service-item/' + s.id); } }} className="saraya-lift" style={{
      display: 'flex', flexDirection: 'column', textAlign: 'start', cursor: 'pointer',
      background: 'var(--white)', border: '1px solid var(--line)', borderRadius: 14, overflow: 'hidden',
      boxShadow: 'var(--shadow-soft)', font: 'inherit', color: 'inherit', height: '100%',
    }}>
      <div style={{ position: 'relative' }}>
        {window.CompareCheckbox && (
          <div style={{ position: 'absolute', top: 8, insetInlineStart: 8, zIndex: 5 }}>
            <window.CompareCheckbox listingType="service" item={s} />
          </div>
        )}
        {s.popular && (
          <div style={{ position: 'absolute', top: 8, insetInlineEnd: 8, zIndex: 5, background: 'var(--gold-deep)', color: '#fff', fontSize: 10, fontWeight: 700, letterSpacing: '0.05em', textTransform: 'uppercase', padding: '3px 9px', borderRadius: 999 }}>{ar ? 'مميّز' : 'Popular'}</div>
        )}
        {s.src
          ? <img src={s.src} alt={s.name ? s.name[lang] : ''} style={{ width: '100%', aspectRatio: '1/1', objectFit: 'cover', display: 'block' }} />
          : <div style={{ width: '100%', aspectRatio: '1/1', background: 'var(--gold-tint)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon name="store" size={40} style={{ color: 'var(--gold-deep)' }} /></div>}
      </div>
      <div style={{ padding: '14px 16px 16px', display: 'flex', flexDirection: 'column', flex: 1 }}>
        <span style={{ fontSize: 10.5, color: 'var(--gold-deep)', fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase' }}>{s.tag[lang]}</span>
        <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 18, fontWeight: 500, margin: '4px 0 6px', lineHeight: 1.2 }}>{s.name[lang]}</h3>
        <p style={{ fontSize: 13, lineHeight: 1.55, color: 'var(--fg-secondary)', flex: 1 }}>{s.blurb ? s.blurb[lang] : ''}</p>
        <div style={{ marginTop: 'auto' }}>
          {s.price ? (
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 10 }}>
              <span style={{ fontFamily: 'var(--font-display)', fontSize: 19, fontWeight: 600, color: 'var(--fg-primary)' }}>{window.money(s.price)}</span>
            </div>
          ) : null}
          <div style={{ display: 'grid', gap: 8 }}>
            {s.price ? (
              <Button variant="primary" size="sm" full icon="lock" onClick={bookNow}>{ar
                ? (dep.type === 'full' ? ('احجز الآن — ' + window.money(deposit)) : ('احجز الآن — عربون ' + window.money(deposit)))
                : (dep.type === 'full' ? ('Book Now — ' + window.money(deposit)) : ('Book Now — ' + window.money(deposit) + ' deposit'))}</Button>
            ) : null}
            <Button variant={s.price ? 'secondary' : 'primary'} size="sm" full icon="file-text" onClick={(e) => { e.stopPropagation(); onClick(); }}>{ar ? 'اطلب عرض سعر' : 'Request a Quote'}</Button>
          </div>
        </div>
      </div>
    </div>
  );
}


function ServiceItemDetailPage({ serviceItemId }) {
  const { lang } = useLang();
  const { go } = useNav();
  const cart = useCart();
  const ar = lang === 'ar';
  const [item, setItem] = React.useState(null);
  const [loaded, setLoaded] = React.useState(false);
  const [selIdx, setSelIdx] = React.useState(0);
  const [varDelta, setVarDelta] = React.useState(0);
  const [varSummary, setVarSummary] = React.useState('');
  const [varImage, setVarImage] = React.useState('');
  const [vendorWa, setVendorWa] = React.useState(null);
  const [vendorVerified, setVendorVerified] = React.useState(false);
  // Service booking: date/time + per-vendor availability
  const [svcSettings, setSvcSettings] = React.useState({ working_days: [0, 1, 2, 3, 4, 5, 6], daily_capacity: 1 });
  const [svcUnavail, setSvcUnavail] = React.useState(function () { return new Set(); });
  const [svcAvailBusy, setSvcAvailBusy] = React.useState(false);
  const [bkDate, setBkDate] = React.useState('');
  const [bkTime, setBkTime] = React.useState('');
  const [bkGuests, setBkGuests] = React.useState('');
  const [bkVenue, setBkVenue] = React.useState('');

  React.useEffect(function () {
    let cancelled = false;
    setItem(null); setLoaded(false); setSelIdx(0); setVarDelta(0); setVarSummary(''); setVarImage(''); setVendorWa(null); setVendorVerified(false);
    if (window.supabaseConfigured && window.SarayaService) {
      window.SarayaService.services.get(serviceItemId).then(function (d) {
        if (!cancelled) { setItem(d || null); setLoaded(true); }
      }).catch(function () { if (!cancelled) setLoaded(true); });
    } else {
      setLoaded(true);
    }
    return function () { cancelled = true; };
  }, [serviceItemId]);

  // Fetch the vendor's WhatsApp number (services only) for the direct-contact button.
  React.useEffect(function () {
    var vid = item && item.vendor_id;
    if (!vid || !window.SarayaDB) { setVendorWa(null); setVendorVerified(false); return; }
    var cancelled = false;
    window.SarayaDB.from('vendor_profiles').select('whatsapp, status').eq('id', vid).maybeSingle()
      .then(function (res) {
        if (cancelled) return;
        var d = res && res.data;
        setVendorWa((d && d.whatsapp) || null);
        setVendorVerified(!!(d && d.status === 'approved'));
      })
      .catch(function () { if (!cancelled) { setVendorWa(null); setVendorVerified(false); } });
    return function () { cancelled = true; };
  }, [item && item.vendor_id]);

  // Load the vendor's working-days + capacity so the booking calendar can grey out closed days.
  React.useEffect(function () {
    var vid = item && item.vendor_id;
    setBkDate(''); setSvcUnavail(new Set());
    if (!vid || !window.SarayaService || !window.SarayaService.availability) return;
    var cancelled = false;
    window.SarayaService.availability.getSettings(vid).then(function (s) {
      if (!cancelled && s) setSvcSettings({ working_days: s.working_days || [0, 1, 2, 3, 4, 5, 6], daily_capacity: s.daily_capacity || 1 });
    });
    return function () { cancelled = true; };
  }, [item && item.vendor_id]);

  if (!loaded) {
    return (
      <main style={{ paddingTop: 140, minHeight: '60vh' }}><Container>
        <p style={{ color: 'var(--fg-muted)' }}>{ar ? 'جارٍ التحميل…' : 'Loading…'}</p>
      </Container></main>
    );
  }

  const isPendingListing = !!item && (item.status !== 'approved' || item.hidden === true);

  if (!item || isPendingListing) {
    return (
      <main style={{ paddingTop: 140, minHeight: '60vh' }}><Container>
        <p style={{ color: 'var(--fg-muted)' }}>
          {isPendingListing
            ? (ar ? 'هذه الخدمة قيد المراجعة وغير متاحة للعامة بعد.' : 'This service listing is pending review and not available to the public yet.')
            : (ar ? 'لم يتم العثور على الخدمة.' : 'Service not found.')}
          {' '}
          <button onClick={() => go('services')} style={{ color: 'var(--gold-deep)', background: 'none', border: 'none', cursor: 'pointer' }}>{ar ? 'العودة للخدمات' : 'Back to Services'}</button>
        </p>
      </Container></main>
    );
  }

  const svcPrice = (Number(item.price) || 0) + (varDelta || 0);
  const dep = window.svcDepositInfo ? window.svcDepositInfo(svcPrice, item.meta) : { type: 'percent', amount: Math.round(svcPrice * 0.10 * 100) / 100, pct: 10 };
  const deposit = dep.amount;
  const depName = dep.type === 'full'
    ? { en: 'Full payment', ar: 'دفع كامل' }
    : dep.type === 'fixed'
      ? { en: 'Deposit', ar: 'عربون' }
      : { en: dep.pct + '% Deposit', ar: 'عربون ' + dep.pct + '٪' };
  const svcLeadDays = (item.meta && parseInt(item.meta.lead_time_days, 10)) || 0;
  const _pad2 = (n) => String(n).padStart(2, '0');
  const _mkDate = (dt) => dt.getFullYear() + '-' + _pad2(dt.getMonth() + 1) + '-' + _pad2(dt.getDate());
  const minBookDate = (function () { const d = new Date(); d.setDate(d.getDate() + svcLeadDays); return _mkDate(d); })();
  const loadUnavail = (fromStr, toStr) => {
    const vid = item.vendor_id;
    if (!vid || !window.SarayaService || !window.SarayaService.availability) return;
    setSvcAvailBusy(true);
    window.SarayaService.availability.unavailableDates(vid, fromStr, toStr).then((arr) => {
      setSvcUnavail((prev) => { const n = new Set(prev); (arr || []).forEach((x) => n.add(x)); return n; });
      setSvcAvailBusy(false);
    }).catch(() => setSvcAvailBusy(false));
  };
  const bookNow = () => {
    if (item.price && !bkDate) return; // a date is required to book a priced service
    cart.add({
      id: 'deposit-' + item.id,
      name: { en: depName.en + ' — ' + (item.name ? item.name.en : 'Service'), ar: depName.ar + ' — ' + (item.name ? item.name.ar : 'خدمة') },
      price: deposit,
      digital: true,
      src: item.src || (item.images && item.images[0]) || null,
    }, 1, { serviceBooking: true, serviceId: item.id, serviceName: item.name, fullPrice: svcPrice, depositPct: dep.pct, depositType: dep.type, variations: varSummary || undefined,
      vendorId: item.vendor_id, leadDays: svcLeadDays, eventDate: bkDate || '', eventTime: bkTime || '', guests: bkGuests || '', venue: bkVenue || '' });
    go('checkout');
  };
  const waDigits = String(vendorWa || '').replace(/[^0-9]/g, '');
  const waMsg = ar
    ? ('مرحباً، أنا مهتم بخدمة "' + (item.name ? item.name[lang] : '') + '" على سرايا للفعاليات.')
    : ('Hi, I am interested in your service "' + (item.name ? item.name[lang] : '') + '" on Saraya Events.');
  const waLink = 'https://wa.me/' + waDigits + '?text=' + encodeURIComponent(waMsg);
  const requestQuote = () => { if (window.openItemRFQModal) window.openItemRFQModal(varSummary ? Object.assign({}, item, { variationNote: varSummary }) : item); };
  const galleryImgs = (item.images && item.images.length > 0) ? item.images : (item.src ? [item.src] : []);
  const mainImg = varImage || galleryImgs[selIdx] || item.src || null;

  return (
    <main style={{ paddingTop: 110 }}>
      <Section bg="canvas">
        <Container wide>
          <button onClick={() => go('services')} style={{ background: 'none', border: 'none', color: 'var(--gold-deep)', cursor: 'pointer', marginBottom: 24, fontSize: 14, padding: 0 }}>&larr; {ar ? 'العودة للخدمات' : 'Back to Services'}</button>
          <div className="saraya-grid-2" style={{ gap: 44, alignItems: 'start' }}>
            <div>
              {mainImg
                ? <img src={mainImg} alt={item.name ? item.name[lang] : ''} style={{ width: '100%', borderRadius: 16, aspectRatio: '1/1', objectFit: 'cover', display: 'block' }} />
                : <div style={{ width: '100%', aspectRatio: '1/1', background: 'var(--gold-tint)', borderRadius: 16, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon name="store" size={60} style={{ color: 'var(--gold-deep)' }} /></div>}
              {galleryImgs.length > 1 && (
                <div style={{ display: 'flex', gap: 8, marginTop: 10, overflowX: 'auto', paddingBottom: 4 }}>
                  {galleryImgs.map((url, idx) => (
                    <button key={idx} onClick={() => setSelIdx(idx)}
                      style={{ flexShrink: 0, width: 72, height: 72, borderRadius: 10, overflow: 'hidden', border: idx === selIdx ? '2.5px solid var(--gold-deep)' : '1.5px solid var(--line)', padding: 0, cursor: 'pointer', background: 'none' }}>
                      <img src={url} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
                    </button>
                  ))}
                </div>
              )}
            </div>
            <div>
              {item.categoryName && (item.categoryName.en || item.categoryName.ar) ? (
                <span style={{ fontSize: 11, color: 'var(--gold-deep)', fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase' }}>{item.categoryName[lang]}</span>
              ) : null}
              <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 32, fontWeight: 500, margin: '8px 0 10px', lineHeight: 1.2 }}>{item.name ? item.name[lang] : ''}</h1>
              {vendorVerified ? (
                <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '4px 12px', borderRadius: 999, background: '#F0FDF4', color: '#16A34A', border: '1px solid #BBF7D0', fontSize: 12.5, fontWeight: 700, marginBottom: 14 }}>
                  <Icon name="shield-check" size={14} />{ar ? 'مورّد موثّق' : 'Verified vendor'}
                </div>
              ) : null}
              {item.desc && item.desc[lang] ? <p style={{ fontSize: 15, lineHeight: 1.7, color: 'var(--fg-secondary)', marginBottom: 22 }}>{item.desc[lang]}</p> : null}
              {item.variations && item.variations.length > 0 && window.VariationSelector && (
                <div style={{ marginBottom: 20 }}>
                  <window.VariationSelector variations={item.variations} ar={ar}
                    onChange={(sel, delta, summary, image) => { setVarDelta(delta); setVarSummary(summary); setVarImage(image || ''); }} />
                </div>
              )}
              {item.price ? (
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 26, fontWeight: 600, marginBottom: 20, color: 'var(--fg-primary)' }}>{window.money(svcPrice)}{varDelta ? <span style={{ fontSize: 13, color: 'var(--fg-muted)', fontWeight: 400 }}>{'  (' + (ar ? 'الأساس ' : 'base ') + window.money(Number(item.price) || 0) + ' + ' + window.money(varDelta) + ')'}</span> : null}</div>
              ) : (
                <div style={{ fontSize: 14, color: 'var(--fg-muted)', marginBottom: 20 }}>{ar ? 'السعر عند الطلب' : 'Price on request'}</div>
              )}
              {item.price ? (
                <div style={{ maxWidth: 360, marginBottom: 18, padding: 16, border: '1px solid var(--line)', borderRadius: 14, background: 'var(--white)' }}>
                  <div style={{ fontSize: 13, fontWeight: 700, marginBottom: 10, display: 'flex', alignItems: 'center', gap: 7 }}>
                    <Icon name="calendar" size={16} style={{ color: 'var(--gold-deep)' }} />
                    {ar ? 'اختر تاريخ فعاليتك' : 'Choose your event date'}
                  </div>
                  {window.AvailabilityCalendar ? (
                    <window.AvailabilityCalendar mode="select" value={bkDate}
                      unavailable={svcUnavail} workingDays={svcSettings.working_days} minDate={minBookDate}
                      onPick={setBkDate} onMonthChange={loadUnavail} ar={ar} busy={svcAvailBusy} />
                  ) : (
                    <input type="date" min={minBookDate} value={bkDate} onChange={(e) => setBkDate(e.target.value)}
                      style={{ width: '100%', padding: '10px 12px', borderRadius: 8, border: '1px solid var(--line-strong)', fontFamily: 'var(--font-body)', fontSize: 14, boxSizing: 'border-box' }} />
                  )}
                  {bkDate ? (
                    <div style={{ marginTop: 10, fontSize: 12.5, color: '#15803D', display: 'flex', alignItems: 'center', gap: 6 }}>
                      <Icon name="check-circle" size={14} />{ar ? 'التاريخ المختار: ' : 'Selected: '}{bkDate}
                    </div>
                  ) : (
                    <div style={{ marginTop: 10, fontSize: 12, color: 'var(--fg-muted)' }}>
                      {svcLeadDays > 0
                        ? (ar ? ('يتطلب هذا المورّد إشعاراً قبل ' + svcLeadDays + ' يوم على الأقل.') : ('This vendor needs at least ' + svcLeadDays + ' day' + (svcLeadDays !== 1 ? 's' : '') + ' notice.'))
                        : (ar ? 'اختر يوماً متاحاً من التقويم.' : 'Pick an available day from the calendar.')}
                    </div>
                  )}
                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, marginTop: 12 }}>
                    <div>
                      <label style={{ fontSize: 11.5, color: 'var(--fg-muted)', fontWeight: 600 }}>{ar ? 'الوقت' : 'Time'}</label>
                      <input type="time" value={bkTime} onChange={(e) => setBkTime(e.target.value)} style={{ width: '100%', padding: '8px 10px', borderRadius: 8, border: '1px solid var(--line-strong)', fontFamily: 'var(--font-body)', fontSize: 13.5, boxSizing: 'border-box' }} />
                    </div>
                    <div>
                      <label style={{ fontSize: 11.5, color: 'var(--fg-muted)', fontWeight: 600 }}>{ar ? 'عدد الضيوف' : 'Guests'}</label>
                      <input type="number" min="1" value={bkGuests} onChange={(e) => setBkGuests(e.target.value)} placeholder="e.g. 100" style={{ width: '100%', padding: '8px 10px', borderRadius: 8, border: '1px solid var(--line-strong)', fontFamily: 'var(--font-body)', fontSize: 13.5, boxSizing: 'border-box' }} />
                    </div>
                  </div>
                  <div style={{ marginTop: 8 }}>
                    <label style={{ fontSize: 11.5, color: 'var(--fg-muted)', fontWeight: 600 }}>{ar ? 'الموقع / المكان' : 'Venue / location'}</label>
                    <input value={bkVenue} onChange={(e) => setBkVenue(e.target.value)} placeholder={ar ? 'اسم القاعة أو العنوان' : 'Venue name or address'} style={{ width: '100%', padding: '8px 10px', borderRadius: 8, border: '1px solid var(--line-strong)', fontFamily: 'var(--font-body)', fontSize: 13.5, boxSizing: 'border-box' }} />
                  </div>
                </div>
              ) : null}
              <div style={{ display: 'grid', gap: 10, maxWidth: 360 }}>
                {item.price ? (
                  <Button variant="primary" size="lg" icon="lock" disabled={!bkDate} onClick={bookNow}>{ar
                    ? (!bkDate ? 'اختر تاريخاً أولاً' : (dep.type === 'full' ? ('احجز الآن — ' + window.money(deposit)) : ('احجز الآن — عربون ' + window.money(deposit))))
                    : (!bkDate ? 'Select a date first' : (dep.type === 'full' ? ('Book Now — ' + window.money(deposit)) : ('Book Now — ' + window.money(deposit) + ' deposit')))}</Button>
                ) : null}
                <Button variant={item.price ? 'secondary' : 'primary'} size="lg" icon="file-text" onClick={requestQuote}>{ar ? 'اطلب عرض سعر' : 'Request a Quote'}</Button>
                {waDigits.length >= 7 ? (
                  <a href={waLink} target="_blank" rel="noopener noreferrer"
                    style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 9, padding: '13px 20px', borderRadius: 12, background: '#25D366', color: '#fff', fontFamily: 'var(--font-body)', fontSize: 15, fontWeight: 700, textDecoration: 'none', boxShadow: 'var(--shadow-soft)' }}>
                    <Icon name="message-circle" size={19} />
                    {ar ? 'تواصل مع المورّد عبر واتساب' : 'Contact vendor on WhatsApp'}
                  </a>
                ) : null}
              </div>
              {item.price ? (
                <div style={{ marginTop: 14, fontSize: 13, color: 'var(--fg-secondary)' }}>
                  {dep.type === 'full'
                    ? (ar ? 'يلزم دفع كامل المبلغ لتأكيد الحجز.' : 'Full payment is required to confirm this booking.')
                    : dep.type === 'fixed'
                      ? (ar ? ('يلزم دفع عربون ' + window.money(deposit) + ' لتأكيد الحجز.') : ('A ' + window.money(deposit) + ' deposit is required to confirm booking.'))
                      : (ar ? ('يلزم دفع عربون ' + dep.pct + '٪ (' + window.money(deposit) + ') لتأكيد الحجز.') : ('A ' + dep.pct + '% deposit (' + window.money(deposit) + ') is required to confirm booking.'))}
                </div>
              ) : null}
            </div>
          </div>
        </Container>
      </Section>
    </main>
  );
}

Object.assign(window, { PageHero, AboutPage, ServicesPage, ServiceDetailPage, ServiceItemDetailPage, ServiceCardDB, PackagesPage, GalleryPage, ContactPage, ContactForm });