/* WildTrack — Three logo directions. Each takes `tone` ('light'|'dark') and `size`. */

/* DIRECTION A — ABSTRACT
   Geometric tracking-reticle mark with a GPS-pin negative space.
   Brand-neutral — works for any wildlife/tracking platform. */
const LogoMarkA = ({ size = 200, tone = 'light' }) => {
  const fg = tone === 'light' ? '#2D6A4F' : '#52B788';
  const accent = tone === 'light' ? '#52B788' : '#D8F3DC';
  return (
    <svg width={size} height={size} viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
      <circle cx="100" cy="100" r="78" fill="none" stroke={fg} strokeWidth="6"
        strokeDasharray="38 22" strokeLinecap="butt" transform="rotate(-20 100 100)"/>
      <circle cx="100" cy="100" r="58" fill="none" stroke={fg} strokeWidth="3"/>
      <line x1="100" y1="14" x2="100" y2="34" stroke={fg} strokeWidth="6" strokeLinecap="round"/>
      <line x1="100" y1="166" x2="100" y2="186" stroke={fg} strokeWidth="6" strokeLinecap="round"/>
      <line x1="14" y1="100" x2="34" y2="100" stroke={fg} strokeWidth="6" strokeLinecap="round"/>
      <line x1="166" y1="100" x2="186" y2="100" stroke={fg} strokeWidth="6" strokeLinecap="round"/>
      <path d="M100 70 C82 70 78 86 88 100 L100 124 L112 100 C122 86 118 70 100 70 Z"
        fill={fg}/>
      <circle cx="100" cy="88" r="7" fill={tone === 'light' ? 'white' : '#0F1F18'}/>
      <circle cx="100" cy="100" r="3" fill={accent}/>
    </svg>
  );
};

/* DIRECTION B — TYPOGRAPHIC
   Geometric W monogram with a tracking chevron above.
   The W's strokes evoke both a peak/range and an upward arrow — movement & terrain. */
const LogoMarkB = ({ size = 200, tone = 'light' }) => {
  const fg = tone === 'light' ? '#2D6A4F' : '#52B788';
  const accent = tone === 'light' ? '#52B788' : '#D8F3DC';
  return (
    <svg width={size} height={size} viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
      {/* The W — built from four parallelograms for a geometric, mountain-range feel */}
      <g fill={fg}>
        <polygon points="28,40 50,40 86,164 64,164"/>
        <polygon points="68,164 90,164 116,72 100,72"/>
        <polygon points="100,72 116,72 142,164 120,164"/>
        <polygon points="124,164 146,164 172,40 150,40"/>
      </g>
      {/* Tracking chevron above — same as the original B */}
      <path d="M82 28 L100 14 L118 28" fill="none" stroke={accent} strokeWidth="5" strokeLinecap="round" strokeLinejoin="round"/>
      {/* Tiny dot inside the V of the W — the "track" reading */}
      <circle cx="100" cy="120" r="5" fill={accent}/>
    </svg>
  );
};

/* DIRECTION C — EMBLEM
   Shield/badge containing antlers + crosshair, fit for patches and app icons. */
const LogoMarkC = ({ size = 200, tone = 'light' }) => {
  const fg = tone === 'light' ? '#2D6A4F' : '#52B788';
  const bg = tone === 'light' ? 'white' : '#0F1F18';
  const accent = tone === 'light' ? '#D8F3DC' : '#1A2F22';
  return (
    <svg width={size} height={size} viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
      <path d="M100 16 L172 36 V104 C172 144 140 174 100 184 C60 174 28 144 28 104 V36 Z"
        fill={fg} stroke={fg} strokeWidth="2" strokeLinejoin="round"/>
      <path d="M100 28 L160 44 V102 C160 136 134 162 100 172 C66 162 40 136 40 102 V44 Z"
        fill="none" stroke={accent} strokeWidth="2"/>
      <circle cx="100" cy="108" r="30" fill="none" stroke={bg} strokeWidth="3"/>
      <line x1="100" y1="78" x2="100" y2="138" stroke={bg} strokeWidth="2"/>
      <line x1="70" y1="108" x2="130" y2="108" stroke={bg} strokeWidth="2"/>
      <circle cx="100" cy="108" r="5" fill={bg}/>
      <g fill="none" stroke={bg} strokeWidth="4" strokeLinecap="round" strokeLinejoin="round">
        <path d="M100 78 L100 60"/>
        <path d="M100 70 L86 60 L86 50"/>
        <path d="M86 60 L78 56"/>
        <path d="M100 70 L114 60 L114 50"/>
        <path d="M114 60 L122 56"/>
        <path d="M100 62 L92 52"/>
        <path d="M100 62 L108 52"/>
      </g>
      <path d="M70 156 L100 162 L130 156 L130 168 L100 174 L70 168 Z" fill={accent}/>
      <text x="100" y="167" textAnchor="middle" fontFamily="Syne, sans-serif"
        fontWeight="700" fontSize="9" fill={fg} letterSpacing="2">EST · 2026</text>
    </svg>
  );
};

/* WORDMARK — Wild + Track */
const Wordmark = ({ height = 36, tone = 'light' }) => {
  const fg = tone === 'light' ? '#1B1B1B' : '#FFFFFF';
  const accent = tone === 'light' ? '#2D6A4F' : '#52B788';
  return (
    <span style={{
      fontFamily: 'Syne, sans-serif',
      fontWeight: 800,
      fontSize: height * 0.62,
      letterSpacing: '0.02em',
      color: fg,
      lineHeight: 1,
      display: 'inline-flex',
      alignItems: 'baseline',
      gap: 0,
    }}>
      Wild<span style={{ color: accent }}>Track</span>
    </span>
  );
};

/* HORIZONTAL LOCKUP — Mark + wordmark + tagline */
const Lockup = ({ direction = 'A', tone = 'light', tagline = true }) => {
  const Mark = { A: LogoMarkA, B: LogoMarkB, C: LogoMarkC }[direction];
  const muted = tone === 'light' ? '#6C757D' : '#8BAF96';
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 16 }}>
      <Mark size={56} tone={tone}/>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
        <Wordmark height={32} tone={tone}/>
        {tagline && (
          <span style={{
            fontFamily: 'JetBrains Mono, monospace',
            fontSize: 9,
            letterSpacing: '0.22em',
            color: muted,
            textTransform: 'uppercase',
          }}>
            Wildlife Management · Traced
          </span>
        )}
      </div>
    </div>
  );
};

window.LogoMarkA = LogoMarkA;
window.LogoMarkB = LogoMarkB;
window.LogoMarkC = LogoMarkC;
window.Wordmark = Wordmark;
window.Lockup = Lockup;