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, sans-serif',
  };

  return (
    <div style={containerStyle}>
      {/* Background Image with Overlay */}
      {image && (
        <div
          style={{
            position: 'absolute',
            inset: 0,
            display: 'flex',
          }}
        >
          <img
            src={image}
            alt=""
            style={{
              width: '100%',
              height: '100%',
              objectFit: 'cover',
            }}
          />
          <div
            style={{
              position: 'absolute',
              inset: 0,
              background: 'linear-gradient(to right, rgba(0,26,77,0.9) 0%, rgba(0,26,77,0.4) 100%)',
            }}
          />
        </div>
      )}

      {/* Decorative Scribble Circle (Simplified for Satori) */}
      <div
        style={{
          position: 'absolute',
          top: '-100px',
          right: '-100px',
          width: '600px',
          height: '600px',
          borderRadius: '50%',
          background: `radial-gradient(circle, ${accentGreen}1a 0%, transparent 70%)`,
          display: 'flex',
        }}
      />

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

        {/* Title */}
        <div
          style={{
            fontSize: '72px',
            fontWeight: '900',
            color: 'white',
            lineHeight: '1.1',
            maxWidth: '900px',
            marginBottom: '32px',
            display: 'flex',
          }}
        >
          {title}
        </div>

        {/* Description */}
        {description && (
          <div
            style={{
              fontSize: '32px',
              color: 'rgba(255,255,255,0.8)',
              maxWidth: '800px',
              lineHeight: '1.4',
              display: 'flex',
            }}
          >
            {description}
          </div>
        )}
      </div>

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

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