// WXG Brand System — colors, type, motifs reused by all 3 directions

const WXG = {
  // From the live brand: amber/gold accent, charcoal slate, off-whites
  amber: '#FCAF17',
  amberDark: '#E89E0F',
  amberSoft: 'rgba(252, 175, 23, 0.10)',
  amberMid: 'rgba(252, 175, 23, 0.25)',

  ink: '#6B6B6B',
  inkDark: '#4D4D4D',
  slate: '#8A8A8A',
  slateLight: '#A8A8A8',
  rule: '#CDCDCD',
  ruleLight: '#E8E8E8',

  paper: '#FFFFFF',
  paperWarm: '#FAF8F4',
  paperCool: '#F5F5F4',
  paperDeep: '#1f1f1f',
};

// ─────────────────────────────────────────────────────────────
// WXG wordmark — recreated from path data, matches site logo
// ─────────────────────────────────────────────────────────────
function WXGMark({ size = 64, color = WXG.slate, accent = WXG.amber, mono = false }) {
  const w = size;
  const h = size * (40 / 88);
  return (
    <svg width={w} height={h} viewBox="0 0 88 40" fill="none" aria-label="WXG">
      <text x="0" y="32"
        fontFamily="'Helvetica Neue', Helvetica, Arial, sans-serif"
        fontWeight="900" fontSize="36" letterSpacing="-1.2"
        fill={color}>WXG</text>
      {!mono && <rect x="76" y="22" width="12" height="12" fill={accent} />}
    </svg>
  );
}

// ─────────────────────────────────────────────────────────────
// Squares motif — recreated from /squares-variant2.svg vibe
// ─────────────────────────────────────────────────────────────
function SquaresMotif({ color = WXG.amber, opacity = 0.18, size = 360 }) {
  return (
    <svg width={size} height={size * 0.4} viewBox="0 0 360 144" style={{ opacity }}>
      <g fill={color}>
        <rect x="0"   y="0"   width="36" height="36" />
        <rect x="48"  y="48"  width="36" height="36" />
        <rect x="96"  y="0"   width="36" height="36" />
        <rect x="144" y="48"  width="36" height="36" />
        <rect x="48"  y="96"  width="36" height="36" />
        <rect x="192" y="0"   width="36" height="36" />
        <rect x="240" y="48"  width="36" height="36" />
        <rect x="144" y="96"  width="36" height="36" />
        <rect x="288" y="0"   width="36" height="36" />
      </g>
    </svg>
  );
}

// Diagonal squares (used in direction A & C)
function SquareGrid({ color = WXG.amber, opacity = 0.10, cell = 28, cols = 12, rows = 6 }) {
  const dots = [];
  for (let r = 0; r < rows; r++) {
    for (let c = 0; c < cols; c++) {
      // sparse pattern: only certain cells lit
      if ((r + c) % 3 === 0 && Math.random() > -1 && (c * r) % 4 !== 1) {
        dots.push(<rect key={r + 'x' + c} x={c * cell} y={r * cell} width={cell - 6} height={cell - 6} fill={color} />);
      }
    }
  }
  return (
    <svg width={cols * cell} height={rows * cell} style={{ opacity }}>
      {dots}
    </svg>
  );
}

// Blueprint / engineering grid texture
function BlueprintGrid({ color = WXG.slate, opacity = 0.06, cell = 24 }) {
  return (
    <svg width="100%" height="100%" style={{ opacity, position: 'absolute', inset: 0, pointerEvents: 'none' }}>
      <defs>
        <pattern id="bpgrid" width={cell} height={cell} patternUnits="userSpaceOnUse">
          <path d={`M ${cell} 0 L 0 0 0 ${cell}`} fill="none" stroke={color} strokeWidth="0.5" />
        </pattern>
        <pattern id="bpgrid2" width={cell * 5} height={cell * 5} patternUnits="userSpaceOnUse">
          <path d={`M ${cell * 5} 0 L 0 0 0 ${cell * 5}`} fill="none" stroke={color} strokeWidth="1" />
        </pattern>
      </defs>
      <rect width="100%" height="100%" fill="url(#bpgrid)" />
      <rect width="100%" height="100%" fill="url(#bpgrid2)" />
    </svg>
  );
}

// ─────────────────────────────────────────────────────────────
// Architectural placeholder — replaces real construction photos
// ─────────────────────────────────────────────────────────────
function ArchPlaceholder({ label = 'CONSTRUCTION SITE · TEL AVIV', tone = 'warm', style = {} }) {
  const tones = {
    warm:  ['#3a342c', '#1d1a16', '#FCAF17'],
    cool:  ['#2a2e33', '#13151a', '#FCAF17'],
    paper: ['#dbd6cc', '#bfb8a9', '#4D4D4D'],
  }[tone];
  const [a, b, accent] = tones;

  return (
    <div style={{
      position: 'relative', overflow: 'hidden', width: '100%', height: '100%',
      background: `linear-gradient(135deg, ${a} 0%, ${b} 100%)`,
      ...style,
    }}>
      {/* skeletal "building" lines */}
      <svg width="100%" height="100%" viewBox="0 0 400 300" preserveAspectRatio="xMidYMid slice"
        style={{ position: 'absolute', inset: 0, opacity: 0.55 }}>
        <g stroke={accent} strokeWidth="0.7" fill="none" opacity="0.7">
          {/* building frame */}
          <path d="M50 280 L50 100 L180 60 L180 280 Z" />
          <path d="M50 100 L180 60" />
          {/* floors */}
          {[0, 1, 2, 3, 4, 5, 6].map(i => (
            <line key={i} x1="50" y1={100 + i * 26} x2="180" y2={60 + i * 26} />
          ))}
          {/* columns */}
          {[0, 1, 2, 3, 4].map(i => (
            <line key={'c' + i} x1={50 + i * 32} y1={100 + i * 9.5} x2={50 + i * 32} y2="280" />
          ))}
          {/* second tower */}
          <path d="M210 280 L210 140 L340 140 L340 280 Z" />
          {[0, 1, 2, 3, 4, 5].map(i => (
            <line key={'t2' + i} x1="210" y1={140 + i * 24} x2="340" y2={140 + i * 24} />
          ))}
          {[0, 1, 2, 3, 4].map(i => (
            <line key={'c2' + i} x1={210 + i * 32} y1="140" x2={210 + i * 32} y2="280" />
          ))}
          {/* crane */}
          <line x1="180" y1="60" x2="180" y2="20" strokeWidth="1.2"/>
          <line x1="100" y1="30" x2="280" y2="30" strokeWidth="1.2"/>
          <line x1="180" y1="20" x2="120" y2="30"/>
          <line x1="180" y1="20" x2="240" y2="30"/>
          <line x1="200" y1="30" x2="200" y2="60" strokeDasharray="2 3"/>
          {/* sun */}
          <circle cx="320" cy="55" r="22" stroke={accent} strokeWidth="0.5" fill={accent} fillOpacity="0.15"/>
        </g>
      </svg>

      {/* horizon haze */}
      <div style={{
        position: 'absolute', inset: 0,
        background: `linear-gradient(180deg, transparent 30%, ${b}aa 100%)`,
      }} />

      {/* metadata */}
      <div style={{
        position: 'absolute', left: 16, bottom: 14, right: 16,
        display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
        fontFamily: '"JetBrains Mono", "Geist Mono", ui-monospace, monospace',
        fontSize: 10, letterSpacing: 1.2, color: tone === 'paper' ? WXG.slate : 'rgba(255,255,255,0.7)',
        textTransform: 'uppercase',
      }}>
        <span>◐ {label}</span>
        <span>WXG · 2026</span>
      </div>
    </div>
  );
}

Object.assign(window, { WXG, WXGMark, SquaresMotif, SquareGrid, BlueprintGrid, ArchPlaceholder });