/* ─────────────────────────────────────────────────────────────────────────
   Three Guest-facing Menu Directions — use real profile data when available
   A. Editorial Folklor — dark + serif + warm gold (from brand palette)
   B. Modern Bento     — light, card-based, Apple energy
   C. Story Mode       — full-bleed scroll-snap, big hero per dish
   ───────────────────────────────────────────────────────────────────────── */

const { useState: usG } = React;

/* ── Profile helpers ────────────────────────────────────────────── */
function mfGuestProfile() {
  try {
    return JSON.parse(localStorage.getItem('factoryProfile') || 'null');
  } catch (_) { return null; }
}

/* Normalise an item regardless of wizard vs demo source format */
function mfNormItem(it) {
  const nameEs = typeof it.name === 'object' ? (it.name.es || '') : (it.name || '');
  const descEs = it.desc
    ? (typeof it.desc === 'object' ? (it.desc.es || '') : it.desc)
    : it.description
      ? (typeof it.description === 'object' ? (it.description.es || '') : it.description)
      : '';
  return {
    ...it,
    cat: it.cat || it.category || '',
    nameEs,
    descEs,
    emoji: it.emoji || '🍽️',
    tag: it.tag || (Array.isArray(it.tags) && it.tags[0]) || null,
  };
}

function mfNormCat(c) {
  const nameEs = typeof c.name === 'object' ? (c.name.es || '') : (c.name || '');
  return { ...c, nameEs };
}

/* PhoneFrame helper */
function GuestFrame({ children, bg = '#0F0A06' }) {
  return (
    <div className="phone" style={{ transform: 'scale(0.9)', transformOrigin: 'top center' }}>
      <div className="phone-inner" style={{ background: bg }}>
        {children}
      </div>
    </div>
  );
}

/* ═══════════════════════════════════════════════════════════
   A. EDITORIAL FOLKLOR — uses brand palette
   ═══════════════════════════════════════════════════════════ */
function GuestEditorial() {
  const profile = mfGuestProfile();
  const rawCats  = profile?.menu?.categories || window.MF_MENU.categories;
  const rawItems = profile?.menu?.items       || window.MF_MENU.items;
  const cats  = rawCats.map(mfNormCat);
  const items = rawItems.map(mfNormItem);

  const pal = profile?.brand?.palette;
  const p = {
    bg:   pal?.bg   || '#0F0A06',
    s1:   pal?.s1   || '#1A130A',
    gold: pal?.gold || '#D49A45',
    tx:   pal?.tx   || '#F0E8D8',
    mu:   pal?.mu   || '#A09070',
  };

  const brandName = profile
    ? (typeof profile.brand?.name === 'object' ? profile.brand.name.es : profile.brand?.name) || 'Mi Restaurante'
    : window.MF_BRAND?.name || 'Mi Restaurante';
  const taglineStr = profile
    ? (typeof profile.brand?.tagline === 'object' ? profile.brand.tagline.es : profile.brand?.tagline) || ''
    : window.MF_BRAND?.tagline?.es || '';

  const [active, setActive] = usG(cats[0]?.id || '');
  const shown = items.filter(i => i.cat === active);

  return (
    <GuestFrame bg={p.bg}>
      <div style={{ position: 'absolute', inset: 0, color: p.tx, fontFamily: 'var(--sans)', overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
        <StatusBar light color={p.tx} />

        {/* Header */}
        <div style={{ padding: '4px 22px 14px', textAlign: 'center', borderBottom: `1px solid ${p.gold}20`, flexShrink: 0 }}>
          <div style={{ fontSize: 9, letterSpacing: '0.32em', color: p.gold, fontWeight: 600 }}>{taglineStr.toUpperCase() || 'MENÚ DIGITAL'}</div>
          <div className="serif italic" style={{ fontSize: 22, lineHeight: 1.05, marginTop: 4, color: p.tx }}>{brandName}</div>
          <div style={{ fontSize: 9, letterSpacing: '0.22em', color: p.mu, marginTop: 6 }}>MESA 1</div>
        </div>

        {/* Category tabs */}
        <div style={{ display: 'flex', gap: 14, padding: '12px 22px 0', flexShrink: 0, overflowX: 'auto' }}>
          {cats.map(c => (
            <button key={c.id} onClick={() => setActive(c.id)} style={{
              fontSize: 11, color: active === c.id ? p.gold : p.mu, fontWeight: 600,
              borderBottom: active === c.id ? `1.5px solid ${p.gold}` : 'none',
              paddingBottom: 6, letterSpacing: '0.04em', whiteSpace: 'nowrap',
            }}>{c.nameEs}</button>
          ))}
        </div>

        {/* Items */}
        <div style={{ flex: 1, overflowY: 'auto', padding: '12px 18px 80px', display: 'flex', flexDirection: 'column', gap: 12 }}>
          {(shown.length ? shown : items.slice(0, 5)).map(it => (
            <div key={it.id} style={{ paddingBottom: 12, borderBottom: `1px solid ${p.gold}15` }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                <div className="serif italic" style={{ fontSize: 17, color: p.tx, maxWidth: '80%' }}>{it.nameEs}</div>
                <span style={{ color: p.gold, fontSize: 13, fontWeight: 700 }}>${it.price}</span>
              </div>
              {it.tag && <div style={{ fontSize: 8, color: p.gold, letterSpacing: '0.2em', fontWeight: 700, marginTop: 3 }}>★ {String(it.tag).toUpperCase()}</div>}
              <div style={{ fontSize: 11, color: p.mu, marginTop: 6, lineHeight: 1.4 }}>{it.descEs}</div>
            </div>
          ))}
        </div>

        {/* Cart bar */}
        <div style={{ position: 'absolute', left: 14, right: 14, bottom: 16, padding: '10px 16px', background: `${p.s1}ee`, backdropFilter: 'blur(12px)', border: `1px solid ${p.gold}20`, borderRadius: 16, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div>
            <div style={{ fontSize: 9, color: p.mu, letterSpacing: '0.18em' }}>TU PEDIDO</div>
            <div style={{ fontSize: 14, color: p.tx, fontWeight: 600, marginTop: 2 }}>0 platos · $0</div>
          </div>
          <div style={{ background: p.gold, color: p.bg, padding: '8px 16px', borderRadius: 999, fontSize: 12, fontWeight: 700 }}>Ver carrito →</div>
        </div>
      </div>
    </GuestFrame>
  );
}

/* ═══════════════════════════════════════════════════════════
   B. MODERN BENTO — light UI, accent from brand palette
   ═══════════════════════════════════════════════════════════ */
function GuestBento() {
  const profile = mfGuestProfile();
  const rawItems = profile?.menu?.items || window.MF_MENU.items;
  const items = rawItems.map(mfNormItem);

  const accent = profile?.brand?.palette?.gold || '#FF6B35';
  const brandName = profile
    ? (typeof profile.brand?.name === 'object' ? profile.brand.name.es : profile.brand?.name) || 'Mi Restaurante'
    : window.MF_BRAND?.name || 'Mi Restaurante';

  const colors = ['#FFE9D6','#DDE8DD','#FFF4D6','#F1ECE0','#F5DFA0','#FFE9D6','#DDE8DD','#FFF4D6','#F1ECE0','#F5DFA0'];

  return (
    <GuestFrame bg="#FBF9F4">
      <div style={{ position: 'absolute', inset: 0, color: '#0A0908', fontFamily: 'var(--sans)', overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
        <StatusBar />
        <div style={{ padding: '4px 18px 14px', flexShrink: 0 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
            <div>
              <div style={{ fontSize: 10, color: '#7A7268', letterSpacing: '0.16em', fontWeight: 600 }}>MESA 1 · HOY</div>
              <div className="serif italic" style={{ fontSize: 24, lineHeight: 1.05, marginTop: 4 }}>Buenas noches.</div>
              <div style={{ fontSize: 12, color: '#7A7268', marginTop: 2 }}>{brandName} · ¿Qué se te antoja?</div>
            </div>
            <div style={{ width: 34, height: 34, borderRadius: '50%', background: '#0A0908', color: '#fff', display: 'grid', placeItems: 'center', fontSize: 14 }}>♡</div>
          </div>

          {/* Search */}
          <div style={{ marginTop: 12, padding: '8px 12px', background: '#fff', border: '1px solid #ECE6D8', borderRadius: 12, display: 'flex', alignItems: 'center', gap: 8 }}>
            <span style={{ color: '#7A7268', fontSize: 13 }}>⌕</span>
            <span style={{ fontSize: 12, color: '#7A7268' }}>Busca un platillo…</span>
          </div>
        </div>

        {/* Featured hero — first item */}
        {items[0] && (
          <div style={{ padding: '0 14px', flexShrink: 0 }}>
            <div style={{ background: `linear-gradient(135deg, ${accent}, ${accent}99)`, color: '#fff', padding: 14, borderRadius: 16, display: 'flex', gap: 12, alignItems: 'center' }}>
              <div style={{ width: 52, height: 52, borderRadius: 14, background: 'rgba(255,255,255,0.18)', display: 'grid', placeItems: 'center', fontSize: 26 }}>{items[0].emoji}</div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 8, opacity: 0.85, letterSpacing: '0.18em', fontWeight: 700 }}>★ DESTACADO</div>
                <div className="serif italic" style={{ fontSize: 17, lineHeight: 1.05, marginTop: 2 }}>{items[0].nameEs}</div>
              </div>
              <div style={{ fontSize: 16, fontWeight: 700 }}>${items[0].price}</div>
            </div>
          </div>
        )}

        {/* Bento grid */}
        <div style={{ flex: 1, overflowY: 'auto', padding: '12px 14px 80px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
          {items.slice(1, 9).map((it, i) => (
            <div key={it.id} style={{ background: colors[i % colors.length], borderRadius: 14, padding: 12, position: 'relative', overflow: 'hidden', aspectRatio: i % 3 === 0 ? '1' : '0.85' }}>
              <div style={{ position: 'absolute', top: 8, right: 8, fontSize: 22 }}>{it.emoji}</div>
              <div style={{ position: 'absolute', bottom: 10, left: 12, right: 12 }}>
                <div className="serif italic" style={{ fontSize: 12, lineHeight: 1.05, color: '#0A0908' }}>{it.nameEs}</div>
                <div style={{ marginTop: 4, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <span style={{ fontSize: 11, color: '#0A0908', fontWeight: 700 }}>${it.price}</span>
                  <span style={{ width: 20, height: 20, borderRadius: '50%', background: '#0A0908', color: '#fff', display: 'grid', placeItems: 'center', fontSize: 13, lineHeight: 1, fontWeight: 700 }}>+</span>
                </div>
              </div>
            </div>
          ))}
        </div>

        {/* Cart bar */}
        <div style={{ position: 'absolute', left: 14, right: 14, bottom: 16, padding: '10px 16px', background: '#0A0908', color: '#fff', borderRadius: 16, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <span style={{ width: 24, height: 24, borderRadius: '50%', background: accent, display: 'grid', placeItems: 'center', fontSize: 11, fontWeight: 700 }}>0</span>
            <div style={{ fontSize: 13, fontWeight: 600 }}>$0.00</div>
          </div>
          <div style={{ background: accent, padding: '8px 14px', borderRadius: 999, fontSize: 12, fontWeight: 700 }}>Ver carrito →</div>
        </div>
      </div>
    </GuestFrame>
  );
}

/* ═══════════════════════════════════════════════════════════
   C. STORY MODE — full-bleed, swipe per dish
   ═══════════════════════════════════════════════════════════ */
function GuestStory() {
  const profile = mfGuestProfile();
  const rawItems = profile?.menu?.items || window.MF_MENU.items;
  const items = rawItems.map(mfNormItem);

  const accentColor = profile?.brand?.palette?.gold || '#FF6B35';

  const [idx, setIdx] = usG(0);
  const it = items[idx] || items[0];
  if (!it) return null;

  /* Per-category gradients — derive from accent if possible */
  const bgs = {
    entradas: 'linear-gradient(180deg, #2E5F4E 0%, #0E3A2E 100%)',
    fuertes:  'linear-gradient(180deg, #E04E1F 0%, #8A2818 100%)',
    postres:  'linear-gradient(180deg, #C8923A 0%, #5A4015 100%)',
    bebidas:  'linear-gradient(180deg, #4A2E5A 0%, #1A0F25 100%)',
  };
  const fallback = `linear-gradient(180deg, ${accentColor} 0%, #1a1a1a 100%)`;
  const bg = bgs[it.cat] || fallback;

  return (
    <GuestFrame bg="#000">
      <div style={{ position: 'absolute', inset: 0, color: '#fff', fontFamily: 'var(--sans)', overflow: 'hidden', background: bg }}>
        <StatusBar light />

        {/* Top bar */}
        <div style={{ position: 'absolute', top: 50, left: 0, right: 0, display: 'flex', justifyContent: 'space-between', padding: '0 20px', zIndex: 5 }}>
          <button style={{ width: 34, height: 34, borderRadius: '50%', background: 'rgba(0,0,0,0.3)', backdropFilter: 'blur(12px)', display: 'grid', placeItems: 'center', color: '#fff', fontSize: 16 }}>‹</button>
          <div style={{ padding: '8px 14px', borderRadius: 999, background: 'rgba(0,0,0,0.3)', backdropFilter: 'blur(12px)', fontSize: 11, fontWeight: 600 }}>{idx + 1} / {items.length}</div>
          <button style={{ width: 34, height: 34, borderRadius: '50%', background: 'rgba(0,0,0,0.3)', backdropFilter: 'blur(12px)', display: 'grid', placeItems: 'center', color: '#fff', fontSize: 14 }}>♡</button>
        </div>

        {/* Big emoji */}
        <div style={{ position: 'absolute', top: 90, left: '50%', transform: 'translateX(-50%)', width: 220, height: 220, borderRadius: '50%', background: 'radial-gradient(circle, rgba(255,255,255,0.18), transparent 70%)', display: 'grid', placeItems: 'center', fontSize: 130, filter: 'drop-shadow(0 20px 40px rgba(0,0,0,0.4))' }}>{it.emoji}</div>

        {/* Bottom card */}
        <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, background: '#FBF9F4', color: '#0A0908', borderTopLeftRadius: 32, borderTopRightRadius: 32, padding: '24px 22px 18px' }}>
          <div style={{ display: 'flex', gap: 6, marginBottom: 10 }}>
            {it.tag && <span style={{ fontSize: 9, padding: '4px 10px', borderRadius: 999, background: '#0A0908', color: '#fff', fontWeight: 700, letterSpacing: '0.08em' }}>★ {String(it.tag).toUpperCase()}</span>}
            {it.cat && <span style={{ fontSize: 9, padding: '4px 10px', borderRadius: 999, background: 'transparent', border: '1px solid #ECE6D8', color: '#7A7268', fontWeight: 700, letterSpacing: '0.06em' }}>{it.cat.toUpperCase()}</span>}
          </div>

          <div className="serif italic" style={{ fontSize: 26, lineHeight: 1.0, color: '#0A0908' }}>{it.nameEs}</div>
          <div style={{ fontSize: 12, color: '#7A7268', marginTop: 8, lineHeight: 1.45, display: '-webkit-box', WebkitLineClamp: 3, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>{it.descEs}</div>

          <div style={{ marginTop: 14, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <div>
              <div style={{ fontSize: 10, color: '#7A7268', letterSpacing: '0.14em' }}>PRECIO</div>
              <div className="serif italic" style={{ fontSize: 26, lineHeight: 1, color: accentColor, fontWeight: 400, marginTop: 2 }}>${it.price}</div>
            </div>
            <button style={{ background: accentColor, color: '#fff', padding: '13px 20px', borderRadius: 999, fontWeight: 700, fontSize: 13, display: 'flex', alignItems: 'center', gap: 8 }}>
              <span style={{ width: 18, height: 18, borderRadius: '50%', background: '#fff', color: accentColor, display: 'grid', placeItems: 'center', fontSize: 12, lineHeight: 1 }}>+</span>
              Agregar
            </button>
          </div>

          {/* Dots */}
          <div style={{ marginTop: 16, display: 'flex', justifyContent: 'center', gap: 4 }}>
            {items.slice(0, 5).map((_, i) => (
              <button key={i} onClick={() => setIdx(i)} style={{ width: i === idx ? 18 : 5, height: 5, borderRadius: 999, background: i === idx ? '#0A0908' : '#D9D2C2', transition: 'all 240ms' }} />
            ))}
          </div>
        </div>

        {/* Prev / Next */}
        <button onClick={() => setIdx((idx + items.length - 1) % items.length)} style={{ position: 'absolute', left: 10, top: '40%', width: 32, height: 32, borderRadius: '50%', background: 'rgba(0,0,0,0.3)', backdropFilter: 'blur(12px)', color: '#fff', fontSize: 14 }}>‹</button>
        <button onClick={() => setIdx((idx + 1) % items.length)} style={{ position: 'absolute', right: 10, top: '40%', width: 32, height: 32, borderRadius: '50%', background: 'rgba(0,0,0,0.3)', backdropFilter: 'blur(12px)', color: '#fff', fontSize: 14 }}>›</button>
      </div>
    </GuestFrame>
  );
}

/* ═══════════════════════════════════════════════════════════
   D. AR GLASS — dark atmospheric, floating glass panels
   ═══════════════════════════════════════════════════════════ */
function GuestAR() {
  const profile = mfGuestProfile();
  const rawCats  = profile?.menu?.categories || window.MF_MENU.categories;
  const rawItems = profile?.menu?.items       || window.MF_MENU.items;
  const cats  = rawCats.map(mfNormCat);
  const items = rawItems.map(mfNormItem);

  const pal = profile?.brand?.palette;
  const gold = pal?.gold || '#D49A45';
  const brandName = profile
    ? (typeof profile.brand?.name === 'object' ? profile.brand.name.es : profile.brand?.name) || 'Mi Restaurante'
    : window.MF_BRAND?.name || 'Mi Restaurante';
  const taglineStr = profile
    ? (typeof profile.brand?.tagline === 'object' ? profile.brand.tagline.es : profile.brand?.tagline) || ''
    : window.MF_BRAND?.tagline?.es || '';

  const [active, setActive] = usG(cats[0]?.id || '');
  const shown = items.filter(i => i.cat === active);

  const glass = (extra = {}) => ({
    background: 'rgba(255,255,255,0.05)',
    backdropFilter: 'blur(20px)',
    WebkitBackdropFilter: 'blur(20px)',
    border: `1px solid ${gold}26`,
    borderRadius: 14,
    ...extra,
  });

  return (
    <GuestFrame bg="#060504">
      <div style={{ position: 'absolute', inset: 0, fontFamily: 'var(--sans)', color: '#F0E8D8', overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>

        {/* Ambient top glow */}
        <div style={{ position: 'absolute', top: -40, left: '15%', right: '15%', height: 180, background: `radial-gradient(ellipse, ${gold}14 0%, transparent 70%)`, pointerEvents: 'none', zIndex: 0 }} />

        <StatusBar light color="#F0E8D8" />

        {/* Header glass panel */}
        <div style={{ ...glass({ borderRadius: 14, boxShadow: `0 0 28px rgba(212,154,69,0.06)` }), margin: '6px 12px 0', padding: '10px 16px', flexShrink: 0, textAlign: 'center', position: 'relative', zIndex: 1 }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, marginBottom: 5 }}>
            <div style={{ width: 5, height: 5, borderRadius: '50%', background: '#34D399', boxShadow: '0 0 8px #34D399' }} />
            <span style={{ fontFamily: 'var(--mono)', fontSize: 7, letterSpacing: '0.26em', color: 'rgba(240,232,216,0.38)' }}>MESA 01 · SESIÓN ACTIVA</span>
          </div>
          <div className="serif italic" style={{ fontSize: 20, lineHeight: 1.1 }}>{brandName}</div>
          {taglineStr && (
            <div style={{ fontFamily: 'var(--mono)', fontSize: 7, letterSpacing: '0.22em', color: `${gold}AA`, marginTop: 4 }}>{taglineStr.toUpperCase()}</div>
          )}
        </div>

        {/* Category pill tabs */}
        <div style={{ display: 'flex', gap: 6, padding: '10px 12px', flexShrink: 0, overflowX: 'auto', zIndex: 1 }}>
          {cats.map(c => (
            <button key={c.id} onClick={() => setActive(c.id)} style={{
              padding: '5px 12px', borderRadius: 999, fontSize: 10, fontWeight: 600,
              letterSpacing: '0.06em', whiteSpace: 'nowrap',
              background: active === c.id ? `${gold}22` : 'rgba(255,255,255,0.04)',
              border: `1px solid ${active === c.id ? `${gold}55` : 'rgba(255,255,255,0.07)'}`,
              backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)',
              color: active === c.id ? gold : 'rgba(240,232,216,0.38)',
              boxShadow: active === c.id ? `0 0 10px ${gold}1A` : 'none',
              transition: 'all 240ms cubic-bezier(0.2,0.7,0.3,1)',
            }}>{c.nameEs}</button>
          ))}
        </div>

        {/* Item cards */}
        <div style={{ flex: 1, overflowY: 'auto', padding: '0 12px 84px', display: 'flex', flexDirection: 'column', gap: 8, zIndex: 1 }}>
          {(shown.length ? shown : items.slice(0, 5)).map(it => (
            <div key={it.id} style={{ ...glass(), padding: '11px 13px', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 10, position: 'relative' }}>
              <div style={{ flex: 1, minWidth: 0 }}>
                {it.tag && (
                  <div style={{ fontFamily: 'var(--mono)', fontSize: 7, letterSpacing: '0.24em', color: gold, marginBottom: 4 }}>◆ {String(it.tag).toUpperCase()}</div>
                )}
                <div className="serif italic" style={{ fontSize: 15, lineHeight: 1.2, color: '#F0E8D8' }}>{it.nameEs}</div>
                {it.descEs && (
                  <div style={{ fontSize: 10, color: 'rgba(240,232,216,0.42)', marginTop: 5, lineHeight: 1.45, display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>{it.descEs}</div>
                )}
              </div>
              <div style={{ flexShrink: 0, display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 6 }}>
                <div style={{ fontFamily: 'var(--mono)', fontSize: 14, color: gold, fontWeight: 700 }}>${it.price}</div>
                <button style={{ width: 22, height: 22, borderRadius: '50%', border: `1px solid ${gold}55`, color: gold, background: `${gold}11`, fontSize: 14, lineHeight: 1, display: 'grid', placeItems: 'center' }}>+</button>
              </div>
            </div>
          ))}
        </div>

        {/* Cart bar */}
        <div style={{ position: 'absolute', left: 12, right: 12, bottom: 12, padding: '10px 14px', ...glass({ boxShadow: `0 0 24px rgba(212,154,69,0.1), 0 8px 32px rgba(0,0,0,0.6)` }), display: 'flex', justifyContent: 'space-between', alignItems: 'center', zIndex: 2 }}>
          <div>
            <div style={{ fontFamily: 'var(--mono)', fontSize: 7, letterSpacing: '0.22em', color: 'rgba(240,232,216,0.32)' }}>TU PEDIDO</div>
            <div style={{ fontSize: 13, fontWeight: 600, marginTop: 2 }}>0 platos · $0</div>
          </div>
          <button style={{ padding: '7px 14px', borderRadius: 999, fontSize: 11, fontWeight: 700, background: `${gold}1A`, border: `1px solid ${gold}55`, color: gold, boxShadow: `0 0 12px ${gold}18` }}>Ver carrito →</button>
        </div>
      </div>
    </GuestFrame>
  );
}

window.MFGuestEditorial = GuestEditorial;
window.MFGuestBento     = GuestBento;
window.MFGuestStory     = GuestStory;
window.MFGuestAR        = GuestAR;