import { Badge, Button, Card, Heading, Text } from "denjs-ui";
import { getHeroMetrics } from "#/entities/landing";
import { scrollToSection } from "#/shared/lib/dom";
import { useMessages } from "#/shared/lib/i18n";

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

	return (
		<section className="island-shell rise-in relative overflow-hidden rounded-[2.2rem] px-6 py-10 sm:px-10 sm:py-14">
			<div className="pointer-events-none absolute -left-20 -top-24 h-56 w-56 rounded-full bg-[radial-gradient(circle,rgba(79,184,178,0.32),transparent_66%)]" />
			<div className="pointer-events-none absolute -bottom-24 -right-16 h-56 w-56 rounded-full bg-[radial-gradient(circle,rgba(230,128,97,0.2),transparent_66%)]" />

			<Badge
				color="teal"
				rounded="full"
				bordered
				className="w-fit px-3 py-1 text-[11px] tracking-[0.12em] uppercase"
			>
				{m.hero_badge()}
			</Badge>

			<Heading
				level={1}
				className="mt-4 max-w-4xl text-4xl leading-[0.98] font-bold tracking-tight text-[var(--sea-ink)] sm:text-6xl"
			>
				{m.hero_title()}
			</Heading>

			<Text
				size="lg"
				tone="muted"
				className="mt-5 max-w-3xl text-base leading-7 text-[var(--sea-ink-soft)] sm:text-lg"
			>
				{m.hero_subtitle()}
			</Text>

			<div className="mt-8 flex flex-wrap gap-3">
				<Button
					size="large"
					className="rounded-full"
					onClick={() => scrollToSection("demo")}
				>
					{m.hero_cta_primary()}
				</Button>
				<Button
					tone="secondary"
					size="large"
					className="rounded-full"
					onClick={() => scrollToSection("how")}
				>
					{m.hero_cta_secondary()}
				</Button>
			</div>

			<div className="mt-8 grid gap-3 sm:grid-cols-3">
				{getHeroMetrics(m).map((item, index) => (
					<Card
						key={item.label}
						padding="md"
						className="metric-card rise-in rounded-2xl"
						style={{ animationDelay: `${index * 100 + 80}ms` }}
					>
						<Text
							as="p"
							weight="semibold"
							className="m-0 text-2xl font-extrabold text-[var(--sea-ink)]"
						>
							{item.value}
						</Text>
						<Text
							as="p"
							size="sm"
							tone="muted"
							className="mt-1 text-[var(--sea-ink-soft)]"
						>
							{item.label}
						</Text>
					</Card>
				))}
			</div>
		</section>
	);
}