// folio/Photo.jsx — image renderer with lazy-load + blur-up + tone placeholder.
// When an entry has no `src`, renders a tone-tinted swatch composition so the
// layout still reads as designed.

const FOLIO_TONES = {
  bamboo:  { bg: "linear-gradient(135deg,#e8c98a,#c9a35e 60%,#a07d40)", fg: "#3a2410" },
  bark:    { bg: "linear-gradient(135deg,#8a5a32,#5a3a1f 60%,#3a2410)", fg: "#f4ecde" },
  cream:   { bg: "linear-gradient(155deg,#f6efe1,#e3d4b6)",              fg: "#3a2410" },
  ink:     { bg: "linear-gradient(155deg,#1c1410,#0a0805)",              fg: "#f4ecde" },
  burgundy:{ bg: "linear-gradient(155deg,#5a1a2a,#2a0010)",              fg: "#f4ecde" },
};

function FolioSwatch({ img, big = false }) {
  const t = FOLIO_TONES[img.tone] || FOLIO_TONES.cream;
  return (
    <div className="swatch" aria-label={img.title} style={{
      background: t.bg, color: t.fg, position: "relative",
    }}>
      {/* Subtle grain texture */}
      <div style={{
        position: "absolute", inset: 0,
        backgroundImage: "repeating-linear-gradient(90deg, rgba(0,0,0,0.04) 0 1px, transparent 1px 6px), repeating-linear-gradient(0deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 9px)",
        mixBlendMode: "overlay",
        pointerEvents: "none",
      }} />
      {/* Soft circular composition cue (suggests "subject lives roughly here") */}
      <div style={{
        position: "absolute",
        left: "50%", top: "52%",
        width: "62%", aspectRatio: 1,
        borderRadius: "50%",
        transform: "translate(-50%,-50%)",
        background: `radial-gradient(circle at 38% 32%, ${img.accent}33 0%, transparent 62%)`,
        filter: "blur(8px)",
        pointerEvents: "none",
      }} />
      {/* Corner labels */}
      <div style={{
        position: "absolute", inset: 0, padding: big ? 18 : 12,
        display: "flex", flexDirection: "column", justifyContent: "space-between",
        pointerEvents: "none",
      }}>
        <div style={{
          fontFamily: "var(--wn-mono)", fontSize: big ? 11 : 9.5, letterSpacing: "0.18em",
          textTransform: "uppercase", opacity: 0.7,
        }}>{img.no}</div>
        <div style={{
          fontFamily: "var(--wn-serif)", fontStyle: "italic", fontWeight: 300,
          fontSize: big ? 22 : 15, lineHeight: 1.1, alignSelf: "flex-start",
          maxWidth: "85%",
          opacity: 0.95,
        }}>{img.title}</div>
        <div style={{
          fontFamily: "var(--wn-mono)", fontSize: big ? 10 : 9, letterSpacing: "0.18em",
          textTransform: "uppercase", opacity: 0.55, alignSelf: "flex-end",
        }}>{img.cat}</div>
      </div>
    </div>
  );
}

function FolioPhoto({ img, big = false, eager = false }) {
  const [loaded, setLoaded] = React.useState(false);
  if (!img.src) return <FolioSwatch img={img} big={big} />;
  return (
    <>
      {!loaded && <FolioSwatch img={img} big={big} />}
      <img
        src={img.src}
        alt={img.title}
        loading={eager ? "eager" : "lazy"}
        decoding="async"
        onLoad={() => setLoaded(true)}
        style={{
          opacity: loaded ? 1 : 0,
          transition: "opacity 700ms ease",
        }}
      />
    </>
  );
}

Object.assign(window, { FolioPhoto, FolioSwatch });