function Pricing({ lang }) {
  const c = COPY.pricing;
  return (
    <section className="band band-white collab-band" id="pricing">
      <div className="wrap">
        <div className="eyebrow eyebrow-dim">{t(c.eye, lang)}</div>
        <h2 className="collab-band">{t(c.h2, lang)}</h2>
        <p className="pricing-sub">{t(c.sub, lang)}</p>
        <div className="collab-grid">
          {c.formats.map((f, i) => (
            <div key={i} className={"collab-card" + (f.featured ? " featured" : "")}>
              <div className="collab-head">
                <div className="collab-name">{t(f.name, lang)}</div>
                <div className="collab-window">{t(f.window, lang)}</div>
              </div>
              <div>
                <div className="collab-when-label">{lang === "de" ? "Wann passt das" : "When it fits"}</div>
                <p className="collab-when">{t(f.when, lang)}</p>
              </div>
              <ul className="collab-how">
                {f.how.map((h, j) => <li key={j}>— {t(h, lang)}</li>)}
              </ul>
            </div>
          ))}
        </div>
        <div className="roles-wrap">
          <div className="roles-eye">{t(c.roles.eye, lang)}</div>
          <div className="roles-grid">
            <div className="roles-col ours">
              <h3>{t(c.roles.ours.title, lang)}</h3>
              <ul>{c.roles.ours.items.map((x, i) => <li key={i}>{t(x, lang)}</li>)}</ul>
            </div>
            <div className="roles-col theirs">
              <h3>{t(c.roles.theirs.title, lang)}</h3>
              <ul>{c.roles.theirs.items.map((x, i) => <li key={i}>{t(x, lang)}</li>)}</ul>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.Pricing = Pricing;