import ToolCard from './ToolCard';
import { tools } from '@/lib/tools';

export default function ToolsGrid() {
  return (
    <section id="tools" className="relative py-16 px-6">
      <div className="max-w-5xl mx-auto">

        {/* Section heading */}
        <div
          className="mb-8"
          style={{ animation: 'fadeIn 0.5s ease-out both' }}
        >
          <span className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest block mb-1">
            Available Tools
          </span>
          <p className="text-xs text-muted-foreground/40">
            Carefully crafted tools for your workflow
          </p>
        </div>

        {/* Tools grid */}
        <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-3">
          {tools.map((tool, index) => (
            <ToolCard
              key={tool.href}
              title={tool.shortTitle}
              description={tool.summary}
              icon={tool.icon}
              url={tool.href}
              badges={tool.badges}
              index={index}
            />
          ))}
        </div>
      </div>
    </section>
  );
}
