// v2 UI overrides (Notion styling via v2.css) + extra components
const Status2 = ({ s }) => <span className={`st st-${STATUS_TONE2[s] || 'ink'}`}><i></i>{t(s)}</span>;
const STATUS_TONE2 = { Draft:'mute', Confirmed:'ink', Purchased:'ink', 'In Production':'ink', Shipped:'blue', 'In Transit':'blue', Arrived:'green', Delivered:'green', Stuck:'red', Cancelled:'mute', Booked:'mute', Loading:'ink', Departed:'blue', 'At Sea':'blue', 'At Port':'green', 'Customs Hold':'amber' };
const Pill2 = ({ children, tone = 'tag' }) => <span className={`pill pill-${tone}`}>{typeof children === 'string' ? t(children) : children}</span>;
const Card2 = ({ title, action, children, className = '', pad = true, tour }) => <section className={`card ${className}`} data-tour={tour}>{(title || action) && <header className="card-h"><h4>{typeof title === 'string' ? t(title) : title}</h4>{action}</header>}<div className={pad ? 'card-b' : ''}>{children}</div></section>;
const Stat2 = ({ label, value, sub, tone, onClick, tour }) => <button className={`stat${tone ? ' stat-' + tone : ''}`} onClick={onClick} data-tour={tour}><span className="stat-l">{t(label)}</span><span className="stat-v">{value}</span>{sub && <span className="stat-s">{sub}</span>}</button>;
const PageHead2 = ({ title, kicker, children, back }) => <div className="ph">{back && <button className="btn btn-icon" onClick={back} aria-label={t('Back')}>{I.back}</button>}<div className="ph-t">{kicker && <span className="kicker">{typeof kicker === 'string' ? t(kicker) : kicker}</span>}<h1>{typeof title === 'string' ? t(title) : title}</h1></div>{children && <div className="ph-a">{children}</div>}</div>;
const Btn2 = ({ v = 'outline', sm, icon, children, tour, ...p }) => <button className={`btn btn-${v}${sm ? ' btn-sm' : ''}`} data-tour={tour} {...p}>{icon}{typeof children === 'string' ? t(children) : children}</button>;
const Field2 = ({ label, children, hint, req }) => <label className="field"><span className="field-l">{t(label)}{req && <em>*</em>}</span>{children}{hint && <span className="field-hint">{t(hint)}</span>}</label>;

const Modal = ({ title, onClose, children, width = 520 }) => <div className="modal-bg" onClick={onClose}><div className="modal" style={{ maxWidth: width }} onClick={e => e.stopPropagation()}><header className="modal-h"><h4>{title}</h4><button className="btn btn-icon" onClick={onClose} aria-label="Close">{I.x}</button></header><div className="modal-b">{children}</div></div></div>;

// Simple charts (CSS/SVG, data-driven)
const Bars = ({ data, fmtV = (v) => v, height = 160, color = 'var(--color-primary)' }) => {
  const max = Math.max(1, ...data.map(d => d.v));
  return <div className="bars" style={{ height }}>{data.map((d, i) => <div key={i} className="bar-c" title={`${d.l}: ${fmtV(d.v)}`}><span className="bar-v">{fmtV(d.v)}</span><div className="bar" style={{ height: (d.v / max * 100) + '%', background: d.c || color }}></div><span className="bar-l">{d.l}</span></div>)}</div>;
};
const HBars = ({ data, fmtV = (v) => v }) => { const max = Math.max(1, ...data.map(d => d.v)); return <ul className="hbars">{data.map((d, i) => <li key={i}><span className="hb-l">{d.l}</span><div className="hb-t"><div className="hb" style={{ width: (d.v / max * 100) + '%', background: d.c || 'var(--color-primary)' }}></div></div><span className="hb-v">{fmtV(d.v)}</span></li>)}</ul>; };
const Donut = ({ pct, label, color = 'var(--color-semantic-success)' }) => <div className="donut" style={{ background: `conic-gradient(${color} ${pct}%, var(--color-hairline) 0)` }}><div className="donut-i"><b>{pct}%</b><span>{label}</span></div></div>;

Object.assign(window, { Status: Status2, Pill: Pill2, Card: Card2, Stat: Stat2, PageHead: PageHead2, Btn: Btn2, Field: Field2, Modal, Bars, HBars, Donut });