// Shell: Nav, Footer

const NAV_LINKS = [
  { key: 'about',    label: '關於雪境' },
  { key: 'lodges',   label: '三館旅宿' },
  { key: 'services', label: '服務項目' },
  { key: 'beginner', label: '初學者指南' },
  { key: 'faq',      label: 'FAQ' },
  { key: 'contact',  label: '聯絡' },
];

function Nav({ page, setPage, transparent, forceMenuOpen }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(!!forceMenuOpen);
  React.useEffect(() => {
    if (forceMenuOpen) setMenuOpen(true);
  }, [forceMenuOpen]);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 60);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const solid = !transparent || scrolled;
  const nav = (
    <nav className={`nav ${solid ? 'nav--solid' : 'nav--transparent'} ${menuOpen ? 'nav--menu-open' : ''}`}>
      <div className="nav__brand" onClick={() => { setPage('home'); setMenuOpen(false); }}>
        <span className="nav__brand-zh">雪境</span>
        <span className="nav__brand-en">YUKISAKI JAPAN</span>
      </div>
      <ul className="nav__links">
        {NAV_LINKS.map(link => (
          <li key={link.key}>
            <span
              className={`nav__link ${page === link.key ? 'nav__link--active' : ''}`}
              onClick={() => setPage(link.key)}
            >
              {link.label}
            </span>
          </li>
        ))}
      </ul>

      {/* Hamburger button — shows on mobile */}
      <button
        className={`nav__burger ${menuOpen ? 'nav__burger--open' : ''}`}
        onClick={() => setMenuOpen(!menuOpen)}
        aria-label="Menu"
      >
        <span /><span />
      </button>
    </nav>
  );

  return (
    <>
      {nav}
      {/* Full-screen mobile menu overlay */}
      <div className={`mobile-menu ${menuOpen ? 'mobile-menu--open' : ''}`}>
        <ul className="mobile-menu__list">
          {NAV_LINKS.map((link, i) => (
            <li key={link.key} style={{ '--i': i }}>
              <button
                className={`mobile-menu__link ${page === link.key ? 'mobile-menu__link--active' : ''}`}
                onClick={() => { setPage(link.key); setMenuOpen(false); }}
              >
                <span className="mobile-menu__num">0{i + 1}</span>
                <span className="mobile-menu__label">{link.label}</span>
              </button>
            </li>
          ))}
        </ul>
        <div className="mobile-menu__foot">
          <div className="mobile-menu__handle">@yukisaki.snow_japan</div>
        </div>
      </div>
    </>
  );
}

function Footer({ setPage }) {
  return (
    <footer id="footer" className="footer">
      <div className="footer__grid">
        <div>
          <div className="footer__brand-zh">雪境</div>
          <div className="footer__brand-en">YUKISAKI JAPAN</div>
          <div className="footer__tagline">
            在靜謐的雪國，<br />與家人遇見雪境。
          </div>
        </div>
        <div className="footer__col">
          <h4>Lodges</h4>
          <ul>
            <li><a onClick={() => setPage('lodges')}>苗場 Naeba</a></li>
            <li><a onClick={() => setPage('lodges')}>湯澤 Yuzawa</a></li>
            <li><a onClick={() => setPage('lodges')}>藏王 Zao</a></li>
          </ul>
        </div>
        <div className="footer__col">
          <h4>Navigate</h4>
          <ul>
            <li><a onClick={() => setPage('about')}>關於雪境</a></li>
            <li><a onClick={() => setPage('services')}>服務項目</a></li>
            <li><a onClick={() => setPage('beginner')}>初學者指南</a></li>
            <li><a onClick={() => setPage('faq')}>FAQ</a></li>
            <li><a onClick={() => setPage('contact')}>聯絡預約</a></li>
          </ul>
        </div>
        <div className="footer__col">
          <h4>Social</h4>
          <ul>
            <li><a href="#">Instagram &nbsp;@yukisaki.snow_japan</a></li>
            <li><a href="#">Facebook &nbsp;雪境 Yukisaki Japan</a></li>
            <li><a href="#">LINE &nbsp;@yukisaki-jp</a></li>
            <li><a href="mailto:hello@yukisaki.example">hello@yukisaki.example</a></li>
          </ul>
        </div>
      </div>
      <div className="footer__bottom">
        <span>© 2026 YUKISAKI JAPAN. Portfolio Concept.</span>
        <span>NAEBA · YUZAWA · ZAO &nbsp;·&nbsp; JP</span>
      </div>
    </footer>
  );
}

// Shared photo registry — curated cold-cinematic Unsplash images
const PHOTO = {
  hero:        'images/hero.jpg',
  naeba:       'https://images.unsplash.com/photo-1483921020237-2ff51e8e4b22?w=1400&q=85',
  yuzawa:      'images/yuzawa.jpg',
  zao:         'images/zao.jpg',
  story:       'https://images.unsplash.com/photo-1551582045-6ec9c11d8697?w=1400&q=85',
  about_hero:  'https://images.unsplash.com/photo-1483728642387-6c3bdd6c93e5?w=2400&q=85',
  about_band:  'https://images.unsplash.com/photo-1542640244-7e672d6cef4e?w=2400&q=85',
  services_hero:'https://images.unsplash.com/photo-1551698618-1dfe5d97d256?w=2400&q=85',
  beginner_hero:'https://images.unsplash.com/photo-1551524559-8af4e6624178?w=2400&q=85',
  contact_hero:'images/hero.jpg',
  lodges_hero: 'images/yuzawa.jpg',
  service_lodging: 'https://images.unsplash.com/photo-1582719478250-c89cae4dc85b?w=1400&q=85',
  service_lessons: 'https://images.unsplash.com/photo-1551524559-8af4e6624178?w=1400&q=85',
  service_shuttle: 'https://images.unsplash.com/photo-1483921020237-2ff51e8e4b22?w=1400&q=85',
  service_dining:  'https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?w=1400&q=85',
  ig_1: 'images/ig_1.jpg',
  ig_2: 'images/ig_2.jpg',
  ig_3: 'images/ig_3.jpg',
  ig_4: 'images/zao.jpg',
  ig_5: 'https://images.unsplash.com/photo-1542640244-7e672d6cef4e?w=600&q=80',
  ig_6: 'images/yuzawa.jpg',
};

function Arrow() { return <span className="arrow">→</span>; }
function BtnLabel({ children }) { return <span className="btn-label">{children}</span>; }

Object.assign(window, { Nav, Footer, NAV_LINKS, PHOTO, Arrow, BtnLabel });