// Laurel wreath: a left branch of leaves curving from the bottom up the side,
// mirrored for the right. SVG angles run clockwise from +x (90° = bottom).
const R = 40;
const C = 50;
const leaves = Array.from({ length: 8 }, (_, i) => {
  const deg = 112 + i * 18; // bottom-left round to top-left
  const a = (deg * Math.PI) / 180;
  return { x: C + R * Math.cos(a), y: C + R * Math.sin(a), deg };
});

function Branch() {
  const start = leaves[0];
  const end = leaves[leaves.length - 1];
  return (
    <g>
      <path
        d={`M${start.x.toFixed(2)} ${start.y.toFixed(2)} A${R} ${R} 0 0 1 ${end.x.toFixed(2)} ${end.y.toFixed(2)}`}
        fill="none"
        stroke="currentColor"
        strokeWidth="1"
      />
      {leaves.map((l, i) => {
        // Outer and inner leaf at each node, angled toward the top of the wreath.
        const tangent = l.deg + 90;
        return (
          <g key={i} transform={`translate(${l.x.toFixed(2)} ${l.y.toFixed(2)})`}>
            <ellipse cx="0" cy="-5" rx="2.4" ry="5.5" fill="currentColor" transform={`rotate(${tangent - 35})`} />
            <ellipse cx="0" cy="-5" rx="2.4" ry="5.5" fill="currentColor" transform={`rotate(${tangent + 35})`} opacity="0.75" />
          </g>
        );
      })}
    </g>
  );
}

export default function Laurel({ className = "" }: { className?: string }) {
  return (
    <svg viewBox="0 0 100 100" className={className} aria-hidden="true">
      <Branch />
      <g transform="matrix(-1 0 0 1 100 0)">
        <Branch />
      </g>
    </svg>
  );
}