Project-Management-V2/frontend/app/home/components/FeaturesSection.tsx

"use client";
import { Badge, Card } from "ikoncomponents";
import {
  Zap,
  Users,
  BarChart3,
  FileText,
  Layout,
  Settings2,
  Lock,
  FolderKanban,
  AlertTriangle,
  RotateCcw,
  Binary,
  Link2,
  Shield,
  Brain,
  TrendingUp,
  Calendar,
} from "lucide-react";

const features = [
  {
    title: "AI Health Scores",
    desc: "Real-time project health monitoring powered by machine learning. Predict risks before they happen.",
    icon: Brain,
    bg: "bg-purple-600",
  },
  {
    title: "Predictive Analytics",
    desc: "Forecast completion dates with confidence percentages. Know your slippage risk in advance.",
    icon: TrendingUp,
    bg: "bg-indigo-600",
  },
  {
    title: "AI Assessment Tool",
    desc: "LLM-powered project planning wizard generating BRD, SRS, timeline, budget breakdown, and risk identification.",
    icon: Zap,
    bg: "bg-blue-600",
  },
  {
    title: "Project Management",
    desc: "Complete project lifecycle management with Kanban boards, task tracking, and team collaboration.",
    icon: Layout,
    bg: "bg-cyan-600",
  },
  {
    title: "Task Management",
    desc: "Create, assign, and track tasks with priorities, story points, and sprint integration.",
    icon: Settings2,
    bg: "bg-blue-600",
  },
  {
    title: "Sprint Planning",
    desc: "Sprint velocity tracking, backlog grooming, and automated burndown charts for Agile teams..",
    icon: Calendar,
    bg: "bg-sky-600",
  },
  {
    title: "Analytics Dashboard",
    desc: "Task distribution charts, project metrics, and financial analytics in one unified view.",
    icon: BarChart3,
    bg: "bg-emerald-600",
  },
  {
    title: "Reports & Downloads",
    desc: "Generate downloadable reports filtered by time frame, projects, resources, and finances - export as CSV or PDF.",
    icon: FileText,
    bg: "bg-green-600",
  },
  {
    title: "Resource Management",
    desc: "Full team member lifecycle with CRUD, CSV bulk import, onboard/offboard workflow, and FTE calculation.",
    icon: Users,
    bg: "bg-orange-600",
  },
  {
    title: "Project Access Control",
    desc: "Request, grant, modify, and revoke resource access to projects with approval workflows.",
    icon: Lock,
    bg: "bg-amber-600",
  },
  {
    title: "Portfolio Management",
    desc: "Department-level project grouping for strategic oversight and portfolio performance tracking.",
    icon: FolderKanban,
    bg: "bg-rose-600",
  },
  {
    title: "Risk Management",
    desc: "Risk register with probability/impact scoring, severity levels, and mitigation tracking.",
    icon: AlertTriangle,
    bg: "bg-pink-600",
  },
  {
    title: "Change Management",
    desc: "Variation orders with approval workflow, budget impact tracking, and schedule adjustments.",
    icon: RotateCcw,
    bg: "bg-pink-600",
  },
  {
    title: "No-Code Automation",
    desc: "Create powerful If/Then triggers without writing code. Automate repetitive tasks instantly.",
    icon: Binary,
    bg: "bg-violet-600",
  },
  {
    title: "External Integrations",
    desc: "Connect to HRMS, CRM, ERP systems via REST API, GraphQL, webhooks, or database probes.",
    icon: Link2,
    bg: "bg-indigo-600",
  },
  {
    title: "Enterprise Security",
    desc: "Role-based access control, session management, and secure authentication for 8 stakeholder types.",
    icon: Shield,
    bg: "bg-orange-600",
  },
];

const categories = [
  {
    label: "AI-Powered",
    dot: "bg-fuchsia-500",
  },
  {
    label: "Core Features",
    dot: "bg-cyan-500",
  },
  {
    label: "Analytics",
    dot: "bg-emerald-500",
  },
  {
    label: "Resources",
    dot: "bg-orange-500",
  },
  {
    label: "Management",
    dot: "bg-sky-500",
  },
  {
    label: "Automation",
    dot: "bg-violet-500",
  },
  {
    label: "Security",
    dot: "bg-orange-500",
  },
] as const;

export function FeaturesSection() {
  return (
    <section className="py-10 px-4 sm:px-6">
      <div className="max-w-7xl mx-auto">
        {/* Header */}
        <div className="text-center space-y-4 mb-10">
          <Badge variant="outline" className="border px-4 py-1">
            Complete Platform
          </Badge>

          <h2 className="text-3xl sm:text-4xl md:text-5xl font-bold tracking-tight">
            Everything You Need to Succeed
          </h2>

          <p className="text-gray-400 max-w-2xl mx-auto text-base sm:text-lg">
            A comprehensive suite of 16 powerful features designed for modern
            project management.
          </p>
        </div>

        {/* Categories */}
        <div className="flex flex-wrap justify-center gap-3 mb-8">
          {categories.map((cat) => (
            <button
              key={cat.label}
              className="px-4 py-1.5 rounded-full text-xs font-medium border border-white/10
              hover:bg-white/5 transition-colors flex items-center gap-2"
            >
              <span className={`w-1.5 h-1.5 rounded-full ${cat.dot}`} />
              {cat.label}
            </button>
          ))}
        </div>

        {/* Features Grid */}
        <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-4">
          {features.map((feature, idx) => (
            <Card
              key={idx}
              className="p-4 hover:bg-white/10 transition-all group"
            >
              <div
                className={`w-10 h-10 rounded-lg ${feature.bg} flex items-center justify-center group-hover:scale-105 transition-transform`}
              >
                <feature.icon size={20} />
              </div>

              <h4 className="font-semibold">{feature.title}</h4>

              <p className="text-gray-500 text-sm leading-relaxed">
                {feature.desc}
              </p>
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
}