import React from 'react';

/**
 * RmpMark — compact static "Relevant Media Properties" lockup placed
 * inline next to any RMP text mention on a property site.
 *
 * Variants:
 *   mode="light" → for placement on dark backgrounds (BB, BE, SMB, TCG footers)
 *   mode="dark"  → for placement on light backgrounds (AV footer, white pages)
 *
 * Mirrors the geometry of the canonical RelevantMediaPropertiesLogo on the
 * RMP site but ships a fully static inline SVG (no JS, no animation) so it
 * works inside React Server Components and email-template renders.
 *
 * Link target is always the public RMP homepage.
 */
export type RmpMarkMode = 'light' | 'dark';

interface RmpMarkProps {
  /** 'light' = light wordmark on dark bg; 'dark' = dark wordmark on light bg. */
  mode?: RmpMarkMode;
  /** Vertical size in px. Width is auto via SVG aspect ratio. Default 22. */
  height?: number;
  /** Extra wrapper classes. Wrapper is inline-flex by default. */
  className?: string;
  /** Override the link href — defaults to the RMP homepage. */
  href?: string;
  /** Hide the link wrapper (renders just the SVG). */
  asImage?: boolean;
}

export default function RmpMark({
  mode = 'light',
  height = 22,
  className = '',
  href = 'https://relevantmediaproperties.com',
  asImage = false,
}: RmpMarkProps) {
  const inkColor = mode === 'light' ? '#F4F6FF' : '#0A0A0A';
  const accent = '#D60701';

  const VB_W = 220;
  const VB_H = 44;
  const CELL = 9.5;
  const GAP = 1.5;
  const TOTAL_GRID = 3 * CELL + 2 * GAP;
  const GRID_Y = (VB_H - TOTAL_GRID) / 2;
  const WM_X = TOTAL_GRID + 10;
  const ACCENT_SET = new Set<string>(['0-2', '2-0']);

  const cells: { id: string; x: number; y: number; isAccent: boolean }[] = [];
  for (let r = 0; r < 3; r++) {
    for (let c = 0; c < 3; c++) {
      const id = `${r}-${c}`;
      cells.push({
        id,
        x: c * (CELL + GAP),
        y: r * (CELL + GAP),
        isAccent: ACCENT_SET.has(id),
      });
    }
  }

  const svg = (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox={`0 0 ${VB_W} ${VB_H}`}
      height={height}
      width="auto"
      preserveAspectRatio="xMinYMid meet"
      role="img"
      aria-label="Relevant Media Properties"
      style={{ display: 'inline-block', verticalAlign: 'middle' }}
    >
      <g transform={`translate(0, ${GRID_Y})`}>
        {cells.map((c) => (
          <rect
            key={c.id}
            x={c.x}
            y={c.y}
            width={CELL}
            height={CELL}
            rx="0.5"
            ry="0.5"
            fill={c.isAccent ? accent : inkColor}
          />
        ))}
      </g>
      <g transform={`translate(${WM_X}, 0)`}>
        <text
          x="0"
          y="22"
          fill={inkColor}
          fontFamily="'Inter','SF Pro Display',system-ui,-apple-system,sans-serif"
          fontWeight="800"
          fontSize="17"
          letterSpacing="-0.4"
        >
          RELEVANT
        </text>
        <text
          x="0"
          y="34"
          fill={accent}
          fontFamily="'Inter','SF Pro Display',system-ui,-apple-system,sans-serif"
          fontWeight="700"
          fontSize="7"
          letterSpacing="3.4"
        >
          MEDIA PROPERTIES
        </text>
      </g>
    </svg>
  );

  if (asImage) return svg;
  return (
    <a
      href={href}
      target={href.startsWith('http') ? '_blank' : undefined}
      rel={href.startsWith('http') ? 'noopener noreferrer' : undefined}
      aria-label="Visit Relevant Media Properties"
      className={`inline-flex items-center align-middle opacity-90 hover:opacity-100 transition-opacity ${className}`}
      style={{ lineHeight: 0 }}
    >
      {svg}
    </a>
  );
}
