/* Photo component — real images (Flux-generated for Anna landing). */
const Photo = ({ src, alt, bg, className = "" }) => {
  const style = bg ? { "--ph-bg": bg } : {};
  return (
    <div className={`ph ph-photo ${className}`} style={style}>
      {src && (
        <img
          src={`images/${src}`}
          alt={alt || ""}
          loading="lazy"
          decoding="async"
          draggable={false}
          style={{
            position: "absolute",
            inset: 0,
            width: "100%",
            height: "100%",
            objectFit: "cover",
            display: "block",
            userSelect: "none",
            WebkitUserDrag: "none",
            pointerEvents: "none"
          }}
        />
      )}
    </div>
  );
};

/* Backwards-compatible Placeholder: renders image if src given, else label chip */
const Placeholder = ({ label, bg, ink = "#1C1A15", tint, ratio, className = "", children, src }) => {
  const style = { "--ph-bg": bg || "#E9C9C1", aspectRatio: ratio };
  return (
    <div className={`ph ${className}`} style={style}>
      {src && (
        <img
          src={`images/${src}`}
          alt={label || ""}
          loading="lazy"
          draggable={false}
          style={{
            position: "absolute",
            inset: 0,
            width: "100%",
            height: "100%",
            objectFit: "cover",
            display: "block",
            userSelect: "none",
            WebkitUserDrag: "none",
            pointerEvents: "none"
          }}
        />
      )}
      {!src && label && <div className="ph-label" style={{ color: ink }}>{label}</div>}
      {tint && (
        <div
          style={{
            position: "absolute",
            inset: 0,
            background: tint,
            mixBlendMode: "multiply",
            pointerEvents: "none"
          }}
        />
      )}
      {children}
    </div>
  );
};

/* NailPlaceholder: photo if src given, else keep legacy abstract ovals */
const NailPlaceholder = ({ bg = "#E9C9C1", accent = "#D49A96", label = "NAIL ART", src, showLabel = false }) => {
  if (src) {
    return (
      <div className="ph" style={{ "--ph-bg": bg }}>
        <img
          src={`images/${src}`}
          alt={label}
          loading="lazy"
          draggable={false}
          style={{
            position: "absolute",
            inset: 0,
            width: "100%",
            height: "100%",
            objectFit: "cover",
            display: "block",
            userSelect: "none",
            WebkitUserDrag: "none",
            pointerEvents: "none"
          }}
        />
        {showLabel && label && <div className="ph-label ph-label--overlay">{label}</div>}
      </div>
    );
  }
  return (
    <div className="ph" style={{ "--ph-bg": bg }}>
      <svg viewBox="0 0 200 200" style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}>
        {[0, 1, 2, 3].map(i => (
          <ellipse
            key={i}
            cx={40 + i * 40}
            cy={100 + Math.sin(i) * 10}
            rx={14}
            ry={28}
            fill={accent}
            opacity={0.85 - i * 0.12}
            transform={`rotate(${-6 + i * 4} ${40 + i * 40} 100)`}
          />
        ))}
      </svg>
      <div className="ph-label">{label}</div>
    </div>
  );
};

Object.assign(window, { Placeholder, NailPlaceholder, Photo });