import { Marquee } from "@/components/motion/Marquee";
import { Reveal } from "@/components/motion/Reveal";
import { certifications } from "@/content/certifications";

/**
 * Compliance marks as a running ticker. Set as type rather than logo files, so
 * the site carries no artwork it does not own.
 */
export function CertificationBar() {
  return (
    <section className="relative border-y border-[var(--rule)] bg-[var(--ink)] py-14">
      <div className="shell">
        <Reveal direction="none">
          <p className="eyebrow flex items-center gap-3">
            <span className="h-px w-8 bg-[var(--thread)]" />
            Audited and certified
          </p>
        </Reveal>
      </div>

      <Marquee className="mt-8" speed={46}>
        {certifications.map((cert) => (
          <span
            key={cert.abbr}
            className="group flex shrink-0 items-baseline gap-3 border-l border-[var(--rule)] px-8"
          >
            <span className="font-display text-2xl text-[var(--cotton)] transition-colors duration-300 group-hover:text-[var(--thread)] md:text-3xl">
              {cert.abbr}
            </span>
            <span className="font-mono text-[10px] uppercase tracking-[0.18em] text-[var(--melange)]">
              {cert.scope}
            </span>
          </span>
        ))}
      </Marquee>

      <div className="shell mt-8">
        <Reveal delay={0.1}>
          <p className="max-w-2xl text-sm leading-relaxed text-[var(--melange)]">
            {certifications.map((c) => c.name).slice(0, 3).join(", ")} and six
            further standards cover the group's floors, fibre claims and labour
            practice. Certificates are available on request with any enquiry.
          </p>
        </Reveal>
      </div>
    </section>
  );
}