// Funding methods grid
const Methods = ({ t, lang }) => {
	const icons = [
		// IBAN
		<svg viewBox="0 0 40 40" width="36" height="36" fill="none" key="i">
			<rect
				x="6"
				y="11"
				width="28"
				height="20"
				rx="2"
				stroke="currentColor"
				strokeWidth="1.4"
			/>
			<path d="M6 17 H34" stroke="currentColor" strokeWidth="1.4" />
			<path
				d="M11 23 H17 M11 26 H21"
				stroke="currentColor"
				strokeWidth="1.2"
				strokeLinecap="round"
			/>
		</svg>,
		// Card
		<svg viewBox="0 0 40 40" width="36" height="36" fill="none" key="c">
			<rect
				x="5"
				y="9"
				width="30"
				height="22"
				rx="3"
				stroke="currentColor"
				strokeWidth="1.4"
			/>
			<path d="M5 15 H35" stroke="currentColor" strokeWidth="1.4" />
			<circle cx="27" cy="23" r="3" stroke="currentColor" strokeWidth="1.2" />
			<circle cx="31" cy="23" r="3" stroke="currentColor" strokeWidth="1.2" />
		</svg>,
		// Crypto
		<svg viewBox="0 0 40 40" width="36" height="36" fill="none" key="x">
			<circle cx="20" cy="20" r="13" stroke="currentColor" strokeWidth="1.4" />
			<path
				d="M16 14 V26 M19 14 V26 M14 17 H22 C24 17, 24 21, 22 21 H14 M14 21 H23 C25 21, 25 25, 23 25 H14"
				stroke="currentColor"
				strokeWidth="1.4"
				strokeLinecap="round"
				strokeLinejoin="round"
			/>
		</svg>,
		// WeChat
		<svg viewBox="0 0 40 40" width="36" height="36" fill="none" key="w">
			<ellipse
				cx="16"
				cy="17"
				rx="9"
				ry="7"
				stroke="currentColor"
				strokeWidth="1.4"
			/>
			<ellipse
				cx="25"
				cy="24"
				rx="8"
				ry="6"
				stroke="currentColor"
				strokeWidth="1.4"
			/>
			<circle cx="13" cy="16" r="0.8" fill="currentColor" />
			<circle cx="19" cy="16" r="0.8" fill="currentColor" />
			<circle cx="22" cy="24" r="0.7" fill="currentColor" />
			<circle cx="28" cy="24" r="0.7" fill="currentColor" />
		</svg>,
	];

	return (
		<section className="methods">
			<div className="container">
				<div className="section-head section-head-row">
					<div>
						<div className="eyebrow">{t.methods.eyebrow}</div>
						<h2 className="h-section">
							{t.methods.title_a}
							<em>{t.methods.title_em}</em>
						</h2>
					</div>
					<p className="lede methods-lede">{t.methods.lede}</p>
				</div>

				<div className="methods-grid">
					{t.methods.list.map((m, i) => (
						<div className="method-card" key={i}>
							<div className="mc-top">
								<div className="mc-icon">{icons[i]}</div>
								<div className="mc-tag mono">{m.tag}</div>
							</div>
							<div className="mc-title">{m.t}</div>
							<div className="mc-desc">{m.d}</div>
							<div className="mc-foot">
								<span className="mc-time mono">{m.time}</span>
							</div>
						</div>
					))}
				</div>
			</div>
		</section>
	);
};
window.Methods = Methods;
