// Problem / Solution split section
const Problem = ({ t, lang }) => {
	return (
		<section className="problem" id="problem">
			<div className="container">
				<div className="problem-grid">
					<div className="problem-left">
						<div className="eyebrow">{t.problem.eyebrow}</div>
						<h2 className="h-section">
							{t.problem.title_a}
							<em> {t.problem.title_em}</em>
							{t.problem.title_b}
						</h2>
					</div>
					<div className="problem-right">
						{t.problem.points.map((p, i) => (
							<div className="problem-point" key={i}>
								<div className="pp-num mono">{p.k}</div>
								<div className="pp-body">
									<div className="pp-title">{p.t}</div>
									<div className="pp-desc">{p.d}</div>
								</div>
							</div>
						))}
					</div>
				</div>

				<div className="solution">
					<div className="solution-eyebrow">
						<span className="dot dot-acc" />
						{t.problem.solution_eyebrow}
					</div>
					<h3 className="h-section solution-title">
						{t.problem.solution_a}
						{t.problem.solution_em}
						{t.problem.solution_b}
					</h3>
					<p className="lede solution-lede">{t.problem.solution_lede}</p>
				</div>
			</div>
		</section>
	);
};
window.Problem = Problem;