"use client";

import { motion } from "framer-motion";
import { logos } from "@/lib/placeholders";

const accentColors = [
  "bg-violet-500/10 text-violet-600 border-violet-200/50",
  "bg-sky-500/10 text-sky-600 border-sky-200/50",
  "bg-emerald-500/10 text-emerald-600 border-emerald-200/50",
  "bg-rose-500/10 text-rose-600 border-rose-200/50",
  "bg-amber-500/10 text-amber-600 border-amber-200/50",
  "bg-indigo-500/10 text-indigo-600 border-indigo-200/50",
];

export default function LogoCloud() {
  return (
    <section className="py-14 sm:py-20 bg-background border-b border-border">
      <div className="container mx-auto px-6">
        {/* Heading */}
        <motion.div
          initial={{ opacity: 0, y: 16 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.5 }}
          className="text-center mb-10"
        >
          <p className="text-sm font-semibold uppercase tracking-widest text-muted-foreground">
            Trusted by leading teams at
          </p>
        </motion.div>

        {/* Logo strip */}
        <motion.div
          initial={{ opacity: 0 }}
          whileInView={{ opacity: 1 }}
          viewport={{ once: true }}
          transition={{ duration: 0.6, delay: 0.1 }}
          className="flex flex-wrap items-center justify-center gap-4 sm:gap-6"
        >
          {logos.map((logo, i) => (
            <motion.div
              key={logo.name}
              initial={{ opacity: 0, scale: 0.9 }}
              whileInView={{ opacity: 1, scale: 1 }}
              viewport={{ once: true }}
              transition={{ duration: 0.4, delay: 0.1 + i * 0.06 }}
              className={`flex items-center gap-3 rounded-xl border px-5 py-3 ${accentColors[i % accentColors.length]}`}
            >
              {/* Abbreviation badge */}
              <span className="w-8 h-8 rounded-lg bg-current/10 flex items-center justify-center text-xs font-black tracking-tighter opacity-70">
                {logo.abbr}
              </span>
              <span className="text-sm font-semibold whitespace-nowrap opacity-80">
                {logo.name}
              </span>
            </motion.div>
          ))}
        </motion.div>

        {/* Subtle tagline */}
        <motion.p
          initial={{ opacity: 0 }}
          whileInView={{ opacity: 1 }}
          viewport={{ once: true }}
          transition={{ duration: 0.5, delay: 0.5 }}
          className="text-center text-xs text-muted-foreground mt-8"
        >
          200+ companies trust us to power their digital experience
        </motion.p>
      </div>
    </section>
  );
}