Features 4

import {
    BarChart3,
    Calendar,
    ClipboardList,
    FolderKanban,
    Layers,
    MessageSquare,
    Target,
    Users,
    Zap,
} from "lucide-react";

import { Badge } from "@/components/ui/badge";
import { Card, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";

const FEATURES_DATA = [
    {
        id: "task-mgmt",
        title: "Sprint Management",
        description: "Organize and prioritize deliverables with high-fidelity sprint boards and backlogs.",
        icon: ClipboardList,
    },
    {
        id: "realtime-updates",
        title: "Instant Synced Updates",
        description: "Stay aligned across remote timelines with realtime live webhook events and updates.",
        icon: Zap,
    },
    {
        id: "collaboration",
        title: "Unified Team Workspace",
        description: "Co-author design sheets, notes, and task specs directly within shared workspaces.",
        icon: Users,
    },
    {
        id: "goal-tracking",
        title: "Milestone Tracking",
        description: "Track progress towards organizational key results and launch timelines.",
        icon: Target,
    },
    {
        id: "analytics",
        title: "Operational Analytics",
        description: "Measure team velocity, resolve delivery bottlenecks, and run retro reports.",
        icon: BarChart3,
    },
    {
        id: "scheduling",
        title: "Resource Allocation",
        description: "Plan capacity pipelines and assign tasks dynamically without over-allocation.",
        icon: Calendar,
    },
    {
        id: "communication",
        title: "Integrated Channels",
        description: "Connect communication platforms directly to your tracking board for automated logs.",
        icon: MessageSquare,
    },
    {
        id: "templates",
        title: "Project Blueprints",
        description: "Kickstart workflows instantly with curated, industry-standard process templates.",
        icon: FolderKanban,
    },
];

export const Features4 = () => {
    return (
        <section className="py-16 md:py-24 lg:py-32" id="features-4">
            <div className="mx-auto flex w-full max-w-7xl flex-col gap-10 sm:gap-12 md:gap-16 px-4 sm:px-6">
                <header className="mx-auto flex max-w-2xl flex-col items-center text-center gap-3">
                    <Badge variant="outline" className="w-fit gap-2">
                        <Layers className="size-4" />
                        <span>Project Operations</span>
                    </Badge>

                    <h2 id="features-4-heading" className="text-3xl font-semibold text-balance sm:text-4xl md:text-5xl leading-tight">
                        Everything you need to deliver projects on time
                    </h2>

                    <p className="text-muted-foreground max-w-xl text-base/7 text-pretty">
                        Our integrated toolset connects planning, communication, and delivery in one fluid workspace.
                    </p>
                </header>

                <div className="grid w-full grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-4">
                    {FEATURES_DATA.map((item) => {
                        const Icon = item.icon;
                        return (
                            <Card key={item.id} className="flex flex-col justify-between">
                                <CardHeader className="gap-3 pb-6">
                                    <div className="bg-muted flex size-10 shrink-0 items-center justify-center rounded-md">
                                        <Icon className="size-5" />
                                    </div>
                                    <div className="flex flex-col gap-1">
                                        <CardTitle className="text-base">{item.title}</CardTitle>
                                        <CardDescription>{item.description}</CardDescription>
                                    </div>
                                </CardHeader>
                            </Card>
                        );
                    })}
                </div>

                <p className="text-muted-foreground text-center text-sm pt-2 sm:pt-4">
                    PaceUI offers comprehensive project management solutions for teams of all sizes
                </p>
            </div>
        </section>
    );
};

export default Features4;