'use client';

import { motion } from 'framer-motion';
import { Truck, RefreshCw, ShieldCheck, Headphones } from 'lucide-react';

/* ── Trust Items ────────────────────────────────────────────────── */
const trustItems = [
  {
    icon: Truck,
    title: 'Free Delivery',
    subtitle: 'On orders above ৳1,500',
  },
  {
    icon: RefreshCw,
    title: 'Easy Returns',
    subtitle: '7-day return policy',
  },
  {
    icon: ShieldCheck,
    title: 'Secure Payment',
    subtitle: 'COD & bKash available',
  },
  {
    icon: Headphones,
    title: '24/7 Support',
    subtitle: 'WhatsApp & phone',
  },
];

/* ── Container Animation ────────────────────────────────────────── */
const containerVariants = {
  hidden: {},
  visible: {
    transition: {
      staggerChildren: 0.1,
    },
  },
};

const itemVariants = {
  hidden: { opacity: 0, y: 20 },
  visible: {
    opacity: 1,
    y: 0,
    transition: { duration: 0.5, ease: 'easeOut' },
  },
};

/* ── TrustBar Component ─────────────────────────────────────────── */
export default function TrustBar() {
  return (
    <section className="py-10 lg:py-14 bg-gray-50">
      <div className="max-w-7xl mx-auto px-4 lg:px-8">
        <motion.div
          className="grid grid-cols-2 lg:grid-cols-4 gap-6"
          variants={containerVariants}
          initial="hidden"
          whileInView="visible"
          viewport={{ once: true, margin: '-50px' }}
        >
          {trustItems.map((item) => (
            <motion.div
              key={item.title}
              variants={itemVariants}
              className="flex flex-col items-center text-center"
            >
              <div className="w-14 h-14 bg-brand/10 rounded-full flex items-center justify-center mx-auto mb-3">
                <item.icon className="w-6 h-6 text-brand" strokeWidth={1.8} />
              </div>
              <h3 className="font-semibold text-gray-800 text-sm">
                {item.title}
              </h3>
              <p className="text-gray-500 text-xs mt-1">{item.subtitle}</p>
            </motion.div>
          ))}
        </motion.div>
      </div>
    </section>
  );
}
