// Variation C — Immersive Cinematic: dark, large imagery, asymmetric

// モンゴル12の魅力 — 4 categories × 3 items
const APPEAL_CATEGORIES = [
  {
    en: 'ACCESS',
    ja: '近くて、安心。',
    sub: '日本から、ぐっと近い国。',
    items: [
      { ja: 'アクセス良好', en: 'DIRECT FLIGHTS FROM TOKYO' },
      { ja: '治安が良くて親日国', en: 'SAFE & PRO-JAPAN' },
      { ja: '時差わずか1時間', en: 'JUST 1 HOUR AHEAD' },
    ],
  },
  {
    en: 'ENCOUNTER',
    ja: '出会いと体験。',
    sub: 'ここでしかない、人と時間。',
    items: [
      { ja: '世界トップクラスの星空観賞', en: 'WORLD-CLASS STARGAZING' },
      { ja: '遊牧民と必ず会える', en: 'MEET REAL NOMADS' },
      { ja: '街歩きも楽しい', en: 'VIBRANT CITY STROLL · ULAANBAATAR' },
    ],
  },
  {
    en: 'NATURE',
    ja: '心ほどける、大自然。',
    sub: '夏でも、涼やかに。',
    items: [
      { ja: '夏でも涼しい', en: 'COOL SUMMER ESCAPE' },
      { ja: '果てしない大草原', en: 'ENDLESS STEPPE · HORIZONS' },
      { ja: '可愛いゲルに宿泊', en: 'STAY IN A TRADITIONAL GER' },
    ],
  },
  {
    en: 'DESTINATIONS',
    ja: 'モンゴルを代表する絶景。',
    sub: '一度は、訪れたい場所。',
    items: [
      { ja: '手つかずの自然とのふれあい', en: 'UNTOUCHED WILDERNESS' },
      { ja: '青い真珠フブスグル湖', en: 'BLUE PEARL — KHUVSGUL LAKE' },
      { ja: '最大の観光地ゴビ砂漠', en: 'ICONIC GOBI DESERT' },
    ],
  },
];

// (starfield removed — appeal section uses a tinted panel bg instead)

const MENU_ITEMS = [
  { label: 'ツアーを探す', sub: 'FIND A TOUR', dropdown: true },
  { label: 'オーダーメイドの旅', sub: 'CUSTOM · CONTACT' },
  { label: '法人のお客様', sub: 'BUSINESS · MICE' },
];

const NAV_DROPDOWN_ICONS = {
  'エリアで探す': (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="0.8" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 2C8.5 2 6 4.8 6 8.2c0 4.5 6 13 6 13s6-8.5 6-13C18 4.8 15.5 2 12 2z"/>
      <circle cx="12" cy="8.2" r="1.5"/>
    </svg>
  ),
  'テーマで探す': (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="0.8" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 3.5 13.8 9.2 19.8 9.5 15 13.2 16.6 19 12 15.7 7.4 19 9 13.2 4.2 9.5 10.2 9.2 12 3.5z"/>
    </svg>
  ),
  '季節で探す': (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="0.8" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="12" r="3.5"/>
      <path d="M12 4.5v1.5M12 18v1.5M4.5 12h1.5M18 12h1.5M6.5 6.5l1 1M16.5 16.5l1 1M6.5 17.5l1-1M16.5 7.5l1-1"/>
    </svg>
  ),
};

const VariationC = ({ tweaks }) => {
  const [activeIdx, setActiveIdx] = React.useState(0);
  const featured = TOURS.slice(0, 4);
  return (
    <div style={{background:'#06101e', color:'#fff', minHeight: 900, position:'relative'}}>
      {/* Floating header */}
      <SiteHeader/>

      {/* Hero — full bleed cinematic with side index */}
      <section style={{position:'relative', height: 880, overflow:'hidden'}}>
        <HeroVideo palette={featured[activeIdx].id === 'gobi' ? 'desert' : (featured[activeIdx].id === 'eagle' ? 'night' : 'steppe')}/>
        <div style={{position:'absolute', inset:0, background:'linear-gradient(90deg, rgba(0,0,0,0.65) 0%, transparent 50%, rgba(0,0,0,0.4) 100%)'}}/>

        {/* center copy */}
        <div style={{position:'absolute', inset:0, display:'flex', alignItems:'center', padding:'0 56px'}}>
          <div style={{maxWidth: 720}}>
            <div style={{display:'flex', alignItems:'center', gap: 14, fontSize: 11, letterSpacing:'0.4em', opacity: 0.85, marginBottom: 28, fontFamily:'Oswald, sans-serif'}}>
              <div style={{width: 56, height: 1, background:'#fff'}}/>
              MONGOLIA · {featured[activeIdx].subtitle.toUpperCase()}
            </div>
            <h1 style={{fontSize: 110, fontWeight: 900, lineHeight: 0.92, margin:0, fontFamily:'"Shippori Mincho", serif', letterSpacing:'-0.02em'}}>
              {({
                nomad1: <>風と、<br/>馬と、<br/>大地と。</>,
                nomad2: <>初めての、<br/>草原と<br/>青い空。</>,
                nomad3: <>千年の、<br/>暮らしを<br/>ともに。</>,
                nomad4: <>季節を、<br/>選ばない<br/>草原。</>,
              })[featured[activeIdx].id] || <>風と、<br/>馬と、<br/>大地と。</>}
            </h1>
            <p style={{fontSize: 16, lineHeight: 1.9, marginTop: 32, opacity: 0.85, maxWidth: 480}}>
              {featured[activeIdx].id === 'horseback' && <>草原で暮らす遊牧民の家を訪ね、馬に乗る。<br/>何百年と続いてきた営みが、いまもそこにあります。</>}
              {featured[activeIdx].id === 'gobi' && <>昼は果てしない砂と岩、夜は降るような星空。<br/>街では味わえない静けさが、ゴビにはあります。</>}
              {featured[activeIdx].id === 'naadam' && <>相撲・競馬・弓射。国を挙げての夏祭りです。<br/>毎年7月、街じゅうが熱気に包まれます。</>}
              {featured[activeIdx].id === 'eagle' && <>鷲を相棒に狩りをする、カザフの人々。<br/>西部アルタイに、その暮らしが受け継がれています。</>}
            </p>
            <div style={{display:'flex', gap: 16, marginTop: 40}}>
              <button style={{background:'var(--mta-blue)', color:'#fff', border:'none', padding:'18px 44px', fontSize: 12, fontWeight:700, letterSpacing:'0.25em', cursor:'pointer'}}>ツアー一覧 →</button>
            </div>
          </div>
        </div>

        {/* right side — featured selector */}
        <div style={{position:'absolute', right: 56, top: '50%', transform:'translateY(-50%)', width: 280, display:'flex', flexDirection:'column', gap: 12}}>
          <div style={{fontSize: 10, letterSpacing:'0.4em', opacity: 0.6, marginBottom: 12, fontFamily:'Oswald, sans-serif'}}>FEATURED — 04</div>
          {featured.map((t, i) => (
            <div key={t.id} onClick={()=>setActiveIdx(i)} style={{
              padding:'16px 18px',
              background: i === activeIdx ? 'rgba(0,119,190,0.95)' : 'rgba(255,255,255,0.06)',
              backdropFilter:'blur(8px)',
              border:'1px solid rgba(255,255,255,0.12)',
              cursor:'pointer', transition:'all .3s',
            }}>
              <div style={{fontSize: 9, letterSpacing:'0.25em', opacity: 0.8, fontFamily:'Oswald, sans-serif'}}>0{i+1} · {t.subtitle.toUpperCase()}</div>
              <div style={{fontSize: 13, fontWeight: 700, marginTop: 6}}>{t.title}</div>
            </div>
          ))}
        </div>

        {/* bottom search strip */}
        <SearchStrip/>
      </section>

      {/* Trust band — local agency strengths */}
      <section style={{padding:'100px 56px 80px'}}>
        <div style={{maxWidth: 920, margin:'0 auto', textAlign:'center'}}>
          <div style={{fontSize: 11, letterSpacing:'0.4em', color:'var(--mta-blue-70)', fontFamily:'Oswald, sans-serif', fontWeight: 700, marginBottom: 20}}>SINCE 2006 · ULAANBAATAR</div>
          <h2 style={{fontSize: 44, margin: '0 0 32px', fontFamily:'"Shippori Mincho", serif', fontWeight: 400, lineHeight: 1.35}}>ウランバートルから、<br/>日本のお客様をご案内しています。</h2>
          <p style={{fontSize: 16, lineHeight: 2.1, opacity: 0.82, margin: 0, maxWidth: 760, marginLeft:'auto', marginRight:'auto'}}>
            私たちはモンゴルに拠点を置く、現地の旅行会社です。<br/>
            日本語のできるスタッフが、行程のご相談から現地での手配まで一貫して担当します。<br/>
            ホテルやキャンプは実際に足を運んで確かめ、季節や道路の状況を見ながら、無理のない旅をご提案します。<br/>
            「こんなことはできますか」というご相談から、どうぞお気軽に。
          </p>
        </div>
      </section>

      {/* モンゴル十二の魅力 — Editorial appeal section */}
      <section style={{
        padding:'100px 56px 120px',
        position:'relative',
        background:'linear-gradient(180deg, #0a1d33 0%, #0d2440 50%, #0a1d33 100%)',
        borderTop:'1px solid rgba(0,119,190,0.35)',
        borderBottom:'1px solid rgba(0,119,190,0.35)',
        boxShadow:'inset 0 1px 0 rgba(255,255,255,0.04), inset 0 -1px 0 rgba(255,255,255,0.04)',
      }}>
        {/* subtle brand-blue glow at top */}
        <div style={{position:'absolute', top: 0, left: 0, right: 0, height: 220, pointerEvents:'none', background:'radial-gradient(ellipse 60% 100% at 50% 0%, rgba(0,119,190,0.22), transparent 70%)'}}/>

        <div style={{position:'relative'}}>
          {/* Section header */}
          <div style={{display:'grid', gridTemplateColumns:'auto 1fr auto', alignItems:'flex-end', gap: 56, marginBottom: 80, paddingBottom: 40, borderBottom:'1px solid rgba(255,255,255,0.12)'}}>
            <div>
              <div style={{fontSize: 11, letterSpacing:'0.4em', color:'var(--mta-blue-70)', fontFamily:'Oswald, sans-serif', fontWeight: 700, marginBottom: 18}}>WHY MONGOLIA</div>
              <h2 style={{fontSize: 64, margin: 0, fontFamily:'"Shippori Mincho", serif', fontWeight: 400, lineHeight: 1.05, letterSpacing:'-0.01em'}}>
                訪れたくなる、<br/>十二の理由。
              </h2>
            </div>
            <div style={{display:'flex', alignItems:'flex-end', justifyContent:'center'}}>
              <div style={{fontFamily:'Oswald, sans-serif', fontWeight: 200, fontSize: 200, lineHeight: 0.85, color:'rgba(255,255,255,0.08)', letterSpacing:'-0.03em'}}>12</div>
            </div>
            <div style={{maxWidth: 320, paddingBottom: 18}}>
              <p style={{fontSize: 14, lineHeight: 2, opacity: 0.78, margin: 0}}>
                「行ってみて、はじめて好きになった」。<br/>
                日本のお客様から、そんな声をよくいただきます。<br/>
                また行きたいと言っていただける理由を、12にまとめました。
              </p>
            </div>
          </div>

          {/* 4 category columns */}
          <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap: 0}}>
            {APPEAL_CATEGORIES.map((cat, ci) => (
              <div key={cat.en} style={{padding: '0 28px', borderLeft: ci > 0 ? '1px solid rgba(255,255,255,0.08)' : 'none'}}>
                {/* Category header */}
                <div style={{marginBottom: 44}}>
                  <div style={{display:'flex', alignItems:'center', gap: 12, marginBottom: 14}}>
                    <div style={{width: 28, height: 1, background:'var(--mta-blue-70)'}}/>
                    <div style={{fontSize: 10, letterSpacing:'0.35em', color:'var(--mta-blue-70)', fontFamily:'Oswald, sans-serif', fontWeight: 700}}>{cat.en}</div>
                  </div>
                  <div style={{fontSize: 22, fontWeight: 500, fontFamily:'"Shippori Mincho", serif', lineHeight: 1.4, marginBottom: 6}}>
                    {cat.ja}
                  </div>
                  <div style={{fontSize: 12, opacity: 0.55, lineHeight: 1.7}}>{cat.sub}</div>
                </div>

                {/* 3 items */}
                <div style={{display:'flex', flexDirection:'column', gap: 28}}>
                  {cat.items.map((it, ii) => {
                    const num = ci * 3 + ii + 1;
                    return (
                      <div key={ii} style={{position:'relative', paddingBottom: 24, borderBottom: ii < 2 ? '1px solid rgba(255,255,255,0.05)' : 'none'}}>
                        <div style={{display:'flex', alignItems:'baseline', gap: 14, marginBottom: 12}}>
                          <div style={{fontSize: 44, fontFamily:'Oswald, sans-serif', fontWeight: 200, color:'var(--mta-blue-70)', lineHeight: 1, letterSpacing:'-0.02em'}}>
                            {String(num).padStart(2, '0')}
                          </div>
                          <div style={{flex: 1, height: 1, background:'rgba(255,255,255,0.08)', alignSelf:'center', marginTop: 4}}/>
                        </div>
                        <div style={{fontSize: 17, fontWeight: 700, lineHeight: 1.5, fontFamily:'"Shippori Mincho", serif', marginBottom: 8}}>
                          {it.ja}
                        </div>
                        <div style={{fontSize: 9, letterSpacing:'0.22em', fontFamily:'Oswald, sans-serif', opacity: 0.5, fontWeight: 500, lineHeight: 1.5}}>
                          {it.en}
                        </div>
                      </div>
                    );
                  })}
                </div>
              </div>
            ))}
          </div>

          {/* Footer CTA */}
          <div style={{marginTop: 80, paddingTop: 40, borderTop:'1px solid rgba(255,255,255,0.08)', display:'flex', justifyContent:'space-between', alignItems:'center'}}>
            <div style={{fontSize: 13, opacity: 0.7, fontFamily:'"Shippori Mincho", serif', lineHeight: 1.7}}>
              ひとつでも気になるものがあれば、それで十分です。
            </div>
            <button style={{background:'transparent', color:'#fff', border:'1px solid rgba(255,255,255,0.4)', padding:'16px 36px', fontSize: 11, fontWeight: 700, letterSpacing:'0.3em', cursor:'pointer'}}>
              モンゴル基本情報 →
            </button>
          </div>
        </div>
      </section>

      {/* Tours — cinematic carousel */}
      <section style={{padding:'40px 56px 100px'}}>
        <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-end', marginBottom: 40}}>
          <div>
            <div style={{fontSize: 11, letterSpacing:'0.4em', color:'var(--mta-blue-70)', fontFamily:'Oswald, sans-serif', fontWeight: 700, marginBottom: 12}}>ALL JOURNEYS</div>
            <h2 style={{fontSize: 40, margin:0, fontFamily:'"Shippori Mincho", serif', fontWeight: 400}}>すべての旅</h2>
          </div>
          <div style={{display:'flex', gap: 12}}>
            <button style={{width:48, height:48, background:'rgba(255,255,255,0.06)', color:'#fff', border:'1px solid rgba(255,255,255,0.15)', cursor:'pointer'}}>←</button>
            <button style={{width:48, height:48, background:'var(--mta-blue)', color:'#fff', border:'none', cursor:'pointer'}}>→</button>
          </div>
        </div>
        <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap: 16}}>
          {TOURS.slice(0,8).map((t,i) => (
            <div key={t.id} style={{background:'rgba(255,255,255,0.04)', border:'1px solid rgba(255,255,255,0.08)', overflow:'hidden', cursor:'pointer'}}>
              <div className="img-ph" data-label={t.img} style={{
                height: 280,
                background: `linear-gradient(180deg, transparent 40%, rgba(6,16,30,0.95)), linear-gradient(135deg, ${t.color}, ${t.color}88)`,
                position:'relative',
              }}>
                <div style={{position:'absolute', top: 16, left: 16, fontSize: 10, letterSpacing:'0.3em', fontFamily:'Oswald, sans-serif', opacity: 0.85}}>0{i+1}</div>
                <div style={{position:'absolute', bottom: 18, left: 18, right: 18}}>
                  <div style={{fontSize: 10, letterSpacing:'0.25em', color:'var(--mta-blue-70)', fontFamily:'Oswald, sans-serif', fontWeight: 700}}>{t.subtitle.toUpperCase()}</div>
                  <div style={{fontSize: 16, fontWeight: 700, marginTop: 8}}>{t.title}</div>
                </div>
              </div>
              <div style={{padding:'14px 18px', display:'flex', justifyContent:'space-between', fontSize: 11, opacity: 0.7}}>
                <span>{t.days}</span>
                <span style={{fontWeight: 700, color:'var(--mta-blue-70)', fontFamily:'Oswald, sans-serif'}}>{t.price}</span>
              </div>
            </div>
          ))}
        </div>
      </section>

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

// Search strip with dropdowns
const SEARCH_OPTIONS = {
  エリア: ['すべて', '北モンゴル', '中央モンゴル', 'ウランバートル近郊', '東モンゴル', '南モンゴル(ゴビ)', '西モンゴル'],
  季節: ['すべて', '春（4〜5月）', '夏（6〜8月）', '秋（9〜10月）', '冬（11〜3月）'],
  テーマ: ['すべて', '自然・大草原', '文化・歴史', 'アクティビティ', '祭り・イベント', '美食・温泉', '法人・MICE'],
  日数: ['すべて', '半日〜1日', '2-5日', '6-7日', '8-10日', '11日以上'],
};
const SEARCH_FIELDS = [
  ['エリア', 'すべて'],
  ['季節', 'すべて'],
  ['テーマ', 'すべて'],
  ['日数', 'すべて'],
];

const SearchStrip = () => {
  const [values, setValues] = React.useState(Object.fromEntries(SEARCH_FIELDS));
  const [open, setOpen] = React.useState(null);

  React.useEffect(() => {
    const close = (e) => {
      if (!e.target.closest('[data-search-field]')) setOpen(null);
    };
    document.addEventListener('click', close);
    return () => document.removeEventListener('click', close);
  }, []);

  return (
    <div style={{position:'absolute', bottom: 0, left:0, right:0, padding:'24px 56px', background:'rgba(6,16,30,0.85)', backdropFilter:'blur(12px)', borderTop:'1px solid rgba(255,255,255,0.08)', display:'grid', gridTemplateColumns:'auto 1fr 1fr 1fr 1fr auto', gap: 28, alignItems:'center', zIndex: 5}}>
      <div style={{fontSize: 11, letterSpacing:'0.3em', fontFamily:'Oswald, sans-serif', opacity: 0.7}}>探す ✦</div>
      {SEARCH_FIELDS.map(([label]) => (
        <div key={label} data-search-field
             onClick={(e) => { e.stopPropagation(); setOpen(open === label ? null : label); }}
             style={{borderLeft:'1px solid rgba(255,255,255,0.15)', paddingLeft: 20, position:'relative', cursor:'pointer'}}>
          <div style={{fontSize: 9, letterSpacing:'0.2em', opacity: 0.5, fontFamily:'Oswald, sans-serif'}}>{label.toUpperCase()}</div>
          <div style={{fontSize: 13, fontWeight: 600, marginTop: 4, display:'flex', alignItems:'center', justifyContent:'space-between', gap: 8, paddingRight: 6}}>
            <span>{values[label]}</span>
            <span style={{fontSize: 9, opacity: 0.6, transition:'transform .2s', transform: open === label ? 'rotate(180deg)' : 'none'}}>▾</span>
          </div>
          {open === label && (
            <div style={{position:'absolute', bottom: 'calc(100% + 12px)', left: 12, right: -12, background:'#0e2142', border:'1px solid rgba(255,255,255,0.18)', boxShadow:'0 -16px 40px rgba(0,0,0,0.5)', zIndex: 100, padding:'6px 0', minWidth: 220}}>
              {SEARCH_OPTIONS[label].map(opt => (
                <div key={opt}
                  onClick={(e) => { e.stopPropagation(); setValues(v => ({...v, [label]: opt})); setOpen(null); }}
                  style={{padding:'12px 18px', fontSize: 13, cursor:'pointer', color:'#fff',
                    background: values[label] === opt ? 'rgba(0,119,190,0.4)' : 'transparent',
                    fontWeight: values[label] === opt ? 700 : 500,
                  }}
                  onMouseEnter={e => e.currentTarget.style.background = 'rgba(0,119,190,0.6)'}
                  onMouseLeave={e => e.currentTarget.style.background = values[label] === opt ? 'rgba(0,119,190,0.4)' : 'transparent'}
                >{opt}</div>
              ))}
            </div>
          )}
        </div>
      ))}
      <button style={{background:'var(--mta-blue)', color:'#fff', border:'none', padding:'14px 32px', fontSize: 11, fontWeight:700, letterSpacing:'0.25em', cursor:'pointer'}}>検索 →</button>
    </div>
  );
};

Object.assign(window, { VariationC, SearchStrip });