// kgb-shared.jsx — shared tokens, fonts, helpers for Kish Golden Bridge concepts
// Exports to window.KGB

(function () {
  // ---- Fonts + keyframes (inject once) ----
  if (!document.getElementById('kgb-fonts')) {
    const l = document.createElement('link');
    l.rel = 'stylesheet';
    l.id = 'kgb-fonts';
    l.href = 'https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Manrope:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&family=Vazirmatn:wght@400;500;600;700&display=swap';
    document.head.appendChild(l);
  }
  if (!document.getElementById('kgb-keyframes')) {
    const s = document.createElement('style');
    s.id = 'kgb-keyframes';
    s.textContent = `
      @keyframes kgbDash { to { stroke-dashoffset: 0; } }
      @keyframes kgbPulse { 0%,100% { opacity:.35; transform:scale(1);} 50%{ opacity:1; transform:scale(1.6);} }
      @keyframes kgbFloat { 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-8px);} }
      @keyframes kgbSail { from { transform: translateX(-6%);} to { transform: translateX(106%);} }
      .kgb * { box-sizing: border-box; }
      .kgb ::selection { background:#C9A24A; color:#07182C; }
      .kgb-card:hover { transform: translateY(-4px); border-color: rgba(231,206,138,0.4) !important; }
      .kgb input::placeholder, .kgb textarea::placeholder { color: rgba(244,241,234,0.4); }
      .kgb img { max-width: 100%; }
      .kgb-burger { display: none; }
      /* ---- responsive ---- */
      @media (max-width: 1024px) {
        .kgb [style*="repeat(4"] { grid-template-columns: repeat(2,1fr) !important; }
        .kgb [style*="repeat(3"] { grid-template-columns: repeat(2,1fr) !important; }
      }
      @media (max-width: 1024px) {
        .kgb-navlinks { display: none !important; }
        .kgb-burger { display: inline-flex !important; }
      }
      @media (max-width: 760px) {
        .kgb h1 { font-size: 33px !important; line-height: 1.25 !important; }
        .kgb h2 { font-size: 26px !important; line-height: 1.32 !important; }
        .kgb h3 { font-size: 23px !important; }
        .kgb-mapaddr { display: none !important; }
        .kgb-toploc { display: none !important; }
      }
      @media (max-width: 640px) {
        .kgb-wrap { padding-left: 20px !important; padding-right: 20px !important; }
        .kgb [style*="repeat(3"], .kgb [style*="repeat(2"] { grid-template-columns: 1fr !important; }
        .kgb [style*="span 2"] { grid-column: span 1 !important; }
        .kgb-sec { padding-top: 52px !important; padding-bottom: 56px !important; }
      }
      @media (max-width: 460px) {
        .kgb [style*="repeat(4"] { grid-template-columns: 1fr !important; }
      }
      @media (min-width: 1025px) {
        .kgb-navmenu { display: none !important; }
      }
    `;
    document.head.appendChild(s);
  }

  const t = {
    navy900: '#07182C',
    navy850: '#0A1E35',
    navy800: '#0C2238',
    navy700: '#15304D',
    navy600: '#1E4264',
    gold: '#C9A24A',
    goldLt: '#E7CE8A',
    goldDk: '#9C7B33',
    mist: '#F4F1EA',
    cloud: '#FBFAF6',
    ink: '#0E1B2A',
    slate: '#5C6B7A',
    line: 'rgba(255,255,255,0.12)',
    lineDk: 'rgba(12,34,56,0.12)',
    serif: "'Spectral', Georgia, serif",
    sans: "'Manrope', system-ui, sans-serif",
    mono: "'Space Mono', monospace",
  };

  // Photo: shows a real image when `src` is given, else a striped labelled placeholder.
  // labelAlign: 'center' | 'br' (bottom-right). pos = object-position for real images.
  function Photo({ label, h, dark, style, accent, labelAlign = 'center', src, alt, pos = 'center' }) {
    const fg = dark ? 'rgba(231,206,138,0.55)' : 'rgba(12,34,56,0.45)';
    const base = dark ? '#0A1E35' : '#E7E2D6';
    const stripe = dark ? 'rgba(255,255,255,0.025)' : 'rgba(12,34,56,0.04)';
    const br = labelAlign === 'br';
    if (src) {
      return (
        <div style={{ height: h, width: '100%', position: 'relative', overflow: 'hidden', background: base, ...style }}>
          <img src={src} alt={alt || ''} loading="lazy" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: pos, display: 'block' }} />
          {accent && <div style={{ position: 'absolute', inset: 0, background: accent }} />}
        </div>
      );
    }
    return (
      <div style={{
        height: h, width: '100%', position: 'relative', overflow: 'hidden',
        background: `repeating-linear-gradient(135deg, ${base}, ${base} 11px, ${stripe} 11px, ${stripe} 22px)`,
        display: 'flex', alignItems: br ? 'flex-end' : 'center', justifyContent: br ? 'flex-end' : 'center',
        ...style,
      }}>
        {accent && <div style={{ position: 'absolute', inset: 0, background: accent }} />}
        <span style={{
          position: 'relative', fontFamily: t.mono, fontSize: 10.5, letterSpacing: '0.12em',
          textTransform: 'uppercase', color: fg, textAlign: 'center', whiteSpace: 'nowrap',
          border: `1px solid ${fg}`, borderRadius: 2, lineHeight: 1.5,
          padding: '7px 12px', margin: br ? 20 : 0,
          background: dark ? 'rgba(7,24,44,0.5)' : 'rgba(251,250,246,0.5)',
        }}>{label}</span>
      </div>
    );
  }

  // Simple stroke icons (24x24, currentColor)
  const Icon = {
    anchor: 'M12 4.2a1.8 1.8 0 1 0 0 3.6 1.8 1.8 0 0 0 0-3.6ZM12 7.8V20M12 20c-3.3 0-6-2.7-6-6M12 20c3.3 0 6-2.7 6-6M4.5 13H7M17 13h2.5M9 10.5h6',
    ship: 'M3 16l1.6 4.2a1 1 0 0 0 .94.65h12.9a1 1 0 0 0 .94-.65L21 16M5 16V9h14v7M9 9V5h6v4M12 5V3',
    droplet: 'M12 3.5c3.4 4 5.5 6.6 5.5 9.4A5.5 5.5 0 0 1 12 18.4a5.5 5.5 0 0 1-5.5-5.5C6.5 10.1 8.6 7.5 12 3.5Z',
    compass: 'M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18ZM15.5 8.5l-2 5-5 2 2-5 5-2Z',
    route: 'M6 19a2 2 0 1 0 0-4 2 2 0 0 0 0 4ZM18 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4ZM8 17h6a3 3 0 0 0 3-3V9M16 7h-6a3 3 0 0 0-3 3v5',
    shield: 'M12 3l7 2.5v5.2c0 4.4-3 7.6-7 9.3-4-1.7-7-4.9-7-9.3V5.5L12 3Z',
    gauge: 'M12 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4ZM13.4 10.6 17 7M5 18a9 9 0 1 1 14 0',
    crane: 'M5 21h14M7 21V6M7 6h11l-1.5 4M7 6 4 9M12 9v4M12 13a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Z',
    globe: 'M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18ZM3 12h18M12 3c2.5 2.4 3.8 5.5 3.8 9S14.5 18.6 12 21M12 3C9.5 5.4 8.2 8.5 8.2 12S9.5 18.6 12 21',
    wrench: 'M17 3.8a4 4 0 0 0-5.2 5.1l-7.3 7.3 2.3 2.3 7.3-7.3a4 4 0 0 0 5.1-5.2l-2.5 2.5-2.3-2.3L17 3.8Z',
    clock: 'M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18ZM12 7v5l3 2',
    arrow: 'M5 12h14M13 6l6 6-6 6',
  };
  function Ic({ name, size = 24, stroke = 1.6, color = 'currentColor', style }) {
    return (
      <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
        stroke={color} strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round" style={style}>
        <path d={Icon[name]} />
      </svg>
    );
  }

  // Tiny logo mark — gold bridge arcs + ship hull
  function Logo({ size = 40, light }) {
    const c = light ? t.cloud : t.navy800;
    return (
      <svg width={size} height={size * 0.82} viewBox="0 0 50 41" fill="none">
        <path d="M4 26c5-9 12-13 21-13s16 4 21 13" stroke={t.gold} strokeWidth="2.4" strokeLinecap="round"/>
        <path d="M11 26c3-5 8-7.5 14-7.5S36 21 39 26" stroke={t.gold} strokeWidth="2.4" strokeLinecap="round"/>
        <path d="M6 30h38l-4.5 7.5a3 3 0 0 1-2.6 1.5H13.1a3 3 0 0 1-2.6-1.5L6 30Z" fill={c}/>
        <path d="M25 4v9" stroke={c} strokeWidth="2.4" strokeLinecap="round"/>
        <circle cx="25" cy="9" r="2" fill={t.gold}/>
      </svg>
    );
  }

  // ---- Strait of Hormuz live AIS-style tracking map ----
  // lang for labels; ours = highlight our fleet markers. Self-contained SVG "sea chart".
  function HormuzMap({ lang = 'fa', height = '100%' }) {
    const L = lang === 'fa'
      ? { iran: 'ایران', oman: 'عمان', uae: 'امارات', strait: 'تنگه هرمز', gulf: 'خلیج فارس', oog: 'دریای عمان', live: 'ردیابی زنده', vessels: 'شناور فعال', ours: 'ناوگان ما' }
      : { iran: 'IRAN', oman: 'OMAN', uae: 'U.A.E.', strait: 'STRAIT OF HORMUZ', gulf: 'PERSIAN GULF', oog: 'GULF OF OMAN', live: 'LIVE TRACKING', vessels: 'ACTIVE VESSELS', ours: 'OUR FLEET' };
    const lab = (lang === 'fa') ? "'Vazirmatn', sans-serif" : "'Space Mono', monospace";
    // AIS arrow markers: [x, y, heading°, kind]  kind: 'ours' | 'cargo' | 'tanker' | 'other'
    const ships = [
      [148, 250, 110, 'ours', 'گلف ویو ۴', 'GULF WAVE 4'],
      [300, 205, 65, 'ours', 'گلف ویو ۳', 'GULF WAVE 3'],
      [410, 270, 285, 'ours', 'گلف ویو ۲', 'GULF WAVE 2'],
      [210, 300, 40, 'tanker'], [360, 150, 250, 'cargo'], [470, 200, 300, 'cargo'],
      [255, 175, 95, 'other'], [330, 320, 20, 'tanker'], [115, 190, 130, 'cargo'],
      [430, 130, 240, 'other'], [505, 280, 290, 'tanker'], [180, 145, 80, 'cargo'],
    ];
    const col = { ours: '#E7CE8A', cargo: '#5fbf8f', tanker: '#5aa9d6', other: 'rgba(244,241,234,0.5)' };
    return (
      <svg viewBox="0 0 600 440" preserveAspectRatio="xMidYMid slice" style={{ width: '100%', height, display: 'block' }}>
        <defs>
          <linearGradient id="hmSea" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="#0A2138" /><stop offset="100%" stopColor="#06121f" />
          </linearGradient>
          <radialGradient id="hmGlow" cx="46%" cy="52%" r="55%">
            <stop offset="0%" stopColor="#16334f" stopOpacity="0.7" /><stop offset="100%" stopColor="#06121f" stopOpacity="0" />
          </radialGradient>
        </defs>
        <rect width="600" height="440" fill="url(#hmSea)" />
        <rect width="600" height="440" fill="url(#hmGlow)" />
        {/* lat/long grid */}
        {[55, 130, 205, 280, 355].map((y) => <line key={'h' + y} x1="0" y1={y} x2="600" y2={y} stroke="rgba(231,206,138,0.05)" />)}
        {[80, 180, 280, 380, 480].map((x) => <line key={'v' + x} x1={x} y1="0" x2={x} y2="440" stroke="rgba(231,206,138,0.05)" />)}
        {/* depth contours */}
        <path d="M40 250 Q200 210 380 250 T580 240" fill="none" stroke="rgba(90,169,214,0.10)" strokeWidth="1" />
        <path d="M40 290 Q210 250 400 290 T590 280" fill="none" stroke="rgba(90,169,214,0.08)" strokeWidth="1" />
        {/* IRAN — north landmass */}
        <path d="M0 0 L600 0 L600 70 Q500 96 430 86 Q360 78 300 110 Q250 136 180 120 Q90 102 0 130 Z"
          fill="#13243a" stroke="rgba(231,206,138,0.22)" strokeWidth="1.2" />
        {/* OMAN / Musandam peninsula — south, juts up into strait */}
        <path d="M600 440 L0 440 L0 360 Q120 372 220 352 Q300 336 340 360 L362 300 Q372 268 396 286 Q414 300 410 330 Q408 360 440 372 Q520 392 600 372 Z"
          fill="#13243a" stroke="rgba(231,206,138,0.22)" strokeWidth="1.2" />
        {/* shipping lanes (traffic separation scheme) */}
        <path d="M70 215 Q230 200 360 235 Q470 262 560 235" fill="none" stroke="rgba(201,162,74,0.32)" strokeWidth="2" strokeDasharray="8 8" style={{ strokeDashoffset: 320, animation: 'kgbDash 11s linear infinite' }} />
        <path d="M70 250 Q230 238 360 270 Q470 296 560 270" fill="none" stroke="rgba(90,169,214,0.26)" strokeWidth="2" strokeDasharray="8 8" style={{ strokeDashoffset: 0, animation: 'kgbDash 13s linear infinite reverse' }} />
        {/* land labels */}
        <text x="300" y="44" textAnchor="middle" fill="rgba(231,206,138,0.6)" fontFamily={lab} fontSize="15" letterSpacing={lang === 'fa' ? 0 : 4}>{L.iran}</text>
        <text x="120" y="418" textAnchor="middle" fill="rgba(231,206,138,0.45)" fontFamily={lab} fontSize="12" letterSpacing={lang === 'fa' ? 0 : 3}>{L.uae}</text>
        <text x="470" y="420" textAnchor="middle" fill="rgba(231,206,138,0.55)" fontFamily={lab} fontSize="13" letterSpacing={lang === 'fa' ? 0 : 3}>{L.oman}</text>
        <text x="385" y="175" textAnchor="middle" fill="rgba(244,241,234,0.34)" fontFamily={lab} fontSize="11" letterSpacing={lang === 'fa' ? 0 : 2} style={{ transform: 'rotate(-9deg)', transformOrigin: '385px 175px' }}>{L.strait}</text>
        <text x="150" y="180" textAnchor="middle" fill="rgba(244,241,234,0.22)" fontFamily={lab} fontSize="10" letterSpacing={lang === 'fa' ? 0 : 2}>{L.gulf}</text>
        <text x="525" y="345" textAnchor="middle" fill="rgba(244,241,234,0.22)" fontFamily={lab} fontSize="10" letterSpacing={lang === 'fa' ? 0 : 2}>{L.oog}</text>
        {/* vessels */}
        {ships.map((s, i) => {
          const [x, y, hd, kind, fa, en] = s;
          const c = col[kind];
          const isOurs = kind === 'ours';
          return (
            <g key={i} transform={`translate(${x} ${y})`}>
              {isOurs && <circle r="13" fill={c} opacity="0.16" style={{ animation: `kgbPulse ${2.4 + i * 0.2}s ease-in-out infinite` }} />}
              <g transform={`rotate(${hd})`}>
                <path d="M0 -8.5 L5.5 7 L0 3.5 L-5.5 7 Z" fill={c} stroke="#06121f" strokeWidth="0.8" />
              </g>
              {isOurs && (
                <text x={lang === 'fa' ? -12 : 12} y="4" textAnchor={lang === 'fa' ? 'end' : 'start'} fill="rgba(244,241,234,0.82)" fontFamily={lab} fontSize="10.5">{lang === 'fa' ? fa : en}</text>
              )}
            </g>
          );
        })}
      </svg>
    );
  }

  window.KGB = { t, Photo, Ic, Logo, HormuzMap };
})();