// shared.jsx — Primitives shared across every page.
// Loaded after services-data.js, before all other JSX.
// Data (NAV_FONTS, SERVICE_ITEMS) comes from services-data.js globals.

function Arrow({ size = 14 }) {
  return (
    <svg className="arrow" width={size} height={size} viewBox="0 0 14 14" fill="none">
      <path d="M2.5 7h9M7 2.5l4.5 4.5L7 11.5" stroke="currentColor" strokeWidth="1.4"
            strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function FontDropdown({ value, onChange }) {
  const [open, setOpen] = React.useState(false);
  const ref = React.useRef(null);
  React.useEffect(() => {
    const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener('mousedown', onDoc);
    return () => document.removeEventListener('mousedown', onDoc);
  }, []);
  const current = NAV_FONTS.find((f) => f.value === value) || NAV_FONTS[0];
  return (
    <div className="font-dd" ref={ref}>
      <button type="button" className="font-dd-btn" onClick={() => setOpen((o) => !o)}
              aria-label="Change typeface" title="Change typeface">
        <span style={{ fontFamily: current.preview }}>Aa</span>
      </button>
      {open && (
        <div className="font-dd-menu" role="menu">
          {NAV_FONTS.map((f) => (
            <button key={f.value} type="button" className="font-dd-item"
                    data-active={f.value === value}
                    style={{ fontFamily: f.preview }}
                    onClick={() => { onChange(f.value); setOpen(false); }}>
              {f.label}
            </button>
          ))}
        </div>
      )}
    </div>
  );
}

function ServicesDropdown({ overviewHref = 'services.html', active = false, activeName }) {
  const [open, setOpen] = React.useState(false);
  const ref = React.useRef(null);
  const timer = React.useRef(null);
  const openNow = () => { clearTimeout(timer.current); setOpen(true); };
  const closeSoon = () => { timer.current = setTimeout(() => setOpen(false), 150); };
  React.useEffect(() => {
    const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener('mousedown', onDoc);
    return () => document.removeEventListener('mousedown', onDoc);
  }, []);
  return (
    <div className="nav-dd" ref={ref} onMouseEnter={openNow} onMouseLeave={closeSoon}>
      <a href={overviewHref} className="nav-link nav-dd-trigger" data-open={open}
         style={active ? { color: 'var(--ink)' } : null}>
        Services
        <svg className="nav-dd-caret" width="9" height="9" viewBox="0 0 10 10" aria-hidden="true">
          <path d="M2 3.5 5 6.5 8 3.5" stroke="currentColor" strokeWidth="1.3" fill="none" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      </a>
      <div className="nav-dd-menu" data-open={open} role="menu">
        {SERVICE_ITEMS.map((s) => (
          <a key={s.n} href={s.href} className="nav-dd-item"
             style={s.name === activeName ? { background: 'var(--ink-06)' } : null}>
            <span className="nav-dd-num">{s.n}</span>
            <span className="nav-dd-name">{s.name}</span>
            <Arrow size={12} />
          </a>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { Arrow, FontDropdown, ServicesDropdown });