// Compact decorative earring SVGs — five variants for the showcase grid.

const Earring = ({ variant = "a" }) => {
  const grad = `grad-${variant}`;
  return (
    <svg viewBox="0 0 200 320" preserveAspectRatio="xMidYMid meet">
      <defs>
        <linearGradient id={grad} x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor="#E5C56E"/>
          <stop offset="50%" stopColor="#C9A24C"/>
          <stop offset="100%" stopColor="#8E6F2A"/>
        </linearGradient>
        <radialGradient id={`halo-${variant}`}>
          <stop offset="0%" stopColor="rgba(229,197,110,0.25)"/>
          <stop offset="100%" stopColor="rgba(229,197,110,0)"/>
        </radialGradient>
        <filter id={`glow-${variant}`}>
          <feGaussianBlur stdDeviation="0.6"/>
        </filter>
      </defs>
      <ellipse cx="100" cy="200" rx="90" ry="80" fill={`url(#halo-${variant})`}/>
      {/* hook */}
      <path d="M100 30 Q116 30 116 56 L116 90" fill="none" stroke={`url(#${grad})`} strokeWidth="2" strokeLinecap="round"/>

      {variant === "a" && (
        <g transform="translate(100 200)">
          <circle r="80" fill="none" stroke={`url(#${grad})`} strokeWidth="1.6"/>
          <circle r="56" fill="none" stroke={`url(#${grad})`} strokeWidth="0.9" opacity="0.6"/>
          {Array.from({ length: 24 }).map((_, i) => {
            const a = (i / 24) * Math.PI * 2;
            return (
              <line key={i}
                x1={Math.cos(a) * 56} y1={Math.sin(a) * 56}
                x2={Math.cos(a) * 78} y2={Math.sin(a) * 78}
                stroke={`url(#${grad})`} strokeWidth={i % 2 ? 0.5 : 1} opacity={i % 2 ? 0.4 : 0.85}/>
            );
          })}
          <circle r="6" fill={`url(#${grad})`}/>
          <circle r="2.5" fill="rgba(255,240,200,0.95)"/>
        </g>
      )}

      {variant === "b" && (
        <g transform="translate(100 200)">
          {/* biomorphic teardrop */}
          <path d="M0 -78 Q60 -40 50 30 Q35 78 0 78 Q-35 78 -50 30 Q-60 -40 0 -78 Z"
            fill="none" stroke={`url(#${grad})`} strokeWidth="1.4"/>
          <path d="M0 -54 Q40 -22 32 22 Q22 54 0 54 Q-22 54 -32 22 Q-40 -22 0 -54 Z"
            fill="none" stroke={`url(#${grad})`} strokeWidth="0.7" opacity="0.65"/>
          <path d="M0 -30 Q22 -10 18 14 Q12 30 0 30 Q-12 30 -18 14 Q-22 -10 0 -30 Z"
            fill="none" stroke={`url(#${grad})`} strokeWidth="0.5" opacity="0.45"/>
          <ellipse cx="0" cy="0" rx="3" ry="5" fill={`url(#${grad})`}/>
        </g>
      )}

      {variant === "c" && (
        <g transform="translate(100 200)">
          {/* angular hexagon stack */}
          {[78, 60, 42, 24].map((r, i) => {
            const pts = Array.from({ length: 6 })
              .map((_, j) => {
                const a = (j / 6) * Math.PI * 2 - Math.PI / 2;
                return `${Math.cos(a) * r},${Math.sin(a) * r}`;
              }).join(" ");
            return (
              <polygon key={r} points={pts}
                fill="none" stroke={`url(#${grad})`} strokeWidth={i === 0 ? 1.6 : 0.7} opacity={i === 0 ? 1 : 0.5}/>
            );
          })}
          <circle r="4" fill={`url(#${grad})`}/>
        </g>
      )}

      {variant === "d" && (
        <g transform="translate(100 200)">
          {/* concentric arcs / sun */}
          <circle r="78" fill="none" stroke={`url(#${grad})`} strokeWidth="1.6"/>
          {Array.from({ length: 32 }).map((_, i) => {
            const a = (i / 32) * Math.PI * 2;
            return (
              <line key={i}
                x1={Math.cos(a) * 80} y1={Math.sin(a) * 80}
                x2={Math.cos(a) * 92} y2={Math.sin(a) * 92}
                stroke={`url(#${grad})`} strokeWidth={i % 4 === 0 ? 1.1 : 0.5} opacity={i % 4 === 0 ? 0.95 : 0.5}/>
            );
          })}
          <circle r="48" fill="none" stroke={`url(#${grad})`} strokeWidth="0.7" opacity="0.5"/>
          <circle r="20" fill="none" stroke={`url(#${grad})`} strokeWidth="1" opacity="0.85"/>
          <circle r="6" fill={`url(#${grad})`}/>
        </g>
      )}

      {variant === "e" && (
        <g transform="translate(100 200)">
          {/* monogram letter inside ring */}
          <circle r="78" fill="none" stroke={`url(#${grad})`} strokeWidth="1.6"/>
          <circle r="60" fill="none" stroke={`url(#${grad})`} strokeWidth="0.6" opacity="0.5"/>
          <text textAnchor="middle" dominantBaseline="central"
            fontFamily="Cormorant Garamond, serif"
            fontStyle="italic"
            fontSize="78"
            fill={`url(#${grad})`}>
            Æ
          </text>
        </g>
      )}
    </svg>
  );
};

window.Earring = Earring;