/* roastynote — page components: Studio, Work, Journal, Contact.
   Requires components-v3a.jsx + components-v3b.jsx globals (T, Chapter, Nav, Footer, TokyoClock). */
const { Tag: PTag, Button: PButton, Input: PInput, Textarea: PTextarea,
        Select: PSelect, Tabs: PTabs } = window.RoastynoteDesignSystem_ac31dc;
const PC = window.RN_CONTENT;

/* Shared page header — mono eyebrow + large serif line. */
function PageHead({ label, line, sub, lang }) {
  return (
    <div className="phead wrap">
      <div className="chapter mono" data-reveal>
        <span className="chapter__rule"></span>
        <span className="chapter__name">{T(label, lang)}</span>
      </div>
      <h1 className={"serif phead__line " + lang} data-reveal style={{"--reveal-delay":".1s"}}>{T(line, lang)}</h1>
      {sub && (
        <p className={"phead__sub " + lang} data-reveal style={{"--reveal-delay":".22s"}}>{T(sub, lang)}</p>
      )}
    </div>
  );
}

/* ------------------------------------------------------------- Studio --- */
function StudioPage({ lang }) {
  const s = PC.studio;
  return (
    <main className="page" data-screen-label="Studio page">
      <PageHead label={s.label} line={s.heroLine} lang={lang} />
      <section className="wrap studio__intro">
        {s.intro.map((p, i) => (
          <p className={"studio__para " + lang} key={i} data-reveal style={{"--reveal-delay": (i * 0.12) + "s"}}>
            {T(p, lang)}
          </p>
        ))}
      </section>
      <div className="imgbreak">
        <img className="treat imgbreak__img" src="assets/img/approach.jpg" alt="" data-reveal />
        <div className="wrap imgbreak__captions mono" data-reveal>
          <span>{T(s.imageCaption, lang)}</span>
          <span>35.6762° N · 139.6503° E</span>
        </div>
      </div>
      <section className="wrap studio__facts">
        {s.facts.map((f, i) => (
          <article className="tenet tenet--light" 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(f.heading, lang)}</h3>
            <p className={"tenet__body " + lang}>{T(f.body, lang)}</p>
          </article>
        ))}
      </section>
      <section className="wrap studio__sketch" data-reveal>
        <figure className="studio__sketchfig">
          <img src="assets/img/sketch.png" alt="" className="studio__sketchimg" />
          <figcaption className="mono studio__sketchcap">{T(s.sketchCaption, lang)}</figcaption>
        </figure>
      </section>
      <section className="wrap page__cta" data-reveal>
        <a href="work.html" className="serif link work__ctalink">{T(s.cta, lang)}</a>
      </section>
    </main>
  );
}

/* --------------------------------------------------------------- Work --- */
function WorkPage({ lang }) {
  const w = PC.workPage;
  const rooms = PC.rooms.cards;
  const [filter, setFilter] = React.useState("all");

  const items = w.items.map((it) => {
    const room = rooms.find((r) => r.key === it.key);
    return {
      ...it,
      name: it.name || (room && room.name),
      meta: it.meta || (room && { en: T(room.category, "en") + " · " + it.year, jp: T(room.category, "jp") + " · " + it.year }),
      line: it.line || (room && room.descriptor),
      dot: room && room.dot,
    };
  });
  const visible = items.filter((it) => filter === "all" || it.cat === filter);

  return (
    <main className="page" data-screen-label="Work page">
      <PageHead label={w.label} line={w.heroLine} lang={lang} />
      <div className="wrap workpage__tabs" data-reveal>
        <PTabs
          items={w.filters.map((f) => ({ value: f.value, label: T(f, lang) }))}
          value={filter}
          onChange={setFilter}
        />
      </div>
      <section className="wrap workpage__grid">
        {visible.map((it, i) => (
          <a id={it.key} href={it.href || "work.html#" + it.key} className={"workcard workpage__card" + (i % 3 === 1 ? " workpage__card--drop" : "")}
             key={it.key} data-reveal style={{"--reveal-delay": ((i % 3) * 0.08) + "s"}}>
            <figure className="workcard__media">
              <img className="treat workcard__img workpage__img" src={it.img} alt={it.name} />
            </figure>
            <div className="workcard__meta">
              <span className="mono workcard__detail">{T(it.meta, lang)}</span>
              <h3 className="serif workcard__name">{it.name}</h3>
              <p className={"workcard__line " + lang}>{T(it.line, lang)}</p>
            </div>
          </a>
        ))}
      </section>
    </main>
  );
}

/* ------------------------------------------------------------- Journal --- */
function JournalPage({ lang }) {
  const j = PC.journalPage;
  const all = [...PC.journal.entries, ...j.extraEntries];
  const [featured, ...rest] = all;

  return (
    <main className="page" data-screen-label="Journal page">
      <PageHead label={j.label} line={j.heroLine} lang={lang} />
      <section className="wrap jfeat" data-reveal>
        <a id={"entry-" + featured.date.replace(".", "-")} href={"journal.html#entry-" + featured.date.replace(".", "-")} className="jfeat__card">
          <figure className="workcard__media jfeat__media">
            <img className="treat workcard__img jfeat__img" src={j.featuredImg} alt="" />
          </figure>
          <div className="jfeat__meta">
            <span className="mono jentry__date">{featured.date}</span>
            <h2 className={"serif jfeat__title " + lang}>{T(featured.title, lang)}</h2>
            <p className={"jentry__standfirst " + lang}>{T(featured.standfirst, lang)}</p>
            <span className="mono link jfeat__read">{lang === "jp" ? "読む →" : "Read →"}</span>
          </div>
        </a>
      </section>
      <section className="wrap">
        <div className="journal__list">
          {rest.map((e, i) => (
            <a id={"entry-" + e.date.replace(".", "-")} href={"journal.html#entry-" + e.date.replace(".", "-")} className="jentry" key={i} data-reveal style={{"--reveal-delay": (i * 0.07) + "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>
      </section>
    </main>
  );
}

/* ------------------------------------------------------------- Contact --- */
function ContactPage({ lang }) {
  const c = PC.contact;
  const f = c.form;
  const [sent, setSent] = React.useState(false);

  const onSubmit = (e) => {
    e.preventDefault();
    setSent(true);
  };

  return (
    <main className="page" data-screen-label="Contact page">
      <PageHead label={c.label} line={c.heroLine} sub={c.sub} lang={lang} />
      <section className="wrap contact__grid">
        <form className="contact__form" onSubmit={onSubmit}>
          <div className="contact__row">
            <PInput label={T(f.name, lang)} name="name" required autoComplete="name" />
            <PInput label={T(f.email, lang)} name="email" type="email" required autoComplete="email" />
          </div>
          <PSelect label={T(f.about, lang)}
            options={f.aboutOptions.map((o) => ({ value: o.value, label: T(o, lang) }))} />
          <PTextarea label={T(f.message, lang)} name="message" rows={7}
            hint={T(f.messageHint, lang)} required />
          <div className="contact__send">
            <PButton variant="primary" size="lg" type="submit">{T(f.send, lang)}</PButton>
            {sent && <p className={"contact__sent serif " + lang}>{T(f.sent, lang)}</p>}
          </div>
        </form>
        <aside className="contact__aside">
          <div className="contact__block">
            <PTag>{T(c.aside.studioTitle, lang)}</PTag>
            <p className="contact__line">{T(c.aside.place, lang)}</p>
            <a className="contact__line link" href="mailto:hello@roastynote.com">{c.aside.email}</a>
            <p className="contact__line mono contact__clock"><TokyoClock /></p>
          </div>
          <div className="contact__block">
            <PTag>{T(c.aside.hoursTitle, lang)}</PTag>
            <p className="contact__line">{T(c.aside.hours, lang)}</p>
          </div>
          <p className={"serif contact__note " + lang}>{T(c.aside.note, lang)}</p>
        </aside>
      </section>
    </main>
  );
}

Object.assign(window, { PageHead, StudioPage, WorkPage, JournalPage, ContactPage });