// Hero Rosary — desenho ornamental que se desenha sozinho
// SVG component standalone; loaded into hero
const HeroRosary = () => {
  return (
    <svg
      viewBox="-200 -200 400 600"
      width="100%"
      height="100%"
      style={{
        maxWidth: '460px',
        maxHeight: '720px',
        overflow: 'visible',
      }}
      aria-hidden="true"
    >
      <defs>
        <radialGradient id="bead-grad" cx="35%" cy="30%">
          <stop offset="0%" stopColor="#FFFFFF" />
          <stop offset="60%" stopColor="#F3F6FB" />
          <stop offset="100%" stopColor="#CFE0F0" />
        </radialGradient>
        <radialGradient id="big-bead-grad" cx="35%" cy="30%">
          <stop offset="0%" stopColor="#FFFFFF" />
          <stop offset="55%" stopColor="var(--gold-light, #F4DEA4)" />
          <stop offset="100%" stopColor="var(--gold, #E6C57C)" />
        </radialGradient>
        <linearGradient id="cross-grad" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%" stopColor="var(--gold-light, #D9B870)" />
          <stop offset="100%" stopColor="var(--gold-deep, #8C6628)" />
        </linearGradient>
      </defs>

      {/* Anel principal de 5 décadas — formando uma elipse */}
      <g className="hero-rosary-loop" style={{ animation: 'rosaryDraw 3s ease-out forwards' }}>
        {(() => {
          const beads = [];
          // ellipse path coords
          const rx = 160, ry = 200, cx = 0, cy = -10;
          const N = 50;
          for (let i = 0; i < N; i++) {
            // start at angle = -PI/2 (top) and go around clockwise
            const angle = -Math.PI / 2 + (i / N) * Math.PI * 2;
            const x = cx + Math.cos(angle) * rx;
            const y = cy + Math.sin(angle) * ry;
            const isPaternoster = i % 10 === 0;
            beads.push(
              <circle
                key={'b' + i}
                cx={x}
                cy={y}
                r={isPaternoster ? 6 : 4}
                fill={isPaternoster ? 'url(#big-bead-grad)' : 'url(#bead-grad)'}
                opacity="0.95"
                style={{
                  animation: `beadIn 0.04s ${i * 0.04}s ease-out backwards`,
                }}
              />
            );
          }
          return beads;
        })()}

        {/* fio do rosário */}
        <ellipse
          cx="0"
          cy="-10"
          rx="160"
          ry="200"
          fill="none"
          stroke="#FFFFFF"
          strokeWidth="0.6"
          opacity="0.5"
          strokeDasharray="2 2"
        />
      </g>

      {/* Pendant — central piece (medalha + cordão de 5 contas + crucifixo) */}
      <g transform="translate(0, 200)">
        {/* medalha central */}
        <circle cx="0" cy="0" r="14" fill="url(#big-bead-grad)" />
        <circle cx="0" cy="0" r="14" fill="none" stroke="var(--gold-deep, #8C6628)" strokeWidth="0.8" />
        <text x="0" y="5" textAnchor="middle" fontSize="13" fill="var(--bg, #F4ECDC)" fontFamily="serif" fontStyle="italic">M</text>

        {/* cordão descendo */}
        {[1, 2, 3, 4, 5].map((i) => (
          <circle
            key={'pend' + i}
            cx="0"
            cy={i * 16 + 18}
            r={i === 4 ? 6 : 4}
            fill={i === 4 ? 'url(#big-bead-grad)' : 'url(#bead-grad)'}
          />
        ))}

        {/* linha conectora */}
        <line x1="0" y1="14" x2="0" y2="110" stroke="var(--gold, #B8893E)" strokeWidth="0.4" opacity="0.5" strokeDasharray="2 2" />

        {/* crucifixo */}
        <g transform="translate(0, 130)">
          <rect x="-2" y="-22" width="4" height="44" fill="url(#cross-grad)" rx="0.5" />
          <rect x="-12" y="-7" width="24" height="4" fill="url(#cross-grad)" rx="0.5" />
          <circle cx="0" cy="-22" r="2" fill="var(--gold-light, #D9B870)" />
          <circle cx="0" cy="22" r="2" fill="var(--gold-light, #D9B870)" />
          <circle cx="-12" cy="-5" r="2" fill="var(--gold-light, #D9B870)" />
          <circle cx="12" cy="-5" r="2" fill="var(--gold-light, #D9B870)" />
        </g>
      </g>
    </svg>
  );
};

window.HeroRosary = HeroRosary;