import {
  Zap,
  Link2,
  Shield,
  Globe,
  HardDrive,
  Sparkles,
} from "lucide-react";

const features = [
  {
    icon: Zap,
    title: "Мгновенная загрузка",
    description:
      "Drag & drop или выбор файла — прямая ссылка готова за секунду.",
    color: "text-amber-400",
    bg: "bg-amber-400/10",
  },
  {
    icon: Link2,
    title: "Прямые ссылки",
    description:
      "Получайте прямую ссылку на изображение для форумов, чатов и сайтов.",
    color: "text-indigo-400",
    bg: "bg-indigo-400/10",
  },
  {
    icon: Shield,
    title: "Безопасность",
    description:
      "Файлы хранятся на защищённом сервере с контролем типов и размера.",
    color: "text-emerald-400",
    bg: "bg-emerald-400/10",
  },
  {
    icon: Globe,
    title: "Доступ отовсюду",
    description:
      "Загружайте с любого устройства — работает на всех платформах.",
    color: "text-sky-400",
    bg: "bg-sky-400/10",
  },
  {
    icon: HardDrive,
    title: "Надёжное хранение",
    description:
      "PostgreSQL + Docker — ваши фото в безопасности и всегда доступны.",
    color: "text-violet-400",
    bg: "bg-violet-400/10",
  },
  {
    icon: Sparkles,
    title: "Без регистрации",
    description:
      "Не нужен аккаунт — просто загрузите и поделитесь ссылкой.",
    color: "text-pink-400",
    bg: "bg-pink-400/10",
  },
];

export function Features() {
  return (
    <section id="features" className="px-6 py-20">
      <div className="mx-auto max-w-7xl">
        <div className="mb-14 text-center">
          <h2 className="text-3xl font-bold md:text-4xl">
            Почему <span className="gradient-text">PhotoHost</span>?
          </h2>
          <p className="mt-3 text-muted">
            Всё, что нужно для быстрого обмена фотографиями
          </p>
        </div>

        <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
          {features.map((feature) => (
            <div
              key={feature.title}
              className="glass group rounded-2xl p-6 transition-all duration-300 hover:border-indigo-500/30 hover:bg-surface-hover"
            >
              <div
                className={`mb-4 inline-flex h-12 w-12 items-center justify-center rounded-xl ${feature.bg} transition-transform group-hover:scale-110`}
              >
                <feature.icon className={`h-6 w-6 ${feature.color}`} />
              </div>
              <h3 className="mb-2 text-lg font-semibold">{feature.title}</h3>
              <p className="text-sm leading-relaxed text-muted">
                {feature.description}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}