import { ImageResponse } from 'next/og';

export const alt = 'Cambridge Veritas — UK-Regulated Career Certifications';
export const size = { width: 1200, height: 630 };
export const contentType = 'image/png';

export default function Image() {
  return new ImageResponse(
    (
      <div
        style={{
          background: 'linear-gradient(135deg, #3B0F18 0%, #4A141E 55%, #5A1A22 100%)',
          width: '100%',
          height: '100%',
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
          padding: '60px 80px',
          fontFamily: 'sans-serif',
        }}
      >
        {/* Brand badge */}
        <div style={{ display: 'flex', alignItems: 'center', gap: '16px', marginBottom: '36px' }}>
          <div
            style={{
              width: '56px',
              height: '56px',
              borderRadius: '12px',
              background: '#D4AF37',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
            }}
          >
            <span style={{ fontSize: '18px', fontWeight: 900, color: '#3B0F18' }}>CV</span>
          </div>
          <span style={{ fontSize: '28px', fontWeight: 800, color: '#D4AF37', letterSpacing: '-0.5px' }}>
            Cambridge Veritas
          </span>
        </div>

        {/* Headline */}
        <h1
          style={{
            fontSize: '56px',
            fontWeight: 900,
            color: '#FFFFFF',
            textAlign: 'center',
            lineHeight: 1.08,
            margin: '0 0 24px',
            maxWidth: '900px',
          }}
        >
          UK-Regulated Career Certifications
        </h1>

        {/* Subtext */}
        <p
          style={{
            fontSize: '22px',
            color: 'rgba(230, 211, 177, 0.75)',
            textAlign: 'center',
            margin: '0 0 40px',
            maxWidth: '700px',
            lineHeight: 1.4,
          }}
        >
          Trusted by 25,000+ professionals across 50+ countries
        </p>

        {/* Pills */}
        <div style={{ display: 'flex', gap: '12px', flexWrap: 'wrap', justifyContent: 'center' }}>
          {['CVTE® TESOL', 'CVIM® IELTS', 'CVAT® Voice & Accent', 'CVAF® Fluency'].map((label) => (
            <div
              key={label}
              style={{
                padding: '8px 20px',
                borderRadius: '999px',
                border: '1.5px solid rgba(212, 175, 55, 0.5)',
                color: 'rgba(230, 211, 177, 0.85)',
                fontSize: '16px',
                fontWeight: 600,
              }}
            >
              {label}
            </div>
          ))}
        </div>

        {/* Gold accent line */}
        <div
          style={{
            position: 'absolute',
            bottom: 0,
            left: 0,
            right: 0,
            height: '5px',
            background: 'linear-gradient(90deg, #D4AF37 0%, #B8912A 100%)',
          }}
        />
      </div>
    ),
    { width: 1200, height: 630 }
  );
}