import { ImageResponse } from 'next/og'

export const runtime = 'edge'
export const alt = 'Lageplan – Digitale Einsatzdokumentation für Feuerwehren'
export const size = { width: 1200, height: 630 }
export const contentType = 'image/png'

export default async function Image() {
  return new ImageResponse(
    (
      <div
        style={{
          background: 'linear-gradient(135deg, #1e293b 0%, #0f172a 50%, #1e293b 100%)',
          width: '100%',
          height: '100%',
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
          fontFamily: 'Inter, sans-serif',
          position: 'relative',
        }}
      >
        {/* Red accent line top */}
        <div
          style={{
            position: 'absolute',
            top: 0,
            left: 0,
            right: 0,
            height: '6px',
            background: 'linear-gradient(90deg, #dc2626, #ef4444, #dc2626)',
          }}
        />

        {/* Logo circle */}
        <div
          style={{
            width: '120px',
            height: '120px',
            borderRadius: '24px',
            background: 'linear-gradient(135deg, #dc2626, #b91c1c)',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            marginBottom: '32px',
            boxShadow: '0 20px 60px rgba(220, 38, 38, 0.3)',
          }}
        >
          <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2" />
            <path d="M12 8v8" />
            <path d="M8 12h8" />
          </svg>
        </div>

        {/* Title */}
        <div
          style={{
            fontSize: '64px',
            fontWeight: 800,
            color: 'white',
            marginBottom: '16px',
            letterSpacing: '-1px',
          }}
        >
          Lageplan
        </div>

        {/* Subtitle */}
        <div
          style={{
            fontSize: '28px',
            fontWeight: 500,
            color: '#94a3b8',
            marginBottom: '40px',
            textAlign: 'center',
            maxWidth: '800px',
          }}
        >
          Digitale Einsatzdokumentation für Feuerwehren
        </div>

        {/* Feature pills */}
        <div style={{ display: 'flex', gap: '16px' }}>
          {['Krokierung', 'Journal', 'Rapporte', 'Echtzeit'].map((f) => (
            <div
              key={f}
              style={{
                padding: '10px 24px',
                borderRadius: '100px',
                border: '1px solid rgba(148, 163, 184, 0.3)',
                color: '#e2e8f0',
                fontSize: '18px',
                fontWeight: 500,
              }}
            >
              {f}
            </div>
          ))}
        </div>

        {/* Domain */}
        <div
          style={{
            position: 'absolute',
            bottom: '32px',
            right: '40px',
            fontSize: '20px',
            color: '#64748b',
            fontWeight: 600,
          }}
        >
          lageplan.ch
        </div>
      </div>
    ),
    { ...size }
  )
}
