Features 3

"use client";

import {
	ClockIcon,
	HeadphonesIcon,
	PlugIcon,
	ShieldCheckIcon,
} from "lucide-react";
import { motion } from "motion/react";
import { SectionShell, ContentRail } from "@/components/layout-contract";

const features = [
	{
		title: "Ship 2× faster",
		description:
			"Cut planning overhead with templates, automations, and a single source of truth.",
		icon: ClockIcon,
	},
	{
		title: "Enterprise-grade security",
		description:
			"SOC 2 Type II, SSO, and audit logs — security your IT team can approve.",
		icon: ShieldCheckIcon,
	},
	{
		title: "100+ integrations",
		description:
			"Connect Slack, GitHub, Figma, and the tools your team already relies on.",
		icon: PlugIcon,
	},
	{
		title: "Dedicated support",
		description:
			"Onboarding help and priority support so you're never stuck on launch day.",
		icon: HeadphonesIcon,
	},
];

export function FeaturesMotionSection() {
	return (
		<SectionShell spacingMode="section">
			<ContentRail maxWidth="max-w-3xl">
				<div className="max-w-xl">
					<h2 className="text-balance font-medium text-2xl tracking-tight md:text-4xl">
						The platform teams switch to and stay on
					</h2>
					<p className="mt-4 text-muted-foreground text-sm md:text-base">
						Speed, security, and support — without the enterprise price tag or
						six-month rollout.
					</p>
				</div>

				<div className="mt-12 divide-y divide-border border-y border-border">
					{features.map((feature, index) => {
						const Icon = feature.icon;
						return (
							<motion.div
								className="group flex flex-col gap-4 py-8 sm:flex-row sm:items-start sm:gap-6 md:gap-10 md:py-10"
								initial={{ opacity: 0, x: -12 }}
								key={feature.title}
								transition={{ delay: index * 0.08, duration: 0.45, ease: "easeOut" }}
								viewport={{ once: true }}
								whileInView={{ opacity: 1, x: 0 }}
							>
								<div className="flex items-center gap-4 sm:contents">
									<span className="w-8 shrink-0 font-mono text-muted-foreground text-sm tabular-nums">
										{String(index + 1).padStart(2, "0")}
									</span>
									<motion.div
										className="flex size-11 shrink-0 items-center justify-center rounded-[var(--radius-md)] border bg-card text-foreground/80 shadow-sm"
										whileHover={{ rotate: 4, scale: 1.04 }}
									>
										<Icon className="size-5" />
									</motion.div>
								</div>
								<div className="min-w-0 flex-1">
									<h3 className="font-medium text-base md:text-lg">{feature.title}</h3>
									<p className="mt-2 text-muted-foreground text-sm leading-relaxed">
										{feature.description}
									</p>
								</div>
							</motion.div>
						);
					})}
				</div>
			</ContentRail>
		</SectionShell>
	);
}