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

/* ============================================
   Icons (inline SVG - simple, no AI-slop drawings)
   ============================================ */
const Icon = ({ name, size = 18, stroke = 1.6 }) => {
  const props = {
    width: size, height: size, viewBox: "0 0 24 24",
    fill: "none", stroke: "currentColor", strokeWidth: stroke,
    strokeLinecap: "round", strokeLinejoin: "round"
  };
  switch (name) {
    case "mail": return (<svg {...props}><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></svg>);
    case "bell": return (<svg {...props}><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10 21a2 2 0 0 0 4 0"/></svg>);
    case "database": return (<svg {...props}><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M3 5v6c0 1.7 4 3 9 3s9-1.3 9-3V5"/><path d="M3 11v6c0 1.7 4 3 9 3s9-1.3 9-3v-6"/></svg>);
    case "report": return (<svg {...props}><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/><path d="M8 13h8M8 17h5"/></svg>);
    case "shield": return (<svg {...props}><path d="M12 2l8 3v7c0 5-3.5 8.5-8 10-4.5-1.5-8-5-8-10V5z"/><path d="M9 12l2 2 4-4"/></svg>);
    case "user": return (<svg {...props}><circle cx="12" cy="8" r="4"/><path d="M4 21v-1a6 6 0 0 1 6-6h4a6 6 0 0 1 6 6v1"/></svg>);
    case "key": return (<svg {...props}><circle cx="8" cy="15" r="4"/><path d="M10.5 12.5L21 2M16 7l3 3M14 9l3 3"/></svg>);
    case "alert": return (<svg {...props}><path d="M12 2L2 22h20z"/><path d="M12 9v6M12 18v.5"/></svg>);
    case "target": return (<svg {...props}><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="5"/><circle cx="12" cy="12" r="1.5" fill="currentColor"/></svg>);
    case "zap": return (<svg {...props}><path d="M13 2L4 14h7l-1 8 9-12h-7z"/></svg>);
    case "check": return (<svg {...props}><path d="M5 12l4 4 10-10"/></svg>);
    case "x": return (<svg {...props}><path d="M6 6l12 12M18 6L6 18"/></svg>);
    case "plus": return (<svg {...props}><path d="M12 5v14M5 12h14"/></svg>);
    case "menu": return (<svg {...props}><path d="M4 7h16M4 12h16M4 17h16"/></svg>);
    case "arrow-right": return (<svg {...props}><path d="M5 12h14M13 5l7 7-7 7"/></svg>);
    case "search": return (<svg {...props}><circle cx="11" cy="11" r="7"/><path d="M21 21l-5-5"/></svg>);
    case "globe": return (<svg {...props}><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/></svg>);
    case "lock": return (<svg {...props}><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg>);
    case "phone": return (<svg {...props}><path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3 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.1l-1.3 1.3a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.5c.8.3 1.7.5 2.6.6a2 2 0 0 1 1.7 2z"/></svg>);
    case "pin": return (<svg {...props}><path d="M12 22s7-7 7-13a7 7 0 1 0-14 0c0 6 7 13 7 13z"/><circle cx="12" cy="9" r="2.5"/></svg>);
    default: return null;
  }
};

window.Icon = Icon;

/* ============================================
   Reveal on scroll
   ============================================ */
const Reveal = ({ children, delay = 0, as: Tag = "div", className = "" }) => {
  const ref = useRef(null);
  const [visible, setVisible] = useState(false);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          setTimeout(() => setVisible(true), delay);
          io.unobserve(el);
        }
      });
    }, { threshold: 0.12 });
    io.observe(el);
    return () => io.disconnect();
  }, [delay]);
  return <Tag ref={ref} className={`reveal ${visible ? "visible" : ""} ${className}`}>{children}</Tag>;
};

window.Reveal = Reveal;

/* ============================================
   Animated counter
   ============================================ */
const Counter = ({ to, prefix = "", suffix = "", duration = 1600, decimals = 0 }) => {
  const ref = useRef(null);
  const [val, setVal] = useState(0);
  const [started, setStarted] = useState(false);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting && !started) {
        setStarted(true);
        const start = performance.now();
        const tick = (now) => {
          const t = Math.min(1, (now - start) / duration);
          const eased = 1 - Math.pow(1 - t, 3);
          setVal(to * eased);
          if (t < 1) requestAnimationFrame(tick);
        };
        requestAnimationFrame(tick);
      }
    }, { threshold: 0.4 });
    io.observe(el);
    return () => io.disconnect();
  }, [to, duration, started]);
  const formatted = val.toLocaleString(undefined, { maximumFractionDigits: decimals, minimumFractionDigits: decimals });
  return <span ref={ref}>{prefix}{formatted}{suffix}</span>;
};

window.Counter = Counter;

/* ============================================
   Logo
   ============================================ */
const LogoMark = ({ size = 26 }) => (
  <span style={{ display: "inline-flex", alignItems: "center", gap: 10 }}>
    <img src="assets/logo-mark.png" alt="" style={{ height: size, width: "auto" }} />
    <span style={{ fontWeight: 700, letterSpacing: "-0.01em", fontSize: 17 }}>
      Breach Monitor
    </span>
  </span>
);

window.LogoMark = LogoMark;