import { ImageResponse } from 'next/og';
import { SITE } from '@/lib/site';

// Rendered once at build time; served at /og.png (a file-like path, so no trailing-slash redirect)
export const dynamic = 'force-static';
const size = { width: 1200, height: 630 };

/** Open Graph / Twitter share card for every page */
export function GET() {
  const bars = [
    ['#18805a', 34],
    ['#18805a', 22],
    ['#18805a', 18],
    ['#b8801c', 12],
    ['#b8801c', 4],
    ['#2f6fb8', 5],
  ] as const;
  return new ImageResponse(
    (
      <div style={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', padding: 72, background: 'linear-gradient(135deg, #f5f7f4 0%, #ffffff 55%, #f4ecdc 100%)', color: '#172026' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 20 }}>
          <div style={{ width: 72, height: 72, borderRadius: 18, background: '#1e4d3f', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <svg width="46" height="46" viewBox="0 0 64 64" fill="none" stroke="#ffffff" strokeWidth="3.6" strokeLinecap="round" strokeLinejoin="round">
              <path d="M32 14v34M23 50h18M18 22h28" />
              <path d="m18 22-6 13a6.5 6.5 0 0 0 12 0l-6-13ZM46 22l-6 13a6.5 6.5 0 0 0 12 0l-6-13Z" />
            </svg>
          </div>
          <div style={{ fontSize: 44, fontWeight: 700, letterSpacing: -1 }}>{SITE.name}</div>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
          <div style={{ fontSize: 68, fontWeight: 700, lineHeight: 1.05, letterSpacing: -2, maxWidth: 980 }}>Compare lawyers ranked on evidence you can check.</div>
          <div style={{ display: 'flex', width: 760, height: 22, borderRadius: 11, background: '#edf0ec', overflow: 'hidden' }}>
            {bars.map(([c, w], i) => (
              <div key={i} style={{ width: `${w}%`, height: '100%', background: c, borderRight: '4px solid #ffffff' }} />
            ))}
          </div>
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 28, color: '#3b464d' }}>
          <span>Verified licences · 9 published components · Never for sale</span>
          <span style={{ color: '#1e4d3f', fontWeight: 700 }}>{SITE.domain}</span>
        </div>
      </div>
    ),
    { ...size, headers: { 'cache-control': 'public, max-age=86400, immutable' } },
  );
}