import { ImageResponse } from "next/og";

export const alt = "OrthoGlobe — International Orthopaedic Charity Collaboration";
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",
          background: "#ffffff",
          padding: "80px",
          fontFamily: "sans-serif",
        }}
      >
        <div style={{ display: "flex", alignItems: "center", gap: "20px" }}>
          <div
            style={{
              width: "24px",
              height: "24px",
              borderRadius: "6px",
              background: "#1e40ff",
            }}
          />
          <div
            style={{
              fontSize: "28px",
              fontWeight: 700,
              color: "#0b1220",
              letterSpacing: "-0.01em",
            }}
          >
            OrthoGlobe
          </div>
        </div>

        <div style={{ display: "flex", flexDirection: "column", gap: "24px" }}>
          <div
            style={{
              fontSize: "72px",
              fontWeight: 800,
              color: "#0b1220",
              lineHeight: 1.05,
              letterSpacing: "-0.03em",
              maxWidth: "960px",
            }}
          >
            International Orthopaedic Charity Collaboration.
          </div>
          <div
            style={{
              fontSize: "28px",
              color: "#475569",
              lineHeight: 1.4,
              maxWidth: "900px",
            }}
          >
            Tools, atlases, and education built by surgeons for surgeons worldwide.
          </div>
        </div>

        <div
          style={{
            display: "flex",
            alignItems: "center",
            justifyContent: "space-between",
            borderTop: "2px solid #1e40ff",
            paddingTop: "24px",
          }}
        >
          <div style={{ fontSize: "22px", color: "#0b1220", fontWeight: 600 }}>
            orthoglobe.org
          </div>
          <div style={{ fontSize: "20px", color: "#475569" }}>
            London · International
          </div>
        </div>
      </div>
    ),
    { ...size }
  );
}
