/* === JurisID — Shared Icons (proper React components) === */

const ShieldMark = ({ size = 32 }) => (
  <svg width={size} height={size} viewBox="0 0 32 32" fill="none" aria-hidden="true">
    <path d="M16 2L4 6.5V15c0 7.5 5.2 13 12 15 6.8-2 12-7.5 12-15V6.5L16 2z"
          fill="url(#shGrad)" stroke="rgba(255,255,255,0.2)" strokeWidth="0.5"/>
    <path d="M11 16l3.5 3.5L22 12" stroke="#fff" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/>
    <circle cx="24" cy="8" r="4.5" fill="#22c55e" stroke="#fff" strokeWidth="1.5"/>
    <path d="M22 8l1.5 1.5L26 6.5" stroke="#fff" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
    <defs>
      <linearGradient id="shGrad" x1="4" y1="2" x2="28" y2="30">
        <stop stopColor="#1B3F73"/>
        <stop offset="1" stopColor="#0B2545"/>
      </linearGradient>
    </defs>
  </svg>
);

const Logo = ({ light = false, size = 22 }) => (
  <a href="#top" className="logo" style={{ color: light ? '#fff' : 'var(--navy-900)' }}>
    <span className="logo-mark"><ShieldMark size={28} /></span>
    <span style={{ fontSize: size }}>
      Juris<span style={{ fontWeight: 600, fontStyle: 'italic' }}>ID</span>
    </span>
  </a>
);

const _stroke = { fill: 'none', stroke: 'currentColor', strokeWidth: 1.6, strokeLinecap: 'round', strokeLinejoin: 'round' };

const Icon = {
  search: ({ s = 20 }) => (<svg width={s} height={s} viewBox="0 0 24 24" {..._stroke}><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>),
  check: ({ s = 20 }) => (<svg width={s} height={s} viewBox="0 0 24 24" {..._stroke} strokeWidth={2}><path d="M20 6 9 17l-5-5"/></svg>),
  alert: ({ s = 20 }) => (<svg width={s} height={s} viewBox="0 0 24 24" {..._stroke}><path d="M12 2 1 21h22L12 2z"/><path d="M12 9v5"/><path d="M12 18h.01"/></svg>),
  shield: ({ s = 20 }) => (<svg width={s} height={s} viewBox="0 0 24 24" {..._stroke}><path d="M12 2 4 6v6c0 5 3.5 9 8 10 4.5-1 8-5 8-10V6l-8-4z"/></svg>),
  bolt: ({ s = 20 }) => (<svg width={s} height={s} viewBox="0 0 24 24" {..._stroke}><path d="M13 2 3 14h7l-1 8 10-12h-7l1-8z"/></svg>),
  whatsapp: ({ s = 20 }) => (<svg width={s} height={s} viewBox="0 0 24 24" fill="currentColor"><path d="M17.5 14.4c-.3-.1-1.7-.8-2-.9-.3-.1-.5-.1-.6.1-.2.3-.7.9-.9 1.1-.2.1-.3.2-.6 0-.3-.1-1.2-.4-2.3-1.4-.9-.8-1.4-1.7-1.6-2-.2-.3 0-.5.1-.6.1-.1.3-.3.4-.5.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5-.1-.1-.6-1.5-.9-2-.2-.5-.5-.5-.6-.5h-.5c-.2 0-.5.1-.7.3-.2.3-.9.9-.9 2.2 0 1.3 1 2.6 1.1 2.7.1.2 1.9 2.9 4.6 4.1.6.3 1.1.4 1.5.5.6.2 1.2.2 1.6.1.5-.1 1.7-.7 1.9-1.4.2-.7.2-1.3.2-1.4-.1-.2-.3-.2-.6-.4zM12 2C6.5 2 2 6.5 2 12c0 1.7.5 3.4 1.3 4.8L2 22l5.3-1.4c1.4.8 3 1.2 4.7 1.2 5.5 0 10-4.5 10-10S17.5 2 12 2zm0 18c-1.5 0-3-.4-4.3-1.2l-.3-.2-3.2.8.9-3.1-.2-.3C4.4 14.8 4 13.4 4 12c0-4.4 3.6-8 8-8s8 3.6 8 8-3.6 8-8 8z"/></svg>),
  lock: ({ s = 20 }) => (<svg width={s} height={s} viewBox="0 0 24 24" {..._stroke}><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg>),
  arrow: ({ s = 16 }) => (<svg width={s} height={s} viewBox="0 0 24 24" {..._stroke} strokeWidth={2}><path d="M5 12h14"/><path d="m13 6 6 6-6 6"/></svg>),
  plus: ({ s = 16 }) => (<svg width={s} height={s} viewBox="0 0 24 24" {..._stroke} strokeWidth={1.8}><path d="M12 5v14M5 12h14"/></svg>),
  user: ({ s = 20 }) => (<svg width={s} height={s} viewBox="0 0 24 24" {..._stroke}><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 4-7 8-7s8 3 8 7"/></svg>),
  badge: ({ s = 20 }) => (<svg width={s} height={s} viewBox="0 0 24 24" {..._stroke}><path d="m12 2 2.4 2.6 3.4-.5.5 3.4L20.9 10 18.3 12.4l.5 3.4-3.4.5L12 19l-2.4-2.6-3.4.5-.5-3.4L3.1 10l2.6-2.4-.5-3.4 3.4-.5L12 2z"/><path d="m9 12 2 2 4-4"/></svg>),
  zap: ({ s = 20 }) => (<svg width={s} height={s} viewBox="0 0 24 24" fill="currentColor"><path d="M13 2 3 14h7l-1 8 10-12h-7l1-8z"/></svg>),
  phone: ({ s = 18 }) => (<svg width={s} height={s} viewBox="0 0 24 24" {..._stroke}><path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.3 1.8.6 2.6a2 2 0 0 1-.5 2.1L8 9.6a16 16 0 0 0 6 6l1.2-1.2a2 2 0 0 1 2.1-.5c.8.3 1.7.5 2.6.6a2 2 0 0 1 1.7 2z"/></svg>),
  mail: ({ s = 18 }) => (<svg width={s} height={s} viewBox="0 0 24 24" {..._stroke}><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m2 7 10 7 10-7"/></svg>),
  scales: ({ s = 20 }) => (<svg width={s} height={s} viewBox="0 0 24 24" {..._stroke} strokeWidth={1.5}><path d="M12 3v18"/><path d="M5 7h14"/><path d="M5 7l-3 7a4 4 0 0 0 6 0L5 7zM19 7l-3 7a4 4 0 0 0 6 0l-3-7z"/><path d="M8 21h8"/></svg>),
  download: ({ s = 18 }) => (<svg width={s} height={s} viewBox="0 0 24 24" {..._stroke}><path d="M12 3v12"/><path d="m7 10 5 5 5-5"/><path d="M5 21h14"/></svg>),
  star: ({ s = 16 }) => (<svg width={s} height={s} viewBox="0 0 24 24" fill="currentColor"><path d="m12 2 3 7 7.5.5-5.7 4.9 1.8 7.3L12 17.8 5.4 21.7l1.8-7.3L1.5 9.5 9 9z"/></svg>),
  sparkle: ({ s = 16 }) => (<svg width={s} height={s} viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l1.8 5.4L19 9l-5.2 1.6L12 16l-1.8-5.4L5 9l5.2-1.6z"/><path d="M19 14l.9 2.6L22 17.5l-2.1.9L19 21l-.9-2.6L16 17.5l2.1-.9z"/></svg>),
};

window.ShieldMark = ShieldMark;
window.Logo = Logo;
window.Icon = Icon;
