function Contact({ t }) {
  return (
    <section id="contact" style={{ padding:'clamp(60px,8vw,120px) 0', background:'var(--ink)', color:'white' }}>
      <div className="wrap contact-grid" style={{
        display:'grid',
        gridTemplateColumns:'1fr 1fr',
        gap: 'clamp(30px, 5vw, 80px)',
        alignItems:'center',
      }}>
        <div>
          <div className="mono-tiny" style={{ color:'var(--pink-300)', marginBottom: 16 }}>
            {t.contactKicker}
          </div>
          <h2 className="display" style={{ fontSize:'clamp(48px, 7vw, 96px)', color:'white' }}>
            {t.contactTitle1}<br/>
            <span className="display-italic" style={{ color: 'var(--pink-300)' }}>{t.contactTitle2}</span>
          </h2>
          <p style={{ marginTop: 24, fontSize: 15, lineHeight: 1.65, color:'rgba(255,255,255,0.7)', maxWidth: 380 }}>
            {t.contactPitch}
          </p>
          <a href="https://www.fresha.com/pt/a/belezaa-pinkk-braga-rua-do-rio-homem-10-w0304oy2/booking?menu=true&share=true&pId=2616577&dppub=true&employeeId=4770320&cartId=5c6773b4-d0f2-4079-b20f-64155a71bc15" target="_blank" rel="noopener" className="pill-btn" style={{ marginTop: 28 }}>
            {t.bookFresha} <span className="arrow">→</span>
          </a>
        </div>

        <div style={{
          background:'linear-gradient(160deg, rgba(231,106,160,0.18), rgba(231,106,160,0.04))',
          border:'1px solid rgba(255,255,255,0.1)',
          borderRadius: 20,
          padding: 32,
          display:'flex', flexDirection:'column', gap: 22,
        }}>
          <InfoRow label={t.address} value={"R. do rio homem 10\n4730-580, Portugal"} extra={<MapLinks />} />
          <InfoRow label={t.hours} value={t.hoursValue} />
          <InfoRow label={t.phone} value="+351 920 772 138" />
          <InfoRow label={t.email} value="belezaapinkk@gmail.com" />

          <div style={{ display:'flex', gap: 10, marginTop: 8, flexWrap:'wrap' }}>
            <a href="https://www.instagram.com/belezaapinkk" target="_blank" rel="noopener" style={{
              padding:'8px 14px',
              border:'1px solid rgba(255,255,255,0.2)',
              borderRadius: 999,
              fontSize: 12,
            }}>Instagram</a>
            <a href="https://www.tiktok.com/@belezaapinkk" target="_blank" rel="noopener" style={{
              padding:'8px 14px',
              border:'1px solid rgba(255,255,255,0.2)',
              borderRadius: 999,
              fontSize: 12,
            }}>TikTok</a>
            <a href="https://wa.me/351920772138" target="_blank" rel="noopener" style={{
              padding:'8px 14px',
              border:'1px solid rgba(255,255,255,0.2)',
              borderRadius: 999,
              fontSize: 12,
            }}>WhatsApp</a>
          </div>
        </div>
      </div>
    </section>
  );
}

function MapLinks() {
  const links = [
    {
      name: 'Google Maps',
      url: 'https://www.google.com/maps/place/Belezaapinkk/@41.6091669,-8.4345692,16.5z/data=!4m6!3m5!1s0xd24ff574f4ed785:0xfc8de52e63bcab14!8m2!3d41.6093274!4d-8.4336928!16s%2Fg%2F11wy4ylpz6',
      icon: (
        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0Z"/><circle cx="12" cy="10" r="3"/></svg>
      ),
    },
    {
      name: 'Waze',
      url: 'https://waze.com/ul?ll=41.6093274,-8.4336928&navigate=yes',
      icon: (
        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 3a8 8 0 0 1 8 8c0 3-1 4-1 6 0 1-1 2-2 2H7l-2 2v-3a8 8 0 0 1 7-15Z"/><circle cx="9" cy="11" r=".8" fill="currentColor"/><circle cx="15" cy="11" r=".8" fill="currentColor"/></svg>
      ),
    },
    {
      name: 'Plans',
      url: 'https://maps.apple.com/?q=Belezaapinkk&ll=41.6093274,-8.4336928',
      icon: (
        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M9 4 3 6v14l6-2 6 2 6-2V4l-6 2Z"/><path d="M9 4v14M15 6v14"/></svg>
      ),
    },
  ];
  return (
    <div style={{ display:'flex', gap: 8, marginTop: 10, flexWrap:'wrap' }}>
      {links.map(l => (
        <a key={l.name} href={l.url} target="_blank" rel="noopener" style={{
          display:'inline-flex', alignItems:'center', gap: 6,
          padding:'6px 11px',
          border:'1px solid rgba(255,255,255,0.2)',
          borderRadius: 999,
          fontSize: 11,
          color:'rgba(255,255,255,0.9)',
          background:'rgba(255,255,255,0.04)',
          transition:'background .2s, border-color .2s',
        }}
        onMouseEnter={e => { e.currentTarget.style.background='rgba(255,255,255,0.1)'; e.currentTarget.style.borderColor='rgba(255,255,255,0.35)'; }}
        onMouseLeave={e => { e.currentTarget.style.background='rgba(255,255,255,0.04)'; e.currentTarget.style.borderColor='rgba(255,255,255,0.2)'; }}
        >
          {l.icon}
          <span>{l.name}</span>
        </a>
      ))}
    </div>
  );
}

function InfoRow({ label, value, extra }) {
  return (
    <div className="info-row" style={{ display:'grid', gridTemplateColumns:'120px 1fr', gap: 16, alignItems:'flex-start' }}>
      <div className="mono-tiny" style={{ color:'rgba(255,255,255,0.5)' }}>{label}</div>
      <div>
        <div style={{ whiteSpace:'pre-line', fontSize: 15, lineHeight: 1.5 }}>{value}</div>
        {extra}
      </div>
    </div>
  );
}

window.Contact = Contact;