puzzle-trainer/app/opengraph-image.tsx

import { ImageResponse } from "next/og";

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

const GAMES = [
  { label: "Q", color: "#d97706" },
  { label: "T", color: "#ea580c" },
  { label: "Z", color: "#2563eb" },
  { label: "S", color: "#16a34a" },
  { label: "P", color: "#7c3aed" },
];

export default function OGImage() {
  return new ImageResponse(
    (
      <div
        style={{
          width: "100%",
          height: "100%",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          justifyContent: "center",
          background: "linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%)",
          fontFamily: "system-ui, -apple-system, sans-serif",
        }}
      >
        <div style={{ display: "flex", gap: 24, marginBottom: 40 }}>
          {GAMES.map((g) => (
            <div
              key={g.label}
              style={{
                width: 72,
                height: 72,
                background: g.color,
                borderRadius: 16,
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                fontSize: 32,
                fontWeight: 700,
                color: "#ffffff",
              }}
            >
              {g.label}
            </div>
          ))}
        </div>
        <div style={{ fontSize: 72, fontWeight: 700, color: "#111827", letterSpacing: -2 }}>
          Puzzle Trainer
        </div>
        <div style={{ fontSize: 28, color: "#6b7280", marginTop: 16 }}>
          5 puzzles logiques · chaque jour
        </div>
        <div
          style={{
            position: "absolute",
            bottom: 40,
            fontSize: 20,
            color: "#9ca3af",
          }}
        >
          puzzles.reverdin.eu
        </div>
      </div>
    ),
    { ...size }
  );
}