import { ImageResponse } from 'next/og'

export const runtime = 'edge'
export const alt = 'SiteChangeMonitor - Website Change Detection'
export const size = { width: 1200, height: 630 }
export const contentType = 'image/png'

export default async function Image() {
  return new ImageResponse(
    (
      <div
        style={{
          background: '#0f172a',
          width: '100%',
          height: '100%',
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
          fontFamily: 'sans-serif',
          position: 'relative',
        }}
      >
        {/* Background Gradients/Glows */}
        <div
          style={{
            position: 'absolute',
            top: '-20%',
            left: '-10%',
            width: '600px',
            height: '600px',
            background: 'radial-gradient(circle, rgba(56, 189, 248, 0.15) 0%, rgba(15, 23, 42, 0) 70%)',
            filter: 'blur(40px)',
          }}
        />
        <div
          style={{
            position: 'absolute',
            bottom: '-20%',
            right: '-10%',
            width: '700px',
            height: '700px',
            background: 'radial-gradient(circle, rgba(6, 182, 212, 0.1) 0%, rgba(15, 23, 42, 0) 70%)',
            filter: 'blur(60px)',
          }}
        />

        {/* Content Container */}
        <div
          style={{
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            justifyContent: 'center',
            zIndex: 10,
            padding: '40px',
            border: '1px solid rgba(255, 255, 255, 0.1)',
            borderRadius: '24px',
            background: 'rgba(30, 41, 59, 0.4)',
            boxShadow: '0 8px 32px 0 rgba(0, 0, 0, 0.3)',
          }}
        >
          {/* Logo Section */}
          <div
            style={{
              display: 'flex',
              alignItems: 'center',
              gap: '20px',
              marginBottom: '32px',
            }}
          >
            <div
              style={{
                width: '72px',
                height: '72px',
                borderRadius: '18px',
                background: 'linear-gradient(135deg, #06b6d4, #3b82f6)',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                fontSize: '36px',
                color: 'white',
                fontWeight: 800,
                boxShadow: '0 4px 12px rgba(6, 182, 212, 0.4)',
              }}
            >
              S
            </div>
            <span style={{ fontSize: '56px', fontWeight: 800, color: 'white', letterSpacing: '-0.02em' }}>
              SiteChangeMonitor
            </span>
          </div>

          {/* Tagline */}
          <p
            style={{
              fontSize: '32px',
              fontWeight: 500,
              color: '#cbd5e1',
              maxWidth: '800px',
              textAlign: 'center',
              lineHeight: 1.4,
              margin: '0 0 48px 0',
            }}
          >
            Less noise. More signal.<br />
            <span style={{ color: '#38bdf8' }}>Smart website change monitoring.</span>
          </p>

          {/* Features / Badges */}
          <div
            style={{
              display: 'flex',
              gap: '24px',
            }}
          >
            {['Noise Filtering', 'Visual Diffs', 'Instant Alerts'].map((feature) => (
              <div
                key={feature}
                style={{
                  padding: '10px 24px',
                  background: 'rgba(56, 189, 248, 0.1)',
                  border: '1px solid rgba(56, 189, 248, 0.2)',
                  borderRadius: '100px',
                  color: '#7dd3fc',
                  fontSize: '20px',
                  fontWeight: 600,
                }}
              >
                {feature}
              </div>
            ))}
          </div>
        </div>
      </div>
    ),
    { ...size }
  )
}