import { ImageResponse } from "next/og";

export const alt = "ElevaSEO";
export const size = { width: 1200, height: 630 };
export const contentType = "image/png";

export default async function Image({
  params,
}: {
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;

  const tagline =
    locale === "fr"
      ? "Architecture Headless & Performance Web"
      : "Headless Architecture & Web Performance";

  return new ImageResponse(
    <div
      style={{
        width: "100%",
        height: "100%",
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "center",
        background: "linear-gradient(135deg, #000000 0%, #1A2428 100%)",
        padding: "60px",
      }}
    >
      {/* Accent line */}
      <div
        style={{
          width: 80,
          height: 4,
          background: "#FD105E",
          marginBottom: 40,
          borderRadius: 2,
        }}
      />

      {/* Logo text */}
      <div
        style={{
          fontSize: 72,
          fontWeight: 700,
          background: "linear-gradient(90deg, #FFFFFF, #FD105E)",
          backgroundClip: "text",
          color: "transparent",
          marginBottom: 24,
        }}
      >
        ElevaSEO
      </div>

      {/* Tagline */}
      <div
        style={{
          fontSize: 28,
          color: "#A3A3A3",
          textAlign: "center",
        }}
      >
        {tagline}
      </div>

      {/* Bottom accent */}
      <div
        style={{
          position: "absolute",
          bottom: 40,
          display: "flex",
          alignItems: "center",
          gap: 8,
        }}
      >
        <div
          style={{
            width: 8,
            height: 8,
            borderRadius: 4,
            background: "#FD105E",
          }}
        />
        <div style={{ fontSize: 16, color: "#737373" }}>www.elevaseo.com</div>
      </div>
    </div>,
    { ...size }
  );
}