function Patreon() {
	const ref = React.useRef(null);
	window.useFadeIn(ref);
	return (
		<section id="patreon" style={{ padding: '140px 0' }}>
			<div className="container">
				<window.SectionHeader
					eyebrow="03 — Support"
					title="Keep the work going."
					note="Patrons fund the time between commissions. In return: process, source files, and the occasional print in the post."
				/>

				<div ref={ref} className="fade-up tier-grid">
					{window.TIERS.map((t, i) => <Tier key={t.id} tier={t} i={i}/>)}
				</div>

				<div style={{ display: 'flex', justifyContent: 'center', marginTop: 72 }}>
					<a
						href="https://patreon.com/koelet3d"
						target="_blank"
						rel="noopener noreferrer"
						className="patreon-cta"
						style={{
							display: 'inline-flex', alignItems: 'center', gap: 12,
							background: 'var(--fg)', color: 'var(--bg)',
							padding: '18px 32px', fontSize: 15, letterSpacing: 0.01,
							borderRadius: 999,
						}}
					>
						Join on Patreon
						<svg width="14" height="14" viewBox="0 0 12 12" fill="none">
							<path d="M3 9L9 3M9 3H4M9 3V8" stroke="currentColor" strokeWidth="1.4" strokeLinecap="square"/>
						</svg>
					</a>
				</div>
			</div>

			<style>{`
				.tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 72px; }
				@media (max-width: 900px) { .tier-grid { grid-template-columns: 1fr; } }
				.patreon-cta { transition: transform .2s ease, background .2s ease; }
				.patreon-cta:hover { background: var(--accent) !important; color: var(--accent-ink) !important; transform: translateY(-1px); }
			`}</style>
		</section>
	);
}

function Tier({ tier, i }) {
	const featured = tier.featured;
	const disabled = tier.disabled;
	return (
		<article
			style={{
				border: featured ? '1px solid var(--accent)' : '1px solid var(--divider)',
				background: featured ? 'color-mix(in oklab, var(--accent) 6%, var(--bg))' : 'var(--bg)',
				padding: 36, position: 'relative',
				display: 'flex', flexDirection: 'column', gap: 24,
				transform: featured ? 'translateY(-8px)' : 'none',
				transition: 'transform .3s ease',
				opacity: disabled ? 0.5 : 1,
				pointerEvents: disabled ? 'none' : 'auto',
			}}
		>
			{featured && (
				<span style={{
					position: 'absolute', top: -11, left: 24,
					background: 'var(--accent)', color: 'var(--accent-ink)',
					fontSize: 11, letterSpacing: 0.14, textTransform: 'uppercase',
					padding: '4px 10px', borderRadius: 999, fontWeight: 500,
				}}>Most popular</span>
			)}
			{disabled && (
				<span style={{
					position: 'absolute', top: -11, left: 24,
					background: 'var(--fg-mute)', color: 'var(--bg)',
					fontSize: 11, letterSpacing: 0.14, textTransform: 'uppercase',
					padding: '4px 10px', borderRadius: 999, fontWeight: 500,
				}}>Coming soon</span>
			)}

			<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
				<div>
					<div className="mono-mini">Tier {String(i + 1).padStart(2, '0')}</div>
					<h3 className="display" style={{ margin: '10px 0 0', fontSize: 32, fontWeight: 700, letterSpacing: '-0.03em' }}>{tier.name}</h3>
				</div>
			</div>

			<div>
				<div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
					<span className="display" style={{ fontSize: typeof tier.price === 'number' ? 56 : 40, fontWeight: 700, letterSpacing: '-0.05em' }}>
						{typeof tier.price === 'number' ? `$${tier.price}` : tier.price}
					</span>
					{typeof tier.price === 'number' && <span style={{ color: 'var(--fg-mute)', fontSize: 14 }}>/ month</span>}
				</div>
				<p style={{ color: 'var(--fg-soft)', margin: '8px 0 0', fontSize: 15 }}>{tier.blurb}</p>
			</div>

			<div style={{ height: 1, background: 'var(--divider)' }}/>

			<ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 12 }}>
				{tier.perks.map((p, idx) => (
					<li key={idx} style={{ display: 'flex', gap: 12, fontSize: 14.5, color: 'var(--fg)' }}>
						<span aria-hidden="true" style={{
							width: 6, height: 6, borderRadius: 999,
							background: featured ? 'var(--accent)' : 'var(--fg-mute)',
							marginTop: 9, flex: '0 0 auto',
						}}/>
						<span style={{ lineHeight: 1.55 }}>{p}</span>
					</li>
				))}
			</ul>

			<div style={{ flex: 1 }}/>

			<a
				href="https://patreon.com/koelet3d"
				target="_blank"
				rel="noopener noreferrer"
				className={featured ? 'tier-btn tier-btn-featured' : 'tier-btn'}
				style={{
					display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
					padding: '14px 20px',
					border: '1px solid ' + (featured ? 'var(--accent)' : 'var(--divider)'),
					background: featured ? 'var(--accent)' : 'transparent',
					color: featured ? 'var(--accent-ink)' : 'var(--fg)',
					fontSize: 14, letterSpacing: 0.01, borderRadius: 999,
					transition: 'background .2s ease, color .2s ease, border-color .2s ease',
				}}
			>
				Choose {tier.name}
				<svg width="12" height="12" viewBox="0 0 12 12" fill="none">
					<path d="M3 9L9 3M9 3H4M9 3V8" stroke="currentColor" strokeWidth="1.4" strokeLinecap="square"/>
				</svg>
			</a>
		</article>
	);
}

window.Patreon = Patreon;