function Brand({ compact = false, onClick }) {
  return (
    <button className={`brand ${compact ? "brand-compact" : ""}`} onClick={onClick} aria-label="FAIRX 首页">
      <span className="brand-mark" aria-hidden="true">
        <span></span><span></span><span></span>
      </span>
      <span className="brand-word">FAIRX</span>
      {!compact && <span className="brand-network">TESTNET</span>}
    </button>
  );
}

function StatusDot({ tone = "green", pulse = false }) {
  return <span className={`status-dot status-${tone} ${pulse ? "is-pulsing" : ""}`} aria-hidden="true"></span>;
}

function Pill({ children, tone = "neutral", dot = false }) {
  return (
    <span className={`pill pill-${tone}`}>
      {dot && <StatusDot tone={tone === "success" ? "green" : tone} pulse={tone === "success"} />}
      {children}
    </span>
  );
}

function Metric({ label, value, meta, tone = "default" }) {
  return (
    <div className={`metric metric-${tone}`}>
      <div className="metric-label">{label}</div>
      <div className="metric-value">{value}</div>
      {meta && <div className="metric-meta">{meta}</div>}
    </div>
  );
}

function Glyph({ children, active = false }) {
  return <span className={`glyph ${active ? "is-active" : ""}`} aria-hidden="true">{children}</span>;
}

function HashText({ children }) {
  return <span className="hash-text">{children}</span>;
}

function MiniLogo({ label }) {
  return <span className="mini-logo" aria-hidden="true">{label}</span>;
}

function ProgressBar({ value, tone = "cyan" }) {
  return (
    <div className="progress-track" aria-label={`${value}%`}>
      <span className={`progress-fill progress-${tone}`} style={{ width: `${value}%` }}></span>
    </div>
  );
}

function CopyButton({ value }) {
  const [copied, setCopied] = React.useState(false);
  const copy = async () => {
    try {
      await navigator.clipboard.writeText(value);
    } catch (_error) {
      // Clipboard can be unavailable in local previews; visual feedback still demonstrates the interaction.
    }
    setCopied(true);
    window.setTimeout(() => setCopied(false), 1200);
  };
  return <button className="copy-button" onClick={copy}>{copied ? "已复制" : "复制"}</button>;
}

function ViewLink({ target, currentView, onNavigate, children, className = "" }) {
  return (
    <button
      className={`${className} ${currentView === target ? "is-current" : ""}`}
      onClick={() => onNavigate(target)}
    >
      {children}
    </button>
  );
}

Object.assign(window, {
  Brand,
  StatusDot,
  Pill,
  Metric,
  Glyph,
  HashText,
  MiniLogo,
  ProgressBar,
  CopyButton,
  ViewLink,
});