import { ImageResponse } from "next/og";

export const runtime = "edge";
export const alt = "ScanReceipts — Receipt Scanner to Excel";
export const size = { width: 1200, height: 630 };
export const contentType = "image/png";

type Locale = "de" | "en";

// Kept ASCII-only on purpose: Satori's default font (used by ImageResponse)
// only covers basic Latin, and both taglines below happen to need no
// umlauts — avoids fetching an external font file at build time.
const copy: Record<Locale, { badge: string; line1: string; line2: string; foot: string }> = {
  de: {
    badge: "Fur Freelancer & Privatpersonen",
    line1: "Nie wieder Belege abtippen.",
    line2: "Ein Foto. Fertige Excel in Sekunden.",
    foot: "KASSENBON SCANNER · DUAL-SHEET EXCEL · MATH-CHECK",
  },
  en: {
    badge: "For freelancers & everyday receipts",
    line1: "Stop typing receipts by hand.",
    line2: "One photo. Finished Excel in seconds.",
    foot: "RECEIPT SCANNER · DUAL-SHEET EXCEL · MATH-CHECK",
  },
};

export default async function Image({ params }: { params: Promise<{ locale: string }> }) {
  const { locale } = await params;
  const lang: Locale = locale === "de" ? "de" : "en";
  const t = copy[lang];

  return new ImageResponse(
    (
      <div
        style={{
          width: "100%",
          height: "100%",
          display: "flex",
          flexDirection: "column",
          justifyContent: "space-between",
          backgroundColor: "#F6F9FF",
          padding: 64,
          fontFamily: "sans-serif",
        }}
      >
        {/* Wordmark */}
        <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
          <div
            style={{
              display: "flex",
              width: 72,
              height: 72,
              backgroundColor: "#000",
              color: "#fff",
              alignItems: "center",
              justifyContent: "center",
              fontSize: 34,
              fontWeight: 800,
            }}
          >
            $
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
            <span style={{ fontSize: 34, fontWeight: 800, color: "#000", letterSpacing: -1 }}>
              SCAN
            </span>
            <span
              style={{
                fontSize: 18,
                fontWeight: 700,
                color: "#fff",
                backgroundColor: "#000",
                padding: "6px 10px",
                letterSpacing: 2,
              }}
            >
              RECEIPTS
            </span>
          </div>
        </div>

        {/* Headline block */}
        <div style={{ display: "flex", flexDirection: "column", gap: 22, maxWidth: 980 }}>
          <div
            style={{
              display: "flex",
              alignItems: "center",
              gap: 10,
              fontSize: 20,
              color: "#161C22",
              backgroundColor: "#EEF4FC",
              border: "1px solid #E2E8F0",
              padding: "8px 16px",
              alignSelf: "flex-start",
            }}
          >
            <div style={{ width: 10, height: 10, backgroundColor: "#10B981" }} />
            {t.badge}
          </div>
          <div
            style={{
              display: "flex",
              flexDirection: "column",
              fontSize: 60,
              fontWeight: 800,
              color: "#000",
              lineHeight: 1.08,
              letterSpacing: -1.5,
            }}
          >
            <span>{t.line1}</span>
            <span style={{ color: "#475569" }}>{t.line2}</span>
          </div>
        </div>

        {/* Footer strip */}
        <div
          style={{
            display: "flex",
            alignItems: "center",
            justifyContent: "space-between",
            borderTop: "1px solid #CBD5E1",
            paddingTop: 24,
            fontSize: 18,
            color: "#475569",
            letterSpacing: 1,
          }}
        >
          <span>{t.foot}</span>
          <span style={{ color: "#000", fontWeight: 700 }}>SCAN-RECEIPTS.APP</span>
        </div>
      </div>
    ),
    { ...size }
  );
}
