// Hero section with animated flow diagram
const Hero = ({ t, lang, setLang, walletUrl }) => {
	const [tick, setTick] = React.useState(0);
	React.useEffect(() => {
		const id = setInterval(() => setTick(x => x + 1), 80);
		return () => clearInterval(id);
	}, []);

	return (
		<header className="hero">
			{/* Nav */}
			<nav className="nav">
				<div className="container nav-inner">
					<a className="brand" href="#">
						<span className="brand-mark">
							<img src="logo-real.png" alt="AlmaPay" width="32" height="32" />
						</span>
						<span className="brand-name">AlmaPay</span>
					</a>
					<div className="nav-links">
						<a href="#problem">{t.nav.product}</a>
						<a href="#how">{t.nav.how}</a>
						<a href="#calc">{t.nav.fees}</a>
						<a href="#faq">{t.nav.faq}</a>
					</div>
					<div className="nav-right">
						<div className="lang-switch" role="tablist">
							<button
								className={lang === 'ru' ? 'on' : ''}
								onClick={() => setLang('ru')}
							>
								RU
							</button>
							<button
								className={lang === 'en' ? 'on' : ''}
								onClick={() => setLang('en')}
							>
								EN
							</button>
							<button
								className={lang === 'fr' ? 'on' : ''}
								onClick={() => setLang('fr')}
							>
								FR
							</button>
						</div>
						<a
							className="btn btn-primary btn-sm"
							href={walletUrl}
							target="_blank"
							rel="noopener noreferrer"
						>
							{t.nav.login}
							<svg
								className="arrow"
								width="14"
								height="14"
								viewBox="0 0 14 14"
								fill="none"
							>
								<path
									d="M3 7H11M11 7L7.5 3.5M11 7L7.5 10.5"
									stroke="currentColor"
									strokeWidth="1.4"
									strokeLinecap="round"
									strokeLinejoin="round"
								/>
							</svg>
						</a>
					</div>
				</div>
			</nav>

			{/* Hero content */}
			<div className="container hero-inner">
				<div className="hero-text">
					<div className="eyebrow hero-eyebrow">
						<span className="dot" /> {t.hero.eyebrow}
					</div>
					<h1 className="h-display">
						{t.hero.title_a}
						<br />
						{t.hero.title_b}
						<br />
						<em>{t.hero.title_em}</em>
					</h1>
					<p className="lede hero-lede">{t.hero.lede}</p>
					<div className="hero-cta">
						<a
							className="btn btn-primary"
							href={walletUrl}
							target="_blank"
							rel="noopener noreferrer"
						>
							{t.hero.cta}
							<svg
								className="arrow"
								width="14"
								height="14"
								viewBox="0 0 14 14"
								fill="none"
							>
								<path
									d="M3 7H11M11 7L7.5 3.5M11 7L7.5 10.5"
									stroke="currentColor"
									strokeWidth="1.4"
									strokeLinecap="round"
									strokeLinejoin="round"
								/>
							</svg>
						</a>
						<a className="btn btn-ghost" href="#how">
							{t.hero.ghost}
						</a>
					</div>
					<div className="hero-meta">
						<div className="hm-item">
							<div className="hm-num mono">10 min</div>
							<div className="hm-cap">
								{lang === 'ru'
									? 'среднее время перевода'
									: 'average transfer time'}
							</div>
						</div>
						<div className="hm-divider" />
						<div className="hm-item">
							<div className="hm-num mono">€/$/¥ → ₽</div>
							<div className="hm-cap">
								{lang === 'ru'
									? 'конвертация в один шаг'
									: 'single-step conversion'}
							</div>
						</div>
						<div className="hm-divider" />
						<div className="hm-item">
							<div className="hm-num mono">
								{lang === 'ru' ? 'Поддержка' : 'Support'}
							</div>
							<div className="hm-cap">
								{lang === 'ru'
									? 'поддержка на 5 языках'
									: 'support in 5 languages'}
							</div>
						</div>
					</div>
				</div>
				{/* hero png */}
				<img
					className="hero-art"
					src="/uploads/hero.png"
					alt="AlmaPay"
					width="100%"
					height="auto"
				/>
			</div>

			<div className="hero-marquee">
				<div className="marquee-track">
					{[
						...'Visa · Mastercard · IBAN · SEPA · USDT · TRC-20 · ERC-20 · WeChat Pay · Alipay · ПСБ · СБП'.split(
							' · ',
						),
						...'Visa · Mastercard · IBAN · SEPA · USDT · TRC-20 · ERC-20 · WeChat Pay · Alipay · ПСБ · СБП'.split(
							' · ',
						),
					].map((s, i) => (
						<span key={i} className="mq-item">
							{s}
						</span>
					))}
				</div>
			</div>
		</header>
	);
};

const FlowDiagram = ({ t, tick }) => {
	// Animate 3 packets traveling through the wire
	const packets = [0, 1, 2].map(i => {
		const phase = (tick * 0.012 + i / 3) % 1;
		return { phase, idx: i };
	});

	return (
		<div className="flow">
			<div className="flow-card flow-from">
				<div className="fc-eyebrow mono">FROM</div>
				<div className="fc-title">{t.hero.flow_from}</div>
				<div className="fc-rows">
					<div className="fc-row">
						<span>EUR</span>
						<span className="mono">€ 800.00</span>
					</div>
					<div className="fc-row">
						<span>IBAN</span>
						<span className="mono">DE89 ·· 4321</span>
					</div>
				</div>
				<div className="fc-flag">🇩🇪 · 🇨🇳 · 🇮🇳 · 🇰🇿</div>
			</div>

			<div className="flow-mid">
				<div className="flow-via">
					<div className="via-ring">
						<svg viewBox="0 0 100 100" width="120" height="120">
							<defs>
								<linearGradient id="vrg" x1="0" y1="0" x2="1" y2="1">
									<stop offset="0" stopColor="#6f72ff" />
									<stop offset="1" stopColor="#8b5cf6" />
								</linearGradient>
							</defs>
							<circle
								cx="50"
								cy="50"
								r="46"
								fill="none"
								stroke="rgba(80,97,245,0.25)"
								strokeWidth="0.6"
								strokeDasharray="2 3"
							/>
							<circle
								cx="50"
								cy="50"
								r="38"
								fill="white"
								stroke="rgba(80,97,245,0.2)"
								strokeWidth="0.5"
							/>
							<g transform="translate(50 50)">
								<path
									d="M -14 14 L -3 0 M 3 0 L 14 14 M -14 -14 L -3 0 M 3 0 L 14 -14 M -16 0 L -3 0 M 3 0 L 16 0 M 0 -16 L 0 -3 M 0 3 L 0 16"
									stroke="url(#vrg)"
									strokeWidth="2.4"
									strokeLinecap="round"
									fill="none"
								/>
							</g>
						</svg>
					</div>
					<div className="via-label">{t.hero.flow_via}</div>
				</div>
				<div className="flow-wire flow-wire-l">
					<svg
						viewBox="0 0 200 60"
						preserveAspectRatio="none"
						width="100%"
						height="60"
					>
						<path
							d="M0 30 C 60 30, 80 30, 200 30"
							stroke="var(--line-2)"
							strokeWidth="0.8"
							strokeDasharray="3 4"
							fill="none"
						/>
					</svg>
					{packets.map(
						p =>
							p.phase < 0.5 && (
								<span
									key={p.idx}
									className="packet"
									style={{ left: `${p.phase * 200}%` }}
								>
									€
								</span>
							),
					)}
				</div>
				<div className="flow-wire flow-wire-r">
					<svg
						viewBox="0 0 200 60"
						preserveAspectRatio="none"
						width="100%"
						height="60"
					>
						<path
							d="M0 30 C 120 30, 140 30, 200 30"
							stroke="var(--line-2)"
							strokeWidth="0.8"
							strokeDasharray="3 4"
							fill="none"
						/>
					</svg>
					{packets.map(
						p =>
							p.phase >= 0.5 && (
								<span
									key={p.idx}
									className="packet packet-rub"
									style={{ left: `${(p.phase - 0.5) * 200}%` }}
								>
									₽
								</span>
							),
					)}
				</div>
			</div>

			<div className="flow-card flow-to">
				<div className="fc-eyebrow mono">TO</div>
				<div className="fc-title">{t.hero.flow_to}</div>
				<div className="fc-rows">
					<div className="fc-row">
						<span>RUB</span>
						<span className="mono">₽ 76 240</span>
					</div>
				</div>
				<div className="fc-flag">🇷🇺 ПСБ · расчётный счёт</div>
			</div>
		</div>
	);
};

window.Hero = Hero;