import { ImageResponse } from 'next/og'

export const alt = 'Acieb Énergie - Courtier en énergie B2B'
export const size = { width: 1200, height: 600 }
export const contentType = 'image/png'

export default function TwitterImage() {
  return new ImageResponse(
    (
      <div
        style={{
          width: '100%',
          height: '100%',
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
          background: 'linear-gradient(135deg, #1e293b 0%, #0f172a 100%)',
        }}
      >
        {/* Logo */}
        <svg
          width="100"
          height="100"
          viewBox="0 0 28 29"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M4.53553 16.0355C2.58291 14.0829 2.58291 10.9171 4.53553 8.96447L10.1924 3.30761C12.145 1.35499 15.3108 1.35499 17.2635 3.30761L22.9203 8.96447C24.8729 10.9171 24.8729 14.0829 22.9203 16.0355L17.2635 21.6924C15.3108 23.645 12.145 23.645 10.1924 21.6924L4.53553 16.0355Z"
            fill="#FB4C01"
          />
        </svg>

        {/* Titre */}
        <div
          style={{
            display: 'flex',
            fontSize: 64,
            fontWeight: 700,
            color: '#ffffff',
            marginTop: 28,
            marginBottom: 12,
            letterSpacing: '-0.02em',
          }}
        >
          Acieb Énergie
        </div>

        {/* Sous-titre */}
        <div
          style={{
            display: 'flex',
            fontSize: 28,
            color: '#94a3b8',
            letterSpacing: '0.02em',
          }}
        >
          Courtier en énergie B2B • Ingénieurs experts
        </div>

        {/* Barre orange décorative */}
        <div
          style={{
            display: 'flex',
            width: 100,
            height: 4,
            background: '#FB4C01',
            borderRadius: 2,
            marginTop: 32,
          }}
        />
      </div>
    ),
    { ...size }
  )
}