"use client";

import { motion } from "framer-motion";

/**
 * "Trusted by" — statement heading + two auto-sliding marquee rows of
 * wordmarks drifting in opposite directions (pause on hover). Placeholder
 * text-wordmarks — swap with real SVG logos in /public/logos when available.
 */
const BRANDS = [
  { name: "NORTHWIND", className: "font-bold uppercase tracking-[0.25em]" },
  { name: "Apex Labs", className: "font-semibold tracking-tight" },
  { name: "bluefin", className: "font-bold lowercase tracking-tighter" },
  { name: "VANTAGE", className: "font-light uppercase tracking-[0.35em]" },
  { name: "Heliox", className: "font-extrabold italic tracking-tight" },
  { name: "Mosaic+", className: "font-medium tracking-wide" },
  { name: "Quanta", className: "font-bold tracking-[0.15em]" },
  { name: "Drift Labs", className: "font-semibold italic" },
  { name: "OAKLINE", className: "font-bold uppercase tracking-[0.2em]" },
  { name: "pixelforge", className: "font-medium lowercase tracking-tight" },
  { name: "Summit&Co", className: "font-bold tracking-tight" },
  { name: "NOVA BANK", className: "font-light uppercase tracking-[0.3em]" },
  { name: "brightpath", className: "font-semibold lowercase" },
  { name: "Kitewave", className: "font-extrabold tracking-tight" },
  { name: "Atlas Group", className: "font-medium uppercase tracking-[0.12em]" },
];

const ROW_A = BRANDS.slice(0, 8);
const ROW_B = BRANDS.slice(8);

function MarqueeRow({ items, reverse = false }) {
  return (
    <div className="overflow-hidden [mask-image:linear-gradient(to_right,transparent,black_8%,black_92%,transparent)]">
      <div
        className={
          "flex w-max items-center gap-16 py-3 sm:gap-24 " +
          (reverse ? "animate-marquee-slow-rev" : "animate-marquee-slow")
        }
      >
        {[...items, ...items].map(({ name, className }, i) => (
          <span
            key={`${name}-${i}`}
            className={`cursor-default select-none whitespace-nowrap font-heading text-xl text-foreground/55 transition-colors duration-300 hover:text-foreground sm:text-2xl ${className}`}
          >
            {name}
          </span>
        ))}
      </div>
    </div>
  );
}

export default function TrustedBy() {
  return (
    <section className="relative bg-background pb-10 pt-20 text-foreground md:pb-12 md:pt-24">
      {/* Statement heading */}
      <motion.div
        initial={{ opacity: 0, y: 24 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true, amount: 0.3 }}
        transition={{ duration: 0.6, ease: [0.21, 0.47, 0.32, 0.98] }}
        className="container text-center"
      >
        <h2 className="mx-auto max-w-2xl font-heading text-3xl font-bold leading-tight tracking-tight sm:text-4xl md:text-5xl">
          Trusted by the disruptors
          <br />
          and{" "}
          <span className="animate-text-shimmer bg-gradient-to-r from-primary via-accent to-primary bg-clip-text text-transparent">
            industry leaders
          </span>
        </h2>
        <p className="mx-auto mt-4 max-w-md text-base text-muted-foreground">
          From funded startups to enterprise teams — we ship for both.
        </p>
      </motion.div>

      {/* Auto-sliding wordmark rows */}
      <motion.div
        initial={{ opacity: 0, y: 30 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true, amount: 0.2 }}
        transition={{ duration: 0.65, ease: [0.21, 0.47, 0.32, 0.98] }}
        className="mt-12 space-y-2"
      >
        <MarqueeRow items={ROW_A} />
        <MarqueeRow items={ROW_B} reverse />
      </motion.div>
    </section>
  );
}