/* Akasha — shell: nav, mobile menu, footer, announce, routing helpers */
const { useState: uS, useEffect: uE, useRef: uR } = React;

const NAV = [
  { r: "services", label: "施術メニュー" },
  { r: "pricing", label: "料金" },
  { r: "voices", label: "お客様の声" },
  { r: "blog", label: "ブログ" },
  { r: "about", label: "サロンについて" },
  { r: "beauty", label: "出張美容" },
];

function go(route) {
  window.location.hash = "#/" + route;
  window.scrollTo({ top: 0, behavior: "instant" in window ? "instant" : "auto" });
}

function useRoute() {
  const parse = () => {
    const h = (window.location.hash || "#/home").replace(/^#\//, "");
    const [name, param] = h.split("/");
    return { name: name || "home", param: param || null };
  };
  const [route, setRoute] = uS(parse());
  uE(() => {
    const on = () => { setRoute(parse()); window.scrollTo(0, 0); };
    window.addEventListener("hashchange", on);
    return () => window.removeEventListener("hashchange", on);
  }, []);
  return route;
}

function Announce() {
  return <div className="announce">女性専用サロン · 伏屋駅 徒歩3分 · 完全予約制・一日4名まで</div>;
}

function Nav({ current }) {
  const [scrolled, setScrolled] = uS(false);
  const [menu, setMenu] = uS(false);
  uE(() => {
    const on = () => setScrolled(window.scrollY > 24);
    window.addEventListener("scroll", on); on();
    return () => window.removeEventListener("scroll", on);
  }, []);
  return (
    <>
      <nav className={`nav ${scrolled ? "scrolled" : ""}`}>
        <a className="nav__logo" onClick={() => go("home")}><Mark /><span className="wm">Akasha<small className="nav__sub">血流改善専門サロン</small></span></a>
        <div className="nav__links">
          {NAV.map((n) => (
            <a key={n.r} className={current === n.r ? "active" : ""} onClick={() => go(n.r)}>{n.label}</a>
          ))}
        </div>
        <div className="nav__cta">
          <Button variant="primary" className="nav__book" icon="arrow-right" onClick={() => go("contact")}>ご予約</Button>
          <button className="nav__burger" aria-label="メニュー" onClick={() => setMenu(true)}><Icon name="menu" /></button>
        </div>
      </nav>
      <div className={`mobile-menu ${menu ? "open" : ""}`}>
        <button className="mobile-menu__close" aria-label="閉じる" onClick={() => setMenu(false)}><Icon name="x" /></button>
        {[{ r: "home", label: "トップ" }, ...NAV, { r: "access", label: "アクセス" }, { r: "contact", label: "ご予約・お問い合わせ" }].map((n) => (
          <a key={n.r} onClick={() => { setMenu(false); go(n.r); }}>{n.label}</a>
        ))}
      </div>
    </>
  );
}

function Footer() {
  const cols = [
    { h: "メニュー", links: [["施術メニュー", "services"], ["料金", "pricing"], ["出張美容師", "beauty"], ["お客様の声", "voices"]] },
    { h: "Akasha", links: [["サロンについて", "about"], ["ブログ", "blog"], ["管理者ログイン", "write"]] },
    { h: "ご利用", links: [["ご予約・お問い合わせ", "contact"], ["店舗・アクセス", "access"]] },
  ];
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer__top">
          <div className="footer__brand">
            <span className="wm" onClick={() => go("home")} style={{ cursor: "pointer" }}><Mark className="mk" />Akasha</span>
            <p>女性専用の血流改善専門サロン。名古屋市中川区・伏屋駅 徒歩3分。不調・妊活・後遺症のケアに寄り添うリラクゼーションです（医療行為ではありません）。</p>
          </div>
          {cols.map((c, i) => (
            <div className="footer__col" key={i}>
              <h5>{c.h}</h5>
              {c.links.map((l, j) => <a key={j} onClick={() => go(l[1])} style={{ cursor: "pointer" }}>{l[0]}</a>)}
            </div>
          ))}
        </div>
        <div className="footer__bottom">
          <span>© 2026 Akasha. めぐりを整える、自宅サロン.</span>
          <div className="soc">
            <a aria-label="LINE" onClick={() => go("contact")} style={{ cursor: "pointer" }}><Icon name="message-circle" /></a>
            <a aria-label="Instagram @akasha_nagoya" href="https://www.instagram.com/akasha_nagoya/" target="_blank" rel="noopener"><Icon name="camera" /></a>
            <a aria-label="Mail" onClick={() => go("contact")} style={{ cursor: "pointer" }}><Icon name="mail" /></a>
          </div>
        </div>
      </div>
    </footer>
  );
}

function SubHero({ crumb, eyebrow, title, lead }) {
  return (
    <header className="subhero">
      <Botanical className="illus subhero__petal" />
      <div className="wrap">
        {crumb && (
          <div className="crumb">
            <span onClick={() => go("home")}>トップ</span><span className="sep">·</span><span style={{ color: "var(--fg2)" }}>{crumb}</span>
          </div>
        )}
        {eyebrow && <p className="eyebrow">{eyebrow}</p>}
        <h1>{title}</h1>
        {lead && <p>{lead}</p>}
      </div>
    </header>
  );
}

/* small toast */
function useToast() {
  const [msg, setMsg] = uS(null);
  const show = (m) => { setMsg(m); setTimeout(() => setMsg(null), 2600); };
  const node = <div className={`toast ${msg ? "show" : ""}`}>{msg && <Icon name="check" />}{msg}</div>;
  return [node, show];
}

Object.assign(window, { NAV, go, useRoute, Announce, Nav, Footer, SubHero, useToast });