/* Federica Gori — immagine con fallback al segnaposto on-brand.
   Con `src` rende una <img> (lazy, ratio fisso → zero CLS); se il file
   manca o senza `src`, il blocco caldo segna dove andrà una foto vera. */

function Photo({ src, alt = "", label = "Foto", icon = "circleDot", height = "100%", ratio = null, rounded = "var(--radius-lg)", tone = "sand", style = {} }) {
  const [broken, setBroken] = React.useState(false);
  if (src && !broken) {
    return (
      <img src={src} alt={alt || label} loading="lazy" decoding="async" onError={() => setBroken(true)}
        style={{ display: "block", width: "100%", height: ratio ? "auto" : height, aspectRatio: ratio || "auto",
                 objectFit: "cover", borderRadius: rounded, background: "#F1E9DA", ...style }} />
    );
  }
  const tones = {
    sand: { from: "#F1E9DA", to: "#DDD0BA", ink: "#6E665B" },
    deep: { from: "#38332E", to: "#22201D", ink: "#B3A99B" },
    clay: { from: "#EAD0BF", to: "#D2A187", ink: "#8C4530" },
    olive: { from: "#E5E8D4", to: "#C2CBA0", ink: "#4C5631" },
  };
  const t = tones[tone] || tones.sand;
  return (
    <div
      role="img"
      aria-label={label}
      style={{
        position: "relative",
        width: "100%",
        height: ratio ? "auto" : height,
        aspectRatio: ratio || "auto",
        borderRadius: rounded,
        overflow: "hidden",
        background: `linear-gradient(150deg, ${t.from}, ${t.to})`,
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        ...style,
      }}
    >
      <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 8, opacity: 0.6, color: t.ink }}>
        <Icon name={icon} size={32} stroke={1.4} />
        <span style={{ fontFamily: "var(--font-body)", fontSize: 11, fontWeight: 700, letterSpacing: "0.18em", textTransform: "uppercase" }}>{label}</span>
      </div>
    </div>
  );
}

Object.assign(window, { Photo });