function MainComponent() { const [language, setLanguage] = React.useState("nl"); const [activeSection, setActiveSection] = React.useState("overview"); const translations = { nl: { title: "Duurzaamheid", subtitle: "Milieu- en sociale verantwoordelijkheid in de energiesector", overview: "Overzicht", environmental: "Milieu Impact", social: "Sociale Impact", initiatives: "Initiatieven", reporting: "Rapportage", sections: { overview: { title: "Duurzaamheidsoverzicht", content: "Onze toewijding aan duurzame ontwikkeling en verantwoorde energieproductie staat centraal in alle activiteiten. We streven naar een evenwicht tussen economische groei, milieubescherming en sociale vooruitgang.", stats: { emissions: "CO2 Reductie", renewable: "Hernieuwbare Energie", communities: "Ondersteunde Gemeenschappen", investment: "Duurzame Investering" } }, environmental: { title: "Milieu Impact", description: "Onze milieubeheerprogramma's en initiatieven" }, social: { title: "Sociale Impact", description: "Onze bijdrage aan gemeenschapsontwikkeling" }, initiatives: { title: "Duurzaamheidsinitiatieven", description: "Lopende en geplande duurzaamheidsprojecten" }, reporting: { title: "Duurzaamheidsrapportage", description: "Transparante rapportage van onze prestaties" } } }, en: { title: "Sustainability", subtitle: "Environmental and social responsibility in the energy sector", overview: "Overview", environmental: "Environmental Impact", social: "Social Impact", initiatives: "Initiatives", reporting: "Reporting", sections: { overview: { title: "Sustainability Overview", content: "Our commitment to sustainable development and responsible energy production is central to all activities. We strive to balance economic growth, environmental protection, and social progress.", stats: { emissions: "CO2 Reduction", renewable: "Renewable Energy", communities: "Communities Supported", investment: "Sustainable Investment" } }, environmental: { title: "Environmental Impact", description: "Our environmental management programs and initiatives" }, social: { title: "Social Impact", description: "Our contribution to community development" }, initiatives: { title: "Sustainability Initiatives", description: "Ongoing and planned sustainability projects" }, reporting: { title: "Sustainability Reporting", description: "Transparent reporting of our performance" } } } }; const initiatives = [ { id: 1, title: { nl: "Mangrove Herstelproject", en: "Mangrove Restoration Project" }, category: "Environmental", status: "Active", progress: 65, description: { nl: "Herstel van mangrovebossen langs de kustlijn van Suriname", en: "Restoration of mangrove forests along Suriname's coastline" }, impact: { nl: "2,500 hectare hersteld", en: "2,500 hectares restored" } }, { id: 2, title: { nl: "Gemeenschapsontwikkelingsprogramma", en: "Community Development Program" }, category: "Social", status: "Active", progress: 80, description: { nl: "Ondersteuning van lokale gemeenschappen door educatie en werkgelegenheid", en: "Supporting local communities through education and employment" }, impact: { nl: "1,200 mensen bereikt", en: "1,200 people reached" } }, { id: 3, title: { nl: "Hernieuwbare Energie Transitie", en: "Renewable Energy Transition" }, category: "Environmental", status: "In Progress", progress: 40, description: { nl: "Integratie van zonne-energie in offshore operaties", en: "Integration of solar power in offshore operations" }, impact: { nl: "15% CO2 reductie", en: "15% CO2 reduction" } } ]; const environmentalMetrics = [ { metric: { nl: "CO2 Uitstoot", en: "CO2 Emissions" }, value: "15%", trend: "decrease", period: "2024-2025" }, { metric: { nl: "Waterverbruik", en: "Water Usage" }, value: "20%", trend: "decrease", period: "2024-2025" }, { metric: { nl: "Afvalrecycling", en: "Waste Recycling" }, value: "85%", trend: "increase", period: "2024-2025" } ]; const socialPrograms = [ { name: { nl: "Lokale Werkgelegenheid", en: "Local Employment" }, participants: 500, type: "Employment", status: "Active" }, { name: { nl: "Onderwijsondersteuning", en: "Education Support" }, participants: 300, type: "Education", status: "Active" }, { name: { nl: "Gezondheidszorg Initiatieven", en: "Healthcare Initiatives" }, participants: 1000, type: "Healthcare", status: "Active" } ]; 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: 205, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#377E3F] h-2 rounded-full", style: { width: `${progress}%` }, __source: { fileName: "", lineNumber: 206, columnNumber: 7 }, __self: this })); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-50", __source: { fileName: "", lineNumber: 214, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-white border-b border-gray-200", __source: { fileName: "", lineNumber: 215, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4 py-6", __source: { fileName: "", lineNumber: 216, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 217, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 218, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-4xl", __source: { fileName: "", lineNumber: 219, columnNumber: 15 }, __self: this }, "🌱"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 220, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-[#377E3F]", __source: { fileName: "", lineNumber: 221, columnNumber: 17 }, __self: this }, t("title")), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 222, columnNumber: 17 }, __self: this }, t("subtitle")))), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setLanguage(language === "nl" ? "en" : "nl"), className: "text-gray-600 hover:text-[#377E3F]", __source: { fileName: "", lineNumber: 225, 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: 235, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4", __source: { fileName: "", lineNumber: 236, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-8 overflow-x-auto", __source: { fileName: "", lineNumber: 237, columnNumber: 11 }, __self: this }, [ "overview", "environmental", "social", "initiatives", "reporting" ].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-[#377E3F] text-[#377E3F] font-medium" : "border-transparent text-gray-600 hover:text-[#377E3F] hover:border-[#377E3F]"}`, __source: { fileName: "", lineNumber: 239, columnNumber: 15 }, __self: this }, t(section)))))), /*#__PURE__*/ React.createElement("main", { className: "max-w-7xl mx-auto px-4 py-12", __source: { fileName: "", lineNumber: 255, columnNumber: 7 }, __self: this }, activeSection === "overview" && /*#__PURE__*/ React.createElement("div", { className: "space-y-8", __source: { fileName: "", lineNumber: 257, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-sm border border-gray-200 p-8", __source: { fileName: "", lineNumber: 258, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-gray-900 mb-4", __source: { fileName: "", lineNumber: 259, columnNumber: 15 }, __self: this }, t("sections.overview.title")), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 leading-relaxed mb-8", __source: { fileName: "", lineNumber: 262, 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: 265, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 266, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-3xl font-bold text-[#377E3F]", __source: { fileName: "", lineNumber: 267, columnNumber: 19 }, __self: this }, "-25%"), /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 268, columnNumber: 19 }, __self: this }, t("sections.overview.stats.emissions"))), /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 272, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-3xl font-bold text-[#377E3F]", __source: { fileName: "", lineNumber: 273, columnNumber: 19 }, __self: this }, "15%"), /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 274, columnNumber: 19 }, __self: this }, t("sections.overview.stats.renewable"))), /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 278, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-3xl font-bold text-[#377E3F]", __source: { fileName: "", lineNumber: 279, columnNumber: 19 }, __self: this }, "12"), /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 280, columnNumber: 19 }, __self: this }, t("sections.overview.stats.communities"))), /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 284, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-3xl font-bold text-[#377E3F]", __source: { fileName: "", lineNumber: 285, columnNumber: 19 }, __self: this }, "$50M"), /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 286, columnNumber: 19 }, __self: this }, t("sections.overview.stats.investment")))))), activeSection === "environmental" && /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 296, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-sm border border-gray-200 p-6", __source: { fileName: "", lineNumber: 297, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-gray-900 mb-6", __source: { fileName: "", lineNumber: 298, columnNumber: 15 }, __self: this }, t("sections.environmental.title")), /*#__PURE__*/ React.createElement("div", { className: "grid gap-6 md:grid-cols-3", __source: { fileName: "", lineNumber: 301, columnNumber: 15 }, __self: this }, environmentalMetrics.map((item, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "p-4 border border-gray-200 rounded-lg", __source: { fileName: "", lineNumber: 303, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-bold text-gray-900 mb-2", __source: { fileName: "", lineNumber: 304, columnNumber: 21 }, __self: this }, item.metric[language]), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 307, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-2xl font-bold text-[#377E3F]", __source: { fileName: "", lineNumber: 308, columnNumber: 23 }, __self: this }, item.value), /*#__PURE__*/ React.createElement("span", { className: `text-sm ${item.trend === 'decrease' ? 'text-green-600' : 'text-blue-600'}`, __source: { fileName: "", lineNumber: 311, columnNumber: 23 }, __self: this }, item.trend === 'decrease' ? '↓' : '↑')), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 315, columnNumber: 21 }, __self: this }, item.period)))))), activeSection === "social" && /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 324, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-sm border border-gray-200 p-6", __source: { fileName: "", lineNumber: 325, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-gray-900 mb-6", __source: { fileName: "", lineNumber: 326, columnNumber: 15 }, __self: this }, t("sections.social.title")), /*#__PURE__*/ React.createElement("div", { className: "grid gap-6 md:grid-cols-3", __source: { fileName: "", lineNumber: 329, columnNumber: 15 }, __self: this }, socialPrograms.map((program, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "p-4 border border-gray-200 rounded-lg", __source: { fileName: "", lineNumber: 331, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-bold text-gray-900 mb-2", __source: { fileName: "", lineNumber: 332, columnNumber: 21 }, __self: this }, program.name[language]), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 335, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between", __source: { fileName: "", lineNumber: 336, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-gray-600", __source: { fileName: "", lineNumber: 337, columnNumber: 25 }, __self: this }, "Participants:"), /*#__PURE__*/ React.createElement("span", { className: "font-bold text-[#377E3F]", __source: { fileName: "", lineNumber: 338, columnNumber: 25 }, __self: this }, program.participants)), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between", __source: { fileName: "", lineNumber: 340, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-gray-600", __source: { fileName: "", lineNumber: 341, columnNumber: 25 }, __self: this }, "Type:"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 342, columnNumber: 25 }, __self: this }, program.type)), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between", __source: { fileName: "", lineNumber: 344, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-gray-600", __source: { fileName: "", lineNumber: 345, columnNumber: 25 }, __self: this }, "Status:"), /*#__PURE__*/ React.createElement("span", { className: "text-green-600", __source: { fileName: "", lineNumber: 346, columnNumber: 25 }, __self: this }, program.status)))))))), activeSection === "initiatives" && /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 357, columnNumber: 11 }, __self: this }, initiatives.map((initiative)=>/*#__PURE__*/ React.createElement("div", { key: initiative.id, className: "bg-white rounded-lg shadow-sm border border-gray-200 p-6", __source: { fileName: "", lineNumber: 359, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-start mb-4", __source: { fileName: "", lineNumber: 363, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 364, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold text-gray-900", __source: { fileName: "", lineNumber: 365, columnNumber: 21 }, __self: this }, initiative.title[language]), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 368, columnNumber: 21 }, __self: this }, initiative.category)), /*#__PURE__*/ React.createElement("div", { className: "text-right", __source: { fileName: "", lineNumber: 370, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm font-medium text-[#377E3F]", __source: { fileName: "", lineNumber: 371, columnNumber: 21 }, __self: this }, initiative.status))), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 376, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 377, columnNumber: 19 }, __self: this }, initiative.description[language]), /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 380, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 381, columnNumber: 21 }, __self: this }, "Impact: "), initiative.impact[language]), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 384, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between text-sm mb-1", __source: { fileName: "", lineNumber: 385, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 386, columnNumber: 23 }, __self: this }, "Progress"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 387, columnNumber: 23 }, __self: this }, initiative.progress, "%")), renderProgress(initiative.progress)))))), activeSection === "reporting" && /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-sm border border-gray-200 p-8", __source: { fileName: "", lineNumber: 398, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-gray-900 mb-6", __source: { fileName: "", lineNumber: 399, columnNumber: 13 }, __self: this }, t("sections.reporting.title")), /*#__PURE__*/ React.createElement("div", { className: "space-y-8", __source: { fileName: "", lineNumber: 402, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "prose max-w-none", __source: { fileName: "", lineNumber: 403, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 404, columnNumber: 17 }, __self: this }, language === "nl" ? "Download onze laatste duurzaamheidsrapporten en bekijk onze prestaties op het gebied van milieu en sociale verantwoordelijkheid." : "Download our latest sustainability reports and view our performance in environmental and social responsibility."), /*#__PURE__*/ React.createElement("div", { className: "mt-8 space-y-4", __source: { fileName: "", lineNumber: 409, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "block p-4 border border-gray-200 rounded-lg hover:bg-gray-50", __source: { fileName: "", lineNumber: 410, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 411, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 412, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold text-gray-900", __source: { fileName: "", lineNumber: 413, columnNumber: 25 }, __self: this }, language === "nl" ? "Duurzaamheidsrapport 2025" : "Sustainability Report 2025"), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 416, columnNumber: 25 }, __self: this }, "PDF - 2.5 MB")), /*#__PURE__*/ React.createElement("div", { className: "text-[#377E3F]", __source: { fileName: "", lineNumber: 418, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-download", __source: { fileName: "", lineNumber: 419, columnNumber: 25 }, __self: this })))), /*#__PURE__*/ React.createElement("a", { href: "#", className: "block p-4 border border-gray-200 rounded-lg hover:bg-gray-50", __source: { fileName: "", lineNumber: 423, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 424, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 425, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold text-gray-900", __source: { fileName: "", lineNumber: 426, columnNumber: 25 }, __self: this }, language === "nl" ? "ESG Prestatierapport 2025" : "ESG Performance Report 2025"), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 429, columnNumber: 25 }, __self: this }, "PDF - 1.8 MB")), /*#__PURE__*/ React.createElement("div", { className: "text-[#377E3F]", __source: { fileName: "", lineNumber: 431, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-download", __source: { fileName: "", lineNumber: 432, columnNumber: 25 }, __self: this }))))))))), /*#__PURE__*/ React.createElement("footer", { className: "bg-white border-t border-gray-200 mt-12", __source: { fileName: "", lineNumber: 443, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4 py-8", __source: { fileName: "", lineNumber: 444, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center text-gray-600", __source: { fileName: "", lineNumber: 445, columnNumber: 11 }, __self: this }, "© 2025 Suriname Oil & Gas Hub. All rights reserved.")))); }