'use client';

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

export default function ToolsGrid() {
  return (
    <section id="tools" className="relative py-20 px-4">
      <div className="max-w-6xl mx-auto">
        {/* Section heading */}
        <motion.div
          className="text-center mb-16"
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.6 }}
        >
          <h2 className="text-4xl md:text-5xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-cyan-400">
            Available Tools
          </h2>
          <p className="text-muted-foreground text-lg max-w-2xl mx-auto">
            Explore our collection of carefully crafted tools designed to boost your productivity and creativity
          </p>
        </motion.div>

        {/* Tools grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {tools.map((tool, index) => {
            const Icon = tool.icon;
            return (
              <ToolCard
                key={tool.href}
                title={tool.title}
                description={tool.summary}
                icon={<Icon className="w-12 h-12" />}
                url={tool.href}
                badges={tool.badges}
                index={index}
              />
            );
          })}
        </div>
      </div>
    </section>
  );
}