function MainComponent() { const [language, setLanguage] = React.useState("nl"); const translations = { nl: { title: "Tijdlijn", subtitle: "Geschiedenis van olie- en gasontwikkelingen in Suriname", filterAll: "Alle Bedrijven", timelineTitle: "Belangrijke Gebeurtenissen", readMore: "Lees meer", present: "Heden" }, en: { title: "Timeline", subtitle: "History of oil and gas developments in Suriname", filterAll: "All Companies", timelineTitle: "Key Events", readMore: "Read more", present: "Present" } }; const t = (key)=>translations[language][key] || key; const timelineEvents = [ { year: 2020, event: { nl: "TotalEnergies ontdekt olie bij Maka Central-1", en: "TotalEnergies discovers oil at Maka Central-1" }, company: "TotalEnergies" }, { year: 2021, event: { nl: "Apache Corporation sluit zich aan bij Blok 58 operaties", en: "Apache Corporation joins Block 58 operations" }, company: "Apache" }, { year: 2022, event: { nl: "Sapakara-1 put toont veelbelovende resultaten", en: "Sapakara-1 well shows promising results" }, company: "TotalEnergies" }, { year: 2023, event: { nl: "Staatsolie breidt lokale content initiatieven uit", en: "Staatsolie expands local content initiatives" }, company: "Staatsolie" }, { year: 2024, event: { nl: "Eerste olieproductie mijlpaal bereikt", en: "First oil production milestone achieved" }, company: "Multiple" }, { year: 2025, event: { nl: "Nieuwe ontdekkingen gaan door in offshore blokken", en: "New discoveries continue in offshore blocks" }, company: "Various" } ]; const [selectedCompany, setSelectedCompany] = React.useState("all"); const companies = [ ...new Set(timelineEvents.map((event)=>event.company)) ]; const filteredEvents = selectedCompany === "all" ? timelineEvents : timelineEvents.filter((event)=>event.company === selectedCompany); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-50", __source: { fileName: "", lineNumber: 85, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-white border-b border-gray-200", __source: { fileName: "", lineNumber: 86, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4 py-6", __source: { fileName: "", lineNumber: 87, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 88, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 89, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-4xl", __source: { fileName: "", lineNumber: 90, columnNumber: 15 }, __self: this }, "📅"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 91, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-[#DA020E]", __source: { fileName: "", lineNumber: 92, columnNumber: 17 }, __self: this }, t("title")), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 93, columnNumber: 17 }, __self: this }, t("subtitle")))), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setLanguage(language === "nl" ? "en" : "nl"), className: "text-gray-600 hover:text-[#DA020E]", __source: { fileName: "", lineNumber: 96, columnNumber: 13 }, __self: this }, language === "nl" ? "🇬🇧 EN" : "🇳🇱 NL")))), /*#__PURE__*/ React.createElement("main", { className: "max-w-7xl mx-auto px-4 py-12", __source: { fileName: "", lineNumber: 106, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 107, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4 overflow-x-auto pb-4", __source: { fileName: "", lineNumber: 108, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setSelectedCompany("all"), className: `px-4 py-2 rounded-full text-sm whitespace-nowrap ${selectedCompany === "all" ? "bg-[#DA020E] text-white" : "bg-white text-gray-600 hover:bg-gray-100"}`, __source: { fileName: "", lineNumber: 109, columnNumber: 13 }, __self: this }, t("filterAll")), companies.map((company)=>/*#__PURE__*/ React.createElement("button", { key: company, onClick: ()=>setSelectedCompany(company), className: `px-4 py-2 rounded-full text-sm whitespace-nowrap ${selectedCompany === company ? "bg-[#DA020E] text-white" : "bg-white text-gray-600 hover:bg-gray-100"}`, __source: { fileName: "", lineNumber: 120, columnNumber: 15 }, __self: this }, company)))), /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 135, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute left-4 md:left-1/2 h-full w-0.5 bg-gray-200", __source: { fileName: "", lineNumber: 136, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "space-y-12", __source: { fileName: "", lineNumber: 138, columnNumber: 11 }, __self: this }, filteredEvents.map((event, index)=>/*#__PURE__*/ React.createElement("div", { key: event.year, className: "relative", __source: { fileName: "", lineNumber: 140, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-4", __source: { fileName: "", lineNumber: 141, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute left-4 md:left-1/2 w-4 h-4 bg-[#DA020E] rounded-full transform -translate-x-2", __source: { fileName: "", lineNumber: 142, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "ml-12 md:ml-0 md:absolute md:left-0 md:w-1/2 md:pr-8 md:text-right", __source: { fileName: "", lineNumber: 143, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-3xl font-bold text-gray-300", __source: { fileName: "", lineNumber: 144, columnNumber: 21 }, __self: this }, event.year))), /*#__PURE__*/ React.createElement("div", { className: "ml-12 md:ml-0 md:flex md:justify-end", __source: { fileName: "", lineNumber: 150, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-sm border border-gray-200 p-6 md:w-1/2 md:ml-8", __source: { fileName: "", lineNumber: 151, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mb-4", __source: { fileName: "", lineNumber: 152, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "px-3 py-1 bg-red-50 text-[#DA020E] rounded-full text-sm", __source: { fileName: "", lineNumber: 153, columnNumber: 23 }, __self: this }, event.company)), /*#__PURE__*/ React.createElement("p", { className: "text-lg text-gray-900 mb-2", __source: { fileName: "", lineNumber: 157, columnNumber: 21 }, __self: this }, event.event[language]))))), /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 165, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-4", __source: { fileName: "", lineNumber: 166, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute left-4 md:left-1/2 w-4 h-4 bg-[#DA020E] rounded-full transform -translate-x-2", __source: { fileName: "", lineNumber: 167, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "ml-12 md:ml-0 md:absolute md:left-0 md:w-1/2 md:pr-8 md:text-right", __source: { fileName: "", lineNumber: 168, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-3xl font-bold text-[#DA020E]", __source: { fileName: "", lineNumber: 169, columnNumber: 19 }, __self: this }, t("present")))))))), /*#__PURE__*/ React.createElement("footer", { className: "bg-white border-t border-gray-200 mt-12", __source: { fileName: "", lineNumber: 179, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4 py-8", __source: { fileName: "", lineNumber: 180, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center text-gray-600", __source: { fileName: "", lineNumber: 181, columnNumber: 11 }, __self: this }, "© 2025 Suriname Oil & Gas Hub. All rights reserved.")))); }