// Interactive app demo with swipeable phone screens
const makeAppScreens = (s) => [
	{
		title: s.tabs[0],
		content: (
			<>
				<div className="ph-top">
					<div className="ph-greet">{s.greet}</div>
					<div className="ph-avatar">{s.avatar}</div>
				</div>
				<div className="ph-balance">
					<div className="ph-bal-lbl">{s.balance}</div>
					<div className="ph-bal-num mono">
						₽ {s.balanceAmount}<span className="ph-bal-fr">{s.balanceFrac}</span>
					</div>
					<div className="ph-bal-sub mono">{s.balanceSub}</div>
				</div>
				<div className="ph-actions">
					<button><span>↓</span>{s.actionTopUp}</button>
					<button><span>→</span>{s.actionBank}</button>
					<button><span>+</span>{s.actionSponsor}</button>
				</div>
				<div className="ph-list-title">{s.history}</div>
				<div className="ph-tx">
					<span>↓</span>
					<div><b>{s.tx1Title}</b><div className="mono">{s.tx1Date}</div></div>
					<b className="mono">{s.tx1Amt}</b>
				</div>
				<div className="ph-tx">
					<span>→</span>
					<div><b>{s.tx2Title}</b><div className="mono">{s.tx2Date}</div></div>
					<b className="mono">{s.tx2Amt}</b>
				</div>
				<div className="ph-tx">
					<span>↓</span>
					<div><b>{s.tx3Title}</b><div className="mono">{s.tx3Date}</div></div>
					<b className="mono">{s.tx3Amt}</b>
				</div>
			</>
		),
	},
	{
		title: s.tabs[1],
		content: (
			<>
				<div className="ph-page-title">{s.topUpTitle}</div>
				<div className="ph-method-list">
					<div className="ph-method on"><b>IBAN / SEPA</b><span className="mono">{s.timeIban}</span></div>
					<div className="ph-method"><b>{s.methodCard}</b><span className="mono">{s.timeCard}</span></div>
					<div className="ph-method"><b>USDT</b><span className="mono">{s.timeUsdt}</span></div>
					<div className="ph-method"><b>WeChat Pay</b><span className="mono">{s.timeWechat}</span></div>
				</div>
				<div className="ph-iban-card">
					<div className="ph-iban-lbl mono">{s.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">{s.copy}</button>
				</div>
			</>
		),
	},
	{
		title: s.tabs[2],
		content: (
			<>
				<div className="ph-page-title">{s.payoutTitle}</div>
				<div className="ph-amt">
					<div className="ph-amt-cur mono">₽</div>
					<div className="ph-amt-num mono">{s.payoutAmount}</div>
				</div>
				<div className="ph-bank-pick">
					<div className="ph-bank on">{s.bank1}</div>
					<div className="ph-bank">{s.bank2}</div>
					<div className="ph-bank ph-bank-add">{s.addBank}</div>
				</div>
				<div className="ph-rail"><span>{s.sbp}</span><b>{s.sbpTime}</b></div>
				<div className="ph-rail"><span>{s.wire}</span><b>{s.wireTime}</b></div>
				<button className="ph-btn">{s.send}</button>
			</>
		),
	},
	{
		title: s.tabs[3],
		content: (
			<>
				<div className="ph-page-title">{s.sponsorsTitle}</div>
				<div className="ph-sponsor">
					<div className="ph-sp-av">{s.sp1Av}</div>
					<div><b>{s.sp1Name}</b><div className="mono">{s.sp1Meta}</div></div>
					<span className="ph-sp-st on">{s.sp1Status}</span>
				</div>
				<div className="ph-sponsor">
					<div className="ph-sp-av">{s.sp2Av}</div>
					<div><b>{s.sp2Name}</b><div className="mono">{s.sp2Meta}</div></div>
					<span className="ph-sp-st on">{s.sp2Status}</span>
				</div>
				<div className="ph-sponsor ph-sp-add">
					<div className="ph-sp-av ph-sp-add-av">+</div>
					<div><b>{s.addSponsor}</b><div className="mono">{s.slotsLeft}</div></div>
				</div>
				<div className="ph-tip">{s.sponsorTip}</div>
			</>
		),
	},
];

const APP_SCREEN_LABELS = {
	ru: {
		tabs: ['Главный экран', 'Пополнение', 'Перевод в банк', 'Спонсоры'],
		greet: 'Привет, Рави', avatar: 'Р', balance: 'Баланс', balanceAmount: '76 240', balanceFrac: ',00',
		balanceSub: '≈ € 800 на счёте', actionTopUp: 'Пополнить', actionBank: 'В банк', actionSponsor: 'Спонсор',
		history: 'История', tx1Title: 'Пополнение IBAN', tx1Date: 'сегодня · 10:24', tx1Amt: '+ 76 240',
		tx2Title: 'ПСБ · 4421', tx2Date: '12 апр · 18:02', tx2Amt: '— 12 000',
		tx3Title: 'USDT TRC-20', tx3Date: '8 апр', tx3Amt: '+ 24 100',
		topUpTitle: 'Пополнить счёт', timeIban: '1–2 дня', methodCard: 'Картой Visa / MC', timeCard: '10 мин',
		timeUsdt: '5 мин', timeWechat: '15 мин', details: 'РЕКВИЗИТЫ', copy: '⧉ Копировать',
		payoutTitle: 'В российский банк', payoutAmount: '12 000', bank1: 'ПСБ · 4421', bank2: 'ПСБ · сберегательный',
		addBank: '+ Добавить', sbp: 'СБП', sbpTime: 'мгновенно', wire: 'Реквизиты', wireTime: 'до 1 часа', send: 'Отправить',
		sponsorsTitle: 'Спонсоры (2 / 3)', sp1Av: 'М', sp1Name: 'Мама', sp1Meta: 'Verified · 🇮🇳 IN', sp1Status: 'Активна',
		sp2Av: 'Б', sp2Name: 'Брат', sp2Meta: 'Verified · 🇰🇿 KZ', sp2Status: 'Активен',
		addSponsor: 'Добавить спонсора', slotsLeft: 'осталось 1 место',
		sponsorTip: 'Спонсор пройдёт верификацию по ссылке и сможет пополнять ваш счёт.',
	},
	en: {
		tabs: ['Home', 'Top up', 'Pay out', 'Sponsors'],
		greet: 'Hi, Ravi', avatar: 'R', balance: 'Balance', balanceAmount: '76,240', balanceFrac: '.00',
		balanceSub: '≈ € 800 on account', actionTopUp: 'Top up', actionBank: 'To bank', actionSponsor: 'Sponsor',
		history: 'History', tx1Title: 'IBAN top-up', tx1Date: 'today · 10:24', tx1Amt: '+ 76,240',
		tx2Title: 'PSB · 4421', tx2Date: 'Apr 12 · 18:02', tx2Amt: '— 12,000',
		tx3Title: 'USDT TRC-20', tx3Date: 'Apr 8', tx3Amt: '+ 24,100',
		topUpTitle: 'Top up', timeIban: '1–2 d', methodCard: 'Visa / Mastercard', timeCard: '10 min',
		timeUsdt: '5 min', timeWechat: '15 min', details: 'DETAILS', copy: '⧉ Copy',
		payoutTitle: 'To Russian bank', payoutAmount: '12,000', bank1: 'PSB · 4421', bank2: 'PSB · savings',
		addBank: '+ Add', sbp: 'SBP', sbpTime: 'instant', wire: 'Wire', wireTime: '≤ 1 hour', send: 'Send',
		sponsorsTitle: 'Sponsors (2 / 3)', sp1Av: 'M', sp1Name: 'Mom', sp1Meta: 'Verified · 🇮🇳 IN', sp1Status: 'Active',
		sp2Av: 'B', sp2Name: 'Brother', sp2Meta: 'Verified · 🇰🇿 KZ', sp2Status: 'Active',
		addSponsor: 'Add sponsor', slotsLeft: '1 slot left',
		sponsorTip: 'A sponsor verifies via link and can top up your wallet whenever.',
	},
	fr: {
		tabs: ['Accueil', 'Recharge', 'Versement', 'Sponsors'],
		greet: 'Bonjour, Ravi', avatar: 'R', balance: 'Solde', balanceAmount: '76 240', balanceFrac: ',00',
		balanceSub: '≈ € 800 sur le compte', actionTopUp: 'Recharger', actionBank: 'Vers banque', actionSponsor: 'Sponsor',
		history: 'Historique', tx1Title: 'Recharge IBAN', tx1Date: "aujourd'hui · 10:24", tx1Amt: '+ 76 240',
		tx2Title: 'PSB · 4421', tx2Date: '12 avr · 18:02', tx2Amt: '— 12 000',
		tx3Title: 'USDT TRC-20', tx3Date: '8 avr', tx3Amt: '+ 24 100',
		topUpTitle: 'Recharger le compte', timeIban: '1–2 j', methodCard: 'Visa / Mastercard', timeCard: '10 min',
		timeUsdt: '5 min', timeWechat: '15 min', details: 'COORDONNÉES', copy: '⧉ Copier',
		payoutTitle: 'Vers banque russe', payoutAmount: '12 000', bank1: 'PSB · 4421', bank2: 'PSB · épargne',
		addBank: '+ Ajouter', sbp: 'SBP', sbpTime: 'instantané', wire: 'Virement', wireTime: '≤ 1 h', send: 'Envoyer',
		sponsorsTitle: 'Sponsors (2 / 3)', sp1Av: 'M', sp1Name: 'Maman', sp1Meta: 'Verified · 🇮🇳 IN', sp1Status: 'Active',
		sp2Av: 'B', sp2Name: 'Frère', sp2Meta: 'Verified · 🇰🇿 KZ', sp2Status: 'Actif',
		addSponsor: 'Ajouter un sponsor', slotsLeft: '1 place restante',
		sponsorTip: 'Le sponsor se vérifie via un lien et peut recharger votre portefeuille.',
	},
	es: {
		tabs: ['Pantalla principal', 'Recarga', 'Transferencia al banco', 'Patrocinadores'],
		greet: 'Hola, Ravi', avatar: 'R', balance: 'Saldo', balanceAmount: '76.240', balanceFrac: ',00',
		balanceSub: '≈ € 800 en la cuenta', actionTopUp: 'Recargar', actionBank: 'Al banco', actionSponsor: 'Patrocinador',
		history: 'Historial', tx1Title: 'Recarga IBAN', tx1Date: 'hoy · 10:24', tx1Amt: '+ 76.240',
		tx2Title: 'PSB · 4421', tx2Date: '12 abr · 18:02', tx2Amt: '— 12.000',
		tx3Title: 'USDT TRC-20', tx3Date: '8 abr', tx3Amt: '+ 24.100',
		topUpTitle: 'Recargar cuenta', timeIban: '1–2 días', methodCard: 'Visa / Mastercard', timeCard: '10 min',
		timeUsdt: '5 min', timeWechat: '15 min', details: 'DATOS', copy: '⧉ Copiar',
		payoutTitle: 'A banco ruso', payoutAmount: '12.000', bank1: 'PSB · 4421', bank2: 'PSB · ahorro',
		addBank: '+ Añadir', sbp: 'SBP', sbpTime: 'al instante', wire: 'Transferencia', wireTime: '≤ 1 hora', send: 'Enviar',
		sponsorsTitle: 'Patrocinadores (2 / 3)', sp1Av: 'M', sp1Name: 'Mamá', sp1Meta: 'Verified · 🇮🇳 IN', sp1Status: 'Activa',
		sp2Av: 'B', sp2Name: 'Hermano', sp2Meta: 'Verified · 🇰🇿 KZ', sp2Status: 'Activo',
		addSponsor: 'Añadir patrocinador', slotsLeft: 'queda 1 plaza',
		sponsorTip: 'El patrocinador se verifica por enlace y puede recargar su cuenta.',
	},
	zh: {
		tabs: ['主屏幕', '充值', '转至银行', '赞助人'],
		greet: '你好，Ravi', avatar: 'R', balance: '余额', balanceAmount: '76,240', balanceFrac: '.00',
		balanceSub: '≈ € 800 账户余额', actionTopUp: '充值', actionBank: '转至银行', actionSponsor: '赞助人',
		history: '记录', tx1Title: 'IBAN 充值', tx1Date: '今天 · 10:24', tx1Amt: '+ 76,240',
		tx2Title: 'PSB · 4421', tx2Date: '4月12日 · 18:02', tx2Amt: '— 12,000',
		tx3Title: 'USDT TRC-20', tx3Date: '4月8日', tx3Amt: '+ 24,100',
		topUpTitle: '充值账户', timeIban: '1–2 天', methodCard: 'Visa / Mastercard', timeCard: '10 分钟',
		timeUsdt: '5 分钟', timeWechat: '15 分钟', details: '收款信息', copy: '⧉ 复制',
		payoutTitle: '转至俄罗斯银行', payoutAmount: '12,000', bank1: 'PSB · 4421', bank2: 'PSB · 储蓄',
		addBank: '+ 添加', sbp: 'SBP', sbpTime: '即时', wire: '汇款', wireTime: '≤ 1 小时', send: '发送',
		sponsorsTitle: '赞助人 (2 / 3)', sp1Av: '妈', sp1Name: '妈妈', sp1Meta: 'Verified · 🇮🇳 IN', sp1Status: '活跃',
		sp2Av: '兄', sp2Name: '哥哥', sp2Meta: 'Verified · 🇰🇿 KZ', sp2Status: '活跃',
		addSponsor: '添加赞助人', slotsLeft: '还剩 1 个名额',
		sponsorTip: '赞助人通过链接完成验证后即可为您的账户充值。',
	},
	ar: {
		tabs: ['الشاشة الرئيسية', 'التعبئة', 'تحويل للبنك', 'الرعاة'],
		greet: 'مرحباً، رافي', avatar: 'ر', balance: 'الرصيد', balanceAmount: '76,240', balanceFrac: '.00',
		balanceSub: '≈ € 800 في الحساب', actionTopUp: 'تعبئة', actionBank: 'للبنك', actionSponsor: 'راعٍ',
		history: 'السجل', tx1Title: 'تعبئة IBAN', tx1Date: 'اليوم · 10:24', tx1Amt: '+ 76,240',
		tx2Title: 'PSB · 4421', tx2Date: '12 أبريل · 18:02', tx2Amt: '— 12,000',
		tx3Title: 'USDT TRC-20', tx3Date: '8 أبريل', tx3Amt: '+ 24,100',
		topUpTitle: 'تعبئة الحساب', timeIban: '1–2 يوم', methodCard: 'Visa / Mastercard', timeCard: '10 دقائق',
		timeUsdt: '5 دقائق', timeWechat: '15 دقيقة', details: 'البيانات', copy: '⧉ نسخ',
		payoutTitle: 'إلى بنك روسي', payoutAmount: '12,000', bank1: 'PSB · 4421', bank2: 'PSB · ادخار',
		addBank: '+ إضافة', sbp: 'SBP', sbpTime: 'فوري', wire: 'تحويل', wireTime: '≤ ساعة', send: 'إرسال',
		sponsorsTitle: 'الرعاة (2 / 3)', sp1Av: 'أ', sp1Name: 'الأم', sp1Meta: 'Verified · 🇮🇳 IN', sp1Status: 'نشطة',
		sp2Av: 'أ', sp2Name: 'الأخ', sp2Meta: 'Verified · 🇰🇿 KZ', sp2Status: 'نشط',
		addSponsor: 'إضافة راعٍ', slotsLeft: 'مكان واحد متبقٍ',
		sponsorTip: 'يُكمل الراعٍ التحقق عبر الرابط ويمكنه تعبئة حسابك.',
	},
};

const APP_SCREENS = Object.fromEntries(
	Object.entries(APP_SCREEN_LABELS).map(([lang, labels]) => [lang, makeAppScreens(labels)]),
);

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;