import Link from "next/link";
import { partnerTiers } from "@/content/partners";
import { PartnerLogoPlaceholder } from "@/components/brand/PartnerLogoPlaceholder";
import { Section } from "@/components/layout/Section";
import { Separator } from "@/components/ui/separator";
import { Button } from "@/components/ui/button";

export function SponsorTiers() {
  return (
    <Section variant="muted" id="partners">
      <h2 className="text-center text-3xl font-bold text-white">Partners & sponsors</h2>
      <p className="mx-auto mt-3 max-w-xl text-center text-white/80">
        Logo slots below are open — partner with GRV Summit and feature your brand here.
      </p>
      <div className="mt-12 space-y-12">
        {partnerTiers.slice(0, 2).map((tier) => (
          <div key={tier.id}>
            <Separator className="mb-6 bg-white/20" />
            <h3 className="text-center text-sm font-semibold uppercase tracking-wider text-[#ffb300]">
              {tier.name}
            </h3>
            <div className="mt-6 flex flex-wrap items-center justify-center gap-6">
              {tier.partners.map((p, i) => (
                <PartnerLogoPlaceholder key={`${tier.id}-${i}`} size="md" />
              ))}
            </div>
          </div>
        ))}
      </div>
      <div className="mt-10 text-center">
        <Button className="rounded-full bg-[#ffb300] text-[#0f0404] hover:bg-[#ffb300]/90" asChild>
          <Link href="/partners">Become a partner</Link>
        </Button>
      </div>
    </Section>
  );
}
