// 共通 SectionHead / BrandCard / SceneIcons
function SectionHead({ num, en, jp, sub, inline, accent }) {
  return (
    <div className={inline ? '' : 'r-section-head'} style={{ display: 'grid', gridTemplateColumns: '180px 1fr', gap: 48, alignItems: 'end' }}>
      <div>
        <div style={{ fontFamily: rStyles.mono, fontSize: 10.5, letterSpacing: 2.6, color: accent || rStyles.accent }}>◦ {num}</div>
        <div style={{ fontFamily: rStyles.displayEn, fontStyle: 'italic', fontSize: 22, color: rStyles.fg, marginTop: 8, fontWeight: 400 }}>{en}</div>
      </div>
      <div>
        <h2 style={{ fontFamily: rStyles.display, fontSize: 'clamp(28px, 4vw, 56px)', fontWeight: 500, letterSpacing: -1.4, lineHeight: 1.18, margin: 0 }}>
          {jp}
        </h2>
        {sub && <p style={{ fontSize: 14, lineHeight: 1.95, color: rStyles.mute, marginTop: 22, marginBottom: 0, maxWidth: 640 }}>{sub}</p>}
      </div>
    </div>
  );
}

const SCENE_LABELS = {
  business: '接待',
  date:     'デート',
  family:   '家族',
  party:    '宴会',
  casual:   'ふらり',
  takeout:  'テイクアウト',
};

function brandGenres(b) { return Array.isArray(b.genre) ? b.genre : [b.genre]; }
function brandPrimaryGenre(b) { return GENRES.find(x => x.key === brandGenres(b)[0]); }
function brandHasGenre(b, key) { return brandGenres(b).includes(key); }

// 高級感を出した縦型カード — ジャンル色のラベル、代表メニュー、シーンタグ、テイクアウト印
function BrandCard({ b, idx, height = 360 }) {
  const g = brandPrimaryGenre(b);
  const genreLabel = brandGenres(b).map(k => GENRES.find(x => x.key === k)?.jp).filter(Boolean).join('・').toUpperCase();
  const sceneTags = b.scenes.filter(s => s !== 'takeout').slice(0, 3);
  return (
    <a href={b.url !== '#' ? b.url : b.stores >= 3 ? `restaurants/brand-detail.html?id=${b.id}` : '#'} className="r-brand-card" style={{ textDecoration: 'none', color: rStyles.fg, display: 'block', position: 'relative' }}>
      <div style={{ position: 'relative', width: '100%', height, overflow: 'hidden', marginBottom: 22 }}>
        <img src={b.img} className="r-brand-img" style={{ width: '100%', height: '100%', objectFit: 'cover', transition: 'transform 0.7s cubic-bezier(.2,.8,.2,1)' }} />
        {/* genre color label */}
        <div style={{ position: 'absolute', top: 0, left: 0, padding: '8px 14px', background: g?.color, fontFamily: rStyles.mono, fontSize: 10, letterSpacing: 2, color: '#fff' }}>
          {genreLabel}
        </div>
        {b.takeout && (
          <div style={{ position: 'absolute', top: 0, right: 0, padding: '8px 12px', background: 'rgba(255,255,255,0.94)', fontFamily: rStyles.mono, fontSize: 10, letterSpacing: 1.8, color: rStyles.fg, display: 'flex', alignItems: 'center', gap: 6 }}>
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: g?.color }} />
            TAKEOUT
          </div>
        )}
        {b.stores >= 15 && (
          <div style={{ position: 'absolute', bottom: 12, right: 12, padding: '4px 10px', background: 'rgba(15,14,12,0.78)', backdropFilter: 'blur(8px)', fontFamily: rStyles.mono, fontSize: 9.5, letterSpacing: 2, color: '#fff' }}>
            CHAIN · {b.stores}
          </div>
        )}
      </div>

      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', fontFamily: rStyles.mono, fontSize: 10, letterSpacing: 2, color: rStyles.mute, marginBottom: 10 }}>
        <span>№ {String(idx + 1).padStart(3, '0')}</span>
        <span>EST. {b.est}</span>
      </div>
      <div style={{ fontFamily: rStyles.display, fontSize: 24, fontWeight: 500, letterSpacing: -0.6, lineHeight: 1.2 }}>{b.name}</div>
      <div style={{ fontFamily: rStyles.displayEn, fontStyle: 'italic', fontSize: 13, color: rStyles.mute, marginTop: 4 }}>{b.read}</div>

      {/* signature dish */}
      <div style={{ marginTop: 18, paddingTop: 14, borderTop: `1px solid ${rStyles.line}`, display: 'flex', gap: 14, alignItems: 'baseline' }}>
        <div style={{ fontFamily: rStyles.mono, fontSize: 9.5, letterSpacing: 2, color: g?.color, flexShrink: 0 }}>SIGNATURE</div>
        <div style={{ fontSize: 13, lineHeight: 1.55, color: rStyles.fg, fontWeight: 500 }}>{b.sig}</div>
      </div>

      {/* scene + meta */}
      <div style={{ marginTop: 14, display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 8 }}>
        <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
          {sceneTags.map(s => (
            <span key={s} style={{ padding: '3px 9px', border: `1px solid ${rStyles.line}`, fontSize: 10.5, color: rStyles.mute, fontFamily: rStyles.sans }}>{SCENE_LABELS[s]}</span>
          ))}
        </div>
        <span style={{ fontFamily: rStyles.mono, fontSize: 9.5, letterSpacing: 1.5, color: rStyles.mute }}>{b.area} · {b.stores}店</span>
      </div>
    </a>
  );
}

// 横長コンパクト版（フィルター結果用）
// hideSig      : SIGNATURE列を非表示
// hideGenreTag : 画像上のジャンルバッジを非表示
// noBorder     : borderBottomを非表示（2カラムラッパー利用時）
function BrandRow({ b, idx, hideSig, hideGenreTag, noBorder }) {
  const g = brandPrimaryGenre(b);
  const genreLabel = brandGenres(b).map(k => GENRES.find(x => x.key === k)?.jp).filter(Boolean).join('・');
  const bp = typeof inferBasePath === 'function' ? inferBasePath() : '';
  const href = b.url !== '#'
    ? `${bp}${b.url}`
    : b.stores >= 3 ? `${bp}restaurants/brand-detail.html?id=${b.id}` : '#';
  const cols = hideSig ? '180px 1fr 60px' : '180px 1fr 200px 60px';
  return (
    <a href={href} className="r-brand-row" style={{ textDecoration: 'none', color: rStyles.fg, display: 'grid', gridTemplateColumns: cols, gap: 28, padding: '22px 0', borderBottom: noBorder ? 'none' : `1px solid ${rStyles.line}`, alignItems: 'center' }}>
      <div className="r-brand-row-img" style={{ width: 180, height: 120, overflow: 'hidden', position: 'relative' }}>
        <img src={b.img} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
        {!hideGenreTag && (
          <div style={{ position: 'absolute', top: 0, left: 0, padding: '4px 9px', background: g?.color, fontFamily: rStyles.mono, fontSize: 9, letterSpacing: 1.8, color: '#fff' }}>{genreLabel}</div>
        )}
      </div>
      <div>
        <div style={{ fontFamily: rStyles.mono, fontSize: 9.5, letterSpacing: 2, color: rStyles.mute, marginBottom: 6 }}>№ {String(idx + 1).padStart(3, '0')} / EST. {b.est}</div>
        <div style={{ fontFamily: rStyles.display, fontSize: 22, fontWeight: 500, letterSpacing: -0.5 }}>{b.name}</div>
        <div style={{ fontSize: 12.5, lineHeight: 1.65, color: rStyles.mute, marginTop: 6, maxWidth: 560 }}>{b.desc}</div>
      </div>
      {!hideSig && (
        <div>
          <div style={{ fontFamily: rStyles.mono, fontSize: 9.5, letterSpacing: 1.8, color: g?.color, marginBottom: 6 }}>SIGNATURE</div>
          <div style={{ fontSize: 12.5, lineHeight: 1.5, fontWeight: 500 }}>{b.sig}</div>
          <div style={{ marginTop: 8, display: 'flex', gap: 5, flexWrap: 'wrap' }}>
            {b.takeout && <span style={{ padding: '2px 7px', background: g?.soft, fontSize: 10, color: g?.color, fontFamily: rStyles.mono, letterSpacing: 1 }}>TAKEOUT</span>}
            {b.scenes.filter(s => s !== 'takeout').slice(0, 2).map(s => (
              <span key={s} style={{ padding: '2px 7px', border: `1px solid ${rStyles.line}`, fontSize: 10, color: rStyles.mute }}>{SCENE_LABELS[s]}</span>
            ))}
          </div>
        </div>
      )}
      <span style={{ fontFamily: rStyles.mono, fontSize: 13, color: rStyles.mute, textAlign: 'right' }}>→</span>
    </a>
  );
}

Object.assign(window, { SectionHead, BrandCard, BrandRow, SCENE_LABELS, brandGenres, brandPrimaryGenre, brandHasGenre });