import Image from "next/image";
import { Container } from "@/components/Container";
import { Button } from "@/components/Button";
import { getViewer } from "@/lib/auth/viewer";

/**
 * Closing CTA band. Deep-ink background with a blue radial glow so it reads
 * as a distinct endpoint for the page. Primary action is the membership
 * application form at /join.
 *
 * Hidden for signed-in members — they're already in the collaborative, so
 * the join pitch would just clutter their homepage.
 */
export async function MembershipCtaSection() {
  const viewer = await getViewer();
  if (viewer.signedIn) return null;
  return (
    <section className="relative isolate overflow-hidden bg-[var(--color-ink)] py-12 text-white md:py-16">
      <Image
        src="/photos/global-health/idf-nairobi.jpg"
        alt="International surgical team collaborating in a hospital setting"
        fill
        sizes="100vw"
        className="pointer-events-none absolute inset-0 -z-20 object-cover opacity-[0.22]"
        aria-hidden
      />
      <div
        aria-hidden
        className="pointer-events-none absolute inset-0 -z-10 bg-[linear-gradient(to_bottom,rgba(10,14,40,0.82),rgba(10,14,40,0.92))]"
      />
      <div
        aria-hidden
        className="pointer-events-none absolute inset-0 -z-10 bg-[radial-gradient(ellipse_at_top_right,rgba(30,64,255,0.35),transparent_60%),radial-gradient(ellipse_at_bottom_left,rgba(30,64,255,0.18),transparent_55%)]"
      />
      <div
        aria-hidden
        className="pointer-events-none absolute inset-x-0 top-0 -z-10 h-px bg-[linear-gradient(to_right,transparent,rgba(255,255,255,0.25),transparent)]"
      />
      <Container>
        <div className="mx-auto max-w-3xl text-center">
          <div className="text-[11px] font-bold uppercase tracking-[0.18em] text-[#9fb2ff]">
            Membership
          </div>
          <h2 className="mt-4 font-display text-[40px] md:text-[56px] font-extrabold leading-[1.05] tracking-[-0.02em]">
            Join the collaboration.
          </h2>
          <p className="mt-6 text-[18px] md:text-[19px] leading-relaxed text-white/70">
            Membership is reviewed individually by practising orthopaedic
            surgeons. We welcome consultants, trainees, researchers, and
            students worldwide. Applications are typically answered within
            72 hours.
          </p>
          <div className="mt-10 flex flex-wrap items-center justify-center gap-4">
            <Button href="/join" variant="on-blue">
              Join OrthoGlobe
            </Button>
            <Button href="/about" variant="ghost" className="!border-white/30 !text-white hover:!text-white hover:!border-white">
              About the collaboration
            </Button>
          </div>
        </div>
      </Container>
    </section>
  );
}
