// Variation A — Classic Luxury (JTB-inspired): full-bleed video hero, large copy, prominent search box
const VariationA = ({ tweaks }) => {
  const [tab, setTab] = React.useState('area');
  return (
    <div style={{background:'var(--mta-paper)', color:'var(--mta-ink)', minHeight: 900}}>
      {/* Header */}
      <header style={{position:'absolute', top:0, left:0, right:0, zIndex: 10, padding:'22px 56px', display:'flex', alignItems:'center', justifyContent:'space-between', color:'#fff'}}>
        <MTALogo color="#fff" size={1} />
        <nav style={{display:'flex', gap: 36, fontSize: 13, fontWeight: 500, letterSpacing:'0.06em'}}>
          {['ツアーを探す','モンゴルについて','法人・MICE','ブログ','私たちについて','よくある質問'].map(x=>(
            <a key={x} style={{color:'#fff', textDecoration:'none', cursor:'pointer'}}>{x}</a>
          ))}
        </nav>
        <div style={{display:'flex', gap: 14, alignItems:'center'}}>
          <span style={{fontSize: 12, opacity: 0.85}}>JP / EN / MN</span>
          <button style={{background:'var(--mta-blue)', color:'#fff', border:'none', padding:'10px 22px', fontSize: 12, fontWeight:700, letterSpacing:'0.15em', cursor:'pointer'}}>お問い合わせ</button>
        </div>
      </header>

      {/* Hero */}
      <section style={{position:'relative', height: 720, color:'#fff', overflow:'hidden'}}>
        <HeroVideo palette="steppe" />
        <div style={{position:'absolute', inset:0, display:'flex', flexDirection:'column', justifyContent:'center', padding:'0 56px'}}>
          <div style={{maxWidth: 720}}>
            <div style={{fontSize: 12, letterSpacing:'0.4em', opacity: 0.85, marginBottom: 24, fontFamily:'Oswald, sans-serif'}}>SINCE 2006 — JAPAN'S TRUSTED MONGOLIA SPECIALIST</div>
            <h1 style={{fontSize: 76, fontWeight: 900, lineHeight: 1.05, margin:0, fontFamily:'"Shippori Mincho", serif', letterSpacing:'0.02em'}}>
              地平線の<br/>向こうへ。
            </h1>
            <p style={{fontSize: 17, lineHeight: 1.9, marginTop: 28, opacity: 0.9, maxWidth: 560}}>
              草原を走る馬の音、夜空を覆う満天の星、遊牧民のおもてなし。<br/>
              本物のモンゴルを、日本語ガイドと共に。
            </p>
          </div>
        </div>

        {/* search box overlay */}
        <div style={{position:'absolute', left:56, right:56, bottom: -40, background:'#fff', boxShadow:'0 30px 60px -20px rgba(14,33,66,0.4)', padding: 0, color:'var(--mta-ink)'}}>
          <SearchDropdownRow />
        </div>
      </section>

      {/* Stats */}
      <section style={{padding:'100px 56px 60px', background:'var(--mta-paper)'}}>
        <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap: 56, borderTop:'1px solid var(--mta-line)', borderBottom:'1px solid var(--mta-line)', padding:'40px 0'}}>
          {[
            ['20', '年の実績', '2006年創業'],
            ['12,000+', '名のお客様', '日本からの送客実績'],
            ['25', '名の日本語ガイド', '現地常駐'],
            ['98%', 'のリピート意向', 'お客様アンケート'],
          ].map(([n, l, s], i) => (
            <div key={i}>
              <div style={{fontSize: 56, fontWeight: 900, color: 'var(--mta-blue)', fontFamily:'Oswald, sans-serif', lineHeight: 1}}>{n}</div>
              <div style={{marginTop: 12, fontSize: 14, fontWeight: 700, color: 'var(--mta-navy)'}}>{l}</div>
              <div style={{fontSize: 11, color: 'var(--mta-muted)', marginTop: 4}}>{s}</div>
            </div>
          ))}
        </div>
      </section>

      {/* Tour grid */}
      <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.3em', color:'var(--mta-blue)', fontWeight:700, marginBottom: 10, fontFamily:'Oswald, sans-serif'}}>FEATURED JOURNEYS</div>
            <h2 style={{fontSize: 40, margin:0, fontFamily:'"Shippori Mincho", serif', fontWeight: 700, color:'var(--mta-navy)'}}>厳選ツアー</h2>
          </div>
          <a style={{fontSize: 12, fontWeight: 700, color:'var(--mta-navy)', letterSpacing:'0.2em', cursor:'pointer'}}>すべて見る →</a>
        </div>
        <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap: 24}}>
          {TOURS.slice(0,8).map(t => <TourCard key={t.id} tour={t} />)}
        </div>
      </section>

      {/* About strip */}
      <section style={{padding:'80px 56px', background:'var(--mta-navy)', color:'#fff'}}>
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap: 80, alignItems:'center'}}>
          <div className="img-ph" data-label="OUR TEAM IN ULAANBAATAR" style={{height: 380, background:'linear-gradient(135deg, #0077BE, #0e2142)'}} />
          <div>
            <div style={{fontSize: 11, letterSpacing:'0.3em', color:'var(--mta-blue-70)', fontWeight:700, marginBottom: 14, fontFamily:'Oswald, sans-serif'}}>ABOUT US</div>
            <h2 style={{fontSize: 36, margin:'0 0 24px', fontFamily:'"Shippori Mincho", serif', lineHeight: 1.3}}>20年間、日本とモンゴルを<br/>結び続けて。</h2>
            <p style={{fontSize: 15, lineHeight: 2, opacity: 0.85, maxWidth: 520}}>
              Mongol Travel Agencyは、Burd Groupの一員として、2006年の創業以来、日本のお客様にモンゴルの本物の魅力をお届けしてまいりました。現地法人ならではの細やかなサポートと、日本語堪能なガイドによる安心の旅をお約束いたします。
            </p>
            <button style={{marginTop: 32, background:'transparent', color:'#fff', border:'1px solid #fff', padding:'16px 36px', fontSize: 12, fontWeight:700, letterSpacing:'0.2em', cursor:'pointer'}}>会社について →</button>
          </div>
        </div>
      </section>

      {/* Footer */}
      <Footer />
      <style>{`@keyframes kenburns { 0%{transform:scale(1) translate(0,0)} 100%{transform:scale(1.15) translate(-3%,-2%)} }`}</style>
    </div>
  );
};

const SearchField = ({label, value}) => (
  <div>
    <div style={{fontSize: 10, letterSpacing:'0.2em', color:'var(--mta-muted)', fontWeight:700, marginBottom: 8, fontFamily:'Oswald, sans-serif'}}>{label}</div>
    <div style={{fontSize: 15, fontWeight: 600, color:'var(--mta-navy)', borderBottom:'1px solid var(--mta-line)', paddingBottom: 10, display:'flex', justifyContent:'space-between', alignItems:'center'}}>
      <span>{value}</span><span style={{color:'var(--mta-muted)'}}>▾</span>
    </div>
  </div>
);

const Footer = () => (
  <footer style={{background:'#06101e', color:'rgba(255,255,255,0.7)', padding:'72px 56px 32px'}}>
    <div style={{display:'grid', gridTemplateColumns:'1.5fr 1fr 1fr 1fr', gap: 60, paddingBottom: 48, borderBottom:'1px solid rgba(255,255,255,0.1)'}}>
      <div>
        <MTALogo color="#fff" size={1.1}/>
        <div style={{marginTop: 20, display:'inline-flex', alignItems:'center', gap: 12, padding:'9px 16px', border:'1px solid rgba(255,255,255,0.25)'}}>
          <span style={{fontSize: 11, letterSpacing:'0.3em', fontFamily:'Oswald, sans-serif', fontWeight: 700, color:'#fff'}}>SINCE 2006</span>
          <span style={{width: 1, height: 12, background:'rgba(255,255,255,0.3)'}}></span>
          <span style={{fontSize: 11.5, letterSpacing:'0.12em', color:'#fff', fontWeight: 600}}>創業20周年</span>
        </div>
        <p style={{fontSize: 12, lineHeight: 2, marginTop: 16, maxWidth: 320}}>2006年の創業から20年。ウランバートルに拠点を置く、モンゴル現地の旅行会社です。日本語のできるスタッフが、ご相談から現地での手配まで担当します。</p>
      </div>
      {[
        {h:'ツアー', l:['ツアー一覧（すべて）','エリアから探す','テーマから探す','季節から探す','オーダーメイドの旅']},
        {h:'会社情報', l:['会社概要','よくあるご質問','法人のお客様','お問い合わせ']},
        {h:'お問い合わせ', l:['ウランバートル本社','+976-7011-5005','mogi.mta@gmail.com','平日 10:00〜17:00 (現地時間)','土日祝日・年末年始休業']},
      ].map(c => (
        <div key={c.h}>
          <div style={{fontSize: 11, letterSpacing:'0.25em', color:'#fff', fontWeight:700, marginBottom: 18, fontFamily:'Oswald, sans-serif'}}>{c.h}</div>
          {c.l.map(x => <div key={x} style={{fontSize: 12, lineHeight: 2.2}}>{x}</div>)}
        </div>
      ))}
    </div>
    <div style={{display:'flex', justifyContent:'space-between', paddingTop: 28, fontSize: 11}}>
      <div>© 2026 Mongol Travel Agency LLC · Burd Group. All rights reserved.</div>
      <div style={{display:'flex', gap: 24}}>
        <a href="#p-privacy" style={{color:'inherit', textDecoration:'none'}}>プライバシーポリシー</a><a href="#p-terms" style={{color:'inherit', textDecoration:'none'}}>利用規約</a><a href="#p-about" style={{color:'inherit', textDecoration:'none'}}>事業者情報</a><a href="#p-sitemap" style={{color:'inherit', textDecoration:'none'}}>サイトマップ</a>
      </div>
    </div>
    <div style={{marginTop: 14, fontSize: 10.5, opacity: 0.55, lineHeight: 1.8}}>
      Mongol Travel Agency LLC は、モンゴル国の法令に基づき設立・運営される旅行会社です（モンゴル旅行業協会加盟）。本サイトの利用規約および個人情報の取扱いは、モンゴル国の法令に準拠します。
    </div>
  </footer>
);

// 3 dropdowns with icons for エリア / テーマ / 季節
const SEARCH_A_OPTIONS = {
  エリア: ['すべて', '北モンゴル', '中央モンゴル', 'ウランバートル近郊', '東モンゴル', '南モンゴル(ゴビ)', '西モンゴル'],
  テーマ: ['すべて', '遊牧民ホームステイ', '文化・歴史体験', 'テレルジ・大草原', 'ウランバートル市内', '撮影旅行'],
  季節: ['すべて', '春（4〜5月）', '夏（6〜8月）', '秋（9〜10月）', '冬（11〜3月）'],
};

const SearchIcons = {
  エリア: (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 21s-7-7.5-7-13a7 7 0 0 1 14 0c0 5.5-7 13-7 13Z"/>
      <circle cx="12" cy="8" r="2.5"/>
    </svg>
  ),
  テーマ: (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 2 14.5 9 22 9.5l-5.7 4.6L18 22l-6-3.8L6 22l1.7-7.9L2 9.5 9.5 9 12 2z"/>
    </svg>
  ),
  季節: (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="12" r="4"/>
      <path d="M12 2v3M12 19v3M2 12h3M19 12h3M4.5 4.5l2.1 2.1M17.4 17.4l2.1 2.1M4.5 19.5l2.1-2.1M17.4 6.6l2.1-2.1"/>
    </svg>
  ),
};

const SearchDropdownRow = () => {
  const [values, setValues] = React.useState({
    エリア: 'すべて',
    テーマ: 'すべて',
    季節: 'すべて',
  });
  const [open, setOpen] = React.useState(null);

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

  const fields = [
    { key: 'エリア', label: 'エリアで探す' },
    { key: 'テーマ', label: 'テーマで探す' },
    { key: '季節', label: '季節で探す' },
  ];

  return (
    <div style={{display:'grid', gridTemplateColumns:'1fr 1fr 1fr auto', alignItems:'stretch'}}>
      {fields.map((f, i) => (
        <div key={f.key} data-search-a
          onClick={(e) => { e.stopPropagation(); setOpen(open === f.key ? null : f.key); }}
          style={{
            position:'relative', padding:'24px 28px', cursor:'pointer',
            borderRight: i < 2 ? '1px solid var(--mta-line)' : 'none',
            display:'flex', alignItems:'center', gap: 16,
            background: open === f.key ? 'rgba(0,119,190,0.04)' : '#fff',
            transition: 'background .2s',
          }}
          onMouseEnter={e => { if (open !== f.key) e.currentTarget.style.background = 'rgba(0,119,190,0.04)'; }}
          onMouseLeave={e => { if (open !== f.key) e.currentTarget.style.background = '#fff'; }}
        >
          <div style={{color:'var(--mta-blue)', display:'flex', alignItems:'center', justifyContent:'center', width: 44, height: 44, border:'1px solid var(--mta-line)', borderRadius: '50%', flexShrink: 0}}>
            {SearchIcons[f.key]}
          </div>
          <div style={{flex: 1, minWidth: 0}}>
            <div style={{fontSize: 11, letterSpacing:'0.2em', color:'var(--mta-blue)', fontFamily:'Oswald, sans-serif', fontWeight: 700, marginBottom: 6}}>{f.label.toUpperCase()}</div>
            <div style={{fontSize: 16, fontWeight: 700, color:'var(--mta-navy)', display:'flex', alignItems:'center', justifyContent:'space-between', gap: 8}}>
              <span>{values[f.key]}</span>
              <span style={{fontSize: 11, color:'var(--mta-blue)', transition:'transform .2s', transform: open === f.key ? 'rotate(180deg)' : 'none'}}>▾</span>
            </div>
          </div>
          {open === f.key && (
            <div style={{position:'absolute', top:'calc(100% + 1px)', left: 0, right: 0, background:'#fff', boxShadow:'0 20px 40px rgba(14,33,66,0.18)', border:'1px solid var(--mta-line)', borderTop:'2px solid var(--mta-blue)', zIndex: 100}}>
              {SEARCH_A_OPTIONS[f.key].map(opt => (
                <div key={opt}
                  onClick={(e) => { e.stopPropagation(); setValues(v => ({...v, [f.key]: opt})); setOpen(null); }}
                  style={{
                    padding:'14px 24px', fontSize: 14, cursor:'pointer',
                    color: values[f.key] === opt ? 'var(--mta-blue)' : 'var(--mta-ink)',
                    fontWeight: values[f.key] === opt ? 700 : 500,
                    background: values[f.key] === opt ? 'rgba(0,119,190,0.06)' : '#fff',
                  }}
                  onMouseEnter={e => e.currentTarget.style.background = 'rgba(0,119,190,0.10)'}
                  onMouseLeave={e => e.currentTarget.style.background = values[f.key] === opt ? 'rgba(0,119,190,0.06)' : '#fff'}
                >{opt}</div>
              ))}
            </div>
          )}
        </div>
      ))}
      <button style={{background:'var(--mta-navy)', color:'#fff', border:'none', padding:'0 48px', fontWeight:700, fontSize:13, letterSpacing:'0.25em', cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'center', gap: 12}}>
        検索する
        <span style={{fontSize: 16}}>→</span>
      </button>
    </div>
  );
};

Object.assign(window, { VariationA, Footer, SearchField, SearchDropdownRow });