highland_games_website/app/studio/page.tsx

import Image from "next/image";
import type { Metadata } from "next";

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

const values = [
  {
    index: "01",
    title: "CRAFT",
    body: "Every system, asset and line of dialogue is touched by hand. No shortcuts on what matters.",
  },
  {
    index: "02",
    title: "SURVIVE",
    body: "We love the genre. The tension between scarcity and discovery is at the core of every game we make.",
  },
  {
    index: "03",
    title: "WONDER",
    body: "A summit isn't the end of the climb — it's the start of a new world. We design for that feeling.",
  },
];

const team = [
  {
    name: "Founder One",
    role: "Co-founder · Programming · Design",
    bio: "Builds the systems, gameplay loops and tools that bring our worlds to life.",
    photo: "/image/teams/CEO_Dev.jpg",
  },
  {
    name: "Founder Two",
    role: "Co-founder · Art · Design",
    bio: "Shapes the visual identity, environments and feel of every Highland Games world.",
    photo: null,
  },
];

export default function StudioPage() {
  return (
    <div className="pt-32 pb-24 px-6 lg:px-10">
      {/* HERO */}
      <div className="max-w-4xl mx-auto">
        <p className="font-display text-sm tracking-[0.3em] text-accent mb-4">
          — THE STUDIO
        </p>
        <h1 className="font-display text-5xl sm:text-6xl lg:text-7xl tracking-wider leading-[0.95] mb-8">
          A SMALL TEAM,
          <br />
          BIG HORIZONS.
        </h1>
        <p className="text-lg text-foreground-muted leading-relaxed max-w-2xl">
          Highland Games Studio is an independent game studio of two friends
          building survival worlds we&apos;d want to lose ourselves in. We
          believe small teams can craft big experiences, where every detail is
          made by someone who cares.
        </p>
      </div>

      {/* VALUES */}
      <section className="max-w-4xl mx-auto mt-24 grid md:grid-cols-3 gap-6">
        {values.map((v) => (
          <div
            key={v.index}
            className="group relative rounded-3xl border border-border bg-surface/60 p-8 transition-all duration-300 hover:-translate-y-1 hover:border-accent/60 hover:bg-surface"
          >
            <div className="mb-5 flex h-12 w-12 items-center justify-center rounded-2xl border border-border bg-surface-elevated font-display text-sm tracking-[0.2em] text-accent transition-colors duration-300 group-hover:border-accent/50">
              {v.index}
            </div>
            <h3 className="font-display text-2xl tracking-wider mb-3">
              {v.title}
            </h3>
            <p className="text-sm text-foreground-muted leading-relaxed">
              {v.body}
            </p>
          </div>
        ))}
      </section>

      {/* TEAM */}
      <section className="max-w-4xl mx-auto mt-28">
        <div className="mb-12 text-center">
          <p className="font-display text-sm tracking-[0.3em] text-accent mb-4">
            — THE PEOPLE
          </p>
          <h2 className="font-display text-4xl sm:text-5xl tracking-wider">
            THE TEAM
          </h2>
        </div>

        <div className="grid sm:grid-cols-2 gap-8">
          {team.map((m) => (
            <div
              key={m.name}
              className="group relative flex flex-col items-center rounded-[2rem] border border-border bg-surface/60 px-8 py-10 text-center transition-all duration-300 hover:-translate-y-1 hover:border-accent/60 hover:bg-surface"
            >
              {/* Avatar */}
              <div className="relative mb-6">
                <div
                  aria-hidden
                  className="absolute -inset-1 rounded-full bg-gradient-to-b from-accent/40 to-transparent opacity-0 blur-md transition-opacity duration-300 group-hover:opacity-100"
                />
                <div className="relative h-32 w-32 overflow-hidden rounded-full border border-border bg-surface-elevated ring-2 ring-transparent transition-all duration-300 group-hover:ring-accent/40">
                  {m.photo ? (
                    <Image
                      src={m.photo}
                      alt={m.name}
                      width={128}
                      height={128}
                      className="h-full w-full object-cover"
                    />
                  ) : (
                    <div className="flex h-full w-full items-center justify-center">
                      <Image
                        src="/image/Studio/Logo Flat.png"
                        alt=""
                        width={56}
                        height={40}
                        className="opacity-30"
                      />
                    </div>
                  )}
                </div>
              </div>

              <h3 className="font-display text-2xl tracking-wider mb-2">
                {m.name}
              </h3>
              <p className="text-xs tracking-widest text-accent mb-4 uppercase">
                {m.role}
              </p>
              <p className="text-sm text-foreground-muted leading-relaxed max-w-xs">
                {m.bio}
              </p>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}