/* Bilermen site - shared components.
   Nav, Footer, Hero artwork, LogoCarousel, CtaDark, Toast, helpers. */

const { useState, useEffect, useRef } = React;

/* ----------------------------------------------------------------- helpers */
function useFadeIn() {
  const ref = useRef(null);
  const [visible, setVisible] = useState(false);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const rect = el.getBoundingClientRect();
    const vh = window.innerHeight || document.documentElement.clientHeight;
    if (rect.top < vh && rect.bottom > 0) {
      setVisible(true);
      return;
    }
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          setVisible(true);
          io.unobserve(e.target);
        }
      });
    }, { rootMargin: '0px 0px -8% 0px' });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return [ref, visible];
}

function FadeIn({ children, delay = 0, as: As = 'div', className = '', ...rest }) {
  const [ref, visible] = useFadeIn();
  return (
    <As ref={ref}
        className={'fade-in ' + (visible ? 'in ' : '') + className}
        style={{ transitionDelay: delay + 'ms' }}
        {...rest}>
      {children}
    </As>
  );
}

function Eyebrow({ children, onDark }) {
  return <div className={'eyebrow' + (onDark ? ' eyebrow-on-dark' : '')}>{children}</div>;
}

function Button({ variant = 'primary', children, onClick, arrow, type }) {
  return (
    <button type={type || 'button'} className={'btn btn-' + variant} onClick={onClick}>
      {children}{arrow && <span style={{ fontWeight: 500 }}>→</span>}
    </button>
  );
}

function TextLink({ children, onClick }) {
  return <a className="text-link" onClick={onClick}>{children} <span>→</span></a>;
}

/* Render & inside serif headings using sans-serif so it looks more professional */
function fmtAmp(text) {
  if (typeof text !== 'string') return text;
  if (!text.includes('&')) return text;
  const parts = text.split(/(&)/g);
  return parts.map((p, i) => p === '&' ? <span key={i} className="amp">&</span> : p);
}
window.fmtAmp = fmtAmp;

/* ----------------------------------------------------------------- nav */
function LanguageSwitcher() {
  const [lang, setLang] = useState((window.SITE_LANG || 'en').toUpperCase());
  const [open, setOpen] = useState(false);
  const ref = useRef(null);

  const langs = [
    { code: 'EN', label: 'English' },
    { code: 'RU', label: 'Русский' },
  ];

  useEffect(() => {
    function onClick(e) {
      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
    }
    if (open) {
      document.addEventListener('mousedown', onClick);
      return () => document.removeEventListener('mousedown', onClick);
    }
  }, [open]);

  useEffect(() => {
    function onChange(e) { setLang((e.detail.lang || 'en').toUpperCase()); }
    window.addEventListener('langchange', onChange);
    return () => window.removeEventListener('langchange', onChange);
  }, []);

  function pick(code) {
    setLang(code);
    setOpen(false);
    window.setLang(code.toLowerCase());
  }

  return (
    <div className="lang-switcher" ref={ref}>
      <button className="lang-current" onClick={() => setOpen(o => !o)}>
        <span className="lang-globe" style={{ display: 'flex', alignItems: 'center' }}>
          <img src={lang === 'EN' ? 'https://flagcdn.com/w20/gb.png' : 'https://flagcdn.com/w20/ru.png'} alt={lang} width="16" style={{ borderRadius: 2 }} />
        </span>
        <span>{lang}</span>
        <span className="lang-caret">▾</span>
      </button>
      {open && (
        <div className="lang-menu">
          {langs.map(l => (
            <button key={l.code}
              className={'lang-option' + (l.code === lang ? ' active' : '')}
              onClick={() => pick(l.code)}>
              <span className="lang-option-code" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <img src={l.code === 'EN' ? 'https://flagcdn.com/w20/gb.png' : 'https://flagcdn.com/w20/ru.png'} alt={l.code} width="16" style={{ borderRadius: 2 }} />
              </span>
              <span className="lang-option-label">{l.label}</span>
            </button>
          ))}
        </div>
      )}
    </div>
  );
}

function Nav({ route, navigate }) {
  const [, force] = useState(0);
  const [menuOpen, setMenuOpen] = useState(false);
  useEffect(() => {
    const h = () => force(n => n + 1);
    window.addEventListener('langchange', h);
    return () => window.removeEventListener('langchange', h);
  }, []);
  const items = [
    { id: '/services', label: t('nav.services') },
    { id: '/sectors',  label: t('nav.sectors') },
    { id: '/about',    label: t('nav.about') },
    { id: '/news',     label: t('nav.news') },
    { id: '/contact',  label: t('nav.contact') },
  ];
  const go = (id) => { setMenuOpen(false); navigate(id); };
  return (
    <nav className="nav">
      <div className="container nav-inner">
        <a onClick={() => go('/')}>
          <img className="nav-logo" src={(window.SITE_DATA.LOGO && window.SITE_DATA.LOGO.src) || 'assets/bilermen-lockup.svg'} alt={(window.SITE_DATA.LOGO && window.SITE_DATA.LOGO.alt) || 'Bilermen Hyzmatdashlar'} />
        </a>
        <div className="nav-links">
          {items.map((item) => {
            const root = item.id;
            const active = route === root || (root !== '/' && route.startsWith(root));
            return (
              <a key={item.id}
                 className={'nav-link' + (active ? ' active' : '')}
                 onClick={() => navigate(item.id)}>
                {item.label}
              </a>
            );
          })}
        </div>
        <div className="nav-right">
          <LanguageSwitcher />
          <button className="nav-cta" onClick={() => navigate('/contact')}>{t('nav.briefing')}</button>
          <button
            className={'nav-burger' + (menuOpen ? ' open' : '')}
            aria-label="Menu"
            aria-expanded={menuOpen}
            onClick={() => setMenuOpen(o => !o)}>
            <span></span><span></span><span></span>
          </button>
        </div>
      </div>
      {menuOpen && (
        <div className="nav-mobile">
          {items.map((item) => {
            const active = route === item.id || (item.id !== '/' && route.startsWith(item.id));
            return (
              <a key={item.id}
                 className={'nav-mobile-link' + (active ? ' active' : '')}
                 onClick={() => go(item.id)}>
                {item.label}
              </a>
            );
          })}
          <button className="nav-mobile-cta" onClick={() => go('/contact')}>{t('nav.briefing')}</button>
        </div>
      )}
    </nav>
  );
}

/* ----------------------------------------------------------------- hero artwork
   Photography composition - Ashgabat business district / industrial imagery.
   Image source is editable via admin panel through window.SITE_DATA.hero.image. */
function HeroArt() {
  const h = window.SITE_DATA && (window.SITE_DATA.hero || window.SITE_DATA.HERO);
  const heroImage = (h && h.image) || 'assets/hero.jpg';
  return (
    <div style={{ position: 'relative', width: '100%', height: '100%' }}>
      <img src={heroImage} alt="Ashgabat" fetchpriority="high" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(135deg, transparent 50%, rgba(10,31,38,0.45))' }} />
    </div>
  );
}

/* Legacy SVG hero art - kept for reference, no longer used.
   To revert to abstract illustration, replace <HeroArt/> usage with <HeroArtSVG/>. */
function HeroArtSVG() {
  return (
    <svg viewBox="0 0 600 750" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
      <defs>
        <linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0"   stopColor="#dce7e7"/>
          <stop offset="0.55" stopColor="#bcd2d3"/>
          <stop offset="1"   stopColor="#6f9598"/>
        </linearGradient>
        <linearGradient id="ground" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#143038"/>
          <stop offset="1" stopColor="#0A1F26"/>
        </linearGradient>
        <linearGradient id="marble" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#FAFAF7"/>
          <stop offset="1" stopColor="#E8E5DA"/>
        </linearGradient>
        <linearGradient id="marble-shade" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#EFEDE5"/>
          <stop offset="1" stopColor="#D6D2C3"/>
        </linearGradient>
        <linearGradient id="teal-fade" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0"   stopColor="#006D77" stopOpacity="0"/>
          <stop offset="0.5" stopColor="#006D77" stopOpacity="0.18"/>
          <stop offset="1"   stopColor="#006D77" stopOpacity="0"/>
        </linearGradient>
      </defs>

      {/* sky */}
      <rect width="600" height="750" fill="url(#sky)"/>

      {/* sun - distant, soft */}
      <circle cx="430" cy="220" r="110" fill="#fafaf7" opacity="0.55"/>
      <circle cx="430" cy="220" r="74"  fill="#fafaf7" opacity="0.75"/>

      {/* teal vignette */}
      <rect width="600" height="750" fill="url(#teal-fade)" opacity="0.7"/>

      {/* distant building band */}
      <g opacity="0.55">
        <rect x="0"   y="430" width="600" height="200" fill="#9cb3b5"/>
        <rect x="40"  y="380" width="60"  height="280" fill="#aac0c2"/>
        <rect x="520" y="395" width="50"  height="280" fill="#aac0c2"/>
      </g>

      {/* mid-distance white marble pavilion (central) */}
      <g>
        <rect x="240" y="340" width="120" height="300" fill="url(#marble)"/>
        {/* dome */}
        <path d="M 240 340 Q 300 280 360 340 Z" fill="url(#marble)"/>
        <rect x="296" y="270" width="8" height="22" fill="#C9A961"/>
        <circle cx="300" cy="265" r="6" fill="#C9A961"/>
        {/* column rhythm */}
        {[0,1,2,3,4,5].map(i => (
          <rect key={i} x={252 + i*18} y={360} width="8" height="280" fill="url(#marble-shade)"/>
        ))}
        <rect x="240" y="350" width="120" height="12" fill="url(#marble-shade)"/>
        <rect x="240" y="630" width="120" height="14" fill="#1A2A30" opacity="0.18"/>
      </g>

      {/* flanking towers */}
      <g>
        <rect x="120" y="420" width="80"  height="220" fill="url(#marble)"/>
        {[0,1,2,3,4,5,6,7,8].map(i => (
          <rect key={i} x="128" y={432 + i*22} width="64" height="2" fill="#bdb6a6" opacity="0.7"/>
        ))}

        <rect x="400" y="400" width="86" height="240" fill="url(#marble)"/>
        {[0,1,2,3,4,5,6,7,8,9].map(i => (
          <rect key={i} x="408" y={414 + i*22} width="70" height="2" fill="#bdb6a6" opacity="0.7"/>
        ))}
      </g>

      {/* a single small tower right */}
      <rect x="500" y="460" width="40" height="180" fill="url(#marble)"/>

      {/* foreground plinth + ground */}
      <rect x="0" y="640" width="600" height="110" fill="url(#ground)"/>

      {/* gold horizon line (subtle Bilermen accent) */}
      <line x1="0" y1="640" x2="600" y2="640" stroke="#C9A961" strokeWidth="1.5" opacity="0.7"/>

      {/* fine grain - three diagonal teal strokes (echo the monogram) */}
      <g opacity="0.42">
        <path d="M -20 720 L 90 540 L 110 540 L 0 720 Z" fill="#006D77"/>
        <path d="M 30 720 L 140 540 L 160 540 L 50 720 Z" fill="#00A5A8"/>
        <path d="M 80 720 L 190 540 L 210 540 L 100 720 Z" fill="#3CB4B4"/>
      </g>
    </svg>
  );
}

/* ----------------------------------------------------------------- logo carousel */
/* Real partner logos sourced from Wikipedia Commons (public domain / fair use for display).
   Admin can override the logoUrl. If a logo fails to load, initials badge is used as fallback. */
const TOP_LOGOS = [
  { name: 'World Bank', initials: 'WB', color: '#dbeafe', group: 'development', url: 'https://www.worldbank.org/' },
  { name: 'USAID',      initials: 'US', color: '#dbe7fe', group: 'development', url: 'https://www.usaid.gov/' },
  { name: 'EBRD',       initials: 'EB', color: '#fef3c7', group: 'development', url: 'https://www.ebrd.com/' },
  { name: 'GIZ',        initials: 'GI', color: '#fce7f3', group: 'development', url: 'https://www.giz.de/en/' },
  { name: 'UNECE',      initials: 'UN', color: '#e0e7ff', group: 'development', url: 'https://unece.org/' },
];
const BOTTOM_LOGOS = [
  { name: 'Robert Bosch',   initials: 'RB', color: '#dcfce7', group: 'private', url: 'https://www.bosch.com/' },
  { name: 'Deloitte',       initials: 'De', color: '#dbeafe', group: 'private', url: 'https://www.deloitte.com/' },
  { name: 'Oliver Wyman',   initials: 'OW', color: '#e0e7ff', group: 'private', url: 'https://www.oliverwyman.com/' },
  { name: 'DAI Global',     initials: 'DA', color: '#fef3c7', group: 'private', url: 'https://www.dai.com/' },
  { name: 'Van Oord',       initials: 'VO', color: '#cffafe', group: 'private', url: 'https://www.vanoord.com/' },
  { name: 'Bouygues',       initials: 'BO', color: '#fed7aa', group: 'private', url: 'https://www.bouygues-construction.com/' },
  { name: 'Dragon Oil',     initials: 'DO', color: '#fecaca', group: 'private', url: 'https://www.dragonoil.com/' },
  { name: 'Ronesans',       initials: 'RO', color: '#ddd6fe', group: 'private', url: 'https://www.ronesans.com/' },
  { name: 'Euromonitor',    initials: 'EU', color: '#bfdbfe', group: 'private', url: 'https://www.euromonitor.com/' },
  { name: 'R&M Electrical', initials: 'RM', color: '#fce7f3', group: 'private', url: 'https://www.r-m.com/' },
];

/* Expose partners to window so admin panel can read defaults */
window.PARTNERS_TOP = TOP_LOGOS;
window.PARTNERS_BOTTOM = BOTTOM_LOGOS;

/* Inline SVG logos - render guaranteed, no external load. */
function PartnerLogoSvg({ name }) {
  const s = { width: '100%', height: '100%', display: 'block' };
  switch (name) {
    case 'World Bank':
      return (<svg viewBox="0 0 200 50" xmlns="http://www.w3.org/2000/svg" style={s}>
        <text x="100" y="22" textAnchor="middle" fontFamily="Georgia,serif" fontWeight="700" fontSize="14" fill="#002244">THE WORLD BANK</text>
        <text x="100" y="40" textAnchor="middle" fontFamily="Georgia,serif" fontStyle="italic" fontSize="10" fill="#002244">IBRD · IDA</text>
      </svg>);
    case 'USAID':
      return <img src="assets/usaid.svg" alt="USAID Logo" style={{ ...s, objectFit: 'contain' }} />;
    case 'EBRD':
      return (<svg viewBox="0 0 200 50" xmlns="http://www.w3.org/2000/svg" style={s}>
        <text x="100" y="34" textAnchor="middle" fontFamily="Arial,sans-serif" fontWeight="900" fontSize="28" fill="#003E7E">EBRD</text>
      </svg>);
    case 'GIZ':
      return (<svg viewBox="0 0 200 50" xmlns="http://www.w3.org/2000/svg" style={s}>
        <rect x="75" y="8" width="50" height="34" fill="#E2001A"/>
        <text x="100" y="33" textAnchor="middle" fontFamily="Arial,sans-serif" fontWeight="900" fontSize="22" fill="#FFFFFF">giz</text>
      </svg>);
    case 'UNECE':
      return (<svg viewBox="0 0 200 50" xmlns="http://www.w3.org/2000/svg" style={s}>
        <text x="100" y="34" textAnchor="middle" fontFamily="Arial,sans-serif" fontWeight="700" fontSize="20" fill="#009EDB">UNECE</text>
      </svg>);
    case 'UNDP':
      return (<svg viewBox="0 0 200 50" xmlns="http://www.w3.org/2000/svg" style={s}>
        <text x="100" y="34" textAnchor="middle" fontFamily="Arial,sans-serif" fontWeight="900" fontSize="24" fill="#006EB6">UNDP</text>
      </svg>);
    case 'Robert Bosch':
      return (<svg viewBox="0 0 200 50" xmlns="http://www.w3.org/2000/svg" style={s}>
        <g transform="translate(3,2)" fill="none" stroke="#0a0a0a" strokeLinecap="round">
          <circle cx="23" cy="23" r="21.5" strokeWidth="2.6"/>
          <path d="M16 9.5 Q10 23 16 36.5" strokeWidth="3.2"/>
          <path d="M30 9.5 Q36 23 30 36.5" strokeWidth="3.2"/>
          <line x1="16" y1="23" x2="30" y2="23" strokeWidth="3.2"/>
        </g>
        <text x="122" y="34" textAnchor="middle" fontFamily="Arial, Helvetica, sans-serif" fontWeight="700" fontSize="30" fill="#E20015" letterSpacing="1.5">BOSCH</text>
      </svg>);
    case 'Deloitte':
      return (<svg viewBox="0 0 200 50" xmlns="http://www.w3.org/2000/svg" style={s}>
        <text x="96" y="34" textAnchor="middle" fontFamily="Arial,Helvetica,sans-serif" fontWeight="700" fontSize="27" fill="#000" letterSpacing="0.2">Deloitte</text>
        <circle cx="152" cy="31" r="4.6" fill="#86BC25"/>
      </svg>);
    case 'Oliver Wyman':
      return (<svg viewBox="0 0 200 50" xmlns="http://www.w3.org/2000/svg" style={s}>
        <text x="100" y="33" textAnchor="middle" fontFamily="Georgia,'Times New Roman',serif" fontWeight="400" fontSize="22" fill="#0A2240">Oliver Wyman</text>
      </svg>);
    case 'DAI Global':
      return (<svg viewBox="0 0 200 50" xmlns="http://www.w3.org/2000/svg" style={s}>
        <text x="100" y="30" textAnchor="middle" fontFamily="Arial,sans-serif" fontWeight="900" fontSize="26" fill="#005696">DAI</text>
        <text x="100" y="42" textAnchor="middle" fontFamily="Arial,sans-serif" fontWeight="700" fontSize="8" fill="#005696" letterSpacing="3">GLOBAL</text>
      </svg>);
    case 'Van Oord':
      return (<svg viewBox="0 0 200 50" xmlns="http://www.w3.org/2000/svg" style={s}>
        <text x="100" y="33" textAnchor="middle" fontFamily="Georgia,serif" fontWeight="700" fontSize="18" fill="#004A80">Van Oord</text>
      </svg>);
    case 'Bouygues':
      return (<svg viewBox="0 0 200 50" xmlns="http://www.w3.org/2000/svg" style={s}>
        <text x="100" y="33" textAnchor="middle" fontFamily="Arial,sans-serif" fontWeight="900" fontSize="18" fill="#DE0023">BOUYGUES</text>
      </svg>);
    case 'Dragon Oil':
      return (<svg viewBox="0 0 200 50" xmlns="http://www.w3.org/2000/svg" style={s}>
        <text x="100" y="22" textAnchor="middle" fontFamily="Arial,sans-serif" fontWeight="900" fontSize="12" fill="#C8102E">DRAGON</text>
        <text x="100" y="40" textAnchor="middle" fontFamily="Arial,sans-serif" fontWeight="900" fontSize="12" fill="#C8102E">OIL</text>
      </svg>);
    case 'Ronesans':
      return (<svg viewBox="0 0 200 50" xmlns="http://www.w3.org/2000/svg" style={s}>
        <text x="100" y="33" textAnchor="middle" fontFamily="Arial,sans-serif" fontWeight="900" fontSize="18" fill="#E63946">RONESANS</text>
      </svg>);
    case 'Euromonitor':
      return (<svg viewBox="0 0 200 50" xmlns="http://www.w3.org/2000/svg" style={s}>
        <text x="100" y="22" textAnchor="middle" fontFamily="Arial,sans-serif" fontWeight="700" fontSize="12" fill="#1A3766">EUROMONITOR</text>
        <text x="100" y="38" textAnchor="middle" fontFamily="Arial,sans-serif" fontSize="8" fill="#1A3766" letterSpacing="1.5">INTERNATIONAL</text>
      </svg>);
    case 'R&M Electrical':
      return (<svg viewBox="0 0 200 50" xmlns="http://www.w3.org/2000/svg" style={s}>
        <text x="100" y="35" textAnchor="middle" fontFamily="Arial,sans-serif" fontWeight="900" fontSize="24" fill="#003D7A">R&amp;M</text>
      </svg>);
    default: return null;
  }
}

function PartnerCard({ logo }) {
  const hasImg = logo.logo && logo.logo.trim();
  const hasSvg = !hasImg && PartnerLogoSvg({ name: logo.name }) !== null;
  return (
    <a className="logo-card" href={logo.url || '#'} target="_blank" rel="noopener noreferrer" title={logo.name}>
      {hasImg
        ? <img src={logo.logo} alt={logo.name} loading="lazy" decoding="async" style={{ width: '100%', height: '100%', objectFit: 'contain', display: 'block' }} />
        : hasSvg
          ? <PartnerLogoSvg name={logo.name} />
          : <span style={{ font: '700 15px/1.2 var(--font-sans)', color: 'var(--color-ink)', textAlign: 'center', padding: '0 8px' }}>{logo.name}</span>}
    </a>
  );
}

function LogoTrack({ logos, reverse }) {
  // Triple the array so the seamless loop has enough buffer at all widths.
  const all = [...logos, ...logos, ...logos];
  return (
    <div className="lane">
      <div className={'track' + (reverse ? ' reverse' : '')}>
        {all.map((l, i) => <PartnerCard key={i} logo={l} />)}
      </div>
    </div>
  );
}

function LogoCarousel({ heading, eyebrow, subtitle }) {
  const all = (window.SITE_DATA.PARTNERS && window.SITE_DATA.PARTNERS.length)
    ? window.SITE_DATA.PARTNERS
    : [...(window.PARTNERS_TOP || []), ...(window.PARTNERS_BOTTOM || [])];
  const top = all.filter(p => p.group === 'development');
  const bottom = all.filter(p => p.group !== 'development');
  return (
    <section className="logo-band">
      <div className="container logo-band-header">
        <div className="eyebrow">{eyebrow || t('track.eyebrow')}</div>
        <h2 className="display-md">{heading || t('track.title')}</h2>
        <p className="logo-band-sub">{subtitle === undefined ? t('track.lede') : subtitle}</p>
      </div>
      {top.length > 0 && <>
        <div className="logo-band-label">{t('track.devPartners')}</div>
        <LogoTrack logos={top} />
      </>}
      <div style={{ height: 24 }}></div>
      {bottom.length > 0 && <>
        <div className="logo-band-label">{t('track.privateSector')}</div>
        <LogoTrack logos={bottom} reverse />
      </>}
    </section>
  );
}

/* ----------------------------------------------------------------- dark CTA */
function CtaDark({ navigate, heading, body, primary, primaryTo = '/contact', secondary, secondaryTo }) {
  const lang = window.SITE_LANG || 'en';
  const defPrim = lang === 'ru' ? 'Запросить брифинг' : 'Request a briefing';
  const defHead = lang === 'ru' ? 'Готовы выйти на рынок Туркменистана?' : 'Ready to enter the Turkmen market?';
  const defBody = lang === 'ru' ? 'Расскажите о вашем секторе и сроках. Мы ответим в течение двух рабочих дней.' : 'Tell us about your sector and timeline. We respond within two business days.';
  const inTouch = lang === 'ru' ? 'Связаться' : 'Get in touch';
  return (
    <section className="cta-dark">
      <div className="container">
        <Eyebrow onDark>{inTouch}</Eyebrow>
        <h2 className="display-lg">{heading || defHead}</h2>
        <p>{body || defBody}</p>
        <div className="cta-dark-actions">
          <Button onClick={() => navigate(primaryTo)}>{primary || defPrim}</Button>
          {secondary && <Button variant="ghost-dark" onClick={() => navigate(secondaryTo)}>{secondary}</Button>}
        </div>
      </div>
    </section>
  );
}

/* ----------------------------------------------------------------- footer */
function Footer({ navigate }) {
  const lang = window.SITE_LANG || 'en';
  return (
    <footer className="site">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-brand">
            <img src={(window.SITE_DATA.LOGO && window.SITE_DATA.LOGO.src) || 'assets/bilermen-lockup.svg'} alt={(window.SITE_DATA.LOGO && window.SITE_DATA.LOGO.alt) || 'Bilermen'} />
            <p>{(window.SITE_DATA.FOOTER && (window.SITE_DATA.FOOTER['tagline_' + lang] || window.SITE_DATA.FOOTER.tagline)) || t('footer.tagline')}</p>
          </div>
          <div>
            <h6>{t('footer.services')}</h6>
            <div className="footer-links">
              {window.SITE_DATA.SERVICES.map(s => (
                <a key={s.slug} onClick={() => navigate('/services/' + s.slug)}>{s['title_' + lang] || s.title}</a>
              ))}
            </div>
          </div>
          <div>
            <h6>{t('footer.sectors')}</h6>
            <div className="footer-links">
              {window.SITE_DATA.SECTORS.map(s => (
                <a key={s.slug} onClick={() => navigate('/sectors/' + s.slug)}>{(s['title_' + lang] || s.title).split(' &')[0]}</a>
              ))}
            </div>
          </div>
          <div>
            <h6>{t('footer.firm')}</h6>
            <div className="footer-links">
              <a onClick={() => navigate('/about')}>{t('footer.about')}</a>
              <a onClick={() => navigate('/news')}>{t('footer.news')}</a>
              <a onClick={() => navigate('/contact')}>{t('footer.contact')}</a>
            </div>
          </div>
          <div>
            <h6>{t('footer.office')}</h6>
            <div className="footer-links footer-office">
              {(() => {
                const c = (window.SITE_DATA.CONTACTS && window.SITE_DATA.CONTACTS[0]) || {};
                const addr = (c['address_' + lang] || c.address || '');
                const addrLines = addr.split('\n');
                return (
                  <>
                    {c.addressUrl
                      ? <a href={c.addressUrl} target="_blank" rel="noopener noreferrer">{addrLines.map((ln, i) => <span key={i}>{ln}{i < addrLines.length - 1 ? <br/> : null}</span>)}</a>
                      : <span>{addrLines.map((ln, i) => <span key={i}>{ln}{i < addrLines.length - 1 ? <br/> : null}</span>)}</span>}
                    {c.email && <a className="footer-email" href={'mailto:' + c.email}>{c.email}</a>}
                    {c.phone && <a href={'tel:' + c.phone.replace(/\s+/g, '')}>{c.phone}</a>}
                    {c.phone2 && <a href={'tel:' + c.phone2.replace(/\s+/g, '')}>{c.phone2}</a>}
                    {c.linkedin && <a href={c.linkedin} target="_blank" rel="noopener noreferrer">LinkedIn →</a>}
                  </>
                );
              })()}
            </div>
          </div>
        </div>
        <div className="footer-bar">
          <span>{t('footer.copyright')}</span>
          <a onClick={() => navigate('/privacy')} style={{ cursor: 'pointer' }}>{(window.SITE_DATA.FOOTER && (window.SITE_DATA.FOOTER['legal_' + lang] || window.SITE_DATA.FOOTER.legal)) || t('footer.legal')}</a>
        </div>
      </div>
    </footer>
  );
}

/* ----------------------------------------------------------------- toast */
function Toast({ title, body, onDismiss }) {
  useEffect(() => { const t = setTimeout(onDismiss, 4500); return () => clearTimeout(t); }, []);
  return <div className="toast"><h5>{title}</h5><p>{body}</p></div>;
}

/* ----------------------------------------------------------------- sector / advantage art */
function SectorPhotoArt({ slug }) {
  const lang = window.SITE_LANG || 'en';
  const sector = window.SITE_DATA && window.SITE_DATA.SECTORS
    ? window.SITE_DATA.SECTORS.find(s => s.slug === slug) : null;
  const img = sector && (sector['image_' + lang] || sector.image);
  if (img) {
    return (
      <div className={'sector-photo ' + slug} style={{ width: '100%', height: '100%', position: 'relative' }}>
        <img src={img} alt={slug} loading="lazy" decoding="async" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
      </div>
    );
  }
  return <div className={'sector-photo ' + slug} style={{ width: '100%', height: '100%' }} />;
}

function AdvantageArt({ slug }) {
  // A small, distinctive abstract treatment per advantage - geometry only,
  // teal + cream + navy palette.
  const variants = {
    'local-presence': (
      <svg viewBox="0 0 500 220" preserveAspectRatio="xMidYMid slice">
        <rect width="500" height="220" fill="#F5F4EF"/>
        <rect x="0" y="160" width="500" height="60" fill="#0A1F26"/>
        {/* skyline silhouette */}
        <g fill="#143038">
          <rect x="60"  y="100" width="40" height="60"/>
          <rect x="110" y="80"  width="50" height="80"/>
          <rect x="170" y="110" width="30" height="50"/>
          <path d="M 210 110 Q 230 80 250 110 L 250 160 L 210 160 Z" fill="#143038"/>
          <rect x="220" y="65"  width="3"  height="20"/>
          <rect x="260" y="100" width="50" height="60"/>
          <rect x="320" y="90"  width="40" height="70"/>
          <rect x="370" y="115" width="30" height="45"/>
          <rect x="410" y="100" width="50" height="60"/>
        </g>
        {/* gold horizon */}
        <line x1="0" y1="160" x2="500" y2="160" stroke="#C9A961" strokeWidth="1.2" opacity="0.8"/>
        {/* date stripe */}
      </svg>
    ),
    'regulatory-access': (
      <svg viewBox="0 0 500 220" preserveAspectRatio="xMidYMid slice">
        <rect width="500" height="220" fill="#0A1F26"/>
        {/* radial map of nodes */}
        <g fill="none" stroke="#006D77" strokeWidth="1" opacity="0.45">
          <circle cx="250" cy="110" r="50"/>
          <circle cx="250" cy="110" r="80"/>
          <circle cx="250" cy="110" r="110"/>
        </g>
        <g fill="#00A5A8">
          <circle cx="250" cy="110" r="9"/>
          {[0,1,2,3,4,5,6,7].map(i => {
            const a = i * Math.PI / 4;
            return <circle key={i} cx={250 + Math.cos(a)*80} cy={110 + Math.sin(a)*80} r="5"/>;
          })}
          {[0,1,2,3,4,5].map(i => {
            const a = i * Math.PI / 3 + 0.2;
            return <circle key={'b'+i} cx={250 + Math.cos(a)*110} cy={110 + Math.sin(a)*110} r="4" opacity="0.6"/>;
          })}
        </g>
        <g stroke="#00A5A8" strokeWidth="0.8" opacity="0.5">
          {[0,1,2,3,4,5,6,7].map(i => {
            const a = i * Math.PI / 4;
            return <line key={i} x1="250" y1="110" x2={250 + Math.cos(a)*80} y2={110 + Math.sin(a)*80}/>;
          })}
        </g>
      </svg>
    ),
    'sector-depth': (
      <svg viewBox="0 0 500 220" preserveAspectRatio="xMidYMid slice">
        <rect width="500" height="220" fill="#F5F4EF"/>
        {/* 4 sector stripes */}
        <g>
          <rect x="40"  y="40" width="100" height="140" fill="#d6792f"/>
          <rect x="150" y="40" width="100" height="140" fill="#8a9d3a"/>
          <rect x="260" y="40" width="100" height="140" fill="#b89788"/>
          <rect x="370" y="40" width="100" height="140" fill="#3a4f5e"/>
        </g>
        {/* numerals */}
        <g fontFamily="Playfair Display, serif" fill="#FAFAF7" fontWeight="500">
          <text x="90"  y="120" textAnchor="middle" fontSize="44">01</text>
          <text x="200" y="120" textAnchor="middle" fontSize="44">02</text>
          <text x="310" y="120" textAnchor="middle" fontSize="44">03</text>
          <text x="420" y="120" textAnchor="middle" fontSize="44">04</text>
        </g>
      </svg>
    ),
    'international-standards': (
      <svg viewBox="0 0 500 220" preserveAspectRatio="xMidYMid slice">
        <rect width="500" height="220" fill="#0A1F26"/>
        {/* ledger lines */}
        <g stroke="#143038" strokeWidth="1">
          {[0,1,2,3,4,5,6,7,8].map(i => (
            <line key={i} x1="40" y1={30 + i*22} x2="460" y2={30 + i*22}/>
          ))}
        </g>
        {/* check rows */}
        <g stroke="#00A5A8" strokeWidth="2.4" fill="none" strokeLinecap="round" strokeLinejoin="round">
          {[0,1,2,3,4,5,6,7].map(i => (
            <path key={i} d={`M ${50} ${42 + i*22} l 6 6 l 12 -12`} opacity={0.4 + (i%3)*0.2}/>
          ))}
        </g>
        <g fill="#FAFAF7" fontFamily="Inter, sans-serif" fontSize="10" fontWeight="500" opacity="0.6">
          {[0,1,2,3,4,5,6,7].map(i => (
            <text key={i} x="80" y={46 + i*22}>{['World Bank OP/BP','EBRD ESP','ADB SPS','OECD ABC','GIIN IRIS','UNGC','GRI G4','ISO 37001'][i]}</text>
          ))}
        </g>
      </svg>
    ),
    'discretion': (
      <svg viewBox="0 0 500 220" preserveAspectRatio="xMidYMid slice">
        <rect width="500" height="220" fill="#F5F4EF"/>
        {/* paper sheet with redactions */}
        <rect x="100" y="30" width="300" height="160" fill="#FAFAF7" stroke="#E2E8E8"/>
        <g fill="#0A1F26">
          <rect x="120" y="56"  width="180" height="10"/>
          <rect x="120" y="76"  width="240" height="6" opacity="0.4"/>
          <rect x="120" y="90"  width="220" height="6" opacity="0.4"/>
          <rect x="120" y="104" width="140" height="6" opacity="0.4"/>
        </g>
        {/* redaction bars */}
        <g fill="#0A1F26">
          <rect x="120" y="124" width="80"  height="14"/>
          <rect x="208" y="124" width="120" height="14"/>
          <rect x="120" y="148" width="140" height="14"/>
          <rect x="268" y="148" width="60"  height="14"/>
        </g>
        {/* teal seal */}
        <circle cx="350" cy="166" r="18" fill="none" stroke="#006D77" strokeWidth="1.5"/>
        <text x="350" y="170" textAnchor="middle" fontFamily="Inter, sans-serif" fontSize="8" fontWeight="700" fill="#006D77" letterSpacing="0.5">NDA</text>
      </svg>
    ),
  };
  return variants[slug] || variants['local-presence'];
}

Object.assign(window, {
  FadeIn, Eyebrow, Button, TextLink,
  Nav, Footer, HeroArt, LogoCarousel, CtaDark, Toast,
  SectorPhotoArt, AdvantageArt,
});