/* Federica Gori — segnaposto immagine on-brand.
   Federica caricherà altre foto: questi blocchi caldi (avorio/sabbia,
   argilla o grafite) segnano dove andrà una foto vera. Sostituire con <img>. */

function Photo({ label = "Foto", icon = "circleDot", height = "100%", ratio = null, rounded = "var(--radius-lg)", tone = "sand", 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 });