/* global React */
const { useEffect, useState } = React;

// Minimal, hand-tuned line icons. 1.5 stroke, currentColor.
function LineIcon({ name, size = 28 }) {
  const props = {
    width: size, height: size, viewBox: "0 0 24 24",
    fill: "none", stroke: "currentColor",
    strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round",
    "aria-hidden": "true",
  };
  switch (name) {
    case "scales": // riskinjako — vaaka
      return (
        <svg {...props}>
          <path d="M12 4v16" />
          <path d="M5 20h14" />
          <path d="M5 8l7-2 7 2" />
          <path d="M3 13c0 1.5 1 2.5 2.5 2.5S8 14.5 8 13L5.5 8 3 13z" />
          <path d="M16 13c0 1.5 1 2.5 2.5 2.5S21 14.5 21 13L18.5 8 16 13z" />
        </svg>
      );
    case "thread": // jatkuvuus — yhtenäinen viiva
      return (
        <svg {...props}>
          <circle cx="5" cy="12" r="2" />
          <circle cx="19" cy="12" r="2" />
          <path d="M7 12h10" />
          <path d="M5 4v6" />
          <path d="M19 14v6" />
        </svg>
      );
    case "compass": // sisäpiirin näkemys
      return (
        <svg {...props}>
          <circle cx="12" cy="12" r="9" />
          <path d="M15.5 8.5l-1.8 5.2-5.2 1.8 1.8-5.2 5.2-1.8z" />
        </svg>
      );
    case "search": // kilpailutus
      return (
        <svg {...props}>
          <circle cx="11" cy="11" r="6" />
          <path d="M20 20l-4.3-4.3" />
        </svg>
      );
    case "shield": // hoito
      return (
        <svg {...props}>
          <path d="M12 3l8 3v6c0 4.5-3.5 8-8 9-4.5-1-8-4.5-8-9V6l8-3z" />
          <path d="M9 12l2 2 4-4" />
        </svg>
      );
    case "lifebuoy": // vahinkojen hoito
      return (
        <svg {...props}>
          <circle cx="12" cy="12" r="9" />
          <circle cx="12" cy="12" r="3.5" />
          <path d="M5.5 5.5l3.6 3.6M14.9 14.9l3.6 3.6M18.5 5.5l-3.6 3.6M9.1 14.9l-3.6 3.6" />
        </svg>
      );
    case "arrow":
      return (
        <svg {...props} className="arrow">
          <path d="M5 12h14" />
          <path d="M13 6l6 6-6 6" />
        </svg>
      );
    case "phone":
      return (
        <svg {...props}>
          <path d="M5 4h3l2 5-2.5 1.5a11 11 0 006 6L15 14l5 2v3a2 2 0 01-2 2A14 14 0 014 7a2 2 0 012-2z" />
        </svg>
      );
    case "whatsapp":
      return (
        <svg {...props}>
          <path d="M21 12a9 9 0 01-13.4 7.8L3 21l1.3-4.4A9 9 0 1121 12z" />
          <path d="M9 9c0 4 2.5 6 5.5 6.5l1.5-1.5-2-1-.8.6c-.9-.4-1.6-1.1-2-2l.6-.8-1-2L9 9z" />
        </svg>
      );
    case "logo": // M-monogram for Arvomeklarit
      return (
        <svg width={size} height={size} viewBox="0 0 32 32" fill="none" aria-hidden="true">
          <rect x="0.5" y="0.5" width="31" height="31" rx="6" stroke="currentColor" />
          <path d="M8 23V9l4 7 4-7v14M22 9v10c0 2-1 3-3 3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" fill="none" />
        </svg>
      );
    case "chevron":
      return (
        <svg {...props}>
          <path d="M6 9l6 6 6-6" />
        </svg>
      );
    case "menu":
      return (
        <svg {...props}>
          <path d="M4 7h16M4 12h16M4 17h16" />
        </svg>
      );
    case "close":
      return (
        <svg {...props}>
          <path d="M6 6l12 12M18 6L6 18" />
        </svg>
      );
    default:
      return null;
  }
}

window.LineIcon = LineIcon;
window.useScrolled = function (threshold = 12) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > threshold);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, [threshold]);
  return scrolled;
};