// Shared chrome: top navigation + footer + moon mark
const { useEffect, useState } = React;

function MoonMark({ size = 34, color = "currentColor" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 40 40" fill="none" aria-hidden>
      <circle cx="20" cy="20" r="15" stroke={color} strokeWidth="0.8" opacity="0.55" />
      <path d="M26 8 a14 14 0 1 0 0 24 a11 11 0 1 1 0 -24z" fill={color} opacity="0.95" />
      <circle cx="20" cy="20" r="19" stroke={color} strokeWidth="0.4" opacity="0.22" />
    </svg>
  );
}

function Chrome({ current, onNav, onDark = false, forceDark = false }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 60);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const links = [
    { id: "villas",   jp: "離れ",     en: "Villas" },
    { id: "kihin",    jp: "貴賓棟",   en: "Grand" },
    { id: "kaiseki",  jp: "懐石",     en: "Cuisine" },
    { id: "onsen",    jp: "温泉",     en: "Onsen" },
    { id: "niwa",     jp: "庭",       en: "Garden" },
    { id: "ichinichi",jp: "一日",     en: "A Day" },
    { id: "stories",  jp: "綴り",     en: "Stories" },
    { id: "access",   jp: "道程",     en: "Access" },
  ];

  const cls = [
    "chrome",
    onDark ? "on-dark" : "on-light",
    scrolled ? "scrolled" : "",
    scrolled && forceDark ? "force-dark" : "",
  ].join(" ");

  return (
    <header className={cls}>
      <a className="brand" href="#/" onClick={(e) => { e.preventDefault(); onNav("home"); }}>
        <span className="mark"><MoonMark /></span>
        <div>
          <div className="name-jp">月彩</div>
          <div className="name-en">Tsukisai · Hakone</div>
        </div>
      </a>
      <nav className="nav-center">
        {links.map((l) => (
          <a
            key={l.id}
            href={`#/${l.id}`}
            className={current === l.id ? "active" : ""}
            onClick={(e) => { e.preventDefault(); onNav(l.id); }}
          >{l.jp}</a>
        ))}
      </nav>
      <div className="nav-right">
        <div className="lang"><span className="on">JP</span><span>EN</span></div>
        <a className="book-btn" href="#/reserve" onClick={(e) => { e.preventDefault(); onNav("reserve"); }}>
          Reserve <span aria-hidden>→</span>
        </a>
      </div>
    </header>
  );
}

function Footer({ onNav }) {
  return (
    <footer className="foot">
      <div className="foot-inner">
        <div className="foot-brand">
          <div className="big">月彩</div>
          <div className="sub">Tsukisai · Hakone Sengokuhara</div>
          <p>箱根仙石原、薄の原の奥。全七棟の離れと、月を映す露天風呂。<br/>大人のためだけの、完全紹介制の隠れ宿。</p>
        </div>
        <div>
          <h4>Stay</h4>
          <ul>
            <li><a href="#/villas" onClick={(e) => { e.preventDefault(); onNav("villas"); }}>離れ 全七棟</a></li>
            <li><a href="#/kihin" onClick={(e) => { e.preventDefault(); onNav("kihin"); }}>貴賓棟「宙」</a></li>
            <li><a href="#/kaiseki" onClick={(e) => { e.preventDefault(); onNav("kaiseki"); }}>月彩懐石</a></li>
            <li><a href="#/onsen" onClick={(e) => { e.preventDefault(); onNav("onsen"); }}>温泉について</a></li>
          </ul>
        </div>
        <div>
          <h4>Experience</h4>
          <ul>
            <li><a href="#/niwa" onClick={(e) => { e.preventDefault(); onNav("niwa"); }}>庭と四季</a></li>
            <li><a href="#/ichinichi" onClick={(e) => { e.preventDefault(); onNav("ichinichi"); }}>宿での一日</a></li>
            <li><a href="#/stories" onClick={(e) => { e.preventDefault(); onNav("stories"); }}>月彩の綴り</a></li>
          </ul>
        </div>
        <div>
          <h4>Contact</h4>
          <ul>
            <li><a href="#/reserve" onClick={(e) => { e.preventDefault(); onNav("reserve"); }}>ご予約</a></li>
            <li><a href="#/access" onClick={(e) => { e.preventDefault(); onNav("access"); }}>アクセス</a></li>
            <li>0460-84-XXXX</li>
            <li>reserve@tsukisai.jp</li>
          </ul>
        </div>
      </div>
      <div className="foot-base">
        <span>© 2026 TSUKISAI RYOKAN · BY INVITATION</span>
        <span>HAKONE · SENGOKUHARA · JAPAN</span>
      </div>
    </footer>
  );
}

Object.assign(window, { Chrome, Footer, MoonMark });