// Logo SW — usa o PNG fornecido (transparente)
// Para versões em fundo escuro, aplica filtro CSS para inverter cor para off-white
const Logo = ({ height = 60, light = false, showLabel = true }) => {
  const filter = light
    ? "brightness(0) invert(1)"
    : "none";
  return (
    <img
      src="assets/logo.png"
      alt="SW Doces Exclusivos"
      style={{
        height,
        width: "auto",
        display: "block",
        filter,
        // se showLabel=false recortamos a área inferior do label
        ...(showLabel ? {} : { clipPath: "inset(0 0 30% 0)" })
      }}
    />
  );
};

// Ornamento decorativo (linha + diamante + linha)
const Ornament = ({ width = 120, color = "#6B3D2A" }) => (
  <svg viewBox="0 0 120 14" width={width} height={14} style={{ display: "block" }}>
    <line x1="0" y1="7" x2="48" y2="7" stroke={color} strokeWidth="0.6" />
    <g transform="translate(60 7)">
      <rect x="-3" y="-3" width="6" height="6" transform="rotate(45)" fill="none" stroke={color} strokeWidth="0.6" />
      <circle cx="0" cy="0" r="1" fill={color} />
    </g>
    <line x1="72" y1="7" x2="120" y2="7" stroke={color} strokeWidth="0.6" />
  </svg>
);

// Eyebrow (kicker em caps com tracking generoso, com filete dos lados)
const Eyebrow = ({ children, color = "#6B3D2A", lines = true }) => (
  <div style={{
    fontFamily: "'Cormorant Garamond', serif",
    fontSize: 12,
    letterSpacing: "0.42em",
    textTransform: "uppercase",
    color,
    display: "inline-flex",
    alignItems: "center",
    gap: 14,
    fontWeight: 500,
  }}>
    {lines && <span style={{ width: 28, height: 0.5, background: color }} />}
    <span>{children}</span>
    {lines && <span style={{ width: 28, height: 0.5, background: color }} />}
  </div>
);

window.Logo = Logo;
window.Ornament = Ornament;
window.Eyebrow = Eyebrow;