doc_ai_frontend/src/components/home/FeaturesSection.tsx

import { PenTool, FileOutput, FileText, Layers, Zap, Gift } from 'lucide-react';
import { useLanguage } from '../../contexts/LanguageContext';

const iconMap = [PenTool, FileOutput, FileText, Layers, Zap, Gift];
const accentColors = [
  { bg: 'bg-coral-50', icon: 'text-coral-500', border: 'hover:border-coral-200' },
  { bg: 'bg-sage-50', icon: 'text-sage-600', border: 'hover:border-sage-200' },
  { bg: 'bg-amber-50', icon: 'text-amber-600', border: 'hover:border-amber-200' },
  { bg: 'bg-violet-50', icon: 'text-violet-500', border: 'hover:border-violet-200' },
  { bg: 'bg-coral-50', icon: 'text-coral-500', border: 'hover:border-coral-200' },
  { bg: 'bg-sage-50', icon: 'text-sage-600', border: 'hover:border-sage-200' },
];

export default function FeaturesSection() {
  const { t } = useLanguage();
  const f = t.marketing.features;

  const items = [
    { title: f.handwriting, description: f.handwritingDesc },
    { title: f.multiFormat, description: f.multiFormatDesc },
    { title: f.pdf, description: f.pdfDesc },
    { title: f.batch, description: f.batchDesc },
    { title: f.accuracy, description: f.accuracyDesc },
    { title: f.free, description: f.freeDesc },
  ];

  return (
    <section id="features" className="section-padding bg-white relative">
      {/* Subtle top border accent */}
      <div className="absolute top-0 left-1/2 -translate-x-1/2 w-24 h-0.5 bg-gradient-to-r from-transparent via-coral-300 to-transparent" />

      <div className="max-w-6xl mx-auto">
        <div className="max-w-2xl mb-16">
          <h2 className="font-display text-3xl lg:text-4xl font-bold text-ink mb-4 tracking-tight">{f.title}</h2>
          <p className="text-ink-secondary text-lg leading-relaxed">{f.subtitle}</p>
        </div>

        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-5">
          {items.map((item, i) => {
            const Icon = iconMap[i];
            const color = accentColors[i];
            return (
              <div
                key={i}
                className={`card p-6 ${color.border} group`}
                style={{ opacity: 0, animationDelay: `${i * 80}ms` }}
              >
                <div className={`w-11 h-11 ${color.bg} rounded-xl flex items-center justify-center mb-4 transition-transform duration-200 group-hover:scale-110`}>
                  <Icon size={20} className={color.icon} />
                </div>
                <h3 className="font-display text-base font-semibold text-ink mb-2">{item.title}</h3>
                <p className="text-ink-secondary text-sm leading-relaxed">{item.description}</p>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}