'use strict';

var React = require('react');
var index$1 = require('./index-07c3d435.js');
var dayjs = require('dayjs');
require('./index-6ce6e395.js');
require('./index-1e5e2223.js');
var core = require('@mantine/core');
require('@mantine/dates');
require('./index-da3b86cd.js');
require('./index-b0ce6f8f.js');
require('./index-024542ed.js');
var index$2 = require('./index-a31ed3e1.js');
require('./index-3d563586.js');
require('./index-59a9827e.js');
require('./index.styles-691de58f.js');
require('./translationsContext-78113889.js');
require('@mantine/hooks');
var utils = require('./utils-b92a8b1c.js');
require('./index-eba09ec0.js');
var index = require('./index-af9c3c64.js');
var styled = require('@emotion/styled');
var miscTheme = require('./miscTheme.js');
var constantsDomainLocales = require('./constantsDomainLocales.js');
var index$4 = require('./index-a02b9dd2.js');
var index$3 = require('./index-e16b8fc3.js');

function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefault(React);
var dayjs__default = /*#__PURE__*/_interopDefault(dayjs);
var styled__default = /*#__PURE__*/_interopDefault(styled);

const StyledFooter$1 = styled__default["default"].footer `
  background-color: #1b3250;

  .inner {
    padding: 64px 24px 98px 24px;
    margin: 0 auto;
  }
  .newsletter {
    padding: 24px 0;
  }
  .footer-logo {
    max-width: 132px;
    max-height: 32px;
    &[data-is-sehat='true'] {
      max-width: 250px;
    }
    img {
      object-fit: contain;
    }
  }

  .social {
    margin-top: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    > .icons {
      display: flex;
      gap: 16px;
    }
  }

  hr {
    height: 1px;
    border: none;
    margin: 16px 0 16px 0;
    background: ${miscTheme.theme.colors.neutral500};
    opacity: 0.1;
    outline: none;
  }
  .footer-menu-column {
    min-width: 168px;
  }
  .footer-menu-title {
    margin-bottom: 16px;
  }
  .footer-menu-link {
    display: block;
  }
  .footer-menu-link-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .copyright {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 8px;
    .copyright-content {
      color: ${miscTheme.theme.colors.neutral500};
      font-size: 12px;
    }

    .copyright-image-wrapper {
      flex-shrink: 0;
      flex-wrap: wrap;
      display: flex;
      gap: 16px;
      justify-content: flex-end;
      .copyright-image {
        align-self: flex-start;

        img {
          height: 32px;
        }
      }
    }
  }
  .otherSites {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 19px 0;
    border-top: 1px solid ${miscTheme.theme.colors.neutral100}1a;
    border-bottom: 1px solid ${miscTheme.theme.colors.neutral100}1a;
    .flags {
      display: flex;
      gap: 12px;
    }
  }

  .signupButton {
    display: none;
    border: none;
    margin-top: 16px;
    outline: none;
    text-transform: uppercase;
  }
  ${utils.MediaQueries.mbDown} {
    .inner {
      padding: 64px 0;
    }
    .social {
      flex-direction: column;
      gap: 10px;
      align-items: start;
    }
    hr {
      margin-top: 0px;
    }
    .copyright {
      align-items: center;
      text-align: center;
    }
    .copyright-image-wrapper {
      justify-content: center;
      max-width: unset;
    }
    .otherSites {
      flex-direction: column;
      padding: 24px 0;
      .linkTitle {
        text-align: center;
      }
      .flags {
        flex-wrap: wrap;
        justify-content: center;
      }
    }
    .footer-menu-title {
      margin-bottom: 12px;
    }
    .footer-menu {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      > .footer-menu-column {
        padding: 24px 0;
      }
      > .footer-menu-column:first-child {
        grid-column-start: 1;
        grid-column-end: 3;
        border-top: 1px solid ${miscTheme.theme.colors.neutral100}1a;
        border-bottom: 1px solid ${miscTheme.theme.colors.neutral100}1a;
        > .footer-menu-link-wrapper {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
        }
      }
    }
    .otherSites {
      margin-bottom: 24px;
    }
  }
  ${utils.MediaQueries.mbUp} {
    .newsletter > p {
      max-width: 360px;
    }
    .hrMobile {
      display: none;
    }
    .copyright {
      gap: 24px;
      flex-direction: row-reverse;
      align-items: center;
      justify-content: space-between;
    }
    .otherSites {
      margin-bottom: 40px;
    }
    .columns {
      display: flex;
      flex-direction: row;
      width: 100%;
      gap: 16px;
      margin-bottom: 40px;
      > div:nth-child(1) {
        display: flex;
        flex-direction: column;
        flex: 1;
      }
      > div:nth-child(2) {
        display: flex;
        flex-direction: row;
        gap: 24px;
      }
    }
  }
`;
const StyledFlag = styled__default["default"].img `
  width: 32px;
  height: 32px;

  ${utils.MediaQueries.mbDown} {
    width: 24px;
    height: 24px;
  }

  .country-flag {
    width: 100%;
    height: 100%;
  }
`;

const Flag = ({ url, dataEventCategory, dataEventAction, dataEventLabel, }) => {
    return (React__default["default"].createElement(StyledFlag, { loading: "lazy", className: "country-flag", src: url, alt: "Country Flag", "data-event-category": dataEventCategory, "data-event-action": dataEventAction, "data-content-label": dataEventLabel }));
};
const FooterMenuColumn = ({ title, items, locale, index: index$1, }) => {
    const { isMobile } = index.useScreenSize();
    return (React__default["default"].createElement("div", { className: "footer-menu-column" },
        title ? (React__default["default"].createElement(index$2.Text, { size: isMobile ? 's4' : 's3', className: "footer-menu-title", weight: isMobile ? 'regular' : 'semiBold', color: "neutral.6" }, title)) : null,
        React__default["default"].createElement("div", { className: "footer-menu-link-wrapper" }, items === null || items === void 0 ? void 0 : items.map((informationLink, idx) => (React__default["default"].createElement(index$2.Text, { size: isMobile ? 'p3' : 'p4', as: "a", "data-event-category": "Footer", "data-event-action": informationLink.title, "data-event-label": `https://${constantsDomainLocales.domainLocales[locale]}${informationLink.url}`, className: "footer-menu-link", 
            // @ts-ignore
            href: informationLink.url, key: idx, color: "#fff", weight: isMobile && index$1 === 0 ? 'semiBold' : 'regular' }, informationLink.title))))));
};
const DiscoverFooter = ({ className, footerInfo, locale }) => {
    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
    const { isMobile } = index.useScreenSize();
    const footerMenu = footerInfo === null || footerInfo === void 0 ? void 0 : footerInfo.menu;
    const verifiedIcons = ((_b = (_a = footerInfo === null || footerInfo === void 0 ? void 0 : footerInfo.general) === null || _a === void 0 ? void 0 : _a.verified) === null || _b === void 0 ? void 0 : _b.filter(Boolean)) || [];
    return (React__default["default"].createElement(StyledFooter$1, { className: className },
        React__default["default"].createElement(index$1.Container, null,
            React__default["default"].createElement("div", { className: "inner" },
                React__default["default"].createElement("a", { href: "/" },
                    React__default["default"].createElement("img", { loading: "lazy", className: "footer-logo", src: (_c = footerInfo === null || footerInfo === void 0 ? void 0 : footerInfo.general) === null || _c === void 0 ? void 0 : _c.logo, alt: "Logo", "data-is-sehat": locale === 'id-ID' })),
                React__default["default"].createElement("div", { className: "columns" },
                    React__default["default"].createElement("div", { className: "newsletter" },
                        React__default["default"].createElement(index$2.Text, { size: isMobile ? 's3' : 's4', weight: "semiBold", color: "neutral.0" }, (_d = footerInfo === null || footerInfo === void 0 ? void 0 : footerInfo.general) === null || _d === void 0 ? void 0 : _d.content),
                        React__default["default"].createElement("div", { className: "social" },
                            React__default["default"].createElement(index$2.Text, { size: "p4", color: "neutral.6" }, (_e = footerInfo === null || footerInfo === void 0 ? void 0 : footerInfo.social) === null || _e === void 0 ? void 0 : _e.title),
                            React__default["default"].createElement("div", { className: "icons" }, (_g = (_f = footerInfo === null || footerInfo === void 0 ? void 0 : footerInfo.social) === null || _f === void 0 ? void 0 : _f.socials) === null || _g === void 0 ? void 0 : _g.map((social, idx) => (React__default["default"].createElement("a", { key: idx, "data-event-category": "Footer", "data-event-action": `Follow us - ${social.name}`, "data-content-label": social.url, href: social.url },
                                React__default["default"].createElement("img", { loading: "lazy", "data-event-category": "Footer", "data-event-action": `Follow us - ${social.name}`, "data-content-label": social.url, src: social.icon, alt: "Logo Social", className: "social-icon", width: "24", height: "24" }))))))),
                    React__default["default"].createElement("div", { className: "footer-menu" }, footerMenu && (React__default["default"].createElement(React__default["default"].Fragment, null, footerMenu === null || footerMenu === void 0 ? void 0 : footerMenu.map((menu, idx) => (React__default["default"].createElement(FooterMenuColumn, { title: menu.menu_title, items: menu.items, locale: locale, key: idx, index: idx }))))))),
                React__default["default"].createElement("div", { className: "otherSites" },
                    React__default["default"].createElement(index$2.Text, { size: "p4", className: "linkTitle", color: "neutral.6", weight: "regular" }, (_h = footerInfo === null || footerInfo === void 0 ? void 0 : footerInfo.branch) === null || _h === void 0 ? void 0 : _h.title),
                    React__default["default"].createElement("div", { className: "flags" }, (_k = (_j = footerInfo === null || footerInfo === void 0 ? void 0 : footerInfo.branch) === null || _j === void 0 ? void 0 : _j.branch) === null || _k === void 0 ? void 0 : _k.map((flagLink, idx) => (React__default["default"].createElement("a", { href: flagLink.url, key: idx, "data-event-category": "Footer", "data-event-action": flagLink.name, "data-event-label": flagLink.url },
                        React__default["default"].createElement(Flag, { url: flagLink.flag, dataEventCategory: "Footer", dataEventAction: flagLink.name, dataEventLabel: flagLink.url })))))),
                React__default["default"].createElement("div", { className: "copyright" },
                    React__default["default"].createElement("div", { className: "copyright-image-wrapper" }, verifiedIcons.length
                        ? verifiedIcons.map((verify, index) => (React__default["default"].createElement("a", { href: verify.url, key: index, className: "copyright-image" },
                            React__default["default"].createElement("img", { loading: "lazy", src: verify.image, alt: "DMCA Icon" }))))
                        : null),
                    React__default["default"].createElement(index$2.Text, { size: 'n1', className: "copyright-content", as: "div", color: "neutral.6", weight: "regular" },
                        React__default["default"].createElement("div", { dangerouslySetInnerHTML: {
                                __html: (_l = footerInfo === null || footerInfo === void 0 ? void 0 : footerInfo.general) === null || _l === void 0 ? void 0 : _l.copyright.replace(/{currentYear}/gi, dayjs__default["default"]().get('year').toString()),
                            } })))))));
};

const StyledFooter = styled__default["default"].footer `
  position: relative;
  overflow: hidden;
  .icons {
    margin-top: 12px;
    margin-bottom: 20px;
    > a:not(:last-child) {
      margin-right: 16px;
    }
  }

  a {
    text-decoration: none;
  }
`;
const StyledMenuContainer = styled__default["default"].div `
  position: relative;
  padding: 80px 0 40px;
  margin: auto 68px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;

  border-bottom: 1px solid ${miscTheme.theme.colors.neutral200};

  ${utils.MediaQueries.tdDown} {
    margin: auto 16px;
    flex-wrap: wrap;
    row-gap: 32px;
    column-gap: 16px;
  }

  ${utils.MediaQueries.mbDown} {
    margin: auto 0;
  }
`;
const StyledWrapMenuItem = styled__default["default"].div `
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-direction: column;

  ${utils.MediaQueries.mbDown} {
    flex: 1 1 160px;
  }
  .title {
    padding-bottom: 4px;
  }
`;
const StyledWrapItems = styled__default["default"].div `
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-direction: column;
`;
const StyledWrapCopyRight = styled__default["default"].div `
  background-color: #{map-get($mbColors, 'dark')};
  padding: 16px 0;
  position: relative;

  img {
    width: 89px;
    height: 32px;
  }
  .content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 174px;
    margin: auto 68px;

    ${utils.MediaQueries.tdDown} {
      margin: auto 16px;
    }

    ${utils.MediaQueries.mbDown} {
      flex-direction: column-reverse;
      gap: 16px;
      align-items: flex-start;
      margin: auto 0;
    }
  }

  .verify {
    display: flex;
    align-items: flex-start;
    gap: 8px;
  }
`;
const StyledWrapInfo = styled__default["default"].div `
  padding: 40px 0;
  ${utils.MediaQueries.mbUp} {
    margin: auto 68px;
  }
`;
const StyledSocialLink = styled__default["default"].div `
  display: flex;
  gap: 16px;
  .social-logo {
    width: 28px;
  }
`;

const MarryBabyFooter = ({ logoType = 'marryBaby', footerMenu, background, }) => {
    var _a;
    if (!footerMenu)
        return null;
    const { general, menu, socials } = footerMenu;
    return (React__default["default"].createElement(StyledFooter, { style: {
            backgroundColor: background ? background : 'none',
        } },
        React__default["default"].createElement(index$1.Container, null,
            React__default["default"].createElement(StyledMenuContainer, null, menu === null || menu === void 0 ? void 0 : menu.map(({ menu_title, items }, idx) => (React__default["default"].createElement(StyledWrapMenuItem, { key: `mbf${idx}` },
                React__default["default"].createElement(index$3.MarryBabyText, { className: "title", type: "subtitle-1", color: miscTheme.theme.mbColors.pink }, menu_title), items === null || items === void 0 ? void 0 :
                items.map(({ title, url }, id) => (React__default["default"].createElement("a", { "data-event-category": "Footer", "data-event-action": "Click", "data-event-label": `${url}`, className: "link", href: url, key: `footer-links-${id}` },
                    React__default["default"].createElement(StyledWrapItems, { key: `mbitem${id}` },
                        React__default["default"].createElement(index$3.MarryBabyText, { type: "bodytext-2", color: miscTheme.theme.mbColors.gray }, title)))))))))),
        React__default["default"].createElement(index$1.Container, null,
            React__default["default"].createElement(StyledWrapInfo, null,
                React__default["default"].createElement(core.Flex, { gap: '24px', sx: (theme) => ({
                        [theme.fn.largerThan('sm')]: {
                            '.info-item': {
                                flexGrow: 1,
                                width: '50%',
                            },
                        },
                        [theme.fn.smallerThan('sm')]: {
                            flexDirection: 'column',
                        },
                    }) },
                    React__default["default"].createElement(core.Stack, { spacing: '24px', className: "info-item" },
                        React__default["default"].createElement(index$4.Logo, { className: "logo", type: logoType }),
                        React__default["default"].createElement(index$2.Text, { size: "p4", as: "div" },
                            React__default["default"].createElement("div", { dangerouslySetInnerHTML: {
                                    __html: general === null || general === void 0 ? void 0 : general.content,
                                } })),
                        React__default["default"].createElement(StyledSocialLink, null, socials === null || socials === void 0 ? void 0 : socials.map(({ icon, name, url }, id) => (React__default["default"].createElement("a", { key: `social${id}`, target: "_blank", rel: "noreferrer", "data-event-category": "Footer", "data-event-action": `Follow us - ${name}`, "data-content-label": name, href: url },
                            React__default["default"].createElement("img", { className: "social-logo", loading: "lazy", src: icon, alt: name })))))),
                    React__default["default"].createElement(core.Box, { className: "info-item", sx: { paddingTop: '7px' } },
                        React__default["default"].createElement(index$2.Text, { size: "p4", as: "div" },
                            React__default["default"].createElement("div", { dangerouslySetInnerHTML: {
                                    __html: general === null || general === void 0 ? void 0 : general.information,
                                } })))))),
        React__default["default"].createElement(StyledWrapCopyRight, null,
            React__default["default"].createElement(index$1.Container, null,
                React__default["default"].createElement("div", { className: "content" },
                    React__default["default"].createElement(index$2.Text, { size: "p5", color: "#fff", as: "div" },
                        React__default["default"].createElement("div", { dangerouslySetInnerHTML: {
                                __html: general === null || general === void 0 ? void 0 : general.copyright.replace(/{currentYear}/gi, dayjs__default["default"]().get('year').toString()),
                            } })),
                    React__default["default"].createElement("div", { className: "verify" }, (_a = general === null || general === void 0 ? void 0 : general.verified) === null || _a === void 0 ? void 0 : _a.map(({ image, url }, idx) => (React__default["default"].createElement("img", { loading: "lazy", key: `imgMbFt${idx}`, src: image, alt: url })))))))));
};

const Footer = ({ locale, footerInfo, siteType, background }) => {
    return siteType === 'helloSites' ? (React__default["default"].createElement(DiscoverFooter, { locale: locale, footerInfo: (footerInfo || {}) })) : (React__default["default"].createElement(MarryBabyFooter, { footerMenu: footerInfo, background: background }));
};

exports.Footer = Footer;
