{"version":3,"sources":["webpack:///./src/pages/contact.js","webpack:///./src/components/pricing.js","webpack:///./src/images/check-circle-icon.svg","webpack:///./src/components/contactForm.js"],"names":["Section","styled","div","SuccessWrapper","ContactPage","useState","submitted","setSubmitted","images","useStaticQuery","smallHeader","title","image","header","childImageSharp","fluid","description","Table","table","AltTable","Headline","h2","Headline2","h3","Pricing","className","width","style","React","CheckCircleIcon","props","createElement","defaultProps","module","exports","default","InputGroup","Center","CaptchaBox","CaptchaCode","RefreshButton","button","CaptchaInputStyle","ContactForm","nameInput","useRef","emailInput","phonenumberInput","restaurantInput","captchaInput","captchaCode","setCaptchaCode","generateCaptcha","characters","captcha","i","charAt","Math","floor","random","length","useEffect","ref","type","required","name","placeholder","textAlign","onClick","ev","preventDefault","stopPropagation","current","value","alert","fetch","method","body","JSON","stringify","email","phonenumber","restaurant","unwichtig","then","r","console","log","data","catch","error"],"mappings":"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","file":"component---src-pages-contact-js-8451d822b69f4e94622e.js","sourcesContent":["import React, {useState} from \"react\"\nimport { graphql, useStaticQuery } from \"gatsby\"\n\nimport Layout from \"../components/layout\"\nimport SEO from \"../components/seo\"\nimport styled from \"styled-components\"\nimport { ContactForm } from \"../components/contactForm\"\nimport CheckCircleIcon from \"../images/check-circle-icon.svg\";\nimport {Pricing} from \"../components/pricing\";\nexport const Section = styled.div`\n  max-width: 940px;\n  margin: 0 auto;\n  padding: 40px 0;\n  font-size: 18px;\n   @media (max-width: 991px) {\n    padding: 40px;\n    \n  }\n`;\n\nexport const SuccessWrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  align-content: center;\n  p { font-size: 20px; }\n  svg {\n    margin: 60px 0;\n  }\n`;\n\nconst ContactPage = () => {\n  const [submitted, setSubmitted] = useState(false);\n  const images = useStaticQuery(graphql`\n    query {\n      header: file(relativePath: { eq: \"contact-background.jpg\" }) {\n        childImageSharp {\n          fluid(maxWidth: 1440) {\n            ...GatsbyImageSharpFluid_withWebp\n          }\n        }\n      }\n    }\n  `);\n\n  return (\n    <Layout\n      smallHeader={true}\n      title={\"PERSÖNLICHES ANGEBOT EINHOLEN\"}\n      image={images.header.childImageSharp.fluid}\n    >\n      <SEO\n        title=\"Angebot einholen\"\n        description={\n          \"Kontaktieren Sie uns völlig unverbindlich und wir melden uns bei Ihnen zurück. Wir besprechen das System, Ihre individuellen Wünsche und finden eine für Ihre Bedürfnisse optimierte Lösung.\"\n        }\n      />\n      <Section>\n        {submitted && <>\n          <SuccessWrapper>\n            <CheckCircleIcon />\n            <p>\n              GRAZIE • THANKS • どうも • MERCI • DANKE\n            </p>\n            <p>\n              Wir melden uns schnellstmöglich bei Ihnen!\n            </p>\n          </SuccessWrapper>\n        </>}\n        {!submitted && <><p>\n          Wenn wir Ihr Interesse geweckt haben, oder Sie noch Fragen haben,\n          trauen Sie sich ruhig.\n        </p>\n        <p>\n          Kontaktieren Sie uns völlig unverbindlich und wir melden uns bei Ihnen\n          zurück. Wir besprechen das Sytem, Ihre individuellen Wünsche und\n          finden eine für Ihre Bedürfnisse optimierte Lösung. Sollten wir in\n          keiner Form zueinander finden, haben Sie vielleicht trotzdem ein paar\n          neue Kunden gewonnen und wir eine neue Location für die Mittagspause.\n          :)\n        </p>\n\n          <Pricing />\n\n        <ContactForm setSubmitted={setSubmitted} /></>}\n      </Section>\n    </Layout>\n  )\n}\n\nexport default ContactPage\n","import React from \"react\";\nimport styled from \"styled-components\";\n\nconst Table = styled.table`\n  margin-bottom: 80px;\n  border: 1px solid #760F19;\n  td {\n    width: 100%;\n    border: none;\n    padding: 20px 10px;\n    \n  }\n  td.first {\n    width: 0%;\n    background:#f1f1f1;\n    \n  }\n  td.nopadding {\n    padding: 0;\n  }\n  tbody > tr, tbody > tr > td  {\n    border: 1px solid #760F19;\n  }\n  \n  .nested-table {\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    td.right {\n      border-left: 1px solid #760F19;\n    }\n    td.left {\n      border-right: 1px solid #760F19;\n    }\n  }\n  \n  @media (max-width: 670px){\n    display: none;\n  }\n`;\n\nconst AltTable = styled.div`\n    margin-bottom: 50px;\n @media (min-width: 671px){\n    display: none;\n  }\n  \n`;\n\nconst Headline = styled.h2`\n    margin-top: 50px;\n`;\n\nconst Headline2 = styled.h3`\n    font-size: 20px;\n    margin-bottom: 5px;\n`;\n\nexport const Pricing = () => {\n    return <div>\n        <Headline>PREISE</Headline>\n        <AltTable>\n            <Headline2>Inklusivleistungen</Headline2>\n            <ul>\n                <li>personalisierte App inkl. Webshop</li>\n                <li>500 Flyer</li>\n                <li>Content Management & Support</li>\n                <li>Benötigte Hardware in Form eines Mini-PC & Druckers</li>\n            </ul>\n            <Headline2>\n                Einrichtung\n            </Headline2>\n            <p>Einmalig für initiales Aufsetzen, Hardware und Einrichtung 249€</p>\n            <Headline2>\n                Lizenz\n            </Headline2>\n            <p>\n                monatlich 149€ oder jährlich 1490€.\n            </p>\n            <Headline2>\n                Besonderheiten\n            </Headline2>\n            <ul>\n                <li>\n                    Monatlich kündbar\n                </li>\n                <li>\n                    Betreuung & Support inklusive\n                </li>\n            </ul>\n        </AltTable>\n        <Table>\n            <tbody>\n            <tr>\n                <td className={\"first\"}>\n                    Inklusivleistungen\n                </td>\n                <td>\n                    personalisierte App inkl. Webshop • 500 Flyer • Content Management & Support • Benötigte Hardware in Form eines Mini-PC & Druckers\n                </td>\n            </tr>\n            <tr>\n                <td className={\"first\"}>Einrichtung</td>\n                <td>Einmalig für initiales Aufsetzen, Hardware und Einrichtung 249€</td>\n            </tr>\n            <tr>\n                <td className={\"first\"}>Lizenz</td>\n                <td className={\"nopadding\"}>\n                    <table className={\"nested-table\"} width={\"100%\"}>\n                        <tr>\n                            <td style={{width: \"50%\"}}>\n                                monatlich 149€\n                            </td>\n                            <td className=\"right\" style={{width: \"50%\"}}>\n                                oder jährlich 1490€\n                            </td>\n                        </tr>\n                    </table>\n                </td>\n            </tr>\n            <tr>\n                <td className={\"first\"}>\n                    Besonderheiten\n                </td>\n                <td className={\"nopadding\"}>\n                    <table className={\"nested-table\"} width={\"100%\"}>\n                        <tr>\n                            <td className={\"left\"} style={{width: \"33%\"}}>\n                                Monatlich kündbar\n                            </td>\n                            <td className=\"right\" style={{width: \"33%\"}}>Betreuung & Support inklusive</td>\n                        </tr>\n                    </table>\n                </td>\n            </tr>\n            </tbody>\n        </Table>\n    </div>\n};\n","var React = require('react');\n\nfunction CheckCircleIcon (props) {\n    return React.createElement(\"svg\",props,React.createElement(\"g\",{\"style\":{\"stroke\":\"#19760f\",\"strokeWidth\":\"3\",\"fill\":\"none\",\"fillRule\":\"evenodd\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\"},\"transform\":\"translate(2)\"},[React.createElement(\"path\",{\"d\":\"m80 38.32v3.68c-.0101287 17.7147434-11.6708242 33.3128519-28.6585904 38.3356039-16.9877661 5.0227519-35.2558354-1.7263554-44.89758926-16.5873385-9.64175384-14.8609832-8.36036656-34.2937095 3.14927644-47.7599768 11.50964302-13.46626735 30.50575382-17.75818746 46.68690322-10.5482886\",\"key\":0}),React.createElement(\"path\",{\"d\":\"m80 10-40 40.04-12-12\",\"key\":1})]));\n}\n\nCheckCircleIcon.defaultProps = {\"height\":\"84\",\"viewBox\":\"0 0 84 84\",\"width\":\"84\"};\n\nmodule.exports = CheckCircleIcon;\n\nCheckCircleIcon.default = CheckCircleIcon;\n","import React, { useRef, useState } from \"react\";\nimport styled from \"styled-components\";\nimport { Button } from \"./button\";\n\nconst InputGroup = styled.div`\n  display: flex;\n  justify-content: space-between;\n  font-size: 18px;\n  align-items: center;\n  div {\n    margin: 0 0px 40px;\n  }\n  input {\n    max-width: 444px;\n    width: 100%;\n    height: 45px;\n    line-height: 45px;\n    border: 1px solid #760f19;\n    border-radius: 8px;\n\n    padding: 0 15px;\n    margin: 0 0 40px;\n  }\n  \n  @media (max-width: 767px) {\n    flex-direction: column;\n    div {\n      display: none;\n    }\n    input {\n      margin: 0 !important;\n      margin-bottom: 20px !important;\n    }\n  }\n`;\n\nconst Center = styled.div`\n  display: flex;\n  justify-content: center;\n`;\n\nconst CaptchaBox = styled.div`\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  margin-bottom: 15px;\n  border-radius: 8px;\n  font-size: 20px;\n`;\n\nconst CaptchaCode = styled.div`\n  font-size: 20px;\n  font-weight: bold;\n  padding: 4px 15px;\n  border-radius: 8px;\n  border: 2px solid #f9db37;\n`;\n\nconst RefreshButton = styled.button`\n  background: #760f19;\n  border: none;\n  color: #fff;\n  font-family: inherit;\n  font-size: 24px !important;\n  padding: 4px 4px 4px;\n  border-radius: 4px;\n  text-transform: uppercase;\n  &:hover {\n      background-color: #9f1828;\n      cursor: pointer;\n  }\n`\n\nconst CaptchaInputStyle = styled.div`\n  display: flex;\n  justify-content: space-between;\n  font-size: 18px;\n  align-items: center;\n  div {\n    margin: 0 0px 40px;\n  }\n  input {\n    max-width: 222px;\n    width: 100%;\n    height: 38px;\n    line-height: 45px;\n    border: 1px solid #760f19;\n    border-radius: 8px;\n\n    padding: 0 15px;\n    margin: 0 0 40px;\n  }\n  \n  @media (max-width: 767px) {\n    flex-direction: column;\n    div {\n      display: none;\n    }\n    input {\n      margin: 0 !important;\n      margin-bottom: 20px !important;\n    }\n  }\n`;\n\nexport const ContactForm = ({ setSubmitted }) => {\n  const nameInput = useRef();\n  const emailInput = useRef();\n  const phonenumberInput = useRef();\n  const restaurantInput = useRef();\n  const captchaInput = useRef();\n  const [captchaCode, setCaptchaCode] = useState(\"\");\n\n  // Funktion, um ein neues Captcha zu generieren\n  const generateCaptcha = () => {\n    const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';\n    let captcha = '';\n    for (let i = 0; i < 6; i++) {\n      captcha += characters.charAt(Math.floor(Math.random() * characters.length));\n    }\n    setCaptchaCode(captcha);\n  };\n\n  // Funktion für das erste Laden des Captchas\n  React.useEffect(() => {\n    generateCaptcha();\n  }, []);\n\n  const submitForm = (ev) => {\n    ev.preventDefault();\n    ev.stopPropagation();\n\n    // Überprüfen, ob der Captcha-Code korrekt ist\n    if (captchaInput.current.value !== captchaCode) {\n      alert(\"Die Eingabe war leider nicht korrekt. Bitte tragen Sie die 6 Zeichen aus dem gelben Kasten in das Feld mit der Beschriftung 'Zeichenfolge' ein.\");\n      generateCaptcha(); // Neues Captcha generieren\n      return false;\n    }\n\n    fetch(`https://7oj07qp452.execute-api.eu-central-1.amazonaws.com/v1//mainorder-contact-form`, {\n      method: \"post\",\n      body: JSON.stringify({\n        name: nameInput.current.value,\n        email: emailInput.current.value,\n        phonenumber: phonenumberInput.current.value,\n        restaurant: restaurantInput.current.value,\n        unwichtig: -81337,\n      }),\n    })\n      .then((r) => {\n        console.log(r.data);\n        setSubmitted(true);\n      })\n      .catch((error) => {\n        console.error(\"Fehler beim Absenden:\", error);\n        alert(\"Ein Fehler ist aufgetreten. Bitte versuchen Sie es später erneut.\");\n      });\n    return false;\n  };\n\n  return (\n    <div>\n      <form>\n        <InputGroup>\n          <input\n            ref={nameInput}\n            type={\"text\"}\n            required\n            name=\"name\"\n            placeholder={\"Vorname, Nachname\"}\n          />\n          <div style={{ width: \"200px\" }}>&nbsp;</div>\n          <input\n            ref={restaurantInput}\n            type={\"text\"}\n            required\n            name=\"restaurant\"\n            placeholder={\"Restaurant / Café\"}\n          />\n        </InputGroup>\n        <InputGroup>\n          <input ref={emailInput} type={\"text\"} name=\"email\" placeholder={\"E-mail\"} />\n          <div style={{ width: \"200px\", textAlign: \"center\" }}>oder</div>\n          <input\n            ref={phonenumberInput}\n            type={\"text\"}\n            name={\"phonenumber\"}\n            placeholder={\"Telefon-Nr.\"}\n          />\n        </InputGroup>\n        <Center>\n        <CaptchaBox>\n          <CaptchaCode>{captchaCode}</CaptchaCode>\n          <RefreshButton onClick={generateCaptcha} type=\"button\">\n            ↻\n          </RefreshButton>\n        </CaptchaBox>\n        </Center>\n        <Center>\n        <CaptchaInputStyle>\n          <input\n            ref={captchaInput}\n            type={\"text\"}\n            required\n            name=\"captcha\"\n            placeholder={\"Zeichenfolge\"}\n          />\n        </CaptchaInputStyle>\n        </Center>\n        <Center>\n          <Button onClick={submitForm} type={\"button\"}>\n            ABSENDEN\n          </Button>\n        </Center>\n      </form>\n    </div>\n  );\n};\n"],"sourceRoot":""}