import { AtSign, GitBranch, Palette, Globe, SlidersHorizontal, Link } from 'lucide-react';

const features = [
  {
    icon: AtSign,
    iconColor: 'text-pink-400',
    title: 'Reference Images',
    description:
      'Use @aliases to maintain style consistency across your project. Reference up to 3 images per generation.',
    isUnique: false,
  },
  {
    icon: GitBranch,
    iconColor: 'text-purple-400',
    title: 'Flows',
    description:
      'Chain generations, iterate on results, build image sequences with @last and @first references.',
    isUnique: false,
  },
  {
    icon: Palette,
    iconColor: 'text-yellow-400',
    title: '7 Style Templates',
    description:
      'Same prompt, different styles. Photorealistic, illustration, minimalist, product, comic, sticker, and more.',
    isUnique: false,
  },
  {
    icon: Globe,
    iconColor: 'text-green-400',
    title: 'Instant CDN Delivery',
    description:
      'Every image gets production-ready URL. No upload, no optimization, no hosting setup needed.',
    isUnique: false,
  },
  {
    icon: SlidersHorizontal,
    iconColor: 'text-blue-400',
    title: 'Output Control',
    description:
      'Control aspect ratio, dimensions, and format. From square thumbnails to ultra-wide banners.',
    isUnique: false,
  },
  {
    icon: Link,
    iconColor: 'text-cyan-400',
    title: 'Prompt URLs',
    description:
      'Generate images via URL parameters. Put prompt in img src, get real image. Built-in caching.',
    isUnique: true,
  },
];

export function KeyFeaturesSection() {
  return (
    <section className="py-20 px-6">
      <div className="max-w-6xl mx-auto">
        <h2 className="text-3xl md:text-4xl font-bold text-center mb-4">
          Built for real development workflows
        </h2>
        <p className="text-gray-400 text-center mb-16 max-w-2xl mx-auto">
          Everything you need to integrate AI images into your projects.
        </p>

        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
          {features.map((feature, i) => (
            <div
              key={i}
              className={`rounded-xl p-6 ${
                feature.isUnique
                  ? 'bg-gradient-to-br from-cyan-500/10 to-indigo-500/[0.08] border border-cyan-500/30'
                  : 'bg-gradient-to-b from-indigo-500/10 to-[rgba(30,27,75,0.4)] border border-indigo-500/20 backdrop-blur-[10px]'
              }`}
            >
              <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-indigo-500/20 to-purple-500/20 flex items-center justify-center mb-4">
                <feature.icon className={`w-6 h-6 ${feature.iconColor}`} />
              </div>
              <div className="flex items-center gap-2 mb-2">
                <h3 className="font-semibold text-lg">{feature.title}</h3>
                {feature.isUnique && (
                  <span className="px-2 py-0.5 bg-cyan-500/20 text-cyan-300 text-xs rounded">
                    Unique
                  </span>
                )}
              </div>
              <p className="text-gray-400 text-sm">{feature.description}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
