klz-cables.com/components/OGImageTemplate.tsx

import React from 'react';

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

export function OGImageTemplate({
  title,
  description,
  label,
  image,
  mode = 'dark',
}: OGImageTemplateProps) {
  const primaryBlue = '#001a4d';
  const accentGreen = '#82ed20';
  const saturatedBlue = '#011dff';

  const containerStyle: React.CSSProperties = {
    height: '100%',
    width: '100%',
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'flex-start',
    justifyContent: 'center',
    backgroundColor: mode === 'light' ? '#ffffff' : primaryBlue,
    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',
          }}
        >
          <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(to right, rgba(0,26,77,0.95), rgba(0,26,77,0.6))',
            }}
          />
        </div>
      )}

      {/* Decorative Brand Accent (Top Right) */}
      <div
        style={{
          position: 'absolute',
          top: '-150px',
          right: '-150px',
          width: '600px',
          height: '600px',
          borderRadius: '300px',
          backgroundColor: `${accentGreen}15`,
          display: 'flex',
        }}
      />

      <div style={{ display: 'flex', flexDirection: 'column', position: 'relative', zIndex: 10 }}>
        {/* Label / Category */}
        {label && (
          <div
            style={{
              fontSize: '24px',
              fontWeight: 700,
              color: accentGreen,
              textTransform: 'uppercase',
              letterSpacing: '0.3em',
              marginBottom: '32px',
              display: 'flex',
            }}
          >
            {label}
          </div>
        )}

        {/* Title */}
        <div
          style={{
            fontSize: title.length > 40 ? '64px' : '82px',
            fontWeight: 700,
            color: 'white',
            lineHeight: '1.05',
            maxWidth: '950px',
            marginBottom: '40px',
            display: 'flex',
            letterSpacing: '-0.02em',
          }}
        >
          {title}
        </div>

        {/* Description */}
        {description && (
          <div
            style={{
              fontSize: '32px',
              color: 'rgba(255,255,255,0.7)',
              maxWidth: '850px',
              lineHeight: '1.4',
              display: 'flex',
              fontWeight: 400,
            }}
          >
            {description.length > 160 ? description.substring(0, 157) + '...' : description}
          </div>
        )}
      </div>

      {/* Brand Footer */}
      <div
        style={{
          position: 'absolute',
          bottom: '80px',
          left: '80px',
          display: 'flex',
          alignItems: 'center',
        }}
      >
        <div
          style={{
            width: '80px',
            height: '6px',
            backgroundColor: accentGreen,
            borderRadius: '3px',
            marginRight: '24px',
          }}
        />
        <div
          style={{
            fontSize: '24px',
            fontWeight: 700,
            color: 'white',
            textTransform: 'uppercase',
            letterSpacing: '0.15em',
            display: 'flex',
          }}
        >
          KLZ Cables
        </div>
      </div>

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