import { ArrowUpRight } from "lucide-react";
import { Container } from "@/components/Container";
import { partners } from "@/lib/site-config";

export function PartnersStrip() {
  return (
    <section className="border-t border-[var(--color-line)] bg-white py-14 md:py-20">
      <Container>
        <div className="flex flex-wrap items-end justify-between gap-6">
          <div className="max-w-xl">
            <div className="text-[11px] font-bold uppercase tracking-wider text-[var(--color-blue)]">
              Partners
            </div>
            <h2 className="mt-3 font-display text-[28px] md:text-[36px] font-extrabold leading-tight tracking-[-0.02em] text-[var(--color-ink)]">
              Clinical and education partners.
            </h2>
            <p className="mt-3 text-[15px] leading-relaxed text-[var(--color-slate)]">
              OrthoGlobe collaborates with clinical practices and education programmes
              that share its commitment to evidence-based orthopaedic care.
            </p>
          </div>
        </div>
        <ul className="mt-10 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
          {partners.map((p) => (
            <li key={p.href}>
              <a
                href={p.href}
                target="_blank"
                rel="noopener noreferrer"
                className="group flex h-full flex-col justify-between rounded-2xl border border-[var(--color-line)] bg-white p-6 transition-all duration-200 hover:-translate-y-0.5 hover:border-[var(--color-blue)] hover:shadow-[0_16px_40px_rgba(30,64,255,0.10)]"
              >
                <div>
                  <div className="font-display text-[18px] font-extrabold tracking-tight text-[var(--color-ink)] group-hover:text-[var(--color-blue)]">
                    {p.name}
                  </div>
                  <p className="mt-2 text-[13px] leading-relaxed text-[var(--color-slate)]">
                    {p.blurb}
                  </p>
                </div>
                <div className="mt-6 inline-flex items-center gap-1.5 text-[12px] font-semibold text-[var(--color-blue)]">
                  Visit site
                  <ArrowUpRight className="h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
                </div>
              </a>
            </li>
          ))}
        </ul>
      </Container>
    </section>
  );
}
