function ProductCard({ name, whatItIs, deliverables, whoItsFor, benefit, badge }) {
  return (
    <div style={{ background: "var(--bg-1)", border: "1px solid var(--border-1)", borderRadius: 12, padding: 28, display: "flex", flexDirection: "column", gap: 14 }}>
      <div style={{ display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap" }}>
        <h3 style={{ fontFamily: "var(--font-display)", fontSize: 21, margin: 0, color: "var(--brand-primary-700)" }}>{name}</h3>
        {badge && <span style={{ fontSize: 11, fontWeight: 600, letterSpacing: "0.06em", color: "var(--brand-accent-700)", background: "var(--brand-accent-100)", padding: "3px 10px", borderRadius: 99 }}>{badge}</span>}
      </div>
      <p style={{ fontSize: 14.5, lineHeight: 1.65, color: "var(--fg-2)", margin: 0 }}>{whatItIs}</p>
      <div>
        <div style={{ fontSize: 11.5, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--fg-3)", marginBottom: 8 }}>What you get</div>
        <ul style={{ margin: 0, paddingLeft: 18, display: "grid", gap: 5 }}>
          {deliverables.map((d) => <li key={d} style={{ fontSize: 13.5, color: "var(--fg-2)" }}>{d}</li>)}
        </ul>
      </div>
      <p style={{ fontSize: 13, color: "var(--fg-3)", margin: 0 }}><strong style={{ color: "var(--fg-2)" }}>For:</strong> {whoItsFor}</p>
      <p style={{ fontSize: 13.5, color: "var(--brand-primary-500)", margin: 0, fontWeight: 500 }}>{benefit}</p>
    </div>
  );
}