moon/app/opengraph-image.tsx

import { ImageResponse } from 'next/og';

export const alt = 'Moon Phases 2026 — Full Moon Calendar';
export const size = {
  width: 1200,
  height: 630,
};
export const contentType = 'image/png';

export default function OpenGraphImage() {
  return new ImageResponse(
    (
      <div
        style={{
          width: '100%',
          height: '100%',
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'center',
          alignItems: 'center',
          background: 'radial-gradient(circle at top, #2b2f77 0%, #0a0a1a 55%, #050510 100%)',
          color: 'white',
          fontFamily: 'sans-serif',
          padding: '40px',
        }}
      >
        <div style={{ fontSize: 120, lineHeight: 1 }}>🌕</div>
        <div style={{ fontSize: 74, fontWeight: 800, letterSpacing: -1, marginTop: 20 }}>Moon Phases 2026</div>
        <div style={{ fontSize: 34, opacity: 0.9, marginTop: 18 }}>Full Moon Calendar · Lunar Simulator · Visibility Map</div>
        <div style={{ fontSize: 24, opacity: 0.7, marginTop: 26 }}>moon.arthurp.fr</div>
      </div>
    ),
    {
      ...size,
    }
  );
}