/* Shared 1200x630 OG image (used by opengraph-image.tsx routes). */

export function OgFrame({
  eyebrow,
  title,
  accent,
}: {
  eyebrow: string;
  title: string;
  accent?: string;
}) {
  return (
    <div
      style={{
        width: "1200px",
        height: "630px",
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        padding: "80px 96px",
        backgroundColor: "#0b1b33",
        color: "#ffffff",
        fontFamily: "Arial, Helvetica, sans-serif",
      }}
    >
      <div
        style={{
          display: "flex",
          alignItems: "center",
          gap: "16px",
          marginBottom: "28px",
        }}
      >
        <div
          style={{
            display: "flex",
            alignItems: "baseline",
            fontSize: 44,
            fontWeight: 800,
            letterSpacing: "-1px",
          }}
        >
          <span>Mx</span>
          <span style={{ color: "#f59e13" }}>ERP</span>
        </div>
        <div
          style={{
            fontSize: 20,
            letterSpacing: "4px",
            color: "#7db4ff",
            borderLeft: "2px solid rgba(255,255,255,0.25)",
            paddingLeft: "16px",
          }}
        >
          {eyebrow}
        </div>
      </div>
      <div
        style={{
          display: "flex",
          flexWrap: "wrap",
          columnGap: "20px",
          fontSize: 76,
          fontWeight: 800,
          lineHeight: 1.08,
          letterSpacing: "-2px",
        }}
      >
        <span>{title}</span>
        {accent ? <span style={{ color: "#f59e13" }}>{accent}</span> : null}
      </div>
      <div
        style={{
          marginTop: "28px",
          fontSize: 26,
          color: "#cbd5e1",
        }}
      >
        www.mxerp.in
      </div>
    </div>
  );
}