// heroes.jsx — A library of distinct hero treatments for Steaks N Buns.
// Three visual styles, each with mobile + desktop variants. The content
// variant (food / combo / late / family) selects the image + copy; the
// style (showcase / editorial / poster / checker) controls the visual treatment.

// ─── Content variants — shared by every hero style ────────────────────────
const SNB_HERO_VARIANTS = {
  food: { img: 'assets/menu/philly-tray-real.webp', h: 'hero_h1_food', sub: 'hero_sub_food', from: 30 },
  combo: { img: 'assets/menu/maple-crispy-spicy.webp', h: 'hero_h1_combo', sub: 'hero_sub_combo', from: 30 },
  late: { img: 'assets/gamer-burger.jpg', h: 'hero_h1_late', sub: 'hero_sub_late', from: 17 },
  family: { img: 'assets/restaurant-interior.webp', h: 'hero_h1_family', sub: 'hero_sub_family', from: 17 }
};

// ─── Shared mini parts ─────────────────────────────────────────────────────
function SnbHeroKicker({ children, dark }) {
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 10,
      padding: '8px 14px', borderRadius: 999,
      background: dark ? 'var(--snb-yellow)' : 'var(--snb-green)',
      color: dark ? 'var(--snb-green-deep)' : 'var(--snb-cream)',
      fontWeight: 800, fontSize: 11, letterSpacing: '0.14em'
    }}>
      <span style={{ width: 7, height: 7, borderRadius: '50%', background: 'currentColor', opacity: .7 }} />
      {children}
    </div>);

}

function SnbHeroRating() {
  const { lang, tweaks } = useSnb();
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 10,
      fontSize: 13, color: 'inherit'
    }}>
      <SnbStars value={4} size={15} />
      <span><strong>{tweaks?.rating ?? 4.3}</strong> · {tweaks?.reviewCount ?? '586'} {lang === 'ar' ? 'تقييم' : 'reviews'}</span>
    </div>);

}

// ─────────────────────────────────────────────────────────────────────────────
// 1. EDITORIAL — magazine-style: cinematic full-bleed photo, MASSIVE display
//    type that bleeds off-screen, checker stripe accents, minimal chrome.
// ─────────────────────────────────────────────────────────────────────────────
function SnbHeroEditorial({ variant = 'food', mode = 'mobile' }) {
  const { t, lang } = useSnb();
  const v = SNB_HERO_VARIANTS[variant] || SNB_HERO_VARIANTS.food;
  if (mode === 'desktop') {
    return (
      <section style={{
        background: 'var(--snb-green-deep)', color: 'var(--snb-cream)',
        position: 'relative', overflow: 'hidden', minHeight: 720
      }}>
        {/* Full-bleed image with diagonal mask */}
        <div style={{
          position: 'absolute', top: 0, bottom: 0, right: 0, width: '62%',
          backgroundImage: `linear-gradient(100deg, var(--snb-green-deep) 0%, transparent 30%), url("${v.img}")`,
          backgroundSize: 'cover', backgroundPosition: 'center'
        }} />
        <div style={{
          position: 'absolute', top: 0, left: 0, right: 0
        }}>
          <SnbCheckerStripe height={28} />
        </div>
        <div style={{
          position: 'relative', maxWidth: 1360, margin: '0 auto',
          padding: '120px 48px 80px'
        }}>
          <SnbHeroKicker dark>{t('hero_kicker')}</SnbHeroKicker>
          <h1 className="snb-display" style={{
            fontSize: lang === 'ar' ? 140 : 168, margin: '24px 0 0',
            lineHeight: 0.88, letterSpacing: '-0.03em',
            maxWidth: 980, textWrap: 'balance'
          }}>
            {t(v.h)}
          </h1>
          <div style={{
            marginTop: 36, display: 'flex', alignItems: 'flex-end',
            justifyContent: 'space-between', gap: 48, maxWidth: 980, flexWrap: 'wrap'
          }}>
            <p style={{ margin: 0, fontSize: 19, lineHeight: 1.5, opacity: .85, maxWidth: 460 }}>{t(v.sub)}</p>
            <div style={{ display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap' }}>
              <a href={SNB_SOCIAL.hungerstation} target="_blank" rel="noopener noreferrer" className="snb-btn snb-btn-yellow" style={{ padding: '18px 30px', fontSize: 16 }}>
                <SnbIcon name="bag" size={18} stroke={2.5} />
                {t('cta_order')}
              </a>
              <a href="menu.html" className="snb-btn" style={{
                padding: '18px 28px', fontSize: 15,
                background: 'transparent', color: 'var(--snb-cream)',
                boxShadow: 'inset 0 0 0 2px rgba(255,255,229,.4)'
              }}>{t('cta_menu')} →</a>
            </div>
          </div>
          {/* Bottom meta strip */}
          <div style={{
            marginTop: 80, paddingTop: 24,
            borderTop: '1px solid rgba(255,255,229,.18)',
            display: 'flex', alignItems: 'center', gap: 36,
            fontSize: 12, letterSpacing: '0.14em', textTransform: 'uppercase',
            color: 'rgba(255,255,229,.7)'
          }}>
            <SnbHeroRating />
            <span style={{ width: 4, height: 4, borderRadius: '50%', background: 'rgba(255,255,229,.4)' }} />
            <span>{lang === 'ar' ? 'في المدينة' : 'MADINAH'}</span>
            <span style={{ width: 4, height: 4, borderRadius: '50%', background: 'rgba(255,255,229,.4)' }} />
            <span>{lang === 'ar' ? 'المدينة المنورة' : 'MADINAH · KSA'}</span>
            <span style={{ width: 4, height: 4, borderRadius: '50%', background: 'rgba(255,255,229,.4)' }} />
            <span>{lang === 'ar' ? 'مفتوح حتى ٢ ص' : 'OPEN TILL 2 AM'}</span>
          </div>
        </div>
      </section>);

  }
  // mobile
  return (
    <section style={{
      background: 'var(--snb-green-deep)', color: 'var(--snb-cream)',
      position: 'relative', overflow: 'hidden', minHeight: 640
    }}>
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: `linear-gradient(to bottom, rgba(10,29,16,.2) 0%, rgba(10,29,16,.65) 60%, var(--snb-green-deep) 100%), url("${v.img}")`,
        backgroundSize: 'cover', backgroundPosition: 'center'
      }} />
      <div style={{ position: 'absolute', top: 0, left: 0, right: 0 }}>
        <SnbCheckerStripe height={20} />
      </div>
      <div style={{
        position: 'relative', padding: '52px 22px 36px',
        display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', minHeight: 640
      }}>
        <SnbHeroKicker dark>{t('hero_kicker')}</SnbHeroKicker>
        <h1 className="snb-display" style={{
          fontSize: lang === 'ar' ? 52 : 64, margin: '16px 0 18px',
          lineHeight: 0.92, letterSpacing: '-0.02em', textWrap: 'balance'
        }}>
          {t(v.h)}
        </h1>
        <p style={{ margin: '0 0 24px', fontSize: 15, lineHeight: 1.55, opacity: .9, maxWidth: 340 }}>
          {t(v.sub)}
        </p>
        <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', marginBottom: 22 }}>
          <a href={SNB_SOCIAL.hungerstation} target="_blank" rel="noopener noreferrer" className="snb-btn snb-btn-yellow" style={{ padding: '16px 26px', fontSize: 16 }}>
            <SnbIcon name="bag" size={16} stroke={2.5} />
            {t('cta_order')}
          </a>
          <a href="menu.html" className="snb-btn snb-btn-cream" style={{ padding: '16px 22px', fontSize: 15 }}>
            {t('cta_menu')}
          </a>
        </div>
        <div style={{
          paddingTop: 16, borderTop: '1px solid rgba(255,255,229,.18)',
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase',
          color: 'rgba(255,255,229,.7)', gap: 8, flexWrap: 'wrap'
        }}>
          <SnbHeroRating />
          <span>{lang === 'ar' ? 'في المدينة' : 'MADINAH'}</span>
        </div>
      </div>
    </section>);

}

// ─────────────────────────────────────────────────────────────────────────────
// 2. POSTER — vintage diner poster: cream bg, big rotated stickers, floating
//    product, signature checker, lots of brand personality. The "fun" hero.
// ─────────────────────────────────────────────────────────────────────────────
function SnbHeroPoster({ variant = 'food', mode = 'mobile' }) {
  const { t, lang } = useSnb();
  const v = SNB_HERO_VARIANTS[variant] || SNB_HERO_VARIANTS.food;
  if (mode === 'desktop') {
    return (
      <section style={{
        background: 'var(--snb-cream)', color: 'var(--snb-green-deep)',
        position: 'relative', overflow: 'hidden', minHeight: 760
      }}>
        <SnbCheckerStripe height={28} />
        <div style={{
          maxWidth: 1360, margin: '0 auto',
          padding: '64px 48px 80px',
          display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 56, alignItems: 'center'
        }}>
          <div>
            <SnbHeroKicker>{t('hero_kicker')}</SnbHeroKicker>
            <h1 className="snb-display" style={{
              fontSize: lang === 'ar' ? 110 : 132, margin: '28px 0 24px',
              lineHeight: 0.9, letterSpacing: '-0.02em',
              color: 'var(--snb-green-deep)', textWrap: 'balance'
            }}>
              {t(v.h)}
            </h1>
            <p style={{ margin: '0 0 36px', fontSize: 19, lineHeight: 1.5, maxWidth: 520, opacity: .8 }}>
              {t(v.sub)}
            </p>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
              <a href={SNB_SOCIAL.hungerstation} target="_blank" rel="noopener noreferrer" className="snb-btn snb-btn-primary" style={{ padding: '18px 32px', fontSize: 16 }}>
                <SnbIcon name="bag" size={18} stroke={2.5} />
                {t('cta_order')}
              </a>
              <a href="menu.html" className="snb-btn snb-btn-ghost" style={{ padding: '18px 28px', fontSize: 15 }}>
                {t('cta_menu')} →
              </a>
              <div style={{ marginInlineStart: 12 }}><SnbHeroRating /></div>
            </div>
          </div>

          {/* Composition: round photo + rotated stickers */}
          <div style={{ position: 'relative', height: 520 }}>
            {/* Big yellow disc behind photo */}
            <div style={{
              position: 'absolute', top: '50%', left: '50%',
              transform: 'translate(-50%, -50%)',
              width: 480, height: 480, borderRadius: '50%',
              background: 'var(--snb-yellow)'
            }} />
            {/* Product circle */}
            <div style={{
              position: 'absolute', top: '50%', left: '50%',
              transform: 'translate(-50%, -50%)',
              width: 440, height: 440, borderRadius: '50%',
              backgroundImage: `url("${v.img}")`, backgroundSize: 'cover', backgroundPosition: 'center',
              boxShadow: '0 30px 60px rgba(10,29,16,.25), 0 0 0 8px var(--snb-cream)'
            }} />
            {/* "FROM" sticker */}
            <div style={{
              position: 'absolute', top: -10, right: 0,
              background: 'var(--snb-green)', color: 'var(--snb-yellow)',
              padding: '18px 22px', borderRadius: 100,
              transform: 'rotate(-12deg)',
              boxShadow: '0 14px 30px rgba(10,29,16,.25)',
              textAlign: 'center', fontFamily: 'var(--snb-display)'
            }}>
              <div style={{ fontSize: 10, fontWeight: 800, letterSpacing: '.18em', opacity: .8, fontFamily: 'var(--snb-body)' }}>
                {lang === 'ar' ? 'يبدأ من' : 'FROM'}
              </div>
              <div style={{ fontSize: 36, lineHeight: 1 }}>
                {v.from} <span style={{ fontSize: 14 }}>{t('sar')}</span>
              </div>
            </div>
            {/* Burst sticker */}
            <div style={{
              position: 'absolute', bottom: 30, left: -20,
              width: 130, height: 130,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              transform: 'rotate(-8deg)'
            }}>
              <svg viewBox="0 0 100 100" width="130" height="130" style={{ position: 'absolute', filter: 'drop-shadow(0 8px 16px rgba(10,29,16,.25))' }}>
                <polygon points="50,2 56,14 70,8 70,22 84,22 78,34 92,40 80,48 92,60 78,66 84,78 70,78 70,92 56,86 50,98 44,86 30,92 30,78 16,78 22,66 8,60 20,48 8,40 22,34 16,22 30,22 30,8 44,14"
                fill="var(--snb-green)" />
              </svg>
              <div style={{ position: 'relative', textAlign: 'center', color: 'var(--snb-yellow)' }}>
                <div className="snb-display" style={{ fontSize: 14, lineHeight: 1 }}>{lang === 'ar' ? 'حتى' : 'OPEN TILL'}</div>
                <div className="snb-display" style={{ fontSize: 30, lineHeight: 1, marginTop: 4 }}>2AM</div>
              </div>
            </div>
            {/* Tape label */}
            <div style={{
              position: 'absolute', bottom: 8, right: 30,
              padding: '8px 14px', background: 'var(--snb-paper)',
              fontSize: 11, fontWeight: 800, letterSpacing: '0.16em',
              color: 'var(--snb-green)', transform: 'rotate(4deg)',
              boxShadow: '0 6px 16px rgba(10,29,16,.15)'
            }}>
              {lang === 'ar' ? 'الأكثر طلباً' : 'BESTSELLER'}
            </div>
          </div>
        </div>
        <SnbCheckerStripe height={28} flip />
      </section>);

  }
  // mobile
  return (
    <section style={{
      background: 'var(--snb-cream)', color: 'var(--snb-green-deep)',
      position: 'relative', overflow: 'hidden', paddingBottom: 36
    }}>
      <SnbCheckerStripe height={20} />
      <div style={{ padding: '24px 22px 12px' }}>
        <SnbHeroKicker>{t('hero_kicker')}</SnbHeroKicker>
        <h1 className="snb-display" style={{
          fontSize: lang === 'ar' ? 46 : 52, margin: '16px 0 14px',
          lineHeight: 0.94, letterSpacing: '-0.02em', textWrap: 'balance'
        }}>
          {t(v.h)}
        </h1>
        <p style={{ margin: '0 0 18px', fontSize: 14, lineHeight: 1.5, opacity: .8, maxWidth: 340 }}>
          {t(v.sub)}
        </p>
      </div>

      {/* Image composition */}
      <div style={{ position: 'relative', height: 320, margin: '4px 0 14px' }}>
        <div style={{
          position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)',
          width: 280, height: 280, borderRadius: '50%', background: 'var(--snb-yellow)'
        }} />
        <div style={{
          position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)',
          width: 256, height: 256, borderRadius: '50%',
          backgroundImage: `url("${v.img}")`, backgroundSize: 'cover', backgroundPosition: 'center',
          boxShadow: '0 18px 40px rgba(10,29,16,.25), 0 0 0 6px var(--snb-cream)'
        }} />
        {/* From sticker */}
        <div style={{
          position: 'absolute', top: 10, right: 10,
          background: 'var(--snb-green)', color: 'var(--snb-yellow)',
          padding: '12px 16px', borderRadius: 80,
          transform: 'rotate(-10deg)',
          boxShadow: '0 10px 20px rgba(10,29,16,.25)',
          textAlign: 'center'
        }}>
          <div style={{ fontSize: 9, fontWeight: 800, letterSpacing: '.16em', opacity: .8 }}>
            {lang === 'ar' ? 'يبدأ من' : 'FROM'}
          </div>
          <div className="snb-display" style={{ fontSize: 26, lineHeight: 1 }}>
            {v.from} <span style={{ fontSize: 11 }}>{t('sar')}</span>
          </div>
        </div>
        {/* Burst */}
        <div style={{
          position: 'absolute', bottom: 8, left: 14,
          width: 88, height: 88, transform: 'rotate(-8deg)',
          display: 'flex', alignItems: 'center', justifyContent: 'center'
        }}>
          <svg viewBox="0 0 100 100" width="88" height="88" style={{ position: 'absolute' }}>
            <polygon points="50,2 56,14 70,8 70,22 84,22 78,34 92,40 80,48 92,60 78,66 84,78 70,78 70,92 56,86 50,98 44,86 30,92 30,78 16,78 22,66 8,60 20,48 8,40 22,34 16,22 30,22 30,8 44,14"
            fill="var(--snb-green)" />
          </svg>
          <div style={{ position: 'relative', textAlign: 'center', color: 'var(--snb-yellow)' }}>
            <div className="snb-display" style={{ fontSize: 9, lineHeight: 1 }}>{lang === 'ar' ? 'حتى' : 'TILL'}</div>
            <div className="snb-display" style={{ fontSize: 22, lineHeight: 1 }}>2AM</div>
          </div>
        </div>
      </div>

      <div style={{ padding: '0 22px', display: 'flex', gap: 10, flexWrap: 'wrap' }}>
        <a href={SNB_SOCIAL.hungerstation} target="_blank" rel="noopener noreferrer" className="snb-btn snb-btn-primary" style={{ padding: '16px 26px', fontSize: 16, flex: 1 }}>
          <SnbIcon name="bag" size={16} stroke={2.5} />
          {t('cta_order')}
        </a>
        <a href="menu.html" className="snb-btn snb-btn-ghost" style={{ padding: '16px 18px', fontSize: 14 }}>
          {t('cta_menu')}
        </a>
      </div>
      <div style={{
        padding: '18px 22px 0', marginTop: 18,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        fontSize: 12, color: 'var(--snb-ink-soft)',
        borderTop: '1px solid var(--snb-line)'
      }}>
        <SnbHeroRating />
        <span style={{ fontWeight: 700, letterSpacing: '0.12em', fontSize: 10 }}>
          {lang === 'ar' ? 'في المدينة' : 'MADINAH'}
        </span>
      </div>
    </section>);

}

// ─────────────────────────────────────────────────────────────────────────────
// 3. SHOWCASE — confident split layout (the prior hero, refined). Green-deep
//    bg, headline + image side by side, with brand chrome added.
// ─────────────────────────────────────────────────────────────────────────────
function SnbHeroShowcase({ variant = 'food', mode = 'mobile' }) {
  const { t, lang } = useSnb();
  const v = SNB_HERO_VARIANTS[variant] || SNB_HERO_VARIANTS.food;
  if (mode === 'desktop') {
    return (
      <section style={{
        background: 'var(--snb-green-deep)', color: 'var(--snb-cream)',
        position: 'relative', overflow: 'hidden'
      }}>
        <div style={{ position: 'absolute', top: 0, left: 0, right: 0 }}>
          <SnbCheckerStripe height={20} />
        </div>
        <div style={{
          maxWidth: 1360, margin: '0 auto', padding: '90px 48px 100px',
          display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 64, alignItems: 'center'
        }}>
          <div>
            <SnbHeroKicker dark>{t('hero_kicker')}</SnbHeroKicker>
            <h1 className="snb-display" style={{
              fontSize: lang === 'ar' ? 84 : 96, margin: '24px 0 0',
              lineHeight: 0.9, letterSpacing: '-0.02em',
              textWrap: 'balance', maxWidth: 720
            }}>
              {t(v.h)}
            </h1>
            <p style={{ margin: '24px 0 36px', fontSize: 19, lineHeight: 1.55, opacity: .88, maxWidth: 540 }}>
              {t(v.sub)}
            </p>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
              <a href={SNB_SOCIAL.hungerstation} target="_blank" rel="noopener noreferrer" className="snb-btn snb-btn-yellow" style={{ padding: '18px 30px', fontSize: 16 }}>
                <SnbIcon name="bag" size={18} stroke={2.5} />
                {t('cta_order')}
              </a>
              <a href="menu.html" className="snb-btn" style={{
                padding: '18px 28px', fontSize: 15,
                background: 'transparent', color: 'var(--snb-cream)',
                boxShadow: 'inset 0 0 0 2px rgba(255,255,229,.4)'
              }}>{t('cta_menu')}</a>
              <div style={{ marginInlineStart: 16 }}><SnbHeroRating /></div>
            </div>
          </div>
          <div style={{ position: 'relative' }}>
            <div style={{
              aspectRatio: '1 / 1', borderRadius: 32,
              background: `url("${v.img}") center/cover`,
              boxShadow: '0 30px 80px rgba(0,0,0,.4)'
            }} />
            <div style={{
              position: 'absolute', top: -16, insetInlineEnd: -16,
              background: 'var(--snb-yellow)', color: 'var(--snb-green-deep)',
              padding: '14px 18px', borderRadius: 18, transform: 'rotate(8deg)',
              boxShadow: '0 12px 30px rgba(0,0,0,.3)'
            }}>
              <div style={{ fontSize: 10, fontWeight: 800, letterSpacing: '0.1em', opacity: .8 }}>
                {lang === 'ar' ? 'يبدأ من' : 'FROM'}
              </div>
              <div className="snb-display" style={{ fontSize: 28, lineHeight: 1 }}>
                {v.from} <span style={{ fontSize: 14 }}>{t('sar')}</span>
              </div>
            </div>
          </div>
        </div>
      </section>);

  }
  // mobile — full-bleed photo with checker top
  return (
    <section style={{
      position: 'relative', minHeight: 600,
      backgroundImage: `linear-gradient(to bottom, transparent 0%, rgba(10,29,16,.55) 55%, rgba(10,29,16,.95) 100%), url("${v.img}")`,
      backgroundSize: 'cover', backgroundPosition: 'center',
      color: 'var(--snb-cream)', overflow: 'hidden',
      display: 'flex', flexDirection: 'column', justifyContent: 'flex-end',
      padding: '32px 22px 36px'
    }}>
      <div style={{ position: 'absolute', top: 0, left: 0, right: 0 }}>
        <SnbCheckerStripe height={20} />
      </div>
      {/* Floating rating top right */}
      <div style={{
        position: 'absolute', top: 32, insetInlineEnd: 16,
        background: 'rgba(255,255,229,.95)', color: 'var(--snb-green)',
        padding: '8px 14px', borderRadius: 999,
        display: 'inline-flex', alignItems: 'center', gap: 8,
        fontSize: 12, fontWeight: 700, backdropFilter: 'blur(8px)'
      }}>
        <SnbStars value={4} size={12} />
        <span>4.3 · 586</span>
      </div>
      <SnbHeroKicker dark>{t('hero_kicker')}</SnbHeroKicker>
      <h1 className="snb-display" style={{
        fontSize: lang === 'ar' ? 42 : 48, margin: '14px 0 14px',
        textWrap: 'balance', maxWidth: 360, lineHeight: 0.95
      }}>
        {t(v.h)}
      </h1>
      <p style={{ margin: 0, marginBottom: 22, fontSize: 15, lineHeight: 1.5, opacity: .92, maxWidth: 340 }}>
        {t(v.sub)}
      </p>
      <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
        <a href={SNB_SOCIAL.hungerstation} target="_blank" rel="noopener noreferrer" className="snb-btn snb-btn-yellow" style={{ padding: '16px 26px', fontSize: 16 }}>
          <SnbIcon name="bag" size={16} stroke={2.5} />
          {t('cta_order')}
        </a>
        <a href="menu.html" className="snb-btn snb-btn-cream" style={{ padding: '16px 22px', fontSize: 15 }}>
          {t('cta_menu')}
        </a>
      </div>
    </section>);

}

// ─────────────────────────────────────────────────────────────────────────────
// 4. AD POSTER — modelled on the real Steaks N Buns menu ad:
//    cream bg, logo lockup top, yellow price chip, product on checker tray,
//    Arabic/English headline below, big green checker stripe at bottom.
// ─────────────────────────────────────────────────────────────────────────────
function SnbHeroAdPoster({ variant = 'food', mode = 'mobile' }) {
  const { t, lang } = useSnb();
  const v = SNB_HERO_VARIANTS[variant] || SNB_HERO_VARIANTS.food;
  // Localised tagline beneath the dish title — matches the "برجر لحم + بطاطس فرايز" rhythm
  const taglines = {
    food: { en: 'Beef Burger + Fries', ar: 'برجر لحم + بطاطس فرايز' },
    combo: { en: 'Maple Crispy + Fries', ar: 'ميبل كرسبي + بطاطس فرايز' },
    late: { en: 'Late-night Combo', ar: 'وجبة سهرة' },
    family: { en: 'Family Tray', ar: 'صينية عائلية' }
  };
  const tagline = (taglines[variant] || taglines.food)[lang];
  const dishName = lang === 'ar' ? (taglines[variant] || taglines.food).ar.split(' + ')[0] :
  (taglines[variant] || taglines.food).en.split(' + ')[0];

  if (mode === 'desktop') {
    return (
      <section style={{
        background: 'var(--snb-cream)', color: 'var(--snb-green-deep)',
        position: 'relative', overflow: 'hidden', paddingTop: 32
      }}>
        <div style={{ maxWidth: 1360, margin: '0 auto', padding: '32px 48px 0' }}>
          {/* Top: logo lockup + small kicker */}
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 20 }}>
            <SnbLogo src="assets/logo.png" size={140} />
            <SnbHeroRating />
          </div>

          {/* Center composition: 3-col with price chip, product image, headline */}
          <div style={{
            display: 'grid', gridTemplateColumns: '1fr 1.4fr 1fr',
            gap: 32, alignItems: 'center', paddingBottom: 32
          }}>
            {/* LEFT: Yellow price chip + small meta */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 18, alignItems: 'flex-start' }}>
              <div style={{
                background: 'var(--snb-yellow)', color: 'var(--snb-green-deep)',
                padding: '20px 26px', borderRadius: 16,
                boxShadow: '0 12px 28px rgba(218,184,76,.4)',
                textAlign: 'center'
              }}>
                <div className="snb-display" style={{ fontSize: 64, lineHeight: 0.9 }}>
                  {v.from}
                </div>
                <div style={{ fontSize: 13, fontWeight: 800, letterSpacing: '0.1em', marginTop: 4 }}>
                  {t('sar')}
                </div>
              </div>
              <div style={{
                padding: '12px 16px', borderRadius: 12,
                background: 'var(--snb-paper)', boxShadow: 'inset 0 0 0 1px var(--snb-line)'
              }}>
                <div className="snb-eyebrow">{lang === 'ar' ? 'الأكثر طلباً' : 'BESTSELLER'}</div>
                <div style={{ marginTop: 4, fontSize: 13, fontWeight: 600 }}>
                  {lang === 'ar' ? 'يومياً من ١٢ ظهراً حتى ٢ صباحاً' : 'Daily 12 PM — 2 AM'}
                </div>
              </div>
            </div>

            {/* CENTER: Real product photo (already on a checker tray in-frame) */}
            <div style={{ position: 'relative' }}>
              <div style={{
                aspectRatio: '1 / 1', borderRadius: 24, overflow: 'hidden',
                background: 'var(--snb-paper)',
                boxShadow: '0 24px 60px rgba(10,29,16,.2)'
              }}>
                <img src={v.img} alt="" style={{
                  width: '100%', height: '100%', objectFit: 'cover',
                  display: 'block'
                }} />
              </div>
            </div>

            {/* RIGHT: Headline + CTAs */}
            <div>
              <h1 className="snb-display" style={{
                fontSize: lang === 'ar' ? 56 : 64, margin: 0,
                lineHeight: 0.95, letterSpacing: '-0.01em',
                color: 'var(--snb-green-deep)'
              }}>
                {dishName}
              </h1>
              <div style={{
                marginTop: 12, fontSize: 18, fontWeight: 700, color: 'var(--snb-green)',
                paddingInlineStart: 0
              }}>
                + {lang === 'ar' ? 'بطاطس فرايز' : 'French Fries'}
              </div>
              <p style={{ margin: '20px 0 26px', fontSize: 15, lineHeight: 1.55, color: 'var(--snb-ink-soft)', maxWidth: 320 }}>
                {t(v.sub)}
              </p>
              <div style={{ display: 'flex', gap: 10, flexDirection: 'column' }}>
                <a href={SNB_SOCIAL.hungerstation} target="_blank" rel="noopener noreferrer" className="snb-btn snb-btn-primary" style={{ padding: '16px 26px', fontSize: 15, justifyContent: 'center' }}>
                  <SnbIcon name="bag" size={16} stroke={2.5} />
                  {t('cta_order')}
                </a>
                <a href="menu.html" className="snb-btn snb-btn-ghost" style={{ padding: '14px 22px', fontSize: 14, justifyContent: 'center' }}>
                  {t('cta_menu')} →
                </a>
              </div>
            </div>
          </div>
        </div>
        {/* Bottom checker stripe — signature */}
        <SnbCheckerStripe height={48} />
      </section>);

  }

  // ─── Mobile ad-poster ──────────────────────────────────────────────────
  return (
    <section style={{
      background: 'var(--snb-cream)', color: 'var(--snb-green-deep)',
      position: 'relative', overflow: 'hidden', paddingTop: 20, paddingBottom: 0
    }}>
      {/* Top logo */}
      <div style={{ textAlign: 'center', padding: '12px 22px 4px' }}>
        <SnbLogo src="assets/logo.png" size={110} />
      </div>

      {/* Top row: price chip + bestseller tag */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '8px 22px 16px' }}>
        <div style={{
          background: 'var(--snb-yellow)', color: 'var(--snb-green-deep)',
          padding: '10px 14px', borderRadius: 12,
          boxShadow: '0 8px 20px rgba(218,184,76,.4)',
          textAlign: 'center', minWidth: 64
        }}>
          <div className="snb-display" style={{ fontSize: 32, lineHeight: 0.9 }}>{v.from}</div>
          <div style={{ fontSize: 9, fontWeight: 800, letterSpacing: '0.12em', marginTop: 2 }}>{t('sar')}</div>
        </div>
        <div className="snb-eyebrow" style={{ textAlign: 'end' }}>
          {lang === 'ar' ? 'الأكثر طلباً' : 'BESTSELLER'}<br />
          <span style={{ fontFamily: 'var(--snb-body)', fontWeight: 600, fontSize: 11, letterSpacing: 0, textTransform: 'none', color: 'var(--snb-ink-soft)' }}>
            {lang === 'ar' ? 'حتى ٢ صباحاً' : 'Daily till 2 AM'}
          </span>
        </div>
      </div>

      {/* Product photo (already on checker tray) */}
      <div style={{ position: 'relative', padding: '0 22px' }}>
        <div style={{
          aspectRatio: '1 / 0.85', borderRadius: 20, overflow: 'hidden',
          background: 'var(--snb-paper)',
          boxShadow: '0 18px 40px rgba(10,29,16,.18)'
        }}>
          <img src={v.img} alt="" style={{
            width: '100%', height: '100%', objectFit: 'cover', display: 'block'
          }} />
        </div>
      </div>

      {/* Title block */}
      <div style={{ padding: '24px 22px 8px', textAlign: 'center' }}>
        <h1 className="snb-display" style={{
          fontSize: lang === 'ar' ? 38 : 42, margin: 0,
          lineHeight: 0.98, color: 'var(--snb-green-deep)'
        }}>
          {dishName}
        </h1>
        <div style={{
          marginTop: 8, fontSize: 15, fontWeight: 700, color: 'var(--snb-green)'
        }}>
          + {lang === 'ar' ? 'بطاطس فرايز' : 'French Fries'}
        </div>
        <p style={{ margin: '14px auto 22px', maxWidth: 320, fontSize: 13, lineHeight: 1.55, color: 'var(--snb-ink-soft)' }}>
          {t(v.sub)}
        </p>
        <div style={{ display: 'flex', gap: 10, justifyContent: 'center', flexWrap: 'wrap' }}>
          <a href={SNB_SOCIAL.hungerstation} target="_blank" rel="noopener noreferrer" className="snb-btn snb-btn-primary" style={{ padding: '14px 24px', fontSize: 15 }}>
            <SnbIcon name="bag" size={16} stroke={2.5} />
            {t('cta_order')}
          </a>
          <a href="menu.html" className="snb-btn snb-btn-ghost" style={{ padding: '14px 18px', fontSize: 14 }}>
            {t('cta_menu')}
          </a>
        </div>
      </div>

      {/* Bottom checker stripe */}
      <div style={{ marginTop: 24 }}>
        <SnbCheckerStripe height={36} />
      </div>
    </section>);

}

// ─────────────────────────────────────────────────────────────────────────────
// 5. SIGNATURE — the marquee home hero. Confident headline, big real product
//    photo with overlaid price sticker, menu price strip below, signature
//    checker bottom. Cream bg, on-brand.
// ─────────────────────────────────────────────────────────────────────────────
function SnbHeroSignature({ variant = 'food', mode = 'mobile' }) {
  const { t, lang } = useSnb();
  const v = SNB_HERO_VARIANTS[variant] || SNB_HERO_VARIANTS.food;

  // Price strip — quick scannable menu hits
  const priceStrip = [
  { en: 'Beef Burger', ar: 'برجر لحم', price: 27 },
  { en: 'Crispy Chicken', ar: 'كرسبي دجاج', price: 27 },
  { en: 'Maple Crispy', ar: 'ميبل كرسبي', price: 30 },
  { en: 'Philly Steak', ar: 'فيلي ستيك', price: 30 }];


  if (mode === 'desktop') {
    return (
      <section style={{
        background: 'var(--snb-cream)', color: 'var(--snb-green-deep)',
        position: 'relative', overflow: 'hidden'
      }}>
        <div style={{ maxWidth: 1400, margin: '0 auto', padding: '40px 48px 0' }}>
          {/* Top eyebrow row */}
          <div style={{
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            paddingBottom: 24,
            borderBottom: '1px solid var(--snb-line)',
            marginBottom: 56
          }}>
            <span className="snb-eyebrow">{t('brand_tag')} · {t('since')}</span>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 14, fontSize: 13, fontWeight: 600 }}>
              <SnbStars value={4} size={14} />
              <span>{lang === 'ar' ? '٤٫٣ · ٥٨٦ تقييم' : '4.3 · 586 reviews'}</span>
            </span>
          </div>

          {/* Main split */}
          <div style={{
            display: 'grid', gridTemplateColumns: '1.15fr 1fr',
            gap: 56, alignItems: 'center', paddingBottom: 56
          }}>
            {/* LEFT: headline + CTAs */}
            <div>
              <h1 className="snb-display" style={{
                fontSize: lang === 'ar' ? 96 : 116, margin: 0,
                letterSpacing: '-0.025em',
                color: 'var(--snb-green-deep)', lineHeight: "1.4"
              }}>
                {t(v.h)}
              </h1>
              <p style={{
                margin: '28px 0 0', fontSize: 19, lineHeight: 1.55,
                color: 'var(--snb-ink-soft)', maxWidth: 540
              }}>{t(v.sub)}</p>
              <div style={{ marginTop: 36, display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
                <a href={SNB_SOCIAL.hungerstation} target="_blank" rel="noopener noreferrer" className="snb-btn snb-btn-primary" style={{ padding: '18px 30px', fontSize: 16 }}>
                  <SnbIcon name="bag" size={18} stroke={2.5} />
                  {t('cta_order')}
                </a>
                <a href="menu.html" className="snb-btn snb-btn-ghost" style={{ padding: '18px 28px', fontSize: 15 }}>
                  {t('cta_menu')} →
                </a>
                <a href={SNB_SOCIAL.phone} style={{
                  marginInlineStart: 16, display: 'inline-flex', alignItems: 'center', gap: 8,
                  fontSize: 14, fontWeight: 700, color: 'var(--snb-green)', textDecoration: 'none'
                }}>
                  <SnbIcon name="phone" size={14} stroke={2.5} />
                  +966 59 995 0112
                </a>
              </div>
            </div>

            {/* RIGHT: product photo with overlaid stickers */}
            <div style={{ position: 'relative' }}>
              <div style={{
                aspectRatio: '1 / 1', borderRadius: 28, overflow: 'hidden',
                boxShadow: '0 30px 70px rgba(10,29,16,.22)'
              }}>
                <img src={v.img} alt="" style={{
                  width: '100%', height: '100%', objectFit: 'cover', display: 'block'
                }} />
              </div>
              {/* Yellow price sticker */}
              <div style={{
                position: 'absolute', top: 24, insetInlineStart: -22,
                background: 'var(--snb-yellow)', color: 'var(--snb-green-deep)',
                padding: '20px 26px', borderRadius: 18,
                boxShadow: '0 14px 32px rgba(218,184,76,.45)',
                transform: 'rotate(-6deg)'
              }}>
                <div style={{ fontSize: 10, fontWeight: 800, letterSpacing: '0.14em' }}>
                  {lang === 'ar' ? 'يبدأ من' : 'FROM'}
                </div>
                <div className="snb-display" style={{ fontSize: 56, lineHeight: 0.9, marginTop: 2 }}>
                  {v.from} <span style={{ fontSize: 22 }}>{t('sar')}</span>
                </div>
              </div>
              {/* Late-night chip */}
              <div style={{
                position: 'absolute', bottom: 24, insetInlineEnd: -16,
                padding: '12px 18px', borderRadius: 999,
                background: 'var(--snb-green-deep)', color: 'var(--snb-yellow)',
                display: 'inline-flex', alignItems: 'center', gap: 8,
                fontSize: 13, fontWeight: 800, letterSpacing: '0.1em',
                boxShadow: '0 12px 24px rgba(10,29,16,.3)'
              }}>
                <SnbIcon name="moon" size={14} />
                {lang === 'ar' ? 'حتى ٢ صباحاً' : 'OPEN TILL 2 AM'}
              </div>
            </div>
          </div>

        </div>
        <SnbCheckerStripe height={36} />
      </section>);

  }

  // ─── Mobile signature ─────────────────────────────────────────────────
  return (
    <section style={{
      background: 'var(--snb-cream)', color: 'var(--snb-green-deep)',
      position: 'relative', overflow: 'hidden'
    }}>
      {/* Top eyebrow + rating */}
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '20px 22px 16px',
        borderBottom: '1px solid var(--snb-line)'
      }}>
        <span className="snb-eyebrow" style={{ fontSize: 10 }}>
          {t('since')}
        </span>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 12, fontWeight: 700 }}>
          <SnbStars value={4} size={11} />
          <span>4.3 · 586</span>
        </span>
      </div>

      {/* Headline */}
      <div style={{ padding: '28px 22px 8px' }}>
        <h1 className="snb-display" style={{
          fontSize: lang === 'ar' ? 48 : 58, margin: 0,
          lineHeight: 0.9, letterSpacing: '-0.022em',
          color: 'var(--snb-green-deep)', textWrap: 'balance'
        }}>
          {t(v.h)}
        </h1>
        <p style={{ margin: '16px 0 0', fontSize: 15, lineHeight: 1.55, color: 'var(--snb-ink-soft)' }}>
          {t(v.sub)}
        </p>
      </div>

      {/* Product photo with overlaid sticker */}
      <div style={{ position: 'relative', padding: '24px 22px 0' }}>
        <div style={{
          aspectRatio: '1 / 0.95', borderRadius: 22, overflow: 'hidden',
          boxShadow: '0 22px 50px rgba(10,29,16,.22)'
        }}>
          <img src={v.img} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
        </div>
        {/* Yellow price sticker */}
        <div style={{
          position: 'absolute', top: 8, insetInlineStart: 10,
          background: 'var(--snb-yellow)', color: 'var(--snb-green-deep)',
          padding: '12px 14px', borderRadius: 14,
          boxShadow: '0 10px 22px rgba(218,184,76,.4)',
          transform: 'rotate(-6deg)'
        }}>
          <div style={{ fontSize: 8, fontWeight: 800, letterSpacing: '0.14em' }}>
            {lang === 'ar' ? 'يبدأ من' : 'FROM'}
          </div>
          <div className="snb-display" style={{ fontSize: 32, lineHeight: 0.9, marginTop: 2 }}>
            {v.from}<span style={{ fontSize: 13, marginInlineStart: 3 }}>{t('sar')}</span>
          </div>
        </div>
        {/* Late-night chip */}
        <div style={{
          position: 'absolute', bottom: 12, insetInlineEnd: 18,
          padding: '8px 14px', borderRadius: 999,
          background: 'var(--snb-green-deep)', color: 'var(--snb-yellow)',
          display: 'inline-flex', alignItems: 'center', gap: 6,
          fontSize: 10, fontWeight: 800, letterSpacing: '0.1em'
        }}>
          <SnbIcon name="moon" size={11} />
          {lang === 'ar' ? 'حتى ٢ صباحاً' : 'TILL 2 AM'}
        </div>
      </div>

      {/* CTAs */}
      <div style={{ padding: '24px 22px 24px', display: 'flex', gap: 10 }}>
        <a href={SNB_SOCIAL.hungerstation} target="_blank" rel="noopener noreferrer" className="snb-btn snb-btn-primary" style={{ padding: '16px 22px', fontSize: 15, flex: 1, justifyContent: 'center' }}>
          <SnbIcon name="bag" size={16} stroke={2.5} />
          {t('cta_order')}
        </a>
        <a href="menu.html" className="snb-btn snb-btn-ghost" style={{ padding: '16px 18px', fontSize: 14 }}>
          {t('cta_menu')}
        </a>
      </div>

      <SnbCheckerStripe height={28} />
    </section>);

}

// ─────────────────────────────────────────────────────────────────────────────
// Router — pick a style. Defaults to 'signature'.
// ─────────────────────────────────────────────────────────────────────────────
function SnbHeroRouter({ style = 'signature', variant = 'food', mode = 'mobile' }) {
  switch (style) {
    case 'poster':return <SnbHeroPoster variant={variant} mode={mode} />;
    case 'showcase':return <SnbHeroShowcase variant={variant} mode={mode} />;
    case 'editorial':return <SnbHeroEditorial variant={variant} mode={mode} />;
    case 'ad-poster':return <SnbHeroAdPoster variant={variant} mode={mode} />;
    case 'signature':
    default:return <SnbHeroSignature variant={variant} mode={mode} />;
  }
}

Object.assign(window, {
  SNB_HERO_VARIANTS,
  SnbHeroEditorial, SnbHeroPoster, SnbHeroShowcase, SnbHeroAdPoster, SnbHeroSignature,
  SnbHeroRouter
});