import React from "react";

// AV BEAT brand mark.
//
// Inline SVG component so the logo ships in the HTML stream (no extra
// network request, no FOIT, scales cleanly on every viewport). The mark
// is a forward-leaning AV monogram inside a rounded square, with a
// subtle horizontal beam detail at ~62% height. Paired with the AV BEAT
// wordmark and an optional tagline "Inside the Future of Pro AV."
//
// Variants:
//   - `full`     — emblem + wordmark + tagline (desktop)
//   - `wordmark` — emblem + wordmark only      (tablet)
//   - `icon`     — emblem only                  (mobile)

type Variant = "full" | "wordmark" | "icon";

interface AvBeatLogoProps {
  variant?: Variant;
  className?: string;
  emblemSize?: number;
  ariaLabel?: string;
}

export function AvBeatEmblem({ size = 44 }: { size?: number }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width={size}
      height={size}
      viewBox="0 0 64 64"
      role="img"
      aria-hidden="true"
      focusable="false"
      style={{ display: "block" }}
    >
      <defs>
        <linearGradient id="avb-emblem-fill" x1="0" y1="0" x2="64" y2="64" gradientUnits="userSpaceOnUse">
          <stop offset="0%" stopColor="#1D4ED8" />
          <stop offset="100%" stopColor="#0F172A" />
        </linearGradient>
      </defs>
      {/* Rounded-square base */}
      <rect x="0" y="0" width="64" height="64" rx="14" ry="14" fill="url(#avb-emblem-fill)" />
      {/* Forward-leaning AV monogram. The A and V share a center vertex
          near the lower-mid line; the strokes lean ~8deg right to read
          as forward motion. */}
      <g fill="#FFFFFF">
        {/* A — left side of the monogram */}
        <path d="M9.5 50 L20.5 14 L26.5 14 L18 50 Z" />
        {/* A cross-bar (horizontal beam — the subtle accent the brief asks for) */}
        <rect x="13.5" y="36" width="14" height="3.2" rx="0.8" fill="#38BDF8" />
        {/* V — right side, mirror-leaning into the A */}
        <path d="M37.5 14 L46 50 L52 50 L41.5 14 Z" />
        {/* Crossbar bridging A→V, the "beam" detail that ties them together */}
        <rect x="20" y="32.5" width="24" height="2.2" rx="0.8" fill="#FFFFFF" opacity="0.92" />
      </g>
    </svg>
  );
}

export default function AvBeatLogo({
  variant = "full",
  className = "",
  emblemSize = 44,
  ariaLabel = "AV Beat — Inside the Future of Pro AV",
}: AvBeatLogoProps) {
  return (
    <span
      className={`avb-logo avb-logo--${variant} ${className}`}
      role="img"
      aria-label={ariaLabel}
      style={{ display: "inline-flex", alignItems: "center", gap: 12, lineHeight: 1 }}
    >
      <AvBeatEmblem size={emblemSize} />
      {variant !== "icon" && (
        <span style={{ display: "inline-flex", flexDirection: "column", gap: 2, minWidth: 0 }}>
          <span
            style={{
              fontFamily: "var(--font-sans), -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif",
              fontWeight: 800,
              fontSize: variant === "full" ? 24 : 22,
              letterSpacing: "0.12em",
              color: "var(--brand-navy, #0F172A)",
              textTransform: "uppercase",
              lineHeight: 1,
            }}
          >
            AV BEAT
          </span>
          {variant === "full" && (
            <span
              className="avb-logo__tagline"
              style={{
                fontFamily: "var(--font-sans), -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif",
                fontWeight: 500,
                fontSize: 11,
                letterSpacing: "0.04em",
                color: "rgba(255, 255, 255, 0.85)",
                lineHeight: 1.2,
                whiteSpace: "nowrap",
              }}
            >
              Inside the Future of Pro AV
            </span>
          )}
        </span>
      )}
    </span>
  );
}
