// components/Features.tsx
import {
  ChartBarIcon,
  MagnifyingGlassIcon,
  Squares2X2Icon,
} from '@heroicons/react/24/outline';

const features = [
  {
    title: 'Vision instantanée',
    description:
      'Suivez vos ventes, stocks et performances en temps réel, où que vous soyez, depuis un tableau de bord clair et intuitif.',
    icon: ChartBarIcon,
  },
  {
    title: 'Analyse stratégique',
    description:
      'Identifiez vos produits les plus rentables, analysez les tendances et optimisez vos marges grâce à des rapports détaillés.',
    icon: MagnifyingGlassIcon,
  },
  {
    title: 'Gestion centralisée',
    description:
      'Pilotez plusieurs établissements, caisses et menus depuis une interface unique. Un contrôle total, sans complexité.',
    icon: Squares2X2Icon,
  },
];

export default function Features() {
  return (
    <section className="relative py-28 overflow-hidden bg-white">
      {/* Subtle background pattern */}
      <div className="absolute inset-0 opacity-5">
        <div className="absolute inset-0" style={{
          backgroundImage: `radial-gradient(circle at 2px 2px, gray 1px, transparent 0)`,
          backgroundSize: '32px 32px'
        }} />
      </div>

      <div className="relative max-w-7xl mx-auto px-6">
        {/* Section header */}
        <div className="text-center max-w-3xl mx-auto mb-16">
          <h2 className="text-4xl md:text-5xl font-bold tracking-tight text-gray-900 mb-4">
            Une vision complète. <span className="text-gray-600">Un contrôle total.</span>
          </h2>
          <p className="text-xl text-gray-600">
            Notre plateforme vous donne toutes les clés pour piloter votre restaurant avec précision et sérénité.
          </p>
        </div>

        {/* Features grid */}
        <div className="grid md:grid-cols-3 gap-8 lg:gap-12">
          {features.map((feature, index) => {
            const Icon = feature.icon;
            return (
              <div
                key={index}
                className="group relative bg-gray-50/80 backdrop-blur-sm rounded-2xl p-8 shadow-md hover:shadow-xl transition-all duration-300 hover:-translate-y-2 border border-gray-100"
              >
                {/* Icon with gradient background */}
                <div className="inline-flex items-center justify-center w-16 h-16 mb-6 rounded-xl bg-gradient-to-br from-black to-gray-700 text-white shadow-md group-hover:scale-110 transition-transform duration-300">
                  <Icon className="w-8 h-8" />
                </div>

                <h3 className="text-xl font-bold text-gray-900 mb-3">
                  {feature.title}
                </h3>

                <p className="text-gray-600 leading-relaxed">
                  {feature.description}
                </p>

                {/* Decorative hover line */}
                <div className="absolute bottom-0 left-1/2 w-0 h-0.5 bg-gradient-to-r from-transparent via-gray-400 to-transparent group-hover:w-2/3 group-hover:left-1/6 transition-all duration-500" />
              </div>
            );
          })}
        </div>

        {/* Optional subtle CTA */}
        <div className="text-center mt-16">
          <p className="text-sm text-gray-500">
            Prêt à reprendre le contrôle ?{' '}
            <a
              href="/demande-demo"
              className="font-medium text-black underline decoration-gray-300 hover:decoration-black transition-all"
            >
              Demandez une démo
            </a>
          </p>
        </div>
      </div>
    </section>
  );
}