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={{
        width: 1200, height: 630,
        background: 'linear-gradient(145deg, #06040f 0%, #0c0820 25%, #130f35 50%, #1a1445 70%, #100c2a 100%)',
        display: 'flex',
        flexDirection: 'column',
        position: 'relative',
        overflow: 'hidden',
        fontFamily: 'system-ui, -apple-system, "Helvetica Neue", sans-serif',
      }}>

        {/* ── GRID ── */}
        <div style={{
          position: 'absolute', inset: 0,
          backgroundImage:
            'linear-gradient(rgba(139,92,246,0.08) 1px, transparent 1px), ' +
            'linear-gradient(90deg, rgba(139,92,246,0.08) 1px, transparent 1px)',
          backgroundSize: '52px 52px',
        }} />

        {/* ── GLOW ORBS ── */}
        <div style={{
          position: 'absolute', top: -160, right: -80,
          width: 680, height: 680, borderRadius: '50%',
          background: 'radial-gradient(circle, rgba(139,92,246,0.3) 0%, rgba(99,102,241,0.12) 40%, transparent 70%)',
        }} />
        <div style={{
          position: 'absolute', bottom: -120, left: -60,
          width: 480, height: 480, borderRadius: '50%',
          background: 'radial-gradient(circle, rgba(79,70,229,0.18) 0%, transparent 65%)',
        }} />
        {/* Accent glow — center */}
        <div style={{
          position: 'absolute', top: '40%', left: '42%',
          width: 360, height: 360, borderRadius: '50%',
          background: 'radial-gradient(circle, rgba(139,92,246,0.07) 0%, transparent 70%)',
        }} />

        {/* ── MAIN LAYOUT ── */}
        <div style={{
          position: 'relative', zIndex: 1,
          display: 'flex', flexDirection: 'column',
          height: '100%',
          padding: '52px 72px',
          justifyContent: 'space-between',
        }}>

          {/* TOP: logo + brand + badge */}
          <div style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
            {/* Logo */}
            <div style={{
              width: 60, height: 60, borderRadius: 16,
              background: 'linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 30, color: 'white', fontWeight: 900,
              boxShadow: '0 0 40px rgba(139,92,246,0.7), 0 0 100px rgba(139,92,246,0.25)',
              letterSpacing: '-1px',
            }}>
              f
            </div>
            <span style={{
              fontSize: 30, fontWeight: 700,
              color: 'rgba(255,255,255,0.92)',
              letterSpacing: '-0.5px',
            }}>
              fibe
            </span>
            {/* Separator */}
            <div style={{ width: 1, height: 28, background: 'rgba(139,92,246,0.25)', margin: '0 6px' }} />
            {/* Badge */}
            <div style={{
              padding: '5px 16px', borderRadius: 999,
              border: '1px solid rgba(139,92,246,0.4)',
              background: 'rgba(139,92,246,0.12)',
              fontSize: 14, fontWeight: 600,
              color: '#c4b5fd',
              letterSpacing: '0.01em',
            }}>
              No code required
            </div>
            <div style={{
              padding: '5px 16px', borderRadius: 999,
              border: '1px solid rgba(139,92,246,0.25)',
              background: 'rgba(139,92,246,0.07)',
              fontSize: 14, fontWeight: 600,
              color: 'rgba(196,181,253,0.65)',
              letterSpacing: '0.01em',
            }}>
              Any device · Anywhere
            </div>
          </div>

          {/* MIDDLE: headline */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
            <div style={{
              fontSize: 92, fontWeight: 800,
              color: 'rgba(255,255,255,0.95)',
              letterSpacing: '-4px', lineHeight: 0.95,
            }}>
              Idea to live app.
            </div>
            <div style={{
              fontSize: 92, fontWeight: 800,
              color: '#a78bfa',
              letterSpacing: '-4px', lineHeight: 0.95,
            }}>
              Sixty seconds.
            </div>
          </div>

          {/* BOTTOM: description + pills + domain */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
            <div style={{
              fontSize: 22, fontWeight: 400,
              color: 'rgba(161,161,170,0.72)',
              letterSpacing: '-0.2px',
            }}>
              AI Genies write the code. Fibe handles servers, SSL and deploys.
              On your own infrastructure. Zero DevOps.
            </div>

            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              {/* Feature pills */}
              <div style={{ display: 'flex', gap: 10 }}>
                {[
                  { label: 'Claude Code',   color: '#a78bfa' },
                  { label: 'Gemini CLI',    color: '#34d399' },
                  { label: 'OpenAI Codex',  color: '#60a5fa' },
                  { label: 'Your infra',    color: '#c4b5fd' },
                  { label: 'Any cloud',     color: '#c4b5fd' },
                ].map(({ label, color }) => (
                  <div key={label} style={{
                    padding: '6px 15px', borderRadius: 999,
                    border: `1px solid ${color}45`,
                    background: `${color}12`,
                    color, fontSize: 14, fontWeight: 600,
                  }}>
                    {label}
                  </div>
                ))}
              </div>

              {/* Domain */}
              <div style={{
                fontSize: 20,
                color: 'rgba(139,92,246,0.55)',
                fontFamily: '"Courier New", Courier, monospace',
                letterSpacing: '0.04em',
                fontWeight: 600,
              }}>
                fibe.me
              </div>
            </div>
          </div>

        </div>
      </div>
    ),
    { ...size }
  )
}