{"version":3,"file":"ef16207ed99516b1d2a89c8e9c5b55ca7bfaaa3d-93a434e180dc67c438ff.js","mappings":"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","sources":["webpack://parrot-analytics-gatsby/./src/components/button.js","webpack://parrot-analytics-gatsby/./src/images/bg/demand360-dots.jpg","webpack://parrot-analytics-gatsby/./src/components/demand360-ad.js","webpack://parrot-analytics-gatsby/./src/components/img.js","webpack://parrot-analytics-gatsby/./src/components/switch.js","webpack://parrot-analytics-gatsby/./src/components/plan-price.js","webpack://parrot-analytics-gatsby/./src/components/section-background.js","webpack://parrot-analytics-gatsby/./src/images/bg/topo.jpg","webpack://parrot-analytics-gatsby/./src/images/logos/demand360-lite-product-regular.png","webpack://parrot-analytics-gatsby/./src/images/logos/demand360-lite-product.png"],"sourcesContent":["import React, { useState } from \"react\"\nimport { navigate } from \"@reach/router\"\nimport tw, { styled } from \"twin.macro\"\nimport { motion } from \"framer-motion\"\n\nconst Styles = styled.div`\n  ${tw`inline-block relative overflow-visible`}\n  --button-color: #05c56b;\n\n  button {\n    ${tw`rounded uppercase font-display text-white relative w-full`}\n    font-size: 18px;\n    line-height: 14px;\n    padding: 1.25rem;\n    z-index: 2;\n    -webkit-appearance: none;\n    appearance: none;\n    transition: all 100ms;\n\n    /* default color is green */\n    background: linear-gradient(180deg, #05c56b 0%, #00933e 100%);\n    &:hover {\n      background: linear-gradient(0deg, #05c56b 0%, #00933e 100%);\n    }\n\n    &:active {\n      transform: scale(0.9);\n      background-color: rgba(0, 0, 0, 0.2);\n      background: linear-gradient(180deg, #05c56bcc 0%, #00933ecc 100%);\n    }\n\n    &:focus {\n      outline: 0;\n    }\n  }\n\n  &.small {\n    button {\n      font-size: 14px;\n      line-height: 12px;\n      padding: 1rem;\n    }\n  }\n\n  &.flat {\n    button {\n      background: #333333;\n    }\n    --button-color: #333333;\n  }\n\n  &.blue {\n    --button-color: #3498db;\n    button {\n      background: linear-gradient(180deg, #3498db 0%, #006aa9 100%);\n\n      &:hover {\n        background: linear-gradient(0deg, #3498db 0%, #006aa9 100%);\n      }\n    }\n\n    &.glow {\n      button {\n        box-shadow: 0 0 4px 0 rgba(0, 106, 169, 0.51);\n      }\n    }\n  }\n\n  &.purple {\n    --button-color: #7c43c9;\n    button {\n      background: linear-gradient(180deg, #7c43c9 0%, #481397 100%);\n\n      &:hover {\n        background: linear-gradient(0deg, #7c43c9 0%, #481397 100%);\n      }\n    }\n\n    &.glow {\n      button {\n        box-shadow: 4px 4px 15px 0 rgba(124, 67, 201, 0.5);\n      }\n    }\n  }\n\n  &.red {\n    --button-color: #e3284c;\n    button {\n      background: linear-gradient(180deg, #e3284c 0%, #aa0024 100%);\n\n      &:hover {\n        background: linear-gradient(0deg, #e3284c 0%, #aa0024 100%);\n      }\n    }\n\n    &.glow {\n      button {\n        box-shadow: 4px 4px 15px 0 rgba(227, 40, 76, 0.5);\n      }\n    }\n  }\n\n  &.yellow {\n    --button-color: #c69724;\n    button {\n      background: linear-gradient(180deg, #c69724 0.06%, #876718 100%);\n\n      &:hover {\n        background: linear-gradient(0deg, #c69724 0.06%, #876718 100%);\n      }\n    }\n  }\n\n  &.transparent {\n    --button-color: rgba(0, 0, 0, 0);\n    button {\n      background: rgba(0, 0, 0, 0);\n    }\n\n    &:hover {\n      color: #e6e6e6;\n    }\n  }\n\n  &.semi-transparent {\n    --button-color: rgba(0, 0, 0, 0.3);\n    button {\n      background: rgba(0, 0, 0, 0.4);\n    }\n\n    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1), 0px 1px 1px rgba(0, 0, 0, 0.1),\n      0px 2px 2px rgba(0, 0, 0, 0.1), 0px 4px 4px rgba(0, 0, 0, 0.1),\n      0px 8px 8px rgba(0, 0, 0, 0.1);\n    border-radius: 5px;\n\n    &:hover {\n      color: #e6e6e6;\n    }\n  }\n\n  .bubble {\n    border-radius: 999px;\n    border: 1px solid var(--button-color);\n    position: absolute;\n    opacity: 0;\n\n    &.filled {\n      background-color: var(--button-color);\n    }\n  }\n\n  &.secondary {\n    button {\n      ${tw`font-bold text-springgreen-secondary`}\n\n      background: linear-gradient(\n        180deg,\n        rgba(255, 255, 255, 0.14) 0%,\n        rgba(255, 255, 255, 0.1) 100%\n      );\n      backdrop-filter: blur(2px);\n      border-radius: 5px;\n\n      &:hover {\n        background: linear-gradient(\n          0deg,\n          rgba(255, 255, 255, 0.14) 0%,\n          rgba(255, 255, 255, 0.1) 100%\n        );\n      }\n    }\n\n    &.white-text {\n      button {\n        ${tw`text-white`}\n      }\n    }\n\n    &.red-text {\n      button {\n        ${tw`text-neonred-primary`}\n      }\n    }\n\n    &.monitor {\n      height: 54px;\n\n      button {\n        padding: 1.0rem 1.25rem;\n        box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1),\n          0px 1px 1px rgba(0, 0, 0, 0.1), 0px 2px 2px rgba(0, 0, 0, 0.1),\n          0px 4px 4px rgba(0, 0, 0, 0.1), 0px 8px 8px rgba(0, 0, 0, 0.1);\n      }\n    }\n  }\n`\n\nconst Button = ({ children, onClick, to, className, ...rest }) => {\n  const [active, setActive] = useState(false)\n  const internal = /^\\/(?!\\/)/.test(to)\n  const scroll = /^#/.test(to)\n  function click() {\n    if (!active) {\n      setActive(true)\n      setTimeout(function () {\n        setActive(false)\n      }, 500)\n    }\n    if (onClick) {\n      onClick()\n    } else {\n      if (to) {\n        if (internal) {\n          navigate(to)\n        } else if (scroll) {\n          document.querySelector(to).scrollIntoView({\n            behavior: \"smooth\",\n          })\n        } else {\n          window.location.href = to\n        }\n      }\n    }\n  }\n  const bubbles = Array.from({ length: 15 }, (v, i) => i)\n  const transition = { duration: 0.5, ease: \"easeInOut\" }\n\n  function rand(from, to) {\n    return Math.round(Math.random() * (to - from) + from)\n  }\n\n  return (\n    <Styles className={className}>\n      {bubbles.map((b, idx) => {\n        const diameter = rand(5, 10)\n        return (\n          <motion.div\n            className={`bubble ${idx % 2 === 0 ? \"filled\" : \"\"}`}\n            key={idx}\n            style={{\n              height: diameter,\n              width: diameter,\n            }}\n            animate={active ? \"animate\" : \"static\"}\n            transition={transition}\n            variants={{\n              static: {\n                left: `${b * (90 / bubbles.length) + rand(-2, 2) + 5}%`,\n                top: \"10%\",\n                scale: 1,\n                opacity: 0,\n              },\n              animate: {\n                left: `${b * (150 / bubbles.length) + rand(-2, 2) - 25}%`,\n                top: `${rand(-50, 20)}%`,\n                scale: [1, 0.8, 0],\n                opacity: [1, 1, 1, 1, 0],\n              },\n            }}\n          />\n        )\n      })}\n      <button onClick={click} {...rest} className={active ? \"animate\" : \"\"}>\n        {children}\n      </button>\n      {bubbles.map((b, idx) => {\n        const diameter = rand(5, 10)\n        return (\n          <motion.div\n            className={`bubble ${idx % 2 === 0 ? \"filled\" : \"\"}`}\n            key={idx}\n            style={{\n              height: diameter,\n              width: diameter,\n            }}\n            animate={active ? \"animate\" : \"static\"}\n            transition={transition}\n            variants={{\n              static: {\n                left: `${b * (90 / bubbles.length) + rand(-2, 2) + 5}%`,\n                top: \"75%\",\n                scale: 1,\n                opacity: 0,\n              },\n              animate: {\n                left: `${b * (150 / bubbles.length) + rand(-2, 2) - 25}%`,\n                top: `${rand(50, 135)}%`,\n                scale: [1, 0.8, 0],\n                opacity: [1, 1, 1, 1, 0],\n              },\n            }}\n          />\n        )\n      })}\n    </Styles>\n  )\n}\n\nexport default Button\n","export default __webpack_public_path__ + \"static/demand360-dots-ffeec201b485b273a1991ab983409825.jpg\";","import React, { useEffect, useState } from \"react\"\nimport { graphql, useStaticQuery, Link } from \"gatsby\"\nimport tw, { styled, theme } from \"twin.macro\"\n\nimport { brandBlock } from \"utils/brand\"\nimport Button from \"components/button\"\nimport PlanPrice from \"components/plan-price\"\nimport ParrotImg from \"components/img\"\nimport Logo from \"images/logos/demand360-lite-product.png\"\nimport LogoRegular from \"images/logos/demand360-lite-product-regular.png\"\nimport SectionBackground from \"components/section-background\"\nimport BgTopo from \"images/bg/topo.jpg\"\nimport BgDots from \"images/bg/demand360-dots.jpg\"\n\nconst Demand360AdContainer = styled.div`\n  ${tw`font-body text-white overflow-hidden`}\n\n  .header-wrapper {\n    ${tw`mx-auto l:max-w-l font-bold relative`}\n\n    picture.hero img,\n    img.hero {\n      ${tw`absolute`}\n\n      width: 100%;\n      top: 350px;\n\n      @media (min-width: 400px) {\n        top: 300px;\n      }\n\n      @media (min-width: 640px) {\n        top: 0;\n        width: auto;\n        height: 755px;\n        left: 50%;\n      }\n\n      @media (min-width: 1200px) {\n        height: 970px;\n      }\n    }\n\n    .header {\n      ${tw`m:pl-8 m:text-left`}\n\n      font-size: 15px;\n      line-height: 1.6;\n      text-align: center;\n\n      height: 590px;\n\n      @media (min-width: 400px) {\n        height: 583px;\n      }\n\n      @media (min-width: 640px) {\n        height: 450px;\n      }\n\n      @media (min-width: 1200px) {\n        height: 500px;\n        font-size: 18px;\n      }\n\n      .logo {\n        width: 351px;\n\n        @media (min-width: 640px) {\n          width: 335px;\n          margin-top: 30px;\n        }\n\n        @media (min-width: 1200px) {\n          width: 488px;\n        }\n      }\n    }\n  }\n\n  .centered-container {\n    ${tw`l:max-w-l mx-auto relative z-10`}\n  }\n\n  .section {\n    ${tw`flex flex-col l:flex-row`}\n  }\n\n  .plan-price {\n    ${tw`h-24 l:h-32`}\n\n    background: linear-gradient(180deg, #3e3d3c 0%, #191919 100%);\n    box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.1477);\n    border-radius: 5px;\n\n    .price {\n      ${tw`text-springgreen-light font-body w-full m:w-7/12 font-bold`}\n      max-width: auto;\n      @media (min-width: 1200px) {\n        max-width: 200px;\n      }\n    }\n  }\n\n  .report-copy {\n    background: linear-gradient(180deg, #3c3b3a 0%, #191919 83.85%);\n    @media (min-width: 1200px) {\n      width: 408px;\n    }\n\n    h3 {\n      ${tw`text-yellow text-2xl leading-normal l:text-3xl l:leading-normal font-bold mb-4 text-center l:text-left`}\n    }\n\n    ul {\n      ${tw`font-body text-base text-left text-white list-disc ml-4`}\n\n      strong {\n        ${tw`text-springgreen-light`}\n      }\n    }\n  }\n\n  .report-cover {\n    @media (min-width: 1200px) {\n      width: 716px;\n    }\n  }\n`\n\nconst StyledIcon = styled.img`\n  ${(props) =>\n    props.customCSS ||\n    `\n    max-width: 80px;\n    max-height: 65px;\n  `}\n`\n\nconst BackgroundTop = styled.div`\n  ${tw`pt-24 l:pt-32 pb-48`}\n\n  &.home {\n    padding-top: 300px;\n  }\n\n  border-bottom: 2px solid ${theme`colors.springgreen.light`};\n\n  background: linear-gradient(\n      180deg,\n      rgba(0, 0, 0, 0.51) 0%,\n      rgba(0, 0, 0, 0) 75.56%\n    )\n    ${({ background }) => (background ? `, url(${background})` : \"\")};\n  background-color: #110120;\n  background-position: bottom;\n  background-size: cover;\n  background-repeat: no-repeat;\n  position: relative;\n`\n\nconst Demand360Ad = ({ className = \"\", gradientClass }) => {\n  const [reportImage, setReportImage] = useState(null)\n\n  const data = useStaticQuery(graphql`\n    query {\n      gcms {\n        adContentBlocks: contentBlocks(\n          where: { identifier: \"demand360-ad\" }\n          first: 1\n          orderBy: order_ASC\n        ) {\n          headerContent {\n            html\n          }\n          mainContent {\n            html\n          }\n          featuredImage {\n            url(transformation: { image: { resize: { width: 800, fit: max } } })\n            altText\n          }\n          callToAction\n          linkUrl\n        }\n        highlightContentBlocks: contentBlocks(\n          where: { identifier: \"demand360-ad-highlights\" }\n          orderBy: order_ASC\n        ) {\n          id\n          extraData\n        }\n        geoTargetContentBlocks: contentBlocks(\n          where: { identifier_starts_with: \"demand360-ad-geo-target\" }\n        ) {\n          id\n          featuredImage {\n            url(transformation: { image: { resize: { width: 800, fit: max } } })\n            altText\n          }\n          extraData\n        }\n        headerCta: contentBlocks(\n          where: { identifier: \"demand360-lite-header-cta\" }\n        ) {\n          id\n          featuredImage {\n            url\n          }\n          headerContent {\n            html\n          }\n          icon {\n            url\n          }\n        }\n      }\n    }\n  `)\n\n  const { gcms } = data\n\n  const adContent = brandBlock(gcms.adContentBlocks[0])\n  const highlights = brandBlock(gcms.highlightContentBlocks[0])\n  const headerCta = brandBlock(gcms.headerCta[0])\n  const geoTargetImages = gcms.geoTargetContentBlocks.reduce(\n    (prev, geoTarget) => {\n      if (geoTarget.featuredImage && geoTarget.featuredImage.url) {\n        prev[geoTarget.extraData?.code || \"default\"] =\n          geoTarget.featuredImage.url\n      }\n      return prev\n    },\n    {}\n  )\n\n  useEffect(() => {\n    let countryCode\n\n    if (\n      typeof window !== \"undefined\" &&\n      window.country &&\n      window.country.code !== null\n    ) {\n      countryCode = window.country.code\n    }\n\n    if (geoTargetImages[countryCode]) {\n      setReportImage(geoTargetImages[countryCode])\n    } else {\n      setReportImage(geoTargetImages.default)\n    }\n  }, [geoTargetImages])\n\n  if (data.gcms.adContentBlocks?.length !== 1) {\n    return <></>\n  }\n\n  let bg, bgClassName, bgOpacity\n\n  if (className.includes(\"measurement\")) {\n    bgClassName = \"demand360-ad-measurement\"\n    bg = BgTopo\n    bgOpacity = \"1.0\"\n  } else {\n    bgClassName = \"demand360-ad\"\n    bg = BgDots\n    bgOpacity = \"0.15\"\n  }\n\n  return (\n    <Demand360AdContainer>\n      <BackgroundTop background={headerCta?.icon?.url} className={className}>\n        <div className=\"header-wrapper flex flex-col m:flex-row\">\n          <div className=\"header\">\n            <Link to=\"/products/demand360/lite/\">\n              <img className=\"logo mx-auto m:hidden l:hidden\" src={Logo} />\n              <img\n                className=\"logo hidden m:inline-block l:inline-block\"\n                src={LogoRegular}\n              />\n            </Link>\n            <div\n              className=\"pt-8 pb-6 font-normal px-3 l:px-0 m:px-0 m:w-2/5 l:w-2/5\"\n              dangerouslySetInnerHTML={{\n                __html: headerCta.headerContent?.html,\n              }}\n            />\n            <div className=\"plan-price flex flex-grow w-4/5 mx-auto m:mx-0 l:mx-0 m:w-1/3 l:w-1/3\">\n              <PlanPrice divided={true} />\n            </div>\n          </div>\n          {headerCta.featuredImage && (\n            <Link to=\"/products/demand360/lite/\">\n              <ParrotImg className=\"hero\" src={headerCta.featuredImage} />\n            </Link>\n          )}\n        </div>\n        <div className=\"centered-container\">\n          <div className=\"section mt-0 l:mt-8 justify-between items-center l:items-start\">\n            {highlights.extraData.highlights.map((highlight, i) => (\n              <div\n                className=\"flex flex-col items-center justify-start w-4/5 l:w-1/4 mx-6 mt-12 l:mt-0\"\n                key={i}\n              >\n                <div className=\"h-20 flex flex-col items-center justify-center mb-3\">\n                  <StyledIcon src={highlight.icon} />\n                </div>\n                <div\n                  className=\"font-black text-white text-center text-lg px-4\"\n                  dangerouslySetInnerHTML={{\n                    __html: highlight.text,\n                  }}\n                />\n              </div>\n            ))}\n          </div>\n        </div>\n      </BackgroundTop>\n      <SectionBackground\n        bg={bg}\n        color=\"#0c0c0c\"\n        opacity={bgOpacity}\n        className={`${bgClassName} ${className || \"\"}`}\n        gradientClass={gradientClass}\n      >\n        <div className=\"centered-container pb-8\">\n          <div className=\"flex flex-col-reverse l:flex-row justify-center l:items-stretch w-11/12 l:w-auto mx-auto l:px-8\">\n            <div\n              className=\"report-copy l:-mt-24 p-8 z-0 rounded-b-lg l:rounded-b-none l:rounded-l-lg font-display\"\n              dangerouslySetInnerHTML={{ __html: adContent.mainContent?.html }}\n            ></div>\n            <div className=\"report-cover -mt-24 z-0\">\n              {reportImage && (\n                <img\n                  src={reportImage}\n                  className=\"w-full object-cover rounded-t-lg l:rounded-t-none l:rounded-r-lg\"\n                />\n              )}\n            </div>\n          </div>\n          <div className=\"section mt-16 mb-16 l:mb-8 pb-16 items-center justify-center mx-auto\">\n            <Button to={adContent.linkUrl}>{adContent.callToAction}</Button>\n          </div>\n        </div>\n      </SectionBackground>\n    </Demand360AdContainer>\n  )\n}\n\nexport default Demand360Ad\n","import React from \"react\"\nimport { styled } from \"twin.macro\"\n\nconst StyledPicture = styled.picture`\n  ${(props) => (props.customCSS ? props.customCSS : \"\")}\n`\n\nconst StyledImg = styled.img`\n  ${(props) => (props.customCSS ? props.customCSS : \"\")}\n`\n\nexport default ({ src, className = \"\" }) => {\n  if (src.mimeType && src.handle) {\n    const webp = `${process.env.GATSBY_ASSETS_BASE_URL}no_metadata/output=format:webp/cache=expiry:max/${src.handle}`\n    return (\n      <StyledPicture customCSS={src.customCss || null} className={className}>\n        <source srcSet={webp} type=\"image/webp\" />\n        <source srcSet={src.url} type={src.mimeType} />\n        <img src={src.url} alt={src.alt || null} />\n      </StyledPicture>\n    )\n  } else {\n    return (\n      <StyledImg\n        src={src.url}\n        className={className}\n        alt={src.alt || null}\n        customCSS={src.customCss || null}\n      />\n    )\n  }\n}\n","import React, { useEffect, useState } from \"react\"\nimport styled from \"styled-components\"\nimport { motion } from \"framer-motion\"\n\nconst Toggle = styled(motion.div)`\n  height: 24px;\n  width: 24px;\n  border-radius: 5px;\n  position: relative;\n  top: 4px;\n  background: linear-gradient(180deg, #f1f1f1 0%, #ffffff 100%);\n`\n\nconst Switch = ({ onFlip, initial = true, className }) => {\n  const [isOn, switchState] = useState(initial)\n\n  const flip = () => {\n    switchState(!isOn)\n    onFlip && onFlip()\n  }\n\n  const transition = {\n    type: \"tween\",\n    duration: 0.2,\n  }\n\n  useEffect(() => {\n    switchState(initial)\n  }, [initial])\n\n  return (\n    <motion.div\n      style={{\n        height: 32,\n        width: 56,\n        borderRadius: 5,\n        position: \"relative\",\n        cursor: \"pointer\",\n      }}\n      onTap={flip}\n      variants={{\n        off: { background: \"#bbbbbb\" },\n        on: { background: \"#05C56B\" },\n      }}\n      initial={isOn ? \"on\" : \"off\"}\n      animate={isOn ? \"on\" : \"off\"}\n      transition={transition}\n      {...className}\n    >\n      <Toggle\n        height={24}\n        width={24}\n        variants={{\n          off: { x: 4, boxShadow: \"-2px 0 4px 0 #aaaaaa\" },\n          on: { x: 28, boxShadow: \"-2px 0 4px 0 #00933e\" },\n        }}\n        initial={isOn ? \"on\" : \"off\"}\n        animate={isOn ? \"on\" : \"off\"}\n        transition={transition}\n      />\n    </motion.div>\n  )\n}\n\nexport default Switch\n","import React, { useContext, useEffect, useState } from \"react\"\nimport { graphql, useStaticQuery } from \"gatsby\"\nimport tw, { styled } from \"twin.macro\"\n\nimport Switch from \"components/switch\"\nimport CouponContext from \"context/coupon-context\"\n\nconst Styles = styled.div`\n  ${tw`flex flex-wrap flex-grow items-center justify-between pt-3 m:pt-0`}\n\n  &.light {\n    ${tw`text-grey-10`}\n  }\n\n  &.dark {\n    ${tw`text-white`}\n  }\n\n  .price {\n    ${tw`font-display`}\n    font-size: 44px;\n    line-height: 44px;\n    text-align: center;\n  }\n\n  .price-desc {\n    ${tw`font-display`}\n    font-size: 11.9px;\n    line-height: 18px;\n  }\n\n  .price-period {\n    ${tw`font-body text-center`}\n    font-size: 12px;\n    line-height: 20px;\n    padding-top: 5px;\n    width: 80px;\n  }\n\n  .switch {\n    width: 100%;\n  }\n\n  .divided {\n    ${tw`border-r-2`}\n\n    border-color: #4b4b4b;\n  }\n\n  @media (min-width: 720px) {\n    &.large {\n      ${tw`justify-center`}\n      .switch {\n        padding-left: 32px;\n        padding-right: 32px;\n        transform: scale(1.4);\n        width: auto;\n      }\n      .price {\n        font-size: 51.8px;\n      }\n      .price-desc {\n        font-size: 14px;\n      }\n      .price-period {\n        font-size: 15px;\n        min-width: 100px;\n      }\n    }\n  }\n`\n\nconst PlanPrice = ({\n                     onPlanChange,\n                     divided = false,\n                     light = false,\n                     large = false,\n                     ...rest\n                   }) => {\n\n  const graphqlQuery = graphql`\n    {\n      gcms {\n        websiteSetting(where: { name: \"Monitor pricing plans\" }) {\n          jsonValue\n        }\n      }\n      allPricePlan {\n        nodes {\n          nickname\n          amount\n          amount_decimal\n          id\n          interval\n          monthly\n          yearly\n        }\n      }\n    }\n  `;\n\n  const data = useStaticQuery(graphqlQuery)\n  const planSettings = data.gcms.websiteSetting.jsonValue\n  const planData = data?.allPricePlan?.nodes ?? []\n  const maxPlanPrice = planData.reduce(\n      (acc, cur) => Math.max(acc, cur.yearly),\n      0\n  )\n  const [plans, setPlans] = useState(null)\n  const [plan, setPlan] = useState(null)\n  const [yearly, setYearly] = useState(planSettings.default === \"yearly\")\n  const [bestPlanId, setBestPlanId] = useState(null)\n  const couponContext = useContext(CouponContext)\n\n  function flip() {\n    setYearly(!yearly)\n    onPlanChange && onPlanChange(yearly ? \"yearly\" : \"monthly\")\n    setPlan(plans.find((p) => p.id !== plan.id))\n  }\n\n  useEffect(() => {\n    async function fetchData() {\n      const coupon = await couponContext.getCoupon()\n      if (coupon) {\n        //Update plan prices with coupon discount\n        const newPlans = planData.map((p) => {\n          const newPlan = Object.assign({}, p)\n          if (!newPlan.discountApplied) {\n            newPlan.monthly = couponContext.applyCoupon(p, \"month\") * 100\n            newPlan.yearly = couponContext.applyCoupon(p, \"year\") * 100\n            newPlan.discountApplied = true\n          }\n          return newPlan\n        })\n        setPlans(newPlans)\n        // Flip switch to plan the coupon applies to\n        if (coupon?.metadata?.plan_applicable) {\n          const selectedPlan = newPlans.find((p) =>\n              couponContext.couponApplies(p)\n          )\n          if (selectedPlan) {\n            setPlan(selectedPlan)\n            setYearly(selectedPlan.interval === \"year\")\n          }\n        }\n      } else {\n        setPlans(planData)\n      }\n    }\n\n    fetchData()\n  }, [couponContext, planSettings])\n\n  useEffect(() => {\n    if (plans && plans.length > 0) {\n      // Save which plan is the best deal\n      const bestPlan = plans.reduce(\n          (best, plan) => (!best || plan.yearly < best.yearly ? plan : best),\n          null\n      )\n      setBestPlanId(bestPlan.id)\n      // Set a selected plan based on CMS settings (or the first one)\n      if (planSettings.default) {\n        setPlan(\n            plans.find(\n                (p) =>\n                    p.nickname.toLowerCase() === planSettings.default.toLowerCase()\n            )\n        )\n        onPlanChange && onPlanChange(planSettings.default)\n      } else {\n        setPlan(plans[0])\n      }\n    }\n  }, [plans])\n\n  if (plan) {\n    return (\n        <Styles\n            className={`${light ? \"light\" : \"dark\"} ${\n                large ? \"large\" : \"small\"\n            } flex-grow`}\n        >\n          <div\n              className={`flex flex-col flex-grow justify-center items-center pr-2 m:pr-0 ${\n                  divided ? \"divided\" : \"\"\n              }`}\n              {...rest}\n          >\n            <div className=\"price w-full flex flex-col items-center\">\n              ${Math.round(plan.monthly / 100)}\n            </div>\n            <div className=\"price-desc w-full flex flex-col items-center\">\n              USD per month\n            </div>\n          </div>\n          <div\n              className={`flex items-center flex-grow ${\n                  large\n                      ? \"flex-col l:flex-row justify-start\"\n                      : \"flex-col justify-center\"\n              } ${light ? \"text-grey-35\" : \"text-white\"}`}\n              {...rest}\n          >\n            <div className=\"switch flex flex-col items-center\">\n              <Switch onFlip={flip} initial={yearly} />\n            </div>\n            <div className=\"price-period w-full flex flex-col items-center\">\n              {plan &&\n                  `Pay ${plan.interval.toLowerCase()}ly ${\n                      plan.id === bestPlanId\n                          ? ` (Save ${Math.round(\n                              (1 - plan.yearly / maxPlanPrice) * 100\n                          )}%)`\n                          : \"\"\n                  }`}\n            </div>\n          </div>\n        </Styles>\n    )\n  } else {\n    return <></>\n  }\n}\n\nexport default PlanPrice\n","import React from \"react\"\nimport tw, { styled } from \"twin.macro\"\n\nconst SectionStyles = styled.div`\n  ${tw`relative`}\n  opacity: 0.99;\n  ${({ color }) => `background-color: ${color};`}\n\n  &:before {\n    ${tw`absolute top-0 left-0 w-full h-full`}\n\n    content: \"\";\n    background: ${({ bg }) => `url(${bg})`};\n    background-repeat: repeat-y;\n    background-size: 100% auto;\n    background-color: transparent;\n    background-position: center;\n    opacity: ${({ opacity }) => opacity || \"0.2\"};\n    z-index: -1;\n\n    @media (max-width: 640px) {\n      background-size: 250%;\n      background-position: 30% 50%;\n    }\n  }\n\n  &.demand360-ad {\n    :before {\n      @media (max-width: 640px) {\n        background-position: top;\n      }\n    }\n  }\n\n  &.home {\n    .centered-container {\n      ${tw`pb-12 l:pb-48`}\n    }\n  }\n\n  &.demand360-ad-measurement {\n    &:before {\n      background-repeat: \"no-repeat\";\n      background-size: \"cover\";\n    }\n\n    .centered-container {\n      ${tw`pb-16`}\n    }\n  }\n`\n\nconst Gradient = styled.div`\n  background: linear-gradient(\n    180deg,\n    rgba(0, 0, 0, 1) 0%,\n    rgba(0, 0, 0, 0) 16rem\n  );\n\n  &.page-404 {\n    background: linear-gradient(\n      180deg,\n      rgba(0, 0, 0, 0.5) 0%,\n      rgba(0, 0, 0, 0) 25%,\n      rgba(0, 0, 0, 0) 75%,\n      rgba(0, 0, 0, 0.5) 100%\n    );\n  }\n\n  &.measurement {\n    background: none;\n  }\n`\n\nconst SectionBackground = ({\n  bg,\n  children,\n  className,\n  gradientClass,\n  ...props\n}) => {\n  return (\n    <SectionStyles bg={bg} className={`${className || \"\"}`} {...props}>\n      <Gradient className={gradientClass}>{children}</Gradient>\n    </SectionStyles>\n  )\n}\n\nexport default SectionBackground\n","export default __webpack_public_path__ + \"static/topo-404e82bacb9c975bdd0d16c4b7e07330.jpg\";","export default __webpack_public_path__ + \"static/demand360-lite-product-regular-8be27182aeb56a4589704c15808c3d2b.png\";","export default __webpack_public_path__ + \"static/demand360-lite-product-8ee677e21ebd3b38979626e20da9b7d6.png\";"],"names":["Styles","styled","div","withConfig","displayName","componentId","_ref","children","onClick","to","className","rest","active","setActive","useState","internal","test","scroll","bubbles","Array","from","length","v","i","transition","duration","ease","rand","Math","round","random","React","map","b","idx","diameter","motion","key","style","height","width","animate","variants","static","left","top","scale","opacity","Object","assign","setTimeout","navigate","document","querySelector","scrollIntoView","behavior","window","location","href","Demand360AdContainer","StyledIcon","img","props","customCSS","BackgroundTop","background","_ref2","_data$gcms$adContentB","_headerCta$icon","_headerCta$headerCont","_adContent$mainConten","gradientClass","reportImage","setReportImage","data","useStaticQuery","gcms","adContent","brandBlock","adContentBlocks","highlights","highlightContentBlocks","headerCta","geoTargetImages","geoTargetContentBlocks","reduce","prev","geoTarget","_geoTarget$extraData","featuredImage","url","extraData","code","useEffect","countryCode","country","default","bg","bgClassName","bgOpacity","includes","BgTopo","BgDots","icon","Link","src","Logo","LogoRegular","dangerouslySetInnerHTML","__html","headerContent","html","PlanPrice","divided","ParrotImg","highlight","text","SectionBackground","color","mainContent","Button","linkUrl","callToAction","StyledPicture","picture","StyledImg","mimeType","handle","webp","process","customCss","srcSet","type","alt","Toggle","onFlip","initial","isOn","switchState","borderRadius","position","cursor","onTap","flip","off","on","x","boxShadow","_data$allPricePlan$no","_data$allPricePlan","onPlanChange","light","large","planSettings","websiteSetting","jsonValue","planData","allPricePlan","nodes","maxPlanPrice","acc","cur","max","yearly","plans","setPlans","plan","setPlan","setYearly","bestPlanId","setBestPlanId","couponContext","useContext","CouponContext","async","coupon","getCoupon","_coupon$metadata","newPlans","p","newPlan","discountApplied","monthly","applyCoupon","metadata","plan_applicable","selectedPlan","find","couponApplies","interval","fetchData","bestPlan","best","id","nickname","toLowerCase","Switch","SectionStyles","_ref3","Gradient","_ref4"],"sourceRoot":""}