/* global React */

function SiteFooter({ kvk = '99344130', email = 'info@caronstudio.eu', phone = '06 48 22 83 30', logo = 'assets/logo-white.png' }) {
  return (
    <footer className="cs-footer">
      <div className="cs-footer-grid">
        <div className="cs-footer-col">
          <img src={logo} alt="Caron Studio" className="cs-footer-mark-img"/>
          <div className="name">Een merk dat <em>klopt</em><br/>van A tot Z</div>
          <p>Full service visual designer voor ondernemers die willen opvallen, en niet opgaan in de massa.</p>
        </div>
        <div className="cs-footer-col">
          <h5>Studio</h5>
          <a href="diensten.html">Diensten</a>
          <a href="portfolio.html">Portfolio</a>
          <a href="over-mij.html">Over mij</a>
          <a href="contact.html">Contact</a>
        </div>
        <div className="cs-footer-col">
          <h5>Contact</h5>
          <a href={`mailto:${email}`}>{email}</a>
          <a href={`tel:${phone.replace(/\s/g, '')}`}>{phone}</a>
          <p>Rotterdam, NL</p>
        </div>
        <div className="cs-footer-col">
          <h5>Volg</h5>
          <div className="cs-footer-socials">
            <a href="https://www.instagram.com/_caronstudio.eu/" aria-label="Instagram"><svg viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg></a>
            <a href="https://www.linkedin.com/in/anne-caron-732b5a242/" aria-label="LinkedIn"><svg viewBox="0 0 24 24"><path d="M20.45 20.45h-3.55v-5.57c0-1.33-.03-3.04-1.85-3.04-1.86 0-2.14 1.45-2.14 2.94v5.67H9.35V9h3.41v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43c-1.14 0-2.06-.93-2.06-2.07 0-1.14.92-2.06 2.06-2.06 1.14 0 2.06.92 2.06 2.06 0 1.14-.92 2.07-2.06 2.07zm1.78 13.02H3.56V9h3.56v11.45z"/></svg></a>
          </div>
        </div>
      </div>
      <div className="cs-footer-bottom">
        <span>Caron Studio</span>
        <span>KVK {kvk}</span>
        <a href="algemene-voorwaarden.html">Algemene voorwaarden</a>
      </div>
    </footer>
  );
}

window.SiteFooter = SiteFooter;