kit-ui/components/ToolsGrid.tsx

'use client';

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

const tools = [
  {
    title: 'Convert',
    description: 'Modern browser-based file converter powered by WebAssembly. Convert videos, images, and audio locally without server uploads. Privacy-first with no file size limits.',
    url: 'https://convert.kit.pivoine.art',
    gradient: 'gradient-green-teal',
    accentColor: '#10b981',
    badges: ['Open Source', 'Converter', 'Free'],
    icon: (
      <svg className="w-12 h-12 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
      </svg>
    ),
  },
  {
    title: 'Pastel',
    description: 'Modern color manipulation toolkit with palette generation, accessibility testing, and format conversion. Supports hex, RGB, HSL, Lab, and more.',
    url: 'https://pastel.kit.pivoine.art',
    gradient: 'gradient-indigo-purple',
    accentColor: '#a855f7',
    badges: ['Open Source', 'WCAG', 'Free'],
    icon: (
      <svg className="w-12 h-12 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z" />
        <circle cx="6.5" cy="11.5" r="1" fill="currentColor" />
        <circle cx="9.5" cy="7.5" r="1" fill="currentColor" />
        <circle cx="14.5" cy="7.5" r="1" fill="currentColor" />
        <circle cx="17.5" cy="11.5" r="1" fill="currentColor" />
      </svg>
    ),
  },
  {
    title: 'Audio',
    description: 'Professional browser-based audio editor with multi-track editing, advanced effects, and real-time analysis. Record, edit, and export to WAV, MP3, OGG, or FLAC entirely in your browser.',
    url: 'https://audio.kit.pivoine.art',
    gradient: 'gradient-orange-pink',
    accentColor: '#f97316',
    badges: ['Open Source', 'Audio Editor', 'Free'],
    icon: (
      <svg className="w-12 h-12 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3" />
      </svg>
    ),
  },
  {
    title: 'Units',
    description: 'Smart unit converter with 187 units across 23 categories. Real-time bidirectional conversion with fuzzy search and conversion history.',
    url: 'https://units.kit.pivoine.art',
    gradient: 'gradient-cyan-purple',
    accentColor: '#2dd4bf',
    badges: ['Open Source', 'Real-time', 'Free'],
    icon: (
      <svg className="w-12 h-12 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4" />
      </svg>
    ),
  },
  {
    title: 'Paint',
    description: 'Modern browser-based image editor with multi-layer canvas, drawing tools, and 50+ filters. Inspired by miniPaint, built for the modern web with full editing capabilities.',
    url: 'https://paint.kit.pivoine.art',
    gradient: 'gradient-pink-rose',
    accentColor: '#ec4899',
    badges: ['Open Source', 'Image Editor', 'Free'],
    icon: (
      <svg className="w-12 h-12 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="m11 10l3 3m-7.5 8A3.5 3.5 0 1 0 3 17.5a2.62 2.62 0 0 1-.708 1.792A1 1 0 0 0 3 21z" />
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.969 17.031L21.378 5.624a1 1 0 0 0-3.002-3.002L6.967 14.031" />
      </svg>
    ),
  },
  {
    title: 'Figlet',
    description: 'ASCII art text generator with 373 fonts. Create stunning text banners, terminal art, and retro designs with live preview and multiple export formats.',
    url: 'https://figlet.kit.pivoine.art',
    gradient: 'gradient-yellow-amber',
    accentColor: '#eab308',
    badges: ['Open Source', 'ASCII Art', 'Free'],
    icon: (
      <svg className="w-12 h-12 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3.5 13h6" />
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="m2 16 4.5-9 4.5 9" />
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M18 16V7" />
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="m14 11 4-4 4 4" />
      </svg>
    ),
  },
];

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-gray-400 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) => (
            <ToolCard
              key={tool.title}
              title={tool.title}
              description={tool.description}
              icon={tool.icon}
              url={tool.url}
              gradient={tool.gradient}
              accentColor={tool.accentColor}
              badges={tool.badges}
              index={index}
            />
          ))}
        </div>
      </div>
    </section>
  );
}