/* roastynote — nav, menu, hero, marquee, thesis, chapter system. */
const { Tag, Button, Logo } = window.RoastynoteDesignSystem_ac31dc;
const C = window.RN_CONTENT;
const T = (node, lang) => (node ? (node[lang] ?? node.en) : "");
const MARK = "assets/logo/roastynote-mark.png";
const MARK_PAPER = "assets/logo/roastynote-mark-paper.png";

/* Chapter marker — the page's designed spine. */
function Chapter({ id, lang, dark }) {
  const ch = C.chapters[id];
  if (!ch) return null;
  return (
    <div className={"chapter mono" + (dark ? " chapter--dark" : "")} data-reveal>
      <span className="chapter__num">{ch.num}</span>
      <span className="chapter__rule"></span>
      <span className="chapter__name">{T(ch, lang)}</span>
    </div>
  );
}

/* ----------------------------------------------------------------- Nav --- */
function Nav({ lang, setLang, scrolled, onOpenMenu }) {
  const here = decodeURIComponent((location.pathname.split("/").pop() || ""));
  return (
    <header className="nav">
      <div className={"nav__bar wrap" + (scrolled ? " nav__bar--scrolled" : "")}>
        <a className="nav__brand" href={C.nav.home || "index.html"} aria-label="roastynote home">
          <Logo layout="mark" markSrc={MARK} size={22} />
        </a>
        <nav className="nav__links" aria-label="Primary">
          {C.nav.items.map((it, i) => (
            <a key={i} href={it.href || "index.html"}
               className={"mono link nav__link" + (it.href && here === it.href ? " is-active" : "")}>
              {T(it, lang)}
            </a>
          ))}
        </nav>
        <div className="nav__right">
          <div className="nav__lang mono" role="group" aria-label="Language">
            <button className={"nav__langbtn" + (lang === "jp" ? " is-active" : "")}
              onClick={() => setLang("jp")}>日本語</button>
            <span className="nav__langsep">/</span>
            <button className={"nav__langbtn" + (lang === "en" ? " is-active" : "")}
              onClick={() => setLang("en")}>EN</button>
          </div>
          <button className="nav__burger" aria-label="Menu" onClick={onOpenMenu}>
            <span></span><span></span>
          </button>
        </div>
      </div>
    </header>
  );
}

/* --------------------------------------------------------- Mobile menu --- */
function MobileMenu({ lang, setLang, open, onClose }) {
  return (
    <div className={"mmenu" + (open ? " is-open" : "")} aria-hidden={!open}>
      <div className="mmenu__top wrap">
        <Logo layout="mark" markSrc={MARK_PAPER} tone="paper" size={22} />
        <button className="mono link mmenu__close" onClick={onClose}>{T(C.nav.close, lang)}</button>
      </div>
      <nav className="mmenu__links">
        {C.nav.items.map((it, i) => (
          <a key={i} href={it.href || "index.html"} className="serif mmenu__link" onClick={onClose}>
            <span className="mono mmenu__num">{String(i + 1).padStart(2, "0")}</span>
            {T(it, lang)}
          </a>
        ))}
      </nav>
      <div className="mmenu__foot wrap">
        <span className="mono">{T(C.nav.currently, lang)}</span>
        <div className="nav__lang mono" role="group" aria-label="Language">
          <button className={"nav__langbtn" + (lang === "jp" ? " is-active" : "")} onClick={() => setLang("jp")}>日本語</button>
          <span className="nav__langsep">/</span>
          <button className={"nav__langbtn" + (lang === "en" ? " is-active" : "")} onClick={() => setLang("en")}>EN</button>
        </div>
      </div>
    </div>
  );
}

/* ---------------------------------------------------------------- Hero --- */
function Hero({ lang }) {
  const panelRef = React.useRef(null);
  React.useEffect(() => {
    const el = panelRef.current;
    if (!el || matchMedia("(prefers-reduced-motion: reduce)").matches) return;
    let raf = 0;
    const onScroll = () => {
      cancelAnimationFrame(raf);
      raf = requestAnimationFrame(() => {
        const y = Math.min(window.scrollY, window.innerHeight);
        el.style.transform = "translateY(" + (y * 0.12) + "px)";
      });
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => { window.removeEventListener("scroll", onScroll); cancelAnimationFrame(raf); };
  }, []);

  React.useEffect(() => {
    const el = panelRef.current;
    if (!el || matchMedia("(prefers-reduced-motion: reduce)").matches) return;
    if (!matchMedia("(hover: hover) and (pointer: fine)").matches) return;
    const move = (event) => {
      const rect = el.getBoundingClientRect();
      const x = ((event.clientX - rect.left) / rect.width) * 100;
      const y = ((event.clientY - rect.top) / rect.height) * 100;
      el.style.setProperty("--warm-x", x.toFixed(2) + "%");
      el.style.setProperty("--warm-y", y.toFixed(2) + "%");
      el.style.setProperty("--warm-alpha", "1");
    };
    const leave = () => {
      el.style.setProperty("--warm-alpha", "0");
    };
    el.addEventListener("pointermove", move);
    el.addEventListener("pointerleave", leave);
    return () => {
      el.removeEventListener("pointermove", move);
      el.removeEventListener("pointerleave", leave);
    };
  }, []);

  return (
    <section className="hero" id="top" data-screen-label="Hero">
      <figure className="hero__panel" ref={panelRef}>
        <img className="treat hero__img" src={C.hero.image} alt={T(C.hero.imageAlt, lang)} />
        <span className="hero__steam hero__steam--a" aria-hidden="true"></span>
        <span className="hero__steam hero__steam--b" aria-hidden="true"></span>
        <span className="hero__steam hero__steam--c" aria-hidden="true"></span>
      </figure>
      <h1 className="hero__word" aria-label="roastynote">
        <span className="hero__word-g">roasty</span><span className="hero__word-n serif">note</span>
      </h1>
      <div className="hero__subtitle" data-reveal>
        <p className="mono hero__kicker">{T(C.hero.kicker, lang)}</p>
        <p className={"serif hero__tagline " + lang}>{T(C.hero.tagline, lang)}</p>
      </div>
      <div className="hero__foot wrap">
        <span className="mono">{T(C.hero.metaLeft, lang)}</span>
        <span className="hero__rule"></span>
        <span className="mono hero__scroll">{T(C.hero.scroll, lang)} ↓</span>
        <span className="hero__rule"></span>
        <span className="mono">{T(C.hero.metaRight, lang)}</span>
      </div>
    </section>
  );
}

/* ------------------------------------------------------------- Marquee --- */
function Marquee({ lang }) {
  const words = C.marquee[lang] || C.marquee.en;
  const seq = [];
  for (let r = 0; r < 4; r++) {
    words.forEach((w, i) => {
      seq.push(<span className="marquee__word serif" key={r + "-" + i}>{w}</span>);
      seq.push(<span className="marquee__sep" key={r + "-s" + i} aria-hidden="true">·</span>);
    });
  }
  return (
    <div className="marquee" aria-hidden="true">
      <div className="marquee__track">{seq}</div>
    </div>
  );
}

/* -------------------------------------------------------------- Thesis --- */
function Thesis({ lang }) {
  const isJP = lang === "jp";
  return (
    <section className="thesis" data-screen-label="Thesis">
      <div className="wrap thesis__inner">
        <Chapter id="thesis" lang={lang} dark />
        {isJP ? (
          <h2 className="thesis__display">
            <span className="thesis__line" data-reveal>建築も、一杯も、</span><br/>
            <span className="thesis__line" data-reveal style={{"--reveal-delay":".12s"}}>言葉も、<strong>畑も。</strong></span>
          </h2>
        ) : (
          <h2 className="thesis__display">
            <span className="thesis__line" data-reveal>A building. A cup.</span><br/>
            <span className="thesis__line" data-reveal style={{"--reveal-delay":".12s"}}>A word. <strong>A field.</strong></span>
          </h2>
        )}
        <p className="thesis__second serif" data-reveal style={{"--reveal-delay":".3s"}}>
          {isJP ? "扱う手は、ひとつ。" : "One pair of hands."}
        </p>
        <p className="mono thesis__sub" data-reveal style={{"--reveal-delay":".5s"}}>{T(C.thesis.subline, lang)}</p>
      </div>
    </section>
  );
}

/* ------------------------------------------------------- Image interlude -- */
function ImageBreak({ src, alt, captionLeft, captionRight }) {
  return (
    <div className="imgbreak">
      <img className="treat imgbreak__img" src={src} alt={alt || ""} data-reveal />
      {(captionLeft || captionRight) && (
        <div className="wrap imgbreak__captions mono" data-reveal>
          <span>{captionLeft}</span>
          <span>{captionRight}</span>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { Chapter, Nav, MobileMenu, Hero, Marquee, Thesis, ImageBreak, T, MARK, MARK_PAPER });