"use client";

import { motion } from "framer-motion";

interface Value {
  title: string;
  desc: string;
}

export function Values({ values }: { values: Value[] }) {
  return (
    <div className="grid gap-4 sm:grid-cols-2">
      {values.map((v, i) => (
        <motion.div
          key={i}
          initial={{ opacity: 0, y: 16 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, margin: "-40px" }}
          transition={{ duration: 0.4, delay: i * 0.07 }}
          className="rounded-lg border border-border bg-surface p-5 hover:border-accent/20 transition-colors"
        >
          <div className="mb-1 font-semibold text-text-primary">{v.title}</div>
          <p className="text-sm text-text-secondary leading-relaxed">{v.desc}</p>
        </motion.div>
      ))}
    </div>
  );
}
