// Pachi — Responsive web version (PC + Mobile)
// Single page that adapts: desktop = 3-column (nav / main / aside), mobile = stacked + bottom-nav.

const { useState: useStateR, useEffect: useEffectR } = React;

// ─── viewport hook ───
function useViewport() {
  const get = () => (typeof window !== 'undefined' ? window.innerWidth : 1280);
  const [w, setW] = useStateR(get);
  useEffectR(() => {
    const on = () => setW(window.innerWidth);
    window.addEventListener('resize', on);
    return () => window.removeEventListener('resize', on);
  }, []);
  return {
    w,
    isMobile: w < 768,
    isTablet: w >= 768 && w < 1100,
    isDesktop: w >= 1100,
  };
}

// ─── Top bar (responsive) ───
function TopBar({ nav, current, onMenuOpen }) {
  const vp = useViewport();
  const navItems = [
    { id: 'home',      label: 'ホーム' },
    { id: 'machine',   label: '機種で遊ぶ' },
    { id: 'ranking',   label: 'ランキング' },
    { id: 'eventlist', label: 'イベント' },
    { id: 'hall',      label: 'ホール検索' },
  ];
  return (
    <div style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: 'linear-gradient(180deg, #1c0608 0%, #0a0303 100%)',
      borderBottom: `1px solid ${PACHI_TOKENS.gold}`,
      boxShadow: '0 4px 14px rgba(0,0,0,0.7), 0 0 24px rgba(224,37,43,0.18)',
    }}>
      <div style={{
        maxWidth: 1440, margin: '0 auto',
        height: vp.isMobile ? 56 : 68,
        display: 'flex', alignItems: 'center',
        padding: vp.isMobile ? '0 14px' : '0 28px',
        gap: vp.isMobile ? 10 : (vp.isTablet ? 12 : 22),
      }}>
        {/* Logo */}
        <div onClick={() => nav.go('home')} style={{
          display: 'flex', alignItems: 'center', gap: 10, cursor: 'pointer',
          flexShrink: 0,
        }}>
          <div style={{
            width: vp.isMobile ? 32 : 40, height: vp.isMobile ? 32 : 40,
            display: 'grid', placeItems: 'center',
            background: 'linear-gradient(135deg, #f5c542, #8a6914)',
            color: '#1a0606', fontWeight: 900, fontSize: vp.isMobile ? 16 : 20,
            boxShadow: '0 0 10px rgba(245,197,66,0.5)',
            fontFamily: '"Bebas Neue"',
          }}>P</div>
          <div style={{
            color: PACHI_TOKENS.gold,
            fontSize: vp.isMobile ? 18 : 24, fontWeight: 900, letterSpacing: 4,
            fontFamily: '"Bebas Neue"',
            textShadow: '0 0 8px rgba(245,197,66,0.5)',
          }}>PACHI</div>
        </div>

        {/* Desktop nav */}
        {!vp.isMobile && (
          <nav style={{ display: 'flex', gap: 4, flex: 1 }}>
            {navItems.map(it => {
              const on = it.id === current;
              return (
                <button key={it.id} onClick={() => nav.go(it.id)} style={{
                  background: on
                    ? 'linear-gradient(180deg, #2a0d0e 0%, #6a0509 100%)'
                    : 'transparent',
                  color: on ? PACHI_TOKENS.gold : PACHI_TOKENS.textMid,
                  border: 'none',
                  borderTop: on ? `1px solid ${PACHI_TOKENS.gold}` : '1px solid transparent',
                  borderBottom: on ? `1px solid ${PACHI_TOKENS.gold}` : '1px solid transparent',
                  padding: vp.isTablet ? '8px 10px' : '8px 16px', fontSize: 13, fontWeight: 900,
                  letterSpacing: vp.isTablet ? 0.5 : 1.5, cursor: 'pointer', whiteSpace: 'nowrap',
                  fontFamily: '"Noto Sans JP", system-ui',
                  textShadow: on ? '0 0 6px rgba(245,197,66,0.5)' : 'none',
                  boxShadow: on ? 'inset 0 0 16px rgba(224,37,43,0.3)' : 'none',
                }}>{it.label}</button>
              );
            })}
          </nav>
        )}

        {/* Search: inline box on desktop, icon button on tablet */}
        {vp.isDesktop && (
          <div onClick={() => nav.go('search')} style={{
            display: 'flex', alignItems: 'center', gap: 8, cursor: 'pointer',
            background: 'linear-gradient(180deg, #1a0708 0%, #050202 100%)',
            border: `1px solid ${PACHI_TOKENS.goldDim}`,
            padding: '8px 14px', minWidth: 140, flexShrink: 1,
          }}>
            <Icon name="search" size={16} color={PACHI_TOKENS.gold} />
            <span style={{ color: PACHI_TOKENS.textDim, fontSize: 13,
              fontFamily: '"Noto Sans JP", system-ui' }}>店舗・機種・駅で検索</span>
          </div>
        )}
        {vp.isTablet && (
          <button onClick={() => nav.go('search')} style={iconBtnR} aria-label="検索"><Icon name="search" size={18} /></button>
        )}

        {/* Right actions */}
        {vp.isMobile ? (
          <>
            <div style={{ flex: 1 }} />
            <button onClick={() => nav.go('search')} style={iconBtnR} aria-label="検索"><Icon name="search" size={18} /></button>
            <button onClick={onMenuOpen} style={iconBtnR} aria-label="メニュー"><Icon name="menu" size={18} /></button>
          </>
        ) : (
          <button onClick={() => nav.go('mypage')} style={{
            display: 'flex', alignItems: 'center', gap: 8,
            background: 'transparent',
            border: `1px solid ${PACHI_TOKENS.gold}`,
            color: PACHI_TOKENS.gold,
            padding: '7px 14px', fontSize: 12, fontWeight: 900,
            cursor: 'pointer', fontFamily: '"Noto Sans JP", system-ui',
            letterSpacing: 1, whiteSpace: 'nowrap', flexShrink: 0,
          }}>
            <span style={{
              width: 22, height: 22, display: 'grid', placeItems: 'center',
              borderRadius: '50%',
              background: 'linear-gradient(135deg, #f5c542, #8a6914)',
              color: '#1a0606', fontSize: 11, fontWeight: 900,
            }}>P</span>
            マイページ
          </button>
        )}
      </div>
    </div>
  );
}
const iconBtnR = {
  background: 'transparent', border: `1px solid ${PACHI_TOKENS.goldDim}`,
  color: PACHI_TOKENS.gold, width: 40, height: 40, padding: 0,
  cursor: 'pointer', flexShrink: 0, display: 'grid', placeItems: 'center',
};

// ─── Mobile bottom nav (responsive variant) ───
function MobileBottomNav({ current, nav }) {
  const tabs = [
    { id: 'home',    label: 'ホーム',    glyph: 'home' },
    { id: 'machine', label: '遊ぶ',      glyph: 'grid' },
    { id: 'ranking', label: 'ランキング', glyph: 'chart' },
    { id: 'hall',    label: 'ホール',    glyph: 'search' },
    { id: 'mypage',  label: 'マイページ', glyph: 'user' },
  ];
  return (
    <div style={{
      position: 'fixed', bottom: 0, left: 0, right: 0, zIndex: 50,
      background: 'linear-gradient(180deg, #15090a 0%, #050202 100%)',
      borderTop: `2px solid ${PACHI_TOKENS.gold}`,
      boxShadow: '0 -4px 14px rgba(0,0,0,0.7), 0 -2px 16px rgba(224,37,43,0.18)',
      display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', height: 62,
      paddingBottom: 'env(safe-area-inset-bottom, 0)',
    }}>
      {tabs.map(t => {
        const on = t.id === current;
        return (
          <button key={t.id} onClick={() => nav.go(t.id)} style={{
            background: on
              ? 'radial-gradient(80% 100% at 50% 100%, rgba(224,37,43,0.7) 0%, rgba(224,37,43,0) 70%)'
              : 'transparent',
            border: 'none', borderTop: on ? `2px solid ${PACHI_TOKENS.gold}` : '2px solid transparent',
            marginTop: -2, color: on ? PACHI_TOKENS.gold : PACHI_TOKENS.textDim,
            display: 'flex', flexDirection: 'column', alignItems: 'center',
            justifyContent: 'center', gap: 3, cursor: 'pointer', padding: 0,
            fontFamily: '"Noto Sans JP", system-ui',
          }}>
            <Icon name={t.glyph} size={20}
              style={{ filter: on ? 'drop-shadow(0 0 5px rgba(245,197,66,0.7))' : 'none' }} />
            <span style={{ fontSize: 10.5, fontWeight: 700 }}>{t.label}</span>
          </button>
        );
      })}
    </div>
  );
}

// ─── Mobile drawer ───
function MobileDrawer({ open, onClose, nav }) {
  const items = [
    { k: 'ホーム',         route: 'home' },
    { k: 'ホール検索',     route: 'hall' },
    { k: '機種一覧',       route: 'machine' },
    { k: 'ランキング',     route: 'ranking' },
    { k: 'イベント一覧',   route: 'eventlist' },
    { k: 'マイページ',     route: 'mypage' },
    { k: '検索',           route: 'search' },
  ];
  if (!open) return null;
  return (
    <div onClick={onClose} style={{
      position: 'fixed', inset: 0, zIndex: 100,
      background: 'rgba(0,0,0,0.7)', backdropFilter: 'blur(4px)',
    }}>
      <div onClick={e => e.stopPropagation()} style={{
        position: 'absolute', top: 0, right: 0, bottom: 0,
        width: '78%', maxWidth: 320,
        background: 'linear-gradient(180deg, #1a0708, #050202)',
        borderLeft: `1px solid ${PACHI_TOKENS.gold}`,
        boxShadow: '-8px 0 30px rgba(0,0,0,0.8), -2px 0 20px rgba(224,37,43,0.2)',
        padding: '18px 16px',
      }}>
        <div style={{ display: 'flex', justifyContent: 'space-between',
          alignItems: 'center', marginBottom: 18 }}>
          <span style={{
            color: PACHI_TOKENS.gold, fontSize: 22, fontWeight: 900,
            fontFamily: '"Bebas Neue"', letterSpacing: 4,
            textShadow: '0 0 6px rgba(245,197,66,0.5)',
          }}>MENU</span>
          <button onClick={onClose} style={{ ...iconBtnR }} aria-label="閉じる"><Icon name="close" size={16} /></button>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 0,
          border: `1px solid ${PACHI_TOKENS.gold}` }}>
          {items.map((row, i) => (
            <button key={row.k} onClick={() => { onClose(); nav.go(row.route); }} style={{
              display: 'flex', alignItems: 'center', gap: 10,
              padding: '14px 14px', cursor: 'pointer',
              background: 'transparent', border: 'none',
              borderTop: i === 0 ? 'none' : `1px solid ${PACHI_TOKENS.hairline}`,
              color: PACHI_TOKENS.textHi, fontSize: 13, fontWeight: 700,
              fontFamily: '"Noto Sans JP", system-ui', textAlign: 'left',
            }}>
              <span style={{ width: 6, height: 6, background: PACHI_TOKENS.gold, flexShrink: 0, boxShadow: '0 0 4px rgba(245,197,66,0.6)' }} />
              <span style={{ flex: 1 }}>{row.k}</span>
              <span style={{ color: PACHI_TOKENS.gold }}>›</span>
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}

// ─── Footer ───
function SiteFooter() {
  return (
    <div style={{
      marginTop: 60,
      borderTop: `1px solid ${PACHI_TOKENS.gold}`,
      background: 'linear-gradient(180deg, #0a0404, #050202)',
      padding: '32px 0 24px',
    }}>
      <div style={{
        maxWidth: 1440, margin: '0 auto', padding: '0 28px',
        display: 'grid', gridTemplateColumns: 'minmax(200px,1fr) repeat(3, minmax(0,1fr))',
        gap: 32,
      }}>
        <div>
          <div style={{ color: PACHI_TOKENS.gold, fontSize: 22, fontWeight: 900,
            letterSpacing: 4, fontFamily: '"Bebas Neue"',
            textShadow: '0 0 8px rgba(245,197,66,0.5)' }}>PACHI</div>
          <div style={{ color: PACHI_TOKENS.textDim, fontSize: 11, marginTop: 6,
            fontFamily: '"Noto Sans JP", system-ui', lineHeight: 1.7 }}>
            パチンコ・パチスロ専門の<br/>
            データ&イベント情報サイト
          </div>
        </div>
        {[
          { h: 'SERVICE', items: ['ホール検索', '機種一覧', 'ランキング', 'イベント'] },
          { h: 'ABOUT',   items: ['運営会社', '利用規約', 'プライバシー', 'お問い合わせ'] },
          { h: 'FOLLOW',  items: ['Twitter / X', 'YouTube', 'Instagram', 'LINE'] },
        ].map(col => (
          <div key={col.h}>
            <div style={{ color: PACHI_TOKENS.gold, fontSize: 11, fontWeight: 900,
              letterSpacing: 3, marginBottom: 12,
              fontFamily: '"Bebas Neue"' }}>{col.h}</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {col.items.map(t => (
                <span key={t} style={{ color: PACHI_TOKENS.textMid, fontSize: 12,
                  fontFamily: '"Noto Sans JP", system-ui', cursor: 'pointer' }}>{t}</span>
              ))}
            </div>
          </div>
        ))}
      </div>
      <div style={{
        maxWidth: 1440, margin: '24px auto 0', padding: '14px 28px 0',
        borderTop: `1px solid ${PACHI_TOKENS.hairline}`,
        display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 8,
        color: PACHI_TOKENS.textDim, fontSize: 10,
        fontFamily: '"Noto Sans JP", system-ui',
      }}>
        <span>© 2026 PACHI Inc. All rights reserved.</span>
        <span>20歳未満の方は遊技できません。のめり込みに注意。</span>
      </div>
    </div>
  );
}

// ─── Aside (right rail on desktop) ───
function AsideRail({ nav }) {
  const D = window.PACHI_DATA;
  return (
    <aside style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
      {/* Quick links card */}
      <div>
        <SidebarHeading kicker="QUICK" title="クイックメニュー" />
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 6,
        }}>
          {D.quickMenu.slice(0, 8).map(it => (
            <button key={it.id} onClick={() => nav.go('hall')} style={{
              background: 'radial-gradient(120% 100% at 50% 0%, #2a0e0f 0%, #0a0304 70%)',
              border: `1px solid ${PACHI_TOKENS.goldDim}`,
              padding: '8px 4px 6px', cursor: 'pointer',
              display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3,
            }}>
              <img src={it.icon} alt="" style={{
                width: 32, height: 32, objectFit: 'contain',
                filter: 'drop-shadow(0 0 4px rgba(245,197,66,0.4))',
              }} />
              <span style={{ color: PACHI_TOKENS.textHi, fontSize: 10, fontWeight: 700,
                fontFamily: '"Noto Sans JP", system-ui', textAlign: 'center',
                lineHeight: 1.1 }}>{it.label}</span>
            </button>
          ))}
        </div>
      </div>

      {/* Trending now */}
      <div>
        <SidebarHeading kicker="TRENDING" title="人気の検索ワード" />
        <GoldFrame>
          {['北斗の拳','モンキーターン','バジリスク絆2','バイオハザード','GOD EATER','新宿','池袋'].map((t, i) => (
            <div key={t} onClick={() => nav.go('search')} style={{
              display: 'flex', alignItems: 'center', gap: 10, padding: '8px 12px',
              borderTop: i === 0 ? 'none' : `1px solid ${PACHI_TOKENS.hairline}`,
              cursor: 'pointer',
            }}>
              <span style={{
                color: i < 3 ? PACHI_TOKENS.red : PACHI_TOKENS.textDim,
                fontSize: 13, fontWeight: 900, fontFamily: '"Bebas Neue"',
                width: 16, textAlign: 'center',
              }}>{i + 1}</span>
              <span style={{ flex: 1, color: PACHI_TOKENS.textHi, fontSize: 12,
                fontFamily: '"Noto Sans JP", system-ui' }}>{t}</span>
              <span style={{ color: PACHI_TOKENS.gold, fontSize: 10 }}>›</span>
            </div>
          ))}
        </GoldFrame>
      </div>

      {/* Promo */}
      <div>
        <SidebarHeading kicker="PROMO" title="提携カジノ" />
        <div style={{
          padding: 14, position: 'relative',
          background: 'linear-gradient(180deg, #2a0d0e 0%, #6b2fb3 100%)',
          border: `1px solid ${PACHI_TOKENS.gold}`,
          boxShadow: '0 0 16px rgba(107,47,179,0.4)',
        }}>
          <CornerTicks />
          <div style={{ color: PACHI_TOKENS.gold, fontSize: 11, fontWeight: 900,
            letterSpacing: 2, fontFamily: '"Bebas Neue"' }}>PLAY ONLINE</div>
          <div style={{ color: '#fff8e6', fontSize: 14, fontWeight: 900, marginTop: 6,
            fontFamily: '"Noto Sans JP", system-ui',
            textShadow: '0 0 8px rgba(245,197,66,0.5)' }}>
            初回登録で<br/>最大 ¥30,000 ボーナス
          </div>
          <button onClick={() => window.open('https://konibet.com/', '_blank', 'noopener')} style={{
            marginTop: 10, width: '100%', padding: '8px 0',
            background: 'linear-gradient(180deg, #f5c542, #8a6914)',
            border: 'none', color: '#1a0606',
            fontSize: 11, fontWeight: 900, letterSpacing: 2, cursor: 'pointer',
            fontFamily: '"Noto Sans JP", system-ui',
          }}><span style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6 }}><Icon name="play" size={12} fill color="#1a0606" />登録する</span></button>
        </div>
      </div>
    </aside>
  );
}

function SidebarHeading({ kicker, title }) {
  return (
    <div style={{ marginBottom: 10 }}>
      <div style={{ color: PACHI_TOKENS.gold, fontSize: 9, letterSpacing: 3, fontWeight: 700,
        fontFamily: '"Bebas Neue"' }}>{kicker}</div>
      <div style={{ color: PACHI_TOKENS.textHi, fontSize: 13, fontWeight: 900,
        fontFamily: '"Noto Sans JP", system-ui', marginTop: 2,
        textShadow: '0 0 4px rgba(245,197,66,0.4)' }}>{title}</div>
      <div style={{ height: 1, marginTop: 6,
        background: 'linear-gradient(90deg, #f5c542 0%, transparent 80%)' }} />
    </div>
  );
}

// ─── Page-level section header (no inline margin) ───
function PageSection({ kicker, title, action, onAction, children }) {
  return (
    <section style={{ marginBottom: 28 }}>
      <div style={{ display: 'flex', alignItems: 'flex-end',
        justifyContent: 'space-between', marginBottom: 14, gap: 12 }}>
        <div>
          <div style={{ color: PACHI_TOKENS.gold, fontSize: 10, letterSpacing: 4,
            fontWeight: 700, fontFamily: '"Bebas Neue"', opacity: 0.85 }}>{kicker}</div>
          <h2 style={{ margin: '4px 0 0', color: PACHI_TOKENS.gold,
            fontSize: 22, fontWeight: 900, lineHeight: 1.2, letterSpacing: 0.5,
            fontFamily: '"Noto Sans JP", system-ui',
            textShadow: '0 0 8px rgba(245,197,66,0.5), 0 1px 0 #000' }}>{title}</h2>
        </div>
        {action && (
          <button onClick={onAction} style={{
            background: 'transparent', border: `1px solid ${PACHI_TOKENS.gold}`,
            color: PACHI_TOKENS.gold, padding: '6px 14px',
            fontSize: 11, fontWeight: 900, cursor: 'pointer',
            fontFamily: '"Noto Sans JP", system-ui', letterSpacing: 1,
          }}>{action} ›</button>
        )}
      </div>
      <div style={{ height: 1, marginBottom: 16,
        background: 'linear-gradient(90deg, #f5c542 0%, transparent 60%)' }} />
      {children}
    </section>
  );
}

// ─── Hero (responsive) ───
function HeroBlock({ nav, isMobile }) {
  return (
    <div onClick={() => nav.go('event', { id: 'tenkai' })} style={{
      position: 'relative', cursor: 'pointer',
      border: `2px solid ${PACHI_TOKENS.gold}`,
      boxShadow: '0 0 28px rgba(224,37,43,0.45), 0 6px 20px rgba(0,0,0,0.7)',
      marginBottom: 28, overflow: 'hidden',
      background: '#000',
      aspectRatio: isMobile ? '16/10' : '21/9',
    }}>
      <img src="assets/main_banner_tenkai.png" alt=""
        style={{ width: '100%', height: '100%', objectFit: 'cover',
          objectPosition: 'center', display: 'block' }} />
      <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(90deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 50%, transparent 100%)',
      }} />
      <div style={{
        position: 'absolute', left: isMobile ? 16 : 32,
        bottom: isMobile ? 16 : 32, right: isMobile ? 16 : '40%',
      }}>
        <span style={{
          display: 'inline-block', padding: '4px 10px', marginBottom: 10,
          whiteSpace: 'nowrap',
          background: 'linear-gradient(90deg, #e0252b, #9a0f15)',
          color: '#fff', fontSize: 10, fontWeight: 900, letterSpacing: 2,
          border: `1px solid ${PACHI_TOKENS.gold}`,
          fontFamily: '"Noto Sans JP", system-ui',
        }}>本日 OPEN</span>
        <h1 style={{
          margin: 0, color: PACHI_TOKENS.gold,
          fontSize: isMobile ? 24 : 38, fontWeight: 900, lineHeight: 1.15,
          fontFamily: '"Noto Sans JP", system-ui', letterSpacing: 1,
          textShadow: '0 0 14px rgba(245,197,66,0.6), 0 2px 0 #000',
        }}>本日 天界降臨!!</h1>
        <div style={{
          color: PACHI_TOKENS.textHi, fontSize: isMobile ? 11 : 13,
          marginTop: 8, fontFamily: '"Noto Sans JP", system-ui',
          textShadow: '0 1px 0 #000',
        }}>Konibet 新宿店 ・ 2026年5月1日 (金) 10:00 OPEN ・ 全館設定6確定</div>
      </div>
      <CornerTicks />
    </div>
  );
}

// ─── Responsive Home page ───
function ResponsiveHome({ nav }) {
  const D = window.PACHI_DATA;
  const vp = useViewport();
  const isMobile = vp.isMobile;

  const eventCols = vp.isDesktop ? 3 : (vp.isTablet ? 2 : 1);
  const machineCols = vp.isDesktop ? 6 : (vp.isTablet ? 4 : 3);
  const shopCols = vp.isDesktop ? 2 : (vp.isTablet ? 2 : 1);

  return (
    <>
      <HeroBlock nav={nav} isMobile={isMobile} />

      {/* Play now — machines first */}
      <PageSection kicker="PLAY NOW" title="今すぐ遊ぶ・人気機種"
        action="全機種" onAction={() => nav.go('machine')}>
        <div style={{
          display: 'grid', gridTemplateColumns: `repeat(${machineCols}, 1fr)`, gap: 8,
        }}>
          {D.machines.map(m => (
            <button key={m.id} onClick={() => nav.go('data', {
              shopId: 'konibet-shinjuku',
              machineKey: m.id === 'monkeyturn' ? 'monkeyturn-112' : 'hokuto-247',
            })} style={{
              background: '#000', border: `1px solid ${PACHI_TOKENS.gold}`,
              padding: 0, cursor: 'pointer', position: 'relative',
              boxShadow: '0 0 8px rgba(224,37,43,0.2)',
            }}>
              <img src={m.thumbnail} alt={m.name} style={{
                display: 'block', width: '100%', height: 'auto' }} />
              <div style={{
                position: 'absolute', bottom: 0, left: 0, right: 0,
                background: 'linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.95) 60%)',
                padding: '14px 6px 6px', textAlign: 'center',
              }}>
                <div style={{
                  color: PACHI_TOKENS.gold, fontSize: 11, fontWeight: 900,
                  fontFamily: '"Noto Sans JP", system-ui', lineHeight: 1.15,
                  textShadow: '0 1px 0 #000', overflow: 'hidden',
                  textOverflow: 'ellipsis', whiteSpace: 'nowrap',
                }}>{m.name}</div>
              </div>
            </button>
          ))}
        </div>
      </PageSection>

      {/* Quick menu (mobile only — sidebar carries it on desktop) */}
      {isMobile && (
        <PageSection kicker="QUICK ACCESS" title="クイックメニュー">
          <div style={{
            display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8,
          }}>
            {D.quickMenu.map(it => (
              <button key={it.id} onClick={() => nav.go('hall')} style={{
                background: 'radial-gradient(120% 100% at 50% 0%, #2a0e0f 0%, #0a0304 70%)',
                border: `1px solid ${PACHI_TOKENS.goldDim}`,
                padding: '10px 4px 8px', cursor: 'pointer',
                display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4,
              }}>
                <img src={it.icon} alt="" style={{ width: 40, height: 40, objectFit: 'contain',
                  filter: 'drop-shadow(0 0 6px rgba(245,197,66,0.5))' }} />
                <span style={{ color: PACHI_TOKENS.textHi, fontSize: 11, fontWeight: 700,
                  fontFamily: '"Noto Sans JP", system-ui', textAlign: 'center' }}>{it.label}</span>
              </button>
            ))}
          </div>
        </PageSection>
      )}

      {/* Hot events */}
      <PageSection kicker="HOT EVENTS" title="開催中イベント"
        action="一覧" onAction={() => nav.go('eventlist')}>
        <div style={{ display: 'grid', gridTemplateColumns: `repeat(${eventCols}, 1fr)`, gap: 14 }}>
          {D.events.map(e => (
            <div key={e.id} onClick={() => nav.go('event', { id: e.id })} style={{
              cursor: 'pointer', position: 'relative',
              border: `1px solid ${PACHI_TOKENS.gold}`,
              background: '#000',
              boxShadow: '0 0 12px rgba(224,37,43,0.25), 0 4px 12px rgba(0,0,0,0.6)',
              transition: 'transform 0.15s ease, box-shadow 0.15s ease',
            }}
            onMouseEnter={e2 => { e2.currentTarget.style.transform = 'translateY(-2px)';
              e2.currentTarget.style.boxShadow = '0 0 20px rgba(245,197,66,0.4), 0 8px 18px rgba(0,0,0,0.7)'; }}
            onMouseLeave={e2 => { e2.currentTarget.style.transform = 'translateY(0)';
              e2.currentTarget.style.boxShadow = '0 0 12px rgba(224,37,43,0.25), 0 4px 12px rgba(0,0,0,0.6)'; }}
            >
              <img src={e.banner} alt="" style={{
                display: 'block', width: '100%', height: 'auto',
              }} />
              <div style={{
                padding: '10px 14px',
                background: 'linear-gradient(180deg, #15090a, #0a0405)',
                borderTop: `1px solid ${PACHI_TOKENS.hairline}`,
              }}>
                <div style={{ color: PACHI_TOKENS.gold, fontSize: 13, fontWeight: 900,
                  fontFamily: '"Noto Sans JP", system-ui',
                  textShadow: '0 0 4px rgba(245,197,66,0.4)',
                  overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{e.title}</div>
                <div style={{ display: 'flex', justifyContent: 'space-between',
                  marginTop: 4, alignItems: 'baseline' }}>
                  <span style={{ color: PACHI_TOKENS.textMid, fontSize: 11,
                    fontFamily: '"Noto Sans JP", system-ui' }}>{e.shopName}</span>
                  <span style={{ color: PACHI_TOKENS.textDim, fontSize: 11,
                    fontFamily: '"Bebas Neue"', letterSpacing: 1 }}>{e.date}</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </PageSection>

      {/* Featured shops */}
      <PageSection kicker="FEATURED HALLS" title="注目ホール"
        action="もっと見る" onAction={() => nav.go('hall')}>
        <div style={{ display: 'grid', gridTemplateColumns: `repeat(${shopCols}, 1fr)`, gap: 14 }}>
          {D.shops.map(s => (
            <ShopCardWide key={s.id} shop={s} onClick={() => nav.go('store', { shopId: s.id })} />
          ))}
        </div>
      </PageSection>
    </>
  );
}

// ─── Wide shop card (for desktop grid) ───
function ShopCardWide({ shop, onClick }) {
  return (
    <div onClick={onClick} style={{
      cursor: 'pointer', position: 'relative',
      border: `1px solid ${PACHI_TOKENS.gold}`,
      background: 'linear-gradient(180deg, #15090a 0%, #0a0405 100%)',
      boxShadow: '0 0 12px rgba(224,37,43,0.18), 0 4px 12px rgba(0,0,0,0.55)',
      padding: 14, display: 'flex', gap: 14,
      transition: 'transform 0.15s ease, box-shadow 0.15s ease',
    }}
    onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-2px)';
      e.currentTarget.style.boxShadow = '0 0 24px rgba(245,197,66,0.35), 0 8px 16px rgba(0,0,0,0.7)'; }}
    onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)';
      e.currentTarget.style.boxShadow = '0 0 12px rgba(224,37,43,0.18), 0 4px 12px rgba(0,0,0,0.55)'; }}
    >
      <div style={{
        width: 120, height: 120, flexShrink: 0,
        backgroundImage: `url(${shop.image})`,
        backgroundSize: 'cover', backgroundPosition: 'center',
        backgroundColor: '#000',
        border: `1px solid ${PACHI_TOKENS.goldDim}`,
        boxShadow: 'inset 0 0 16px rgba(0,0,0,0.6)',
      }} />
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
          <span style={{
            color: PACHI_TOKENS.gold, fontWeight: 900, fontSize: 16,
            fontFamily: '"Noto Sans JP", system-ui',
            textShadow: '0 0 4px rgba(245,197,66,0.4)',
            overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', flex: 1,
          }}>{shop.name}</span>
          {shop.todayEvent && (
            <span style={{
              background: 'linear-gradient(180deg, #e0252b, #9a0f15)',
              color: '#fff', fontSize: 9, fontWeight: 900, padding: '2px 6px',
              border: `1px solid ${PACHI_TOKENS.gold}`, letterSpacing: 1,
              fontFamily: '"Noto Sans JP", system-ui', flexShrink: 0,
            }}>本日</span>
          )}
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 8 }}>
          <Stars rating={shop.rating} />
          <span style={{ color: PACHI_TOKENS.gold, fontSize: 12, fontWeight: 700 }}>{shop.rating}</span>
          <span style={{ color: PACHI_TOKENS.textDim, fontSize: 11 }}>({shop.ratingCount}件)</span>
        </div>
        <div style={{ display: 'grid', gap: 4 }}>
          <Row icon="pin" text={shop.address} />
          <Row icon="train" text={shop.station} />
          <Row icon="slot" text={`パチスロ ${shop.slotCount}台`} />
          <Row icon="clock" text={shop.openHours} />
        </div>
      </div>
    </div>
  );
}

// ─── Detail wrappers (reuse mobile screens centered/limited width) ───
function CenteredScreen({ children, max = 880 }) {
  return (
    <div style={{ maxWidth: max, margin: '0 auto', width: '100%' }}>
      {children}
    </div>
  );
}

// ─── Master responsive page ───
function ResponsivePachi() {
  const vp = useViewport();
  const [route, setRoute] = useStateR({ screen: 'home', params: {} });
  const [drawerOpen, setDrawerOpen] = useStateR(false);
  const [, force] = React.useReducer(x => x + 1, 0);

  const nav = React.useMemo(() => {
    const stack = [{ screen: 'home', params: {} }];
    return {
      get current() { return stack[stack.length - 1]; },
      go(screen, params = {}) {
        stack.push({ screen, params });
        setRoute({ screen, params });
        window.scrollTo({ top: 0, behavior: 'smooth' });
      },
      back() {
        if (stack.length > 1) {
          stack.pop();
          const c = stack[stack.length - 1];
          setRoute(c);
        }
      },
    };
  }, []);

  const { screen, params } = route;

  // Map screen → top-nav active item
  const topActive = ({
    home: 'home',
    hall: 'hall', store: 'hall', area: 'hall',
    machine: 'machine', data: 'machine',
    ranking: 'ranking',
    eventlist: 'eventlist', event: 'eventlist',
    search: '', mypage: '',
  })[screen] || '';

  // Map screen → mobile bottom-nav
  const bottomActive = ({
    home: 'home',
    hall: 'hall', store: 'hall', area: 'hall', search: 'hall',
    machine: 'machine', data: 'machine',
    ranking: 'ranking',
    eventlist: 'home', event: 'home',
    mypage: 'mypage',
  })[screen] || 'home';

  const isHome = screen === 'home';

  return (
    <div style={{
      minHeight: '100vh',
      background: '#050202',
      backgroundImage: `
        radial-gradient(80% 60% at 50% 0%, rgba(107,47,179,0.18) 0%, rgba(107,47,179,0) 60%),
        radial-gradient(60% 60% at 50% 100%, rgba(224,37,43,0.18) 0%, rgba(224,37,43,0) 60%),
        repeating-linear-gradient(-45deg, transparent 0 24px, rgba(245,197,66,0.025) 24px 25px)
      `,
      backgroundAttachment: 'fixed',
      color: PACHI_TOKENS.textHi,
      paddingBottom: vp.isMobile ? 80 : 0,
    }}>
      <TopBar nav={nav} current={topActive}
        onMenuOpen={() => setDrawerOpen(true)} />

      <main style={{
        maxWidth: 1440, margin: '0 auto',
        padding: vp.isMobile ? (isHome ? '16px 14px' : '10px 0 24px') : '32px 28px',
      }}>
        {isHome && vp.isDesktop ? (
          <div style={{
            display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) 320px',
            gap: 36, alignItems: 'flex-start',
          }}>
            <div>
              <ResponsiveHome nav={nav} />
            </div>
            <AsideRail nav={nav} />
          </div>
        ) : isHome ? (
          <ResponsiveHome nav={nav} />
        ) : (
          <CenteredScreen max={screen === 'data' || screen === 'event' || screen === 'store' ? 980 : 760}>
            <DetailRouter screen={screen} params={params} nav={nav} />
          </CenteredScreen>
        )}
      </main>

      <SiteFooter />

      {vp.isMobile && <MobileBottomNav current={bottomActive} nav={nav} />}
      {vp.isMobile && (
        <MobileDrawer open={drawerOpen} onClose={() => setDrawerOpen(false)} nav={nav} />
      )}
    </div>
  );
}

// ─── Detail screen router (reuses existing screens but in a plain wrapper, no inner bottom-nav) ───
function PlainScreen({ children }) {
  // Existing screens use Screen() which adds an inner BottomNav and its own scrollable
  // container. For the responsive page we just render the children directly.
  return <div>{children}</div>;
}

function DetailRouter({ screen, params, nav }) {
  // We need to bypass Screen() (which adds bottom nav). Render inner content using the
  // same components as the existing screens, but in the responsive layout.
  // Easiest: wrap existing screen function output but suppress its internal Screen.
  // Strategy: monkey-patch Screen for one render to be a passthrough.
  // Screen/Header are already responsive-friendly (see components.jsx / screens.jsx)
  let view = null;
  try {
    if (screen === 'data')      view = <DataDetailScreen nav={nav} params={params} />;
    else if (screen === 'event')     view = <EventDetailScreen nav={nav} params={params} />;
    else if (screen === 'store')     view = <StoreDetailScreen nav={nav} params={params} />;
    else if (screen === 'hall')      view = <HallListScreen nav={nav} params={params} />;
    else if (screen === 'machine')   view = <MachineListScreen nav={nav} />;
    else if (screen === 'mypage')    view = <MyPageScreen nav={nav} />;
    else if (screen === 'ranking')   view = <RankingScreen nav={nav} />;
    else if (screen === 'search')    view = <SearchScreen nav={nav} />;
    else if (screen === 'eventlist') view = <EventListScreen nav={nav} />;
    else if (screen === 'area')      view = <AreaDetailScreen nav={nav} params={params} />;
    else view = <ResponsiveHome nav={nav} />;
  } finally {
    // no chrome patching needed
  }
  return view;
}

Object.assign(window, {
  ResponsivePachi, useViewport, TopBar, MobileBottomNav, MobileDrawer,
  SiteFooter, AsideRail, PageSection, HeroBlock, ResponsiveHome,
  ShopCardWide, CenteredScreen, DetailRouter,
});