Dark Pattern (Asymmetric & Manipulative):
┌──────────────────────────────────────────────┐
│  Upgrade to Premium Now!                     │
│  [  ★ YES! CLAIM 50% DISCOUNT TODAY ★  ]      │ <-- Massive Glowing Green Button
│                                              │
│  no thanks, i prefer paying full price...    │ <-- Tiny 9px low-contrast gray link
└──────────────────────────────────────────────┘

Compliant Pattern (Symmetric & Transparent):
┌──────────────────────────────────────────────┐
│  Upgrade to Premium Plan                     │
│  $12 / month, billed annually. Cancel anytime.│
│                                              │
│  [  Upgrade Plan  ]     [  Keep Free Tier  ] │ <-- Equal visual weight and contrast
└──────────────────────────────────────────────┘

// Fully Compliant Cookie & Tracking Consent Banner conforming to EU DSA & FTC rules
export function CompliantConsentBanner({ onAccept, onReject }: { onAccept: () => void; onReject: () => void }) {
  return (
    <div className="fixed bottom-4 right-4 z-50 max-w-md rounded-2xl border border-zinc-800 bg-zinc-950 p-6 shadow-2xl">
      <h4 className="text-sm font-semibold text-white">Privacy & Telemetry Preferences</h4>
      <p className="mt-2 text-xs leading-relaxed text-zinc-400">
        We use essential cookies to maintain your login session. We request consent for anonymous performance telemetry.
      </p>

      {/* Symmetric Choice Architecture: Both buttons have equal size and readable contrast */}
      <div className="mt-4 flex gap-3">
        <button
          onClick={onReject}
          className="flex-1 rounded-xl border border-zinc-700 bg-zinc-900 py-2 text-xs font-medium text-zinc-200 hover:bg-zinc-800"
        >
          Reject Optional
        </button>
        <button
          onClick={onAccept}
          className="flex-1 rounded-xl bg-white py-2 text-xs font-medium text-black hover:bg-zinc-200"
        >
          Accept All
        </button>
      </div>
    </div>
  );
}

1/4 ⚖️ Why @harrybr's fight against Deceptive Design matters to every developer:
Manipulative UI isn't just bad karma anymore—it's illegal. The FTC and EU Digital Services Act are aggressively penalizing hidden subscription traps and confirmshaming.

2/4 The principle of Symmetric Consent:
If a user can subscribe with 1 click, they must be able to cancel with 1 click. Forcing users to call a phone number during business hours to cancel an online account is a textbook dark pattern violation.

3/4 Stop Confirmshaming:
Microcopy like "No thanks, I hate saving money" destroys brand trust. Modern users see through manipulative phrasing instantly.

4/4 Follow @harrybr for the latest case studies on deceptive design, regulatory rulings, and ethical UI patterns.