// pages.jsx — All 5 Steaks N Buns pages as mobile artboards.
// Each page is a vertical stack of components designed for canvas viewing
// (no internal scroll — the canvas pans).

// ─── Shared layout shell ──────────────────────────────────────────────────
function SnbPage({ children, sticky = true }) {
  const { dir } = useSnb();
  return (
    <div className="snb-root" dir={dir} style={{ position: 'relative' }}>
      <SnbTopBar logoSrc="assets/logo.png" />
      {children}
      {sticky && <div style={{ paddingBottom: 24, marginTop: 28 }}><SnbStickyBar /></div>}
      <SnbFooter />
    </div>
  );
}

// ────────────────────────────────────────────────────────────────────────────
// HOME PAGE
// ────────────────────────────────────────────────────────────────────────────
function SnbHomePage({ heroVariant = 'food' }) {
  const { t, lang, tweaks } = useSnb();
  const bestSellers = SNB_MENU.filter(m => ['maple-spicy','crispy-chk','beef','special-beef','philly'].includes(m.id));
  return (
    <SnbPage>
      <SnbHeroRouter style={tweaks?.heroStyle || 'signature'} variant={heroVariant} mode="mobile" />
      <SnbTrustBar />
      <SnbOrderModes active="delivery" />

      {/* Best sellers */}
      <section className="snb-section tight" style={{ background: 'var(--snb-cream-2)' }}>
        <SnbSectionHead
          kicker={lang === 'ar' ? 'الأكثر مبيعاً' : 'BESTSELLERS'}
          title={t('bestsellers_h')}
          sub={t('bestsellers_sub')}
        />
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
          {bestSellers.slice(0, 4).map(item => <SnbMenuItem key={item.id} item={item} layout="tile" />)}
        </div>
        <a href="menu.html" className="snb-btn snb-btn-ghost" style={{ marginTop: 18, width: '100%' }}>
          {t('cta_menu')} →
        </a>
      </section>

      {/* Usage context: split image cards */}
      <section className="snb-section">
        <SnbSectionHead title={t('usage_h')} />
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          <div style={{
            borderRadius: 20, overflow: 'hidden',
            backgroundImage: `linear-gradient(135deg, rgba(29,58,37,.1), rgba(29,58,37,.65)), url("assets/menu/philly-steak.webp")`,
            backgroundSize: 'cover', backgroundPosition: 'center',
            color: 'var(--snb-cream)', padding: '24px 20px', minHeight: 170,
            display: 'flex', flexDirection: 'column', justifyContent: 'flex-end',
          }}>
            <h3 style={{ margin: '0 0 6px', fontSize: 22, fontWeight: 700 }}>{t('usage_day_h')}</h3>
            <p style={{ margin: 0, fontSize: 13, opacity: .9 }}>{t('usage_day_sub')}</p>
          </div>
          <div style={{
            borderRadius: 20, overflow: 'hidden',
            backgroundImage: `linear-gradient(135deg, rgba(10,29,16,.4), rgba(10,29,16,.85)), url("assets/gamer-burger.jpg")`,
            backgroundSize: 'cover', backgroundPosition: 'center',
            color: 'var(--snb-cream)', padding: '24px 20px', minHeight: 170,
            display: 'flex', flexDirection: 'column', justifyContent: 'flex-end',
          }}>
            <h3 style={{ margin: '0 0 6px', fontSize: 22, fontWeight: 700 }}>{t('usage_night_h')}</h3>
            <p style={{ margin: 0, fontSize: 13, opacity: .9 }}>{t('usage_night_sub')}</p>
          </div>
        </div>
      </section>

      {/* Family band — yellow with checker accent */}
      <section style={{ background: 'var(--snb-yellow)', color: 'var(--snb-green-deep)' }}>
        <SnbCheckerStripe height={22} />
        <div className="snb-section tight" style={{ paddingTop: 24 }}>
          <div style={{
            borderRadius: 18, overflow: 'hidden', marginBottom: 18,
            aspectRatio: '16 / 10',
            backgroundImage: `url("assets/restaurant-interior.webp")`,
            backgroundSize: 'cover', backgroundPosition: 'center',
          }} />
          <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
            <div style={{
              flexShrink: 0, width: 64, height: 64, borderRadius: 16,
              background: 'var(--snb-green)', color: 'var(--snb-yellow)',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <SnbIcon name="family" size={32} stroke={2} />
            </div>
            <div>
              <h3 className="snb-display" style={{ margin: '0 0 6px', fontSize: 22 }}>{t('family_h')}</h3>
              <p style={{ margin: 0, fontSize: 13, lineHeight: 1.5, opacity: .85 }}>{t('family_sub')}</p>
            </div>
          </div>
        </div>
        <SnbCheckerStripe height={22} flip />
      </section>

      {/* Reviews — horizontal snap */}
      <section className="snb-section tight">
        <SnbSectionHead
          kicker={lang === 'ar' ? 'تقييمات' : 'REVIEWS'}
          title={t('reviews_h')}
          sub={t('reviews_sub')}
        />
        <div style={{
          display: 'flex', gap: 12, overflowX: 'auto',
          scrollSnapType: 'x mandatory', padding: '4px 0 12px',
          margin: '0 -22px', paddingInline: 22, scrollbarWidth: 'none',
        }}>
          {SNB_REVIEWS.slice(0, 4).map((r, i) => <SnbReview key={i} {...r} />)}
        </div>
        <div style={{
          marginTop: 8, padding: '14px 16px', background: 'var(--snb-paper)',
          borderRadius: 16, display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          boxShadow: 'inset 0 0 0 1px var(--snb-line)',
        }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
              <span className="snb-display" style={{ fontSize: 28, color: 'var(--snb-green)' }}>{tweaks?.rating ?? 4.3}</span>
              <SnbStars value={4} size={14} />
            </div>
            <div style={{ fontSize: 11, color: 'var(--snb-ink-faint)' }}>{tweaks?.reviewCount ?? '586'} Google reviews</div>
          </div>
          <a href={SNB_SOCIAL.maps} target="_blank" rel="noopener noreferrer" className="snb-btn snb-btn-ghost" style={{ padding: '10px 14px', fontSize: 13 }}>
            {lang === 'ar' ? 'كل التقييمات' : 'See all'} →
          </a>
        </div>
      </section>

      {/* Location & parking */}
      <section className="snb-section tight" style={{ background: 'var(--snb-cream-2)' }}>
        <SnbSectionHead
          kicker={lang === 'ar' ? 'الموقع' : 'LOCATION'}
          title={t('location_h')}
        />
        {/* Map — real Google Maps embed */}
        <a href={SNB_SOCIAL.maps} target="_blank" rel="noopener noreferrer" style={{
          display: 'block', borderRadius: 18, height: 200, overflow: 'hidden',
          position: 'relative', marginBottom: 14, textDecoration: 'none',
          boxShadow: 'inset 0 0 0 1px var(--snb-line)',
        }}>
          <iframe
            title="Steaks N Buns map"
            src="https://maps.google.com/maps?q=Steaks%20N%20Buns%20Madinah&t=&z=15&ie=UTF8&iwloc=&output=embed"
            style={{ border: 0, width: '100%', height: '100%', filter: 'saturate(0.85)', pointerEvents: 'none' }}
            loading="lazy"
            referrerPolicy="no-referrer-when-downgrade"
          />
          <div style={{
            position: 'absolute', left: 12, bottom: 12, display: 'inline-flex',
            alignItems: 'center', gap: 6, padding: '8px 12px', borderRadius: 999,
            background: 'var(--snb-green)', color: 'var(--snb-cream)',
            fontSize: 12, fontWeight: 700, boxShadow: '0 6px 16px rgba(10,29,16,.3)',
          }}>
            <SnbIcon name="pin" size={14} />
            {t('cta_directions')}
          </div>
        </a>
        {/* Parking */}
        <div style={{
          background: 'var(--snb-paper)', borderRadius: 16, padding: 16,
          boxShadow: 'inset 0 0 0 1px var(--snb-line)',
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
            <SnbIcon name="car" size={18} />
            <strong style={{ fontSize: 13 }}>{t('parking_h')}</strong>
          </div>
          {[t('parking_street'), t('parking_lot'), t('parking_space')].map((p, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '6px 0', fontSize: 13 }}>
              <span style={{
                width: 18, height: 18, borderRadius: '50%',
                background: 'rgba(90,138,58,.18)', color: 'var(--snb-success)',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <SnbIcon name="check" size={12} stroke={3} />
              </span>
              {p}
            </div>
          ))}
        </div>
      </section>

      <SnbFinalCTA />
    </SnbPage>
  );
}

// ────────────────────────────────────────────────────────────────────────────
// MENU PAGE
// ────────────────────────────────────────────────────────────────────────────
function SnbMenuPage() {
  const { t, lang } = useSnb();
  const [cat, setCat] = React.useState('burgers');
  const items = cat === 'all' ? SNB_MENU : SNB_MENU.filter(m => m.cat === cat);

  return (
    <SnbPage>
      {/* Menu hero */}
      <section style={{
        background: 'var(--snb-yellow)', color: 'var(--snb-green-deep)',
        padding: '34px 22px 28px', position: 'relative',
      }}>
        <div className="snb-eyebrow" style={{ color: 'var(--snb-green-deep)' }}>{lang === 'ar' ? 'القائمة' : 'OUR MENU'}</div>
        <h1 className="snb-display" style={{ fontSize: 38, margin: '8px 0 8px' }}>{t('menu_h')}</h1>
        <p style={{ margin: 0, fontSize: 14, opacity: .8 }}>{t('menu_sub')}</p>
      </section>
      <SnbCheckerStripe height={28} />

      <SnbCategoryTabs active={cat} onChange={setCat} />

      <section className="snb-section tight" style={{ paddingTop: 8 }}>
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 4 }}>
          <h2 style={{ margin: 0, fontSize: 18, fontWeight: 700 }}>{t('cat_' + cat)}</h2>
          <span style={{ fontSize: 12, color: 'var(--snb-ink-faint)' }}>{items.length} {lang === 'ar' ? 'صنف' : 'items'}</span>
        </div>
        {items.map(item => <SnbMenuItem key={item.id} item={item} />)}

        {/* Upsell card — only on burgers + appetizers */}
        {(cat === 'burgers' || cat === 'sandwiches') && (
          <div style={{
            marginTop: 18, padding: 18, borderRadius: 18,
            background: 'var(--snb-green)', color: 'var(--snb-cream)',
            display: 'flex', alignItems: 'center', gap: 14,
          }}>
            <div style={{
              flexShrink: 0, width: 52, height: 52, borderRadius: 12,
              background: 'var(--snb-yellow)', color: 'var(--snb-green-deep)',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <SnbIcon name="plus" size={28} stroke={3} />
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontWeight: 700, fontSize: 14, marginBottom: 2 }}>
                {lang === 'ar' ? 'كمل الطلب' : 'Round it out'}
              </div>
              <div style={{ fontSize: 12, opacity: .85 }}>
                {lang === 'ar' ? 'فرايز + مشروب + صوص — بأسعار وحدوية' : 'Add fries, a drink & a sauce — à la carte'}
              </div>
            </div>
          </div>
        )}
      </section>
    </SnbPage>
  );
}

// ────────────────────────────────────────────────────────────────────────────
// ABOUT PAGE
// ────────────────────────────────────────────────────────────────────────────
function SnbAboutPage() {
  const { t, lang } = useSnb();
  return (
    <SnbPage>
      {/* Hero — storefront night shot */}
      <section style={{
        position: 'relative', overflow: 'hidden',
        minHeight: 520, color: 'var(--snb-cream)',
        backgroundImage: 'linear-gradient(to bottom, rgba(2,7,9,.35) 0%, rgba(2,7,9,.7) 70%, var(--snb-green-deep) 100%), url("assets/storefront-night.jpg")',
        backgroundSize: 'cover', backgroundPosition: 'center',
        padding: '48px 22px 40px',
        display: 'flex', flexDirection: 'column', justifyContent: 'flex-end',
      }}>
        <div className="snb-eyebrow" style={{ color: 'var(--snb-yellow)' }}>{t('about_kicker')}</div>
        <h1 className="snb-display" style={{ fontSize: 42, margin: '10px 0 16px', lineHeight: 1.02 }}>
          {t('about_h')}
        </h1>
        <p style={{ margin: 0, fontSize: 15, lineHeight: 1.6, opacity: .9, maxWidth: 340 }}>
          {t('about_p1')}
        </p>
      </section>
      <SnbCheckerStripe height={24} flip />

      {/* Stats strip */}
      <section style={{ background: 'var(--snb-cream)', padding: '24px 22px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
          {[
            { n: '586', k: 'stats_reviews' },
            { n: '4.3 ★', k: 'stats_rating' },
            { n: '2 AM', k: 'stats_late' },
            { n: 'Madinah', k: 'stats_location' },
          ].map(s => (
            <div key={s.k} style={{
              background: 'var(--snb-paper)', borderRadius: 14, padding: '14px 16px',
              boxShadow: 'inset 0 0 0 1px var(--snb-line)',
            }}>
              <div className="snb-display" style={{ fontSize: 28, color: 'var(--snb-green)', lineHeight: 1 }}>{s.n}</div>
              <div style={{ fontSize: 11, color: 'var(--snb-ink-soft)', marginTop: 4 }}>{t(s.k)}</div>
            </div>
          ))}
        </div>
      </section>

      {/* Values */}
      <section className="snb-section tight">
        <SnbSectionHead title={t('values_h')} />
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          {[1,2,3].map(i => (
            <div key={i} className="snb-card" style={{ padding: 16, display: 'flex', gap: 14, alignItems: 'flex-start' }}>
              <div style={{
                flexShrink: 0, width: 44, height: 44, borderRadius: 12,
                background: 'var(--snb-green)', color: 'var(--snb-yellow)',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: 'var(--snb-display)', fontSize: 20,
              }}>0{i}</div>
              <div>
                <h3 style={{ margin: '2px 0 6px', fontSize: 16, fontWeight: 700 }}>{t('value_' + i + '_h')}</h3>
                <p style={{ margin: 0, fontSize: 13, color: 'var(--snb-ink-soft)', lineHeight: 1.5 }}>{t('value_' + i + '_p')}</p>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Family + late-night strip */}
      <section style={{ background: 'var(--snb-cream-2)' }}>
        <div className="snb-section tight">
          <div style={{
            borderRadius: 22, overflow: 'hidden', position: 'relative',
            backgroundImage: `linear-gradient(135deg, rgba(10,29,16,.25), rgba(10,29,16,.7)), url("assets/saudi-eating.jpg")`,
            backgroundSize: 'cover', backgroundPosition: 'center',
            padding: '32px 22px', color: 'var(--snb-cream)', minHeight: 220,
            display: 'flex', flexDirection: 'column', justifyContent: 'flex-end',
          }}>
            <div className="snb-eyebrow" style={{ color: 'var(--snb-yellow)', marginBottom: 6 }}>
              {lang === 'ar' ? 'مكاننا في المدينة' : "MADINAH'S FAVOURITE"}
            </div>
            <h3 className="snb-display" style={{ fontSize: 26, margin: '0 0 8px' }}>
              {lang === 'ar' ? 'مكان عائلتك المفضل في المدينة' : 'Madinah\'s family-table favourite'}
            </h3>
            <p style={{ margin: 0, fontSize: 13, opacity: .9 }}>
              {lang === 'ar' ? 'قسم عائلي منفصل، وجبات أطفال، أجواء هادئة.' : 'Separate family room, kids meals, calm ambience.'}
            </p>
          </div>
        </div>
      </section>

      <SnbFinalCTA />
    </SnbPage>
  );
}

// ────────────────────────────────────────────────────────────────────────────
// GALLERY PAGE
// ────────────────────────────────────────────────────────────────────────────
function SnbGalleryPage() {
  const { t, lang } = useSnb();
  return (
    <SnbPage>
      {/* Hero */}
      <section style={{ background: 'var(--snb-cream)', padding: '32px 22px 24px' }}>
        <div className="snb-eyebrow">{lang === 'ar' ? 'المعرض' : 'GALLERY'}</div>
        <h1 className="snb-display" style={{ fontSize: 38, margin: '8px 0 6px' }}>{t('gallery_h')}</h1>
        <p style={{ margin: 0, fontSize: 14, color: 'var(--snb-ink-soft)' }}>{t('gallery_sub')}</p>
      </section>
      <SnbCheckerStripe height={20} />

      {/* Featured large */}
      <section className="snb-section tight" style={{ paddingTop: 18 }}>
        <div style={{
          borderRadius: 20, overflow: 'hidden', marginBottom: 12,
          backgroundImage: `url("${SNB_GALLERY[0]}")`,
          backgroundSize: 'cover', backgroundPosition: 'center',
          aspectRatio: '1 / 1', position: 'relative',
        }}>
          <div style={{
            position: 'absolute', inset: 'auto 0 0 0', padding: '60px 18px 18px',
            background: 'linear-gradient(transparent, rgba(10,29,16,.75))',
            color: 'var(--snb-cream)',
          }}>
            <span style={{
              padding: '4px 10px', borderRadius: 999,
              background: 'var(--snb-yellow)', color: 'var(--snb-green-deep)',
              fontSize: 10, fontWeight: 800, letterSpacing: '.08em',
            }}>{lang === 'ar' ? 'الأكثر طلباً' : 'BESTSELLER'}</span>
            <div style={{ marginTop: 8, fontSize: 18, fontWeight: 700 }}>
              {lang === 'ar' ? 'دبل تشيز كلاسيك' : 'Double cheese, classic'}
            </div>
          </div>
        </div>

        {/* Asymmetric grid — all remaining gallery shots */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
          {SNB_GALLERY.slice(1).map((src, i) => (
            <div key={i} style={{
              aspectRatio: i % 3 === 0 ? '1 / 1.3' : '1 / 1',
              borderRadius: 14,
              backgroundImage: `url("${src}")`,
              backgroundSize: 'cover', backgroundPosition: 'center',
            }} />
          ))}
        </div>
      </section>

      {/* Follow strip */}
      <section style={{
        background: 'var(--snb-green)', color: 'var(--snb-cream)',
        padding: '28px 22px', textAlign: 'center',
      }}>
        <SnbIcon name="instagram" size={32} />
        <h3 className="snb-display" style={{ fontSize: 26, margin: '10px 0 6px' }}>{t('follow_us')}</h3>
        <p style={{ margin: '0 0 18px', fontSize: 13, opacity: .8 }}>
          {lang === 'ar' ? 'تفاعل، تابع، شاركنا صورك.' : 'Tag us. We re-share the good ones.'}
        </p>
        <div style={{ display: 'flex', gap: 8, justifyContent: 'center', flexWrap: 'wrap' }}>
          <a href={SNB_SOCIAL.instagram} target="_blank" rel="noopener noreferrer" className="snb-btn snb-btn-yellow" style={{ padding: '12px 18px', textDecoration: 'none' }}>
            <SnbIcon name="instagram" size={14} /> Instagram
          </a>
          <a href={SNB_SOCIAL.tiktok} target="_blank" rel="noopener noreferrer" className="snb-btn" style={{
            padding: '12px 18px', textDecoration: 'none',
            background: 'transparent', color: 'var(--snb-cream)',
            boxShadow: 'inset 0 0 0 1.5px rgba(255,255,229,.5)',
          }}>
            <SnbIcon name="tiktok" size={14} /> TikTok
          </a>
          <a href={SNB_SOCIAL.snap} target="_blank" rel="noopener noreferrer" className="snb-btn" style={{
            padding: '12px 18px', textDecoration: 'none',
            background: 'transparent', color: 'var(--snb-cream)',
            boxShadow: 'inset 0 0 0 1.5px rgba(255,255,229,.5)',
          }}>
            <SnbIcon name="snap" size={14} /> Snapchat
          </a>
        </div>
      </section>
    </SnbPage>
  );
}

// ────────────────────────────────────────────────────────────────────────────
// CONTACT PAGE
// ────────────────────────────────────────────────────────────────────────────
function SnbContactPage() {
  const { t, lang } = useSnb();
  return (
    <SnbPage>
      {/* Hero */}
      <section style={{
        background: 'var(--snb-cream)', padding: '32px 22px 22px', position: 'relative',
      }}>
        <div className="snb-eyebrow">{lang === 'ar' ? 'تواصل' : 'GET IN TOUCH'}</div>
        <h1 className="snb-display" style={{ fontSize: 38, margin: '8px 0 8px', lineHeight: 1.02 }}>
          {t('contact_h')}
        </h1>
      </section>

      {/* Big call card */}
      <section className="snb-section tight" style={{ paddingTop: 0 }}>
        <div style={{
          background: 'var(--snb-green)', color: 'var(--snb-cream)',
          borderRadius: 22, padding: 22, position: 'relative', overflow: 'hidden',
        }}>
          <div style={{
            position: 'absolute', right: -10, bottom: -10, fontSize: 140,
            color: 'rgba(224,205,47,.15)', lineHeight: 0.8, pointerEvents: 'none',
          }}>☎</div>
          <div className="snb-eyebrow" style={{ color: 'var(--snb-yellow)', marginBottom: 8 }}>
            {t('contact_phone_l')}
          </div>
          <a href={SNB_SOCIAL.phone} className="snb-display" style={{
            fontSize: 30, letterSpacing: '0.02em', color: 'var(--snb-cream)',
            textDecoration: 'none', display: 'block',
          }}>
            +966 59 995 0112
          </a>
          <div style={{ marginTop: 14, display: 'flex', gap: 8 }}>
            <a href={SNB_SOCIAL.phone} className="snb-btn snb-btn-yellow" style={{ padding: '10px 16px', fontSize: 13, textDecoration: 'none' }}>
              <SnbIcon name="phone" size={14} stroke={2.5} /> {t('cta_call')}
            </a>
            <a href={SNB_SOCIAL.whatsapp} target="_blank" rel="noopener noreferrer" className="snb-btn" style={{
              padding: '10px 16px', fontSize: 13,
              background: 'transparent', color: 'var(--snb-cream)',
              boxShadow: 'inset 0 0 0 1.5px rgba(255,255,229,.5)', textDecoration: 'none',
            }}>
              <SnbIcon name="wa" size={14} /> WhatsApp
            </a>
          </div>
        </div>
      </section>

      {/* Address + map */}
      <section className="snb-section tight" style={{ paddingTop: 0 }}>
        <div className="snb-card" style={{ padding: 18 }}>
          <div className="snb-eyebrow" style={{ marginBottom: 8 }}>{t('contact_addr_l')}</div>
          <p style={{ margin: '0 0 14px', fontSize: 15, lineHeight: 1.5 }}>{t('contact_addr')}</p>
          <a href={SNB_SOCIAL.maps} target="_blank" rel="noopener noreferrer" style={{
            display: 'block', borderRadius: 14, height: 150, overflow: 'hidden',
            position: 'relative', textDecoration: 'none',
          }}>
            <iframe
              title="Steaks N Buns map"
              src="https://maps.google.com/maps?q=Steaks%20N%20Buns%20Madinah&t=&z=15&ie=UTF8&iwloc=&output=embed"
              style={{ border: 0, width: '100%', height: '100%', filter: 'saturate(0.85)', pointerEvents: 'none' }}
              loading="lazy"
              referrerPolicy="no-referrer-when-downgrade"
            />
          </a>
          <button className="snb-btn snb-btn-ghost" style={{ marginTop: 12, width: '100%' }}
            onClick={() => window.open(SNB_SOCIAL.maps, '_blank')}>
            <SnbIcon name="pin" size={16} /> {t('cta_directions')}
          </button>
        </div>
      </section>

      {/* Hours */}
      <section className="snb-section tight" style={{ paddingTop: 0 }}>
        <div className="snb-card" style={{ padding: 18 }}>
          <div className="snb-eyebrow" style={{ marginBottom: 12 }}>{t('hours_h')}</div>
          {[
            { d: t('hours_weekday'), t: t('hours_weekday_t') },
            { d: t('hours_weekend'), t: t('hours_weekend_t') },
          ].map((row, i) => (
            <div key={i} style={{
              display: 'flex', justifyContent: 'space-between', padding: '10px 0',
              borderTop: i > 0 ? '1px solid var(--snb-line)' : 0, fontSize: 14,
            }}>
              <span style={{ color: 'var(--snb-ink-soft)' }}>{row.d}</span>
              <strong>{row.t}</strong>
            </div>
          ))}
          <div style={{
            marginTop: 10, padding: '8px 12px', borderRadius: 8,
            background: 'rgba(90,138,58,.12)', color: 'var(--snb-success)',
            fontSize: 12, fontWeight: 600, display: 'inline-flex', alignItems: 'center', gap: 6,
          }}>
            <span style={{ width: 7, height: 7, borderRadius: '50%', background: 'currentColor' }} />
            {lang === 'ar' ? 'مفتوح الآن' : 'Open now'}
          </div>
        </div>
      </section>

      {/* Payment methods */}
      <section className="snb-section tight" style={{ paddingTop: 0 }}>
        <div className="snb-eyebrow" style={{ marginBottom: 10 }}>{t('pay_h')}</div>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
          {[t('pay_card'), t('pay_nfc'), t('pay_apple'), t('pay_stc'), t('pay_cash')].map(p => (
            <span key={p} className="snb-badge">{p}</span>
          ))}
        </div>
        <div className="snb-eyebrow" style={{ marginTop: 18, marginBottom: 10 }}>{t('delivery_apps_h')}</div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
          {['HungerStation', 'Keeta'].map(app => (
            <div key={app} className="snb-card" style={{
              padding: '14px 14px', display: 'flex', alignItems: 'center', gap: 10,
            }}>
              <div style={{
                width: 32, height: 32, borderRadius: 10,
                background: 'var(--snb-yellow)', color: 'var(--snb-green-deep)',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                fontWeight: 800,
              }}>{app[0]}</div>
              <div style={{ fontWeight: 600, fontSize: 13 }}>{app}</div>
            </div>
          ))}
        </div>
      </section>

      {/* FAQ */}
      <section className="snb-section tight">
        <SnbSectionHead title={t('faq_h')} />
        {SNB_FAQ_HOME.map((f, i) => (
          <details key={i} style={{
            padding: '14px 0', borderTop: i > 0 ? '1px solid var(--snb-line)' : 0,
          }}>
            <summary style={{ fontWeight: 600, fontSize: 14, cursor: 'pointer', listStyle: 'none', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12 }}>
              {t(f.qk)}
              <SnbIcon name="plus" size={16} />
            </summary>
            <p style={{ margin: '8px 0 0', fontSize: 13, color: 'var(--snb-ink-soft)', lineHeight: 1.55 }}>{t(f.ak)}</p>
          </details>
        ))}
      </section>
    </SnbPage>
  );
}

Object.assign(window, { SnbPage, SnbHomePage, SnbMenuPage, SnbAboutPage, SnbGalleryPage, SnbContactPage });