import { ImageResponse } from 'next/og';

export const runtime = 'edge';

export const alt = 'ZeroSixLab - Geleceği Kodlayan Laboratuvar';
export const size = {
  width: 1200,
  height: 630,
};
export const contentType = 'image/png';

export default async function Image() {
  return new ImageResponse(
    (
      <div
        style={{
          height: '100%',
          width: '100%',
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
          backgroundColor: '#050B14',
          backgroundImage: 'radial-gradient(circle at 25% 25%, #0a192f 0%, #050B14 50%)',
          position: 'relative',
        }}
      >
        {/* Grid Pattern */}
        <div
          style={{
            position: 'absolute',
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            backgroundImage: 'linear-gradient(rgba(0,212,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0,212,255,0.03) 1px, transparent 1px)',
            backgroundSize: '50px 50px',
          }}
        />
        
        {/* Glow Effect */}
        <div
          style={{
            position: 'absolute',
            top: '50%',
            left: '50%',
            transform: 'translate(-50%, -50%)',
            width: '600px',
            height: '600px',
            background: 'radial-gradient(circle, rgba(0,212,255,0.15) 0%, transparent 70%)',
            borderRadius: '50%',
          }}
        />

        {/* Logo/Brand */}
        <div
          style={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            marginBottom: '30px',
          }}
        >
          {/* Cat Icon */}
          <div
            style={{
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              width: '120px',
              height: '120px',
              borderRadius: '24px',
              background: 'linear-gradient(135deg, #00D4FF 0%, #0891b2 100%)',
              marginRight: '24px',
              fontSize: '60px',
            }}
          >
            🐱
          </div>
          
          {/* Text */}
          <div
            style={{
              display: 'flex',
              flexDirection: 'column',
            }}
          >
            <span
              style={{
                fontSize: '72px',
                fontWeight: 'bold',
                color: 'white',
                letterSpacing: '-2px',
                lineHeight: 1,
              }}
            >
              ZeroSixLab
            </span>
            <span
              style={{
                fontSize: '24px',
                color: '#00D4FF',
                letterSpacing: '8px',
                textTransform: 'uppercase',
                marginTop: '8px',
              }}
            >
              SOFTWARE LAB
            </span>
          </div>
        </div>

        {/* Tagline */}
        <div
          style={{
            fontSize: '32px',
            color: '#94A3B8',
            marginTop: '20px',
            textAlign: 'center',
          }}
        >
          Geleceği Kodlayan Laboratuvar
        </div>

        {/* Tech Tags */}
        <div
          style={{
            display: 'flex',
            gap: '16px',
            marginTop: '40px',
          }}
        >
          {['Web', 'Mobil', 'AI', 'Blockchain'].map((tag) => (
            <div
              key={tag}
              style={{
                padding: '8px 20px',
                borderRadius: '20px',
                border: '1px solid rgba(0,212,255,0.3)',
                color: '#00D4FF',
                fontSize: '18px',
                background: 'rgba(0,212,255,0.1)',
              }}
            >
              {tag}
            </div>
          ))}
        </div>

        {/* Bottom URL */}
        <div
          style={{
            position: 'absolute',
            bottom: '40px',
            fontSize: '20px',
            color: '#64748b',
            letterSpacing: '2px',
          }}
        >
          zerosixlab.com
        </div>
      </div>
    ),
    {
      ...size,
    }
  );
}
