import { ImageResponse } from "next/og"

export const alt = "Property Management Network — property management without the chaos"
export const size = { width: 1200, height: 630 }
export const contentType = "image/png"

export default function OpengraphImage() {
  return new ImageResponse(
    (
      <div
        style={{
          display: "flex",
          flexDirection: "column",
          justifyContent: "center",
          width: "100%",
          height: "100%",
          padding: "80px",
          background: "#09090b",
          backgroundImage:
            "radial-gradient(1000px circle at 30% 0%, rgba(99, 102, 241, 0.28), rgba(9, 9, 11, 0) 55%), radial-gradient(900px circle at 90% 100%, rgba(139, 92, 246, 0.18), rgba(9, 9, 11, 0) 55%)",
          color: "white",
          fontFamily: "sans-serif",
        }}
      >
        <div
          style={{
            display: "flex",
            alignItems: "center",
            gap: "14px",
            marginBottom: "44px",
          }}
        >
          <div
            style={{
              display: "flex",
              width: "16px",
              height: "16px",
              borderRadius: "9999px",
              background: "#6366f1",
            }}
          />
          <div
            style={{
              fontSize: "26px",
              fontWeight: 600,
              letterSpacing: "0.02em",
              color: "rgba(255, 255, 255, 0.9)",
            }}
          >
            Property Management Network
          </div>
        </div>

        <div
          style={{
            display: "flex",
            fontSize: "84px",
            fontWeight: 800,
            lineHeight: 1.05,
            letterSpacing: "-0.02em",
            maxWidth: "980px",
          }}
        >
          Property management without the chaos
        </div>

        <div
          style={{
            display: "flex",
            marginTop: "36px",
            fontSize: "32px",
            fontWeight: 400,
            lineHeight: 1.35,
            color: "rgba(255, 255, 255, 0.6)",
            maxWidth: "900px",
          }}
        >
          Track rent, maintenance, leases &amp; expenses — built for independent
          landlords.
        </div>
      </div>
    ),
    { ...size },
  )
}