// Benefits, FAQ, CTA, Footer
const Benefits = ({ t, lang }) => {
	return (
		<section className="benefits">
			<div className="container">
				<div className="section-head">
					<div className="eyebrow">{t.benefits.eyebrow}</div>
					<h2 className="h-section">
						{t.benefits.title_a}
						<em>{t.benefits.title_em}</em>
						{t.benefits.title_b}
					</h2>
				</div>
				<div className="benefits-grid">
					{t.benefits.list.map((b, i) => (
						<div className="bn-card" key={i}>
							<div className="bn-num mono">0{i + 1}</div>
							<div className="bn-title">{b.t}</div>
							<div className="bn-desc">{b.d}</div>
						</div>
					))}
				</div>
			</div>
		</section>
	);
};

const FAQ = ({ t, lang }) => {
	const [open, setOpen] = React.useState(0);
	return (
		<section className="faq" id="faq">
			<div className="container">
				<div className="section-head">
					<div className="eyebrow">{t.faq.eyebrow}</div>
					<h2 className="h-section">
						{t.faq.title_a}
						<em>{t.faq.title_em}</em>
					</h2>
				</div>
				<div className="faq-list">
					{t.faq.list.map((f, i) => (
						<div key={i} className={`faq-item ${open === i ? 'on' : ''}`}>
							<button
								className="faq-q"
								onClick={() => setOpen(open === i ? -1 : i)}
							>
								<span className="faq-num mono">0{i + 1}</span>
								<span className="faq-q-text">{f.q}</span>
								<span className="faq-icon">{open === i ? '−' : '+'}</span>
							</button>
							<div
								className="faq-a-wrap"
								style={{ maxHeight: open === i ? '300px' : '0px' }}
							>
								<div className="faq-a">{f.a}</div>
							</div>
						</div>
					))}
				</div>
			</div>
		</section>
	);
};

const FinalCTA = ({ t, lang, walletUrl }) => {
	return (
		<section className="final-cta">
			<div className="container">
				<div className="fc-card">
					<div className="fc-bg">
						<svg
							width="100%"
							height="100%"
							viewBox="0 0 600 400"
							preserveAspectRatio="none"
						>
							{Array.from({ length: 14 }).map((_, i) => (
								<path
									key={i}
									d={`M-50 ${50 + i * 25} Q 300 ${50 + i * 25 - 30}, 650 ${
										50 + i * 25
									}`}
									stroke="rgba(255,255,255,0.05)"
									strokeWidth="0.5"
									fill="none"
								/>
							))}
						</svg>
					</div>
					<div className="fc-inner">
						<h2 className="h-display fc-title">
							{t.cta.title_a}
							<em>{t.cta.title_em}</em>
							{t.cta.title_b}
						</h2>
						<p className="fc-lede">{t.cta.lede}</p>
						<a
							className="btn fc-btn"
							href={walletUrl}
							target="_blank"
							rel="noopener noreferrer"
						>
							{t.cta.btn}
							<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>
			</div>
		</section>
	);
};

const Footer = ({ t, lang }) => {
	return (
		<footer className="foot">
			<div className="container">
				{/* <div className="foot-top">
					<div className="foot-brand">
						<a className="brand">
							<span className="brand-mark">
								<img src="logo-real.png" alt="AlmaPay" width="32" height="32" />
							</span>
							<span className="brand-name">AlmaPay</span>
						</a>
						<p className="foot-tag">{t.foot.tagline}</p>
						<div className="foot-langs mono">
							RU · EN · 中文 · العربية · Français
						</div>
					</div>
					<div className="foot-cols">
						<div>
							<div className="foot-h">{t.foot.product}</div>
							{t.foot.product_l.map(l => (
								<a key={l}>{l}</a>
							))}
						</div>
						<div>
							<div className="foot-h">{t.foot.company}</div>
							{t.foot.company_l.map(l => (
								<a key={l}>{l}</a>
							))}
						</div>
						<div>
							<div className="foot-h">{t.foot.support}</div>
							{t.foot.support_l.map(l => (
								<a key={l}>{l}</a>
							))}
						</div>
						<div>
							<div className="foot-h">{t.foot.legal}</div>
							{t.foot.legal_l.map(l => (
								<a key={l}>{l}</a>
							))}
						</div>
					</div>
				</div> */}
				<div className="foot-bot">
					<span className="mono foot-bot-brand">
						<a className="brand">
							<span className="brand-mark">
								<img src="logo-real.png" alt="AlmaPay" width="32" height="32" />
							</span>
						</a>
					</span>
					<nav className="foot-legal" aria-label={t.foot.legal}>
						<a
							className="foot-legal-link"
							href="/uploads/Пользовательское_соглашение_AlmaPay.pdf"
							target="_blank"
							rel="noopener noreferrer"
						>
							{t.foot.terms}
						</a>
						<span className="foot-legal-sep" aria-hidden="true">
							·
						</span>
						<a
							className="foot-legal-link"
							href="/uploads/Политика_обработки_персональных%20данных%20AlmaPay.pdf"
							target="_blank"
							rel="noopener noreferrer"
						>
							{t.foot.privacy}
						</a>
					</nav>
					<span className="mono">{t.foot.copy}</span>
				</div>
			</div>
		</footer>
	);
};

window.Benefits = Benefits;
window.FAQ = FAQ;
window.FinalCTA = FinalCTA;
window.Footer = Footer;