// 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 }) {
  const admin = useAdmin();
  const { lang } = useLang();
  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>
          <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' ? 'فريق تصميم فعاليات في أبوظبي، نُحوّل المناسبات إلى ذكريات بتفاصيل راقية وتنفيذ مدروس.' : 'An Abu Dhabi 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 Abu Dhabi 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,
    tone: 'cream', icon: 'store',
    route: 'design',
    src: s.src,
  }));

  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' ? 'الموردون المعتمدون' : 'Approved Vendors'} title={lang === 'ar' ? 'خدمات الموردين' : 'Vendor 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={() => 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']],
    },
  },
  partners: {
    icon: 'handshake', tone: 'espresso',
    highlights: {
      en: [['Shared Showroom Floor', 'Your brand sits alongside Saraya\'s event collections in our lifestyle showroom — seen by every wedding and event client who walks through.', 'store'],
           ['Our Event Clientele', 'Exposure to couples, families and corporate planners who are already in a buying mindset — no cold audience.', 'users'],
           ['Brand Alignment', 'We partner with complementary lifestyle brands — home décor, gifting, fashion, fragrance — that feel at home beside our aesthetic.', 'gem'],
           ['Flexible Arrangements', 'From dedicated shelf space to pop-up corners and co-branded displays — we\'ll find the format that works for your product.', 'layout-dashboard']],
      ar: [['مساحة مشتركة في المعرض', 'تحتل علامتك مكانًا بجانب مجموعات سرايا في معرضنا — يراها كل عميل زفاف أو فعالية يدخل المعرض.', 'store'],
           ['عملاؤنا في الفعاليات', 'تعرّض لأزواج وعائلات ومخططي فعاليات شركاتية في وضع شراء فعلي — لا جمهور بارد.', 'users'],
           ['توافق العلامات التجارية', 'نشارك العلامات المتكاملة — ديكور المنزل والهدايا والأزياء والعطور — التي تنسجم مع هويتنا.', 'gem'],
           ['ترتيبات مرنة', 'من رفوف مخصّصة إلى أركان بوب-آب وعروض مشتركة — سنجد الصيغة المناسبة لمنتجك.', 'layout-dashboard']],
    },
  },
};

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];
  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]} />
      <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>
          <Reveal><SectionHead center eyebrow={lang === 'ar' ? 'لمحات' : 'A glimpse'} title={lang === 'ar' ? 'من أعمالنا' : 'From our work'} /></Reveal>
          <div className="saraya-grid-3" style={{ marginTop: 40 }}>
            {galleryTones.map((tn, i) => (
              <Reveal key={i} delay={(i % 3) * 60}><Img tone={tn} icon={d.icon} ratio="4/3" radius={14} label={s.name[lang]} slot={'svc-' + serviceId + '-g' + i} /></Reveal>
            ))}
          </div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, justifyContent: 'center', marginTop: 44 }}>
            <Button variant="whatsapp" size="lg" icon="message-circle" href={window.SARAYA.waLink(`Hello Saraya Events, I’m interested in ${s.name.en}.`)} target="_blank">{t('cta.whatsapp')}</Button>
            <Button variant="primary" size="lg" icon="pen-line" onClick={() => go('design')}>{t('cta.quote')}</Button>
          </div>
        </Container>
      </Section>
    </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>
  );
}

/* Vendor service card (for live Supabase services) — no admin overlay needed */
function ServiceCardDB({ s, onClick }) {
  const { lang } = useLang();
  return (
    <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%',
    }}>
      {s.src
        ? <img src={s.src} alt={s.name ? s.name[lang] : ''} style={{ width: '100%', aspectRatio: '16/11', objectFit: 'cover', display: 'block' }} />
        : <div style={{ width: '100%', aspectRatio: '16/11', background: 'var(--gold-tint)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon name="store" size={40} style={{ color: 'var(--gold-deep)' }} /></div>}
      <div style={{ padding: '20px 22px 22px', display: 'flex', flexDirection: 'column', flex: 1 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, color: 'var(--gold-deep)', marginBottom: 6 }}>
          <Icon name="store" 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: 22, fontWeight: 500, margin: '4px 0 8px', lineHeight: 1.15 }}>{s.name[lang]}</h3>
        <p style={{ fontSize: 13.5, lineHeight: 1.6, color: 'var(--fg-secondary)', flex: 1 }}>{s.blurb ? s.blurb[lang] : ''}</p>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7, marginTop: 14, color: 'var(--gold-deep)', fontSize: 13, fontWeight: 600 }}>
          {lang === 'ar' ? 'اطلب عرض سعر' : 'Request a Quote'} <Icon name="arrow-right" size={15} className="saraya-arrow" />
        </span>
      </div>
    </div>
  );
}

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