"use client";

import React from "react";

// Brand colours from the Diverse Stationery identity
const TEAL = "#0E9C8E";
const TAN = "#C9B79C";
const CHARCOAL = "#3A3E42";

/**
 * The interlocking "SD" monogram mark, recreated as scalable SVG.
 * - Tan "S" curve on top
 * - Charcoal triangular accent
 * - Teal "D" body below
 */
export const LogoMark: React.FC<{ className?: string; title?: string }> = ({
  className = "w-10 h-10",
  title = "Diverse Stationery",
}) => {
  return (
    <svg
      viewBox="0 0 120 120"
      className={className}
      role="img"
      aria-label={title}
      xmlns="http://www.w3.org/2000/svg"
    >
      <title>{title}</title>

      {/* Teal "D" body (outer + inner counter using evenodd) */}
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        fill={TEAL}
        d="M26 50 L70 50 C98 50 115 63.5 115 78.5 C115 93.5 98 107 70 107 L26 107 Z
           M45 64 L69 64 C88 64 99 70 99 78.5 C99 87 88 93 69 93 L45 93 Z"
      />

      {/* Charcoal triangular accent at the intersection */}
      <path fill={CHARCOAL} d="M26 50 L45 50 L45 64 Z" />

      {/* Tan "S" stroke on top */}
      <path
        fill="none"
        stroke={TAN}
        strokeWidth={15}
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M90 25
           C90 15.5 78 12 63 13
           C47 14 36 20.5 37 31
           C38 41 52 44.5 65 47.5
           C79.5 50.5 91 53.5 90 64
           C89 74 76 77.5 61 76.5
           C47 75.5 37.5 70.5 36 62.5"
      />
    </svg>
  );
};

/**
 * The full horizontal / stacked logo: monogram + "DIVERSE STATIONERY" wordmark.
 */
export const LogoFull: React.FC<{
  className?: string;
  markClassName?: string;
  invert?: boolean;
}> = ({ className = "", markClassName = "w-11 h-11", invert = false }) => {
  return (
    <div className={`flex items-center gap-2.5 ${className}`}>
      <LogoMark className={markClassName} />
      <div className="flex flex-col leading-none">
        <span
          className="font-black tracking-tight text-lg sm:text-xl"
          style={{ color: TEAL }}
        >
          DIVERSE
        </span>
        <span
          className="font-black tracking-[0.18em] text-[11px] sm:text-xs"
          style={{ color: TAN }}
        >
          STATIONERY
        </span>
      </div>
    </div>
  );
};

export const BRAND_COLORS = { TEAL, TAN, CHARCOAL };