/* === Atoms === */

function PageTag({ pages, label }) {
  return (
    <div className="page-tag">
      {pages && <><span className="mute">{pages}</span><span className="sep"></span></>}
      <span>{label}</span>
    </div>
  );
}

function Eyebrow({ children, className }) {
  return <span className={"eyebrow" + (className ? " " + className : "")}>{children}</span>;
}

function HRule({ lg }) { return <hr className={"h-rule" + (lg ? " lg" : "")} />; }

function InfoPill({ children, variant }) {
  return <span className={"info-pill" + (variant ? " " + variant : "")}>{children}</span>;
}
function InfoPillRow({ items, variant }) {
  return (
    <div className="info-pill-row">
      {items.map((it, i) => <InfoPill key={i} variant={variant}>{it}</InfoPill>)}
    </div>
  );
}

function FeatureRing({ icon, size }) {
  return (
    <span className={"feature-ring" + (size ? " " + size : "")}>
      <img src={`assets/icons/${icon}.svg`} alt="" />
    </span>
  );
}

function ProductCard({ img, name, desc, onClick }) {
  return (
    <a className="pcard" onClick={(e) => { e.preventDefault(); onClick && onClick(e); }} href="#">
      <div className="img-wrap">
        <img src={`assets/${img}`} alt={name} />
      </div>
      <div className="meta">
        <div className="name">{name}</div>
        {desc && <div className="desc">{desc}</div>}
      </div>
    </a>
  );
}

function VariantGrid({ items }) {
  return (
    <div className="variant-grid">
      {items.map((it, i) => (
        <div key={i}>
          <div className="v-eyebrow">{it.label}</div>
          <div className="v-value">{it.value}</div>
          <div className="v-unit">{it.unit}</div>
        </div>
      ))}
    </div>
  );
}

function Segmented({ value, onChange, options }) {
  return (
    <div className="segmented">
      {options.map(o => (
        <button key={o.value}
          className={value === o.value ? "active" : ""}
          onClick={() => onChange(o.value)}>
          {o.label}
        </button>
      ))}
    </div>
  );
}

function Breadcrumb({ trail, navigate }) {
  return (
    <div className="crumb">
      {trail.map((t, i) => (
        <React.Fragment key={i}>
          {i > 0 && <span className="sep">/</span>}
          {t.route ? (
            <a href={`#${t.route}`} onClick={(e) => { e.preventDefault(); navigate(t.route, t.fid); }}>{t.label}</a>
          ) : (
            <span>{t.label}</span>
          )}
        </React.Fragment>
      ))}
    </div>
  );
}

function StatsStrip({ items }) {
  return (
    <div className="stats-strip">
      {items.map((it, i) => (
        <div key={i}>
          <div className="num">{it.num}{it.unit && <span className="unit">{it.unit}</span>}</div>
          <div className="label">{it.label}</div>
        </div>
      ))}
    </div>
  );
}

Object.assign(window, {
  PageTag, Eyebrow, HRule, InfoPill, InfoPillRow,
  FeatureRing, ProductCard, VariantGrid, Segmented,
  Breadcrumb, StatsStrip,
});