import * as React from "react";
import { Html, Head, Body, Container, Section, Text, Row, Column, Img } from "@react-email/components";

export interface PeriodData {
  label: string;
  visitors: number;
  visits: number;
  views: number;
  bounceRate: number;
  visitDuration: string;
  topPages: { url: string; views: number }[];
  topReferrers: { url: string; visitors: number }[];
  chartData: { label: string; value: number }[];
}

export interface AnalyticsTemplateProps {
  greeting: string;
  domain: string;
  periods: PeriodData[];
}

const logoBase64 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAc4AAADFCAYAAADdVhLHAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAgAElEQVR4nO2dd9gU1dXAf/u+Lx2kCYqKiAoiYCxYIhq70RB7icYW9LP3Ho2999iIicYSNZbE3ksMdo3G9sWKoiAgRopKEaTu98d593tn7p3Znd2dmTu7e37Pcx9l35m5Z+q599xTciiKUg05YFlgFaAd0NTafgT+0/pfRVHqiJxrARSlxugDjAI2A4a0tl4h2y4C3gZeA24EPk1DQEVRFEVxSQ5YCzgdUYBLgXwFbR5wHDIbVRRFUZS6ognYBrgemEg0xbgUmAHMLLHdc0BLameiKIqiKAnSAzgBGE9x5bcAUYCnAOsDfYFmz3E6AP2BXwIPICZb7/7/k/ypKIqiKEpyrIWsQf5AuLL8CLgG+AXQpczjb4c4CRWONQXoFIfgiqIoipIWLcAewAuEK8vZiLIcFEN/hxjHPj6GYyqKoihK4vQFzgAmE64wxyOOPMvE2G9H/Ouft8Z4bEWpJVYDtkCjOhQl8wwD7kDWJ8MU5j+BnfCvV8bJ3zx9PZhQH4qSVVqAP9H2DlzjVhxFUcIYCtxL8TCSxxAnn6S50tPn2BT6U5Ss0Al4GP97NxOddSpKplgTuJtsKMwC53j6fjfFfhXFJT2Al7Dfv/tdCqUoShtrAHdRXGE+DmzgQLbbPDJ84qB/RUmbFZDUk+Y7+C2wukO5FEUBBgN3AksIV5gvABs7kg/gZfzKW1HqmcHABOz3cDGSYERRFEcMQpx+iinMd5BYStfrKV/TJtPljmVRlCQZAUwj+H081qFcitLQ9AKuQ0avYQrzM2AvspEftit+2UY7lUZRkmMbYA7B7+TNuB/AKkrD0QIcTfGcsF8BhyJlvrLCevhl3NCtOIqSCL8CFhL8Xr6KpKNUFCVFtgU+IFxhfgucCnR2JWARfodf1m5uxVGU2DmKcKe8ycBy7kRTlMZjdeARwhXmPOAixO09q7xDm7yTHMuiKHGSA86n+Pu5njPpFKXBWAZxogkz/eSBW4B+rgSMyKr4Zf6LU2kUJT6akQIJYe9nHjHfKoqSMM1I6a1vCH8Z36R21glPwS/7nm7FUZRY6IiUzSumNC9wJp2iNBDrAP8m/EWcBhxENjxlo/IGbfIvArq7FUdRqqY78DzFlebD1NZ7qig1RyfgEsLDSxYD15LtdcwgBuA/D81RqwSxMnAMsLNrQSKwPJIyspjS/AB1gFOURNkc+JTwl/B5YLgz6arjCvzncpJbcZQMsi0wA3k+lgJ7uxWnKKsBn1Ncac5E1vUVRUmAHsBNhL+AkxHHgloNmO6JHQg+xKlESpZoQmrDmiEcb7gUqgjrAv+luNJcDGzpSkBFqXd2BaYS/PItAC4EujiTLh7OwH9e71C7gwAlXnoi1XmCnv8jHMoVxhbAbIorzTxwpCP5FKWu6UdxT7yx1EfVhM7YuToPdSqRkhXWBb4g+Pm/0KFcYexG8QLwhXYjOjBUlFjJAQcD3xP80s1q/Xu9vHhH4T+/OaizhAIHAvMJfgeeAtq7Ey2QwyheQKHQXiJ7sitKTdOHcLNUHskKtKIz6eKnHTAR/zn+yaVAinM6Unw9/32ytTSRA86mtMLMI896HydSKkqdsjXha5nTqG3nnzD2xT7XdZ1KpLhkFeAtwhXPLKQ8XlZoBsYQ7Phj/vYDsLYbMRWl/miHxGWGJX2+A+jtTLrkyGFXvM+ql6SSPNtTvJJPHnGUywodgL9hy/gt9nOdB3Z3I6ai1B+r4s+W421fIh+TemUU9jnv41QixQVNwDmEDxwL7TJXAgbQCXgOW8bJwFUBv5/rREpFqUP2Idxt/Xrq30HmJfznPA4xfSmNQ2/E0afU2uBYpL5sVjgcW8aPkVml6VX7AJpOT1GqphtS9SPoAzEe2NSZZOmxCfa57+9UIiVtRmA7hgW1qWSvPuWl+GX8F5KwY7Lx+/8CXR3JqCh1wwjgM4I/EDfROC/Z49gDhizNKJRkORj4kdJKcwmSZjJrLI+YamcjMZndkVmxV/bpiLOToigV0oTkXg2qlzkD2MWdaKmzOfY1ONCpREpadELqwoYpSfO3s9yIGZnCYM/Ms7wI2MyVUIpSDywPPEPwx+Ipsl9cOk6asMMNJiCexUp9syqSStF8BxYDd2EPKp+jNta8f4V9Toc5lUhRapztCS4yPR/JmFNvcZml2A/7WhzgVCIlDX4JfId9779u/ZtZReQbZMCZdYYDc/HLfoNTiRSlhulAsFt6HqnPN9SdaM7oBEzCfy1eQz0O65lm4HyC34MXEWvL343flwLbuBC2THpgl/h7EbWeKEpFDAbexv5QLEW88Ro1T+Xp2NdjfacSKUmyLOFLFFciCiYorOMCF8KWSRPwKH65JwN9XQqlKLVIDhiNbbrJIzOtLHoHpkVf7JjVPzuVSEmSDbGtC3kkgf8erdusje1Z+xK14V19FvbSywinEik1STOSeLk3koR8NWAY8nIMRWZhA4GVkLWL3ogLdwcXwiZAd+BugkfX9yFmnUbmBvzX5Hs02XW9sivBpbU+BNZo3aYrkvDC9C6vhQIGo7CzHGkMcgi1MAqKg+7AAES59UKKyPYK+P/Cv7sh1Qyqset/i5g5zDaptX2JPJxZZQSiHAcavy8CTgT+QLblT5q1sL0Mz0bi3JT6ogW4Dns54l7gEMQakwP+iAymvRwAfJW0gFWyGuIB7HXquxq40404ShrkkAwcGwJ7Aicjqd0eRTJchNV/dN2+Rh7M35C9Eem+BNcMnAhs4E6szJADnsd/bT6gcQaijUYOcfgq3OtFwLH4Fc1o7Pfl8lSlrIwu2Mnb/4k+y3VFH2BL4Bgks8WrSEke10owjvYRMqrdCVgmrgtWJi2Ee80+gszGFRmgmddnS6cSKUnTD/g9khTALBE3FCmv5X0eXif7nqg5ZKbplXsC4gClFCGr8XYtSCzR+q3/HY6YxpLy7voBKf0zo/W/M5EF/0VIILP3v97/X4Ksa3hNvqbpt5KXZyGS9/Uy4IvKTqlseiOmJ9NlfgnwW+Sj0cim2QKdgU+A/p7f7kMCxpXGozNSCWi457fvEOX6pROJonMccI3n3/OBjRFLnVID9EIWpy9EzARBHpzltqXI2sK/gPsRm/2JwF7I7OAniIm0Y4LnlUNMIYORWcrFwNMEJw8IaosRc+6wBGUEuRZfBPQ/GRiZcN+1xnn4r9E8ZP1caUxuwn5vdnYqUTQ2xy5MvbdTiZSi5IA1kYTItyJlaypVjt8haw+3IrOivZEKFQPItpkkB6yAZBc5EynRY1YgMNt9JOOxuQe2mSmPpM1Tk42fgdihBmc7lUhxyV7Y7801RffIBitiD96zVBdUaSWHOO9chlSMKFdBTkKCjq9Fgou3QByCsmpqroQccl73EJw0PY/MoONKstwMXBTQxxLgd2jmmyAexF4P6uRUIsUVA7H9K/5N9hOBdEDWX71yP0Nt5M9tCJqBnyEjsKCg4bA2E3gCmYltjTtHGZf0AU4huK7fEiRbTTWKrQd2Caw84um7RRXHrWe2xb5e2zuVSHFFO2QJyPsszELCOrLOH/HLPR5ZKlMc0owouxuQj3ApJbkEWYj+ExKWMZj6mkVWS1fgNoKv3SNUZo5eEztIO4+sLWetsG5WaId4PXuvl8a4NS6XYL8/ezqVKBoH4Zd5Ln6nJiVluiOONxMorSy/RMIufo4kGlBKsx/BDlN/pryBxk7YKeLyiNOSmmrCOR7/9ZqOrv82KttgZ9iphcoh62Ovz+/uVKIGZhCSbGAOxZXl24gTxdrojLJSBiNB9ua1PT3Cvk3YeSjziFOQhlEUpy/2WtavnUqkuKIvtiXtPZL1zI+DPtjLZRc6lahBGQI8jD3yKrSFyILzkUgeVyUeVgKmYl/vYm7k3bCdWvLI+unaCcpaL9yM/7o9jg7+GpEm4EnsgecQl0JFoAUpnm0+w2phSpFeiGerGf9TaK8iqaca0aEnLTbAToc3i2DT4eoEz1LHhmyv+NkA/+BwDv7EB1mmL2KlyLqXZ61wIvZ7dJBTiaJxGX6Zx6HFGVKjHZLm7lvsh+d7ZM1SF5nT41fY98GMH9uO4Or015LtGNes0AK8hf/aHeVUotLkgE2RhB9LEJlfQLLbKJUzAjtE7B6yb3kwU0PORpwDlRQYgHi+mh/gKciIS19KN1yDbR5fDXmZT6Xtw1loC4ADnUham5yA//q9QnZjW9sjJaCCCo3n0RCjaugGfIb/ek5AHCKzzFBsh8KdnErUQKyHvRi+EHHH7upQLkVMraaH7MPISNj8cE4FNnIjZk2yCv5sSgvI5lpWX8Tpq1jo10dIHmKlMu7Afz0XAz91KlFpumOHnJ3jVKIGYhT2iOUZ2oq2Ku45l/APZqG9jlR2UKKRw3YCOdOpRDY/AW7BDi/wti+QJN7qb1A5+2Nf1yhe7C5pQgbQ5oA6q9aSuuJX+B2AfgB2I/s2/UZjGSTTUtjH82YkxZYSHTP/6H/IhoNNM2JqG0vxgdKLwC6o12S1DMIOs3uO7CugM7AtDjp4SoF++J1KlgA7OpVIKYaZQiuPlDw7Ch3olEsv/MmvFyOOIS7phhRNLpbjeSFiUlzPkYz1Rntsx7DpSGGGLLM9fi/w7xHPaiVmgqp8n47fXfl64LF0xFHK5DjgsIDfdwceTVmWeuBy/DVfL0UcblywKuLJfhDhM4aZSLrKG5B1bCU6TUjJv67I4MTbdsUeML2NpAUNIl/G73lEuXnbktb/LkQyq41HqiUtiXYqgDwvd9M2WM4D+wCflnEMJSJBitNMXP1SGoIoZdGEVKI/MeTvc1KUpV7YAvgfz78/BC5IWYYcUv3meKSmY5jF4CPEq/qvSExvo5BDBhG9kMG9qfCClGBY60J5FpntWltaLEISyV+HrFEuLrJtZyTJSU/Pb2cga/VKCuSwHYJ2cCqRYtIR+BvF17mOdCZdbdIRvxfiYiS3Z5r9/wZ4l+L39Skkx3Otm+BbEK/wwYiH6igkH/OxiMPbdcig4ElEeYxDTKVhiVfqvU0gPJQk13qtvNs/RO0/IzXHe/hvwruoo0FW6IVYAMwX61nj39e5ErBGOR//9bs4pX6HITPHYg5e8xBzbBYD15uQWc7qSLjTL4EDkBjYi5D193uR5/MtxNP3e9wrolpsi4B1Au7BMcZ2E9DMQIkTNCo5Fsku4+VSJF6smLlASZYByIzD/ICejlRJmeH57TmkfqRSmmHI4LCQTekjxMlmQUL9dUG81g8BNi6y3dfAGOBGRLEmTQuiBJdF4j57R/j/XtTWoHopEvsc1DZAilN7GYOY7BdGaHnkGrbzNPPfQb8V/t0eKeu3MvKurxUg/0FImcECmwLP07bktgjYBCmorSRIkOJsB7yDnULvNSSu6YukhVIs1kXMVst7fluE5AUuOATMoq1M22TkBVSK0wS8DIxs/fdSRJm9mUBf6yHKch+Khwe8DVwN3Id8kCulCamKsWJrW4HiijDLs5TFyPMdpvSCWtD28xAFZzIMue7e0K3HEfNo0PZJ0oQMlg42fv8Wead/aP33CojM3m/Ccai1ySkrAR9jmwvmIB5nSnr8HDue7HtgS2O79z1/n4EShSPwX9dLE+hjC+ANipvhlgAPIDOIKGtTHZH0ipshJc5ORpTt35EB7pfYuVVdt5nAJ8hA5SHgJuR6n46ETu2POERtiXi0DkJmYJ0iXpNKaY+9tjwNd0XdB2Jfu2/wp01sQa6jd5sH0HXNTNCH4Bd+PuL6rCTPaGRm6b3+k5ARsslj+D9SSnFWw+8I9zHx1lVcFfmYFVMms4Hf02YizCGzv7URh5lDgPOQRBZPIckYiq2HptUWA/9FBmvPIwr7D4hjz1GIKXpLxGq1HMHe+1nhUuzzcxm33hf/c/kQdvzoxfjl/YJsWwwajhYk5MH0tB3gUqgGIEdw4en3CA/Cvt6znSrO4rQgMzPvjC+u/KNdkFJOCyiufL5G0ubdi8wevqB4Cr0k2wKkaMO7iCPPXYjT0hnAoYiVaVMk3WYvsp89JyqbYdcUvsmpRMIWwEnIEo3Jdtj3Lk0PcKUM+gO3I2s/RziWpd5pQZx9zI/bMxRfGzvJs+23CctY6/wO/7W9IqbjdsM2oblocxHvyjeBJ4C/tJ7jqUiFnB0QL9hVW2VuRBNfd6SYu/e6fUa2i1esgJiRvTIf7VQiRckAXZEPnfkhvJXSNTSP9myvijOc9fCbv8ch62hxUCq+tpr2DRLS8QgysLoYCfvYD5mFrIcMcOM6l3rndvzXN+tVT5oRs7hX5vtpzEGPovw/y2Hnx8wj5YCivBznefaZlJCMtU4nJNykcJ2W0uZRWy3LU3mA/hwk7OFpxFR4FpIQYSskRjLOtVcF9sC+B+e6FCgC3vc7D3xO9muCKkqirIGscXlfjEWUV3j6Bs++miYxGLP491UxHrsnxdcoP0VChy4GDkeSBayFOHXorCE9VsB2sHqD0hYdl2yNfy12Ae6LDyiKU0Ziv8hzkDCUcrjfs/8dcQpYJ2yDrcg6x9zHz5AYvBcQT9NLkRJffYvso6RHE+Ir4H0OfkBCX7LK8ogHs1fmo5xKpCiO2Q0J7/G+FFMJTq1Vihc9xzg/LgHrhJ6I16jXRLupU4kUF5jp6fKI13BWaUaygHnl/TtqoVAamGOwXeE/pPKMP96EFQfFIWAdcTf+63y1W3EUBwzFHqQ+RraV0Jn45R2PrmsqDUqhJJg58n0diZGrFK+518wq1Mj8Gv91/oz4TbRKtmmPpKfzPgcuswNFYXMkvti7rqmFypWGpAXbDT6PmGOqiR9bxXOsJbTlrG10VgK+wx9ysJFTiRQXXIT9zrnMDlSKPsBX+OXV+HmlIWmHrE+YL/DDVB9ucKDneO9Weax6oQl7fehspxIpLtgE/8wtjzhwZZUmJCzJK+/fyLZJWVESoQOiIE2leQfx5PG803PMMTEcrx44Dv+1fpVs50xV4mcZ7DCvrGcHOg1b3mIZwxSlLumEJOg2leYY4sn5mcNv1tk7hmPWOkPxx1TORgsTNCK34n/nsm6q3xR/Eo0fCc5Xqyh1TVdgLLbSvJD4TC9rGMfuH9Nxa5X2SD1Z7zX5jVOJFBfshv3eneNUouL0RuroeuU93KlEiuKA7sAr2C/vKTH3460p+WHMx65FTEeQJOPemoEh1E+1kHqhH1KT1vsc/Ivsmupz+MsC5pGqObquqTQUvZDKFN4XYSnJBFs/6Onj1ASOX0uYjiBTqC7Epxhb05ZU4RM0vi4r5IAn8b97Wc8O5K1slEeyWum6ptJQ9EHqZnpfhEUks/a4LLCQtjCUFRPoo1bohiS+9g5UtkqgnxzyoTM9NbdNoK9yaELM9j0dy+GaI7GtPFnODvRT/NV6fqSyzGGKUrP0Q8yl3pd2PpLQOwlO8PTzTEJ91ApmDdO4amx66YydhSgPfI+7GWczkry+kACjkQPl1wDm4b83j5Jdk2d3pG5qrSh5RYmd/ojruPclmINkAEmCHP4SWfsm1E8tsBP+6/4uEgIUJwOxLQmFdkjMfUWlHbIW5pVlLo3pQdwO+Df+a/EN2U6wfwd+ee8mu0peUWJnIPbIcSawQYJ9jsSvoBs1jVxfJH2ad4Y/NOY+tsWuYFNoL+LGOSgoNng2UtS6EbkA+97s4FSi4uyFX9ZxaMYvpYEYjL/yRh6pcDIs4X69MWq3JtxXVskBj+C/9kfHfPxTsNczC20BYh5Mm87Y5bG+ROp7NiIjse/Rn5xKVJz++FNBLkTXNZUGYhh2rbzJwOoJ97sM4ilY6HOLhPvLKv+D/9o/SXymri7YZlCznRVTX+XQETs2+E2kbmMjYjqFFbxSu7gUqghN2PfvNKcSKUqKrANMJ32lCXCyp8+JNGYc4WrIel7hOkwnPuWxKvAfiivND5BkC2nSDDxgyPE22U4hlzQ3478ei4ENnUpUHO+7m0divZudSqQoKbEhflNLmkqzG36FfUEKfWaNFiT3rPf6x1XtYjvgW4orzaXAxjH1F5UcYn40n7kVUpYjS+yCfW/OcSpRcdahLXys4Mi1mlOJFCUlNkWcMFwoTYDfGX0PTqnfLGFmB4pjPSsH/BZ7rWwx9sfZRSL9cw0Z5gBrO5AjKyyPbfHJcnagTtihaq68sRUlVbbGv7aYttLsgX+me1dK/WaJUdjeiNWuZ3UluOTbf7Hrp04h/awu3rSKeUS5JxUbXAvkgCfwX5O5pPceVsJ1+OV9DA09URqAX+CvuJG20gQ4z9P3QhovXm9l/GEhC4ERVR5zdeB9bKX5OrA+ktzA+/vOVfZXLnsipmGvDCekLEPWOBz7fmV59rY9flln0LjOXEoDsSP+tYmC0kxzfaI3fhPxtSn2nQXaA2/gvwfHVnnM7bHXqvNIFqIOwP3G7/dX2V+5bIWEvHhluI3GnqkMxrb6PEJ2r8mywNf45d3NqUSKkgLbYH+80laaAFd6+p+N5MRtJExT14NU/rHMAadjz+QW0pbybGfjb9+TriPOuthr6f9CwlEalXbYg6csZwfKAQ/hl/d2pxIpSgpsSvCaZtpKcy38Tipnpty/a/bEfw8mUHky827YM8k8MisY2brNMthJLQ6rsL9KucXofxKN7UELtoNUnmyv9Zpxxl+iVXSUOmcEMAv3SrMJf+jF12Q3uDsJBuOfeS0CNqrwWIOwPRvzwGv4ldIY4+8vkX6s7HHAF4jz07WIY1gjsxG2h3OWswMNwh9nvJTGTVSiNAjDsXOTulCaAAcbcqQ983FJZ+xEBCdWeKxR2I4+hY+vNyH8xvhNuAuANSvsU4mHrtgFFLKcHSjIpHyVU4kUJWEGYS/mu1KaffAH448ju3FqSeDNx5unshJROeAMgtczTU/M9khGIO9251QouxIfN+K/J1nPDuT1fs8jz1Qjr00rdc7KyDpEFpQmwF8MWRrJG+9A7PWhXmUeoxt2iro8koQ/KPPPmcZ2HxF/eTKlPHbEvn9nV3nM3khIzx1IKbJvgf8FjqnyuCDPlTeJxiLE0UtR6pJ+2OagKbhTmlsbsjxOdl3u4+YnSHkw78en3BR3g/HXKy20V5B7bbIGtvf0JhXIrsRHX8Rr1ntPXqdyq8sg4AbsYtfemWw1A6WghPMXVXE8Rck0vbFNdNOBIY7k6YvfXDwNWM6RLGmzDLJ+5b0Xp5R5jB2wHbvyyEczKDF7E1JX07vtHyuQXYmPHGKa996TSrID5ZAB0EPY5nqzfVilzObSwjjURKvUKd2Bt/A/8N/jzrzShF1rMa4E5lknB9yH/9yfILpHaxNS6sv8QC5AQgPCOMTY/is0bMA15j3JI45y5dAHSW1XTFl626+rkHe3gONtVsXxFCWzdAFexv+w/4BbE52ZxP1Gh7KkzbHYpvJlI+67DPAw9sdrCsXDV/phe9vuWoHsSnysjj+UI0/52YG2RNayzefhYcTca/7+dJnH99ITuy5vlkNlFKViOgDPYs9MtnUo08/wOxZk2eU+bjbCn9ZwMZKAIgprAB9jfwxfpnROUDO5+0PlCl4lKyCDpT+Tfh7cLNKMxNV670k52YFagAuxrQ6fIvmm98Z+TsaVcfwg/mwcbypqsVDqkHbYs5PFSH0/VyyLP1tN1l3u46Q3khnHez9Oi7jvTgSvZ46hdKFp02PzB8SzOg3WAa7An9xhekp9R2UVJBxnLFL3NY1B3G+x72XU7EA9kWQV5v7nIwPlIdi1VidT3T3fPKA/l98RRUmEZuBu7Id9P4cyNSFes155qnW5rxWagCfxn/tTlF7XbEI+6uZ9/BEJZSnFMshHsxJlXQ09ESelIEeVF2Pqowsy6KrEQ7QZSRbxeICMo2OSL4zh2J7NUZcqlsdOlrEIOKD17+siTnbev0+jOgfAjshs1XvM+6o4nqJkkhy2WSWP1Dt0ycn45anG5b7WMNd0v6J0AvvuyJqXeR+nABtE7NdMqzeO0jPUasghH3Hz4+0976AwmXI5A1EYeWQmHrV8VTskjnFCiHx5ZB0wKdoB7xj9TUBCPEoxEBhv7DsXqX4DwVmj3kFm1JXSCZmFe4/5HVouTKkzcsDV2B+DU10KBfyUtg9d4YV3FTuaNlviX9NdQmlPxCHAJ9j38UWih+yY9RHzwM/LlL0chhNsQvTOkqMq/DBySDpC89gDI+w7iuBrarZnq5SxGOcG9LdFhP2GIoMOcya5AbASwQn9b0MUX7kMQMKUgtbT88BBFRxTUTLN+dgPuuvg5J7ARPwyFQubqCf6YXsilqr6sgt2qa08UnKsXcR++wT0m5R5rSuyjukdGAW1farspzt2GE8eeI7inqJDEbN4kExvIonmvb/9rUo5w9gKO4H7NRH264dtbv8c2B+4Cdszdxpixi/Xe7Yj8myGJU7IA/+s4LiKkmmCHA6ux+2DnsN2UHrIsUxp0YKdcKBYvGYTwQOfH4HflNFvUFD9D0D/ss+gdD+7Y3/Ug1q1g7e1sDNeFWbvw0P2aUYUgams8ohJ84jWbcwlhLhDLNoDl+C3OuQRs3nnEvt2ROqTmvKbxRnyyMDlSirzdN0ROxuQ2eZTfmIGRck0R2E/6H8h/TJRJmbM4tdEj1msdS7Bf+5fEJ6HtgfBQeyTgPXL7DcoqD5uh6DVCZ/Fme1hqnsO98auF1toY0L2WR6ZiQbtcwd+c7eZ5zdOh7XhwLsBMiwE1iuxb65V1lLXdwHwVyT9YrkMQgZz5jFfQwZs3t/KzWylKJnmAOwH/37cO95sgT9mMY/EmDUCO2CP1tcJ2XYodvq9PPAC5cfdrYQdtvIJ8TkEdUS8fM2Palj7EvHsrYQWZAYVduw3CZ6xbYud+zXf+ts2AdubxbwPCNimXJqQtdiw63RShGOcErJvoU1EBkSVxGZ2Ay7G9u6dgXgVH2b8/g7uvyeKEhvbYZuinsZ9tYvB2LFk5zuVKD1WwT73sI/xrsAc7I/iNURfzyyQI3jWGleyi+2xvTq9yjlo5hKkqKKwKv7C5kFKw/TsbEFMwkEhMPPdoYcAABF6SURBVC/jL+JdoFfAtptXKHOBAcDzRWR/ltIz8KHYg8488B6ynrwNYmYul3aIdSrI6/kWJNa4I/7BxBKk4L2i1AXrYn90X6X0uknSLIu9HvUg7s3GadAJOyfwDQHbNWO7+RdmpvtX2PevA44Xh0PQGoTnQp2JhHd0QRIbeP9WSQL5HOLYEjSYKLRZwDBjv/5IRZig7a8kfBDys4DtB1Qgd0H2AwhOVFFo0ykdjtOE7Z38KtUVQMgheWaDLBsfItehwAnG36+vol9FyRQrY+eo/IDyaznGTQfsl/49xPOy3skha03ec38d20zag+DZ2ZeUXvcKow+24lpEdSE/PYHfE+wtuxC4qnUbgL2Mv8+ndJxq0DkE1RU1z8mcxe5IsLPMbMR5qRimSXIxlZkklyU4JMRsUQoZHGTss5TqZnybYKf3yyPes6fhfz674X+O/os8r4pS8/TALg82CVnfckkOuBO/XN9Q+Qi+1jDjC6dh35NhBHuHjqV8ReMlyIkkaKYbhRbE43RGwDEL1oNBxj5jjW3KmW3mkFl2WH/e5o0hbI8o9qDt3ieas8x1xn4Ty5AbZHa4D/7yeGEtzJHJSx/sQcBtZcpUYA3kXgXJcjfBiRHOMrbbt8K+FSVTdMBeP5kJrOlSqFbMl24hjVMkeVvsJAdbGtvsjh1zl0c+/tU4XqyJva43j+A1vVJsgyidoI/tOwQH6w82tltKdA/Pgdjl5WYQPLi4wNjvzRA57yB6vlkzbOeFiPuBrIX+O6D/GcB5+IuUfxVRpouNY82l/Pu4HDJoCgrDeZHwJBTd8JuZXyI7YWNNiHVjIGKV2RrYAynBdgQSrrU7kuBjJFIkflXEcaoT2TkPxQFBpsB5wMYuhWolaH1ttEuBUmQ1bGegkz1/b8b+IBbuXRwjenOWnwcuK/MYg7CVSKFNRe5lmDOKeW6fRuivF5KG0BtmsgjJerUrdszjX2n7+O2EpH0z5VyAmF7L+UiaM+V/RNhnDYJLu+WB25FZozkYiJLwoxP2rPt30U+FrkgoTdD68CfIdSt2bUYb+2xdRt/l0Iw4dq2HeJ8fipznFcDNiMn7n8hA7QvkXpcqzl2qLUEGBV8h8bNvIYOkx4F7kRSlVyODs98iDlQHIOvCBWW8FqK4+6DKuKYwP1CLkQfPNSOx3e6vcipRenTFnqHdR9tL1ZPgeMeJxFNEfHlsJTOL6GvdPZB7FeTBOQ+ZOZVanzaVyBtFth2GJBgws9M8gaQZXA7b7Pk8YmlpB1weIGce+cBWks7PnLV+VWTbvsAfCJ7JfUabotnf+NuHRLMoHGjsN4NoKfM6IgOGIHPxNOBIonlov4D/HparGHLIWu9PEA/sg5AEFDcgz8ibiLdu0PWrxbYYSaQxBRmYFJTxY8A9tCnj85GUp0ciz8YuSBap9RHLTD/EGqGKOAFMJ4Y82ZjRrYrtlPIUlbnK1xpN2M4sH9OWsHs4weEbzxFfEojRAcc/K8J+Q4BrsZOCF9qdRM809Lax7wvIhzqHrG/viozkXzC2W4rMLgoKrxmZaXi3mYwMPlbELsZeaHdQeazoRwHH82bH6YvMPO4heCY3BXk323u2N9cod4ogRw47UcIrJfZZHhnYBIWWzEdCc6Jel4HG/mE1U/sgFWn2Bk5HUv49h2QdMmNCtZXXliCz60mID8trSGjhfUio0NXI/T4ZmaXvjQxQhuA+/DCT/BJ7VpFGaahS9MROBP0xjVPc9kz85z6HtrXmPQlez7yCeAPJ7zWOv4hwJ6MWZB3IVE7e9gzle/YGJRvIE57tZwHywTXXQc8L2PaXyLprkHKYRfX5b18POO50xHkmaP2y0KYBxyOzPS/mUsprRJtJdA/o472QfUcgg4UgK8FSxFxcbnrFsz3H+IC20LHOSHL86wmP4U2rLUQGJVMRC8NHiDn3dWRQ9goy6/sAsQBMRu7lHOpnlhvWliBVdv6BOOadhAx+hmI/o5Gp5Snw+siCvjc281raYq1c0QGpL7mV57fvkNHoeCcSpcuOyJqglz2RPLwXYg9s5iPrXPfELMdY/E5IT9JWELkDsh43HDEL70O4o8lbiMz/rECG+xBHjVLMRl7qaxGzopctsROI34OYwM7FfodfQ2rLTihfXB+3Eq2uaYHvEHPxGGRg5GUdZNboZUuiORx1Q66PyRhkHW4Q4sswkvAyYWOR2YgpQylyiKIphC6dh1gifoE4QMU5m1mEXMOw9m2RvxXM+5WQQ6wgnT2tSwL/zqKlLY9YRt5Alj3G0lZftS4ZiD2avwf3iQRasGPWFpOcM0HWWBO7esnlyLqi6RSSRz7uaycki+nQ8yXwd2Q0HmWU/Rai9KoZXA4kPLXcVGQwcTzFLRFmlqDF2Cbgwsj6XOKbtY+gdFWXPDJrOY/iMY3mWu8zZcjRNYIMYe0lZLBU6T0cUEXf3jYfme09jFhWDkO+CWshYVn1vo6XQ0z2PZAB6iDEerMNEud8BGKluhqxCjyOzJbHIevZplUxyTYVsY7sQPkZyjJNL+zagf/AvS27CRmlmzfiKJdCpUgP7OwrzyMzuqDqEs8iacyS4siAPqO0ZxBrQVwfsj6IAh6DePTuRvS44k0iyjwR2DQmeb3siawrmf3NRky2e1DaQWpEwP7lJC3IIe931Pv3DTJYW6OMPsLYtIx+84ip/UVEOR6KzKr7435AX+sUQm5WBzZCrFpHIGvVdyDfmfFEzxMdtf0XcRBcK/lTTJaO2I4QbxGtSnyShBXJvor6HkkWaEZMod5zn4KknAtaz7uc5BNjNyEOBFFekIWIIghLNu+KGykt+z0km8GmA3JddkUUwSqUd+/MlISVpDrsiYRjBK3nLkHMqfe3yhjnLGHDgP7M5+YVxMFra9yn9Gx0cogT2nrIOubRyGD1bsT6MIFoVpSgNpYaLR3XhBTS9Z7MeCqrgBA3XgeCQruZxlCaYIcDLcGut5lHlOheKcrVgnh+FtYtCm0Wouh/B2xGtNAGF4QlXMgjs8x9yfYztj72czGkymP2Qe7ZnoiZP8l714TfLL4QWUO+GEnsETWZhJIdWpAllG2AwxHrwEOIKb2USXge4lyU5XfO4grsaXQ1+Ubj4jjsC/x3srkYngS/ItqI7XMkjs0FOST8YDASL1kL9yaHxDma1/ELxJmqFtZfzHSHt7oVpyKakETvQ6iNa65UTjdEoZ4L/Ifwb1klcdFOOBq/4LOJJ0i+WkZjX9Snia/GY9ZZm/DQCm97BvdJ9muRfsBdSBKEc5BSebXy8e6JP7XeIhonN7NS++QQb+2gAgVnOJQrMjvjn0IvIhteqrthT+1foXHMN8si5sJSSvMSamOGp8TLMfifg7vdiqMoZTEEKXRgRgnMRZKOZJqNsFOQHVR0j3TYFjsbyLs0TpmhFuxcpmabi6xDKY1HDnt9diOnEilKcZoQJ7hTsTN5eS2duzqSLzKrYaesu9SpRMLG2ObJcWTDSSktrqG40hyPJBdQGpON8T8PxXL0KoorVkbC1u4lPMtXob1ODXjV9saOCXwA9/FQa2NXn5iE3IBG4TcUf8Ceoq2Is9KY3Ib/mdDalUrW2IHgHMtmexwJw8q8J2177FCGf+M+RmoQ9qhkGtHrK9YDG1I8yPgidD2z0emBf3llDlXkBFWUhDBzJ3vbfKRSUbWhU6mRw86+MxnxLnRJfyRlm1eu78mGZ29aLI+Ulgpbz9zdnWhKhjAzNj3gVhxFCcR0XluIZDM7hvBiEJnlt/hPZg7J5TKNSl/sFH/zkHRojUIH7JyphfYZEhupKCDB5N7nY7RTaRQlmCZk2elSJBa9ZitX7Yb/hVuC+2LUPZHyPF65FiDxdI1CDil1FaQ0n6BxPImV0uSQxCSF52MpNTh6V5RaYQR22MlxTiWSmeZ72LbvRlKaIFlqgpTmBbh31lKyxarYnoiKoiTAithrZzfg1otpBexC1PPIRuKFNCnUIzTN55mPZVKcsBf+Z+V2t+IoSn3SBbu24DMkXzmjGAOwK7rPRRJLNxrN+EuCjUMqpytKEAfgf28u8/ytN5Kq7C5qMFG2omSFJuBB/C/ah7hdpB2EXX9wFlJdvlHZAClddRq6nqkUx5xxTkIyfd2InTRkP0cyKkpNcwn+F+kbpNafK4YBXxsyfYfELiqKUppdKB1QXmgXOpJRUWqW0fhfoh+RNF2uWBeYYcg0EymIqihKNJZD4uFKKc3/UMPu/4rigs2wX640ixub/BRJZuCVZxruakcqSi1zIuEK811gb9z6MChKzbEaMpPzvkxnOZRnc+x8hV+jDjCKUg2bAGOQ5Nm3A4cgqSnVIUhRyqQLdqmh+3H3Mm2Hv9BuHphCY+WeVRRFUTJKDhl9epXUeNytc+yMXU/zS2RGrCiKoijOOQk7bZ0rx5u9gcWGPJ/j1qNXURRFUf6frZC8s15FdYQjWQ5E8md6ZXkPqfyhKIqiKM5ZGZiOX1Hdi5t1zaMMOfLAC6hbvKIoipIROgJv4VdU44BuKcuRA87DVpoPogV2FUVRlIwQVJB6PunHRrYLkCOPlMlqTlkWRVEURQnlCGxldXDKMnQDng6Q4wI0nkxRFEXJECOxMwPdSbrKqh92AeqlwDEpyqAoiqIoJekHTMWvsD4GuqYowxBgoiHDQiQMRVEURVEyQ3vgFfwKax4wPEUZNsFO6TcX2DZFGRRFURQlEmOw1xNHp9j/7kiVFW//04H1U5RBURRFUSKxP7bSvC3F/o/FTmwwEc07qyiKomSQ/sAs/ErrA6BzCn03AVdgK+33gRVS6F9RFEVRyiKHHfIxF1gzhb47APdgK82XgZ4p9K8oiqIoZXMwtuLaN4V+eyDp8sy+HwU6pdC/oiiKopTNysBs/IrrlhT67Y+Ygk2leStaWV5RFEXJKDngWfyKaxKwTML9rg18ha00L0WzASmKoigZ5hBs5bVdwn3uhKyfmv2ekHC/iqIoilIVA7BNtDcn2F8OOBU73GQRsF+C/SqKoihK1eSAf+BXYFNIrqZlByQe1Jxl/gD8IqE+FUVRFCU2DsNWYqMS6qsPElpi9jcT+GlCfSqKoihKbKwCzCGd7EDDgQnYSnMy6cSIKoqiKEpV5IDn8CuxqSSTaGAU9hpqHvgQCUVRFEVRlMxzOLYi2zHmPnLA8cCSgL6eIPlQF0VRFEWJhVWwTbT3x9xHe+AmbIWZB64EmmPuT1EURVES43HsGpsrx3j83sDz2ApzIXBQjP0oiqIoSuJsjq3Qzozx+EOAzwL6mA5sGmM/iqIoipI4OeBf+BXa50DHmI6/LfA9ttJ8HzEPK4qiKEpNsRvJOQQdBSwOOP6jQLeY+lAURVGU1GgBxmF7tlabSL0ZuA5bYRYStasTkKIoilKTHIpfqS0ABlV5zK7AY9gKcwFwQJXHVhRFURRndEaSG3iV28VVHnNF4F1spfkNMLLKYyuKoiiKU07Cr9y+QmaLlbIOkgjeVJrvIpVWFEVRFKVmaQEm4ldwx1ZxvB0IrqF5A/F55yqKoiiKM0xP2hlAlwqPdQx2+rzZwF7Vi6koiqIo2eAF/Iru7AqO0QxcS7BptloHI0VRFEXJDOvgV3RzkXR45RDmOaumWUVRFKXuuBW/svt9mfuvCLxjHGMOsHeMMiqKoihKJugD/Ig/wfpKZey/Ebbn7HuoaVZRFEWpU07Dr/T+GnG/jsDl2E5Af0RNs4qiKEod8yZ+xTcqwj4bAx+jpllFURSlweiHX/l9ixSWDqMTUlx6KWqaVRRFURqQUfgV4C1Fth2Jnfx9KWKuVdOsoiiK0hAchF8R7mH8vQnJAPQPY7tCfU4tOK0oiqI0DC3YsZo5YAXEU3YjJJtQkAn2j8CpSLynoiiKojQMm2ObXoPqZRbaFODnTiRVFEVRlAzQDviO4soyj4Sc/AXo6URKRVEURckQm2PX4Cy074ArgIHOpFMURVGUjJDz/H9fJKn7WkhFlM+QpO9/BX5IXTJFURRFySD/B23ghNNK1rDHAAAAAElFTkSuQmCC";

export const AnalyticsTemplate = ({
  greeting,
  domain,
  periods,
}: AnalyticsTemplateProps) => {
  const preview = `Ihr Website-Report für ${domain}`;

  return (
    <Html>
      <Head />
      <Body style={main}>
        <Container style={container}>
          <Section style={headerSection}>
            <Img src={logoBase64} height="28" alt="Mintel" style={logoImg} />
            <Text style={domainText}>{domain}</Text>
          </Section>

          <Section style={introSection}>
            <Text style={introText}>{greeting}</Text>
            <Text style={introText}>
              hier ist Ihr aktueller Website-Report.
            </Text>
          </Section>

          {periods.map((period, i) => (
            <Section key={i} style={periodSection}>
              <Text style={periodLabel}>{period.label}</Text>

              <table width="100%" border={0} cellPadding="0" cellSpacing="0" style={cardsTable}>
                <tbody>
                  <tr>
                    <td width="32%" style={cardTd} valign="top">
                      <div style={card}>
                        <Text style={cardTitle}>Besucher</Text>
                        <Text style={cardValue}>{period.visitors.toLocaleString("de-DE")}</Text>
                        <Text style={cardExplanation}>Personen, die Ihre Website besucht haben.</Text>
                      </div>
                    </td>
                    <td width="2%" />
                    <td width="32%" style={cardTd} valign="top">
                      <div style={card}>
                        <Text style={cardTitle}>Besuche</Text>
                        <Text style={cardValue}>{period.visits.toLocaleString("de-DE")}</Text>
                        <Text style={cardExplanation}>Gesamtzahl aller Sitzungen auf Ihrer Seite.</Text>
                      </div>
                    </td>
                    <td width="2%" />
                    <td width="32%" style={cardTd} valign="top">
                      <div style={card}>
                        <Text style={cardTitle}>Seitenaufrufe</Text>
                        <Text style={cardValue}>{period.views.toLocaleString("de-DE")}</Text>
                        <Text style={cardExplanation}>Wie viele einzelne Unterseiten angesehen wurden.</Text>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td width="32%" style={cardTd} valign="top">
                      <div style={card}>
                        <Text style={cardTitle}>Absprungrate</Text>
                        <Text style={cardValue}>{period.bounceRate}%</Text>
                        <Text style={cardExplanation}>Anteil der Besucher, die nach einer Seite gehen.</Text>
                        {period.bounceRate > 65 ? (
                          <Text style={badgeNeutral}>Effizient: Besucher finden Infos (z.B. Kontakt) sofort.</Text>
                        ) : (
                          <Text style={badgePositive}>Stark: Besucher klicken sich durch mehrere Seiten.</Text>
                        )}
                      </div>
                    </td>
                    <td width="2%" />
                    <td width="32%" style={cardTd} valign="top">
                      <div style={card}>
                        <Text style={cardTitle}>Verweildauer</Text>
                        <Text style={cardValue}>{period.visitDuration}</Text>
                        <Text style={cardExplanation}>Durchschnittliche Zeit auf der Website.</Text>
                        {period.visitDuration.includes("m") || parseInt(period.visitDuration) > 45 ? (
                          <Text style={badgePositive}>Intensiv: Ihre Inhalte werden aufmerksam gelesen.</Text>
                        ) : (
                          <Text style={badgeNeutral}>Zielgerichtet: Schnelle Informationsaufnahme.</Text>
                        )}
                      </div>
                    </td>
                    <td width="2%" />
                    <td width="32%" style={cardTd} valign="top">
                    </td>
                  </tr>
                </tbody>
              </table>

              {period.chartData && period.chartData.length > 0 && (
                <div style={chartContainer}>
                  <Text style={chartTitle}>Seitenaufrufe</Text>
                  <table width="100%" border={0} cellPadding="0" cellSpacing="0" style={{ height: "100px" }}>
                    <tbody>
                      <tr>
                        {period.chartData.map((d, i) => {
                          const maxValue = Math.max(...period.chartData.map(cd => cd.value), 1);
                          const h = Math.round((d.value / maxValue) * 100);
                          return (
                            <td key={i} valign="bottom" align="center" style={{ width: `${100 / period.chartData.length}%`, padding: "0 1px" }}>
                              <div style={{ height: `${h}px`, backgroundColor: "#111111", width: "100%", borderRadius: "2px 2px 0 0" }} />
                            </td>
                          );
                        })}
                      </tr>
                    </tbody>
                  </table>
                </div>
              )}

              <table width="100%" border={0} cellPadding="0" cellSpacing="0" style={tablesContainer}>
                <tbody>
                  <tr>
                    <td width="48%" valign="top">
                      <div style={listContainer}>
                        <Text style={listTitle}>Seiten</Text>
                        <Text style={listSubtitle}>Die beliebtesten Unterseiten sortiert nach Aufrufen.</Text>
                        {period.topPages.map((p, idx) => (
                          <Row key={idx} style={listRow}>
                            <Column><Text style={listText}>{p.url}</Text></Column>
                            <Column align="right"><Text style={listTextBold}>{p.views.toLocaleString("de-DE")}</Text></Column>
                          </Row>
                        ))}
                      </div>
                    </td>
                    <td width="4%" />
                    <td width="48%" valign="top">
                      <div style={listContainer}>
                        <Text style={listTitle}>Quellen</Text>
                        <Text style={listSubtitle}>Woher Ihre Besucher auf die Website kommen.</Text>
                        {period.topReferrers.map((r, idx) => (
                          <Row key={idx} style={listRow}>
                            <Column><Text style={listText}>{r.url || "Direktaufruf"}</Text></Column>
                            <Column align="right"><Text style={listTextBold}>{r.visitors.toLocaleString("de-DE")}</Text></Column>
                          </Row>
                        ))}
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
              <hr style={divider} />
            </Section>
          ))}

        </Container>
      </Body>
    </Html>
  );
};

export default AnalyticsTemplate;

const main = {
  backgroundColor: "#fafafa",
  color: "#111111",
  fontFamily: '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif',
  WebkitFontSmoothing: "antialiased" as const,
};

const container = {
  margin: "0 auto",
  padding: "40px 20px 80px",
  maxWidth: "600px",
};

const headerSection = {
  marginBottom: "32px",
};

const logoImg = {
  marginBottom: "16px",
};

const domainText = {
  fontSize: "24px",
  fontWeight: "bold",
  margin: "0",
  letterSpacing: "-0.02em",
};

const introSection = {
  marginBottom: "32px",
};

const introText = {
  fontSize: "15px",
  lineHeight: "24px",
  color: "#444444",
  margin: "0",
};

const periodSection = {
  marginBottom: "40px",
};

const periodLabel = {
  fontSize: "14px",
  fontWeight: "bold",
  textTransform: "uppercase" as const,
  color: "#111111",
  marginBottom: "16px",
  letterSpacing: "0.05em",
};

const cardsTable = {
  marginBottom: "24px",
};

const cardTd = {
  paddingBottom: "16px",
};

const card = {
  backgroundColor: "#ffffff",
  border: "1px solid #e5e7eb",
  borderRadius: "8px",
  padding: "16px",
};

const cardTitle = {
  fontSize: "12px",
  fontWeight: "bold",
  color: "#111111",
  margin: "0 0 8px 0",
};

const cardValue = {
  fontSize: "24px",
  fontWeight: "900",
  color: "#111111",
  margin: "0",
  letterSpacing: "-0.02em",
};

const cardExplanation = {
  fontSize: "11px",
  lineHeight: "1.4",
  color: "#6b7280",
  margin: "8px 0 0 0",
};

const chartContainer = {
  backgroundColor: "#ffffff",
  border: "1px solid #e5e7eb",
  borderRadius: "8px",
  padding: "16px",
  marginBottom: "24px",
};

const chartTitle = {
  fontSize: "14px",
  fontWeight: "bold",
  color: "#111111",
  margin: "0 0 16px 0",
};

const tablesContainer = {
  marginBottom: "16px",
};

const listContainer = {
  backgroundColor: "#ffffff",
  border: "1px solid #e5e7eb",
  borderRadius: "8px",
  padding: "16px",
};

const listTitle = {
  fontSize: "16px",
  fontWeight: "bold",
  color: "#111111",
  margin: "0",
};

const listSubtitle = {
  fontSize: "12px",
  color: "#6b7280",
  margin: "4px 0 16px 0",
};

const listRow = {
  marginBottom: "12px",
};

const listText = {
  fontSize: "13px",
  color: "#444444",
  margin: "0",
  wordBreak: "break-all" as const,
};

const listTextBold = {
  fontSize: "13px",
  fontWeight: "bold",
  color: "#111111",
  margin: "0",
};

const divider = {
  borderTop: "1px solid #e5e7eb",
  borderBottom: "none",
  borderLeft: "none",
  borderRight: "none",
  margin: "32px 0 0 0",
};

const badgePositive = {
  fontSize: "11px",
  fontWeight: "bold",
  color: "#16a34a",
  margin: "4px 0 0 0",
};

const badgeNeutral = {
  fontSize: "11px",
  fontWeight: "bold",
  color: "#6b7280",
  margin: "4px 0 0 0",
};
