import { ImageResponse } from "next/og";
import { loadSiteOgFonts } from "@/lib/og-fonts";

export const alt =
  "KolayTercih — YKS tercihin, gerçek YÖK Atlas verisiyle. Sıralamanı gir, dengeli 24 tercihlik listeni al.";
export const size = { width: 1200, height: 630 };
export const contentType = "image/png";

export default async function OpenGraphImage() {
  const fonts = await loadSiteOgFonts();

  return new ImageResponse(
    (
      <div
        style={{
          display: "flex",
          width: "100%",
          height: "100%",
          alignItems: "center",
          justifyContent: "center",
          background: "white",
        }}
      >
        <div
          style={{
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
            maxWidth: 920,
            padding: "0 48px",
          }}
        >
          <div
            style={{
              display: "flex",
              alignItems: "center",
              fontFamily: "Bricolage Grotesque",
              letterSpacing: "-0.05em",
              color: "#0f172a",
            }}
          >
            <svg
              width="64"
              height="64"
              viewBox="0 0 180 180"
              style={{ display: "flex", marginRight: 4 }}
            >
              <rect x="27" y="56" width="57" height="57" rx="13" fill="#3b82f6" />
              <rect x="91" y="29" width="56" height="56" rx="13" fill="#fdc7a7" />
              <rect x="91" y="95" width="56" height="56" rx="13" fill="#ff5a00" />
            </svg>
            <span style={{ display: "flex", fontSize: 72, lineHeight: 1 }}>
              <span style={{ fontWeight: 300 }}>Kolay</span>
              <span style={{ fontWeight: 600 }}>Tercih</span>
            </span>
          </div>

          <div
            style={{
              display: "flex",
              marginTop: 28,
              fontFamily: "Clarity City",
              fontSize: 34,
              fontWeight: 600,
              lineHeight: 1.25,
              textAlign: "center",
              color: "#1e293b",
            }}
          >
            YKS tercihin, gerçek YÖK Atlas verisiyle
          </div>

          <div
            style={{
              display: "flex",
              marginTop: 16,
              fontFamily: "Clarity City",
              fontSize: 26,
              fontWeight: 300,
              lineHeight: 1.3,
              textAlign: "center",
              color: "#64748b",
            }}
          >
            Sıralamanı gir · Dengeli 24 tercihlik listeni al
          </div>
        </div>
      </div>
    ),
    { ...size, fonts },
  );
}