/* roastynote — Portier & Cultivia brand pages.
   Requires globals from components-v3a/b (T, Chapter, TokyoClock) + DS bundle. */
const { Tag: RmTag } = window.RoastynoteDesignSystem_ac31dc;
const RC = window.RN_CONTENT;

/* Portier wordmark — live text with the extracted star icon as the O. */
function PortierWordmark({ tone, className }) {
  const star = "assets/logo/portier-star-" + (tone || "ink") + ".png";
  return (
    <span className={"pwordmark " + (className || "")} aria-label="Portier">
      <span aria-hidden="true">P</span>
      <img className="pwordmark__star" src={star} alt="" aria-hidden="true" />
      <span aria-hidden="true">RTIER</span>
    </span>
  );
}

/* ------------------------------------------------------------- Portier --- */
function PortierPage({ lang }) {
  const p = RC.portier;
  const works = RC.work.cards;
  return (
    <main className="page page--portier" data-screen-label="Portier page">
      <div className="phead wrap">
        <div className="chapter mono" data-reveal>
          <span className="chapter__rule"></span>
          <span className="chapter__name">{T(p.eyebrow, lang)}</span>
        </div>
        <div className="portier__lockup" data-reveal style={{"--reveal-delay":".08s"}}>
          <PortierWordmark tone="ink" />
        </div>
        <p className={"serif portier__tagline " + lang} data-reveal style={{"--reveal-delay":".2s"}}>
          {T(p.tagline, lang)}
        </p>
      </div>

      <div className="imgbreak">
        <img className="treat imgbreak__img" src="assets/img/portier.jpg" alt="" data-reveal />
      </div>

      <section className="wrap portier__intro">
        {p.intro.map((para, i) => (
          <p className={"studio__para " + lang} key={i} data-reveal style={{"--reveal-delay": (i * 0.12) + "s"}}>
            {T(para, lang)}
          </p>
        ))}
      </section>


      <section className="wrap portier__work">
        <RmTag className="portier__worklabel">{T(p.projectsLabel, lang)}</RmTag>
        <div className="work__grid portier__grid">
          {/* ponytail: works are still template placeholders — show "coming soon" on the portier page only, so content.js data stays untouched for the homepage */}
          {works.map((card, i) => (
            <div 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="" />
              </figure>
              <div className="workcard__meta">
                <span className="mono workcard__detail">{lang === "jp" ? "近日公開" : "Coming soon"}</span>
                <h3 className="serif workcard__name">{lang === "jp" ? "準備中" : "Coming soon"}</h3>
              </div>
            </div>
          ))}
        </div>
      </section>

      <section className="wrap page__cta" data-reveal>
        <a href="contact.html" className="serif link work__ctalink">{T(p.cta, lang)}</a>
      </section>
    </main>
  );
}

/* ------------------------------------------------------------ Cultivia --- */
function CultiviaPage({ lang }) {
  const c = RC.cultivia;
  return (
    <main className="page page--cultivia" data-screen-label="Cultivia page">
      <div className="phead wrap">
        <div className="chapter mono" data-reveal>
          <span className="chapter__rule"></span>
          <span className="chapter__name">{T(c.eyebrow, lang)}</span>
        </div>
        <h1 className={"serif phead__line " + lang} data-reveal style={{"--reveal-delay":".1s"}}>
          {T(c.heroLine, lang)}
        </h1>
      </div>

      <div className="imgbreak">
        <img className="treat imgbreak__img" src="assets/img/cultivia.png" alt="" data-reveal />
        <div className="wrap imgbreak__captions mono" data-reveal>
          <span>{lang === "jp" ? "バンカ・ブリトゥン諸島 · インドネシア" : "Bangka Belitung archipelago · Indonesia"}</span>
          <span>2.7410° S · 106.4406° E</span>
        </div>
      </div>

      <section className="wrap cultivia__intro">
        {c.intro.map((para, i) => (
          <p className={"studio__para " + lang} key={i} data-reveal style={{"--reveal-delay": (i * 0.12) + "s"}}>
            {T(para, lang)}
          </p>
        ))}
      </section>

      <section className="cultivia__stats" data-reveal>
        <div className="wrap cultivia__statgrid">
          {c.stats.map((s, i) => (
            <div className="cstat" key={i}>
              <span className="cstat__value">{s.value}</span>
              <span className="mono cstat__label">{T(s.label, lang)}</span>
            </div>
          ))}
        </div>
      </section>

      <section className="wrap cultivia__oils">
        <RmTag className="cultivia__oilslabel">{T(c.oilsLabel, lang)}</RmTag>
        <p className={"serif rooms__lead cultivia__oilsintro " + lang} data-reveal>{T(c.oilsIntro, lang)}</p>
        <div className="oil-list" data-reveal>
          {c.oils.map((o, i) => (
            <div className="oil" key={i}>
              <span className="mono oil__num">{String(i + 1).padStart(2, "0")}</span>
              <span className="oil__names">
                <span className="serif oil__name">{lang === "jp" ? o.jp : o.name}</span>
                <span className="mono oil__alt">{lang === "jp" ? o.name : o.jp}</span>
              </span>
              <span className={"oil__mood " + lang}>{T(o.mood, lang)}</span>
              <span className="mono oil__aroma">{T(o.aroma, lang)}</span>
            </div>
          ))}
        </div>
        <p className="mono cultivia__credentials" data-reveal>{T(c.credentials, lang)}</p>
      </section>

      <section className="wrap page__cta cultivia__ctarow" data-reveal>
        <a href="contact.html" className="serif link work__ctalink">{T(c.cta, lang)}</a>
        <a href={c.instagram.url} target="_blank" rel="noopener" className="mono link cultivia__ig">
          Instagram — {c.instagram.handle}
        </a>
      </section>
    </main>
  );
}

/* ------------------------------------------------------- Product rooms --- */
function ProductRoomPage({ lang, roomKey }) {
  const p = RC.productRooms[roomKey];
  return (
    <main className={"page page--product page--" + roomKey} data-screen-label={p.eyebrow.en + " page"}>
      <div className="phead wrap product__head">
        <div className="chapter mono" data-reveal>
          <span className="chapter__rule"></span>
          <span className="chapter__name">{T(p.eyebrow, lang)}</span>
        </div>
        <h1 className={"serif phead__line product__line " + lang} data-reveal style={{"--reveal-delay":".1s"}}>
          {T(p.heroLine, lang)}
        </h1>
      </div>

      <div className="product-hero wrap" data-reveal>
        <figure className="product-hero__figure">
          <img className="treat product-hero__img" src={p.img} alt="" />
          <figcaption className="mono product-hero__caption">{T(p.caption, lang)}</figcaption>
        </figure>
      </div>

      <section className="wrap product__intro">
        {p.intro.map((para, i) => (
          <p className={"studio__para " + lang} key={i} data-reveal style={{"--reveal-delay": (i * 0.12) + "s"}}>
            {T(para, lang)}
          </p>
        ))}
      </section>

      {p.specs && (
        <section className="wrap product-specs" data-reveal>
          <RmTag className="product-specs__label">{T(p.specsLabel, lang)}</RmTag>
          <div className="product-specs__grid">
            {p.specs.map((spec, i) => (
              <div className="product-spec" key={i}>
                <span className="mono product-spec__label">{T(spec.label, lang)}</span>
                <span className={"serif product-spec__value " + lang}>{T(spec.value, lang)}</span>
              </div>
            ))}
          </div>
        </section>
      )}

      <section className="wrap product__details">
        <RmTag className="product__detailslabel">{T(p.detailsLabel, lang)}</RmTag>
        <div className="product__detaillist" data-reveal>
          {p.details.map((detail, i) => (
            <div className="product__detail" key={i}>
              <span className="mono product__detailnum">{String(i + 1).padStart(2, "0")}</span>
              <p className={"serif product__detailtext " + lang}>{T(detail, lang)}</p>
            </div>
          ))}
        </div>
      </section>

      {p.purchase && (
        <section className="wrap product-order" data-reveal>
          <div className="product-order__label mono">{T(p.purchase.label, lang)}</div>
          <p className={"serif product-order__line " + lang}>{T(p.purchase.line, lang)}</p>
          <div className="product-order__actions">
            <a href="contact.html" className="mono link product-order__primary">{T(p.purchase.primary, lang)}</a>
            <p className={"product-order__secondary " + lang}>{T(p.purchase.secondary, lang)}</p>
          </div>
        </section>
      )}

      <section className="wrap page__cta" data-reveal>
        <a href="contact.html" className="serif link work__ctalink">{T(p.cta, lang)}</a>
      </section>
    </main>
  );
}

function LattecartePage({ lang }) {
  return <ProductRoomPage lang={lang} roomKey="lattecarte" />;
}

function ContextPage({ lang }) {
  return <ProductRoomPage lang={lang} roomKey="context" />;
}

function SaltLightPage({ lang }) {
  return <ProductRoomPage lang={lang} roomKey="salt-light" />;
}

function IndonesianBeansPage({ lang }) {
  return <ProductRoomPage lang={lang} roomKey="indonesian-beans" />;
}

Object.assign(window, { PortierWordmark, PortierPage, CultiviaPage, ProductRoomPage, LattecartePage, ContextPage, SaltLightPage, IndonesianBeansPage });