import { Badge, Button, Card, SectionHeader, Text } from "denjs-ui";
import { scrollToSectionOrNavigateHome } from "#/shared/lib/dom";
import { useMessages } from "#/shared/lib/i18n";

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

	return (
		<main className="page-wrap px-4 py-12 sm:py-14">
			<Card padding="lg" className="island-shell rounded-2xl sm:p-8">
				<Badge
					color="teal"
					rounded="full"
					bordered
					className="mb-3 w-fit px-3 py-1 text-[11px] tracking-[0.12em] uppercase"
				>
					{m.about_badge()}
				</Badge>

				<SectionHeader
					title={m.about_title()}
					subtitle={m.about_subtitle()}
					align="left"
					titleAs="h1"
					className="max-w-3xl"
				/>
			</Card>

			<section className="mt-6 grid gap-4 md:grid-cols-2">
				<Card
					padding="lg"
					title={m.about_focus_title()}
					className="island-shell rounded-2xl"
				>
					<ul className="m-0 space-y-2 pl-5 text-sm leading-7 text-[var(--sea-ink-soft)]">
						<li>{m.about_focus_point_1()}</li>
						<li>{m.about_focus_point_2()}</li>
						<li>{m.about_focus_point_3()}</li>
						<li>{m.about_focus_point_4()}</li>
					</ul>
				</Card>

				<Card
					padding="lg"
					title={m.about_principle_title()}
					className="island-shell rounded-2xl"
				>
					<Text
						as="p"
						tone="muted"
						className="m-0 text-sm leading-7 text-[var(--sea-ink-soft)]"
					>
						{m.about_principle_text()}
					</Text>

					<Button
						size="large"
						className="mt-5 rounded-full"
						onClick={() => scrollToSectionOrNavigateHome("demo")}
					>
						{m.about_cta()}
					</Button>
				</Card>
			</section>
		</main>
	);
}