/*
 * Tamak Group — 2026 logo
 *
 * Concept: the original mark already carries the brand DNA — red square +
 * an M-shaped stroke that reads as twin peaks. We keep both. What changes:
 *   • the peak stroke is rebuilt with a single confident path, miter joins
 *     on the peaks (sharp, contemporary) and round caps at the foot
 *   • proportions tightened: the icon is square, the wordmark sits at the
 *     icon's optical centerline, "GROUP" becomes a small caps tag at +0.22em
 *   • the wordmark uses Bricolage Grotesque at 700 with -0.03em tracking
 *   • a horizon line under the peaks suggests Mauritius, the island
 *   • the mark scales: works at 16px (favicon) and 240px (hero) without
 *     visual collapse, because the peak stroke remains proportional
 */

const TamakLogo = ({
  size = 48,
  variant = "horizontal",   // "horizontal" | "icon" | "stacked" | "wordmark"
  color = "auto",           // "auto" | "white" | "black"
  withHorizon = true,
}) => {
  const ink  = color === "white" ? "#FFFFFF" : color === "black" ? "#0F172A" : "var(--ink)";
  const mute = color === "white" ? "rgba(255,255,255,0.62)" : "var(--mute)";

  const Mark = (
    <svg
      width={size}
      height={size}
      viewBox="0 0 100 100"
      fill="none"
      role="img"
      aria-label="Tamak Group"
      style={{ display: "block", flexShrink: 0 }}
    >
      <rect width="100" height="100" rx="18" fill="#CC1B2B" />
      {/* Twin-peak M motif — single stroke, miter peaks, round caps */}
      <path
        d="M 18 76 L 34 32 L 50 56 L 66 32 L 82 76"
        stroke="#FFFFFF"
        strokeWidth="9"
        strokeLinecap="round"
        strokeLinejoin="miter"
        strokeMiterlimit="6"
      />
      {/* Horizon line — subtle island gesture */}
      {withHorizon && (
        <line
          x1="22" y1="82" x2="78" y2="82"
          stroke="#FFFFFF"
          strokeWidth="3"
          strokeLinecap="round"
          opacity="0.45"
        />
      )}
    </svg>
  );

  if (variant === "icon") return Mark;

  if (variant === "wordmark") {
    return (
      <span style={{ display: "inline-flex", alignItems: "baseline", gap: size * 0.18 }}>
        <span style={{
          fontFamily: "'Bricolage Grotesque', system-ui, sans-serif",
          fontWeight: 700,
          fontSize: size * 0.95,
          letterSpacing: "-0.035em",
          color: ink,
          lineHeight: 0.85,
        }}>
          Tamak
        </span>
        <span style={{
          fontFamily: "'Bricolage Grotesque', system-ui, sans-serif",
          fontWeight: 500,
          fontSize: size * 0.32,
          letterSpacing: "0.18em",
          textTransform: "uppercase",
          color: mute,
          lineHeight: 1,
        }}>
          Group
        </span>
      </span>
    );
  }

  if (variant === "stacked") {
    return (
      <div style={{ display: "inline-flex", flexDirection: "column", alignItems: "center", gap: size * 0.22 }}>
        {Mark}
        <div style={{ display: "flex", flexDirection: "column", alignItems: "center", lineHeight: 0.85 }}>
          <span style={{
            fontFamily: "'Bricolage Grotesque', system-ui, sans-serif",
            fontWeight: 700,
            fontSize: size * 0.66,
            letterSpacing: "-0.03em",
            color: ink,
          }}>
            Tamak
          </span>
          <span style={{
            fontFamily: "'Bricolage Grotesque', system-ui, sans-serif",
            fontWeight: 500,
            fontSize: size * 0.18,
            letterSpacing: "0.24em",
            textTransform: "uppercase",
            marginTop: size * 0.1,
            color: mute,
          }}>
            Group
          </span>
        </div>
      </div>
    );
  }

  // horizontal — default lockup
  return (
    <div style={{ display: "inline-flex", alignItems: "center", gap: size * 0.28 }}>
      {Mark}
      <div style={{ display: "flex", flexDirection: "column", lineHeight: 0.85, alignItems: "flex-start" }}>
        <span style={{
          fontFamily: "'Bricolage Grotesque', system-ui, sans-serif",
          fontWeight: 700,
          fontSize: size * 0.72,
          letterSpacing: "-0.03em",
          color: ink,
          lineHeight: 0.85,
        }}>
          Tamak
        </span>
        <span style={{
          fontFamily: "'Bricolage Grotesque', system-ui, sans-serif",
          fontWeight: 500,
          fontSize: size * 0.19,
          letterSpacing: "0.24em",
          textTransform: "uppercase",
          marginTop: size * 0.12,
          color: mute,
        }}>
          Group
        </span>
      </div>
    </div>
  );
};

window.TamakLogo = TamakLogo;