(function () {
  const { useEffect, useRef, useState } = React;

  const DSMADE_LOGO_DATA_URI = "data:image/webp;base64,UklGRp4hAABXRUJQVlA4WAoAAAAQAAAAtAEAfQAAQUxQSNIcAAAB8Ibt/yKn/f89Z1aycfcEDS4R3IIHD17DmlC0JfDG3aW4F1pcqlRwKNriJQSHIFESkkBcV2eeN3Zer5Fd+mlufSJiAuD//f8fb61ox+oXl9G3c3eHs9UrDu2OliFiyvQApvqEbbQ6EwX1Vz7zrC7xmXzfjOTy7zvrqkMc+5+oQGo+fW09trqDbbL1PYo234/zrN7wnvjYglKWnu6hrb5w6H7KiFLn7WjKVE+wDTfmoYz8o6+CmGoIvy8fWFDeilOxbtUNDn2Ol6FIyz/7XopALNjbUl2dwDTdnINis9eEadvuKxaB3Iu5gdUHnpMf8yiy6vdoLQC4DL9hokM0Xh3qWD2gbf+bHkUaE+M8QDhoVjJHh1i0J1Ilj85TWg93Zx2rFK1fy/4TFm86cPTIrlUzP+pa312tCJW7p7C7SgGMq6ewh1YGrSelTgYHT2k93J11KpkcPJWok6n2kkwUm/11PRbIqmbbsng65F9Or8HIMSZR2rvXThxe+7/BzXxUcmkbxO27l2vkUZi3lL2+umV0Uxf56p65lyh4LUYBtY/fSxS83Vs6dtq9RGLScp10wxKlvXvt5JH1M4aG+6qkG3o3Uf6kkbK4jrlhQJFFP/V0AHrHnr9U0CEa/x7mKsMclJErz7y0tn8gK4O27cZnBpTQkPrjmNqsTE2zkXjGXzb1Gh6FTSOlq/MIKdMipJuIMvLlWVc2xIaoJJrEowJnyaDtdKgURZruxnuCeO8vHpjpEPP3t1FLNlsOa7742rzGKqlqrkjjUOqquzNrMbI0eUOqSmDl6pSFpBHSTTHS8MsYW7DmS27Nb6KWZAKnhJnSha3J4JGez1pbjwUpmYZLM0Ugn7K0LmMbiGh+saS2JGznv8wop+lSDYXg42YyefyECgi4itRP6tgKIpqTl9a1M7rYJAuKrDrZ3gGk1nY6XkaHaPh7kLOtIJr/+Ugnjhn0CmW+6K4UfrtOnpGlNCMl+6iUzjLFhhAt90c42pOG+0pRJPd0gifIGfYrLwLx3WjGZhCL1/iJ6vwSZTZPBKXg+96y1LyJlGbJ3I+hyJu+toRYujnIjsw0o8isNQ1BTqd+5ytRpOXOBB+wITT9FCaixiWU+0kd5eA5PxnUC01K6PFOjH6EbaH594b262EPrQxs0915KJLLXNeEAZtC/lwDKtUCMx1fVZiXm5tfZqHZoFaQcYoMrV+jAhx2ouhTHraF/PlGdovL3NSUlSp48gMORRYdbasDAKZmiDwlbyiz8g2cGOSPh9DUf4a0xVdWfd4tKjKyw7BpW668MQnkRoOC8GVzyZz3oRIiUsUV9Jav5A1lVr6BE4N4uoZkWYn3JL4/SiGIlqeTfCRxGnJdjyLNtz5zAwDw+PzGKHm+bdmK3Lrz4P8deFRFh+ZtLhSTLBTclcG+LBA1XlETfsvjEX93VxTudpRqSLES2GW8ONyrk+3blq3IrTsPnLr/fqUIfp+rVMt9fCX2c1IMouHcAAdRTLNvClFs2pxQAAC24y9VhrHyLAZ6Rlvzo+MVVFgaT3L4GSlP1ASxLm3XZVSOBmUVDpTI7y9UQq3HSDSZSZltZFsE9IwmZPjv5VRY9SUj0RxQuDSIxXubqegC5qag2JJvmjMAwNRY/gZRH68ka5dP7nE0+LAJIeQZRXZbkFAVMSNUYXghUBJmtkURE82kc1dJ/NdquRaLsHYefoejwReR9gy55KnBDMlt6E0Tiqw6O8AFAMDvi3sWtAWABj8aabh1WqFG+RQnnKRQojj9DFaKyNeoBN8bSKz4eLSBgI8bKA+gzn4DDe50tC/GYp4KUX9tpIdQ8/3FKNKSlOAD1p3PVaG1LUDQQTMFpkQItSimOKyyD/gsUgKn3aiIz6pIN4NCHpBM0xgbAN8dRprM9vbl3axdhXSIpYc7aqxa/lIpIntVIxasmb0obBMQeoaGX8AItKI55WIn+N1O4mLfK8LtOBItC1hYTMIbQbYAgcdouNVqu5Lb0XHQRQMd8pnrwxgA8P70ppGi6EC0FoSZ/TYF7TMp8KavQJNCind97AQWxIoKOIeK6JlPSokEiMgiVY60CWj1ggITQ+1LNIDP5KccFaLlSbwHAEDQnAwh842BLkC2NWYZT1HSWaB2OgU+HaCxD3jJXwQzRa8I3R4k79MBOBwg4QlXm2DnWyhK+9sdYOrtKqBD1J/u4QAAbMShQkT+5ZwAoLU1aJhCgbMF3C7QYOG3XbxYe2CeIaLxI1RE6wxS8QAAgP6lpJKeNgH1kilwMWN3ABz7nKikQ8zf0ZQFAF3/kzk7mzNgTzR7aY5qrWAZFWLh1dWDG7mrbA1TIqkcNvEkXg7VSo50ycvK9zIJDzvYhGoXzW+OUizUOUqqUQ6A38QnFjrk7v8vEAAguKMziLQ5GGOiuOcl0DKTDpGveHX665Gt/DQ2YCriCbjPmaZ7DhIfZMtR/yESzQkgmGAi5bW1CRhppPgnSIpnfxyXdCSjIGAbbcymQ9T/NdwFpLS9du8p0msKaFebRVjz+qzr20c3c1Fa0a5cUtEwCo8TSMwd90COqUZScl2hJskk3KCyiYh3FOlNpZB6paIAHKJ/qKRDLNrbTm2H6j6jeNdaAGqclUCwKvX3rxqplTVkB0/Aq6GkcXoCvy1MjoC/kbyZFdJuoXjZ2CaCXlEUt1MMv1xhAO7jn4pAPmNRgP3xuklR2FkIIq5JhIjm11taqhRUHNPkOck4TyVU7xESnzYNkOOjCtL7dkDs/p5knsvYgud1irKO9gug3rq3PBWi+fYQF3vjdo2iuBsBGh/TS4WIWStrKagXTDMS8FVLAc1anmCYDkH3pXP5A8nHnEjuJ0l4O9QW3C9SlEfbM1B3+LWEDrHocAuNfXGn6koCr0lJRsmQ+7szoyDfcyTc52LVJQuJfwZAoAw9ikhVnwJlXBWpMs4mLlGUdbJrAJ5xt8x0yL+YX4exJ/7/UBR0ogAmbMa1MqkQn/dQEPR8RyoaBgCePyOxYCBAYJJkmj1Ivh1EU+sBCc9624DPXZoOdg7YsNXZdIhVV0Z72JHGKRQ54TQAbNCQHYklnDT4oJmCNOs5Av4VDDC6lPStI0DgPclavCVxC1kaZgVPKoq1gRoZFPmtFYMrbUDlqgIATbefy+gQy37opLEb3UopXgfRAYA2NGbBby9KeAnwiItyoH4SyTwfat9C4qtmABCQKBW7DsmpkUDdOoeEB52UF11M8aKBFA+OSHn0yHDluY47McELAMBzRBJHh/hmRai9mMFT/O0uCgAY59ox044+KhNV1EdBEF9BwIw2C80E01SQpX4yxY9BntQBxynetlNeAk9xzVuKBRoHSVWgMIcOv1Zh1Zm+jgAAtda/FYGWxDFudsHlNFLuZKUQVPt3nX/2HU+F36gV5HWMhLcykHjRT57pZhL/5jb9rWwK3KhWmvNxpDzoIMUcULg0TP01mTwi4vttESwAOHT9qZwOsfxoB60d6FpAYRkHsrp23JlDddtfQdAlk0SZHwsCdyUKvo6KfNVQadG5FJYpYJ884u5aUJh/OC0YAMAjPtFMh3zaugaMrbn8iJRvw+UBcOh7jyYjUknaVWZR/G5nAf9/JBpToQxutsKc9yFlbke78qaNkK77T+VIa7gwzBUAmIar0+kQLffG+tjY5+U0x13kAuidQ1HSRUlQ546o5CiQxesEKvR+iLI+KaA5721HuNfTXKzYBmuzeKQ3/1EfrHUdf6mgQyz99ZZNRScjpSEO5Hf7naKsm6JgZJkIw2wV4Y40vfOVYpqgqFYPkNLwFdiP0kPNVQAAHpMfWVBk1tKarACA29h7HB3yFltql4i0t0NJbB13qZjtFKVdleXyg4jLwUC4LYluLyr2kreCIq4h7YN6dkN/eZgzAIC6x1k9iiz/qZ0KaOusfEtHaQMOg58gbdUkIPv+8VNbjTSuv1Fkt1QWtEinKh4K8rTOUk7pYMVo+yUhrXEmYxdmWbiXs4MAANQRG3JQpPHWSA8Qqenye5k90EZuyUfqE/4Ug0swc22UoxTdsikSgxXGzjXR7Hci+UmiWo1k3mSU1MST8CcXZTiEb3yP1BeDwT68PxihBgAImPbcgiLTlocxIN537G2LbbFudQfvTOWQOqUzkF1+REQufU9ssEoE2+oqUu7XKgyCL1OkRAHFLYpRpLCnFM9mTkmQcMq8lxQ5XeVjXOsM2P6aQ+qsniDRLKV1GegOAOAYc0aPIst/jNaCpGyd1VlKOzslgTxt0Y4/npWiyOLxKorodyhYfHvj8OZeOpUVo3WPmvOMp6j8GJQGQ/IJplmMTNM5Er8QpGVXciR+q1aKs1MSyNMWbvv9aQmP9OVTVVLt6d5D6m5+0rAMALDh23N4pLckjvEEybXdfihVlsVIabKgeP1yJyCrtyGZq0i79uP6mQkJUxd/dynDhLTX/JXnvJsXuhII8gT+g+SMcImgXTYJXzWXwmKkNFlQvH6VM0hlKJM8P1Yaa99pL3kUmfd1XQZkVPdLFmMYK4/M+tWuQNk0g0LG8k9AeRDxXKBoMFDdlGC0geKATirHHyi4RawEMuvXuoNkMhqGSuXQ/089ijSc7qoFOYMXZPFiUnvbzvtZzkDJrEQFcjsdbYH5n95qrzOVrwTu55BcPAAkH15JwqTaCitY5Ao2oB8ilffGIhSbN8EZZHQeftWIIst/7ay1Fe7eMA3Q+v+jAO7XELAF8J28YMGCWY1ApgElFJf8pPO/RWEYpyju0Qgd2BPGc+h5vQg+f08LtVSaFjsKUaTl4URPkFIZedsaMUDtOPYxJ5fxxzpgG5L63hDldBjJxqkg4wyehBe9FfRudzMG7AoAhMx4aqFC5F4sCWMkCVnwnEORb9c3YcE2+LyjPZ1ALNt4zSuLLDkrAsCOtX9D8ayRHA1SKCqGKIXPPdrLCSS0OVA33VVEh6i/NthZnCbmkgFFGi/FOIHEspUnfd3ZBaTUNl/wT4Vkpb/F6MCOadbzFNu0cqi2UeCvToqoeLCpiwtIansAjn0vGekQSw63VYuovzEPRfJPv/IDyedKxluMpc9PL+0TrAap2cABW+6WcOLMGYf6uoL8TbNJpX3kuyWm2Usk53cFWXsUURR1s5okGW8xlSWfXdE/RA0ST+KVYBgqD4DPrGSeDvHN3FAaj88fodj8XY1Axp7bpd22du7EAa1raEFmxqf9l7suJGcVlBk5zlxRlPPq0vbRDTWgxMAV24nrGsvmOn3HduEtrazabt5O3DHDTR73WTu2E3f0teq0Xdpt6+ZNGtimlgMD0nfatl2BmyLkAqbp1lyeDs03R7gKadsdKEGRVRcGO4I9Z92Dm3UfOGrcuLihMS1CPVj4D1PX/XwVHWLR0VYaAKbmsnQe6S3PpvhD9WHglCQLHfKpS+u6Dr9jQpHvdzdTQ3UiW//rHDpE8/Ufi1Gk8VRfJ6hu1Hb53UAnYcpX/lAd6Rb30CxD0e5mDFRPMvU2vZXK+PdQHVRfarsfq5SCfzEnGKo3vcYmmUUV72mlgupOtv7CFJ7KeG2gK1SHqlscLqPIWhoM1aW6j66bBcoOt2ahGjV0QRqP5jsj3KB6VdPm4IOldUD5nRbMbWUbgV8ujHdQFhszf24zOtcxCxK87AkjE8P8SwFwDdWCDS5FS4JttMzA++7K0mxHbgxdyC3Mqa+kmv2Ifbu3DnUSwXi1HT5lwfTPuoZopXFs2H/svLnxfes7/iux0aVomWIbLdIxSWnbkBtNF3wT3yrqi9Iy4dL8Nw9/Gl+DoXAbeT5bb+YsxvdJO7o6inOJPfyizGSxmEqTD8U6/+c2GZHnrHlERGPSeFeCz85yRFN5aZmeR8z5RFSTI8WIaNZXmRGx+Nva/7VN4vHKlxMnTZo0ee6mS+94rNodKKBZacbCo6NahUfFLr5Y8raTmE73EfVJW7/o12fMmpuViL/5/ve2RQ2CrHv0gVLkDntbRbzB3M8dwZrxGDDVVUTLR4gvE0JUAACMX/yjsuUu/5dwrhcV1dSPpdEENI2Kah6soXOoER4VGeYshUfdsNpaAda7SVRUQ3eGSh3UPCqytoN0rG/TqMh6LgK62mEhKgpVSFgNtYitBABwTchDw3w1AEzkcJ8jkFmg9z2OeLczC+SW8R5g7Vm3rgswbg0i3IW0oeFRkWHOJFVoWE0NySusrpuVtlZYAAPqoPCoyNq6fwNfOQ/9/lluXsaVpc1YIa+B31xLz8vLurWpjYrk3O/bxOy83Kc/fuYhqt6hpw/nOwEAU2/uhbS8vFcnJwaS1O023HyTl/twTw/nrZLUC5l5KSMv9/kvI70BIOD755caUjS9mLzFUTpwmFWFqS0BYCVa5jMUYsdWYHo3oGbAmhn/KKm32+e/vUzraaWL2XU3Oy/3yQ+jfIR8fk4+F0L66tnDwVZ1rrzYpItYdzMrL+fhwSGuHzzzss3FKGh5MkJjFfVbCSLyiMi/HqESCv2mAIVL99cQ0eQMZzkaCgCqAXfNiDyPWHWmlZDLjAweBbPn75Uie+RlEwqWH2sGoFrO8/NIzAKL6XOQAbxOI7+cBZiHuNdRKq9zyC9m6YSZRZwhYVsFYmV/APD7+h0Klx9rLhCYhKm1SSvREm/VOAf/GPmMR8GiXTU+dFy20XTn67gJO5N5fDeaAYC+BXzqoekfjVr7mMe0jgIhv3FYcmLuqP/9XID8EXeq1rfQfCAQACD2DRqvzhkybNkDDm83tXJYVInme+vjx219ypXnSaHPxsJjM0fN+r0Y8Xp9gBbpeC+QEHoH7wbIAiONeMUboFc55k9xlahtDqY3AkkWcsaHevPTY99EAHjvMWP52fmjEg7nIl5vLMEKtMQJvMW3Ofj2SMLoRX9WIPeT/wcOsWSJPwAwDQ6Z8FUkALhuWNVABQAQdhJxhxYAHDdz+GSoEwA49Ek0/OJPwXR+hMa9AQAA9ROxbLE3AECNb414yAUABuVjxbpgAGDq7tKjFIhJ/XUAoBv0AHG/I+j2oCmOMKaSnwXy1MvE180APH5FrDwzKdJbJUGcAU9pJbIgFiyuqQIA9TwDpox0AQB1p8s8/uwuC/KX26sBwHVsJpoXqz5wpiVaEPT7GXGzCgCcNSDcKRcTAwAg+i1m9QDh9vE+QFINeIHG3f4AAOx8C7fBAQT9jmFRTwDPE8htcgJBzwO8JOnRINw9HUt6AsTk43lPAa+TmFxfJs+H+K4LADQ6ZUA05VzdOrKZi5jpiFsYOoZhSIZ5WrBu/gILhoBw+D2sHC7P3YYgyIwqxNeNPnB3QoHYOQcfBwO153VMDQNgV/C4jiUIW7lpPk1D/TYfsPa7iq8bATGmANcx0PYtPqsLxDYZkqxgCJp1HG4EcD+ORX0FehXgOpVMbtexuDcAQFDC1UIOEY1pPw9zp5uDuBKoXSevm+FLuBcCgglm3OtAgCkG/EEjhz4eiK4/IDfuA7deRfK+iGUdBFxDIzt06NChZxK+aQ7gdhzLu4K4e/4TsxD/8ALByCy80KRWbcGaHZLxvAPEGfE7Fcn1uBTF7YEcU4Ln3ABGVuE+HQA47Ma3HUEmz4f4rosVsAExC357XsojlnxXg2o64haGKvA2vqxP2MkK6PaicRiQm2fggwA5XjYgwXgDfvdhM08AsmY3mmIAwDv+jyeZObm5uXlGzIoACLiOGQ0keLayABGfRAq1L8KSF8nE13q84wkJiFOBrNooRXodimbp+E8AQMBtzGgNAJEZeNhZrnqZ+Lq5AACwLmH9VieZ0bzTmSbOgKe0VAE3MVmIwyUg6H4S89tSBN/HtEZyXPGh6FKIv7AftngK1XY09QIIOqJHQ35GampqepVA4E1MDZPAqMf3KYhnAgU6FKGhmLKw5LK31WQKdq0UKbUoGqfg3UAASOC4FSqAJVg8AOQaZcSrPiRrNnSdHnM60rTLwYxGki0gnMK8VhSBdzG9iag1NBc8KTrk47EPG7+MIbmfQH1nYBea8e8hDWvXqlWzyS0Br7NY3FoCxMxR0clo2eJi1TIPL0Y1bERZSwXjLbiJITn9IEV+BEWnQrziBQB1kvF+HQh5hH/6yOV5GvkVLB2A20m0jKfxPo/8ElYmp6Oo70tRPwWfhgL4J9Jo9tI8qk0xohIPwwcN//QiRaRiShj438C3bUDQ9bKAagtyM6RIGayCT95jySQVAITcwZTGILJ7Ad72JTV8JoVlKomZbcbvWABgVqNhMkzi9BNAJs30KkxrCWKZrxG/ooFxlZjRTSZYwOPXLGlEOZ7UAbjfwJzWBL8bNGWxJO12xFkfuLI4Rsh5kwWPaKHWS7zlJlTroQAMLMJHTQg1WzkIve/PAGhmV2FGbwBQr+O5LU4EratVwDU0TFMJ6VaYpMB79QlN76P+E7BukYl/NryMd2vK5Do5B40L1QAQ1MWRwvFHNIyk8juJeDealadjNqa2JYScQ/MkAHD4BU0zGaFPS2jwhB+hWwa+a/OBw7SPdFaec4sxLwYg6B5mRgq4fm0U8voJ+dMRKgBgGvyUvsxT4L4HAIDbLgveagwALZKxbHmAgMeUXaEAwEyswLdxzlZu0/JREu73JiwAsM1PcPinj4BuDxbuL+EWMVJsITAe0XuLkfveFwBgypstrR2FHD8vwOeNqaDNY8Tkr0JYK8bzszf4QpzzTg7/bquyqvWdEa8FAwB8acYnXVkAUHe7j1SmXaFWqk43Eb/Vfdgs+fz7vR+36/jFyQqsWuwAoN3M44WYQLfgzvsreCGISkLu6eo+bbrNu2vB874CSe5WEHIa8ScfADa+APWXZ3ZvE/3l8TLLUjUAeO2zYOGRz9q1//xYmalAirIy7sHSnm1ilj3i8HU0CPctRBOmhYMUVyaNHz9+/ITpG87m8Fi1JxgAwPU8cpnfT+naulX7UQcLsGqumg66PESsur0hrmf3USsuFCHeqSkKGvyF/Mu1/dp0nX3DhOkxYF3jDuLLVf3aD9ucZimjqdSbr03v2mbAhlTEm43hw6ZfcJFHfWmpEbF4uQcAQJPriEX3/3pQxCfdIkDbqxbkKkrKLchfiwKAlhkkaPEQTSu1ANr4NERLeUmZCfkHPcE6eK8e0VBaakTTwe3IjRGVOC8bufKScg75x30YgudJRNyploQzCVoQ0fxgvDtYs33+NiKay4qLSg2Ipeu8QGzzHysQeWN5uYFHrDodrRIH4WfMyFWUlFmQfxSrEoDuLxG5ilI9z5/di5Z4wj9rC9BSVlLJIXe1NXzQF5lL+wevfFphNhtzTsTqQLDRrnQ9xxszv4vaZU4NF4Cg2XcLTRZz+eMVtQAAol5a7hBgYIYp/zMAYFvsfF5utpjKHm9sBMKuYy6/N1rMZYnTPWYaq0aK+Iu7Htj1t7dGi7ni+dYmDJBHV2BBJxA/wUCuyHn2+4SaDBD94397XWHmOIvh7amhjiDebdjPaVUWjjOXv/7lY0+wZuZVmeZSgO/UW4Umi7n86dqGDBBbHUjXm81VrzaETDdVjiFcC+l/+p3JYip9sKgGfNgbDOwXAKrafeLGDWnpAmRtk4FjvxjUzIGNGNjTXQjYgM6fTBwVU1MF1h49BnbWELTtYge2UgEAaOr0Gjnhs5411UDp1f6jCaN7BrEQFjsglM6x08BoHbi0GDZhTO+6GqDtkY/HHCWoHUvu3aaGDugdG/T5Yt78acNauIC0jo0HfDl/7he96+uAWH9AbH0aYPw6fzJxVK9aaqDVNY2N/2JAfQ2ExQ6oQbgeAG5tP54wsmcIC/85OmzCisHwL1Tov0h1qAMA9MjE897VKU3Pb+zZNi4Ji4ZBNYpqKcdVlBjQsMapOoXp8EuOwVT5fK4H/CttmGK84PdfBIBzy0Gf9g1Tw79Tly69W2v/m/h//ysTVlA4IKYEAACwNACdASq1AX4APikQhkIhoQwMvnwMAUJaW78WycmAAzwCz/8vi/jvwAvdM+Pxt/BvhxuERogubV7vqgcemC+pXeQDK79GDPrjdpL+RSAyurEEiI6rxRkjZXJwr6+T4+oFQyXyx4O86q+oVSQNw/cP04/7Y0b83VoJwTwy9kROwmsfNqziqLFuRu8rurt57Ca0iNc0UfH5ctmzhAD0fGa8Xd23bTkzvky8rbuVbZtqqm72vKLKJAmawJyujFUPclDfTmNcj94UKcINc7L+WDWb60I9MFCeD0U2CRZIZIJbiDOUiwMunYoLCw7kHNpEOLFqu4xr0y89AMW7dEXbXRH9ixKB3mPDAvc1Tk839G42x1KFQTqYG104X3DQnay0jIRNUxUVXM6O5BKnZeF8ODIdVRa1GFrsw0WvpKsV82tXFiSJ/ZY3I331ZgGGypF1gL7fDIikovy9LuqdTDQxfkCdb3z25innQkTz9ggvY46AQ/fdNJ8y75uBi2+B+7FN0dmij6HnBKHQ+hH/e/rm5CO78YA2pAZXYEre3LTgJtObUz2ikBt17oLKR4139NQAAP7+0Df9wcP//IZAABQ/Nzyh1Gn3Hu6TFq1hLLtzs/nYD5fWJZ2g6y9DZgnc+qs90Gw0OGitlGS8xxTnef1fTHPdsQJyywAEnCqqAbClekrvlvA5VNiniDbQBrB6PKZZeaeDUD85//K3RN6SfxfP//EIBRuzt93Oiz4KstW+G+AARJJRzP4dfAHjlPFafdrZfIIRYnQI6z+oqn9VsWW+QEzhLvrPnspQhCC6zUK3Yj1817mO3YXGh+3PC2CLcbJqkcqEN7/8XA8EaxoYCNJ7a7Zceh/3yQ8IdaFQ+s7oBErJepWw8WtMZ/8cavUyoVv3QL4+bhKWfPJJeuToAYIwzOan9xqwYn4V3AwRnbLynEx1QFouRCyOaU1j0OzQIJy0D6GBVbQ4dKIY+l3YZMG4pCszez1+T1xR/mNZ8N56kwXpCS9o9UD/9+PY7T+TfYF97N/ZHhWTs3Synlrr9CFkkXqixiWHrT3pOwRb4gAAY/dvzkqz/hDLX+xK3UeztDNRY9++Pwmx035+DLDx56fmCktMtr7Bq+V/+35vsh2Xlo66LQi4ZxDhzfZ4VNt4Wr/4qqFI+1vJ/BjGt+M+UoH/8xnxwW05VVCdwRH4DLgtdeB0Jstq/nN0I2GsMIlgSyHnp21k4JQGojFmKuZ4T7iksCDLkHJTs+NCG7B+YkBpYUp9yFGwB0f3AH3sGqDdvaC9Sc0di9bA1FS3/3+ZFbFk1+7D9fN20xvBlNzzvhuiHpnxYvn3Ole20gAesp5UoyX9HbaVN0M6hQOFq/kNuxnlsXM1wRB0lQszjpgjGbhNooBCmWG5JYjWYvKE5BkBPmnXnCvt2fadKywDNlhzdHgzWlJStj6nPBwSZOA1Ih5EGL+ErX9Pmb0kN3xPlTT5dNU2sT03vt+u49Gtyj4ks6DbmEYUBLgGo4E29aOPHQij+3HeNoGAgUFQT5nH655hQWt64fW3hqWOLjrV+ooXO0xJIV0IiRXDWJwoabsYAADuDcoRDq26AAAAAA==";

  const CURRENT_LANG =
    (typeof window !== "undefined" &&
      window.location.pathname.includes("/pt/"))
      ? "pt"
      : "en";

  const LABELS = {
    en: {
      company: "Company",
      aboutUs: "About us",
      vision: "Vision",
      history: "Corporate History",
      business: "Business",
      sustainability: "Sustainability",
      ethics: "Ethics Management",
      compliance: "Compliance",
      environmental: "Environmental Management",
      social: "Social Contributions",
      educational: "Educational Activities",
      newsroom: "Newsroom",
      contact: "Contact",
      overview: "Overview",
    },
    pt: {
      company: "Empresa",
      aboutUs: "Sobre nós",
      vision: "Visão",
      history: "Nossa história",
      business: "Negócios",
      sustainability: "Sustentabilidade",
      ethics: "Ética",
      compliance: "Conformidade",
      environmental: "Meio ambiente",
      social: "Contribuição social",
      educational: "Educação",
      newsroom: "Notícias",
      contact: "Contato",
      overview: "Visão Geral",
    },
  };
  const L = LABELS[CURRENT_LANG] || LABELS.en;

  const MENUS = {
    ventures: {
      title: L.company,
      items: [
        [L.aboutUs,  "pages/about-us.html"],
        [L.vision,    "pages/vision.html"],
        [L.history, "pages/history.html"],
      ],
    },
    services: {
      title: L.business,
      landing: "pages/business.html",
      items: [
        ["DS Plastic",          "brands/ds-plastic.html"],
        ["DS International",    "brands/ds-international.html"],
        ["Shine International", "brands/shine-international.html"],
        ["Lumora",              "brands/lumora.html"],
      ],
    },
    sustainability: {
      title: L.sustainability,
      landing: "pages/sustainability.html",
      items: null,
    },
    newsroom: {
      title: L.newsroom,
      landing: "press/list.html",
      items: null,
    },
    about: {
      title: L.contact,
      landing: "pages/contact.html",
      items: null,
    },
  };

  const HOMEPAGE = "DSMADE Homepage.html";

  function ptRewrite(href) {
    if (typeof window === "undefined") return href;
    if (!window.location.pathname.includes("/pt/")) return href;
    if (!href) return href;
    if (/^([a-z]+:)?\/\//i.test(href)) return href;
    if (href.startsWith("#")) return href;
    if (href === HOMEPAGE) return "pt/index.html";
    if (href.startsWith("pages/"))  return "pt/" + href.slice("pages/".length);
    if (href.startsWith("press/"))  return "pt/press/" + href.slice("press/".length);
    if (href.startsWith("brands/")) return "pt/brands/" + href.slice("brands/".length);
    return href;
  }

  function joinBase(base, href) {
    if (!href) return "#";
    const isOnPtPage = typeof window !== "undefined" &&
                        window.location.pathname.includes("/pt/");
    let rewritten = href;
    if (isOnPtPage) {
      if (href === HOMEPAGE) {
        rewritten = "pt/index.html";
      } else if (href.startsWith("pages/")) {
        if (base === "." || base === "") {
          rewritten = href.slice("pages/".length);
        } else {
          rewritten = "pt/" + href.slice("pages/".length);
        }
      } else if (base !== "." && base !== "") {
        if (href.startsWith("press/")) {
          rewritten = "pt/press/" + href.slice("press/".length);
        } else if (href.startsWith("brands/")) {
          rewritten = "pt/brands/" + href.slice("brands/".length);
        }
      }
    }

    if (rewritten.startsWith("#")) {
      if (base === "." || base === "") return rewritten;
      const home = isOnPtPage ? "pt/index.html" : HOMEPAGE;
      return `${base}/${home}${rewritten}`;
    }
    if (/^([a-z]+:)?\/\//i.test(rewritten)) return rewritten;
    if (base === "." || base === "") return rewritten;
    return `${base}/${rewritten}`;
  }
  function homeHref(base) {
    // base === "." means the page sits at the project root (same level as
    // DSMADE Homepage.html). On the actual homepage we just scroll to #top;
    // but sibling root pages like terms.html / privacy.html also use base="."
    // and must link to the homepage file explicitly, not to their own #top.
    if (base === "." || base === "") {
      if (typeof window !== "undefined") {
        const path = window.location.pathname;
        const lastSlash = path.lastIndexOf("/");
        const filename = lastSlash >= 0 ? path.substring(lastSlash + 1) : "";
        let decoded = "";
        try { decoded = decodeURIComponent(filename); } catch (_) { decoded = filename; }
        const isHome =
          decoded === "" ||
          decoded === "index.html" ||
          decoded.toLowerCase() === "dsmade homepage.html";
        if (!isHome) return HOMEPAGE;
      }
      return "#top";
    }
    const home = ptRewrite(HOMEPAGE);
    return `${base}/${home}`;
  }

  function LangToggle() {
    const [lang, setLang] = useState(() => {
      if (typeof window === "undefined") return "en";
      return window.location.pathname.includes("/pt/") ? "pt" : "en";
    });

    const counterpartHref = (targetLang) => {
      if (typeof window === "undefined") return "#";
      const path = window.location.pathname;
      const origin = window.location.origin;
      const HOMEPAGE_EN = "DSMADE%20Homepage.html"; // encoded once, reused
      const currentIsPT = path.includes("/pt/");

      const lastSlash = path.lastIndexOf("/");
      const filename = lastSlash >= 0 ? path.substring(lastSlash + 1) : "";
      let decoded = "";
      try { decoded = decodeURIComponent(filename); } catch (_) { decoded = filename; }

      if (targetLang === "pt") {
        if (decoded.toLowerCase() === "dsmade homepage.html") {
          return origin + path.substring(0, lastSlash + 1) + "pt/index.html";
        }
        if (path.includes("/pages/")) {
          return origin + path.replace("/pages/", "/pt/");
        }
        if (path.includes("/press/")) {
          if (decoded === "terms.html" || decoded === "privacy.html") {
            return origin + path.replace("/press/", "/pt/");
          }
          return origin + path.replace("/press/", "/pt/press/");
        }
        if (path.includes("/brands/")) {
          return origin + path.replace("/brands/", "/pt/brands/");
        }
        return origin + path.substring(0, lastSlash + 1) + "pt/index.html";
      } else {
        if (decoded === "index.html" || decoded === "") {
          const ptSegment = path.lastIndexOf("/pt/");
          if (ptSegment >= 0) {
            return origin + path.substring(0, ptSegment + 1) + HOMEPAGE_EN;
          }
          return origin + HOMEPAGE_EN;
        }
        if (path.includes("/pt/brands/")) {
          return origin + path.replace("/pt/brands/", "/brands/");
        }
        if (path.includes("/pt/press/")) {
          return origin + path.replace("/pt/press/", "/press/");
        }
        if (decoded === "terms.html" || decoded === "privacy.html") {
          return origin + path.replace("/pt/", "/press/");
        }
        return origin + path.replace("/pt/", "/pages/");
      }
    };

    const switchTo = (target) => (e) => {
      e.preventDefault();
      if (target === lang) return;
      try {
        localStorage.setItem("dsmade_lang", target);
      } catch (err) {  }
      try {
        document.cookie = "dsmade_lang=" + target + "; path=/; max-age=" + (60 * 60 * 24 * 365) + "; SameSite=Lax";
      } catch (err) {  }
      const href = counterpartHref(target);
      if (window.__ptNavigate) {
        window.__ptNavigate(href);
      } else {
        window.location.href = href;
      }
    };

    const [isNarrow, setIsNarrow] = useState(() => {
      if (typeof window === "undefined" || !window.matchMedia) return false;
      return window.matchMedia("(max-width: 1024px)").matches;
    });
    useEffect(() => {
      if (typeof window === "undefined" || !window.matchMedia) return;
      const mq = window.matchMedia("(max-width: 1024px)");
      const handler = (e) => setIsNarrow(e.matches);
      if (mq.addEventListener) mq.addEventListener("change", handler);
      else mq.addListener(handler);
      return () => {
        if (mq.removeEventListener) mq.removeEventListener("change", handler);
        else mq.removeListener(handler);
      };
    }, []);
    const inlineStyle = isNarrow
      ? { color: "#0a0a0a" }
      : undefined;
    return (
      <div className="nav-lang" role="group" aria-label="Language" style={inlineStyle}>
        <button
          type="button"
          className={`nav-lang__btn ${lang === "en" ? "is-active" : ""}`}
          onClick={switchTo("en")}
          aria-pressed={lang === "en"}
          aria-label="English"
          style={inlineStyle}
        >
          EN
        </button>
        <button
          type="button"
          className={`nav-lang__btn ${lang === "pt" ? "is-active" : ""}`}
          onClick={switchTo("pt")}
          aria-pressed={lang === "pt"}
          aria-label="Português"
          style={inlineStyle}
        >
          PT
        </button>
      </div>
    );
  }

  function SharedNav({ base = ".", navActive = null }) {
    const [openMenu, setOpenMenu] = useState(null);
    const [mobileOpen, setMobileOpen] = useState(false);
    const [mobileSub, setMobileSub] = useState(null);
    const hoverTimeout = useRef(null);

    const [pillTheme, setPillTheme] = useState("dark");
    const isMobileNav =
      typeof window !== "undefined" &&
      window.matchMedia &&
      window.matchMedia("(max-width: 900px)").matches;
    useEffect(() => {
      const isNarrowNow =
        typeof window !== "undefined" &&
        window.matchMedia &&
        window.matchMedia("(max-width: 1024px)").matches;
      if (isNarrowNow || isMobileNav) return; // skip auto-theme on mobile + tablet
      const NAV_PROBE_Y = 90;  // pixels down from top — under the pill

      const resolveBg = (start) => {
        let el = start;
        while (el && el !== document.documentElement) {
          const bg = getComputedStyle(el).backgroundColor;
          if (bg && bg !== "transparent" && !/rgba?\([^)]*,\s*0\s*\)/.test(bg)) {
            return bg;
          }
          el = el.parentElement;
        }
        return getComputedStyle(document.body).backgroundColor || "rgb(255,255,255)";
      };

      const luminance = (rgb) => {
        const m = rgb.match(/(\d+(?:\.\d+)?)/g);
        if (!m || m.length < 3) return 255;
        const [r, g, b] = m.map(Number);
        return 0.2126 * r + 0.7152 * g + 0.0722 * b;
      };

      const check = () => {
        const stack = document.elementsFromPoint
          ? document.elementsFromPoint(window.innerWidth / 2, NAV_PROBE_Y)
          : [document.elementFromPoint(window.innerWidth / 2, NAV_PROBE_Y)];
        for (const hit of stack) {
          if (!hit || hit.closest && hit.closest(".nav-wrap, .mega-backdrop, #shared-nav")) continue;
          let el = hit;
          while (el && el !== document.body) {
            const t = el.getAttribute && el.getAttribute("data-nav-theme");
            if (t === "light" || t === "dark") {
              setPillTheme(t);
              return;
            }
            el = el.parentElement;
          }
          const bg = resolveBg(hit);
          setPillTheme(luminance(bg) > 160 ? "light" : "dark");
          return;
        }
        setPillTheme("dark");
      };
      let ticking = false;
      const onScroll = () => {
        if (ticking) return;
        ticking = true;
        requestAnimationFrame(() => { check(); ticking = false; });
      };
      check();
      window.addEventListener("scroll", onScroll, { passive: true });
      window.addEventListener("resize", onScroll);
      return () => {
        window.removeEventListener("scroll", onScroll);
        window.removeEventListener("resize", onScroll);
      };
    }, []);

    const [dropdownStyle, setDropdownStyle] = useState(() => {
      if (typeof window !== "undefined" && window.HERO_TWEAK_DEFAULTS) {
        return window.HERO_TWEAK_DEFAULTS.navDropdownStyle || "minimal";
      }
      return "minimal";
    });
    useEffect(() => {
      const handler = (e) => {
        if (e.detail && "navDropdownStyle" in e.detail) {
          setDropdownStyle(e.detail.navDropdownStyle);
        }
      };
      window.addEventListener("tweakchange", handler);
      return () => window.removeEventListener("tweakchange", handler);
    }, []);

    useEffect(() => {
      if (mobileOpen) {
        const prev = document.body.style.overflow;
        document.body.style.overflow = "hidden";
        return () => { document.body.style.overflow = prev; };
      }
    }, [mobileOpen]);

    const closeMobile = () => { setMobileOpen(false); setMobileSub(null); };

    const hoveredItemRef = useRef(null);  // DOM node of last-entered trigger <li>
    const openMenuRef    = useRef(null);  // mirror of openMenu for the mousemove closure

    useEffect(() => { openMenuRef.current = openMenu; }, [openMenu]);

    const openWith = (key, el) => {
      clearTimeout(hoverTimeout.current);
      hoveredItemRef.current = el || null;
      setOpenMenu((cur) => (cur === key ? cur : key));
    };
    const scheduleClose = () => {
      clearTimeout(hoverTimeout.current);
      hoverTimeout.current = setTimeout(() => {
        setOpenMenu(null);
        hoveredItemRef.current = null;
      }, 60);
    };
    const keepOpen = () => clearTimeout(hoverTimeout.current);

    useEffect(() => {
      if (!openMenu) return undefined;
      const BRIDGE = 18;  // px of tolerance to cover trigger↔panel gap

      const inRect = (x, y, rect, pad = 0) => (
        rect &&
        x >= rect.left   - pad &&
        x <= rect.right  + pad &&
        y >= rect.top    - pad &&
        y <= rect.bottom + pad
      );

      const onMove = (e) => {
        const key = openMenuRef.current;
        if (!key) return;
        const item = hoveredItemRef.current;
        const dd = item ? item.querySelector(".nav-dd") : null;
        const itemRect = item ? item.getBoundingClientRect() : null;
        const ddRect   = dd   ? dd.getBoundingClientRect()   : null;

        const x = e.clientX;
        const y = e.clientY;

        const insideItem = inRect(x, y, itemRect, BRIDGE);
        const insideDd   = inRect(x, y, ddRect,   BRIDGE);
        if (insideItem || insideDd) {
          keepOpen();
        } else {
          const overOtherTrigger = document
            .elementFromPoint(x, y)
            ?.closest(".nav-item");
          if (!overOtherTrigger) scheduleClose();
        }
      };

      document.addEventListener("mousemove", onMove);
      return () => document.removeEventListener("mousemove", onMove);
    }, [openMenu]);


    return (
      <>
        <header className={`nav-wrap nav-wrap--${pillTheme}`}>
          <div className={`nav-pill ${openMenu ? "nav-open" : ""}`}>
            <a className="nav-logo" href={homeHref(base)} aria-label="DS Made home">
              <img
                src={DSMADE_LOGO_DATA_URI}
                alt="DS Made"
                className="nav-logo-img"
                width="146"
                height="42"
                decoding="sync"
              />
            </a>

            <ul className={`nav-center nav-dropdown--${dropdownStyle}`}>
              {Object.entries(MENUS).map(([key, m]) => {
                const isOpen = openMenu === key;
                const isActive = navActive === key;
                const hasDropdown = Array.isArray(m.items) && m.items.length > 0;
                return (
                  <li
                    key={key}
                    className={`nav-item ${isOpen ? "nav-item--open" : ""} ${isActive ? "nav-item--active" : ""}`}
                    onMouseEnter={hasDropdown
                      ? (e) => openWith(key, e.currentTarget)
                      : () => setOpenMenu(null)}
                  >
                    <a
                      href={joinBase(base, m.landing || (hasDropdown ? m.items[0][1] : "#"))}
                      aria-haspopup={hasDropdown ? "true" : undefined}
                      aria-expanded={hasDropdown ? isOpen : undefined}
                      aria-current={isActive ? "page" : undefined}
                    >
                      {m.title}
                    </a>
                    {hasDropdown && (
                      <div
                        className={`nav-dd ${isOpen ? "is-open" : ""}`}
                        role="menu"
                      >
                        <ul className="nav-dd-list">
                          {m.items.map(([label, href], i) => (
                            <li key={i} className="nav-dd-item">
                              <a href={joinBase(base, href)} role="menuitem">
                                <span>{label}</span>
                                <span className="nav-dd-arrow" aria-hidden="true">→</span>
                              </a>
                            </li>
                          ))}
                        </ul>
                      </div>
                    )}
                  </li>
                );
              })}

            </ul>

            <LangToggle />

            <button
              type="button"
              className={`nav-hamburger ${mobileOpen ? "is-open" : ""}`}
              onClick={() => setMobileOpen(v => !v)}
              aria-label={mobileOpen ? "Close menu" : "Open menu"}
              aria-expanded={mobileOpen}
            >
              <span /><span /><span />
            </button>
          </div>
        </header>

        <div
          className={`mobile-menu ${mobileOpen ? "is-open" : ""}`}
          aria-hidden={!mobileOpen}
        >
          <nav className="mobile-menu-inner">
            <ul className="mobile-menu-list">
              {Object.entries(MENUS).map(([key, m]) => {
                const isOpen = mobileSub === key;
                const hasDropdown = Array.isArray(m.items) && m.items.length > 0;
                if (!hasDropdown) {
                  const dest = joinBase(base, m.landing || "#");
                  const isSamePage = (() => {
                    try {
                      const url = new URL(dest, window.location.href);
                      return url.pathname === window.location.pathname;
                    } catch (_) { return false; }
                  })();
                  return (
                    <li key={key} className="mobile-menu-item">
                      <a
                        className="mobile-menu-trigger mobile-menu-trigger--link"
                        href={dest}
                        onClick={(e) => {
                          e.preventDefault();
                          closeMobile();
                          if (isSamePage) {
                            window.scrollTo({ top: 0, behavior: "smooth" });
                            return;
                          }
                          setTimeout(() => {
                            if (window.__ptNavigate) window.__ptNavigate(dest);
                            else window.location.href = dest;
                          }, 60);
                        }}
                      >
                        <span>{m.title}</span>
                      </a>
                    </li>
                  );
                }
                return (
                  <li key={key} className={`mobile-menu-item ${isOpen ? "is-expanded" : ""}`}>
                    <button
                      type="button"
                      className="mobile-menu-trigger"
                      onClick={() => {
                        if (isOpen && m.landing) {
                          closeMobile();
                          const dest = joinBase(base, m.landing);
                          if (window.__ptNavigate) window.__ptNavigate(dest);
                          else window.location.href = dest;
                          return;
                        }
                        setMobileSub(isOpen ? null : key);
                      }}
                      aria-expanded={isOpen}
                    >
                      <span>{m.title}</span>
                      <span className="mobile-menu-chev" aria-hidden="true">{isOpen ? "−" : "+"}</span>
                    </button>
                    <ul className="mobile-menu-sub" hidden={!isOpen}>
                      {(key === "services" || key === "sustainability") && m.landing && (() => {
                        const overviewDest = joinBase(base, m.landing);
                        const isSamePage = (() => {
                          try {
                            const url = new URL(overviewDest, window.location.href);
                            return url.pathname === window.location.pathname;
                          } catch (_) { return false; }
                        })();
                        return (
                          <li>
                            <a
                              href={overviewDest}
                              onClick={(e) => {
                                e.preventDefault();
                                closeMobile();
                                if (isSamePage) {
                                  window.scrollTo({ top: 0, behavior: "smooth" });
                                  return;
                                }
                                setTimeout(() => {
                                  if (window.__ptNavigate) window.__ptNavigate(overviewDest);
                                  else window.location.href = overviewDest;
                                }, 60);
                              }}
                            >
                              {L.overview}
                            </a>
                          </li>
                        );
                      })()}
                      {m.items.map(([label, href], i) => {
                        const dest = joinBase(base, href);
                        const isSamePage = (() => {
                          try {
                            const url = new URL(dest, window.location.href);
                            return url.pathname === window.location.pathname;
                          } catch (_) { return false; }
                        })();
                        return (
                          <li key={i}>
                            <a
                              href={dest}
                              onClick={(e) => {
                                e.preventDefault();
                                closeMobile();
                                if (isSamePage) {
                                  window.scrollTo({ top: 0, behavior: "smooth" });
                                  return;
                                }
                                setTimeout(() => {
                                  if (window.__ptNavigate) window.__ptNavigate(dest);
                                  else window.location.href = dest;
                                }, 60);
                              }}
                            >
                              {label}
                            </a>
                          </li>
                        );
                      })}
                    </ul>
                  </li>
                );
              })}

            </ul>
          </nav>
        </div>

        <div
          className={`mega-backdrop ${openMenu ? "on" : ""}`}
          onMouseEnter={scheduleClose}
        />
      </>
    );
  }

  function mount() {
    const el = document.getElementById("shared-nav");
    if (!el) return;
    const base = el.getAttribute("data-nav-base") || ".";
    const navActive = el.getAttribute("data-nav-active") || null;
    const root = ReactDOM.createRoot(el);
    root.render(<SharedNav base={base} navActive={navActive} />);
  }

  window.SharedNav = SharedNav;
  window.SharedNavMount = mount;
  window.DSMADE_LOGO_DATA_URI = DSMADE_LOGO_DATA_URI;

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", mount);
  } else {
    mount();
  }
})();