function Contact(){
  return (
    <section className="contact" id="contacto" data-screen-label="07 Contact">
      <div className="wrap">
        <div className="contact-lead">
          <span className="eyebrow reveal" data-i18n="c.eyebrow">{window.t('c.eyebrow')}</span>
          <h2 className="reveal" style={{marginTop:24}} data-i18n-html="c.title" dangerouslySetInnerHTML={{__html: window.t('c.title')}}/>
          <p className="reveal" data-i18n="c.p">{window.t('c.p')}</p>

          <div className="contact-channels">
            {[
              {k:'c.ch3.k', v:'c.ch3.v', href:'https://maps.google.com/?q=Rua+Alfredo+da+Silva+14,+Amadora,+Lisboa', ico:(<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M12 21s7-6.5 7-12a7 7 0 0 0-14 0c0 5.5 7 12 7 12z"/><circle cx="12" cy="9" r="2.5"/></svg>)},
            ].map((c,i) => (
              <a className="chan" href={c.href} key={i} target={c.href.startsWith('http') ? '_blank' : undefined} rel={c.href.startsWith('http') ? 'noopener' : undefined}>
                <span className="ico">{c.ico}</span>
                <span className="txt">
                  <span className="k" data-i18n={c.k}>{window.t(c.k)}</span>
                  <span className="v" data-i18n={c.v}>{window.t(c.v)}</span>
                </span>
                <span className="arrow">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" width="18" height="18"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
                </span>
              </a>
            ))}
          </div>
        </div>

        <div className="contact-socials reveal">
          <a href="https://www.instagram.com/gustavosousa_kw/" target="_blank" rel="noopener" className="social-icon" aria-label="Instagram">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" width="28" height="28">
              <rect x="2" y="2" width="20" height="20" rx="5"/>
              <circle cx="12" cy="12" r="4.5"/>
              <circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none"/>
            </svg>
            <span>Instagram</span>
          </a>
          <a href="https://www.facebook.com/gustavo.sousa.kw/" target="_blank" rel="noopener" className="social-icon" aria-label="Facebook">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" width="28" height="28">
              <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/>
            </svg>
            <span>Facebook</span>
          </a>
          <a href="https://www.linkedin.com/in/gustavo-sousa-53253318/" target="_blank" rel="noopener" className="social-icon" aria-label="LinkedIn">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" width="28" height="28">
              <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/>
              <rect x="2" y="9" width="4" height="12"/>
              <circle cx="4" cy="4" r="2"/>
            </svg>
            <span>LinkedIn</span>
          </a>
          <a href="mailto:gustavo@gustavosousa.pt" className="social-icon" aria-label="Email">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" width="28" height="28">
              <rect x="3" y="5" width="18" height="14" rx="1"/>
              <path d="M3 7l9 7 9-7"/>
            </svg>
            <span>Email</span>
          </a>
        </div>
      </div>
    </section>
  );
}
window.Contact = Contact;