// Interactive app demo with swipeable phone screens
const APP_SCREENS = {
	ru: [
		{
			title: 'Главный экран',
			content: (
				<>
					<div className="ph-top">
						<div className="ph-greet">Привет, Рави</div>
						<div className="ph-avatar">Р</div>
					</div>
					<div className="ph-balance">
						<div className="ph-bal-lbl">Баланс</div>
						<div className="ph-bal-num mono">
							₽ 76 240<span className="ph-bal-fr">,00</span>
						</div>
						<div className="ph-bal-sub mono">≈ € 800 на счёте</div>
					</div>
					<div className="ph-actions">
						<button>
							<span>↓</span>Пополнить
						</button>
						<button>
							<span>→</span>В банк
						</button>
						<button>
							<span>+</span>Спонсор
						</button>
					</div>
					<div className="ph-list-title">История</div>
					<div className="ph-tx">
						<span>↓</span>
						<div>
							<b>Пополнение IBAN</b>
							<div className="mono">сегодня · 10:24</div>
						</div>
						<b className="mono">+ 76 240</b>
					</div>
					<div className="ph-tx">
						<span>→</span>
						<div>
							<b>ПСБ · 4421</b>
							<div className="mono">12 апр · 18:02</div>
						</div>
						<b className="mono">— 12 000</b>
					</div>
					<div className="ph-tx">
						<span>↓</span>
						<div>
							<b>USDT TRC-20</b>
							<div className="mono">8 апр</div>
						</div>
						<b className="mono">+ 24 100</b>
					</div>
				</>
			),
		},
		{
			title: 'Пополнение',
			content: (
				<>
					<div className="ph-page-title">Пополнить счёт</div>
					<div className="ph-method-list">
						<div className="ph-method on">
							<b>IBAN / SEPA</b>
							<span className="mono">1–2 дня</span>
						</div>
						<div className="ph-method">
							<b>Картой Visa / MC</b>
							<span className="mono">10 мин</span>
						</div>
						<div className="ph-method">
							<b>USDT</b>
							<span className="mono">5 мин</span>
						</div>
						<div className="ph-method">
							<b>WeChat Pay</b>
							<span className="mono">15 мин</span>
						</div>
					</div>
					<div className="ph-iban-card">
						<div className="ph-iban-lbl mono">РЕКВИЗИТЫ</div>
						<div className="ph-iban-num mono">DE89 3704 0044 0532 0130 00</div>
						<div className="ph-iban-name">AlmaPay UG · Ravi Kumar</div>
						<button className="ph-copy mono">⧉ Копировать</button>
					</div>
				</>
			),
		},
		{
			title: 'Перевод в банк',
			content: (
				<>
					<div className="ph-page-title">В российский банк</div>
					<div className="ph-amt">
						<div className="ph-amt-cur mono">₽</div>
						<div className="ph-amt-num mono">12 000</div>
					</div>
					<div className="ph-bank-pick">
						<div className="ph-bank on">ПСБ · 4421</div>
						<div className="ph-bank">ПСБ · сберегательный</div>
						<div className="ph-bank ph-bank-add">+ Добавить</div>
					</div>
					<div className="ph-rail">
						<span>СБП</span>
						<b>мгновенно</b>
					</div>
					<div className="ph-rail">
						<span>Реквизиты</span>
						<b>до 1 часа</b>
					</div>
					<button className="ph-btn">Отправить</button>
				</>
			),
		},
		{
			title: 'Спонсоры',
			content: (
				<>
					<div className="ph-page-title">Спонсоры (2 / 3)</div>
					<div className="ph-sponsor">
						<div className="ph-sp-av">М</div>
						<div>
							<b>Мама</b>
							<div className="mono">Verified · 🇮🇳 IN</div>
						</div>
						<span className="ph-sp-st on">Активна</span>
					</div>
					<div className="ph-sponsor">
						<div className="ph-sp-av">Б</div>
						<div>
							<b>Брат</b>
							<div className="mono">Verified · 🇰🇿 KZ</div>
						</div>
						<span className="ph-sp-st on">Активен</span>
					</div>
					<div className="ph-sponsor ph-sp-add">
						<div className="ph-sp-av ph-sp-add-av">+</div>
						<div>
							<b>Добавить спонсора</b>
							<div className="mono">осталось 1 место</div>
						</div>
					</div>
					<div className="ph-tip">
						Спонсор пройдёт верификацию по ссылке и сможет пополнять ваш счёт.
					</div>
				</>
			),
		},
	],
	en: [
		{
			title: 'Home',
			content: (
				<>
					<div className="ph-top">
						<div className="ph-greet">Hi, Ravi</div>
						<div className="ph-avatar">R</div>
					</div>
					<div className="ph-balance">
						<div className="ph-bal-lbl">Balance</div>
						<div className="ph-bal-num mono">
							₽ 76,240<span className="ph-bal-fr">.00</span>
						</div>
						<div className="ph-bal-sub mono">≈ € 800 on account</div>
					</div>
					<div className="ph-actions">
						<button>
							<span>↓</span>Top up
						</button>
						<button>
							<span>→</span>To bank
						</button>
						<button>
							<span>+</span>Sponsor
						</button>
					</div>
					<div className="ph-list-title">History</div>
					<div className="ph-tx">
						<span>↓</span>
						<div>
							<b>IBAN top-up</b>
							<div className="mono">today · 10:24</div>
						</div>
						<b className="mono">+ 76,240</b>
					</div>
					<div className="ph-tx">
						<span>→</span>
						<div>
							<b>PSB · 4421</b>
							<div className="mono">Apr 12 · 18:02</div>
						</div>
						<b className="mono">— 12,000</b>
					</div>
					<div className="ph-tx">
						<span>↓</span>
						<div>
							<b>USDT TRC-20</b>
							<div className="mono">Apr 8</div>
						</div>
						<b className="mono">+ 24,100</b>
					</div>
				</>
			),
		},
		{
			title: 'Top up',
			content: (
				<>
					<div className="ph-page-title">Top up</div>
					<div className="ph-method-list">
						<div className="ph-method on">
							<b>IBAN / SEPA</b>
							<span className="mono">1–2 d</span>
						</div>
						<div className="ph-method">
							<b>Visa / Mastercard</b>
							<span className="mono">10 min</span>
						</div>
						<div className="ph-method">
							<b>USDT</b>
							<span className="mono">5 min</span>
						</div>
						<div className="ph-method">
							<b>WeChat Pay</b>
							<span className="mono">15 min</span>
						</div>
					</div>
					<div className="ph-iban-card">
						<div className="ph-iban-lbl mono">DETAILS</div>
						<div className="ph-iban-num mono">DE89 3704 0044 0532 0130 00</div>
						<div className="ph-iban-name">AlmaPay UG · Ravi Kumar</div>
						<button className="ph-copy mono">⧉ Copy</button>
					</div>
				</>
			),
		},
		{
			title: 'Pay out',
			content: (
				<>
					<div className="ph-page-title">To Russian bank</div>
					<div className="ph-amt">
						<div className="ph-amt-cur mono">₽</div>
						<div className="ph-amt-num mono">12,000</div>
					</div>
					<div className="ph-bank-pick">
						<div className="ph-bank on">PSB · 4421</div>
						<div className="ph-bank">PSB · savings</div>
						<div className="ph-bank ph-bank-add">+ Add</div>
					</div>
					<div className="ph-rail">
						<span>SBP</span>
						<b>instant</b>
					</div>
					<div className="ph-rail">
						<span>Wire</span>
						<b>≤ 1 hour</b>
					</div>
					<button className="ph-btn">Send</button>
				</>
			),
		},
		{
			title: 'Sponsors',
			content: (
				<>
					<div className="ph-page-title">Sponsors (2 / 3)</div>
					<div className="ph-sponsor">
						<div className="ph-sp-av">M</div>
						<div>
							<b>Mom</b>
							<div className="mono">Verified · 🇮🇳 IN</div>
						</div>
						<span className="ph-sp-st on">Active</span>
					</div>
					<div className="ph-sponsor">
						<div className="ph-sp-av">B</div>
						<div>
							<b>Brother</b>
							<div className="mono">Verified · 🇰🇿 KZ</div>
						</div>
						<span className="ph-sp-st on">Active</span>
					</div>
					<div className="ph-sponsor ph-sp-add">
						<div className="ph-sp-av ph-sp-add-av">+</div>
						<div>
							<b>Add sponsor</b>
							<div className="mono">1 slot left</div>
						</div>
					</div>
					<div className="ph-tip">
						A sponsor verifies via link and can top up your wallet whenever.
					</div>
				</>
			),
		},
	],
};

const AppDemo = ({ t, lang }) => {
	const [idx, setIdx] = React.useState(0);
	const screens = APP_SCREENS[lang] || APP_SCREENS.en;

	return (
		<section className="app-demo">
			<div className="container">
				<div className="ad-grid">
					<div className="ad-text">
						<div className="eyebrow">{t.app.eyebrow}</div>
						<h2 className="h-section">
							{t.app.title_a}
							<em>{t.app.title_em}</em>
						</h2>
						<p className="lede">{t.app.lede}</p>
						<div className="ad-tabs">
							{t.app.tabs.map((tab, i) => (
								<button
									key={i}
									className={`ad-tab ${idx === i ? 'on' : ''}`}
									onClick={() => setIdx(i)}
								>
									<span className="mono">0{i + 1}</span>
									{tab}
								</button>
							))}
						</div>
						<div className="ad-nav">
							<button
								onClick={() =>
									setIdx((idx - 1 + screens.length) % screens.length)
								}
								aria-label="prev"
							>
								←
							</button>
							<div className="ad-dots">
								{screens.map((_, i) => (
									<span key={i} className={idx === i ? 'on' : ''} />
								))}
							</div>
							<button
								onClick={() => setIdx((idx + 1) % screens.length)}
								aria-label="next"
							>
								→
							</button>
						</div>
					</div>

					<div className="ad-phone-wrap">
						<div className="ad-phone">
							<div className="ph-bezel">
								<div className="ph-notch" />
								<div className="ph-statbar">
									<span className="mono">9:41</span>
									<span className="mono">●●●●● 5G</span>
								</div>
								<div className="ph-screen-stack">
									{screens.map((s, i) => (
										<div
											key={i}
											className="ph-screen"
											style={{
												transform: `translateX(${(i - idx) * 110}%)`,
												opacity: i === idx ? 1 : 0,
												pointerEvents: i === idx ? 'auto' : 'none',
											}}
										>
											{s.content}
										</div>
									))}
								</div>
								<div className="ph-home" />
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>
	);
};
window.AppDemo = AppDemo;