import { ImageResponse } from 'next/og'

export const runtime = 'edge'
export const alt = 'GreenLens – Plant Identifier and Care Planner'
export const size = { width: 1200, height: 630 }
export const contentType = 'image/png'

export default function OGImage() {
  return new ImageResponse(
    (
      <div
        style={{
          background: '#131f16',
          width: '100%',
          height: '100%',
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
          padding: '80px',
        }}
      >
        <div
          style={{
            fontSize: 26,
            fontWeight: 600,
            color: '#56a074',
            letterSpacing: '0.15em',
            textTransform: 'uppercase',
            marginBottom: 28,
            display: 'flex',
          }}
        >
          Plant Identifier &amp; Care App
        </div>

        <div
          style={{
            fontSize: 100,
            fontWeight: 800,
            color: '#f4f1e8',
            marginBottom: 28,
            display: 'flex',
          }}
        >
          GreenLens
        </div>

        <div
          style={{
            fontSize: 34,
            color: 'rgba(244,241,232,0.65)',
            textAlign: 'center',
            maxWidth: 820,
            display: 'flex',
          }}
        >
          Identify plants, get AI-powered care plans, and manage your collection.
        </div>

        <div style={{ marginTop: 56, display: 'flex', gap: 16 }}>
          {['450+ plant species', 'AI-powered scans', 'iOS & Android'].map((label) => (
            <div
              key={label}
              style={{
                background: 'rgba(86,160,116,0.15)',
                border: '1.5px solid rgba(86,160,116,0.4)',
                borderRadius: 100,
                padding: '14px 30px',
                fontSize: 22,
                color: '#7ac99a',
                display: 'flex',
              }}
            >
              {label}
            </div>
          ))}
        </div>
      </div>
    ),
    { ...size },
  )
}