import { ImageResponse } from 'next/og'

export const alt = 'Comparatif électricité pro 2026 — Comparateur B2B expert Acieb Énergie'
export const size = { width: 1200, height: 630 }
export const contentType = 'image/png'

export default function OgImage() {
  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%)',
        }}
      >
        {/* Comparison Icon / Balance Scale */}
        <svg
          width="120"
          height="120"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          {/* Balance scale with orange accent */}
          <path
            d="M3 9h18M12 3v6M8 15h8v2H8z"
            stroke="#FB4C01"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
          />
          <path
            d="M7 9v2l1 4h8l1-4v-2M7 17v2a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-2"
            stroke="#ffffff"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
          />
          {/* Comparison bars on sides */}
          <g opacity="0.5">
            <rect x="2" y="8" width="3" height="8" fill="#94a3b8" rx="1" />
            <rect x="19" y="8" width="3" height="7" fill="#94a3b8" rx="1" />
          </g>
        </svg>

        {/* Titre - Line 1 */}
        <div
          style={{
            display: 'flex',
            fontSize: 64,
            fontWeight: 700,
            color: '#ffffff',
            marginTop: 32,
            letterSpacing: '-0.02em',
          }}
        >
          Comparatif électricité pro 2026
        </div>

        {/* Titre - Line 2 (smaller) */}
        <div
          style={{
            display: 'flex',
            fontSize: 40,
            fontWeight: 600,
            color: '#FB4C01',
            marginBottom: 16,
            letterSpacing: '0.01em',
          }}
        >
          Comparateur B2B expert
        </div>

        {/* Sous-titre / Tagline */}
        <div
          style={{
            display: 'flex',
            fontSize: 28,
            color: '#94a3b8',
            letterSpacing: '0.02em',
            marginBottom: 20,
            textAlign: 'center',
            paddingLeft: 40,
            paddingRight: 40,
          }}
        >
          Profils C5/C4/C3 · Économies jusqu'à 25 % · Méthodologie certifiée
        </div>

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