import { ImageResponse } from "next/og";

export const runtime = "edge";
export const alt = "Highland Games Studio — Where summits become worlds";
export const size = { width: 1200, height: 630 };
export const contentType = "image/png";

export default async function OpengraphImage() {
  return new ImageResponse(
    (
      <div
        style={{
          width: "100%",
          height: "100%",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          justifyContent: "center",
          background:
            "radial-gradient(ellipse at 50% 60%, rgba(196,184,150,0.12) 0%, #0a0a0a 60%)",
          color: "#e8dfcc",
          fontFamily: "sans-serif",
          padding: 80,
        }}
      >
        <div
          style={{
            fontSize: 24,
            letterSpacing: 12,
            color: "#c4b896",
            marginBottom: 32,
            display: "flex",
          }}
        >
          — HIGHLAND GAMES STUDIO
        </div>

        <div
          style={{
            fontSize: 120,
            fontWeight: 800,
            letterSpacing: 4,
            lineHeight: 1,
            textAlign: "center",
            display: "flex",
            flexDirection: "column",
          }}
        >
          <span>WHERE SUMMITS</span>
          <span style={{ color: "#c4b896" }}>BECOME WORLDS.</span>
        </div>

        <div
          style={{
            marginTop: 48,
            fontSize: 28,
            color: "#a89e8a",
            display: "flex",
          }}
        >
          Indie survival adventures.
        </div>
      </div>
    ),
    { ...size }
  );
}