import { Card, SectionHeader } from "denjs-ui";
import { RequestDemoForm } from "#/features/request-demo";
import { useMessages } from "#/shared/lib/i18n";

export function FinalCtaSection() {
	const m = useMessages();

	return (
		<section id="demo" className="mt-10 sm:mt-14">
			<Card
				padding="lg"
				className="island-shell rounded-[2rem] border-[rgba(31,96,99,0.3)] bg-[linear-gradient(160deg,rgba(255,255,255,0.95),rgba(220,245,241,0.8))] sm:p-10"
			>
				<div className="grid gap-6 lg:grid-cols-[1fr_1.08fr]">
					<div className="rise-in" style={{ animationDelay: "120ms" }}>
						<SectionHeader
							eyebrow={m.final_eyebrow()}
							title={m.final_title()}
							subtitle={m.final_subtitle()}
							align="left"
						/>
						<div className="mt-4 inline-flex rounded-full border border-[var(--chip-line)] bg-[var(--chip-bg)] px-3 py-1 text-xs font-semibold text-[var(--sea-ink-soft)]">
							{m.final_hint()}
						</div>
					</div>

					<RequestDemoForm />
				</div>
			</Card>
		</section>
	);
}