{"version":3,"sources":["webpack://meci-mercantil-de-equipo-contra-incendio/./src/components/iframe-form.js","webpack://meci-mercantil-de-equipo-contra-incendio/./src/components/contact-form.js","webpack://meci-mercantil-de-equipo-contra-incendio/./src/templates/products-template.js"],"names":["source","src","className","title","style","height","props","state","render","id","Helmet","Math","random","async","defer","this","Component","data","wpPost","slug","content","featuredImage","alt","node","altText","sourceUrl","srcSet","Link","to","dangerouslySetInnerHTML","__html"],"mappings":"2OA2BA,EAtBmB,SAAC,GAAgB,IAAdA,EAAa,EAAbA,OACpB,IAAKA,EACH,OAAO,yCAET,IAAMC,EAAMD,EACZ,OAEE,uBAAKE,UAAU,UACb,uBAAKA,UAAU,SACb,0BACEC,MAAM,eACND,UAAU,SACVE,MAAO,CAAEC,OAAQ,SACjBJ,IAAKA,OCyBf,E,YAtCE,WAAYK,GAAQ,IAAD,SACjB,cAAMA,IAAN,MACKC,MAAQ,CACXN,IAAK,2CAHU,E,+BAOnBO,OAAA,WACE,OACE,2BAASC,GAAG,aACV,uBAAKP,UAAU,eACb,gBAACQ,EAAA,EAAD,KACE,0BACET,IAAG,6CAA+CU,KAAKC,SACvDC,OAAK,EACLC,OAAK,KAGT,uBAAKZ,UAAU,mEACb,uBAAKA,UAAU,WACb,qBAAGA,UAAU,6CAAb,qBAGA,qBAAGA,UAAU,eAAb,uMAOF,gBAAC,EAAD,CAAYF,OAAQe,KAAKR,MAAMN,U,GA/BjBe,c,+FCiF1B,UA7EwB,SAAC,GAIlB,IAAD,IAHJC,KACEC,OAAgBf,GAEd,EAFQgB,KAER,EAFchB,OAAOiB,EAErB,EAFqBA,QAASC,EAE9B,EAF8BA,cAYlC,OACE,gBAAC,IAAD,KACE,gBAAC,IAAD,CAAKlB,MAAOA,IACZ,uBAAKD,UAAU,kFACb,uBAAKA,UAAU,4CACb,uBACEA,UAAU,sCACVoB,IAAKD,EAAcE,KAAKC,QACxBvB,IAAKoB,EAAcE,KAAKE,UACxBC,OAAQL,EAAcE,KAAKG,SAE7B,gBAAC,EAAAC,KAAD,CACEzB,UAAU,0CACV0B,GAAG,cAFL,0BAsBF,uBAAKnB,GAAG,gBAAgBP,UAAU,mBAChC,sBAAIA,UAAU,gDACXC,GAEH,uBAAK0B,wBAAyB,CAAEC,OAAQV,OAG5C,gBAAC,IAAD","file":"component---src-templates-products-template-js-70d87702b8cf82f52442.js","sourcesContent":["// Step 1: Import React. This lets you use JSX inside your .js file.\r\nimport * as React from 'react'\r\n\r\n/* Step 2: Define your component. Note that your\r\ncomponent name should start with a capital letter. */\r\nconst IframeForm = ({ source }) => {\r\n  if (!source) {\r\n    return <div>Loading...</div>\r\n  }\r\n  const src = source\r\n  return (\r\n    // basic bootstrap classes. you can change with yours.\r\n    <div className='col-12'>\r\n      <div className='w-100'>\r\n        <iframe\r\n          title='Contact form'\r\n          className='col-12'\r\n          style={{ height: 30 + 'rem' }}\r\n          src={src}\r\n        ></iframe>\r\n      </div>\r\n    </div>\r\n  )\r\n}\r\n\r\n/* Step 3: Export your component so it\r\ncan be used by other parts of your app. */\r\nexport default IframeForm\r\n","import React, { Component } from 'react'\r\nimport Helmet from 'react-helmet'\r\nimport IframeForm from './iframe-form'\r\n\r\nclass ContactForm extends Component {\r\n  constructor(props) {\r\n    super(props)\r\n    this.state = {\r\n      src: 'https://meci.mx/email-form/contacto.php',\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <section id='hero-form'>\r\n        <div className='col-12 my-5'>\r\n          <Helmet>\r\n            <script\r\n              src={`https://www.google.com/recaptcha/api.js?r=${Math.random()}`}\r\n              async\r\n              defer\r\n            ></script>\r\n          </Helmet>\r\n          <div className='d-flex flex-wrap align-items-center col-12 col-md-8 mx-auto p-3'>\r\n            <div className='mx-auto'>\r\n              <p className='fs-2 fw-bold text-center text-site-orange'>\r\n                PONTE EN CONTACTO\r\n              </p>\r\n              <p className='text-center'>\r\n                Si tienes dudas acerca de algún producto o equipo, ponte en\r\n                contacto con uno de nuestros asesores. Es totalmente sin\r\n                compromiso y puedes asegurarte de que obtendrás la información\r\n                que necesitas.\r\n              </p>\r\n            </div>\r\n            <IframeForm source={this.state.src} />\r\n          </div>\r\n        </div>\r\n      </section>\r\n    )\r\n  }\r\n}\r\n\r\nexport default ContactForm\r\n\r\n// export default function ContactForm() {\r\n//   return (\r\n//     <section id='hero-form'>\r\n//       <div className='col-12 my-5'>\r\n//         <Helmet>\r\n//           <script\r\n//             src={`https://www.google.com/recaptcha/api.js?r=${Math.random()}`}\r\n//             async\r\n//             defer\r\n//           ></script>\r\n//         </Helmet>\r\n//         <div className='d-flex flex-wrap align-items-center col-12 col-md-8 mx-auto p-3'>\r\n//           <div className='mx-auto'>\r\n//             <p className='fs-2 fw-bold text-center text-site-orange'>\r\n//               PONTE EN CONTACTO\r\n//             </p>\r\n//             <p className='text-center'>\r\n//               Si tienes dudas acerca de algún producto o equipo, ponte en\r\n//               contacto con uno de nuestros asesores. Es totalmente sin\r\n//               compromiso y puedes asegurarte de que obtendrás la información que\r\n//               necesitas.\r\n//             </p>\r\n//           </div>\r\n//           <IframeForm />\r\n//           {/* iframe ends */}\r\n//         </div>\r\n//       </div>\r\n//     </section>\r\n//   )\r\n// }\r\n","import React from 'react'\r\nimport { graphql, Link } from 'gatsby'\r\n//import { GatsbyImage, getImage, getSrc } from 'gatsby-plugin-image'\r\n\r\nimport Layout from '../components/layout'\r\nimport Seo from '../components/seo'\r\nimport ContactForm from '../components/contact-form'\r\n\r\nconst ProductTemplate = ({\r\n  data: {\r\n    wpPost: { slug, title, content, featuredImage },\r\n  },\r\n}) => {\r\n  // const image = getImage(\r\n  //   featuredImage.node.localFile.childImageSharp.gatsbyImageData\r\n  // )\r\n  // const src = getSrc(\r\n  //   featuredImage.node.localFile.childImageSharp.gatsbyImageData\r\n  // )\r\n\r\n  //let myurl = 'https://www.server.amerex.mx/pdf-meci/' + slug + '.pdf'\r\n\r\n  return (\r\n    <Layout>\r\n      <Seo title={title} />\r\n      <div className='d-flex flex-md-nowrap flex-wrap my-md-5 my-3 px-5 gap-3 justify-content-center'>\r\n        <div className='col-12 col-md-4 mb-4 mb-md-0 text-center'>\r\n          <img\r\n            className='img-fluid mb-3 p-3 bg-white rounded'\r\n            alt={featuredImage.node.altText}\r\n            src={featuredImage.node.sourceUrl}\r\n            srcSet={featuredImage.node.srcSet}\r\n          />\r\n          <Link\r\n            className='btn btn-orange btn-lg ms-3 mt-3 mt-md-0'\r\n            to='#hero-form'\r\n          >\r\n            SOLICITAR INFORMACIÓN\r\n          </Link>\r\n          {/* <GatsbyImage\r\n            className='m-3'\r\n            image={image}\r\n            content={src}\r\n            // image={featuredImage.node.localFile.childImageSharp.gatsbyImageData}\r\n            alt={featuredImage.node.altText}\r\n          /> */}\r\n          {/* <a\r\n            className='btn btn-danger btn-lg'\r\n            href={myurl}\r\n            target='_blank'\r\n            rel='noopener noreferrer'\r\n          >\r\n            DESCARGAR PDF\r\n          </a> */}\r\n        </div>\r\n        <div id='products-info' className='col-12 col-md-6'>\r\n          <h1 className='fs-2 fw-bold text-site-orange text-uppercase'>\r\n            {title}\r\n          </h1>\r\n          <div dangerouslySetInnerHTML={{ __html: content }} />\r\n        </div>\r\n      </div>\r\n      <ContactForm />\r\n    </Layout>\r\n  )\r\n}\r\n\r\nexport const query = graphql`\r\n  query ($id: String) {\r\n    wpPost(id: { eq: $id }) {\r\n      id\r\n      title\r\n      content\r\n      slug\r\n      featuredImage {\r\n        node {\r\n          sourceUrl\r\n          srcSet\r\n          altText\r\n        }\r\n      }\r\n    }\r\n  }\r\n`\r\n\r\nexport default ProductTemplate\r\n"],"sourceRoot":""}