"use client";

import { Badge, Card } from "ikoncomponents";
import { CheckCircle2, GitBranch, CalendarDays } from "lucide-react";

const methodologyData = [
  {
    title: "Agile & Scrum",
    description:
      "Sprint planning, velocity tracking, and automated burndown charts.",
    icon: GitBranch,
    iconColor: "text-indigo-400",
    iconBg: "bg-indigo-500/10",
    features: [
      "Kanban Boards",
      "Sprint Backlogs",
      "Velocity Metrics",
      "WIP Limits",
    ],
  },
  {
    title: "Waterfall & Gantt",
    description: "Dynamic Gantt charts with drag-and-drop dependency mapping.",
    icon: CalendarDays,
    iconColor: "text-blue-400",
    iconBg: "bg-blue-500/10",
    features: ["Timeline Views", "Dependencies", "Milestones", "Critical Path"],
  },
];

export function MethodologySection() {
  return (
    <section className="py-12">
      <div className="container mx-auto px-4">
        {/* Header */}
        <div className="text-center space-y-4 mb-12">
          <Badge variant="outline" className="border px-4 py-1">
            Flexible Workflows
          </Badge>

          <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight">
            Your Methodology, Your Way
          </h2>

          <p className="text-gray-400 max-w-2xl mx-auto text-lg">
            Support diverse team workflows across Agile and Waterfall in one
            unified interface.
          </p>
        </div>

        {/* Cards Grid */}
        <div className="grid lg:grid-cols-2 gap-6 max-w-7xl mx-auto">
          {methodologyData.map((item, idx) => (
            <Card
              key={idx}
              className="p-6 rounded-2xl hover:border-white/10 transition-all"
            >
              {/* Top Section */}
              <div className="flex items-start gap-5 mb-6">
                <div className={`p-4 rounded-xl ${item.iconBg}`}>
                  <item.icon className={item.iconColor} size={28} />
                </div>

                <div>
                  <h3 className="text-xl lg:text-2xl font-bold mb-1">
                    {item.title}
                  </h3>
                  <p className="text-gray-400 leading-relaxed">
                    {item.description}
                  </p>
                </div>
              </div>

              {/* Features */}
              <div className="grid sm:grid-cols-2 gap-y-3 gap-x-4">
                {item.features.map((feature) => (
                  <div
                    key={feature}
                    className="flex items-center gap-3"
                  >
                    <CheckCircle2
                      className="text-emerald-500 shrink-0"
                      size={18}
                    />
                    <span className="text-sm font-medium">
                      {feature}
                    </span>
                  </div>
                ))}
              </div>
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
}