import { ImageResponse } from 'next/og';
import { getTranslations } from 'next-intl/server';

export const runtime = 'edge';

export default async function Image({ params: { locale } }: { params: { locale: string } }) {
  const t = await getTranslations({ locale, namespace: 'Index.meta' });

  return new ImageResponse(
    (
      <div
        style={{
          height: '100%',
          width: '100%',
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'flex-start',
          justifyContent: 'center',
          backgroundColor: '#001a4d', // Primary Blue from Styleguide
          padding: '80px',
          position: 'relative',
        }}
      >
        {/* Background Pattern / Scribble placeholder */}
        <div
          style={{
            position: 'absolute',
            top: '-100px',
            right: '-100px',
            width: '600px',
            height: '600px',
            borderRadius: '50%',
            background: 'radial-gradient(circle, rgba(0,255,153,0.1) 0%, transparent 70%)',
          }}
        />

        <div style={{ display: 'flex', flexDirection: 'column' }}>
          <div
            style={{
              fontSize: '24px',
              fontWeight: 'bold',
              color: '#00ff99', // Accent Green
              textTransform: 'uppercase',
              letterSpacing: '0.2em',
              marginBottom: '20px',
            }}
          >
            KLZ Cables
          </div>
          <div
            style={{
              fontSize: '72px',
              fontWeight: '900',
              color: 'white',
              lineHeight: '1.1',
              maxWidth: '800px',
              marginBottom: '30px',
            }}
          >
            {t('title')}
          </div>
          <div
            style={{
              fontSize: '32px',
              color: 'rgba(255,255,255,0.7)',
              maxWidth: '700px',
            }}
          >
            {t('description')}
          </div>
        </div>

        {/* Bottom Accent Line */}
        <div
          style={{
            position: 'absolute',
            bottom: '80px',
            left: '80px',
            width: '120px',
            height: '8px',
            backgroundColor: '#00ff99',
            borderRadius: '4px',
          }}
        />
      </div>
    ),
    {
      width: 1200,
      height: 630,
    }
  );
}