// ─── ATOMS ────────────────────────────────────────────────────────

function Dots({ value, max=5 }) {
  return (
    <div style={{ display:"flex", gap:5 }}>
      {Array.from({length:max}).map((_,i) => (
        <div key={i} style={{
          width:5, height:5, borderRadius:"50%",
          background: i<value ? "var(--forest)" : "rgba(31,27,22,0.12)",
        }} />
      ))}
    </div>
  );
}

function Eyebrow({ children, tone="default", style }) {
  const colors = {
    default: "var(--ink-3)",
    gold:    "var(--gold)",
    cream:   "rgba(245,239,230,0.7)",
    forest:  "var(--forest-mid)",
  };
  return (
    <p style={{
      margin: 0,
      fontFamily: "var(--sans)",
      fontSize: 10,
      fontWeight: 500,
      letterSpacing: "0.2em",
      textTransform: "uppercase",
      color: colors[tone],
      ...style,
    }}>{children}</p>
  );
}

function SectionRule({ label }) {
  return (
    <div style={{ display:"flex", alignItems:"center", gap:14, margin:"36px 0 22px" }}>
      <div style={{ flex:1, height:1, background:"var(--line)" }} />
      <Eyebrow tone="gold">{label}</Eyebrow>
      <div style={{ flex:1, height:1, background:"var(--line)" }} />
    </div>
  );
}

function Pill({ children, active=false }) {
  return (
    <span style={{
      display: "inline-block",
      fontFamily: "var(--sans)",
      fontSize: 10,
      fontWeight: 500,
      letterSpacing: "0.12em",
      textTransform: "uppercase",
      padding: "4px 10px",
      borderRadius: 2,
      color: active ? "var(--cream)" : "var(--forest)",
      background: active ? "var(--forest)" : "transparent",
      border: `1px solid ${active ? "var(--forest)" : "rgba(44,63,51,0.3)"}`,
      whiteSpace: "nowrap",
    }}>{children}</span>
  );
}

// Subtle ornament — small four-petal mark used as section/divider element
function Ornament({ size=10, color="var(--gold)", style }) {
  return (
    <svg width={size} height={size} viewBox="0 0 12 12" style={style}>
      <path d="M6 0 C6.5 4 8 5.5 12 6 C8 6.5 6.5 8 6 12 C5.5 8 4 6.5 0 6 C4 5.5 5.5 4 6 0 Z"
        fill={color} opacity="0.85" />
    </svg>
  );
}

Object.assign(window, { Dots, Eyebrow, SectionRule, Pill, Ornament });