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 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">
      <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>

      {/* MISSION */}
      <section className="max-w-4xl mx-auto mt-24 grid md:grid-cols-3 gap-8">
        <div className="border border-border p-8">
          <p className="font-display text-xs tracking-[0.3em] text-accent mb-4">
            01
          </p>
          <h3 className="font-display text-2xl tracking-wider mb-3">
            CRAFT
          </h3>
          <p className="text-sm text-foreground-muted leading-relaxed">
            Every system, asset and line of dialogue is touched by hand. No
            shortcuts on what matters.
          </p>
        </div>
        <div className="border border-border p-8">
          <p className="font-display text-xs tracking-[0.3em] text-accent mb-4">
            02
          </p>
          <h3 className="font-display text-2xl tracking-wider mb-3">
            SURVIVE
          </h3>
          <p className="text-sm text-foreground-muted leading-relaxed">
            We love the genre. The tension between scarcity and discovery is at
            the core of every game we make.
          </p>
        </div>
        <div className="border border-border p-8">
          <p className="font-display text-xs tracking-[0.3em] text-accent mb-4">
            03
          </p>
          <h3 className="font-display text-2xl tracking-wider mb-3">
            WONDER
          </h3>
          <p className="text-sm text-foreground-muted leading-relaxed">
            A summit isn&apos;t the end of the climb — it&apos;s the start of a
            new world. We design for that feeling.
          </p>
        </div>
      </section>

      {/* TEAM */}
      <section className="max-w-4xl mx-auto mt-24">
        <h2 className="font-display text-3xl sm:text-4xl tracking-wider mb-12">
          THE CLIMBERS
        </h2>
        <div className="grid sm:grid-cols-2 gap-8">
          {team.map((m) => (
            <div key={m.name} className="border border-border p-8 bg-surface">
              <div className="w-20 h-20 bg-surface-elevated border border-border flex items-center justify-center mb-6 overflow-hidden">
                {m.photo ? (
                  <Image
                    src={m.photo}
                    alt={m.name}
                    width={80}
                    height={80}
                    className="w-full h-full object-cover"
                  />
                ) : (
                  <Image
                    src="/image/Studio/Logo Flat.png"
                    alt=""
                    width={40}
                    height={28}
                    className="opacity-40"
                  />
                )}
              </div>
              <h3 className="font-display text-2xl tracking-wider mb-1">
                {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">
                {m.bio}
              </p>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}