<script lang="ts">
	// {@html} sur contenu first-party (JSON i18n du dépôt), aucune donnée utilisateur.
	import Seo from '$lib/components/Seo.svelte';
	import donations from '$lib/data/donations.json';
	import { getBundle } from '$lib/i18n';

	const t = getBundle('en');

	// Stripe "custom amount" link, carried over verbatim from the legacy site
	// (legacy/src/assets/js/main.js — handleCustomDonation).
	const CUSTOM_DONATION_URL = 'https://don.o-k-i.net/b/6oE2aO94P88X9u8eV4';

	let customOneTime = $state('');
	let customMonthly = $state('');

	function handleCustomDonation(amount: string) {
		const value = Number(amount);
		if (!amount || !Number.isFinite(value) || value < 1) {
			alert('Please enter a valid amount');
			return;
		}
		window.location.href = CUSTOM_DONATION_URL;
	}
</script>

<Seo
	title="Donate"
	description="Support ORGANISATION KA INTERNATIONALE with a one-time or monthly donation through Stripe, Liberapay or Ko-fi."
	path="/en/donate/"
	locale="en"
/>

<section class="dons-hero">
	<h1>{t.support.section_title} <span class="accent">{t.support.section_title_accent}</span></h1>
	<p class="lede">{t.support.lede}</p>
	<p class="lede-secondary">{t.support.lede_secondary}</p>
</section>

<section class="support">
	<div class="support-inner">
		<div class="donation-panels">
			<div class="support-panel support-panel--primary">
				<h2>
					<svg class="icon" aria-hidden="true"><use href="/icons.svg#lakanmou" /></svg>
					{t.support.one_time_title}
				</h2>

				<div class="donation-grid">
					{#each donations.oneTime as d (d.url)}
						<a href={d.url} class="donation-amount" target="_blank" rel="external noopener noreferrer">
							{d.amount}{t.support.one_time_suffix}
						</a>
					{/each}
				</div>

				<div class="custom-donation">
					<label class="donation-form-label" for="customAmountOneTime">
						{t.support.custom_amount_label}
					</label>
					<div class="custom-donation-form">
						<input
							type="number"
							id="customAmountOneTime"
							bind:value={customOneTime}
							placeholder={t.support.custom_amount_placeholder}
							min="1"
							class="custom-amount-input"
						/>
						<span class="currency-symbol">{t.support.one_time_suffix}</span>
						<button
							type="button"
							class="custom-donation-btn custom-donation-btn-primary"
							onclick={() => handleCustomDonation(customOneTime)}
						>
							{t.support.custom_amount_btn}
						</button>
					</div>
				</div>
			</div>

			<div class="support-panel support-panel--secondary">
				<h2>{t.support.monthly_title}</h2>

				<div class="donation-grid">
					{#each donations.monthly as d (d.url)}
						<a
							href={d.url}
							class="donation-amount monthly"
							target="_blank"
							rel="external noopener noreferrer"
						>
							{d.amount}{t.support.monthly_suffix}
						</a>
					{/each}
				</div>

				<div class="custom-donation">
					<label class="donation-form-label" for="customAmountMonthly">
						{t.support.custom_monthly_label}
					</label>
					<div class="custom-donation-form">
						<input
							type="number"
							id="customAmountMonthly"
							bind:value={customMonthly}
							placeholder={t.support.custom_amount_placeholder}
							min="1"
							class="custom-amount-input custom-amount-input-monthly"
						/>
						<span class="currency-symbol">{t.support.monthly_suffix}</span>
						<button
							type="button"
							class="custom-donation-btn custom-donation-btn-secondary"
							onclick={() => handleCustomDonation(customMonthly)}
						>
							{t.support.custom_monthly_btn}
						</button>
					</div>
				</div>
			</div>
		</div>

		<div class="alt-donation-section">
			<h2 class="alt-donation-title">{t.support.alt_title}</h2>

			<div class="alt-donation-grid">
				<a
					href={donations.liberapay}
					target="_blank"
					rel="external noopener noreferrer"
					class="alt-donation-card alt-donation-card--liberapay"
				>
					<svg class="icon alt-donation-icon" aria-hidden="true"
						><use href="/icons.svg#jaden" /></svg
					>
					<h3>{t.support.liberapay_title}</h3>
					<p>{t.support.liberapay_text}</p>
				</a>

				<a
					href={donations.kofi}
					target="_blank"
					rel="external noopener noreferrer"
					class="alt-donation-card alt-donation-card--kofi"
				>
					<svg class="icon alt-donation-icon" aria-hidden="true"
						><use href="/icons.svg#lakanmou" /></svg
					>
					<h3>{t.support.kofi_title}</h3>
					<p>{t.support.kofi_text}</p>
				</a>
			</div>
		</div>

		<div class="security-note">
			<!-- Editorial content from the i18n bundle (Stripe link), from the legacy site -->
			<p>{@html t.support.security_stripe}</p>
			<p>{t.support.security_alt}</p>
		</div>
	</div>
</section>

<style>
	.dons-hero {
		padding: 9rem var(--space-4) 3rem;
		text-align: center;
		border-bottom: 1px solid var(--line);
	}

	.dons-hero h1 {
		font-size: clamp(2rem, 5vw, 3rem);
		margin-bottom: var(--space-2);
	}

	.accent {
		color: var(--or-oki);
	}

	.lede {
		max-width: 700px;
		margin: 0 auto var(--space-2);
		font-size: 1.2rem;
	}

	.lede-secondary {
		max-width: 700px;
		margin: 0 auto;
		font-size: 1.05rem;
		color: var(--muted);
	}

	.support {
		padding: var(--space-5) var(--space-4);
		background: var(--noir-profond);
		text-align: center;
	}

	.support-inner {
		max-width: 900px;
		margin: 0 auto;
	}

	.support-panel {
		background: var(--card-bg);
		border: var(--border-card);
		border-radius: var(--radius-md);
		padding: var(--space-4);
		margin-bottom: var(--space-4);
	}

	.support-panel h2 {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		margin-bottom: var(--space-3);
		font-size: 1.3rem;
	}

	.support-panel--primary {
		border-top: 4px solid var(--or-oki);
	}

	.support-panel--primary h2 {
		color: var(--or-oki);
	}

	.support-panel--secondary {
		border-top: 4px solid var(--vert-oki);
	}

	.support-panel--secondary h2 {
		color: var(--vert-oki);
	}

	.donation-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
		gap: var(--space-2);
		margin-bottom: var(--space-3);
	}

	.donation-amount {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 1.1rem;
		background: color-mix(in srgb, var(--or-oki) 8%, transparent);
		border: 2px solid var(--or-oki);
		color: var(--blanc-creme);
		border-radius: var(--radius-sm);
		font-weight: 700;
		font-size: 1.05rem;
		transition:
			background var(--dur-tanbou) var(--ease-ka),
			color var(--dur-tanbou) var(--ease-ka),
			transform var(--dur-tanbou) var(--ease-ka);
	}

	.donation-amount:hover {
		background: var(--or-oki);
		color: var(--noir-oki);
		transform: translateY(-2px);
	}

	.donation-amount.monthly {
		background: color-mix(in srgb, var(--vert-oki) 8%, transparent);
		border-color: var(--vert-oki);
	}

	.donation-amount.monthly:hover {
		background: var(--vert-oki);
		color: var(--noir-oki);
	}

	.donation-form-label {
		display: block;
		margin-bottom: var(--space-2);
	}

	.custom-donation-form {
		display: flex;
		gap: 0.5rem;
		justify-content: center;
		align-items: center;
		max-width: 350px;
		margin: 0 auto;
		padding: 0 var(--space-2);
	}

	.custom-amount-input {
		padding: 0.8rem;
		border: 2px solid var(--or-oki);
		background: color-mix(in srgb, var(--blanc-creme) 5%, transparent);
		color: var(--blanc-creme);
		border-radius: var(--radius-sm);
		flex: 1;
		min-width: 0;
		font-size: 1rem;
		font-family: var(--font-body);
		appearance: textfield;
		-moz-appearance: textfield;
	}

	.custom-amount-input::-webkit-inner-spin-button,
	.custom-amount-input::-webkit-outer-spin-button {
		-webkit-appearance: none;
		margin: 0;
	}

	.custom-amount-input:focus {
		outline: none;
		background: color-mix(in srgb, var(--blanc-creme) 8%, transparent);
	}

	.custom-amount-input-monthly {
		border-color: var(--vert-oki);
	}

	.currency-symbol {
		white-space: nowrap;
		flex-shrink: 0;
	}

	.custom-donation-btn {
		padding: 0.8rem 1.2rem;
		border: none;
		border-radius: var(--radius-sm);
		font-weight: 700;
		cursor: pointer;
		white-space: nowrap;
		flex-shrink: 0;
		font-family: var(--font-body);
		font-size: 1rem;
		transition: transform var(--dur-tanbou) var(--ease-ka);
	}

	.custom-donation-btn:hover {
		transform: translateY(-2px);
	}

	.custom-donation-btn-primary {
		background: var(--or-oki);
		color: var(--noir-oki);
	}

	.custom-donation-btn-secondary {
		background: var(--vert-oki);
		color: var(--noir-oki);
	}

	.alt-donation-section {
		margin-top: var(--space-4);
	}

	.alt-donation-title {
		color: var(--or-oki);
		margin-bottom: var(--space-4);
		font-size: 1.3rem;
	}

	.alt-donation-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
		gap: var(--space-3);
		max-width: 700px;
		margin: 0 auto;
	}

	.alt-donation-card {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--space-1);
		padding: var(--space-4);
		background: var(--card-bg);
		border: var(--border-card);
		border-top: 3px solid var(--card-accent, var(--or-oki));
		border-radius: var(--radius-md);
		color: var(--blanc-creme);
		transition: transform var(--dur-tanbou) var(--ease-ka);
	}

	.alt-donation-card:hover {
		transform: translateY(-4px);
		color: var(--blanc-creme);
	}

	.alt-donation-card--liberapay {
		--card-accent: var(--vert-oki);
	}

	.alt-donation-card--kofi {
		--card-accent: var(--or-oki);
	}

	.alt-donation-icon {
		width: 2rem;
		height: 2rem;
		color: var(--card-accent, var(--or-oki));
	}

	.alt-donation-card h3 {
		color: var(--card-accent, var(--or-oki));
		font-size: 1.2rem;
	}

	.alt-donation-card p {
		text-align: center;
		font-size: 0.95rem;
	}

	.security-note {
		margin-top: var(--space-4);
		padding: var(--space-3);
		background: var(--card-bg);
		border-radius: var(--radius-md);
	}

	.security-note p {
		font-size: 0.9rem;
		margin-bottom: 0.5rem;
		color: var(--muted);
	}

	@media (max-width: 480px) {
		.custom-donation-form {
			flex-direction: column;
		}

		.custom-amount-input,
		.custom-donation-btn {
			width: 100%;
		}
	}
</style>
