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

export function SponsorTiers() {
  return (
    <Section id="partners">
      <TopoProseSurface className="mx-auto max-w-3xl text-center">
        <p className="text-xs font-semibold uppercase tracking-widest text-[#ffb300]">
          Partners
        </p>
        <h2 className="mt-2 text-3xl font-bold text-[#0d3d26] md:text-4xl">
          Partners &amp; sponsors
        </h2>
        <p className="mt-3 text-[#3d5248]">
          Logo slots below are open — partner with GRV Summit and feature your brand here.
        </p>
      </TopoProseSurface>
      <div className="mt-12 space-y-12">
        {partnerTiers.slice(0, 2).map((tier) => (
          <div key={tier.id}>
            <Separator className="mb-6" />
            <h3 className="text-center text-sm font-semibold uppercase tracking-wider text-[#1a5c38]">
              {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"
                  className="border-[#1a5c38]/20 bg-[#f0f5f2] text-[#1a5c38]/50"
                />
              ))}
            </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>
  );
}