import { ImageResponse } from "next/og";

export const alt = "Tia — Your baby's digital heirloom";
export const size = { width: 1200, height: 630 };
export const contentType = "image/png";

export default function OgImage() {
  return new ImageResponse(
    (
      <div
        style={{
          background: "linear-gradient(135deg, #fdf2f2 0%, #fef3c7 50%, #fdf2f2 100%)",
          width: "100%",
          height: "100%",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          justifyContent: "center",
          fontFamily: "sans-serif",
          padding: 80,
        }}
      >
        <div style={{ fontSize: 72, marginBottom: 24 }}>🌸</div>

        <div
          style={{
            fontSize: 60,
            fontWeight: 800,
            color: "#111827",
            textAlign: "center",
            lineHeight: 1.2,
            marginBottom: 20,
          }}
        >
          Tia
        </div>

        <div
          style={{
            fontSize: 28,
            color: "#f43f5e",
            fontWeight: 600,
            textAlign: "center",
            marginBottom: 24,
          }}
        >
          Your baby&apos;s digital heirloom
        </div>

        <div
          style={{
            fontSize: 22,
            color: "#6b7280",
            textAlign: "center",
            maxWidth: 800,
            lineHeight: 1.5,
          }}
        >
          Log every feed, milestone, and memory.
          Built for Indian families. Privacy-first. Free during early access.
        </div>
      </div>
    ),
    { ...size }
  );
}
