// brand.jsx — Thruline Solutions shared brand system + logo marks
// Tokens, six geometric logo marks (built from primitives), wordmark,
// and a LogoBoard layout that shows each mark as a real identity system:
// hero mark, horizontal + stacked lockups, and field treatments
// (lapel pin / 1-color / reversed). Exports to window.

const T = {
  ink:    '#1A1A1A',
  cream:  '#FFF8F0',
  orange: '#EC5A14',
  orange2:'#C21A0A',
  amber:  '#F9A826',
  paper:  '#FFFFFF',
  line:   'rgba(26,26,26,0.12)',
  mute:   'rgba(26,26,26,0.55)',
};

// ── Six marks. Each takes {c} (primary color) + {a} (accent color), draws in
//    a 100×100 box, uses geometric primitives only (lines, polygons, circles).

function MarkThruline({ c = T.ink, a = T.orange }) {
  // A through-line resolving into a forward chevron — continuity + mission.
  return (
    <svg viewBox="0 0 100 100" width="100%" height="100%" fill="none"
      stroke={c} strokeWidth="9" strokeLinecap="round" strokeLinejoin="round">
      <line x1="10" y1="50" x2="64" y2="50" stroke={a} />
      <polyline points="56,28 82,50 56,72" />
    </svg>
  );
}

function MarkShield({ c = T.ink, a = T.orange }) {
  // Shield with the through-line passing across it: protection + continuity.
  return (
    <svg viewBox="0 0 100 100" width="100%" height="100%" fill="none"
      stroke={c} strokeWidth="7" strokeLinecap="round" strokeLinejoin="round">
      <path d="M50 14 L80 24 V50 C80 68 67 80 50 88 C33 80 20 68 20 50 V24 Z" />
      <line x1="14" y1="46" x2="86" y2="46" stroke={a} strokeWidth="8" />
    </svg>
  );
}

function MarkStar({ c = T.orange, a = T.ink }) {
  // Four-point north star — directional, mission-aligned.
  return (
    <svg viewBox="0 0 100 100" width="100%" height="100%">
      <polygon fill={c}
        points="50,6 59,41 94,50 59,59 50,94 41,59 6,50 41,41" />
      <circle cx="50" cy="50" r="6.5" fill={a} />
    </svg>
  );
}

function MarkMonogram({ c = T.ink, a = T.orange }) {
  // Monogram T inside a ring with crosshair ticks — operational, coin-ready.
  return (
    <svg viewBox="0 0 100 100" width="100%" height="100%" fill="none"
      stroke={c} strokeWidth="6" strokeLinecap="round">
      <circle cx="50" cy="50" r="40" strokeWidth="5" />
      <line x1="50" y1="8" x2="50" y2="16" />
      <line x1="50" y1="84" x2="50" y2="92" />
      <line x1="8" y1="50" x2="16" y2="50" />
      <line x1="84" y1="50" x2="92" y2="50" />
      <line x1="30" y1="38" x2="70" y2="38" stroke={a} strokeWidth="9" />
      <line x1="50" y1="38" x2="50" y2="72" strokeWidth="9" />
    </svg>
  );
}

function MarkCoin({ c = T.ink, a = T.orange }) {
  // Medallion roundel — concentric rings, forward chevron + base line,
  // top star. Reads as a challenge coin natively.
  return (
    <svg viewBox="0 0 100 100" width="100%" height="100%" fill="none"
      stroke={c} strokeLinecap="round" strokeLinejoin="round">
      <circle cx="50" cy="50" r="42" strokeWidth="4" />
      <circle cx="50" cy="50" r="33" strokeWidth="2.5" />
      <polygon points="50,18 53,27 62,27 55,33 57,42 50,37 43,42 45,33 38,27 47,27" fill={a} stroke="none" />
      <polyline points="34,62 50,48 66,62" strokeWidth="7" stroke={a} />
      <line x1="34" y1="72" x2="66" y2="72" strokeWidth="7" />
    </svg>
  );
}

// ── Wordmark (clean uppercase). Used across lockups in non-comic boards.
function Wordmark({ color = T.ink, sub = T.mute, size = 30, gap = 0.18, stacked = false }) {
  return (
    <div style={{ lineHeight: 0.95 }}>
      <div style={{ fontFamily: '"Archivo", sans-serif', fontWeight: 800, fontSize: size,
        letterSpacing: gap + 'em', color, textTransform: 'uppercase' }}>Thruline</div>
      <div style={{ fontFamily: '"Spline Sans Mono", monospace', fontWeight: 500,
        fontSize: size * 0.32, letterSpacing: '0.42em', color: sub, textTransform: 'uppercase',
        marginTop: size * 0.16, marginLeft: stacked ? 0 : '0.1em' }}>Solutions</div>
    </div>
  );
}

// ── A field-treatment chip (lapel pin / 1-color / reversed)
function Chip({ label, bg, children, ring }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 9, flex: 1 }}>
      <div style={{ width: 66, height: 66, borderRadius: '50%', background: bg,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        boxShadow: ring || 'none', position: 'relative' }}>
        <div style={{ width: 38, height: 38 }}>{children}</div>
      </div>
      <div style={{ fontFamily: '"Spline Sans Mono", monospace', fontSize: 9.5,
        letterSpacing: '0.16em', color: T.mute, textTransform: 'uppercase' }}>{label}</div>
    </div>
  );
}

// ── One full concept board.
function LogoBoard({ Mark, name, concept, comic }) {
  if (comic) return <ComicBoard />;
  const goldRing = 'inset 0 0 0 2px rgba(255,255,255,0.45), 0 2px 6px rgba(198,93,0,0.35)';
  const gold = `radial-gradient(circle at 38% 32%, ${T.amber}, ${T.orange} 62%, ${T.orange2})`;
  return (
    <div style={{ height: '100%', background: T.paper, display: 'flex', flexDirection: 'column',
      fontFamily: '"Archivo", sans-serif' }}>
      {/* hero mark */}
      <div style={{ background: T.cream, padding: '40px 36px 34px', display: 'flex',
        flexDirection: 'column', alignItems: 'center', borderBottom: `1px solid ${T.line}` }}>
        <div style={{ width: 132, height: 132 }}><Mark /></div>
        <div style={{ fontFamily: '"Spline Sans Mono", monospace', fontSize: 10.5, letterSpacing: '0.2em',
          color: T.orange2, textTransform: 'uppercase', marginTop: 26 }}>{name}</div>
        <div style={{ fontSize: 13.5, color: T.mute, marginTop: 8, textAlign: 'center',
          lineHeight: 1.4, maxWidth: 320, textWrap: 'pretty' }}>{concept}</div>
      </div>
      {/* horizontal lockup */}
      <div style={{ padding: '26px 36px', display: 'flex', alignItems: 'center', gap: 18,
        borderBottom: `1px solid ${T.line}` }}>
        <div style={{ width: 56, height: 56, flexShrink: 0 }}><Mark /></div>
        <Wordmark size={28} />
      </div>
      {/* field treatments */}
      <div style={{ padding: '24px 30px 30px', display: 'flex', gap: 14, marginTop: 'auto' }}>
        <Chip label="Lapel pin" bg={gold} ring={goldRing}>
          <Mark c={T.ink} a={T.ink} />
        </Chip>
        <Chip label="1-color" bg={T.cream} ring={`inset 0 0 0 1px ${T.line}`}>
          <Mark c={T.ink} a={T.ink} />
        </Chip>
        <Chip label="Reversed" bg={T.ink}>
          <Mark c={T.cream} a={T.orange} />
        </Chip>
      </div>
    </div>
  );
}

// ── Comic board (50s comic mood): starburst badge + Bangers wordmark.
function ComicBoard() {
  const halftone = 'radial-gradient(rgba(26,26,26,0.16) 1.4px, transparent 1.5px)';
  return (
    <div style={{ height: '100%', background: T.cream, display: 'flex', flexDirection: 'column',
      fontFamily: '"Comic Neue", sans-serif', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: 0, backgroundImage: halftone,
        backgroundSize: '11px 11px', opacity: 0.6 }} />
      <div style={{ position: 'relative', padding: '40px 36px 30px', display: 'flex',
        flexDirection: 'column', alignItems: 'center', borderBottom: `3px solid ${T.ink}` }}>
        {/* starburst badge */}
        <div style={{ width: 150, height: 150, position: 'relative', display: 'flex',
          alignItems: 'center', justifyContent: 'center' }}>
          <svg viewBox="0 0 100 100" width="150" height="150" style={{ position: 'absolute' }}>
            <polygon fill={T.orange} stroke={T.ink} strokeWidth="3" strokeLinejoin="round"
              points="50,2 58,16 73,9 73,25 90,25 81,39 96,46 83,55 92,69 76,70 78,86 64,79 58,94 50,82 42,94 36,79 22,86 24,70 8,69 17,55 4,46 19,39 10,25 27,25 27,9 42,16" />
            <circle cx="50" cy="48" r="26" fill={T.cream} stroke={T.ink} strokeWidth="3" />
          </svg>
          <div style={{ position: 'relative', width: 44, height: 44 }}>
            <MarkThruline c={T.ink} a={T.orange2} />
          </div>
        </div>
        <div style={{ fontFamily: '"Bangers", display', fontSize: 46, letterSpacing: '2px',
          color: T.ink, textTransform: 'uppercase', marginTop: 18,
          WebkitTextStroke: `0px`, textShadow: `3px 3px 0 ${T.orange}` }}>Thruline</div>
        <div style={{ fontFamily: '"Bangers", display', fontSize: 17, letterSpacing: '5px',
          color: T.orange2, marginTop: 2 }}>SOLUTIONS</div>
      </div>
      <div style={{ position: 'relative', padding: '20px 30px 28px', display: 'flex', gap: 14,
        marginTop: 'auto' }}>
        <Chip label="Lapel pin" bg={`radial-gradient(circle at 38% 32%, ${T.amber}, ${T.orange} 62%, ${T.orange2})`}
          ring="inset 0 0 0 2px rgba(255,255,255,0.45), 0 2px 6px rgba(198,93,0,0.35)">
          <MarkThruline c={T.ink} a={T.ink} />
        </Chip>
        <Chip label="1-color" bg={T.paper} ring={`inset 0 0 0 1px ${T.line}`}>
          <MarkThruline c={T.ink} a={T.ink} />
        </Chip>
        <Chip label="Reversed" bg={T.ink}>
          <MarkThruline c={T.cream} a={T.orange} />
        </Chip>
      </div>
    </div>
  );
}

const LOGO_DATA = [
  { id: 'thruline', label: 'A · Through-line', Mark: MarkThruline, name: 'The Through-Line',
    concept: 'A line that runs through and resolves forward — continuity of protection, aimed at the mission.' },
  { id: 'shield', label: 'B · Shield + Line', Mark: MarkShield, name: 'Shield + Through-Line',
    concept: 'Classic protection read, cut by the through-line so it stays distinct from generic security shields.' },
  { id: 'star', label: 'C · North Star', Mark: MarkStar, name: 'North Star',
    concept: 'Directional and mission-first. Bold solid form holds at lapel-pin scale and on a coin.' },
  { id: 'monogram', label: 'D · Monogram T', Mark: MarkMonogram, name: 'Monogram + Crosshair',
    concept: 'A T built from the through-line, ringed with operational crosshair ticks. Reads small.' },
  { id: 'coin', label: 'E · Medallion', Mark: MarkCoin, name: 'Medallion',
    concept: 'Challenge-coin native: concentric rings, forward chevron, star. Translates straight to metal.' },
  { id: 'comic', label: 'F · Comic Badge', Mark: MarkThruline, name: '50s Comic Badge', comic: true,
    concept: 'The bold, friendly take — starburst badge, Bangers wordmark, halftone.' },
];

function LogoBoards() {
  return LOGO_DATA.map((l) => (
    <DCArtboard key={l.id} id={l.id} label={l.label} width={500} height={620}>
      <LogoBoard {...l} />
    </DCArtboard>
  ));
}

Object.assign(window, { T, MarkThruline, MarkShield, MarkStar, MarkMonogram, MarkCoin, Wordmark, LogoBoard, LogoBoards });