import { useEmailLink } from "../../hooks/use-email-link";
import { usePiwik } from "../../hooks/use-piwik";
import { useSiteMetadata } from "../../hooks/use-site-metadata";
import * as styles from "./styles.module.scss";
import Layout from "../../components/Layout";
import LinkUnderline from "../../components/LinkUnderline";
import React from "react";
import SEO from "../../components/Seo";
import Text, { Size, Element, Measure } from "../../components/Text";

const Contatti = () => {
  const { siteMetadata } = useSiteMetadata();
  const emailLink = useEmailLink("Contatti", "/contatti");
  const titolo = `Contatti`;

  return (
    <Layout>
      <SEO title={titolo} isContact={true} />
      <main className={styles.contact} role="main">
        <div className={styles.body}>
          <header className={styles.header}>
            <Text size={Size.H1} element={Element.H1}>
              Contatti
            </Text>
          </header>
          <Text size={Size.P6} element={Element.P} measure={Measure.Normal}>
            {siteMetadata.contactBody}
          </Text>
          <Text size={Size.P6} element={Element.P} measure={Measure.Normal}>
            Per maggiori informazioni su questa collezione o un oggetto in
            particolare non esitate a{" "}
            <a
              href={emailLink}
              onClick={() => usePiwik(["trackEvent", "Contatti", titolo])}
            >
              <LinkUnderline>contattarmi</LinkUnderline>
            </a>
            .
          </Text>
        </div>
      </main>
    </Layout>
  );
};

export default Contatti;
