e-tib.com/components/OGImageTemplate.tsx

import React from 'react';

interface OGImageTemplateProps {
  title: string;
  description?: string;
  label?: string;
  image?: string;
  logo?: string;
  mode?: 'dark' | 'light' | 'image';
}

export function OGImageTemplate({
  title,
  description,
  label,
  image,
  logo,
  mode = 'dark',
}: OGImageTemplateProps) {
  const backgroundDark = '#1a1a1a';
  const primaryGreen = '#0e7a5c';

  const containerStyle: React.CSSProperties = {
    height: '100%',
    width: '100%',
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'flex-start',
    justifyContent: 'center',
    backgroundColor: mode === 'light' ? '#ffffff' : backgroundDark,
    padding: '80px',
    position: 'relative',
    fontFamily: 'Inter',
  };

  return (
    <div style={containerStyle}>
      {/* Background Image with Overlay */}
      {image && (
        <div
          style={{
            position: 'absolute',
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            display: 'flex',
          }}
        >
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img
            src={image}
            alt=""
            width="1200"
            height="630"
            style={{
              width: '100%',
              height: '100%',
              objectFit: 'cover',
            }}
          />
          <div
            style={{
              position: 'absolute',
              top: 0,
              left: 0,
              right: 0,
              bottom: 0,
              background: 'linear-gradient(135deg, rgba(26,26,26,0.98) 0%, rgba(26,26,26,0.85) 40%, rgba(14,122,92,0.4) 100%)',
            }}
          />
        </div>
      )}

      {/* Decorative Brand Accent (Top Right) */}
      <div
        style={{
          position: 'absolute',
          top: '-300px',
          right: '-200px',
          width: '800px',
          height: '1200px',
          backgroundColor: `${primaryGreen}1A`,
          transform: 'rotate(25deg)',
          display: 'flex',
        }}
      />

      {/* Main Content Wrapper */}
      <div
        style={{
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'space-between',
          height: '100%',
          width: '100%',
          position: 'relative',
          zIndex: 10,
        }}
      >
        {/* Top: Text Content */}
        <div style={{ display: 'flex', flexDirection: 'column' }}>
          {/* Label / Category */}
          {label && (
            <div
              style={{
                fontSize: '24px',
                fontWeight: 700,
                color: primaryGreen,
                textTransform: 'uppercase',
                letterSpacing: '0.25em',
                marginBottom: '24px',
                display: 'flex',
              }}
            >
              {label}
            </div>
          )}

          {/* Title */}
          <div
            style={{
              fontSize: '72px',
              fontWeight: 700,
              color: 'white',
              lineHeight: '1.1',
              maxWidth: '900px',
              marginBottom: '24px',
              display: 'flex',
              letterSpacing: '-0.02em',
            }}
          >
            {title}
          </div>

          {/* Description */}
          {description && (
            <div
              style={{
                fontSize: '36px',
                color: 'rgba(255,255,255,0.85)',
                maxWidth: '850px',
                lineHeight: '1.4',
                display: '-webkit-box',
                WebkitLineClamp: 3,
                WebkitBoxOrient: 'vertical',
                overflow: 'hidden',
                fontWeight: 400,
              }}
            >
              {description}
            </div>
          )}
        </div>

        {/* Bottom: Brand Footer */}
        <div
          style={{
            display: 'flex',
            alignItems: 'center',
          }}
        >
          {logo ? (
            // eslint-disable-next-line @next/next/no-img-element
            <img
              src={logo}
              alt="E-TIB GmbH"
              height="56"
              style={{ marginRight: '24px', objectFit: 'contain' }}
            />
          ) : (
            <div
              style={{
                width: '80px',
                height: '6px',
                backgroundColor: primaryGreen,
                borderRadius: '3px',
                marginRight: '24px',
              }}
            />
          )}
          {!logo && (
            <div
              style={{
                fontSize: '24px',
                fontWeight: 700,
                color: 'white',
                textTransform: 'uppercase',
                letterSpacing: '0.15em',
                display: 'flex',
              }}
            >
              E-TIB GmbH
            </div>
          )}
        </div>
      </div>

      {/* Primary Green Brand Strip */}
      <div
        style={{
          position: 'absolute',
          top: 0,
          right: 0,
          width: '12px',
          height: '100%',
          backgroundColor: primaryGreen,
        }}
      />
    </div>
  );
}