// tomugi-cover.jsx — reusable visual atoms

function Logo({ size = 20 }) {
  const mark = Math.round(size * 1.2);
  return (
    <span className="logo" style={{ fontSize: size }}>
      <svg className="logo-mark" width={mark} height={mark} viewBox="0 0 64 64" fill="none" aria-hidden="true">
        <rect x="9" y="13" width="5" height="38" rx="2.5" fill="var(--accent)" />
        <rect x="17" y="15" width="38" height="8.5" rx="3" fill="#e9e6df" />
        <rect x="17" y="27.75" width="31" height="8.5" rx="3" fill="#b9bdc6" />
        <rect x="17" y="40.5" width="24" height="8.5" rx="3" fill="#82888f" />
      </svg>
      tomugi
    </span>
  );
}

// AniList serves the same cover at several sizes; swap to the small "medium"
// variant for the hero wall so the landing stays light.
function mediumCover(url) {
  return (url || "").replace("/cover/large/", "/cover/medium/").replace("/cover/extraLarge/", "/cover/medium/");
}

function Cover({ s, idx = 0, size = "md", showTexture = true, generic = false, onClick, title }) {
  // Real AniList cover art when available (unless `generic` forces the colored
  // book). Use the lighter "medium" thumbnail everywhere — covers display at
  // <=240px, so medium is sharp and ~3.5x lighter than the large variant.
  if (!generic && s && s.coverImage) {
    const src = mediumCover(s.coverImage);
    return (
      <div className={`cover cover-${size} cover-img`} style={{ background: s.coverColor || s.tint }} data-id={s.id} onClick={onClick} title={title}>
        <img src={src} alt={size === "wall" ? "" : s.title} loading={size === "wall" ? "eager" : "lazy"} />
      </div>
    );
  }

  const stripe = showTexture
    ? `repeating-linear-gradient(${135 + (idx % 4) * 12}deg, rgba(255,255,255,0.035) 0 2px, transparent 2px 9px)`
    : "none";

  return (
    <div className={`cover cover-${size}`} style={{ background: s.tint }} data-id={s.id} onClick={onClick} title={title}>
      <div className="cover-texture" style={{ backgroundImage: stripe }}></div>
      <div className="cover-spine"></div>
      <div className="cover-top">
        <span className="cover-genre">{s.genre}</span>
      </div>
    </div>
  );
}

Object.assign(window, { Logo, Cover });