function MainComponent() { const [language, setLanguage] = React.useState('en-GB'); const translateText = async (text, targetLang)=>{ const response = await fetch('/integrations/google-translate/language/translate/v2', { method: 'POST', body: new URLSearchParams({ q: text, target: targetLang }) }); const data = await response.json(); return data.data.translations[0].translatedText; }; const handleLanguageToggle = async ()=>{ const newLang = language === 'en-GB' ? 'fr-CA' : 'en-GB'; setLanguage(newLang); }; return /*#__PURE__*/ React.createElement("div", { className: "relative bg-cover bg-no-repeat bg-center min-h-screen", style: { backgroundImage: 'url(/path-to-background-movie.mp4)' }, __source: { fileName: "", lineNumber: 22, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-black opacity-50", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen z-10 text-white", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4 p-5", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, [ 'Silver', 'Gold', 'Platinum' ].map((tier, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `p-6 rounded-lg shadow-lg bg-opacity-80 bg-[${tier === 'Silver' ? '#C0C0C0' : tier === 'Gold' ? '#FFD700' : '#E5E4E2'}]`, __source: { fileName: "", lineNumber: 27, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold text-xl mb-2", __source: { fileName: "", lineNumber: 28, columnNumber: 15 }, __self: this }, tier), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 29, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: "flex items-center", __source: { fileName: "", lineNumber: 30, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check-circle text-green-500 mr-2", __source: { fileName: "", lineNumber: 30, columnNumber: 51 }, __self: this }), " Feature 1"), /*#__PURE__*/ React.createElement("li", { className: "flex items-center", __source: { fileName: "", lineNumber: 31, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check-circle text-green-500 mr-2", __source: { fileName: "", lineNumber: 31, columnNumber: 51 }, __self: this }), " Feature 2"), /*#__PURE__*/ React.createElement("li", { className: "flex items-center", __source: { fileName: "", lineNumber: 32, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times-circle text-red-500 mr-2", __source: { fileName: "", lineNumber: 32, columnNumber: 51 }, __self: this }), " Feature 3"), /*#__PURE__*/ React.createElement("li", { className: "flex items-center", __source: { fileName: "", lineNumber: 33, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check-circle text-green-500 mr-2", __source: { fileName: "", lineNumber: 33, columnNumber: 51 }, __self: this }), " Feature 4"), /*#__PURE__*/ React.createElement("li", { className: "flex items-center", __source: { fileName: "", lineNumber: 34, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check-circle text-green-500 mr-2", __source: { fileName: "", lineNumber: 34, columnNumber: 51 }, __self: this }), " Feature 5"))))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center mt-10 w-[200px] p-2 bg-[#C0C0C0] rounded-full", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-flag-usa", __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("label", { className: "switch", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", onChange: handleLanguageToggle, __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "slider round", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("i", { className: "fas fa-flag-canada", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }, ` .bg-cover { -webkit-animation: backgroundScroll 30s linear infinite; animation: backgroundScroll 30s linear infinite; } @-webkit-keyframes backgroundScroll { from {background-position: 0 0;} to {background-position: -100% 0;} } @keyframes backgroundScroll { from {background-position: 0 0;} to {background-position: -100% 0;} } `)); }