import { ImageResponse } from "next/og";
import { dbAvailable, meta } from "@/lib/db";
export const runtime = "nodejs";
export const alt = "Toveli — propriétés à vendre et à louer au Québec";
export const size = { width: 1200, height: 630 };
export const contentType = "image/png";
export const dynamic = "force-dynamic";
export default function Image() {
  const sale = dbAvailable() ? Number(meta("listings_sale")) : 0, rent = dbAvailable() ? Number(meta("listings_rent")) : 0; const total = sale + rent;
  const f = (n: number) => n.toLocaleString("fr-CA");
  return new ImageResponse(
    (
      <div style={{ width: "100%", height: "100%", display: "flex", flexDirection: "column", justifyContent: "space-between", padding: 64, background: "linear-gradient(135deg,#ffffff 0%,#fdeef0 100%)", color: "#15181d", fontFamily: "Helvetica, Arial, sans-serif" }}>
        <div style={{ display: "flex", alignItems: "baseline", fontSize: 56, fontWeight: 800, letterSpacing: -2 }}>toveli<span style={{ color: "#e0263c" }}>.</span></div>
        <div style={{ display: "flex", flexDirection: "column" }}>
          <div style={{ display: "flex", alignItems: "baseline", gap: 20 }}><span style={{ fontSize: 132, fontWeight: 800, color: "#e0263c", letterSpacing: -4, lineHeight: 1 }}>{total ? f(total) : "—"}</span></div>
          <div style={{ fontSize: 44, fontWeight: 700, marginTop: 8 }}>propriétés à vendre et à louer au Québec</div>
          <div style={{ fontSize: 28, color: "#4b5260", marginTop: 12 }}>{total ? `${f(sale)} à vendre · ${f(rent)} à louer · mises à jour chaque nuit` : "L'immobilier, enfin réuni."}</div>
        </div>
        <div style={{ display: "flex", justifyContent: "space-between", fontSize: 26, color: "#7a8190" }}><span>Trouver. Comprendre. Décider.</span><span>www.toveli.ca</span></div>
      </div>
    ), { ...size },
  );
}