// Brand mark for آرام جان — a layered translucent lotus on a blue→indigo
// gradient, matching the app icon. Self-contained SVG so it stays crisp at any
// size and needs no image asset. Size it with `className` (e.g. "w-9 h-9").
function LotusLogo({ className = "w-9 h-9", title = "آرام جان" }) {
  const petal = "M50 72 C42 56 42 34 50 22 C58 34 58 56 50 72 Z";
  const angles = [-50, -25, 0, 25, 50];

  const opacityFor = (a) => {
    if (a === 0) return 0.95;
    if (Math.abs(a) === 25) return 0.72;
    return 0.5;
  };

  return (
    <svg
      viewBox="0 0 100 100"
      className={className}
      xmlns="http://www.w3.org/2000/svg"
      role="img"
      aria-label={title}
    >
      <defs>
        <linearGradient id="aramjan-lotus-bg" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#5fa0ff" />
          <stop offset="100%" stopColor="#6a4ff0" />
        </linearGradient>
      </defs>
      <rect width="100" height="100" rx="26" fill="url(#aramjan-lotus-bg)" />
      <g fill="#ffffff">
        {angles.map((a) => (
          <path
            key={a}
            d={petal}
            transform={`rotate(${a} 50 72)`}
            fillOpacity={opacityFor(a)}
          />
        ))}
      </g>
    </svg>
  );
}

export default LotusLogo;