import { Reveal, SectionHeading } from "./reveal";

const partners = [
  { name: "Cisco", color: "#1BA0D7", tagline: "Gold Integrator" },
  { name: "EMC", color: "#0057FF", tagline: "Storage Specialist" },
  { name: "VMware", color: "#607078", tagline: "Principal Partner" },
];

export function Partners() {
  return (
    <section className="bg-mist py-24 sm:py-28">
      <div className="mx-auto max-w-7xl px-5">
        <SectionHeading
          eyebrow="Technology Partners"
          title="Certified with the platforms enterprises trust"
        />

        <div className="mt-12 grid gap-6 sm:grid-cols-3">
          {partners.map((p, i) => (
            <Reveal key={p.name} delay={i * 120}>
              <div
                className="card-lift animate-float group grid place-items-center gap-3 rounded-[1.25rem] border border-border bg-surface px-8 py-12 shadow-[var(--shadow-soft)]"
                style={{ animationDelay: `${i * 1.2}s` }}
              >
                <span
                  className="font-[family-name:var(--font-display)] text-3xl font-extrabold tracking-tight text-muted-foreground/60 transition-colors duration-500 group-hover:[color:var(--logo-color)]"
                  style={{ ["--logo-color" as string]: p.color }}
                >
                  {p.name}
                </span>
                <span className="text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground">
                  {p.tagline}
                </span>
              </div>
            </Reveal>
          ))}
        </div>

        <div className="mt-12 overflow-hidden [mask-image:linear-gradient(90deg,transparent,black_12%,black_88%,transparent)]">
          <div className="animate-marquee flex w-max gap-14 opacity-45">
            {[...Array(2)].map((_, dup) => (
              <div key={dup} className="flex gap-14">
                {["Cisco", "EMC", "VMware", "Microsoft Azure", "Fortinet", "NetApp", "Citrix", "Juniper"].map(
                  (n) => (
                    <span
                      key={n + dup}
                      className="font-[family-name:var(--font-display)] text-lg font-semibold whitespace-nowrap text-navy"
                    >
                      {n}
                    </span>
                  ),
                )}
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}