// Wordmark.jsx — re-usable brand marks
// Wordmark = the asterisk + stacked "DRY / POWDER" in heavy display sans.
// LogoLockup = wordmark + tagline "ONE JOB / MORE LEADS" set to the right.

function CrosshairMark(props) {
  // Alias kept for backwards compat in older components — renders the asterisk mark.
  return <Mark {...props}/>;
}

function Mark({ size = 24, color = '#FF3301' }) {
  return (
    <svg
      width={size} height={size * (348/358)}
      viewBox="341 576 358 348"
      fill="none" aria-hidden="true"
      style={{flexShrink: 0}}
    >
      <path fill={color} d="M 698.519531 771.480469 L 570.972656 771.480469 L 657.195312 857.703125 L 628.714844 886.183594 L 540.851562 798.320312 L 540.851562 923.085938 L 500.59375 923.085938 L 500.59375 799.820312 L 409.089844 891.320312 L 378.757812 860.988281 L 468.261719 771.480469 L 341.640625 771.480469 L 341.640625 728.515625 L 471.117188 728.515625 L 383.96875 641.363281 L 412.445312 612.886719 L 500.59375 701.105469 L 500.59375 576.914062 L 540.851562 576.914062 L 540.851562 698.820312 L 631.070312 608.601562 L 661.40625 639.007812 L 571.898438 728.515625 L 698.519531 728.515625 Z"/>
    </svg>
  );
}

// Wordmark variants:
//   `inline`  — mark + "DRY POWDER" on a single line. Use in nav, footer, small chrome.
//   `stacked` — mark + "DRY / POWDER" two lines. Use as the canonical wordmark.
function Wordmark({ size = 24, color = 'currentColor', markColor = '#FF3301', variant = 'inline' }) {
  if (variant === 'stacked') {
    const wmStyle = {
      display: 'inline-flex',
      alignItems: 'stretch',
      gap: size * 0.42,
      color,
      fontFamily: 'var(--font-display)',
      fontWeight: 400,
      fontSize: size,
      lineHeight: 0.92,
      letterSpacing: '-0.01em',
      textTransform: 'uppercase',
    };
    const wordWrap = {
      display: 'flex',
      flexDirection: 'column',
      justifyContent: 'center',
      gap: size * 0.06,
    };
    return (
      <span style={wmStyle} aria-label="Dry Powder">
        <Mark size={size * 2.0} color={markColor}/>
        <span style={wordWrap}>
          <span>Dry</span>
          <span>Powder</span>
        </span>
      </span>
    );
  }
  const wmStyle = {
    display: 'inline-flex',
    alignItems: 'center',
    gap: size * 0.36,
    color,
    fontFamily: 'var(--font-display)',
    fontWeight: 400,
    fontSize: size,
    lineHeight: 1,
    letterSpacing: '-0.005em',
    textTransform: 'uppercase',
  };
  return (
    <span style={wmStyle} aria-label="Dry Powder">
      <Mark size={size * 1.05} color={markColor}/>
      <span>Dry Powder</span>
    </span>
  );
}

// Full lockup with tagline — for splashes, footer hero, signature surfaces.
function LogoLockup({ size = 48, color = 'currentColor', markColor = '#FF3301', taglineColor = '#FF3301' }) {
  return (
    <span style={{display:'inline-flex', alignItems:'flex-start', gap: size * 0.32}} aria-label="Dry Powder — one job, more leads">
      <Wordmark size={size} color={color} markColor={markColor} variant="stacked"/>
      <span style={{
        fontFamily: 'var(--font-sans)', fontWeight: 700,
        fontSize: size * 0.22, lineHeight: 1.15, color: taglineColor,
        letterSpacing: '0.04em', textTransform: 'uppercase',
        paddingTop: size * 0.18,
      }}>
        One job<br/>More leads
      </span>
    </span>
  );
}

Object.assign(window, { Wordmark, Mark, CrosshairMark, LogoLockup });