import { ImageResponse } from "next/og";

export const runtime = "edge";

// Image metadata
export const alt = "Gatekeeper Infrastructure Protection";
export const size = {
  width: 1200,
  height: 630,
};

export const contentType = "image/png";

export default async function Image() {
  const projectName = process.env.PROJECT_NAME || "MINTEL";

  return new ImageResponse(
    <div
      style={{
        background: "linear-gradient(to bottom, #020617, #0f172a)",
        width: "100%",
        height: "100%",
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        position: "relative",
        fontFamily: "Inter, sans-serif",
      }}
    >
      {/* Subtle Background Pattern matching the industrial look */}
      <div
        style={{
          position: "absolute",
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          backgroundImage:
            "radial-gradient(circle at 50% 50%, #334155 1px, transparent 1px)",
          backgroundSize: "40px 40px",
          opacity: 0.1,
        }}
      />

      {/* Central Card Element */}
      <div
        style={{
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          justifyContent: "center",
          background: "rgba(15, 23, 42, 0.6)",
          border: "1px solid rgba(51, 65, 85, 0.4)",
          borderRadius: "32px",
          padding: "80px",
          boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.5)",
        }}
      >
        {/* Top Icon Box */}
        <div
          style={{
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            width: "100px",
            height: "100px",
            background: "#000",
            borderRadius: "24px",
            border: "2px solid #334155",
            boxShadow: "0 20px 40px rgba(0,0,0,0.8)",
            marginBottom: "40px",
            transform: "rotate(2deg)",
          }}
        >
          <svg
            width="48"
            height="48"
            viewBox="0 0 24 24"
            fill="none"
            stroke="white"
            strokeWidth="1.5"
            strokeLinecap="round"
            strokeLinejoin="round"
          >
            <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
          </svg>
        </div>

        {/* Project Name & Typography */}
        <div
          style={{
            display: "flex",
            fontSize: "64px",
            fontWeight: 900,
            letterSpacing: "0.2em",
            color: "white",
            textTransform: "uppercase",
            marginBottom: "16px",
          }}
        >
          {projectName}{" "}
          <span style={{ color: "#64748b", marginLeft: "10px" }}>
            GATEKEEPER
          </span>
        </div>

        <div
          style={{
            display: "flex",
            fontSize: "24px",
            fontWeight: 600,
            letterSpacing: "0.4em",
            color: "#94a3b8",
            textTransform: "uppercase",
          }}
        >
          Infrastructure Protection
        </div>
      </div>
    </div>,
    {
      ...size,
    },
  );
}