/* Small shared atoms: Logo, icons, geometric pattern */

/* Official LAMHA artwork from the brand kit.
   kind: "lockup" (wordmark + icon, aspect 3.09) | "icon" (mark only, aspect 1.42)
   onDark: use the white version */
function LamhaLogo({ height = 34, kind = 'lockup', onDark = false }) {
  const src = `assets/logo-${kind}${onDark ? '-white' : ''}.png`;
  return <img src={src} alt="لمحة LAMHA" style={{ height, width: 'auto' }} />;
}

function GeoPattern({ className }) {
  // Saudi heritage Sadu-inspired pattern
  return (
    <svg className={className} viewBox="0 0 200 200" fill="none" aria-hidden="true">
      <defs>
        <pattern id="sadu" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse">
          <path d="M0 20 L20 0 L40 20 L20 40 Z" stroke="currentColor" strokeWidth="1" fill="none" />
          <circle cx="20" cy="20" r="3" fill="currentColor" />
          <path d="M0 0 L40 40 M40 0 L0 40" stroke="currentColor" strokeWidth="0.5" opacity="0.5" />
        </pattern>
      </defs>
      <rect width="200" height="200" fill="url(#sadu)" />
    </svg>
  );
}

const LAMHA_WHATSAPP = 'https://wa.me/966125101123';
const LAMHA_SOCIAL = 'lamhalogistics';

const Icons = {
  arrow: <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8h10m0 0L8 3m5 5l-5 5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" /></svg>,
  arrowSm: <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M3 8h10m0 0L8 3m5 5l-5 5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" /></svg>,
  parcel: <svg viewBox="0 0 24 24" fill="none"><path d="M21 8.2L12 3.4 3 8.2v7.6L12 20.6l9-4.8V8.2z" stroke="currentColor" strokeWidth="1.7" strokeLinejoin="round"/><path d="M3 8.2l9 4.8 9-4.8M12 13v7.6" stroke="currentColor" strokeWidth="1.7" strokeLinejoin="round"/></svg>,
  check: <svg viewBox="0 0 24 24" fill="none"><path d="M5 12.8l4.6 4.6L19 8" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/></svg>,
  cross: <svg viewBox="0 0 24 24" fill="none"><path d="M7 7l10 10M17 7L7 17" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"/></svg>,
  plus: <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M8 3v10M3 8h10" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" /></svg>,
  network: <svg viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="2.6" stroke="currentColor" strokeWidth="1.6"/><circle cx="4" cy="5" r="2" stroke="currentColor" strokeWidth="1.6"/><circle cx="20" cy="5" r="2" stroke="currentColor" strokeWidth="1.6"/><circle cx="4" cy="19" r="2" stroke="currentColor" strokeWidth="1.6"/><circle cx="20" cy="19" r="2" stroke="currentColor" strokeWidth="1.6"/><path d="M5.6 6.4l4.6 4M18.4 6.4l-4.6 4M5.6 17.6l4.6-4M18.4 17.6l-4.6-4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/></svg>,
  shield: <svg viewBox="0 0 24 24" fill="none"><path d="M12 2.5l7.5 3v6c0 4.6-3.1 8.4-7.5 10-4.4-1.6-7.5-5.4-7.5-10v-6l7.5-3z" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"/><path d="M8.8 12.2l2.2 2.2 4.2-4.4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>,
  wallet: <svg viewBox="0 0 24 24" fill="none"><rect x="2.5" y="6" width="19" height="13" rx="2.5" stroke="currentColor" strokeWidth="1.6"/><path d="M2.5 10.5h19M6 6V4.5A1.5 1.5 0 017.5 3h9A1.5 1.5 0 0118 4.5V6" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/><circle cx="17" cy="14.5" r="1.3" fill="currentColor"/></svg>,
  bolt: <svg viewBox="0 0 24 24" fill="none"><path d="M13.2 2.5L4.8 13.2h5.4l-1.4 8.3 8.4-10.7h-5.4l1.4-8.3z" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>,
  console: <svg viewBox="0 0 24 24" fill="none"><rect x="2.5" y="3.5" width="19" height="17" rx="2.5" stroke="currentColor" strokeWidth="1.6"/><path d="M2.5 8.5h19M8 8.5v12" stroke="currentColor" strokeWidth="1.6"/><path d="M11.5 12h6.5M11.5 15.5h4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/></svg>,
  radar: <svg viewBox="0 0 24 24" fill="none"><path d="M3.5 18.5h17" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/><path d="M5 18.5V13M9.7 18.5V9M14.3 18.5v-6.2M19 18.5V5.5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/><circle cx="19" cy="5.5" r="1.6" fill="currentColor"/></svg>,
  analytics: <svg viewBox="0 0 24 24" fill="none"><path d="M3.5 3.5v17h17" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/><path d="M7 15.5l3.5-4 3 2.8 5-6.3" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/><circle cx="18.5" cy="8" r="1.4" fill="currentColor"/></svg>,
  alert: <svg viewBox="0 0 24 24" fill="none"><path d="M18 8.5a6 6 0 10-12 0c0 6-2.5 8-2.5 8h17S18 14.5 18 8.5z" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"/><path d="M10.2 20.5a2 2 0 003.6 0" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/></svg>,
  seedling: <svg viewBox="0 0 24 24" fill="none"><path d="M12 21v-7" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/><path d="M12 14C12 9.5 8.5 6.5 3.5 6.5c0 4.5 3.5 7.5 8.5 7.5z" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"/><path d="M12 14c0-4 3-7 8.5-7 0 4-3.5 7-8.5 7z" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"/></svg>,
  storefront: <svg viewBox="0 0 24 24" fill="none"><path d="M3 9.5V20h18V9.5" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"/><path d="M2 9.5l2.2-5.5h15.6L22 9.5" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"/><path d="M2 9.5h20" stroke="currentColor" strokeWidth="1.6"/><path d="M9.5 20v-5.5h5V20" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"/></svg>,
  warehouse: <svg viewBox="0 0 24 24" fill="none"><path d="M2.5 20.5V8.5L12 4l9.5 4.5v12" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"/><path d="M7.5 20.5v-6h9v6" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"/><path d="M7.5 17.5h9" stroke="currentColor" strokeWidth="1.6"/></svg>,
  handshake: <svg viewBox="0 0 24 24" fill="none"><path d="M2.5 11l3.5-3.5 3.5 2 2.5-2.5 2.5 2.5 3.5-2L21.5 11" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/><path d="M6 7.5L2.5 11l3 3.5 2.5-2M18 7.5l3.5 3.5-3 3.5-2.5-2" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/><path d="M9.5 16.5l2.5 2 2.5-2" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>,
  cart: <svg viewBox="0 0 24 24" fill="none"><path d="M2.5 3.5h2.6l2.4 11h10.4l2.1-8H6.4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/><circle cx="9" cy="19" r="1.7" stroke="currentColor" strokeWidth="1.6"/><circle cx="17" cy="19" r="1.7" stroke="currentColor" strokeWidth="1.6"/></svg>,
  api: <svg viewBox="0 0 24 24" fill="none"><path d="M8.5 7L4 12l4.5 5M15.5 7L20 12l-4.5 5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/><path d="M13.5 4l-3 16" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/></svg>,
  doc: <svg viewBox="0 0 24 24" fill="none"><path d="M13.5 2.5H7A2.5 2.5 0 004.5 5v14A2.5 2.5 0 007 21.5h10a2.5 2.5 0 002.5-2.5V8.5l-6-6z" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"/><path d="M13.5 2.5v6h6" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"/><path d="M8.5 13h7M8.5 16.5h4.5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/></svg>,
  download: <svg viewBox="0 0 24 24" fill="none"><path d="M12 3.5v11m0 0l-4-4m4 4l4-4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/><path d="M4 17v2.5A1.5 1.5 0 005.5 21h13a1.5 1.5 0 001.5-1.5V17" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/></svg>,
  riyalIcon: <svg viewBox="0 0 1124.14 1256.39" fill="currentColor"><path d="M699.62,1113.02h0c-20.06,44.48-33.32,92.75-38.4,143.37l424.51-90.24c20.06-44.47,33.31-92.75,38.4-143.37l-424.51,90.24Z"/><path d="M1085.73,895.8c20.06-44.47,33.32-92.75,38.4-143.37l-330.68,70.33v-135.2l292.27-62.11c20.06-44.47,33.32-92.75,38.4-143.37l-330.68,70.27V66.13c-50.67,28.45-95.67,66.32-132.25,110.99v403.35l-132.25,28.11V0c-50.67,28.44-95.67,66.32-132.25,110.99v525.69l-295.91,62.88c-20.06,44.47-33.33,92.75-38.42,143.37l334.33-71.05v170.26l-358.3,76.14c-20.06,44.47-33.32,92.75-38.4,143.37l396.7-84.33v-.02l132.25-28.11v-.02l290.87-61.83v-135.2l-159.36,33.87v-170.25l205.51-43.69Z"/></svg>,
  riyal: <svg viewBox="0 0 1124.14 1256.39" fill="currentColor" style={{width:'0.62em',height:'0.62em',display:'inline-block',verticalAlign:'-0.02em',marginInlineEnd:'0.08em'}}><path d="M699.62,1113.02h0c-20.06,44.48-33.32,92.75-38.4,143.37l424.51-90.24c20.06-44.47,33.31-92.75,38.4-143.37l-424.51,90.24Z"/><path d="M1085.73,895.8c20.06-44.47,33.32-92.75,38.4-143.37l-330.68,70.33v-135.2l292.27-62.11c20.06-44.47,33.32-92.75,38.4-143.37l-330.68,70.27V66.13c-50.67,28.45-95.67,66.32-132.25,110.99v403.35l-132.25,28.11V0c-50.67,28.44-95.67,66.32-132.25,110.99v525.69l-295.91,62.88c-20.06,44.47-33.33,92.75-38.42,143.37l334.33-71.05v170.26l-358.3,76.14c-20.06,44.47-33.32,92.75-38.4,143.37l396.7-84.33v-.02l132.25-28.11v-.02l290.87-61.83v-135.2l-159.36,33.87v-170.25l205.51-43.69Z"/></svg>,
  whatsapp: <svg viewBox="0 0 24 24" fill="currentColor"><path d="M20.5 3.5A11.9 11.9 0 0012 0C5.4 0 0 5.4 0 12c0 2.1.6 4.2 1.6 6L0 24l6.2-1.6c1.7 1 3.7 1.5 5.7 1.5 6.6 0 12-5.4 12-12 0-3.2-1.2-6.2-3.4-8.4zM12 22c-1.8 0-3.5-.5-5-1.4l-.4-.2-3.7 1 1-3.6-.2-.4c-1-1.6-1.5-3.4-1.5-5.3 0-5.5 4.5-9.9 9.9-9.9 2.6 0 5.1 1 7 2.9 1.9 1.9 2.9 4.4 2.9 7 0 5.4-4.5 9.9-10 9.9zm5.4-7.4l-1.7-.8c-.2-.1-.4-.1-.6.1l-.7.9c-.2.2-.3.2-.5.1-.2-.1-1-.4-1.9-1.2-.7-.6-1.2-1.4-1.3-1.6-.1-.2 0-.4.1-.5l.4-.4c.1-.1.2-.3.3-.4.1-.2 0-.3 0-.4l-.7-1.7c-.2-.5-.4-.4-.6-.4h-.5c-.2 0-.4.1-.6.3-.2.2-.8.8-.8 2 0 1.2.9 2.3 1 2.5.1.2 1.7 2.6 4.1 3.6 1.4.6 2 .7 2.7.6.4-.1 1.3-.5 1.5-1.1.2-.5.2-1 .1-1.1 0-.1-.2-.2-.4-.3z"/></svg>,
  ig: <svg viewBox="0 0 24 24" fill="none"><rect x="2" y="2" width="20" height="20" rx="5" stroke="currentColor" strokeWidth="1.6"/><circle cx="12" cy="12" r="4" stroke="currentColor" strokeWidth="1.6"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor"/></svg>,
  x: <svg viewBox="0 0 24 24" fill="currentColor"><path d="M18 2h3l-7 8 8 12h-7l-5-7-6 7H1l8-9L1 2h7l4 6 6-6z"/></svg>,
};

window.LAMHA_WHATSAPP = LAMHA_WHATSAPP;
window.LAMHA_SOCIAL = LAMHA_SOCIAL;

window.LamhaLogo = LamhaLogo;
window.GeoPattern = GeoPattern;
window.Icons = Icons;
