// Card primitives — dark and light variants

function CardDark({ eyebrow, title, children, hero = false, style = {} }) {
  return (
    <div className={hero ? "card-dark card-dark--hero" : "card-dark"} style={{ padding: hero ? 28 : 22, ...style }}>
      {eyebrow ? <span className="pill pill-teal" style={{ marginBottom: 16 }}>{eyebrow}</span> : null}
      {title ? <h3 style={{ fontFamily: "Montserrat", fontWeight: 300, fontSize: 22, color: "#d4d4dc", margin: "8px 0 10px", letterSpacing: "-0.005em" }}>{title}</h3> : null}
      <div style={{ color: "#bcbcc6" }}>{children}</div>
    </div>
  );
}

function CardLight({ eyebrow, title, children, hero = false, style = {} }) {
  return (
    <div className={hero ? "card-light card-light--hero" : "card-light"} style={{ padding: hero ? 28 : 22, ...style }}>
      {eyebrow ? <div className="label label--wide" style={{ color: "#5c35cc", marginBottom: 14 }}>{eyebrow}</div> : null}
      {title ? <h3 style={{ fontFamily: "Montserrat", fontWeight: 300, fontSize: 22, color: "#1a1a1f", margin: "0 0 10px", letterSpacing: "-0.005em" }}>{title}</h3> : null}
      <div style={{ color: "#3a3a48" }}>{children}</div>
    </div>
  );
}

// Service / offering row — dark mode
function OfferingRow({ num, title, body, tag }) {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "60px 1fr 140px", gap: 24, alignItems: "baseline", padding: "26px 0", borderBottom: "1px solid #2d2d38" }}>
      <div style={{ fontFamily: "Montserrat", fontWeight: 200, fontSize: 38, color: "#9898a8", letterSpacing: "-0.02em", lineHeight: 1 }}>{num}</div>
      <div>
        <h3 style={{ fontFamily: "Montserrat", fontWeight: 300, fontSize: 22, color: "#ffffff", margin: "0 0 8px", letterSpacing: "-0.005em" }}>{title}</h3>
        <p style={{ fontSize: 13, color: "#bcbcc6", margin: 0, fontWeight: 300, lineHeight: 1.55 }}>{body}</p>
      </div>
      <div style={{ textAlign: "right" }}>
        {tag ? <span className="pill">{tag}</span> : null}
      </div>
    </div>
  );
}

window.CardDark = CardDark;
window.CardLight = CardLight;
window.OfferingRow = OfferingRow;