// ---- Live personalized journal cover --------------------------------
// Square hardcover. A giant J-mark sits cropped in the background like a
// watermark; the personalized title sits over it. A chosen theme defines
// the background colour, the watermark tone and the text colour.

function JournalCover({ data, flat = false, scale = 1 }) {
  const name = (data.name || "").trim();
  const themes = window.COVER_THEMES || [];
  const theme = themes.find(t => t.id === (data.theme || "creme")) || themes[0];
  const et = window.formatDateDE(data.et);
  const year = window.yearFromDate(data.et);

  // muted ink for sub-text, derived from whether the theme text is light or dark
  const ink = theme.light ? "rgba(255,247,229," : "rgba(58,7,0,";

  return (
    <div className="j-cover-wrap" style={{ transform: scale !== 1 ? `scale(${scale})` : undefined, transformOrigin: "center" }}>
      <div className="j-cover" style={{ background: theme.bg, boxShadow: flat ? "none" : "var(--shadow-cover)" }}>
        <span className="j-cover-spine" style={{ background: theme.light ? "rgba(0,0,0,.12)" : "rgba(58,7,0,.06)" }} />
        <img src={brandAsset("mark", theme.mark)} alt="" className="j-cover-watermark" />

        <div className="j-cover-inner">
          <div className="j-cover-top">
            <img src={brandAsset("word", theme.word)} alt="Journella" className="j-cover-word" />
            <span className="j-cover-year" style={{ color: ink + ".5)" }}>{year}</span>
          </div>

          <div className="j-cover-title">
            <div className="j-cover-sub" style={{ color: ink + ".5)" }}>Schwangerschaftsjournal</div>
            <div className="j-cover-for" style={{ color: ink + ".45)" }}>{name ? "für" : ""}</div>
            <div className="j-cover-name" style={{
              color: theme.name,
              fontSize: name && name.length > 11 ? "min(17cqw,66px)" : "min(22cqw,86px)",
              transition: "color .3s var(--ease)",
            }}>
              {name || "deinen Namen"}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { JournalCover });