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

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

	return (
		<section id="preview" className="mt-10 sm:mt-14">
			<SectionHeader
				eyebrow={m.preview_eyebrow()}
				title={m.preview_title()}
				subtitle={m.preview_subtitle()}
				align="left"
				className="max-w-3xl"
			/>

			<div className="mt-5 grid gap-4 lg:grid-cols-[1.1fr_1fr]">
				<Card padding="lg" className="island-shell rounded-2xl">
					<Text as="p" size="sm" tone="muted" className="island-kicker mb-2">
						{m.preview_profile_title()}
					</Text>
					<Heading
						level={3}
						className="text-2xl font-semibold text-[var(--sea-ink)] sm:text-3xl"
					>
						monie.app/anna-nails
					</Heading>
					<Text
						tone="muted"
						className="mt-3 text-sm leading-6 text-[var(--sea-ink-soft)]"
					>
						{m.preview_profile_description()}
					</Text>
					<div className="mt-4 grid gap-3 sm:grid-cols-2">
						<Card
							padding="sm"
							title={m.preview_service_1_title()}
							description={m.preview_service_1_description()}
							className="rounded-xl border border-[var(--line)] bg-white/76"
						/>
						<Card
							padding="sm"
							title={m.preview_service_2_title()}
							description={m.preview_service_2_description()}
							className="rounded-xl border border-[var(--line)] bg-white/76"
						/>
					</div>
				</Card>

				<Card padding="lg" className="island-shell rounded-2xl">
					<Text as="p" size="sm" tone="muted" className="island-kicker mb-2">
						{m.preview_schedule_title()}
					</Text>
					<div className="space-y-3">
						<Card
							padding="sm"
							title={m.preview_appt_1_title()}
							description={m.preview_appt_1_description()}
							className="rounded-xl border border-[var(--line)] bg-white/80"
							footer={
								<Badge
									color="emerald"
									rounded="full"
									className="w-fit px-2 py-0.5 text-[11px]"
								>
									{m.preview_appt_1_badge()}
								</Badge>
							}
						/>
						<Card
							padding="sm"
							title={m.preview_appt_2_title()}
							description={m.preview_appt_2_description()}
							className="rounded-xl border border-[var(--line)] bg-white/80"
							footer={
								<Badge
									color="sky"
									rounded="full"
									className="w-fit px-2 py-0.5 text-[11px]"
								>
									{m.preview_appt_2_badge()}
								</Badge>
							}
						/>
						<Card
							padding="sm"
							title={m.preview_income_title()}
							description={m.preview_income_description()}
							className="rounded-xl border border-[var(--line)] bg-white/80"
						/>
					</div>
				</Card>
			</div>
		</section>
	);
}