/* Panel — the filing-card evidence container.
   Source: index.html lines 90–101 (.panel / .panel-top / .prow / .psplit / .pfoot)
   and the count-up + split-bar behavior at lines 482–511.

   The one object in the system carrying --shadow-lg. Rows pair a sans key with a
   serif tabular figure; the optional split bar is ALWAYS labelled on both sides
   with its total stated. A bare bar with no denominator is not a component here. */
function Panel({ label, title, status, rows = [], split, footnote }) {
  const [mounted, setMounted] = React.useState(false);
  const reduce = React.useMemo(
    () => window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches,
    []
  );

  /* Fill the split bar one tick after mount — matching the source's 200ms
     post-reveal delay. Under reduced motion it lands immediately. */
  React.useEffect(() => {
    if (reduce) { setMounted(true); return; }
    const t = setTimeout(() => setMounted(true), 200);
    return () => clearTimeout(t);
  }, [reduce]);

  return (
    <div className="panel">
      <div className="panel-top">
        <div>
          {label ? <div className="pl">{label}</div> : null}
          {title ? <div className="pt">{title}</div> : null}
        </div>
        {status ? (
          <span className="live" style={{ color: 'var(--on-dark-2)' }}>
            <span className="dot" />{status}
          </span>
        ) : null}
      </div>

      {rows.map((row) => (
        <div className="prow" key={row.key}>
          <span className="k">{row.key}</span>
          <span className="v mono">{row.value}</span>
        </div>
      ))}

      {split ? (
        <div className="psplit">
          <div className="lab">
            <span>{split.label}</span>
            <span className="mono">{split.total}</span>
          </div>
          <div className="sbar">
            <i style={{ width: mounted ? split.a.width : 0, background: 'var(--forest)' }} />
            <i style={{ width: mounted ? split.b.width : 0, background: 'var(--sage)' }} />
          </div>
          <div className="lab" style={{ margin: '8px 0 0' }}>
            <span style={{ color: 'var(--forest)' }}>{split.a.label}</span>
            <span>{split.b.label}</span>
          </div>
        </div>
      ) : null}

      {footnote ? <div className="pfoot">{footnote}</div> : null}
    </div>
  );
}

window.Panel = Panel;