import Image from "next/image";
import Link from "next/link";
import type { Metadata } from "next";
import { PageHero, SiteShell } from "@/components/SiteShell";
import { resolveImageUrl, serverFetch } from "@/lib/api";

type TeamMember = {
  id: number;
  photo?: string | null;
  name: string;
  position: string;
  description: string;
  sort_order: number;
};

async function getTeam(): Promise<TeamMember[]> {
  const data = await serverFetch<TeamMember[]>("/team", 60);
  return data ?? [];
}

export const metadata: Metadata = {
  title: "Our Team",
  description: "Meet the dedicated team behind Shanti Kritnischay Seva Foundation, working for change in Jharkhand.",
};

export default async function TeamPage() {
  const members = await getTeam();

  return (
    <SiteShell>
      

      <section className="bg-white py-16 md:py-24">
        <div className="mx-auto max-w-[1280px] px-4 lg:px-6">
          {members.length === 0 ? (
            <div className="py-20 text-center">
              <p className="text-[var(--color-ink-mute)]">No team members found.</p>
            </div>
          ) : (
            <div className="divide-y divide-[var(--color-hairline-cool)] rounded-[12px] border border-[var(--color-hairline)] bg-white shadow-[var(--shadow-l1)]">
              {members.map((member, i) => {
                const photoSrc = resolveImageUrl(member.photo);
                return (
                  <div key={member.id} className={`group flex flex-col gap-6 p-8 sm:flex-row sm:items-center md:p-10 ${i === 0 ? "" : ""}`}>
                    <div className="shrink-0">
                      <div className="mx-auto flex h-20 w-20 items-center justify-center overflow-hidden rounded-full border border-[var(--color-hairline-cool)] bg-[var(--color-canvas-soft)] transition-transform duration-300 group-hover:scale-105 sm:mx-0">
                        {photoSrc ? (
                          <Image src={photoSrc} alt={member.name} width={80} height={80} className="h-full w-full object-cover" loading="lazy" />
                        ) : (
                          <div className="flex h-full w-full items-center justify-center text-2xl text-[var(--color-ink)]" style={{ fontWeight: 500 }}>
                            {member.name?.charAt(0) || "T"}
                          </div>
                        )}
                      </div>
                    </div>
                    <div className="min-w-0 flex-1 text-center sm:text-left">
                      <div className="flex flex-col items-center gap-2 sm:flex-row sm:items-center sm:gap-4">
                        <h2 className="text-2xl text-[var(--color-ink)]" style={{ fontWeight: 500 }}>{member.name}</h2>
                        <span className="badge-soft">{member.position}</span>
                      </div>
                      {member.description && (
                        <p className="mt-3 max-w-2xl leading-7 text-[var(--color-ink-mute)]">{member.description}</p>
                      )}
                    </div>
                  </div>
                );
              })}
            </div>
          )}
        </div>
      </section>

      <section className="border-t border-[var(--color-hairline-cool)] bg-[var(--color-canvas-soft)] py-16 md:py-24">
        <div className="mx-auto max-w-[1280px] px-4 lg:px-6">
          <div className="rounded-[12px] border border-[var(--color-hairline)] bg-white p-10 text-center shadow-[var(--shadow-l1)] md:p-16">
            <span className="eyebrow">
              <span className="eyebrow-dot" />
              Get Involved
            </span>
            <h2 className="mt-5 text-3xl leading-[1.1] tracking-[-0.02em] text-[var(--color-ink)] md:text-5xl" style={{ fontWeight: 500 }}>
              Want to Join Our Team?
            </h2>
            <p className="mx-auto mt-4 max-w-2xl text-lg leading-7 text-[var(--color-ink-mute)]">
              We&apos;re always looking for passionate individuals who want to make a real difference in the community.
            </p>
            <div className="mt-9 flex flex-col justify-center gap-3 sm:flex-row">
              <Link href="/membership/volunteer" className="btn">
                Become a Volunteer
              </Link>
              <Link href="/contact" className="btn-outline">
                Contact Us
              </Link>
            </div>
          </div>
        </div>
      </section>
    </SiteShell>
  );
}