import { ImageResponse } from "next/og";
import { BRAND_NAME, BRAND_TAGLINE } from "@/lib/brand";

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

export default function OpenGraphImage() {
  return new ImageResponse(
    (
      <div
        style={{
          background: "#f4f1ea",
          width: "100%",
          height: "100%",
          display: "flex",
          flexDirection: "column",
          justifyContent: "center",
          padding: 88,
        }}
      >
        <svg
          width="112"
          height="112"
          viewBox="0 0 32 32"
          fill="none"
        >
          <path d="M14 4H8a4 4 0 0 0-4 4v6M18 4h6a4 4 0 0 1 4 4v6M28 18v6a4 4 0 0 1-4 4h-6M14 28H8a4 4 0 0 1-4-4v-6" fill="none" stroke="#3156c8" strokeWidth="2.5" strokeLinecap="round" />
          <circle cx="21" cy="11" r="2" fill="#3156c8" />
          <path d="m8.5 22 5-6.2a1.7 1.7 0 0 1 2.6-.1l2.6 2.9 1.7-1.8a1.7 1.7 0 0 1 2.5 0l1.6 1.8" fill="none" stroke="#3156c8" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
        <div
          style={{
            marginTop: 36,
            fontSize: 92,
            lineHeight: 1,
            color: "#18181b",
            fontFamily: "Georgia, serif",
            fontWeight: 600,
            letterSpacing: -5,
          }}
        >
          {BRAND_NAME}
        </div>
        <div
          style={{
            marginTop: 18,
            fontSize: 28,
            maxWidth: 760,
            color: "#71717a",
            lineHeight: 1.25,
            letterSpacing: -1,
          }}
        >
          {BRAND_TAGLINE}
        </div>
      </div>
    ),
    size,
  );
}