/* roastynote — rooms, approach, selected work, journal, pull-quote, footer. */
/* Uses globals from components-v3a.jsx: Chapter, T, MARK_PAPER. */
const { Tag: RNTag, Logo: RNLogo } = window.RoastynoteDesignSystem_ac31dc;
const C3 = window.RN_CONTENT;

/* ---------------------------------------------------- Rooms (accordion) --- */
function RoomAccordion({ card, lang, index, isOpen, onToggle }) {
  const num = String(index + 1).padStart(2, "0");
  return (
    <div className={"acc" + (isOpen ? " acc--open" : "")}>
      <button type="button" className="acc__header" aria-expanded={isOpen} onClick={onToggle}>
        <span className="mono acc__num">{num}</span>
        <span className="acc__titles">
          <span className="acc__name">{card.name}</span>
          <span className={"serif acc__desc " + lang}>{T(card.descriptor, lang)}</span>
        </span>
        <span className="mono acc__cat">
          <span className="acc__dot" style={{ background: card.dot }}></span>
          {T(card.category, lang)}
        </span>
        <span className="acc__toggle" aria-hidden="true">
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.5">
            <line x1="10" y1="4" x2="10" y2="16" className="acc__vline"></line>
            <line x1="4" y1="10" x2="16" y2="10"></line>
          </svg>
        </span>
      </button>
      <div className="acc__body">
        <div className="acc__body-clip">
          <div className="acc__body-inner">
            <div className="acc__media">
              <img className="treat acc__img" src={card.img} alt="" />
            </div>
            <div className="acc__copy">
              <p className={"acc__reveal " + lang}>{T(card.reveal, lang)}</p>
              <a href={card.href || "work.html#" + card.key} className="mono link acc__more">{lang === "jp" ? "詳しく →" : "Learn more →"}</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function Rooms({ lang, openRoom, setOpenRoom }) {
  const cards = C3.rooms.cards;
  return (
    <section className="rooms" data-screen-label="Work / Rooms">
      <div className="wrap">
        <Chapter id="rooms" lang={lang} />
        <div className="rooms__intro">
          <p className={"serif rooms__lead " + lang} data-reveal>
            {T(C3.rooms.intro, lang)}
          </p>
        </div>
        <div className="acc-list" data-reveal>
          {cards.map((card, i) => (
            <RoomAccordion
              key={card.key}
              card={card}
              lang={lang}
              index={i}
              isOpen={openRoom === i}
              onToggle={() => setOpenRoom(openRoom === i ? -1 : i)}
            />
          ))}
        </div>
      </div>
    </section>
  );
}

/* ------------------------------------------------------------ Approach --- */
function Approach({ lang }) {
  const a = C3.approach;
  return (
    <section className="approach" data-screen-label="Approach">
      <div className="wrap">
        <Chapter id="approach" lang={lang} dark />
        <div className="approach__tenets">
          {a.tenets.map((tenet, i) => (
            <article className="tenet" key={i} data-reveal style={{"--reveal-delay": (i * 0.1) + "s"}}>
              <span className="mono tenet__num">{String(i + 1).padStart(2, "0")}</span>
              <h3 className={"serif tenet__heading " + lang}>{T(tenet.heading, lang)}</h3>
              <p className={"tenet__body " + lang}>{T(tenet.body, lang)}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ------------------------------------------------------- Selected work --- */
function SelectedWork({ lang }) {
  const w = C3.work;
  return (
    <section className="work" data-screen-label="Selected work">
      <div className="wrap">
        <Chapter id="work" lang={lang} />
        <p className={"serif work__intro " + lang} data-reveal>{T(w.intro, lang)}</p>
        <div className="work__grid">
          {w.cards.map((card, i) => (
            <a href={card.href || "work.html"} className={"workcard workcard--" + (i % 2 ? "b" : "a")} key={i}
               data-reveal style={{"--reveal-delay": (i * 0.12) + "s"}}>
              <figure className="workcard__media">
                <img className="treat workcard__img" src={card.img} alt={card.name} />
              </figure>
              <div className="workcard__meta">
                <span className="mono workcard__detail">{T(card.meta, lang)}</span>
                <h3 className="serif workcard__name">{card.name}</h3>
                <p className={"workcard__line " + lang}>{T(card.line, lang)}</p>
              </div>
            </a>
          ))}
        </div>
        <div className="work__cta" data-reveal>
          <a href="work.html" className="serif link work__ctalink">{T(w.cta, lang)}</a>
        </div>
      </div>
    </section>
  );
}

/* -------------------------------------------------------------- Journal --- */
function Journal({ lang }) {
  const j = C3.journal;
  return (
    <section className="journal" data-screen-label="Journal">
      <div className="wrap">
        <Chapter id="journal" lang={lang} />
        <div className="journal__list">
          {j.entries.map((e, i) => (
            <a href={"journal.html#entry-" + e.date.replace(".", "-")} className="jentry" key={i} data-reveal style={{"--reveal-delay": (i * 0.1) + "s"}}>
              <span className="mono jentry__date">{e.date}</span>
              <span className="jentry__main">
                <h3 className={"serif jentry__title " + lang}>{T(e.title, lang)}</h3>
                <p className={"jentry__standfirst " + lang}>{T(e.standfirst, lang)}</p>
              </span>
              <span className="jentry__arrow serif" aria-hidden="true">→</span>
            </a>
          ))}
        </div>
        <div className="journal__cta" data-reveal>
          <a href="journal.html" className="mono link">{T(j.cta, lang)}</a>
        </div>
      </div>
    </section>
  );
}

/* ---------------------------------------------------------- Pull-quote --- */
function PullQuote({ lang }) {
  const lines = C3.pullquote[lang] || C3.pullquote.en;
  return (
    <section className="pullquote" data-screen-label="Pull quote">
      <div className="wrap pullquote__inner" data-reveal>
        <span className="mono pullquote__label">roastynote</span>
        <blockquote className={"serif pullquote__text " + lang}>
          {lines[0]}<br/>{lines[1]}
        </blockquote>
      </div>
    </section>
  );
}

/* -------------------------------------------------------------- Footer --- */
function TokyoClock() {
  const [time, setTime] = React.useState("");
  React.useEffect(() => {
    const tick = () => {
      setTime(new Intl.DateTimeFormat("en-GB", {
        hour: "2-digit", minute: "2-digit", second: "2-digit",
        hour12: false, timeZone: "Asia/Tokyo",
      }).format(new Date()));
    };
    tick();
    const id = setInterval(tick, 1000);
    return () => clearInterval(id);
  }, []);
  return <span className="foot__clock mono">{time} JST</span>;
}

function Footer({ lang }) {
  const f = C3.footer;
  const brandHref = (b) => (f.subBrandLinks && f.subBrandLinks[b]) || "work.html";
  return (
    <footer className="foot" data-screen-label="Footer">
      <div className="wrap foot__invite">
        <p className={"serif foot__invite-line " + lang} data-reveal>{T(f.invitation, lang)}</p>
        <a href="contact.html" className="foot__cta mono" data-reveal style={{"--reveal-delay":".15s"}}>
          {T(f.cta, lang)}
        </a>
      </div>
      <div className="wrap foot__grid">
        <div className="foot__col">
          <RNLogo layout="wordmark" tone="paper" size={26} className="foot__studio" />
          <p className="mono foot__city">
            {T(f.studio.city, lang)} · <TokyoClock />
          </p>
          <p className="foot__blurb">{T(f.studio.blurb, lang)}</p>
        </div>
        <div className="foot__col">
          <RNTag className="foot__coltitle">{T(f.navTitle, lang)}</RNTag>
          <ul className="foot__list">
            {C3.nav.items.map((it, i) => (
              <li key={i}><a href={it.href || "index.html"} className="mono link">{T(it, lang)}</a></li>
            ))}
          </ul>
        </div>
        <div className="foot__col">
            <RNTag className="foot__coltitle">{T(f.subTitle, lang)}</RNTag>
            <ul className="foot__list">
              {f.subBrands.map((b, i) => (
                <li key={i}><a href={brandHref(b)} className="mono link">{b}</a></li>
              ))}
            </ul>
        </div>
      </div>
      <div className="wrap foot__base">
        <span className="mono">{T(f.base, lang)}</span>
      </div>
      <div className="foot__giant" aria-hidden="true">
        <span className="foot__giant-g">roasty</span><span className="foot__giant-n serif">note</span>
      </div>
    </footer>
  );
}

Object.assign(window, { RoomAccordion, Rooms, Approach, SelectedWork, Journal, PullQuote, Footer, TokyoClock });