import { ImageResponse } from "next/og";

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

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",
        }}
      >
        {/* Game icons row */}
        <div style={{ display: "flex", gap: 24, marginBottom: 40 }}>
          {["♛", "☀", "∞", "#", "▦"].map((icon, i) => (
            <div
              key={i}
              style={{
                width: 72,
                height: 72,
                background: "#111827",
                borderRadius: 16,
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                fontSize: 32,
                color: "#f9fafb",
              }}
            >
              {icon}
            </div>
          ))}
        </div>

        {/* Title */}
        <div style={{ fontSize: 72, fontWeight: 700, color: "#111827", letterSpacing: -2 }}>
          Puzzle Trainer
        </div>

        {/* Tagline */}
        <div style={{ fontSize: 28, color: "#6b7280", marginTop: 16 }}>
          5 puzzles logiques · chaque jour
        </div>

        {/* URL */}
        <div
          style={{
            position: "absolute",
            bottom: 40,
            fontSize: 20,
            color: "#9ca3af",
          }}
        >
          puzzles.reverdin.eu
        </div>
      </div>
    ),
    { ...size }
  );
}