import { motion } from "motion/react";
import { Check, X, Info } from "lucide-react";
export default function MethodCard({ method }) {
  return <motion.div
    initial={{ opacity: 0, y: 30 }}
    whileInView={{ opacity: 1, y: 0 }}
    viewport={{ once: true, margin: "-100px" }}
    transition={{ duration: 0.5, ease: "easeOut" }}
    className="bg-white border border-slate-100 p-6 md:p-8 rounded-2xl shadow-lg hover:shadow-xl hover:border-orange-500/20 transition-all duration-300 flex flex-col relative overflow-hidden group hover:-translate-y-1"
  >
      {
    /* Decorative accent top-line */
  }
      <div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-orange-500/10 via-orange-500 to-orange-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />

      {
    /* Code Badge */
  }
      <span className="absolute top-6 right-6 font-mono text-xs font-semibold text-slate-500 bg-slate-50 px-3 py-1 rounded-full border border-slate-100 tracking-wider">
        METHOD {method.code}
      </span>

      <h3 className="font-heading text-xl md:text-2xl font-bold text-slate-900 group-hover:text-orange-500 transition-colors duration-200 mt-2 pr-28">
        {method.name}
      </h3>
      <p className="mt-4 text-slate-500 text-sm leading-relaxed font-light">
        {method.description}
      </p>

      {method.note && <div className="mt-5 flex gap-3.5 items-start bg-amber-50/40 border-l-4 border-amber-500 p-4 rounded-xl">
          <Info className="w-4 h-4 text-amber-600 shrink-0 mt-0.5" />
          <p className="text-xs text-amber-800 leading-relaxed font-normal">
            {method.note}
          </p>
        </div>}

      {(method.advantages || method.limitations) && <div className="grid sm:grid-cols-2 gap-6 mt-6 pt-5 border-t border-slate-50">
          {method.advantages && <div>
              <p className="font-heading text-xs font-bold tracking-wider text-slate-900 mb-3.5 uppercase">Advantages</p>
              <ul className="space-y-2.5">
                {method.advantages.map((a) => <li key={a} className="text-xs text-slate-600 flex gap-2.5 items-start font-light">
                    <span className="w-5 h-5 rounded-full bg-emerald-50 text-emerald-600 flex items-center justify-center shrink-0 mt-0.5 border border-emerald-100/50">
                      <Check className="w-3 h-3" />
                    </span>
                    <span>{a}</span>
                  </li>)}
              </ul>
            </div>}
          {method.limitations && <div>
              <p className="font-heading text-xs font-bold tracking-wider text-slate-500 mb-3.5 uppercase">Limitations</p>
              <ul className="space-y-2.5">
                {method.limitations.map((l) => <li key={l} className="text-xs text-slate-500 flex gap-2.5 items-start font-light">
                    <span className="w-5 h-5 rounded-full bg-rose-50 text-rose-500 flex items-center justify-center shrink-0 mt-0.5 border border-rose-100/50">
                      <X className="w-3 h-3" />
                    </span>
                    <span>{l}</span>
                  </li>)}
              </ul>
            </div>}
        </div>}

      {method.uses && <div className="mt-6 pt-5 border-t border-slate-50">
          <p className="font-heading text-[10px] font-bold tracking-wider text-slate-800 mb-3 uppercase">Key Applications</p>
          <div className="flex flex-wrap gap-2">
            {method.uses.map((u) => <span
    key={u}
    className="text-xs border border-slate-200 bg-slate-50 text-slate-600 px-3.5 py-1.5 rounded-lg hover:border-orange-500/40 hover:text-orange-500 transition-all duration-200 cursor-default"
  >
                {u}
              </span>)}
          </div>
        </div>}
    </motion.div>;
}
