"use client";

import { motion } from "framer-motion";
import { Palette, Rocket, Headphones, ShieldCheck } from "lucide-react";
import type { ReactNode } from "react";

const FEATURES = [
  {
    icon: <Palette className="w-5 h-5" />,
    title: "Profesyonel Tasarımlar",
    desc: "Sunucunuzu öne çıkaran modern, özgün tasarım çözümleri.",
  },
  {
    icon: <Rocket className="w-5 h-5" />,
    title: "Hızlı Teslimat",
    desc: "Kısa sürelerde proje teslimi ile zaman kaybınızı en aza indirin.",
  },
  {
    icon: <Headphones className="w-5 h-5" />,
    title: "7/24 Destek",
    desc: "Her ihtiyacınızda yanınızda olan profesyonel destek ekibi.",
  },
  {
    icon: <ShieldCheck className="w-5 h-5" />,
    title: "Güvenli Ödeme",
    desc: "Kullandığımız ödeme altyapısıyla güvenli alışveriş garantisi.",
  },
];

export default function FeatureBoxes() {
  return (
    <section className="max-w-7xl mx-auto px-6 lg:px-10 -mt-2 lg:-mt-4">
      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
        {FEATURES.map((f, i) => (
          <FeatureCard
            key={f.title}
            index={i}
            icon={f.icon}
            title={f.title}
            desc={f.desc}
          />
        ))}
      </div>
    </section>
  );
}

function FeatureCard({
  icon,
  title,
  desc,
  index,
}: {
  icon: ReactNode;
  title: string;
  desc: string;
  index: number;
}) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 24 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true, margin: "-30px" }}
      transition={{ duration: 0.45, delay: 0.05 * index }}
      whileHover={{ y: -4 }}
      className="glass rounded-2xl p-5 group hover:border-brand-400/50 transition-all"
    >
      <div
        className="w-10 h-10 rounded-xl flex items-center justify-center text-white mb-3"
        style={{
          background:
            "linear-gradient(135deg, rgba(124,146,174,0.35), rgba(66,83,105,0.85))",
          boxShadow: "0 4px 14px rgba(66,83,105,0.4)",
        }}
      >
        {icon}
      </div>
      <h3 className="text-base font-bold text-white">{title}</h3>
      <p className="mt-1.5 text-sm text-brand-300 leading-relaxed">{desc}</p>
    </motion.div>
  );
}