import { ImageResponse } from 'next/og'

export const runtime = 'nodejs'
export const alt = 'Fibe — Idea to live app in 60 seconds. No code required.'
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, #0b0916 0%, #0f0c29 30%, #1a1540 60%, #1e1a42 100%)',
          width: '100%',
          height: '100%',
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
          fontFamily: 'system-ui, -apple-system, sans-serif',
          position: 'relative',
          overflow: 'hidden',
        }}
      >
        {/* Grid overlay */}
        <div style={{
          position: 'absolute', inset: 0,
          backgroundImage: 'linear-gradient(rgba(139,92,246,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(139,92,246,0.06) 1px, transparent 1px)',
          backgroundSize: '52px 52px',
        }} />

        {/* Glow orb */}
        <div style={{
          position: 'absolute',
          width: 700, height: 700,
          borderRadius: '50%',
          background: 'radial-gradient(circle, rgba(139,92,246,0.18) 0%, transparent 70%)',
          top: -200, right: -100,
        }} />
        <div style={{
          position: 'absolute',
          width: 500, height: 500,
          borderRadius: '50%',
          background: 'radial-gradient(circle, rgba(99,102,241,0.12) 0%, transparent 70%)',
          bottom: -150, left: -100,
        }} />

        {/* Content */}
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', position: 'relative', zIndex: 1 }}>

          {/* Logo */}
          <div style={{
            width: 80, height: 80, borderRadius: 20,
            background: 'linear-gradient(135deg, #8b5cf6, #a78bfa)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontSize: 42, color: 'white', fontWeight: 900,
            marginBottom: 36,
            boxShadow: '0 0 60px rgba(139,92,246,0.6)',
          }}>
            f
          </div>

          {/* Headline */}
          <div style={{
            fontSize: 76,
            fontWeight: 700,
            color: 'white',
            letterSpacing: '-3px',
            lineHeight: 1.05,
            textAlign: 'center',
            marginBottom: 8,
          }}>
            Idea to live app.
          </div>
          <div style={{
            fontSize: 76,
            fontWeight: 700,
            letterSpacing: '-3px',
            lineHeight: 1.05,
            textAlign: 'center',
            marginBottom: 36,
            background: 'linear-gradient(135deg, #c4b5fd 0%, #a78bfa 50%, #818cf8 100%)',
            backgroundClip: 'text',
            color: 'transparent',
          }}>
            Sixty seconds.
          </div>

          {/* Sub */}
          <div style={{
            fontSize: 26,
            color: 'rgba(161,161,170,0.65)',
            textAlign: 'center',
            maxWidth: 740,
            lineHeight: 1.5,
            marginBottom: 40,
          }}>
            No code required. AI Genies build it. Fibe ships it.
          </div>

          {/* Provider pills */}
          <div style={{ display: 'flex', gap: 12 }}>
            {['DigitalOcean', 'AWS', 'GCP', 'Azure', 'Any VPS'].map((p) => (
              <div key={p} style={{
                padding: '8px 18px',
                borderRadius: 999,
                border: '1px solid rgba(139,92,246,0.3)',
                background: 'rgba(139,92,246,0.1)',
                color: '#c4b5fd',
                fontSize: 18,
                fontWeight: 500,
              }}>
                {p}
              </div>
            ))}
          </div>
        </div>

        {/* Domain */}
        <div style={{
          position: 'absolute', bottom: 36,
          fontSize: 22,
          color: 'rgba(139,92,246,0.45)',
          fontFamily: 'monospace',
          letterSpacing: '0.05em',
        }}>
          fibe.me
        </div>
      </div>
    ),
    { ...size }
  )
}