import { ImageResponse } from "next/og";

export const alt = "Fetcha — The web, accessible through one API.";
export const size = { width: 1200, height: 630 };
export const contentType = "image/png";

/** Dynamic Open Graph image. System fonts only so it is edge-safe and has no font fetches. */
export default function OpenGraphImage() {
  return new ImageResponse(
    (
      <div
        style={{
          width: "100%",
          height: "100%",
          display: "flex",
          flexDirection: "column",
          justifyContent: "space-between",
          padding: 72,
          background: "#0a0d14",
          color: "#eef1f6",
          fontFamily: "ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif",
          position: "relative",
        }}
      >
        {/* subtle grid */}
        <div
          style={{
            position: "absolute",
            inset: 0,
            backgroundImage: "linear-gradient(to right, rgba(31,38,51,0.9) 1px, transparent 1px), linear-gradient(to bottom, rgba(31,38,51,0.9) 1px, transparent 1px)",
            backgroundSize: "48px 48px",
            opacity: 0.7,
          }}
        />
        {/* wordmark */}
        <div style={{ display: "flex", alignItems: "center", gap: 18 }}>
          <div style={{ width: 56, height: 56, borderRadius: 14, background: "#eef1f6", display: "flex", alignItems: "center", justifyContent: "center" }}>
            <svg width="36" height="36" viewBox="0 0 24 24" fill="none">
              <path d="M6 12h4.5m0 0 3-4.5H18m-7.5 4.5 3 4.5H18" stroke="#0a0d14" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round" />
              <circle cx="6" cy="12" r="1.6" fill="#5b8cff" />
            </svg>
          </div>
          <div style={{ fontSize: 44, fontWeight: 600, letterSpacing: "-0.03em" }}>fetcha</div>
        </div>

        <div style={{ display: "flex", flexDirection: "column", gap: 22 }}>
          <div style={{ fontSize: 30, fontWeight: 500, color: "#5b8cff", letterSpacing: "0.02em", textTransform: "uppercase" }}>Intelligent web access infrastructure</div>
          <div style={{ fontSize: 76, fontWeight: 600, lineHeight: 1.04, letterSpacing: "-0.035em", maxWidth: 1000 }}>The web, accessible through one API.</div>
          <div style={{ fontSize: 28, color: "#a6afbf", lineHeight: 1.35, maxWidth: 960 }}>One endpoint. Smart routing across proxy networks, sticky sessions and geo targeting.</div>
        </div>

        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", fontSize: 24, color: "#6b7484" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 14, fontFamily: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" }}>
            <span style={{ color: "#5b8cff", fontWeight: 600 }}>POST</span>
            <span>https://www.fetcha.co/v1/fetch</span>
          </div>
          <div>www.fetcha.co</div>
        </div>
      </div>
    ),
    { ...size },
  );
}