{"version":3,"file":"component---src-pages-faq-tsx-4eefc8aaccb86aef6e71.js","mappings":"2MAce,SAASA,EAAT,GAKJ,IAJTC,EAIQ,EAJRA,KACAC,EAGQ,EAHRA,WACAC,EAEQ,EAFRA,cACAC,EACQ,EADRA,YASA,OACE,gBAACC,EAAD,CAAeC,UAAcJ,IAAeE,EAAc,SAAW,IACnE,0BACE,0BACE,gBAAeF,IAAeE,EAC9B,mCAAkCA,EAClCG,GAAE,kBAAoBH,EACtBI,QAdY,WAClBL,EAAcC,GACVA,IAAgBF,GAClBC,OAAcM,KAaV,wBAAMH,UAAU,YAAYL,EAAKS,UACjC,wBAAMJ,UAAU,QACd,uBACEA,UAAcJ,IAAeE,EAAc,SAAW,GACtDO,OAAO,eACPC,KAAK,OACLC,QAAQ,aAER,wBACEC,cAAc,QACdC,eAAe,QACfC,YAAY,IACZC,EAAE,uBAMZ,sBACEX,UAAcJ,IAAeE,EAAc,GAAK,UAChDG,GAAE,mBAAqBH,EACvB,oCAAmCA,EACnCc,KAAK,SACLC,OAAQjB,IAAeE,GAEvB,yBACGH,EAAKmB,OACJ,qBAAGC,KAAMpB,EAAKqB,OAAQhB,UAAU,iBAAhC,oBAEE,uBACEiB,MAAM,6BACNX,KAAK,OACLC,QAAQ,YACRF,OAAO,gBAEP,wBACEG,cAAc,QACdC,eAAe,QACfC,YAAa,EACbC,EAAE,mFAKRhB,EAAKqB,UAQjB,IAAMjB,EAAgBmB,EAAAA,QAAAA,IAAAA,WAAH,iEAAGA,CAAH,q8BCnFbC,EAAU,CACd,CACEf,SACE,gFACFY,OACE,8gBACFF,QAAQ,GAEV,CACEV,SAAU,gEACVY,OACE,kPACFF,QAAQ,GAEV,CACEV,SACE,sEACFY,OACE,kfACFF,QAAQ,GAEV,CACEV,SAAU,0BACVY,OACE,uEACFF,QAAQ,IAIG,SAASM,IACtB,MAAoCC,EAAAA,cAClClB,GADKP,EAAP,KAAmBC,EAAnB,KAIA,OACE,gBAACyB,EAAA,EAAD,CACEC,MAAM,6DACNC,YAAY,uJACZC,QAAQ,OAER,gBAACC,EAAD,KACE,uBAAK1B,UAAU,iBACb,wDACA,2BACE,0BACGmB,EAAQQ,KAAI,SAAChC,EAAMiC,GAAP,OACX,gBAAClC,EAAD,CACEmC,IAAKD,EACLjC,KAAMA,EACNC,WAAYA,EACZC,cAAeA,EACfC,YAAa8B,YAW/B,IAAMF,EAAYR,EAAAA,QAAAA,QAAAA,WAAH,yDAAGA,CAAH","sources":["webpack://sheboygan-monuments/./src/components/FaqItem.tsx","webpack://sheboygan-monuments/./src/pages/faq.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\n\ntype Props = {\n  item: {\n    question: string;\n    answer: string;\n    isLink: boolean;\n  };\n  activeItem: number | undefined;\n  setActiveItem: React.Dispatch<React.SetStateAction<number | undefined>>;\n  currentItem: number;\n};\n\nexport default function FaqItem({\n  item,\n  activeItem,\n  setActiveItem,\n  currentItem,\n}: Props) {\n  const handleClick = () => {\n    setActiveItem(currentItem);\n    if (currentItem === activeItem) {\n      setActiveItem(undefined);\n    }\n  };\n\n  return (\n    <FaqItemStyles className={`${activeItem === currentItem ? 'active' : ''}`}>\n      <dt>\n        <button\n          aria-expanded={activeItem === currentItem}\n          aria-controls={`accordion-panel-${currentItem}`}\n          id={`accordion-item-${currentItem}`}\n          onClick={handleClick}\n        >\n          <span className=\"question\">{item.question}</span>\n          <span className=\"icon\">\n            <svg\n              className={`${activeItem === currentItem ? 'active' : ''}`}\n              stroke=\"currentColor\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n            >\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth=\"2\"\n                d=\"M19 9l-7 7-7-7\"\n              />\n            </svg>\n          </span>\n        </button>\n      </dt>\n      <dd\n        className={`${activeItem === currentItem ? '' : 'sr-only'}`}\n        id={`accordion-panel-${currentItem}`}\n        aria-labelledby={`accordion-item-${currentItem}`}\n        role=\"region\"\n        hidden={activeItem !== currentItem}\n      >\n        <p>\n          {item.isLink ? (\n            <a href={item.answer} className=\"external-link\">\n              Read this article\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                fill=\"none\"\n                viewBox=\"0 0 24 24\"\n                stroke=\"currentColor\"\n              >\n                <path\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  strokeWidth={2}\n                  d=\"M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14\"\n                />\n              </svg>\n            </a>\n          ) : (\n            item.answer\n          )}\n        </p>\n      </dd>\n    </FaqItemStyles>\n  );\n}\n\nconst FaqItemStyles = styled.div`\n  margin: 1.625rem 0;\n  padding: 1.625rem 0 0;\n  border-top: 1px solid #e5e5e5;\n\n  &:first-of-type {\n    margin: 0;\n    padding: 0;\n    border-top: none;\n  }\n\n  &:last-of-type {\n    padding-bottom: 1.625rem;\n    border-bottom: 1px solid #e5e5e5;\n\n    &.active {\n      padding-bottom: 0;\n    }\n  }\n\n  button {\n    width: 100%;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    text-align: left;\n    color: #a3a3a3;\n\n    &:focus {\n      outline: 2px solid transparent;\n      outline-offset: 2px;\n    }\n\n    &:focus-visible {\n      .question {\n        color: #1967d2;\n        text-decoration: underline;\n      }\n\n      .icon {\n        color: #1967d2;\n      }\n    }\n  }\n\n  p {\n    color: #737373;\n  }\n\n  .external-link {\n    display: inline-flex;\n    color: #4f46e5;\n    text-decoration: underline;\n\n    svg {\n      margin: 0.5rem 0 0 0.25rem;\n      height: 0.875rem;\n      width: 0.875rem;\n    }\n  }\n\n  .question {\n    font-size: 1rem;\n    font-weight: 500;\n    color: #262626;\n  }\n\n  .icon {\n    margin: 0 0 0 1.5rem;\n    height: 1.5rem;\n    width: 1.5rem;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 9999px;\n    border: 1px solid transparent;\n\n    svg {\n      height: 1.25rem;\n      width: 1.25rem;\n\n      &.active {\n        transform: rotate(-180deg);\n      }\n    }\n  }\n\n  dd {\n    margin: 1.25rem 0 0;\n    padding-right: 3rem;\n  }\n`;\n","import React from 'react';\nimport styled from 'styled-components';\nimport Layout from '../components/Layout';\nimport FaqItem from '../components/FaqItem';\n\nconst faqList = [\n  {\n    question:\n      'Can we purchase a memorial while we are living? Does it go into the cemetery?',\n    answer:\n      'Yes, and yes. Some prefer to pre-plan their memorial to ensure that all of their thoughts and wishes are conveyed, and feel that it not only takes the burden off of their survivors, wondering what they would have wanted, but the consultation itself is often easier too. Upon completion of craftsmanship, the memorial will then be personally transferred to the cemetery and installed. When needed, final dates will be added at the time of the survivor’s wish, if not otherwise noted on purchase of when dates shall be added.',\n    isLink: false,\n  },\n  {\n    question: 'When should I purchase a memorial after a death has occurred?',\n    answer:\n      'The answer to this question is simple – when you are ready. We have had people come in a few days after a loved one had passed, and some we don’t see for 2-3 years, which is absolutely understandable, and we’re here whenever you are ready.',\n    isLink: false,\n  },\n  {\n    question:\n      'Does my cemetery have specific restrictions regarding the memorial?',\n    answer:\n      'About half of the cemeteries that we work with do have some type of restrictions regarding either the size, shape, color, or thickness of memorials that are allowed. We often hear that customers were unaware that their cemetery had restrictions, so it is always best to discuss this with the cemetery manager prior to purchasing property. Rest assured, that no matter the restrictions – we will always make an everlasting memory for you and your loved ones to enjoy for many generations to come.',\n    isLink: false,\n  },\n  {\n    question: 'How are monuments made?',\n    answer:\n      'http://www.monumentbuilders.org/consumers_how_monuments_are_made.php',\n    isLink: true,\n  },\n];\n\nexport default function Faq() {\n  const [activeItem, setActiveItem] = React.useState<number | undefined>(\n    undefined\n  );\n\n  return (\n    <Layout\n      title=\"FAQs | Sheboygan Monument and Stone Works | (920) 452-7995\"\n      description=\"Find answers to frequently asked questions about Sheboygan Monument and Stone Works and what we can do for you. See the most common topics and more.\"\n      urlPath=\"faq\"\n    >\n      <FaqStyles>\n        <div className=\"faq-container\">\n          <h2>Frequently asked questions</h2>\n          <div>\n            <dl>\n              {faqList.map((item, i) => (\n                <FaqItem\n                  key={i}\n                  item={item}\n                  activeItem={activeItem}\n                  setActiveItem={setActiveItem}\n                  currentItem={i}\n                />\n              ))}\n            </dl>\n          </div>\n        </div>\n      </FaqStyles>\n    </Layout>\n  );\n}\n\nconst FaqStyles = styled.section`\n  position: relative;\n  padding: 4rem 1.5rem;\n\n  .container {\n    margin: 0 auto;\n    max-width: 1024px;\n    width: 100%;\n  }\n\n  .faq-container {\n    margin: 0 auto;\n    padding: 2.5rem 3.5rem;\n    max-width: 848px;\n    width: 100%;\n    background-color: #fff;\n    border-radius: 0.0625rem;\n    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),\n      0 4px 6px -4px rgb(0 0 0 / 0.1);\n  }\n\n  h2 {\n    margin: 0 0 1.5rem;\n    padding: 0 0 3rem;\n    text-align: center;\n    border-bottom: 1px solid #e5e5e5;\n  }\n\n  @media (max-width: 500px) {\n    padding: 2rem 1.5rem;\n\n    .faq-container {\n      padding: 1.5rem;\n    }\n  }\n`;\n"],"names":["FaqItem","item","activeItem","setActiveItem","currentItem","FaqItemStyles","className","id","onClick","undefined","question","stroke","fill","viewBox","strokeLinecap","strokeLinejoin","strokeWidth","d","role","hidden","isLink","href","answer","xmlns","styled","faqList","Faq","React","Layout","title","description","urlPath","FaqStyles","map","i","key"],"sourceRoot":""}