<script>
	let { pos, BEAD_SPACING, DECADE_OFFSET, activeSection, decadeCounters } = $props();
</script>
<style>
.linear-rosary {
	width: 100%;
	height: auto;
	display: block;
	-webkit-tap-highlight-color: transparent;
}

.bead {
	fill: var(--nord10);
	transition: all 0.3s ease;
}

.large-bead {
	fill: var(--nord12);
	transition: all 0.3s ease;
}

.chain {
	stroke: var(--nord4);
	stroke-width: 2;
	fill: none;
	opacity: 0.5;
}

.cross-symbol {
	fill: var(--nord4);
	transition: all 0.3s ease;
}

@media (prefers-color-scheme: light) {
	.cross-symbol {
		fill: var(--nord3);
	}
	.chain {
		stroke: var(--nord3);
	}
}

.hitboxes {
	fill: transparent;
}

/* Active states */
.active-bead {
	fill: var(--nord11) !important;
	filter: drop-shadow(0 0 8px var(--nord11));
}

.active-large-bead {
	fill: var(--nord13) !important;
	filter: drop-shadow(0 0 10px var(--nord13));
}

.cross-symbol.active-cross {
	fill: var(--nord11) !important;
	filter: drop-shadow(0 0 10px var(--nord11));
}

/* Highlighted bead (orange for counting) */
.counted-bead {
	fill: var(--nord13) !important;
	filter: drop-shadow(0 0 8px var(--nord13));
}
</style>

<svg class="linear-rosary" viewBox="-100 -100 250 2200" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMin meet">
	<defs>
		<symbol id="cross-glyph" viewBox="0 0 1304 1497">
			<path d="M183 549q-22 45-70 91 47 44 70 89l95-67v-46Zm844 68v46l94 67q23-46 70-90-47-46-70-91ZM743 183q-44-23-91-70-44 47-89 70l68 95h45Zm-68 1037h-45l-67 95q45 23 89 70 46-47 91-70Zm61-664h228l208-126q10 105 132 211-122 104-132 208L964 723H736v434l126 208q-106 11-211 132-104-121-208-132l126-208V723H341L133 849Q122 745 0 640q122-105 133-210l208 126h228V342L443 133Q547 122 652 0q104 122 210 133L736 342Zm-110-99v159H510v46h116v384h54V662h116v-46H680V457Z"/>
		</symbol>
	</defs>

	<!-- Vertical chain -->
	<line x1="25" y1={pos.cross} x2="25" y2={pos.final_paternoster + 40} class="chain" />

	<!-- Cross (at top) -->
	<g id="cross-section" data-section="cross">
		<use href="#cross-glyph" x={25 - 25} y={pos.cross - 58} width="50" height="58"
			class="cross-symbol" class:active-cross={activeSection === 'cross'} />
	</g>

	<!-- First large bead (Paternoster) -->
	<circle cx="25" cy={pos.lbead1} r="15" class="large-bead" class:active-large-bead={activeSection === 'lbead1'} data-section="lbead1" />

	<!-- Three small beads -->
	<circle cx="25" cy={pos.start1} r="10" class="bead" class:active-bead={activeSection === 'start1'} data-section="start1" />
	<circle cx="25" cy={pos.start2} r="10" class="bead" class:active-bead={activeSection === 'start2'} data-section="start2" />
	<circle cx="25" cy={pos.start3} r="10" class="bead" class:active-bead={activeSection === 'start3'} data-section="start3" />

	<!-- Large bead before decades -->
	<circle cx="25" cy={pos.lbead2} r="15" class="large-bead" class:active-large-bead={activeSection === 'lbead2'} data-section="lbead2" />

	<!-- Benedictus Medal -->
	<image href="/glaube/benedictus.svg" x="5" y={pos.lbead2 + 25} width="40" height="40" />

	<!-- 5 Decades -->
	{#each [1, 2, 3, 4, 5] as d (d)}
		{@const decadePos = pos[`secret${d}`]}
		{@const transPos = pos[`secret${d}_transition`]}
		<!-- Decade {d}: Ave Maria (10 beads) -->
		{#each Array(10) as _, i (i)}
			<circle cx="25" cy={decadePos + DECADE_OFFSET + i * BEAD_SPACING} r="10" class="bead"
				class:active-bead={activeSection === `secret${d}`}
				class:counted-bead={i < decadeCounters[`secret${d}`]}
				data-section={`secret${d}`} />
		{/each}
		<!-- Transition: Gloria + Fatima + Paternoster (large bead) -->
		{#if d < 5}
			<circle cx="25" cy={transPos} r="15" class="large-bead" class:active-large-bead={activeSection === `secret${d}_transition`} data-section={`secret${d}_transition`} />
		{/if}
	{/each}

	<image href="/glaube/benedictus.svg" x="5" y={pos.secret5 + DECADE_OFFSET + 9 * BEAD_SPACING + 15} width="40" height="40" />
	<!-- Final transition: Gloria + Fatima -->
	<circle cx="25" cy={pos.final_transition} r="15" class="large-bead" class:active-large-bead={activeSection === 'final_transition'} data-section="final_transition" />

	<circle cx="25" cy={pos.final_salve} r="10" class="bead" class:active-bead={activeSection === 'final_salve'} data-section="final_salve" />
	<circle cx="25" cy={pos.final_schlussgebet} r="10" class="bead" class:active-bead={activeSection === 'final_schlussgebet'} data-section="final_schlussgebet" />
	<circle cx="25" cy={pos.final_michael} r="10" class="bead" class:active-bead={activeSection === 'final_michael'} data-section="final_michael" />

	<circle cx="25" cy={pos.final_paternoster} r="15" class="large-bead" class:active-large-bead={activeSection === 'final_paternoster'} data-section="final_paternoster" />
	<g data-section="final_cross">
		<use href="#cross-glyph" x={25 - 25} y={pos.final_cross - 58} width="50" height="58"
			class="cross-symbol" class:active-cross={activeSection === 'final_cross'} />
	</g>

	<!-- Invisible hitboxes for larger tap targets (anchor links for no-JS fallback) -->
	<g class="hitboxes">
		<!-- Cross hitbox -->
		<a href="#cross" aria-label="Cross"><rect x="-15" y="-30" width="80" height="80" data-section="cross" /></a>

		<!-- Individual bead hitboxes -->
		<a href="#lbead1" aria-label="First large bead"><circle cx="25" cy={pos.lbead1} r="25" data-section="lbead1" /></a>
		<a href="#start1" aria-label="First small bead"><circle cx="25" cy={pos.start1} r="20" data-section="start1" /></a>
		<a href="#start2" aria-label="Second small bead"><circle cx="25" cy={pos.start2} r="20" data-section="start2" /></a>
		<a href="#start3" aria-label="Third small bead"><circle cx="25" cy={pos.start3} r="20" data-section="start3" /></a>
		<a href="#lbead2" aria-label="Second large bead"><circle cx="25" cy={pos.lbead2} r="25" data-section="lbead2" /></a>

		<!-- Decade hitboxes -->
		{#each [1, 2, 3, 4, 5] as d (d)}
			{@const decadePos = pos[`secret${d}`]}
			<a href={`#secret${d}`} aria-label={`Decade ${d}`}><rect x="-15" y={decadePos - 2} width="80" height={DECADE_OFFSET + 9 * BEAD_SPACING + 12} data-section={`secret${d}`} /></a>
		{/each}

		<!-- Transition bead hitboxes -->
		{#each [1, 2, 3, 4] as d (d)}
			<a href={`#secret${d}_transition`} aria-label={`Transition after decade ${d}`}><circle cx="25" cy={pos[`secret${d}_transition`]} r="25" data-section={`secret${d}_transition`} /></a>
		{/each}
		<a href="#final_transition" aria-label="Final transition"><circle cx="25" cy={pos.final_transition} r="25" data-section="final_transition" /></a>
		<a href="#final_salve" aria-label="Salve Regina"><circle cx="25" cy={pos.final_salve} r="20" data-section="final_salve" /></a>
		<a href="#final_schlussgebet" aria-label="Closing prayer"><circle cx="25" cy={pos.final_schlussgebet} r="20" data-section="final_schlussgebet" /></a>
		<a href="#final_michael" aria-label="St. Michael prayer"><circle cx="25" cy={pos.final_michael} r="20" data-section="final_michael" /></a>
		<a href="#final_paternoster" aria-label="Final Our Father"><circle cx="25" cy={pos.final_paternoster} r="25" data-section="final_paternoster" /></a>
		<a href="#final_cross" aria-label="Final cross"><rect x="-15" y={pos.final_cross - 50} width="80" height="80" data-section="final_cross" /></a>
	</g>

</svg>
