function MainComponent() { const [selectedPlan, setSelectedPlan] = React.useState('basic'); const handleSelectPlan = (plan)=>{ setSelectedPlan(plan); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f7f8fc] p-4", __source: { fileName: "", lineNumber: 7, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-center gap-8", __source: { fileName: "", lineNumber: 8, columnNumber: 7 }, __self: this }, [ 'basic', 'premium', 'enterprise' ].map((plan)=>/*#__PURE__*/ React.createElement("div", { key: plan, className: `max-w-sm rounded overflow-hidden shadow-lg p-6 ${selectedPlan === plan ? 'border-4 border-[#4ade80]' : ''}`, onClick: ()=>handleSelectPlan(plan), __source: { fileName: "", lineNumber: 10, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-crimson-text text-center text-[#6b7280] mb-4 text-xl uppercase", __source: { fileName: "", lineNumber: 17, columnNumber: 13 }, __self: this }, plan, " Plan"), /*#__PURE__*/ React.createElement("ul", { className: "font-roboto mb-8", __source: { fileName: "", lineNumber: 18, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: "text-[#111827] mb-4", __source: { fileName: "", lineNumber: 19, columnNumber: 15 }, __self: this }, "⚙️ Basic Features"), plan !== 'basic' && /*#__PURE__*/ React.createElement("li", { className: "text-[#111827] mb-4", __source: { fileName: "", lineNumber: 20, columnNumber: 36 }, __self: this }, "🔨 Advanced Options"), plan === 'enterprise' && /*#__PURE__*/ React.createElement("li", { className: "text-[#111827] mb-4", __source: { fileName: "", lineNumber: 21, columnNumber: 41 }, __self: this }, "🌐 Global Scale")), /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 23, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: `font-roboto text-white py-2 px-4 rounded ${selectedPlan === plan ? 'bg-[#22c55e]' : 'bg-[#d1d5db]'}`, name: `select-${plan}`, __source: { fileName: "", lineNumber: 24, columnNumber: 15 }, __self: this }, "Select ", plan.charAt(0).toUpperCase() + plan.slice(1)))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, ` @keyframes pulse-border { 0% { border-color: #d1d5db; } 50% { border-color: #4ade80; } 100% { border-color: #d1d5db; } } .border-pulse { animation: pulse-border 1.5s infinite; } `)); }