function MainComponent() { const [language, setLanguage] = React.useState("nl"); const [activeSection, setActiveSection] = React.useState("overview"); const translations = { nl: { title: "Offshore Operaties", subtitle: "Olie- en gasactiviteiten voor de kust van Suriname", overview: "Overzicht", blocks: "Offshore Blokken", operations: "Huidige Operaties", infrastructure: "Infrastructuur", environment: "Milieu & Veiligheid", sections: { overview: { title: "Offshore Activiteiten Overzicht", content: "Suriname's offshore sector heeft zich ontwikkeld tot een belangrijke speler in de regionale olie- en gasindustrie. Met meerdere significante ontdekkingen en actieve exploratieprogramma's, groeit de sector gestaag.", stats: { blocks: "Actieve Blokken", discoveries: "Ontdekkingen", companies: "Actieve Bedrijven", investment: "Totale Investering" } }, blocks: { title: "Offshore Blokken", description: "Overzicht van de belangrijkste offshore blokken en hun huidige status" }, operations: { title: "Huidige Operaties", description: "Details over lopende boor- en productieactiviteiten" }, infrastructure: { title: "Offshore Infrastructuur", description: "Belangrijke infrastructurele elementen die de offshore operaties ondersteunen" }, environment: { title: "Milieu & Veiligheid", description: "Milieumaatregelen en veiligheidsprotocollen voor offshore operaties" } } }, en: { title: "Offshore Operations", subtitle: "Oil and gas activities offshore Suriname", overview: "Overview", blocks: "Offshore Blocks", operations: "Current Operations", infrastructure: "Infrastructure", environment: "Environment & Safety", sections: { overview: { title: "Offshore Activities Overview", content: "Suriname's offshore sector has evolved into a significant player in the regional oil and gas industry. With multiple significant discoveries and active exploration programs, the sector continues to grow.", stats: { blocks: "Active Blocks", discoveries: "Discoveries", companies: "Active Companies", investment: "Total Investment" } }, blocks: { title: "Offshore Blocks", description: "Overview of key offshore blocks and their current status" }, operations: { title: "Current Operations", description: "Details of ongoing drilling and production activities" }, infrastructure: { title: "Offshore Infrastructure", description: "Key infrastructure elements supporting offshore operations" }, environment: { title: "Environment & Safety", description: "Environmental measures and safety protocols for offshore operations" } } } }; const offshoreBlocks = [ { id: "block-58", name: "Block 58", operator: "TotalEnergies", partners: [ "Apache Corporation" ], status: "Active", discoveries: [ "Maka Central-1", "Sapakara West-1", "Kwaskwasi-1" ], depth: "1,500-2,500m", area: "5,844 km²", image: "/images/block-58-map.jpg" }, { id: "block-42", name: "Block 42", operator: "Kosmos Energy", partners: [ "Chevron" ], status: "Exploration", discoveries: [], depth: "1,000-2,000m", area: "6,176 km²", image: "/images/block-42-map.jpg" }, { id: "block-53", name: "Block 53", operator: "Apache Corporation", partners: [ "Petronas" ], status: "Active", discoveries: [ "Krabdagu-1" ], depth: "1,200-2,300m", area: "3,840 km²", image: "/images/block-53-map.jpg" } ]; const currentOperations = [ { id: 1, name: "Sapakara South-1", type: "Exploration Well", operator: "TotalEnergies", status: "Drilling", startDate: "2025-01-15", depth: "1,850m", progress: 75 }, { id: 2, name: "Krabdagu FPSO", type: "Production Facility", operator: "Apache Corporation", status: "Construction", startDate: "2024-11-01", capacity: "220,000 bpd", progress: 45 }, { id: 3, name: "Block 42 Seismic", type: "3D Seismic Survey", operator: "Kosmos Energy", status: "In Progress", startDate: "2024-12-15", area: "2,500 km²", progress: 60 } ]; const t = (key)=>{ const keys = key.split("."); return keys.reduce((obj, key)=>obj?.[key], translations[language]) || key; }; const renderProgress = (progress)=>/*#__PURE__*/ React.createElement("div", { className: "w-full bg-gray-200 rounded-full h-2", __source: { fileName: "", lineNumber: 157, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#DA020E] h-2 rounded-full", style: { width: `${progress}%` }, __source: { fileName: "", lineNumber: 158, columnNumber: 7 }, __self: this })); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-50", __source: { fileName: "", lineNumber: 166, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-white border-b border-gray-200", __source: { fileName: "", lineNumber: 167, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4 py-6", __source: { fileName: "", lineNumber: 168, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 169, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 170, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-4xl", __source: { fileName: "", lineNumber: 171, columnNumber: 15 }, __self: this }, "🛢️"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 172, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-[#DA020E]", __source: { fileName: "", lineNumber: 173, columnNumber: 17 }, __self: this }, t("title")), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 176, 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: 179, columnNumber: 13 }, __self: this }, language === "nl" ? "🇬🇧 EN" : "🇳🇱 NL")))), /*#__PURE__*/ React.createElement("nav", { className: "bg-white border-b border-gray-200 sticky top-0 z-40", __source: { fileName: "", lineNumber: 189, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4", __source: { fileName: "", lineNumber: 190, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-8 overflow-x-auto", __source: { fileName: "", lineNumber: 191, columnNumber: 11 }, __self: this }, [ "overview", "blocks", "operations", "infrastructure", "environment" ].map((section)=>/*#__PURE__*/ React.createElement("button", { key: section, onClick: ()=>setActiveSection(section), className: `py-4 px-4 text-sm whitespace-nowrap border-b-2 transition-colors ${activeSection === section ? "border-[#DA020E] text-[#DA020E] font-medium" : "border-transparent text-gray-600 hover:text-[#DA020E] hover:border-[#DA020E]"}`, __source: { fileName: "", lineNumber: 193, columnNumber: 15 }, __self: this }, t(section)))))), /*#__PURE__*/ React.createElement("main", { className: "max-w-7xl mx-auto px-4 py-12", __source: { fileName: "", lineNumber: 209, columnNumber: 7 }, __self: this }, activeSection === "overview" && /*#__PURE__*/ React.createElement("div", { className: "space-y-8", __source: { fileName: "", lineNumber: 211, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-sm border border-gray-200 p-8", __source: { fileName: "", lineNumber: 212, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-gray-900 mb-4", __source: { fileName: "", lineNumber: 213, columnNumber: 15 }, __self: this }, t("sections.overview.title")), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 leading-relaxed mb-8", __source: { fileName: "", lineNumber: 216, columnNumber: 15 }, __self: this }, t("sections.overview.content")), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-6", __source: { fileName: "", lineNumber: 219, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 220, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-3xl font-bold text-[#DA020E]", __source: { fileName: "", lineNumber: 221, columnNumber: 19 }, __self: this }, "12"), /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 222, columnNumber: 19 }, __self: this }, t("sections.overview.stats.blocks"))), /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 224, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-3xl font-bold text-[#DA020E]", __source: { fileName: "", lineNumber: 225, columnNumber: 19 }, __self: this }, "8"), /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 226, columnNumber: 19 }, __self: this }, t("sections.overview.stats.discoveries"))), /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 228, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-3xl font-bold text-[#DA020E]", __source: { fileName: "", lineNumber: 229, columnNumber: 19 }, __self: this }, "6"), /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 230, columnNumber: 19 }, __self: this }, t("sections.overview.stats.companies"))), /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 232, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-3xl font-bold text-[#DA020E]", __source: { fileName: "", lineNumber: 233, columnNumber: 19 }, __self: this }, "$4.2B"), /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 234, columnNumber: 19 }, __self: this }, t("sections.overview.stats.investment")))))), activeSection === "blocks" && /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 242, columnNumber: 11 }, __self: this }, offshoreBlocks.map((block)=>/*#__PURE__*/ React.createElement("div", { key: block.id, className: "bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden", __source: { fileName: "", lineNumber: 244, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: block.image, alt: block.name, className: "w-full h-48 object-cover", __source: { fileName: "", lineNumber: 245, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "p-6", __source: { fileName: "", lineNumber: 246, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold text-gray-900 mb-2", __source: { fileName: "", lineNumber: 247, columnNumber: 19 }, __self: this }, block.name), /*#__PURE__*/ React.createElement("div", { className: "space-y-2 text-sm text-gray-600", __source: { fileName: "", lineNumber: 248, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 249, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 249, columnNumber: 26 }, __self: this }, "Operator:"), " ", block.operator), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 250, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 250, columnNumber: 26 }, __self: this }, "Status:"), " ", block.status), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 251, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 251, columnNumber: 26 }, __self: this }, "Depth:"), " ", block.depth), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 252, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 252, columnNumber: 26 }, __self: this }, "Area:"), " ", block.area), block.discoveries.length > 0 && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 254, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 255, columnNumber: 25 }, __self: this }, "Discoveries:"), /*#__PURE__*/ React.createElement("ul", { className: "list-disc list-inside ml-2", __source: { fileName: "", lineNumber: 256, columnNumber: 25 }, __self: this }, block.discoveries.map((discovery)=>/*#__PURE__*/ React.createElement("li", { key: discovery, __source: { fileName: "", lineNumber: 258, columnNumber: 29 }, __self: this }, discovery))))))))), activeSection === "operations" && /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 271, columnNumber: 11 }, __self: this }, currentOperations.map((operation)=>/*#__PURE__*/ React.createElement("div", { key: operation.id, className: "bg-white rounded-lg shadow-sm border border-gray-200 p-6", __source: { fileName: "", lineNumber: 273, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-start mb-4", __source: { fileName: "", lineNumber: 274, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 275, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold text-gray-900", __source: { fileName: "", lineNumber: 276, columnNumber: 21 }, __self: this }, operation.name), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 277, columnNumber: 21 }, __self: this }, operation.type)), /*#__PURE__*/ React.createElement("div", { className: "text-right", __source: { fileName: "", lineNumber: 279, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm font-medium text-[#DA020E]", __source: { fileName: "", lineNumber: 280, columnNumber: 21 }, __self: this }, operation.status), /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 281, columnNumber: 21 }, __self: this }, "Started: ", operation.startDate))), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 284, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-4 text-sm", __source: { fileName: "", lineNumber: 285, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 286, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 286, columnNumber: 26 }, __self: this }, "Operator:"), " ", operation.operator), operation.depth && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 287, columnNumber: 41 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 287, columnNumber: 46 }, __self: this }, "Depth:"), " ", operation.depth), operation.capacity && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 288, columnNumber: 44 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 288, columnNumber: 49 }, __self: this }, "Capacity:"), " ", operation.capacity), operation.area && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 289, columnNumber: 40 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 289, columnNumber: 45 }, __self: this }, "Area:"), " ", operation.area)), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 291, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between text-sm mb-1", __source: { fileName: "", lineNumber: 292, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 293, columnNumber: 23 }, __self: this }, "Progress"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 294, columnNumber: 23 }, __self: this }, operation.progress, "%")), renderProgress(operation.progress)))))), activeSection === "infrastructure" && /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-sm border border-gray-200 p-8", __source: { fileName: "", lineNumber: 305, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-gray-900 mb-6", __source: { fileName: "", lineNumber: 306, columnNumber: 13 }, __self: this }, t("sections.infrastructure.title")), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-8", __source: { fileName: "", lineNumber: 309, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 310, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-bold text-gray-900", __source: { fileName: "", lineNumber: 311, columnNumber: 17 }, __self: this }, "Production Facilities"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-2 text-gray-600", __source: { fileName: "", lineNumber: 312, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 313, columnNumber: 19 }, __self: this }, "2 Floating Production Storage and Offloading (FPSO) vessels"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 314, columnNumber: 19 }, __self: this }, "4 Drilling platforms"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 315, columnNumber: 19 }, __self: this }, "Subsea infrastructure network"))), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 318, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-bold text-gray-900", __source: { fileName: "", lineNumber: 319, columnNumber: 17 }, __self: this }, "Support Infrastructure"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-2 text-gray-600", __source: { fileName: "", lineNumber: 320, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 321, columnNumber: 19 }, __self: this }, "Shore base facilities"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 322, columnNumber: 19 }, __self: this }, "Helicopter services"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 323, columnNumber: 19 }, __self: this }, "Supply vessel fleet"))))), activeSection === "environment" && /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-sm border border-gray-200 p-8", __source: { fileName: "", lineNumber: 331, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-gray-900 mb-6", __source: { fileName: "", lineNumber: 332, columnNumber: 13 }, __self: this }, t("sections.environment.title")), /*#__PURE__*/ React.createElement("div", { className: "space-y-8", __source: { fileName: "", lineNumber: 335, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 336, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-bold text-gray-900 mb-4", __source: { fileName: "", lineNumber: 337, columnNumber: 17 }, __self: this }, "Environmental Protection"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-2 text-gray-600", __source: { fileName: "", lineNumber: 338, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 339, columnNumber: 19 }, __self: this }, "Regular environmental impact assessments"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 340, columnNumber: 19 }, __self: this }, "Marine life monitoring programs"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 341, columnNumber: 19 }, __self: this }, "Waste management protocols"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 342, columnNumber: 19 }, __self: this }, "Emissions monitoring and reduction initiatives"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 345, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-bold text-gray-900 mb-4", __source: { fileName: "", lineNumber: 346, columnNumber: 17 }, __self: this }, "Safety Measures"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-2 text-gray-600", __source: { fileName: "", lineNumber: 347, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 348, columnNumber: 19 }, __self: this }, "Emergency response procedures"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 349, columnNumber: 19 }, __self: this }, "Regular safety drills and training"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 350, columnNumber: 19 }, __self: this }, "24/7 monitoring systems"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 351, columnNumber: 19 }, __self: this }, "International safety standard compliance")))))), /*#__PURE__*/ React.createElement("footer", { className: "bg-white border-t border-gray-200 mt-12", __source: { fileName: "", lineNumber: 359, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4 py-8", __source: { fileName: "", lineNumber: 360, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center text-gray-600", __source: { fileName: "", lineNumber: 361, columnNumber: 11 }, __self: this }, "© 2025 Suriname Oil & Gas Hub. All rights reserved.")))); }