/* global React */

function CustomE({ fillStyle, size = 22 }) {
  const width = Math.round(size * 0.64);
  const longBar = Math.round(width * 0.78);
  const shortBar = Math.round(width * 0.52);
  const barH = 2;

  return (
    <span
      aria-hidden="true"
      style={{
        position: "relative",
        display: "inline-block",
        width: `${width}px`,
        height: `${size}px`,
        display: "flex",
        alignItems: "center",
      }}
    >
      <span style={{ position: "absolute", left: 0, top: "2px", width: `${longBar}px`, height: `${barH}px`, ...fillStyle }} />
      <span style={{ position: "absolute", left: 0, top: "50%", transform: "translateY(-50%)", width: `${shortBar}px`, height: `${barH}px`, ...fillStyle }} />
      <span style={{ position: "absolute", left: 0, bottom: "2px", width: `${longBar}px`, height: `${barH}px`, ...fillStyle }} />
    </span>
  );
}

function CustomA({ fontSize, stroke, id = "aGrad" }) {
  const width = Math.round(fontSize * 0.72);
  const height = Math.round(fontSize * 0.82);
  const sw = Math.max(1.8, Math.round(stroke * 10) / 10);
  return (
    <span
      aria-hidden="true"
      style={{
        position: "relative",
        display: "inline-flex",
        alignItems: "flex-end",
        width,
        height,
      }}
    >
      <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`} fill="none"
        style={{ display: "block" }}>
        <defs>
          <linearGradient id={id} x1="0" y1="0" x2={width} y2={height} gradientUnits="userSpaceOnUse">
            <stop offset="0%" stopColor="#F3F5F7" />
            <stop offset="62%" stopColor="#F3F5F7" />
            <stop offset="100%" stopColor="#19B5E8" />
          </linearGradient>
        </defs>
        <line x1={width / 2} y1={0} x2={0} y2={height} stroke={`url(#${id})`} strokeWidth={sw} strokeLinecap="square" />
        <line x1={width / 2} y1={0} x2={width} y2={height} stroke={`url(#${id})`} strokeWidth={sw} strokeLinecap="square" />
      </svg>
    </span>
  );
}

function WordmarkLine() {
  const titleSize = 22;
  const stroke = Math.max(2, Math.round(titleSize * 0.07));
  const gap = 12;
  const wordGap = 26;
  const mixedColor = "linear-gradient(90deg, #F3F5F7 0%, #F3F5F7 62%, #19B5E8 100%)";
  const baseStyle = {
    fontFamily: "'Inter Tight', 'Geist', system-ui, sans-serif",
    fontSize: `${titleSize}px`,
    fontWeight: 500,
    lineHeight: 1,
    display: "inline-flex",
    alignItems: "center",
  };
  const glyphBox = {
    height: `${titleSize}px`,
    minWidth: "14px",
    display: "inline-flex",
    alignItems: "center",
    justifyContent: "center",
  };
  const gradientText = {
    backgroundImage: mixedColor,
    WebkitBackgroundClip: "text",
    backgroundClip: "text",
    color: "transparent",
  };
  const gradientFill = {
    backgroundImage: mixedColor,
  };

  return (
    <div style={{ display: "flex", alignItems: "center", whiteSpace: "nowrap" }}>
      <span style={baseStyle}>
        <span style={{ ...glyphBox, ...gradientText, marginRight: `${gap}px` }}>D</span>
        <span style={{ ...glyphBox, marginRight: `${gap}px` }}><CustomE fillStyle={gradientFill} size={titleSize} /></span>
        <span style={{ ...glyphBox, ...gradientText, marginRight: `${gap}px` }}>L</span>
        <span style={{ ...glyphBox, ...gradientText, marginRight: `${gap}px` }}>T</span>
        <span style={glyphBox}><CustomA fontSize={titleSize} stroke={stroke} id="aGrad1" /></span>
      </span>

      <span style={{ width: `${wordGap}px`, flex: "0 0 auto" }} />

      <span style={baseStyle}>
        <span style={{ ...glyphBox, ...gradientText, marginRight: `${gap}px` }}>S</span>
        <span style={{ ...glyphBox, ...gradientText, marginRight: `${gap}px` }}>T</span>
        <span style={{ ...glyphBox, ...gradientText, marginRight: `${gap}px` }}>R</span>
        <span style={{ ...glyphBox, marginRight: `${gap}px` }}><CustomA fontSize={titleSize} stroke={stroke} id="aGrad2" /></span>
        <span style={{ ...glyphBox, ...gradientText }}>T</span>
      </span>
    </div>
  );
}

function Wordmark({ subtitle }) {
  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        alignItems: "flex-start",
        justifyContent: "center",
        minWidth: 0,
      }}
    >
      <WordmarkLine />
      <div
        style={{
          marginTop: "6px",
          fontFamily: "'Inter Tight', 'Geist', system-ui, sans-serif",
          fontSize: "6px",
          fontWeight: 500,
          lineHeight: 1,
          letterSpacing: "0.24em",
          color: "#8A939B",
          textTransform: "uppercase",
          whiteSpace: "nowrap",
        }}
      >
        {subtitle || "OFFENSIVE SECURITY · APPLICATION SECURITY"}
      </div>
    </div>
  );
}

function Logo({ onClick, size = "sm", withSubtitle = false, subtitle }) {
  const cfg = {
    sm: {
      mark: 34,
      dividerHeight: 46,
      dividerMarginLeft: "18px",
      dividerMarginRight: "18px",
    },
    md: {
      mark: 38,
      dividerHeight: 50,
      dividerMarginLeft: "20px",
      dividerMarginRight: "20px",
    },
    lg: {
      mark: 64,
      dividerHeight: 0,
      dividerMarginLeft: "0px",
      dividerMarginRight: "0px",
    },
  }[size] || {
    mark: 34,
    dividerHeight: 46,
    dividerMarginLeft: "18px",
    dividerMarginRight: "18px",
  };

  return (
    <button
      onClick={onClick}
      aria-label="DeltaStrat home"
      style={{
        display: "flex",
        alignItems: "center",
        padding: "0px",
        margin: "0px",
        background: "transparent",
        border: "none",
        cursor: onClick ? "pointer" : "default",
        flexShrink: 0,
      }}
    >
      <DeltaMark size={cfg.mark} strokeWidth={size === "lg" ? 2.4 : 2.3} />
      {cfg.dividerHeight > 0 && (
        <span
          aria-hidden="true"
          style={{
            width: "1px",
            height: `${cfg.dividerHeight}px`,
            background: "#2A2F36",
            marginLeft: cfg.dividerMarginLeft,
            marginRight: cfg.dividerMarginRight,
            flexShrink: 0,
          }}
        />
      )}
      <Wordmark subtitle={withSubtitle ? (subtitle || "OFFENSIVE SECURITY · APPLICATION SECURITY") : ""} />
    </button>
  );
}