// primitives.jsx — small reusable UI atoms

const { useState, useEffect, useRef, useMemo } = React;

function Eyebrow({ children, style }) {
  return <div className="eyebrow" style={style}>{children}</div>;
}

function Card({ title, sub, eye, right, children, style, className = '' }) {
  return (
    <div className={`card ${className}`} style={style}>
      {(title || eye || right) && (
        <div className="card-head">
          <div>
            {eye && <div className="card-eye" style={{marginBottom:6}}>{eye}</div>}
            {title && <h3 className="card-title">{title}</h3>}
            {sub && <div className="card-sub" style={{marginTop:6}}>{sub}</div>}
          </div>
          {right && <div>{right}</div>}
        </div>
      )}
      {children}
    </div>
  );
}

function Metric({ label, value, delta, kind = 'neutral', em }) {
  return (
    <div className="metric">
      <div className="lbl">{label}</div>
      <div className="val">{em ? <em>{value}</em> : value}</div>
      {delta && <div className={`delta ${kind}`}>{delta}</div>}
    </div>
  );
}

function Bar({ pct, accent }) {
  return (
    <div className="bar"><i className={accent ? 'acc' : ''} style={{width: `${Math.max(0, Math.min(100, pct))}%`}} /></div>
  );
}

function Tag({ children, kind }) {
  return <span className={`tag ${kind || ''}`}>{children}</span>;
}

function PageHead({ eyebrow, title, sub, meta }) {
  return (
    <div className="page-head">
      <div>
        <div className="eyebrow">{eyebrow}</div>
        <h1 dangerouslySetInnerHTML={{__html: title}} />
        {sub && <div className="sub">{sub}</div>}
      </div>
      {meta && <div className="meta">{meta}</div>}
    </div>
  );
}

function Section({ label, title, children }) {
  return (
    <div className="section">
      <div className="lbl">{label}</div>
      <div>
        {title && <h2 dangerouslySetInnerHTML={{__html: title}} />}
        {children}
      </div>
    </div>
  );
}

function Chip({ active, children, onClick }) {
  return <button className="chip" data-active={active ? 'true' : undefined} onClick={onClick}>{children}</button>;
}

function Seg({ value, options, onChange }) {
  return (
    <div className="seg">
      {options.map(o => (
        <button key={o.v} data-active={value === o.v ? 'true' : undefined} onClick={() => onChange?.(o.v)}>{o.l}</button>
      ))}
    </div>
  );
}

// hover tooltip helper
function useTooltip() {
  const [tip, setTip] = useState(null); // {x,y,html}
  const ref = useRef(null);
  const show = (e, html) => {
    const r = ref.current?.getBoundingClientRect();
    if (!r) return;
    setTip({ x: e.clientX - r.left + 12, y: e.clientY - r.top + 12, html });
  };
  const move = (e) => {
    if (!tip) return;
    const r = ref.current?.getBoundingClientRect();
    setTip(t => t && ({ ...t, x: e.clientX - r.left + 12, y: e.clientY - r.top + 12 }));
  };
  const hide = () => setTip(null);
  return { ref, tip, show, move, hide };
}

function Tip({ tip }) {
  if (!tip) return null;
  return <div className="tip" style={{left:tip.x, top:tip.y}} dangerouslySetInnerHTML={{__html: tip.html}} />;
}

Object.assign(window, {
  Eyebrow, Card, Metric, Bar, Tag, PageHead, Section, Chip, Seg, useTooltip, Tip,
});