// B案 — Discover（高級志向版）: 3セクション
// Hero collage / フィルター（結果Row 4件）/ NEWS
function VariantDiscover() {
  const [activeGenre, setActiveGenre] = React.useState('all');
  const [activeScene, setActiveScene] = React.useState('all');
  const filtered = BRANDS.filter(b =>
    (activeGenre === 'all' || brandHasGenre(b, activeGenre)) &&
    (activeScene === 'all' || b.scenes.includes(activeScene))
  );
  const activeColor = activeGenre === 'all' ? rStyles.fg : (GENRES.find(g => g.key === activeGenre)?.color || rStyles.fg);

  return (
    <div style={{ fontFamily: rStyles.sans, background: rStyles.bg, color: rStyles.fg }}>
      <RHeader tone="light" />

      {/* HERO — split: type left, photo collage right */}
      <section className="r-hero-section" style={{ paddingTop: 100 }}>
        <div className="r-hero-split" style={{ maxWidth: 1500, margin: '0 auto', padding: '80px 40px 60px', display: 'grid', gridTemplateColumns: '1fr 1.05fr', gap: 80, alignItems: 'center' }}>
          <div>
            <div style={{ fontFamily: rStyles.mono, fontSize: 11, letterSpacing: 2.8, color: rStyles.mute, marginBottom: 32 }}>
              ◦ KIWA RESTAURANTS / 食を、探す。
            </div>
            <h1 style={{ fontFamily: rStyles.display, fontSize: 'clamp(44px, 6.4vw, 100px)', fontWeight: 500, letterSpacing: -3.6, lineHeight: 1.02, margin: 0 }}>
              気分から、<br/>
              <span style={{ fontFamily: rStyles.displayEn, fontStyle: 'italic', color: rStyles.accent, fontWeight: 400 }}>店</span>を、<br/>
              選ぶ。
            </h1>
            <p style={{ marginTop: 36, fontSize: 16, lineHeight: 2.0, color: 'rgba(26,26,26,0.78)', maxWidth: 460 }}>
              中華・和食・洋食・焼肉・麺・アジアン・カフェ。<br/>
              際が運営する100超のレストランを、ジャンルとシーンから、いま行きたい一軒へ。
            </p>
            <div style={{ marginTop: 44, display: 'flex', gap: 14, flexWrap: 'wrap' }}>
              <a href="#explore" className="btn-kiwa" style={{ padding: '15px 28px', background: rStyles.fg, color: rStyles.bg, borderRadius: 999, fontSize: 13, fontWeight: 600, textDecoration: 'none' }}>店をさがす →</a>
              <a href="restaurants/area.html" className="btn-kiwa-ghost" style={{ padding: '15px 28px', background: 'transparent', color: rStyles.fg, border: `1px solid ${rStyles.fg}`, borderRadius: 999, fontSize: 13, fontWeight: 600, textDecoration: 'none' }}>エリアで選ぶ</a>
            </div>
            <div style={{ marginTop: 64, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 28, paddingTop: 28, borderTop: `1px solid ${rStyles.line}` }}>
              {[['100+','BRANDS'],['280+','STORES'],['8','GENRES']].map(([n,l]) => (
                <div key={l}>
                  <div style={{ fontFamily: rStyles.displayEn, fontSize: 38, fontWeight: 500, letterSpacing: -1.6 }}>{n}</div>
                  <div style={{ fontFamily: rStyles.mono, fontSize: 10, letterSpacing: 2, color: rStyles.mute, marginTop: 4 }}>{l}</div>
                </div>
              ))}
            </div>
          </div>
          <div className="r-hero-collage" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gridTemplateRows: '1fr 1fr', gap: 12, height: 640 }}>
            <div style={{ gridRow: 'span 2', overflow: 'hidden', position: 'relative' }}>
              <img src={REST_IMG.hero} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
              <div style={{ position: 'absolute', bottom: 14, left: 14, padding: '5px 11px', background: '#B73229', color: '#fff', fontFamily: rStyles.mono, fontSize: 10, letterSpacing: 2 }}>CHINESE</div>
            </div>
            <div style={{ overflow: 'hidden', position: 'relative' }}>
              <img src={REST_IMG.washoku} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
              <div style={{ position: 'absolute', bottom: 14, left: 14, padding: '5px 11px', background: '#1F3A5F', color: '#fff', fontFamily: rStyles.mono, fontSize: 10, letterSpacing: 2 }}>WASHOKU</div>
            </div>
            <div style={{ overflow: 'hidden', position: 'relative' }}>
              <img src={REST_IMG.yakiniku} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
              <div style={{ position: 'absolute', bottom: 14, left: 14, padding: '5px 11px', background: '#1F1A18', color: '#fff', fontFamily: rStyles.mono, fontSize: 10, letterSpacing: 2 }}>GRILL</div>
            </div>
          </div>
        </div>
      </section>

      {/* EXPLORE */}
      <section id="explore" className="r-section" style={{ padding: '110px 40px 80px', borderTop: `1px solid ${rStyles.line}` }}>
        <div style={{ maxWidth: 1500, margin: '0 auto' }}>
          <SectionHead num="001" en="Explore" jp="ジャンル × シーンで、絞る。" sub="ジャンルとシーンの組み合わせで、いまの気分の一軒を見つける。" />
          <div style={{ marginTop: 64 }}>
            <div style={{ fontFamily: rStyles.mono, fontSize: 10, letterSpacing: 2.4, color: rStyles.mute, marginBottom: 16 }}>◦ GENRE</div>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
              <button onClick={() => setActiveGenre('all')} style={pillStyle(activeGenre === 'all', rStyles.fg)}>すべて<span style={pillCount}>{BRANDS.length}</span></button>
              {GENRES.filter(g => !g.sub).map(g => (
                <button key={g.key} onClick={() => setActiveGenre(g.key)} style={pillStyle(activeGenre === g.key, g.color)}>
                  {g.jp}<span style={pillCount}>{BRANDS.filter(b => brandHasGenre(b, g.key)).length}</span>
                </button>
              ))}
            </div>
          </div>
          <div style={{ marginTop: 32 }}>
            <div style={{ fontFamily: rStyles.mono, fontSize: 10, letterSpacing: 2.4, color: rStyles.mute, marginBottom: 16 }}>◦ SCENE</div>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
              <button onClick={() => setActiveScene('all')} style={pillStyle(activeScene === 'all', rStyles.fg)}>すべて</button>
              {SCENES.map(s => (
                <button key={s.key} onClick={() => setActiveScene(s.key)} style={pillStyle(activeScene === s.key, rStyles.fg)}>
                  <span style={{ marginRight: 6, color: activeScene === s.key ? '#fff' : rStyles.accent }}>{s.icon}</span>{s.jp}
                </button>
              ))}
            </div>
          </div>
          <div style={{ marginTop: 48, paddingTop: 18, borderTop: `1px solid ${rStyles.line}`, display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
            <div style={{ fontFamily: rStyles.mono, fontSize: 11, letterSpacing: 2.4, color: rStyles.mute }}>
              ◦ RESULT — <span style={{ color: activeColor, fontWeight: 600 }}>{filtered.length} BRANDS</span>
            </div>
            <a href="restaurants/search.html" style={{ fontFamily: rStyles.mono, fontSize: 10.5, letterSpacing: 2.4, color: rStyles.mute, textDecoration: 'none' }}>絞り込みページへ →</a>
          </div>
          <div style={{ marginTop: 24 }}>
            {filtered.slice(0, 4).map((b, i) => <BrandRow key={b.id} b={b} idx={i} />)}
          </div>
          {filtered.length > 4 && (
            <div style={{ textAlign: 'center', marginTop: 56 }}>
              <a href="restaurants/search.html" className="btn-kiwa" style={{ display: 'inline-flex', gap: 14, padding: '16px 34px', border: `1px solid ${rStyles.fg}`, borderRadius: 999, fontSize: 13, fontWeight: 600, color: rStyles.fg, textDecoration: 'none' }}>
                結果をすべて見る（{filtered.length}件） <span style={{ fontFamily: rStyles.mono }}>→</span>
              </a>
            </div>
          )}
          {filtered.length === 0 && (
            <div style={{ padding: '80px 0', textAlign: 'center', color: rStyles.mute, fontSize: 14 }}>
              該当するブランドが見つかりません。条件を変更してください。
            </div>
          )}
        </div>
      </section>

      {/* NEWS */}
      <section id="news" className="r-section" style={{ padding: '100px 40px', background: rStyles.cream, borderTop: `1px solid ${rStyles.line}` }}>
        <div style={{ maxWidth: 1500, margin: '0 auto' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 24 }}>
            <SectionHead num="002" en="News" jp="新店・お知らせ。" inline />
            <a href="news.html" style={{ fontFamily: rStyles.mono, fontSize: 11, letterSpacing: 2.4, color: rStyles.fg, textDecoration: 'none', borderBottom: `1px solid ${rStyles.fg}`, paddingBottom: 4 }}>VIEW ALL →</a>
          </div>
          <div className="r-news-cards" style={{ marginTop: 56, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18 }}>
            {REST_NEWS.slice(0, 3).map((n, i) => {
              const g = GENRES.find(x => x.key === n.genre);
              return (
                <a key={i} href={n.id ? `news-${n.id}.html` : 'news.html'} style={{ background: rStyles.paper, padding: 28, border: `1px solid ${rStyles.line}`, textDecoration: 'none', color: rStyles.fg, display: 'block' }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 16 }}>
                    <span style={{ fontFamily: rStyles.mono, fontSize: 10, letterSpacing: 2.4, color: g?.color || rStyles.accent }}>◦ {n.cat}</span>
                    <span style={{ fontFamily: rStyles.mono, fontSize: 10, letterSpacing: 1.5, color: rStyles.mute }}>{n.y}.{n.date}</span>
                  </div>
                  <div style={{ fontFamily: rStyles.display, fontSize: 17, fontWeight: 500, lineHeight: 1.55 }}>{n.title}</div>
                  <div style={{ marginTop: 22, fontFamily: rStyles.mono, fontSize: 10, letterSpacing: 2.4, color: rStyles.mute }}>READ MORE →</div>
                </a>
              );
            })}
          </div>
        </div>
      </section>

      <RFooter />
    </div>
  );
}

const pillStyle = (active, color) => ({
  padding: '11px 18px',
  borderRadius: 999,
  border: `1px solid ${active ? color : rStyles.line}`,
  background: active ? color : rStyles.paper,
  color: active ? '#fff' : rStyles.fg,
  fontSize: 13,
  fontWeight: 500,
  fontFamily: rStyles.sans,
  cursor: 'pointer',
  transition: 'all 0.2s ease',
  display: 'inline-flex',
  alignItems: 'center',
});
const pillCount = {
  fontFamily: rStyles.mono,
  fontSize: 10,
  letterSpacing: 1,
  marginLeft: 8,
  opacity: 0.6,
};

window.VariantDiscover = VariantDiscover;