// Shared components for Mongol Travel Agency

const MTAMark = ({ size = 40, color = "currentColor" }) => (
  <svg width={size} height={size} viewBox="0 0 100 100" fill="none" stroke={color} strokeWidth="6" strokeLinecap="round" strokeLinejoin="round" style={{display:'inline-block', verticalAlign:'middle'}}>
    <circle cx="50" cy="50" r="6" fill={color} stroke="none"/>
    <path d="M50 12 L50 36 M44 18 L50 24 L56 18"/>
    <path d="M82 30 L62 42 M80 38 L72 40 L70 32"/>
    <path d="M82 70 L62 58 M70 68 L72 60 L80 62"/>
    <path d="M50 88 L50 64 M44 82 L50 76 L56 82"/>
    <path d="M18 70 L38 58 M30 68 L28 60 L20 62"/>
    <path d="M18 30 L38 42 M20 38 L28 40 L30 32"/>
    <circle cx="50" cy="50" r="20" strokeWidth="4"/>
  </svg>
);

const MTALogo = ({ color = "currentColor", size = 1 }) => (
  <img src={(window.__resources && window.__resources['mta-logo']) || '../assets/mta-logo-white.png'} alt="Mongol Travel Agency · Burd Group" style={{height: 56 * size, width: 'auto', display: 'block'}}/>
);

// Tour categories with placeholder gradients
const TOURS = [
  { id: 'horseback', code:'MTA-HRS-007', title: '大草原乗馬・遊牧民ホームステイ', subtitle: 'Steppe & Nomad Life', days: '7日間〜', price: '¥298,000〜', tag: '人気No.1', color: '#7a8b3a', img: 'STEPPE / GER CAMP' },
  { id: 'gobi', code:'MTA-GOBI-008', title: 'ゴビ砂漠探検', subtitle: 'Gobi Desert Expedition', days: '8日間〜', price: '¥358,000〜', tag: '冒険', color: '#c98a3e', img: 'GOBI DUNES / CAMEL' },
  { id: 'naadam', code:'MTA-NDM-006', title: 'ナーダム祭り観戦ツアー', subtitle: 'Naadam Festival', days: '6日間〜', price: '¥328,000〜', tag: '7月限定', color: '#a83a3a', img: 'NAADAM CEREMONY' },
  { id: 'eagle', code:'MTA-EGL-009', title: '鷹匠（イーグルハンター）体験', subtitle: 'Eagle Hunter Encounter', days: '9日間〜', price: '¥428,000〜', tag: '冬季', color: '#3a4a6b', img: 'EAGLE HUNTER / ALTAI' },
  { id: 'trek', code:'MTA-TRK-010', title: '登山・トレッキング', subtitle: 'Trekking the Altai', days: '10日間〜', price: '¥398,000〜', tag: 'アクティブ', color: '#456a55', img: 'ALTAI MOUNTAINS' },
  { id: 'rail', code:'MTA-RAIL-012', title: 'シベリア鉄道の旅', subtitle: 'Trans-Siberian Railway', days: '12日間〜', price: '¥548,000〜', tag: '長期', color: '#5a4a3e', img: 'TRANS-SIBERIAN RAIL' },
  { id: 'ub', code:'MTA-UB-004', title: 'ウランバートル都市観光', subtitle: 'Ulaanbaatar City', days: '4日間〜', price: '¥168,000〜', tag: '短期', color: '#3e5b7a', img: 'ULAANBAATAR SKYLINE' },
  { id: 'mice', code:'MTA-MICE-005', title: '法人視察・MICE', subtitle: 'Business & MICE', days: '応相談', price: '応相談', tag: '法人', color: '#0e2142', img: 'BUSINESS / CONFERENCE' },
];

const TourCard = ({ tour, layout = 'default' }) => (
  <div style={{
    background: 'var(--mta-paper)', borderRadius: 4,
    overflow: 'hidden', cursor: 'pointer',
    border: '1px solid var(--mta-line)',
    transition: 'all .3s ease',
  }}
  onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-4px)'; e.currentTarget.style.boxShadow = '0 16px 40px -12px rgba(14,33,66,0.25)'; }}
  onMouseLeave={e => { e.currentTarget.style.transform = ''; e.currentTarget.style.boxShadow = ''; }}
  >
    <div className="img-ph" data-label={tour.img} style={{
      height: 220,
      background: `linear-gradient(135deg, ${tour.color}cc, ${tour.color}), repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0 12px, transparent 12px 24px)`,
      position: 'relative',
    }}>
      <div style={{position:'absolute', top:14, left:14, background:'rgba(255,255,255,0.95)', color:'var(--mta-navy)', fontSize: 10, fontWeight: 700, padding: '5px 10px', letterSpacing:'0.15em'}}>{tour.tag}</div>
    </div>
    <div style={{padding: '20px 22px 22px'}}>
      <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', gap: 8, marginBottom: 8}}>
        <div style={{fontSize: 10, letterSpacing: '0.25em', color: 'var(--mta-blue)', fontWeight: 700, fontFamily:'Oswald, sans-serif'}}>{tour.subtitle}</div>
        {tour.code && <div style={{fontSize: 9, letterSpacing:'0.18em', fontFamily:'Oswald, sans-serif', fontWeight: 700, color:'var(--mta-navy)', border:'1px solid var(--mta-line)', padding:'2px 7px', background:'rgba(14,33,66,0.04)'}}>{tour.code}</div>}
      </div>
      <h3 style={{margin: 0, fontSize: 17, fontWeight: 700, color: 'var(--mta-ink)', lineHeight: 1.45}}>{tour.title}</h3>
      <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-end', marginTop: 18, paddingTop: 14, borderTop: '1px solid var(--mta-line)'}}>
        <div style={{fontSize: 11, color: 'var(--mta-muted)'}}>{tour.days}</div>
        <div style={{fontSize: 15, fontWeight: 700, color: 'var(--mta-navy)', fontFamily:'Oswald, sans-serif'}}>{tour.price}</div>
      </div>
    </div>
  </div>
);

// Animated hero "video" — slow ken-burns gradient
const HeroVideo = ({ palette = 'steppe' }) => {
  const palettes = {
    steppe: ['#3a4f6b', '#7a8b3a', '#c98a3e', '#0e2142'],
    night: ['#0e2142', '#0077BE', '#1f3556', '#0a1322'],
    desert: ['#c98a3e', '#a05a2c', '#3a2818', '#0e2142'],
  };
  const colors = palettes[palette] || palettes.steppe;
  return (
    <div style={{position:'absolute', inset:0, overflow:'hidden'}}>
      <div style={{
        position:'absolute', inset:'-10%',
        background: `radial-gradient(ellipse at 30% 40%, ${colors[1]}aa, transparent 50%), radial-gradient(ellipse at 70% 70%, ${colors[2]}88, transparent 60%), linear-gradient(180deg, ${colors[0]}, ${colors[3]})`,
        animation: 'kenburns 20s ease-in-out infinite alternate',
      }} />
      <div style={{position:'absolute', inset:0, background: 'radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.55) 100%)'}} />
      <svg style={{position:'absolute', inset:0, width:'100%', height:'100%', opacity:0.18, mixBlendMode:'screen'}}>
        <defs>
          <pattern id="grain" width="200" height="200" patternUnits="userSpaceOnUse">
            <filter id="n">
              <feTurbulence baseFrequency="0.9" numOctaves="3"/>
              <feColorMatrix values="0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.5 0"/>
            </filter>
            <rect width="200" height="200" filter="url(#n)"/>
          </pattern>
        </defs>
        <rect width="100%" height="100%" fill="url(#grain)"/>
      </svg>
    </div>
  );
};

// Shared site header (matches the floating header on the homepage)
const SITE_NAV_ITEMS = [
  { label: 'ツアーを探す', sub: 'FIND A TOUR', dropdown: true, items: [
    { label: 'エリアで探す', href: '#' },
    { label: 'テーマで探す', href: '#' },
    { label: '季節で探す', href: '#' },
  ]},
  { label: 'オーダーメイドの旅', sub: 'CUSTOM · CONTACT' },
  { label: '法人のお客様', sub: 'BUSINESS · MICE', dropdown: true, items: [
    { label: '企業・組織・団体', href: '11-corporate.html' },
    { label: '旅行会社', href: '12-travel-agency.html' },
  ]},
];

const SITE_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 SiteHeader = () => {
  const [navOpen, setNavOpen] = React.useState(null);
  return (
    <header style={{position:'absolute', top:0, left:0, right:0, zIndex: 20, padding:'28px 56px', display:'flex', alignItems:'center', justifyContent:'space-between'}}>
      <MTALogo color="#fff"/>
      <div style={{display:'flex', alignItems:'center', gap: 36, marginLeft:'auto'}}>
        <nav style={{display:'flex', gap: 36, fontSize: 14, fontWeight: 600, alignItems:'center'}}>
          {SITE_NAV_ITEMS.map(x => (
            <div key={x.label} style={{position:'relative'}}
              onMouseEnter={() => x.dropdown && setNavOpen(x.label)}
              onMouseLeave={() => x.dropdown && setNavOpen(null)}
            >
              <a style={{color:'#fff', cursor:'pointer', position:'relative', paddingBottom: 4, borderBottom:'1px solid transparent', transition:'border-color .2s', lineHeight: 1.3, textAlign:'center', display:'flex', flexDirection:'column', alignItems:'center', gap: 2,
                borderBottomColor: navOpen === x.label ? 'var(--mta-blue)' : 'transparent',
              }}
                onMouseEnter={e => e.currentTarget.style.borderBottomColor = 'var(--mta-blue)'}
                onMouseLeave={e => { if (navOpen !== x.label) e.currentTarget.style.borderBottomColor = 'transparent'; }}
              >
                <div style={{display:'flex', alignItems:'center', gap: 6}}>
                  {x.label}
                  {x.dropdown && <span style={{fontSize: 9, opacity: 0.7, transform: navOpen === x.label ? 'rotate(180deg)' : 'none', transition:'transform .2s'}}>▾</span>}
                </div>
                {x.sub && <div style={{fontSize: 9, fontWeight: 600, letterSpacing:'0.25em', fontFamily:'Oswald, sans-serif', opacity: 0.55, marginTop: 1}}>{x.sub}</div>}
              </a>
              {x.dropdown && navOpen === x.label && (
                <div style={{position:'absolute', top:'100%', left:'50%', transform:'translateX(-50%)', paddingTop: 16, minWidth: 260}}>
                  <div style={{position:'relative', background:'rgba(6,16,30,0.96)', backdropFilter:'blur(16px)', border:'1px solid rgba(255,255,255,0.15)', padding: 8, boxShadow:'0 30px 60px rgba(0,0,0,0.5)'}}>
                  <div style={{position:'absolute', top: -8, left:'50%', transform:'translateX(-50%) rotate(45deg)', width: 14, height: 14, background:'rgba(6,16,30,0.96)', borderTop:'1px solid rgba(255,255,255,0.15)', borderLeft:'1px solid rgba(255,255,255,0.15)'}}/>
                  {(x.items || []).map(opt => (
                    <a key={opt.label} href={opt.href} target="_top" style={{display:'flex', alignItems:'center', gap: 14, padding:'14px 16px', color:'#fff', cursor:'pointer', fontSize: 14, fontWeight: 600, transition:'background .15s', textDecoration:'none'}}
                      onMouseEnter={e => e.currentTarget.style.background = 'rgba(0,119,190,0.25)'}
                      onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
                      onClick={(e) => { if (opt.href && opt.href !== '#') { e.preventDefault(); e.stopPropagation(); window.top.location.href = opt.href; } }}
                    >
                      <span style={{color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', width: 18, fontSize: 18, lineHeight: 1, flexShrink: 0}} aria-hidden="true">・</span>
                      <span style={{flex: 1}}>{opt.label}</span>
                      <span style={{fontSize: 11, opacity: 0.5, fontFamily:'Oswald, sans-serif'}}>→</span>
                    </a>
                  ))}
                  </div>
                </div>
              )}
            </div>
          ))}
        </nav>
        <button onClick={() => window.dispatchEvent(new CustomEvent('mta-menu-toggle'))} style={{display:'flex', alignItems:'center', gap: 14, background:'rgba(255,255,255,0.08)', backdropFilter:'blur(8px)', color:'#fff', border:'1px solid rgba(255,255,255,0.25)', padding:'12px 22px', fontSize: 12, fontWeight:700, letterSpacing:'0.25em', cursor:'pointer', fontFamily:'Oswald, sans-serif'}}>
          <span style={{display:'flex', flexDirection:'column', gap: 4}}>
            <span style={{width: 18, height: 2, background:'currentColor'}}/>
            <span style={{width: 18, height: 2, background:'currentColor'}}/>
            <span style={{width: 12, height: 2, background:'currentColor'}}/>
          </span>
          MENU
        </button>
      </div>
    </header>
  );
};

const FloatingActions = () => {
  const [showTop, setShowTop] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setShowTop(window.scrollY > 400);
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const baseBtn = {
    width: 56, height: 56, borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center',
    cursor: 'pointer', border: 'none', boxShadow: '0 8px 24px rgba(0,0,0,0.35), 0 2px 6px rgba(0,0,0,0.25)',
    transition: 'transform .2s ease, opacity .25s ease, box-shadow .2s ease',
  };
  return (
    <div style={{ position: 'fixed', right: 22, bottom: 28, zIndex: 1000, display: 'flex', flexDirection: 'column', gap: 12, alignItems: 'center' }}>
      <a
        href="https://line.me/" target="_blank" rel="noopener" aria-label="LINEでお問い合わせ"
        style={{ ...baseBtn, background: '#06C755', color: '#fff', textDecoration: 'none', fontFamily: 'Oswald, sans-serif', position: 'relative' }}
        onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-2px)'; }}
        onMouseLeave={(e) => { e.currentTarget.style.transform = 'translateY(0)'; }}
      >
        <svg width="28" height="28" viewBox="0 0 32 32" fill="currentColor" aria-hidden="true">
          <path d="M16 3C8.27 3 2 8.06 2 14.3c0 5.59 4.97 10.27 11.69 11.16.46.1 1.07.3 1.23.7.14.36.09.91.05 1.27l-.2 1.18c-.06.36-.28 1.4 1.23.76 1.5-.64 8.13-4.78 11.09-8.19h0c2.05-2.25 3.04-4.54 3.04-7.08C30.13 8.06 23.86 3 16 3zM10.4 17.4H7.62c-.4 0-.73-.33-.73-.73v-5.56c0-.4.33-.73.73-.73.4 0 .73.33.73.73v4.83h2.05c.4 0 .73.33.73.73s-.33.73-.73.73zm2.94-.73c0 .4-.33.73-.73.73s-.73-.33-.73-.73v-5.56c0-.4.33-.73.73-.73.4 0 .73.33.73.73v5.56zm6.69 0c0 .31-.2.59-.5.69-.08.02-.16.04-.23.04-.23 0-.45-.11-.59-.29l-2.85-3.87v3.43c0 .4-.33.73-.73.73-.4 0-.73-.33-.73-.73v-5.56c0-.31.2-.59.5-.69.07-.02.15-.04.23-.04.22 0 .45.11.59.29l2.86 3.87v-3.43c0-.4.33-.73.73-.73.4 0 .73.33.73.73v5.56zm4.49-3.51c.4 0 .73.33.73.73s-.33.73-.73.73h-2.05v1.32h2.05c.4 0 .73.33.73.73s-.33.73-.73.73h-2.78c-.4 0-.73-.33-.73-.73v-5.56c0-.4.33-.73.73-.73h2.78c.4 0 .73.33.73.73s-.33.73-.73.73h-2.05v1.32h2.05z"/>
        </svg>
        <span style={{ position: 'absolute', right: 'calc(100% + 10px)', top: '50%', transform: 'translateY(-50%)', background: 'rgba(6,16,30,0.95)', color: '#fff', fontSize: 10, letterSpacing: '0.2em', fontWeight: 700, padding: '6px 10px', whiteSpace: 'nowrap', opacity: 0, pointerEvents: 'none', transition: 'opacity .2s', border: '1px solid rgba(255,255,255,0.15)' }} className="fa-tip">LINEで相談</span>
      </a>
      <button
        type="button" aria-label="ページトップへ戻る"
        onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
        style={{ ...baseBtn, background: '#06101e', color: '#fff', border: '1px solid rgba(255,255,255,0.25)', opacity: showTop ? 1 : 0, pointerEvents: showTop ? 'auto' : 'none', transform: showTop ? 'translateY(0)' : 'translateY(8px)' }}
        onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--mta-blue)'; }}
        onMouseLeave={(e) => { e.currentTarget.style.background = '#06101e'; }}
      >
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2, lineHeight: 1 }}>
          <svg width="14" height="10" viewBox="0 0 14 10" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M2 7L7 2L12 7"/></svg>
          <span style={{ fontSize: 9, fontFamily: 'Oswald, sans-serif', fontWeight: 700, letterSpacing: '0.15em' }}>TOP</span>
        </div>
      </button>
    </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}/>
        <p style={{fontSize: 12, lineHeight: 2, marginTop: 24, maxWidth: 320}}>本物のモンゴルを、日本のお客様へ。日本語ガイドが常駐する現地法人として、安心安全な旅をお届けしております。</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}}>
        <span>プライバシーポリシー</span><span>利用規約</span><span>事業者情報</span><span>サイトマップ</span>
      </div>
    </div>
    <div style={{marginTop: 14, fontSize: 10.5, opacity: 0.55, lineHeight: 1.8}}>
      Mongol Travel Agency LLC は、モンゴル国の法令に基づき設立・運営される旅行会社です（モンゴル旅行業協会加盟）。本サイトの利用規約および個人情報の取扱いは、モンゴル国の法令に準拠します。
    </div>
  </footer>
);

Object.assign(window, { MTAMark, MTALogo, TOURS, TourCard, HeroVideo, SiteHeader, FloatingActions });
