// Variation B — Modern Editorial: split layout, magazine-like typography, vertical text accents
const VariationB = ({ tweaks }) => {
  return (
    <div style={{background:'var(--mta-cream)', color:'var(--mta-ink)', minHeight: 900}}>
      {/* Header */}
      <header style={{padding:'24px 48px', display:'grid', gridTemplateColumns:'1fr auto 1fr', alignItems:'center', borderBottom:'1px solid var(--mta-line)', background:'var(--mta-paper)'}}>
        <div style={{fontSize: 11, letterSpacing:'0.25em', color:'var(--mta-muted)', fontFamily:'Oswald, sans-serif'}}>SINCE 2006 · ULAANBAATAR ↔ TOKYO</div>
        <MTALogo color="var(--mta-navy)"/>
        <div style={{display:'flex', justifyContent:'flex-end', gap: 28, fontSize: 12, fontWeight: 600}}>
          <span>検索</span><span>JP / EN</span>
          <button style={{background:'var(--mta-navy)', color:'#fff', border:'none', padding:'10px 20px', fontSize: 11, fontWeight:700, letterSpacing:'0.2em', cursor:'pointer'}}>無料相談</button>
        </div>
      </header>

      <nav style={{padding:'14px 48px', display:'flex', gap: 36, fontSize: 13, fontWeight: 500, background:'var(--mta-paper)', borderBottom:'1px solid var(--mta-line)'}}>
        {['ツアーを探す','エリアガイド','体験テーマ','現地ブログ','法人・MICE','私たちについて','よくある質問','お問い合わせ'].map(x=>(
          <a key={x} style={{color:'var(--mta-ink)', cursor:'pointer'}}>{x}</a>
        ))}
      </nav>

      {/* Hero — split editorial */}
      <section style={{padding:'60px 48px', display:'grid', gridTemplateColumns:'1.1fr 1fr', gap: 56, alignItems:'stretch'}}>
        <div style={{position:'relative', height: 640, overflow:'hidden'}}>
          <HeroVideo palette="steppe"/>
          <div style={{position:'absolute', top: 24, left: 24, color:'#fff', fontSize: 10, letterSpacing:'0.3em', fontFamily:'Oswald, sans-serif', writingMode:'vertical-rl'}}>VOL. 026 — STEPPE & SKY</div>
          <div style={{position:'absolute', bottom: 24, left: 24, right: 24, color:'#fff'}}>
            <div style={{fontSize: 11, letterSpacing:'0.25em', opacity: 0.85, marginBottom: 8, fontFamily:'Oswald, sans-serif'}}>FEATURED — NAADAM 2026</div>
            <div style={{fontSize: 22, fontFamily:'"Shippori Mincho", serif'}}>七月、草原で、千年の祭りに出会う。</div>
          </div>
        </div>
        <div style={{display:'flex', flexDirection:'column', justifyContent:'space-between', padding:'12px 0'}}>
          <div>
            <div style={{fontSize: 11, letterSpacing:'0.4em', color:'var(--mta-blue)', fontWeight:700, marginBottom: 32, fontFamily:'Oswald, sans-serif'}}>№ 026 / SPRING — SUMMER 2026</div>
            <h1 style={{fontSize: 88, fontWeight: 400, lineHeight: 0.95, margin:0, fontFamily:'"Shippori Mincho", serif', color:'var(--mta-navy)', letterSpacing:'-0.01em'}}>
              草原の<br/>記憶を、<br/><em style={{color:'var(--mta-blue)', fontStyle:'italic'}}>あなたの</em><br/>物語に。
            </h1>
            <p style={{fontSize: 15, lineHeight: 2, marginTop: 32, maxWidth: 460, color:'var(--mta-navy-80)'}}>
              モンゴルの広大な大地で、忘れられない一瞬を。20年の経験と日本語ガイドが、お客様だけの旅をご提案いたします。
            </p>
          </div>
          <div style={{display:'flex', gap: 16, alignItems:'center'}}>
            <button style={{background:'var(--mta-navy)', color:'#fff', border:'none', padding:'18px 40px', fontSize: 12, fontWeight:700, letterSpacing:'0.25em', cursor:'pointer'}}>ツアーを探す →</button>
            <button style={{background:'transparent', color:'var(--mta-navy)', border:'none', padding:'18px 0', fontSize: 12, fontWeight:700, letterSpacing:'0.25em', cursor:'pointer'}}>カタログ請求</button>
          </div>
        </div>
      </section>

      {/* Search bar — minimal inline */}
      <section style={{padding:'0 48px 56px'}}>
        <div style={{background:'var(--mta-navy)', color:'#fff', padding:'28px 32px', display:'grid', gridTemplateColumns:'auto 1fr 1fr 1fr 1fr auto', gap: 32, alignItems:'center'}}>
          <div style={{fontSize: 11, letterSpacing:'0.3em', fontFamily:'Oswald, sans-serif', fontWeight: 700}}>QUICK<br/>SEARCH</div>
          {[['エリア','モンゴル全域'],['季節','6月 — 9月'],['テーマ','文化体験'],['日数','7日〜10日']].map(([l,v])=>(
            <div key={l}>
              <div style={{fontSize: 9, letterSpacing:'0.2em', opacity: 0.6, fontFamily:'Oswald, sans-serif', marginBottom: 6}}>{l.toUpperCase()}</div>
              <div style={{fontSize: 14, fontWeight: 600}}>{v} ▾</div>
            </div>
          ))}
          <button style={{background:'var(--mta-blue)', color:'#fff', border:'none', padding:'14px 28px', fontSize: 12, fontWeight:700, letterSpacing:'0.2em', cursor:'pointer'}}>検索 →</button>
        </div>
      </section>

      {/* Editorial: stats as quote */}
      <section style={{padding:'60px 48px', borderTop:'1px solid var(--mta-line)', borderBottom:'1px solid var(--mta-line)', background:'var(--mta-paper)'}}>
        <div style={{display:'grid', gridTemplateColumns:'1fr 2fr', gap: 80, alignItems:'center'}}>
          <div style={{fontSize: 13, letterSpacing:'0.3em', color:'var(--mta-blue)', fontWeight:700, fontFamily:'Oswald, sans-serif'}}>BY THE NUMBERS<br/>— 数字で見る私たち</div>
          <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap: 40}}>
            {[['20','年の実績'],['12,000+','名の送客'],['25','名の現地ガイド'],['98%','の満足度']].map(([n,l],i)=>(
              <div key={i} style={{borderLeft:'2px solid var(--mta-blue)', paddingLeft: 20}}>
                <div style={{fontSize: 64, fontWeight: 400, fontFamily:'"Shippori Mincho", serif', color:'var(--mta-navy)', lineHeight: 1}}>{n}</div>
                <div style={{fontSize: 12, marginTop: 10, color:'var(--mta-muted)'}}>{l}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Tour categories — editorial grid */}
      <section style={{padding:'80px 48px'}}>
        <div style={{display:'grid', gridTemplateColumns:'1fr 3fr', gap: 60, marginBottom: 40}}>
          <div>
            <div style={{fontSize: 11, letterSpacing:'0.3em', color:'var(--mta-blue)', fontWeight:700, fontFamily:'Oswald, sans-serif', marginBottom: 14}}>JOURNEYS — № 01</div>
            <h2 style={{fontSize: 48, margin: 0, fontFamily:'"Shippori Mincho", serif', fontWeight: 400, lineHeight: 1.1, color:'var(--mta-navy)'}}>八つの<br/>旅のかたち。</h2>
          </div>
          <p style={{fontSize: 15, lineHeight: 2, color:'var(--mta-navy-80)', maxWidth: 600, alignSelf:'end', margin: 0}}>
            モンゴルの旅には、八つの顔がございます。草原を駆ける馬の旅。砂漠の沈黙。祭りの熱狂。鷹と狩人の冬。あなたに寄り添う一つを、共に見つけてまいりましょう。
          </p>
        </div>
        <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap: 20}}>
          {TOURS.map(t => <TourCard key={t.id} tour={t} />)}
        </div>
      </section>

      {/* Magazine — story strip */}
      <section style={{padding:'80px 48px', background:'var(--mta-navy)', color:'#fff'}}>
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap: 80, alignItems:'center'}}>
          <div>
            <div style={{fontSize: 11, letterSpacing:'0.4em', color:'var(--mta-blue-70)', fontWeight:700, fontFamily:'Oswald, sans-serif', marginBottom: 18}}>THE STORY</div>
            <h2 style={{fontSize: 56, margin:'0 0 32px', fontFamily:'"Shippori Mincho", serif', fontWeight: 400, lineHeight: 1.15}}>
              二十年、<br/>草原を走り続けて。
            </h2>
            <p style={{fontSize: 15, lineHeight: 2.1, opacity: 0.85, maxWidth: 480}}>
              2006年、ウランバートルの小さな事務所から始まりました。日本のお客様に、本物のモンゴルを。その想いだけを胸に、私たちは今日まで歩んでまいりました。
            </p>
            <button style={{marginTop: 36, background:'transparent', color:'#fff', border:'1px solid rgba(255,255,255,0.5)', padding:'18px 40px', fontSize: 12, fontWeight:700, letterSpacing:'0.25em', cursor:'pointer'}}>沿革を読む →</button>
          </div>
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap: 16}}>
            <div className="img-ph" data-label="2006 — FOUNDED" style={{height: 280, background:'linear-gradient(135deg, #5a4a3e, #0e2142)'}}/>
            <div className="img-ph" data-label="GUIDE TEAM" style={{height: 280, background:'linear-gradient(135deg, #0077BE, #0e2142)', marginTop: 40}}/>
          </div>
        </div>
      </section>

      <FloatingActions/>
      <Footer/>
    </div>
  );
};

Object.assign(window, { VariationB });