import { ImageResponse } from 'next/og';

export const runtime = 'edge';

export const alt = 'MB Grid Solutions | Energiekabelprojekte & Technische Beratung';
export const size = {
  width: 1200,
  height: 630,
};

export const contentType = 'image/png';

export default async function Image() {
  return new ImageResponse(
    (
      <div
        style={{
          background: '#ffffff',
          width: '100%',
          height: '100%',
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
          position: 'relative',
          fontFamily: 'sans-serif',
        }}
      >
        {/* Grid Pattern Background - matching .grid-pattern in globals.css */}
        <div
          style={{
            position: 'absolute',
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            backgroundImage: 'radial-gradient(circle, #e2e8f0 1.5px, transparent 1.5px)',
            backgroundSize: '40px 40px',
            zIndex: 0,
          }}
        />
        
        {/* Content Container - matching .card-modern / .glass-panel style */}
        <div
          style={{
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            justifyContent: 'center',
            backgroundColor: 'rgba(255, 255, 255, 0.95)',
            padding: '60px 80px',
            borderRadius: '48px',
            border: '1px solid #e2e8f0',
            boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.1)',
            zIndex: 1,
            position: 'relative',
          }}
        >
          {/* Engineering Excellence Badge */}
          <div
            style={{
              display: 'flex',
              alignItems: 'center',
              gap: '12px',
              padding: '8px 20px',
              backgroundColor: 'rgba(16, 185, 129, 0.1)',
              borderRadius: '100px',
              marginBottom: '32px',
            }}
          >
            <div
              style={{
                width: '10px',
                height: '10px',
                backgroundColor: '#10b981',
                borderRadius: '50%',
              }}
            />
            <div
              style={{
                fontSize: '14px',
                fontWeight: 'bold',
                color: '#10b981',
                textTransform: 'uppercase',
                letterSpacing: '0.1em',
              }}
            >
              Engineering Excellence
            </div>
          </div>

          {/* Brand Mark */}
          <div
            style={{
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              width: '100px',
              height: '100px',
              backgroundColor: '#0f172a',
              borderRadius: '24px',
              marginBottom: '32px',
              boxShadow: '0 10px 15px -3px rgba(15, 23, 42, 0.3)',
            }}
          >
            <div
              style={{
                fontSize: '48px',
                fontWeight: 'bold',
                color: '#10b981',
              }}
            >
              MB
            </div>
          </div>

          {/* Title */}
          <div
            style={{
              fontSize: '72px',
              fontWeight: '900',
              color: '#0f172a',
              marginBottom: '16px',
              textAlign: 'center',
              letterSpacing: '-0.02em',
            }}
          >
            MB Grid <span style={{ color: '#10b981' }}>Solutions</span>
          </div>

          {/* Subtitle */}
          <div
            style={{
              fontSize: '32px',
              fontWeight: '500',
              color: '#64748b',
              textAlign: 'center',
              maxWidth: '800px',
              lineHeight: 1.4,
            }}
          >
            Energiekabelprojekte & Technische Beratung
            <br />
            bis 110 kV
          </div>
        </div>

        {/* Tech Lines - matching .tech-line style */}
        <div
          style={{
            position: 'absolute',
            top: '10%',
            left: 0,
            width: '200px',
            height: '1px',
            backgroundColor: 'rgba(16, 185, 129, 0.2)',
          }}
        />
        <div
          style={{
            position: 'absolute',
            bottom: '15%',
            right: 0,
            width: '300px',
            height: '1px',
            backgroundColor: 'rgba(16, 185, 129, 0.2)',
          }}
        />
      </div>
    ),
    {
      ...size,
    }
  );
}