/* site-ui.jsx — icons, section header, reveal hook (exported to window) */

const I = {
  monitor: "M3 4h18v12H3z M8 20h8 M12 16v4",
  package: "M21 8l-9-5-9 5v8l9 5 9-5z M3 8l9 5 9-5 M12 13v8",
  server: "M3 4h18v6H3z M3 14h18v6H3z M7 7h.01 M7 17h.01",
  arrowRight: "M5 12h14 M13 6l6 6-6 6",
  arrowUp: "M12 19V5 M6 11l6-6 6 6",
  check: "M20 6L9 17l-5-5",
  ext: "M14 4h6v6 M20 4l-9 9 M19 13v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h6",
  send: "M22 2L11 13 M22 2l-7 20-4-9-9-4z",
  mail: "M3 5h18v14H3z M3 6l9 7 9-7",
  menu: "M3 6h18 M3 12h18 M3 18h18",
  x: "M18 6L6 18 M6 6l12 12",
  github: "M9 19c-5 1.5-5-2.5-7-3m14 6v-3.5c0-1 .1-1.4-.5-2 2.8-.3 5.5-1.4 5.5-6a4.6 4.6 0 0 0-1.3-3.2 4.2 4.2 0 0 0-.1-3.2s-1.1-.3-3.5 1.3a12 12 0 0 0-6.2 0C6.5 2 5.4 2.3 5.4 2.3a4.2 4.2 0 0 0-.1 3.2A4.6 4.6 0 0 0 4 8.7c0 4.6 2.7 5.7 5.5 6-.6.6-.6 1.2-.5 2V20",
  linkedin: "M16 8a6 6 0 0 1 6 6v6h-4v-6a2 2 0 0 0-4 0v6h-4v-6a6 6 0 0 1 6-6z M6 9H2v11h4z M4 6a2 2 0 1 0 0-4 2 2 0 0 0 0 4z",
  briefcase: "M3 7h18v13H3z M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2 M3 12h18",
  twitter: "M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z",
  terminal: "M4 17l6-6-6-6 M12 19h8",
  sun: "M12 17a5 5 0 1 0 0-10 5 5 0 0 0 0 10z M12 1v2 M12 21v2 M4.2 4.2l1.4 1.4 M18.4 18.4l1.4 1.4 M1 12h2 M21 12h2 M4.2 19.8l1.4-1.4 M18.4 5.6l1.4-1.4",
  moon: "M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z",
};

function Icon({ name, style }) {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" style={style} aria-hidden="true">
      <path d={I[name]} />
    </svg>
  );
}

function SectionHead({ prompt, title, dim, sub }) {
  return (
    <div className="sec-head reveal">
      <div className="sec-prompt"><span className="dollar">$</span> {prompt}<span className="cursor"></span></div>
      <h2 className="sec-title">{title} {dim && <span className="dim">{dim}</span>}</h2>
      {sub && <p className="sec-sub">{sub}</p>}
    </div>
  );
}

// IntersectionObserver-driven reveal. Falls back to showing everything if IO
// never fires (reduced-motion, no support, or non-painting embedded contexts).
function useReveal() {
  React.useEffect(() => {
    const reduce = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    const els = [...document.querySelectorAll(".reveal:not(.in)")];
    if (reduce || !("IntersectionObserver" in window)) { els.forEach(e => e.classList.add("in")); return; }
    let ioWorked = false;
    const io = new IntersectionObserver((ents) => {
      ents.forEach(e => { if (e.isIntersecting) { ioWorked = true; window.__ioOK = true; e.target.classList.add("in"); io.unobserve(e.target); } });
    }, { threshold: 0.1, rootMargin: "0px 0px -6% 0px" });
    els.forEach(e => io.observe(e));
    // If IO hasn't fired for anything by now, assume it won't — reveal all.
    const t = setTimeout(() => {
      if (!ioWorked) { io.disconnect(); document.querySelectorAll(".reveal:not(.in)").forEach(e => e.classList.add("in")); }
    }, 1000);
    return () => { io.disconnect(); clearTimeout(t); };
  }, []);
}

Object.assign(window, { Icon, SectionHead, useReveal });