Features 3

import { cn } from "@/lib/utils";
import type React from "react";
import { FullWidthDivider } from "@/components/full-width-divider";

type FeatureType = {
	title: string;
	icon: React.ReactNode;
	description: string;
};

export function FeatureSection() {
	return (
		<div className="mx-auto min-h-screen w-full max-w-5xl place-content-center space-y-12 border-x py-4">
			<div className="relative grid grid-cols-1 gap-px bg-border md:grid-cols-2 lg:grid-cols-4">
				<FullWidthDivider position="top" />
				{features.map((feature) => (
					<FeatureCard feature={feature} key={feature.title} />
				))}
				<FullWidthDivider position="bottom" />
			</div>
		</div>
	);
}

export function FeatureCard({
	feature,
	className,
	...props
}: React.ComponentProps<"div"> & {
	feature: FeatureType;
}) {
	return (
		<div
			className={cn(
				"relative flex flex-col justify-between overflow-hidden bg-background p-4 md:p-6",
				className
			)}
			{...props}
		>
			<div
				className={cn(
					"relative z-10 flex items-center pt-4 pb-6",
					"[&_svg]:size-5 [&_svg]:text-primary"
				)}
			>
				{feature.icon}
			</div>

			<div className="relative z-10 space-y-2">
				<h3 className="font-heading font-medium text-foreground text-lg">{feature.title}</h3>
				<p className="text-muted-foreground text-xs leading-relaxed">
					{feature.description}
				</p>
			</div>
		</div>
	);
}

const features: FeatureType[] = [
	{
		title: "Lightning Fast",
		icon: (
			<IconPlaceholder
				hugeicons="ZapIcon"
				lucide="ZapIcon"
				phosphor="LightningIcon"
				remixicon="RiFlashlightLine"
				tabler="IconBolt"
			/>
		),
		description: "Blazing fast performance with edge network optimizations.",
	},
	{
		title: "Secure by Design",
		icon: (
			<IconPlaceholder
				hugeicons="ShieldCheck"
				lucide="ShieldCheckIcon"
				phosphor="ShieldCheckIcon"
				remixicon="RiShieldCheckLine"
				tabler="IconShieldCheck"
			/>
		),
		description: "Enterprise-grade security, zero configuration required.",
	},
	{
		title: "Real-time Sync",
		icon: (
			<IconPlaceholder
				hugeicons="ActivityIcon"
				lucide="ActivityIcon"
				phosphor="PulseIcon"
				remixicon="RiPulseLine"
				tabler="IconActivity"
			/>
		),
		description: "Real-time data sync across all devices efficiently.",
	},
	{
		title: "Global Scale",
		icon: (
			<IconPlaceholder
				hugeicons="GlobeIcon"
				lucide="GlobeIcon"
				phosphor="GlobeIcon"
				remixicon="RiGlobeLine"
				tabler="IconGlobe"
			/>
		),
		description: "Instant global deployment to 35+ regions worldwide.",
	},
];