import { ImageResponse } from "next/og";

import { siteConfig } from "@/config/site";

/**
 * Default Open Graph card for the whole site.
 *
 * `app/opengraph-image.tsx` is a file convention, so Next wires the resulting
 * route into every page's `openGraph.images` automatically — no per-page
 * plumbing and no missing-card edge case.
 *
 * No custom font is registered: `ImageResponse` ships with a usable default, and
 * fetching a font at request time would make a cold render depend on a third
 * party. The wordmark is styled with letter-spacing instead.
 */

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

export default function OpengraphImage() {
  return new ImageResponse(
    (
      <div
        style={{
          width: "100%",
          height: "100%",
          display: "flex",
          flexDirection: "column",
          justifyContent: "space-between",
          padding: 72,
          backgroundColor: "#0a0a0c",
          backgroundImage:
            "radial-gradient(circle at 22% 8%, rgba(229,9,20,0.38) 0%, rgba(10,10,12,0) 55%)",
        }}
      >
        <div style={{ display: "flex", alignItems: "center", gap: 18 }}>
          <div
            style={{
              width: 14,
              height: 56,
              borderRadius: 999,
              backgroundColor: "#e50914",
            }}
          />
          <div
            style={{
              fontSize: 54,
              fontWeight: 800,
              color: "#ffffff",
              letterSpacing: "-0.02em",
            }}
          >
            {siteConfig.name}
          </div>
        </div>

        <div style={{ display: "flex", flexDirection: "column" }}>
          <div
            style={{
              fontSize: 82,
              fontWeight: 800,
              color: "#ffffff",
              letterSpacing: "-0.03em",
              lineHeight: 1.05,
            }}
          >
            {siteConfig.tagline}
          </div>
          <div
            style={{
              marginTop: 20,
              fontSize: 30,
              color: "rgba(255,255,255,0.62)",
              lineHeight: 1.4,
              maxWidth: 880,
            }}
          >
            Movies, series and anime — trending titles, curated rows and instant search.
          </div>
        </div>
      </div>
    ),
    size,
  );
}