// Shared full-screen MENU overlay used by all pages.
// Toggles open via window event so any header MENU button can call:
//   window.dispatchEvent(new CustomEvent('mta-menu-toggle'))

const MENU_PAGES = [
  {
    group: 'DESTINATIONS',
    title: '観光地',
    items: [
      { label: 'モンゴル基本情報', sub: 'About Mongolia', href: '#mongolia-info' },
      { label: '空路アクセス', sub: 'Flights', href: '#flights' },
      { label: 'モンゴル全国の観光地', sub: 'Nationwide Destinations', href: '#nationwide' },
      { label: 'ウランバートル市内観光', sub: 'Ulaanbaatar Sightseeing', href: '#ub-sightseeing' },
      { label: '宿泊施設', sub: 'Hotels & Tourist Camps', href: '#hotels' },
      { label: '星空観賞ガイド', sub: 'Stargazing Guide 2026', href: '#stargazing' },
    ],
  },
  {
    group: 'TOURS',
    title: 'ツアー',
    items: [
      { label: 'ツアーを探す', sub: 'Search Tours', href: '#tour-list' },
      { label: 'オーダーメイドの旅', sub: 'Custom Itinerary', href: '#custom' },
    ],
  },
  {
    group: 'B2B',
    title: '法人のお客様',
    items: [
      { label: '企業・組織・団体のお客様へ', sub: 'For Corporations & Organizations', href: '#corporate' },
      { label: '旅行会社のお客様へ', sub: 'For Travel Agencies', href: '#travel-agency' },
    ],
  },
  {
    group: 'COMPANY',
    title: '会社情報',
    items: [
      { label: '会社概要', sub: 'About Us', href: '#about' },
      { label: 'よくあるご質問', sub: 'FAQ', href: '#faq' },
      { label: 'お問い合わせ', sub: 'Contact', href: '#contact' },
    ],
  },
];

const MenuOverlay = () => {
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    const onToggle = () => setOpen(o => !o);
    const onClose = () => setOpen(false);
    window.addEventListener('mta-menu-toggle', onToggle);
    window.addEventListener('mta-menu-close', onClose);
    return () => {
      window.removeEventListener('mta-menu-toggle', onToggle);
      window.removeEventListener('mta-menu-close', onClose);
    };
  }, []);
  if (!open) return null;
  return (
    <div style={{position:'fixed', inset: 0, zIndex: 9999, background:'rgba(6,16,30,0.97)', backdropFilter:'blur(20px)', color:'#fff', overflow:'auto'}}>
      {/* Top bar */}
      <div style={{padding:'28px 56px', display:'flex', justifyContent:'space-between', alignItems:'center', borderBottom:'1px solid rgba(255,255,255,0.08)'}}>
        <MTALogo color="#fff"/>
        <button onClick={() => setOpen(false)} style={{background:'transparent', border:'1px solid rgba(255,255,255,0.3)', color:'#fff', padding:'12px 22px', fontSize: 12, fontWeight: 700, letterSpacing:'0.25em', cursor:'pointer', fontFamily:'Oswald, sans-serif', display:'flex', alignItems:'center', gap: 12}}>
          <span style={{position:'relative', width: 18, height: 18}}>
            <span style={{position:'absolute', top: 8, left: 0, width: 18, height: 2, background:'currentColor', transform:'rotate(45deg)'}}/>
            <span style={{position:'absolute', top: 8, left: 0, width: 18, height: 2, background:'currentColor', transform:'rotate(-45deg)'}}/>
          </span>
          CLOSE
        </button>
      </div>

      {/* Content */}
      <div style={{padding:'80px 56px 60px', display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap: 80, maxWidth: 1440, margin:'0 auto'}}>
        {MENU_PAGES.map((g, gi) => (
          <div key={g.group}>
            <div style={{fontSize: 11, letterSpacing:'0.4em', color:'var(--mta-blue-70)', fontFamily:'Oswald, sans-serif', fontWeight: 700, marginBottom: 14}}>0{gi+1} · {g.group}</div>
            <h2 style={{fontSize: 36, margin:'0 0 32px', fontFamily:'"Shippori Mincho", serif', fontWeight: 400}}>{g.title}</h2>
            <div>
              {g.items.map(item => (
                <a key={item.label} href={item.href} onClick={() => setOpen(false)} style={{display:'block', padding:'18px 0', borderBottom:'1px solid rgba(255,255,255,0.08)', cursor:'pointer', textDecoration:'none', color:'#fff'}}
                  onMouseEnter={e => { e.currentTarget.style.paddingLeft = '14px'; e.currentTarget.style.borderBottomColor = 'var(--mta-blue-70)'; }}
                  onMouseLeave={e => { e.currentTarget.style.paddingLeft = '0px'; e.currentTarget.style.borderBottomColor = 'rgba(255,255,255,0.08)'; }}
                >
                  <div style={{display:'flex', justifyContent:'space-between', alignItems:'baseline', transition:'all .25s'}}>
                    <div>
                      <div style={{fontSize: 18, fontWeight: 700, marginBottom: 4}}>{item.label}</div>
                      <div style={{fontSize: 11, letterSpacing:'0.25em', opacity: 0.5, fontFamily:'Oswald, sans-serif'}}>{item.sub.toUpperCase()}</div>
                    </div>
                    <span style={{fontSize: 14, color:'var(--mta-blue-70)'}}>→</span>
                  </div>
                </a>
              ))}
            </div>
          </div>
        ))}
      </div>

      {/* Footer */}
      <div style={{padding:'40px 56px 60px', borderTop:'1px solid rgba(255,255,255,0.08)', display:'flex', justifyContent:'space-between', alignItems:'center', flexWrap:'wrap', gap: 24}}>
        <div style={{display:'flex', gap: 32, fontSize: 12, opacity: 0.7}}>
          <span>📞 +976-7011-5005</span>
          <span>✉ mogi.mta@gmail.com</span>
          <span>営業時間 平日 10:00〜17:00</span>
        </div>
        <div style={{display:'flex', gap: 16, fontSize: 11, letterSpacing:'0.2em', fontFamily:'Oswald, sans-serif', opacity: 0.6}}>
          <span style={{cursor:'pointer'}}>JP</span>
          <span>/</span>
          <span style={{cursor:'pointer'}}>EN</span>
          <span>/</span>
          <span style={{cursor:'pointer'}}>MN</span>
        </div>
      </div>
    </div>
  );
};

// Shared MENU button — replaces inline button markup in each header
const MenuButton = () => (
  <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>
);

Object.assign(window, { MenuOverlay, MenuButton, MENU_PAGES });