import { ImageResponse } from 'next/og';
import { SITE_NAME, TAGLINE } from '@/lib/site';

export const runtime = 'nodejs';
export const alt = `${SITE_NAME} — ${TAGLINE}`;
export const size = { width: 1200, height: 630 };
export const contentType = 'image/png';

/** Default Open Graph image: the SatelliteIndex mark (planet + inclined ring + satellite node) on the space plane. */
export default function OpenGraphImage() {
  return new ImageResponse(
    (
      <div
        style={{
          width: '100%',
          height: '100%',
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'space-between',
          padding: '64px 72px',
          background: 'linear-gradient(135deg, #0b1020 0%, #060912 60%, #060912 100%)',
          color: '#eaf0ff',
          fontFamily: 'sans-serif',
          position: 'relative',
        }}
      >
        <div style={{ position: 'absolute', right: -160, top: -120, width: 620, height: 620, borderRadius: 999, background: 'radial-gradient(circle at 35% 35%, rgba(56,211,255,0.16), rgba(6,9,18,0) 70%)', display: 'flex' }} />
        <div style={{ display: 'flex', alignItems: 'center', gap: 20 }}>
          <svg width="72" height="72" viewBox="0 0 32 32" fill="none">
            <circle cx="16" cy="16" r="7.5" fill="#eaf0ff" opacity="0.92" />
            <ellipse cx="16" cy="16" rx="14" ry="5.2" stroke="#eaf0ff" strokeWidth="1.6" transform="rotate(-24 16 16)" opacity="0.85" />
            <circle cx="27.4" cy="9.6" r="2.3" fill="#38d3ff" />
          </svg>
          <div style={{ display: 'flex', fontSize: 40, fontWeight: 700, letterSpacing: -1 }}>
            <span>Satellite</span>
            <span style={{ color: '#38d3ff' }}>Index</span>
          </div>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
          <div style={{ fontSize: 66, fontWeight: 700, lineHeight: 1.02, letterSpacing: -2.5, maxWidth: 900, display: 'flex' }}>{TAGLINE}.</div>
          <div style={{ fontSize: 26, color: '#a3aec8', display: 'flex' }}>Satellites · constellations · operators · launches · debris · live SGP4 positions</div>
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 22, color: '#6b7694' }}>
          <span>www.satelliteindex.io</span>
          <div style={{ display: 'flex', gap: 28 }}>
            {[
              ['LEO', '#38d3ff'],
              ['MEO', '#8f7dff'],
              ['GEO', '#f5b544'],
              ['HEO', '#ff7ab6'],
            ].map(([l, c]) => (
              <div key={l} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <div style={{ width: 12, height: 12, borderRadius: 999, background: c, display: 'flex' }} />
                <span>{l}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    ),
    { ...size },
  );
}