/* ============================================================
   ETP WORDMARK - the broken-underline logo
   ============================================================ */

const Wordmark = ({ size = 28, dark = false, mono = false }) => {
  const tealColor = '#1a6b5a';
  const dotColor = '#1a6b5a';
  const textColor = mono ? (dark ? '#f4f1eb' : '#1c1c1c') : (dark ? '#f4f1eb' : '#1c1c1c');
  const endColor = mono ? textColor : tealColor;

  // Underline geometry
  const underlineHeight = Math.max(2, size * 0.07);
  const gapWidth = size * 0.6;

  return (
    <span
      style={{
        fontFamily: "'Instrument Sans', sans-serif",
        fontWeight: 700,
        fontSize: size,
        letterSpacing: '-0.025em',
        lineHeight: 1,
        display: 'inline-flex',
        alignItems: 'baseline',
        position: 'relative',
        paddingBottom: size * 0.18,
      }}
    >
      <span style={{ color: endColor, position: 'relative' }}>
        end
        <span
          style={{
            position: 'absolute',
            left: 0,
            right: `calc(0% + ${gapWidth * 0.5}px)`,
            bottom: -underlineHeight * 1.5,
            height: underlineHeight,
            background: endColor,
          }}
        />
      </span>
      <span style={{ color: textColor, position: 'relative' }}>
        thepattern
        <span
          style={{
            position: 'absolute',
            left: gapWidth * 0.2,
            right: 0,
            bottom: -underlineHeight * 1.5,
            height: underlineHeight,
            background: textColor,
          }}
        />
      </span>
      <span
        style={{
          display: 'inline-block',
          width: size * 0.18,
          height: size * 0.18,
          background: mono ? textColor : dotColor,
          marginLeft: size * 0.06,
          alignSelf: 'flex-end',
          marginBottom: size * 0.04,
        }}
      />
    </span>
  );
};

window.Wordmark = Wordmark;