// BelezaaPinkk logo — modern, distinctive, scalable SVG.
// Concept: a soft "B+P" monogram in a wavy organic blob shape (echoes lips/petal/water drop)
// with a subtle gradient — feminine, futuristic, unique.

function BrandLogo({ variant = 'medallion', style = {}, color = '#d14a85' }) {
  if (variant === 'mark') {
    // Compact monogram for header/footer
    return (
      <svg viewBox="0 0 200 200" style={style} xmlns="http://www.w3.org/2000/svg">
        <defs>
          <linearGradient id="bp-grad" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stopColor="#ffd1e0" />
            <stop offset="50%" stopColor="#ee82ad" />
            <stop offset="100%" stopColor="#b03871" />
          </linearGradient>
        </defs>
        {/* organic blob */}
        <path
          d="M 100 12
             C 150 12, 188 50, 188 100
             C 188 150, 150 188, 100 188
             C 50 188, 12 150, 12 100
             C 12 50, 50 12, 100 12 Z"
          fill="url(#bp-grad)"
          transform="rotate(-12 100 100)"
        />
        {/* highlight */}
        <ellipse cx="65" cy="60" rx="30" ry="18" fill="#fff" opacity="0.4" transform="rotate(-30 65 60)" />
        {/* BP letters */}
        <text x="100" y="128"
              textAnchor="middle"
              fontFamily="Instrument Serif, serif"
              fontStyle="italic"
              fontSize="100"
              fontWeight="400"
              fill="#fff"
              letterSpacing="-4">
          bp
        </text>
      </svg>
    );
  }

  // Medallion (hero)
  return (
    <svg viewBox="0 0 400 400" style={style} xmlns="http://www.w3.org/2000/svg">
      <defs>
        <linearGradient id="med-blob" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor="#fff5f8" />
          <stop offset="40%" stopColor="#ffd1e0" />
          <stop offset="100%" stopColor="#ee82ad" />
        </linearGradient>
        <radialGradient id="med-glow" cx="35%" cy="30%" r="60%">
          <stop offset="0%" stopColor="#fff" stopOpacity="0.9" />
          <stop offset="100%" stopColor="#fff" stopOpacity="0" />
        </radialGradient>
        <path id="med-arc-top" d="M 60 200 A 140 140 0 0 1 340 200" />
        <path id="med-arc-bot" d="M 80 215 A 120 120 0 0 0 320 215" />
      </defs>

      {/* organic petal blob */}
      <path
        d="M 200 30
           C 270 30, 350 80, 360 160
           C 370 230, 320 300, 250 350
           C 200 380, 130 370, 80 320
           C 30 270, 20 190, 60 120
           C 100 60, 150 30, 200 30 Z"
        fill="url(#med-blob)"
      />

      {/* glow highlight */}
      <ellipse cx="140" cy="120" rx="80" ry="50" fill="url(#med-glow)" transform="rotate(-25 140 120)" />

      {/* arc texts */}
      <text fontFamily="'Space Grotesk', monospace" fontSize="13" letterSpacing="7" fill={color} opacity="0.85">
        <textPath href="#med-arc-top" startOffset="50%" textAnchor="middle">
          SALÃO · ESTÉTICA · BRAGA
        </textPath>
      </text>
      <text fontFamily="'Space Grotesk', monospace" fontSize="10" letterSpacing="9" fill={color} opacity="0.65">
        <textPath href="#med-arc-bot" startOffset="50%" textAnchor="middle">
          EST · 2025
        </textPath>
      </text>

      {/* center wordmark */}
      <text x="200" y="190"
            textAnchor="middle"
            fontFamily="'Instrument Serif', serif"
            fontStyle="italic"
            fontSize="48"
            fill={color}
            fontWeight="400">
        Belezaa
      </text>
      <text x="200" y="245"
            textAnchor="middle"
            fontFamily="'Instrument Serif', serif"
            fontStyle="italic"
            fontSize="68"
            fill={color}
            fontWeight="400">
        pinkk
      </text>

      {/* decorative dots */}
      <circle cx="200" cy="280" r="3" fill={color} opacity="0.7" />
      <circle cx="186" cy="280" r="2" fill={color} opacity="0.4" />
      <circle cx="214" cy="280" r="2" fill={color} opacity="0.4" />
    </svg>
  );
}

window.BrandLogo = BrandLogo;