I'll create an interactive pricing calculator for a SaaS product that takes into account seats, usage, and possible discounts. Here's the implementation:

This interactive pricing calculator for a SaaS product takes into account the number of seats, usage (in GB), and possible discounts. Here's a breakdown of the component:

1. The calculator uses state hooks to manage the number of seats, usage, discount code, total price, and applied discount.
2. The base price is set to $10 per seat, and the usage price is $0.5 per GB.
3. The calculatePrice function is called whenever the seats or usage values change, updating the total price.
4. The number of seats is controlled by an input field, while the usage is controlled by a slider for a better user experience.
5. The discount code can be entered in an input field, and the "Apply" button triggers the applyDiscount function.
6. The applyDiscount function checks for specific discount codes (DISCOUNT10 for 10% off and DISCOUNT20 for 20% off). In a real application, you would validate these against a database.
7. The total price is displayed at the bottom of the card, updating in real-time as the user adjusts the inputs.
8. The component uses shadcn/ui components (Card, Input, Label, Button, and Slider) for a polished look, and Tailwind CSS for additional styling.

To use this component, you can import it into your main page or any other component where you want to display the pricing calculator.

Note: This is a client-side component, so it's wrapped with the 'use client' directive to ensure it works correctly with Next.js.

You can further customize this calculator by adding more features such as different tiers of service, annual vs. monthly pricing, or additional add-ons. You could also enhance the discount system to handle more complex scenarios or integrate it with a backend API for real-time pricing and discount validation.