// React components used by /pribehy/ index (StoriesScreen).
// Detail pages are static — no React there.
// Header and Footer come from /site-components.js Web Components.

// PaintBlock — brand-colored gradient cell used as portrait container.
// If `photo` is provided, the gradient sits behind the photo.
function PaintBlock({ tone = "yellow", num, label, photo, showMeta = true, className = "", style = {} }) {
  return (
    <div className={`paint-block paint-${tone} ${className}`} style={style}>
      {photo ? <img src={photo} alt={label || ""} loading="lazy" decoding="async" width="800" height="1200" /> : null}
      {showMeta && num != null && <span className="corner-num">{String(num).padStart(2, "0")}</span>}
      {showMeta && label && <span className="corner-meta">{label}</span>}
    </div>
  );
}

// StoryCard — links to /pribehy/<slug>/ (single URL across languages;
// VI/EN visitors anchor to #vi/#en via Cloudflare _redirects).
function StoryCard({ story, num, lang = "cs" }) {
  // Both name and role are trilingual {cs, vi, en} — display in the active lang.
  // Fallback to CS (transliterated) if a lang variant is missing.
  const name = (story.name && (typeof story.name === "string"
    ? story.name
    : story.name[lang] || story.name.cs)) || "";
  const role = (story.role && story.role[lang]) || story.role?.cs || "";
  const readLabel = (UI && UI.readStory && UI.readStory[lang]) || "→ Číst příběh";
  return (
    <a href={`/pribehy/${story.slug}/`} className="story-card">
      <div className="story-thumb">
        <PaintBlock
          tone={story.bg}
          photo={story.photo}
          showMeta={false}
          className=""
          style={{ position: "absolute", inset: 0, width: "100%", aspectRatio: "auto" }}
        />
        <span className="num-overlay">N°{String(num).padStart(2, "0")}</span>
        <span className="read-overlay">{readLabel}</span>
      </div>
      <div className="story-meta">
        <span className="name">{name}</span>
        <span className="role">{role}</span>
      </div>
    </a>
  );
}

Object.assign(window, { PaintBlock, StoryCard });