// Componente que renderiza um placeholder estilizado do retrato
// Versão P&B e Colorida, com moldura oval premium
const Portrait = ({ colored = false, blur = 0, className = "", style = {} }) => {
  // Silhueta artística feita com gradients radiais — sugere rosto sem desenhar feições
  const bgGradient = colored
    ? `radial-gradient(ellipse 60% 70% at 50% 38%, #f4d4c1 0%, #e8b8a0 25%, #c98968 55%, #6b3a2a 85%, #2a160e 100%)`
    : `radial-gradient(ellipse 60% 70% at 50% 38%, #d8d2cc 0%, #a8a09a 30%, #5e564f 60%, #2a2520 90%, #0e0c0a 100%)`;

  const hairGradient = colored
    ? `radial-gradient(ellipse 80% 50% at 50% 18%, #3d2418 0%, #1a0e08 70%, transparent 100%)`
    : `radial-gradient(ellipse 80% 50% at 50% 18%, #1a1614 0%, #0a0807 70%, transparent 100%)`;

  return (
    <div
      className={className}
      style={{
        position: "relative",
        width: "100%",
        aspectRatio: "3/4",
        borderRadius: "50% / 38%",
        overflow: "hidden",
        filter: blur ? `blur(${blur}px)` : "none",
        background: colored
          ? `linear-gradient(180deg, #2a1810 0%, #1a0e08 100%)`
          : `linear-gradient(180deg, #2a2520 0%, #0e0c0a 100%)`,
        ...style,
      }}
    >
      {/* Cabelo / topo */}
      <div
        style={{
          position: "absolute",
          inset: 0,
          background: hairGradient,
        }}
      />
      {/* Rosto / pele */}
      <div
        style={{
          position: "absolute",
          inset: 0,
          background: bgGradient,
          mixBlendMode: "screen",
        }}
      />
      {/* Sombra lateral suave para volume */}
      <div
        style={{
          position: "absolute",
          inset: 0,
          background: `radial-gradient(ellipse 90% 100% at 30% 50%, transparent 40%, rgba(0,0,0,0.45) 100%)`,
        }}
      />
      {/* Highlight de luz */}
      <div
        style={{
          position: "absolute",
          inset: 0,
          background: `radial-gradient(ellipse 25% 35% at 62% 35%, rgba(255,240,220,0.18) 0%, transparent 60%)`,
        }}
      />
      {/* Grão sutil */}
      <div
        style={{
          position: "absolute",
          inset: 0,
          opacity: 0.18,
          mixBlendMode: "overlay",
          backgroundImage: `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' seed='3'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='0.5'/></svg>")`,
        }}
      />
    </div>
  );
};

// Moldura premium em volta do retrato
const PortraitFrame = ({ children, accentColor = "#b8893d", style = {} }) => {
  return (
    <div
      style={{
        position: "relative",
        padding: "14px",
        background: `linear-gradient(155deg, ${accentColor} 0%, #8a6628 50%, ${accentColor} 100%)`,
        borderRadius: "50% / 38%",
        boxShadow: `
          0 30px 60px -20px rgba(60, 40, 20, 0.45),
          0 12px 30px -10px rgba(60, 40, 20, 0.3),
          inset 0 1px 2px rgba(255,255,255,0.4),
          inset 0 -2px 4px rgba(0,0,0,0.2)
        `,
        ...style,
      }}
    >
      <div
        style={{
          padding: "6px",
          background: "#0a0807",
          borderRadius: "50% / 38%",
          boxShadow: "inset 0 2px 8px rgba(0,0,0,0.6)",
        }}
      >
        {children}
      </div>
    </div>
  );
};

window.Portrait = Portrait;
window.PortraitFrame = PortraitFrame;