/* global React */
// Sinux S-Hex Logo — programmatic SVG with brand colorways.
// Hexagon frame with diagonal S-ribbon cutting through.

const SHexLogo = ({ size = 40, variant = "group", animated = false }) => {
  // Color schemes per subsidiary
  const palettes = {
    group:   { outer: "#263675", inner: "#3866AF", glow: "#3866AF" },
    consult: { outer: "#00676E", inner: "#01A0A6", glow: "#01A0A6" },
    capital: { outer: "#A08102", inner: "#D3AF37", glow: "#D3AF37" },
    mono:    { outer: "#1F2937", inner: "#F4F6FB", glow: "#F4F6FB" },
  };
  const c = palettes[variant] || palettes.group;
  const id = `shex-${variant}-${Math.floor(Math.random() * 1e6)}`;

  // Hexagon points (flat-top), centered at 50,50, radius 46
  const hex = "50,4 92,28 92,72 50,96 8,72 8,28";
  const innerHex = "50,16 82,33 82,67 50,84 18,67 18,33";

  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 100 100"
      style={{ display: "block", overflow: "visible" }}
      className={animated ? "s-hex animated" : "s-hex"}
    >
      <defs>
        <linearGradient id={`${id}-outer`} x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor={c.outer} />
          <stop offset="100%" stopColor={c.inner} />
        </linearGradient>
        <linearGradient id={`${id}-s`} x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor={c.inner} />
          <stop offset="100%" stopColor={c.outer} />
        </linearGradient>
        <filter id={`${id}-glow`} x="-50%" y="-50%" width="200%" height="200%">
          <feGaussianBlur stdDeviation="2" />
        </filter>
      </defs>

      {/* outer hex frame */}
      <polygon
        points={hex}
        fill="none"
        stroke={`url(#${id}-outer)`}
        strokeWidth="5"
        strokeLinejoin="round"
      />

      {/* inner hex subtle */}
      <polygon
        points={innerHex}
        fill="none"
        stroke={c.inner}
        strokeOpacity="0.15"
        strokeWidth="1"
      />

      {/* diagonal S-ribbon — geometric, ribbon-like */}
      <g>
        <path
          d="M 32 30 L 64 30 Q 72 30 72 38 Q 72 46 64 46 L 40 46 Q 28 46 28 56 Q 28 66 40 66 L 68 66 Q 72 66 72 70 L 72 72 L 36 72 Q 22 72 22 58 Q 22 50 30 46 Q 22 42 22 34 L 22 30 Z"
          fill={`url(#${id}-s)`}
          opacity="0.95"
        />
        {/* highlight cut */}
        <path
          d="M 28 30 L 60 30 Q 66 30 66 36 L 26 36 Z"
          fill={c.inner}
          opacity="0.35"
        />
      </g>
    </svg>
  );
};

// Wordmark + mark composition
const Brandmark = ({ variant = "group", showWord = true, size = 32 }) => {
  const labels = {
    group:   "SINUX GROUP",
    consult: "SINUX CONSULTING",
    capital: "SINUX CAPITAL",
  };
  return (
    <span className="brand" style={{ display: "inline-flex", alignItems: "center", gap: 10 }}>
      <SHexLogo size={size} variant={variant} />
      {showWord && (
        <span
          className="brand-text"
          style={{ fontFamily: "'Michroma','Orbitron',sans-serif", letterSpacing: "0.18em", fontSize: size > 40 ? 16 : 13 }}
        >
          {labels[variant]}
        </span>
      )}
    </span>
  );
};

window.SHexLogo = SHexLogo;
window.Brandmark = Brandmark;