import { ImageResponse } from "next/og";
import type { NextRequest } from "next/server";

export const runtime = "edge";

const PAGES: Record<string, { title: string; subtitle: string }> = {
  home: {
    title: "LLMHosts",
    subtitle: "Your GPU. Real AI Infrastructure. From Anywhere.",
  },
  pricing: {
    title: "Pricing",
    subtitle: "Free, Pro, and Team plans for every scale.",
  },
  docs: {
    title: "Documentation",
    subtitle: "Setup, API reference, and configuration guides.",
  },
  contact: {
    title: "Contact",
    subtitle: "Support, partnerships, and enterprise inquiries.",
  },
};

export async function GET(request: NextRequest) {
  const { searchParams } = request.nextUrl;
  const page = searchParams.get("page") ?? "home";
  const config = PAGES[page] ?? PAGES.home;

  return new ImageResponse(
    (
      <div
        style={{
          width: "100%",
          height: "100%",
          display: "flex",
          flexDirection: "column",
          justifyContent: "center",
          alignItems: "flex-start",
          padding: "80px",
          background: "linear-gradient(135deg, #080809 0%, #0f0a1a 50%, #1a0d2e 100%)",
          fontFamily: "system-ui, sans-serif",
        }}
      >
        {/* Top badge */}
        <div
          style={{
            display: "flex",
            alignItems: "center",
            gap: "8px",
            marginBottom: "32px",
            padding: "8px 20px",
            borderRadius: "999px",
            border: "1px solid rgba(139, 92, 246, 0.3)",
            background: "rgba(139, 92, 246, 0.1)",
          }}
        >
          <div
            style={{
              width: "8px",
              height: "8px",
              borderRadius: "50%",
              background: "#8b5cf6",
            }}
          />
          <span style={{ fontSize: "20px", color: "#c4b5fd" }}>llmhosts.com</span>
        </div>

        {/* Title */}
        <h1
          style={{
            fontSize: page === "home" ? "72px" : "64px",
            fontWeight: 800,
            color: "#ffffff",
            margin: 0,
            lineHeight: 1.1,
            letterSpacing: "-0.03em",
          }}
        >
          {config.title}
        </h1>

        {/* Subtitle */}
        <p
          style={{
            fontSize: "28px",
            color: "#a1a1aa",
            marginTop: "20px",
            lineHeight: 1.4,
            maxWidth: "800px",
          }}
        >
          {config.subtitle}
        </p>

        {/* Bottom gradient line */}
        <div
          style={{
            position: "absolute",
            bottom: "0",
            left: "0",
            right: "0",
            height: "4px",
            background: "linear-gradient(90deg, #7c3aed, #8b5cf6, #a78bfa, #7c3aed)",
          }}
        />
      </div>
    ),
    {
      width: 1200,
      height: 630,
    },
  );
}
