// A案 — Magazine（高級志向版）: 4セクションだけ
// Hero collage / ジャンル＋カラー / 主要ブランド / NEWS
function VariantMagazine() {
  const featured = BRANDS.slice(0, 6);
  return (
    <div style={{ fontFamily: rStyles.sans, background: rStyles.bg, color: rStyles.fg }}>
      <RHeader tone="dark" />

      {/* HERO — 4-image collage with type overlay */}
      <section style={{ paddingTop: 100, background: rStyles.bg }}>
        <div style={{ maxWidth: 1500, margin: '0 auto', padding: '40px 40px 0' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 28, flexWrap: 'wrap', gap: 16 }}>
            <div style={{ fontFamily: rStyles.mono, fontSize: 11, letterSpacing: 2.6, color: rStyles.mute, display: 'flex', gap: 14, alignItems: 'center' }}>
              <span style={{ width: 7, height: 7, background: rStyles.accent, borderRadius: '50%' }} />
              KIWA RESTAURANTS · 際の食卓
            </div>
            <div style={{ fontFamily: rStyles.mono, fontSize: 10.5, letterSpacing: 2.4, color: rStyles.mute }}>{BRANDS.length}+ BRANDS / 280+ STORES / SINCE 1990</div>
          </div>
        </div>
        <div style={{ maxWidth: 1500, margin: '0 auto', padding: '0 40px' }}>
          <h1 style={{ fontFamily: rStyles.display, fontSize: 'clamp(48px, 9.6vw, 168px)', lineHeight: 0.95, fontWeight: 500, letterSpacing: -5, margin: 0 }}>
            一皿で、<br/>
            <span style={{ fontFamily: rStyles.displayEn, fontStyle: 'italic', color: rStyles.accent, fontWeight: 400 }}>街</span>を、旅する。
          </h1>
        </div>

        <div className="r-mag-collage" style={{ maxWidth: 1500, margin: '60px auto 0', padding: '0 40px', display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr', gridTemplateRows: '300px 240px', gap: 12 }}>
          <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: 16, left: 16, padding: '6px 12px', 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: 16, left: 16, padding: '6px 12px', background: '#1F3A5F', color: '#fff', fontFamily: rStyles.mono, fontSize: 10, letterSpacing: 2 }}>WASHOKU</div>
          </div>
          <div style={{ overflow: 'hidden', position: 'relative' }}>
            <img src={REST_IMG.yoshoku} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
            <div style={{ position: 'absolute', bottom: 16, left: 16, padding: '6px 12px', background: '#6E1F2A', color: '#fff', fontFamily: rStyles.mono, fontSize: 10, letterSpacing: 2 }}>WESTERN</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: 16, left: 16, padding: '6px 12px', background: '#1F1A18', color: '#fff', fontFamily: rStyles.mono, fontSize: 10, letterSpacing: 2 }}>GRILL</div>
          </div>
          <div style={{ overflow: 'hidden', position: 'relative' }}>
            <img src={REST_IMG.asian} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
            <div style={{ position: 'absolute', bottom: 16, left: 16, padding: '6px 12px', background: '#1E5044', color: '#fff', fontFamily: rStyles.mono, fontSize: 10, letterSpacing: 2 }}>ASIAN</div>
          </div>
        </div>

        <div style={{ maxWidth: 1500, margin: '40px auto 0', padding: '0 40px 60px', display: 'grid', gridTemplateColumns: '1fr auto', gap: 32, alignItems: 'end' }}>
          <p style={{ fontSize: 16, lineHeight: 2.0, color: 'rgba(26,26,26,0.78)', maxWidth: 560, margin: 0 }}>
            中華を核に、和食、洋食、焼肉、麺、アジアン、カフェ。<br/>
            際コーポレーションが営む100超のレストランブランドを、ひとつのテーブルから。
          </p>
          <div style={{ display: 'flex', gap: 14 }}>
            <a href="restaurants/brands.html" className="btn-kiwa" style={{ padding: '15px 28px', background: rStyles.fg, color: rStyles.bg, fontSize: 13, fontWeight: 600, borderRadius: 999, textDecoration: 'none' }}>ブランドを見る →</a>
            <a href="restaurants/search.html" className="btn-kiwa-ghost" style={{ padding: '15px 28px', background: 'transparent', color: rStyles.fg, fontSize: 13, fontWeight: 600, borderRadius: 999, border: `1px solid ${rStyles.fg}`, textDecoration: 'none' }}>店を探す</a>
          </div>
        </div>
      </section>

      {/* GENRES — colored cards */}
      <section id="genres" style={{ padding: '120px 40px 80px', borderTop: `1px solid ${rStyles.line}` }}>
        <div style={{ maxWidth: 1500, margin: '0 auto' }}>
          <SectionHead num="001" en="Genres" jp="ジャンルから、選ぶ。" sub={`${GENRES.filter(g => !g.sub).length}つのジャンル、それぞれの色、それぞれの世界。`} />
          <div className="r-genre-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14, marginTop: 70 }}>
            {GENRES.filter(g => !g.sub).map((g, i) => (
              <a key={g.key} href={`restaurants/genre.html?g=${g.key}`} className="r-genre-card" style={{ textDecoration: 'none', color: rStyles.fg, position: 'relative', overflow: 'hidden', display: 'block' }}>
                <div style={{ height: 320, overflow: 'hidden', position: 'relative' }}>
                  <img src={g.img} style={{ width: '100%', height: '100%', objectFit: 'cover', transition: 'transform 0.6s ease' }} />
                  <div style={{ position: 'absolute', inset: 0, background: `linear-gradient(180deg, ${g.color}00 0%, ${g.color}DC 100%)` }} />
                  <div style={{ position: 'absolute', top: 16, left: 16, fontFamily: rStyles.mono, fontSize: 10, letterSpacing: 2.4, color: '#fff' }}>◦ {String(i + 1).padStart(2, '0')}</div>
                  <div style={{ position: 'absolute', bottom: 18, left: 18, right: 18, color: '#fff' }}>
                    <div style={{ fontFamily: rStyles.displayEn, fontStyle: 'italic', fontSize: 13, opacity: 0.85 }}>{g.en}</div>
                    <div style={{ fontFamily: rStyles.display, fontSize: 26, fontWeight: 500, letterSpacing: -0.7, marginTop: 2 }}>{g.jp}</div>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 12, fontFamily: rStyles.mono, fontSize: 10, letterSpacing: 2, opacity: 0.9 }}>
                      <span>BRANDS</span>
                      <span>→</span>
                    </div>
                  </div>
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* FEATURED BRANDS */}
      <section id="brands" style={{ padding: '120px 40px', background: rStyles.cream, borderTop: `1px solid ${rStyles.line}` }}>
        <div style={{ maxWidth: 1500, margin: '0 auto' }}>
          <SectionHead num="002" en="Featured" jp="主要ブランド。" sub="際を代表するレストランブランド。" />
          <div className="r-feature-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32, marginTop: 70 }}>
            {featured.map((b, i) => (
              <BrandCard key={b.id} b={b} idx={i} />
            ))}
          </div>
          <div style={{ marginTop: 64, textAlign: 'center' }}>
            <a href="restaurants/brands.html" className="btn-kiwa" style={{ display: 'inline-flex', alignItems: 'center', gap: 14, padding: '16px 36px', border: `1px solid ${rStyles.fg}`, borderRadius: 999, fontSize: 13, fontWeight: 600, color: rStyles.fg, textDecoration: 'none' }}>
              全{BRANDS.length}ブランドを見る
              <span style={{ fontFamily: rStyles.mono, fontSize: 12 }}>→</span>
            </a>
          </div>
        </div>
      </section>

      {/* NEWS */}
      <section id="news" style={{ padding: '120px 40px' }}>
        <div style={{ maxWidth: 1500, margin: '0 auto' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 24 }}>
            <SectionHead num="003" 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 style={{ marginTop: 56 }}>
            {REST_NEWS.slice(0, 3).map((n, i) => (
              <a key={i} href="news.html" className="vc-news-row" style={{ display: 'grid', gridTemplateColumns: '90px 1fr auto', gap: 28, padding: '26px 0', borderTop: i === 0 ? `1px solid ${rStyles.line}` : 'none', borderBottom: `1px solid ${rStyles.line}`, alignItems: 'center', textDecoration: 'none', color: 'inherit' }}>
                <div>
                  <div style={{ fontFamily: rStyles.displayEn, fontSize: 24, fontWeight: 500, letterSpacing: -0.5 }}>{n.date}</div>
                  <div style={{ fontFamily: rStyles.mono, fontSize: 10, color: rStyles.mute, marginTop: 4 }}>{n.y}</div>
                </div>
                <div>
                  <div style={{ fontFamily: rStyles.mono, fontSize: 10, letterSpacing: 2.4, color: rStyles.accent, marginBottom: 8 }}>◦ {n.cat}</div>
                  <div style={{ fontSize: 17, fontWeight: 500, lineHeight: 1.55 }}>{n.title}</div>
                </div>
                <div style={{ fontFamily: rStyles.mono, fontSize: 14, color: rStyles.mute }}>→</div>
              </a>
            ))}
          </div>
        </div>
      </section>

      <RFooter />
    </div>
  );
}

window.VariantMagazine = VariantMagazine;