/**
 * =============================================================================
 * QWHPI — Quebec Weekly Housing Price Index
 * Author  : Simon-Pierre Boucher
 * Contact : contact@spboucher.ai
 * File    : web/app/opengraph-image.tsx
 * Purpose : Generated Open Graph share image (1200×630, brand chart motif).
 * =============================================================================
 */
import { ImageResponse } from "next/og";

export const runtime = "edge";
export const alt = "QHPI — Quebec Housing Price Index (monthly)";
export const size = { width: 1200, height: 630 };
export const contentType = "image/png";

export default function OgImage() {
  return new ImageResponse(
    (
      <div
        style={{
          width: "100%", height: "100%", display: "flex",
          flexDirection: "column", justifyContent: "space-between",
          background: "linear-gradient(135deg, #fcfcfb 60%, #e8f0fb 100%)",
          padding: 64, fontFamily: "Georgia, serif",
        }}
      >
        <div style={{ display: "flex", alignItems: "center", gap: 20 }}>
          <div
            style={{
              width: 56, height: 56, borderRadius: 14, background: "#2a78d6",
              display: "flex", alignItems: "center", justifyContent: "center",
            }}
          >
            <svg width="34" height="34" viewBox="0 0 22 22">
              <path d="M5 14.5 L9 10.5 L12 12.5 L17 6.5" fill="none"
                    stroke="#fff" strokeWidth="2.2" strokeLinecap="round"
                    strokeLinejoin="round" />
            </svg>
          </div>
          <div style={{ fontSize: 44, fontWeight: 700, color: "#0b0b0b" }}>
            QHPI
          </div>
          <div style={{ fontSize: 24, color: "#716f66" }}>
            Quebec Housing Price Index · monthly
          </div>
        </div>

        <svg width="1072" height="270" viewBox="0 0 1072 270">
          <path
            d="M0 240 C 120 235, 180 200, 260 190 S 400 205, 470 185
               S 610 120, 700 110 S 850 70, 940 45 S 1030 25, 1072 15"
            fill="none" stroke="#2a78d6" strokeWidth="6" strokeLinecap="round"
          />
          <path
            d="M0 240 C 120 235, 180 200, 260 190 S 400 205, 470 185
               S 610 120, 700 110 S 850 70, 940 45 S 1030 25, 1072 15
               L 1072 270 L 0 270 Z"
            fill="rgba(42,120,214,0.12)"
          />
        </svg>

        <div style={{ display: "flex", justifyContent: "space-between",
                      alignItems: "flex-end" }}>
          <div style={{ fontSize: 34, color: "#0b0b0b", maxWidth: 760 }}>
            Quebec housing prices, measured monthly, robustly.
          </div>
          <div style={{ fontSize: 20, color: "#716f66" }}>
            indexqc.house
          </div>
        </div>
      </div>
    ),
    size,
  );
}