/* cards.jsx — RecipeCard + ArticleRow (shared building blocks) */
(function () {
  const { cx, fmtTime, fmtDate, Difficulty, Stat, SmartImg } = window;

  function RecipeCard({ recipe: r, go, idx = 0, featured = false }) {
    const { Clock } = window.Icons;
    return (
      <article className="rcard reveal" style={{ "--i": idx, cursor: "pointer" }} onClick={() => go({ name: "recipe", slug: r.slug })}>
        <div className="rcard-media">
          <SmartImg src={r.image} alt={r.title} label={r.category} />
          <span className="badge">{r.category}</span>
        </div>
        <div className="col" style={{ padding: "1rem 1.1rem 1.15rem", gap: ".5rem", flex: 1 }}>
          <h3 className="h3" style={{ lineHeight: 1.25 }}>{r.title}</h3>
          <p className="muted" style={{ fontSize: ".9rem", lineHeight: 1.5, flex: 1, textWrap: "pretty" }}>{r.summary}</p>
          <div className="row wrap" style={{ gap: ".9rem", marginTop: ".35rem" }}>
            <Stat icon={Clock} title="Total time">{fmtTime(r.total)}</Stat>
            <Difficulty level={r.difficulty} />
          </div>
        </div>
      </article>
    );
  }

  function ArticleRow({ article: a, go, last }) {
    const { ArrowRight, Clock } = window.Icons;
    return (
      <button className="spread" style={{
        width: "100%", textAlign: "left", padding: "1.15rem 1.3rem", gap: "1rem",
        borderBottom: last ? "none" : "1px solid hsl(var(--border))", transition: "background .15s ease",
      }}
        onClick={() => go({ name: "article", section: a.section, slug: a.slug })}
        onMouseEnter={(e) => (e.currentTarget.style.background = "hsl(var(--accent))")}
        onMouseLeave={(e) => (e.currentTarget.style.background = "transparent")}>
        <div className="col" style={{ gap: ".25rem", minWidth: 0 }}>
          <strong style={{ fontSize: "1.02rem", letterSpacing: "-.01em" }}>{a.title}</strong>
          <span className="muted" style={{ fontSize: ".9rem", textWrap: "pretty" }}>{a.summary}</span>
          <span className="row muted" style={{ gap: ".7rem", fontSize: ".8rem", marginTop: ".3rem" }}>
            <span className="row" style={{ gap: ".35rem" }}><Clock size={13} />{a.readMins} min read</span>
            <span>·</span><span>{fmtDate(a.date)}</span>
          </span>
        </div>
        <ArrowRight size={18} style={{ color: "hsl(var(--muted-foreground))", flex: "none" }} />
      </button>
    );
  }

  Object.assign(window, { RecipeCard, ArticleRow });
})();