mb-grid-solutions.com/app/[locale]/opengraph-image.tsx

import { ImageResponse } from "next/og";

export const runtime = "edge";

export const alt =
  "MB Grid Solutions | Energiekabelprojekte & Technische Beratung";
export const size = {
  width: 1200,
  height: 630,
};

export const contentType = "image/png";

export default async function Image() {
  return new ImageResponse(
    <div
      style={{
        background: "#ffffff",
        width: "100%",
        height: "100%",
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        position: "relative",
        fontFamily: "sans-serif",
      }}
    >
      {/* Grid Pattern Background - matching .grid-pattern in globals.css */}
      <div
        style={{
          position: "absolute",
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          backgroundImage:
            "radial-gradient(circle, #e2e8f0 1.5px, transparent 1.5px)",
          backgroundSize: "40px 40px",
          zIndex: 0,
        }}
      />

      {/* Content Container - matching .card-modern / .glass-panel style */}
      <div
        style={{
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          justifyContent: "center",
          backgroundColor: "rgba(255, 255, 255, 0.95)",
          padding: "60px 80px",
          borderRadius: "48px",
          border: "1px solid #e2e8f0",
          boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.1)",
          zIndex: 1,
          position: "relative",
        }}
      >
        {/* Engineering Excellence Badge */}
        <div
          style={{
            display: "flex",
            alignItems: "center",
            gap: "12px",
            padding: "8px 20px",
            backgroundColor: "rgba(16, 185, 129, 0.1)",
            borderRadius: "100px",
            marginBottom: "32px",
          }}
        >
          <div
            style={{
              width: "10px",
              height: "10px",
              backgroundColor: "#10b981",
              borderRadius: "50%",
            }}
          />
          <div
            style={{
              fontSize: "14px",
              fontWeight: "bold",
              color: "#10b981",
              textTransform: "uppercase",
              letterSpacing: "0.1em",
            }}
          >
            Technische Beratung
          </div>
        </div>

        {/* Brand Mark */}
        <div
          style={{
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            width: "100px",
            height: "100px",
            backgroundColor: "#0f172a",
            borderRadius: "24px",
            marginBottom: "32px",
            boxShadow: "0 10px 15px -3px rgba(15, 23, 42, 0.3)",
          }}
        >
          <div
            style={{
              fontSize: "48px",
              fontWeight: "bold",
              color: "#10b981",
            }}
          >
            MB
          </div>
        </div>

        {/* Title */}
        <div
          style={{
            display: "flex",
            flexDirection: "row",
            fontSize: "72px",
            fontWeight: "900",
            color: "#0f172a",
            marginBottom: "16px",
            textAlign: "center",
            letterSpacing: "-0.02em",
          }}
        >
          MB Grid{" "}
          <span
            style={{ color: "#10b981", display: "flex", marginLeft: "16px" }}
          >
            Solutions
          </span>
        </div>

        {/* Subtitle */}
        <div
          style={{
            display: "flex",
            flexDirection: "column",
            fontSize: "32px",
            fontWeight: "500",
            color: "#64748b",
            textAlign: "center",
            maxWidth: "800px",
            lineHeight: 1.4,
          }}
        >
          <span>Energiekabelprojekte & Technische Beratung</span>
          <span>bis 110 kV</span>
        </div>
      </div>

      {/* Tech Lines - matching .tech-line style */}
      <div
        style={{
          position: "absolute",
          top: "10%",
          left: 0,
          width: "200px",
          height: "1px",
          backgroundColor: "rgba(16, 185, 129, 0.2)",
        }}
      />
      <div
        style={{
          position: "absolute",
          bottom: "15%",
          right: 0,
          width: "300px",
          height: "1px",
          backgroundColor: "rgba(16, 185, 129, 0.2)",
        }}
      />
    </div>,
    {
      ...size,
    },
  );
}