function MainComponent() { const [currentPlan, setCurrentPlan] = React.useState('Free'); const plans = [ { name: 'Free', price: '$0/mo', benefits: [ 'Credit Card Utilization Scorer', '2 Credit Cards Only', 'Remove Public Records', 'AI Recommendations', 'AI Generated Dispute Letters', 'SMS Alerts When Payments Due', '24/7 Support' ], strikethroughStart: 2 }, { name: 'Starter', price: '$30/mo', benefits: [ 'Credit Card Utilization Scorer', 'Unlimited Credit Cards', 'Remove Public Records', 'AI Recommendations', 'AI Generated Dispute Letters', 'SMS Alerts When Payments Due', 'Send Mail Directly From Platform (Coming Soon)' ], strikethroughStart: 4 }, { name: 'Elite Plan', price: '$70/mo', benefits: [ 'Credit Card Utilization Scorer', 'Unlimited Credit Cards', 'Remove Public Records', '24/7 Support', 'AI Generated Dispute Letters', 'SMS Alerts When Payments Due', 'Send Mail Directly From Platform (Coming Soon)' ], strikethroughStart: 7 } ]; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-black text-white font-sans", __source: { fileName: "", lineNumber: 50, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4 py-8", __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-purple-500 mb-8 text-center", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, "Subscription Management"), /*#__PURE__*/ React.createElement("p", { className: "text-xl mb-8 text-center", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, "Your current plan: ", /*#__PURE__*/ React.createElement("span", { className: "font-bold text-purple-500", __source: { fileName: "", lineNumber: 53, columnNumber: 68 }, __self: this }, currentPlan)), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-8", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, plans.map((plan, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `bg-gray-900 rounded-lg p-6 flex flex-col justify-between ${plan.name === 'Elite Plan' ? 'ring-2 ring-purple-500 transform scale-105' : ''}`, __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 57, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-purple-500 mb-4", __source: { fileName: "", lineNumber: 58, columnNumber: 17 }, __self: this }, plan.name), plan.name === 'Elite Plan' && /*#__PURE__*/ React.createElement("span", { className: "bg-purple-500 text-white text-xs font-bold px-2 py-1 rounded-full mb-2 inline-block", __source: { fileName: "", lineNumber: 59, columnNumber: 48 }, __self: this }, "Most Popular"), /*#__PURE__*/ React.createElement("p", { className: "text-3xl font-bold mb-6", __source: { fileName: "", lineNumber: 60, columnNumber: 17 }, __self: this }, plan.price), /*#__PURE__*/ React.createElement("ul", { className: "mb-6", __source: { fileName: "", lineNumber: 61, columnNumber: 17 }, __self: this }, plan.benefits.map((benefit, benefitIndex)=>/*#__PURE__*/ React.createElement("li", { key: benefitIndex, className: `mb-2 ${plan.name === 'Free' && benefitIndex >= plan.strikethroughStart || plan.name === 'Starter' && benefitIndex >= 4 ? 'line-through text-gray-500' : ''}`, __source: { fileName: "", lineNumber: 63, columnNumber: 21 }, __self: this }, benefit)))), /*#__PURE__*/ React.createElement("button", { className: "bg-purple-600 text-white font-bold py-2 px-4 rounded hover:bg-purple-700 transition duration-300 ease-in-out transform hover:scale-105", __source: { fileName: "", lineNumber: 75, columnNumber: 15 }, __self: this }, "Buy Now"))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 82, columnNumber: 7 }, __self: this }, ` @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } button:hover { animation: pulse 2s infinite; } `)); }