import Image from "next/image";
import type { Metadata } from "next";
import { PageHeader } from "../components/ui/PageHeader";
import { Section } from "../components/ui/Section";
import { SectionHeading } from "../components/ui/SectionHeading";
import { ButtonLink } from "../components/ui/ButtonLink";
import { Logo } from "../components/ui/Logo";
import { Spotlight } from "../components/ui/Spotlight";
import { Stagger, StaggerItem } from "../components/ui/Stagger";
import { TEAM } from "@/lib/studio";

export const metadata: Metadata = {
  title: "Studio",
  description:
    "Highland Games Studio is a small indie team crafting survival adventures.",
};

export default function StudioPage() {
  return (
    <>
      <PageHeader
        eyebrow="THE STUDIO"
        width="narrow"
        title={
          <>
            A SMALL TEAM,
            <br />
            BIG HORIZONS.
          </>
        }
        lead="Highland Games Studio is an independent game studio building survival worlds we'd want to lose ourselves in. We believe small teams can craft big experiences, where every detail is made by someone who cares."
      />

      <Section divider>
        <SectionHeading eyebrow="THE PEOPLE" title="THE TEAM" align="center" />

        <Stagger
          as="ul"
          step={0.1}
          className="mt-14 grid gap-8 sm:grid-cols-2 lg:grid-cols-3"
        >
          {TEAM.map((member) => (
            <StaggerItem as="li" key={member.name}>
              <article className="group relative flex h-full flex-col items-center overflow-hidden border border-border bg-surface px-8 py-10 text-center transition duration-300 ease-out hover:-translate-y-1 hover:border-accent/60 hover:shadow-[0_24px_50px_-30px_rgba(0,0,0,0.9)]">
                <div className="relative mb-6 h-32 w-32 overflow-hidden rounded-full border border-border bg-surface-elevated transition-colors duration-300 group-hover:border-accent/50">
                  {member.photo ? (
                    <Image
                      src={member.photo}
                      alt={member.name}
                      fill
                      sizes="128px"
                      className="object-cover transition-transform duration-700 ease-out group-hover:scale-110"
                    />
                  ) : (
                    <div className="flex h-full w-full items-center justify-center">
                      <Logo
                        width={64}
                        className="opacity-25 transition-opacity duration-500 group-hover:opacity-40"
                      />
                    </div>
                  )}
                </div>

                <h3 className="mb-2 font-display text-2xl tracking-wider transition-colors duration-300 group-hover:text-accent">
                  {member.name}
                </h3>
                {/* Each segment is its own non-breaking span: the line now
                    wraps on three cards out of three, and left to itself the
                    browser would break "Co-founder" at its hyphen. */}
                <p className="mb-4 flex flex-wrap justify-center gap-x-2 text-xs uppercase tracking-widest text-accent">
                  {member.role.split(" · ").map((part, index) => (
                    <span key={part} className="whitespace-nowrap">
                      {index > 0 && (
                        <span aria-hidden className="mr-2 text-accent/40">
                          ·
                        </span>
                      )}
                      {part}
                    </span>
                  ))}
                </p>
                <p className="text-sm leading-relaxed text-foreground-muted">
                  {member.bio}
                </p>

                <Spotlight />
              </article>
            </StaggerItem>
          ))}
        </Stagger>
      </Section>

      <Section divider width="narrow">
        <SectionHeading
          eyebrow="WORK WITH US"
          title="LET'S TALK"
          lead="Press, publishing, or simply curious about what we're building. The door is open."
          align="center"
        />
        <div className="mt-10 flex justify-center">
          <ButtonLink href="/contact">GET IN TOUCH</ButtonLink>
        </div>
      </Section>
    </>
  );
}