// WXG Brand System — colors, type, motifs reused by all 4 directions
// Aligned with the WXG brand book: Calibri typography + official palette.

const WXG = {
  // PRIMARY — Yellow & Grey (from WXG brand book)
  amber:      '#FCAF17',  // Yellow · Pantone 130 C · RAL 1003
  amberDark:  '#E89E0F',  // hover/active
  amberSoft:  'rgba(252, 175, 23, 0.12)',
  amberMid:   'rgba(252, 175, 23, 0.32)',

  // Grey scale derived from brand grey + softened ink for buttons
  grey:       '#3F3F3F',  // brand grey from book
  ink:        '#6B6B6B',  // softened "black" for filled buttons (client request)
  inkDark:    '#3F3F3F',
  slate:      '#8A8A8A',
  slateLight: '#A8A8A8',
  rule:       '#CDCDCD',
  ruleLight:  '#E8E8E8',

  // SECONDARY — soft Gold & Green
  gold:       '#E5DEB0',  // Pantone 7499 C
  green:      '#B0E5D0',  // Pantone 331 C

  // TERTIARY — strong Gold & Green
  goldStrong:  '#CABE61',  // Pantone 617 C
  greenStrong: '#61CAA0',  // Pantone 338 C

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

// ─────────────────────────────────────────────────────────────
// Typography — Calibri across the brand (Light / Regular / Bold)
// Calibri is a system font on Windows/Office; on the web we
// fallback through Carlito (open-source Calibri metric clone)
// then platform sans, so RTL Hebrew + Latin both render cleanly.
// ─────────────────────────────────────────────────────────────
const WXG_FONT = "'Calibri', 'Carlito', 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif";
const WXG_MONO = "'JetBrains Mono', 'Geist Mono', ui-monospace, monospace";

// Hierarchy from brand book (figma-style scale):
//  H1 56/120%   Light
//  H2 40/120%   Light
//  H3 28/120%   Light
//  Body 18/120% Light
//  Small 12     Regular
const WXG_TYPE = {
  family: WXG_FONT,
  mono:   WXG_MONO,
  weights: { light: 300, regular: 400, bold: 700 },
  scale: {
    h1:    { size: 56, weight: 300, lineHeight: 1.2, letterSpacing: '-0.005em' },
    h2:    { size: 40, weight: 300, lineHeight: 1.2 },
    h3:    { size: 28, weight: 300, lineHeight: 1.2 },
    body:  { size: 18, weight: 300, lineHeight: 1.5 },
    small: { size: 12, weight: 400, lineHeight: 1.4 },
  },
};

// ─────────────────────────────────────────────────────────────
// WXG wordmark — recreated, matches site logo
// ─────────────────────────────────────────────────────────────
function WXGMark({ size = 64, color = WXG.grey, 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={WXG_FONT}
        fontWeight="700" 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++) {
      if ((r + c) % 3 === 0 && (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', '#3F3F3F'],
  }[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,
    }}>
      <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">
          <path d="M50 280 L50 100 L180 60 L180 280 Z" />
          <path d="M50 100 L180 60" />
          {[0, 1, 2, 3, 4, 5, 6].map(i => (
            <line key={i} x1="50" y1={100 + i * 26} x2="180" y2={60 + i * 26} />
          ))}
          {[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" />
          ))}
          <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" />
          ))}
          <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"/>
          <circle cx="320" cy="55" r="22" stroke={accent} strokeWidth="0.5" fill={accent} fillOpacity="0.15"/>
        </g>
      </svg>

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

      <div style={{
        position: 'absolute', left: 16, bottom: 14, right: 16,
        display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
        fontFamily: WXG_MONO,
        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, WXG_FONT, WXG_MONO, WXG_TYPE, WXGMark, SquaresMotif, SquareGrid, BlueprintGrid, ArchPlaceholder });