const WhatsAppIcon = () => (
  <svg viewBox="0 0 48 48" width="36" height="36" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M24 4C12.954 4 4 12.954 4 24c0 3.74 1.012 7.24 2.776 10.24L4 44l10.02-2.74A19.9 19.9 0 0 0 24 44c11.046 0 20-8.954 20-20S35.046 4 24 4Z" fill="#25D366"/>
    <path d="M33.5 29.09c-.5-.25-2.96-1.46-3.42-1.63-.46-.17-.79-.25-1.12.25-.33.5-1.29 1.63-1.58 1.96-.29.33-.58.37-1.08.12-.5-.25-2.11-.78-4.02-2.48-1.49-1.33-2.49-2.97-2.78-3.47-.29-.5-.03-.77.22-1.02.23-.22.5-.58.75-.87.25-.29.33-.5.5-.83.17-.33.08-.62-.04-.87-.12-.25-1.12-2.7-1.54-3.7-.4-.97-.82-.84-1.12-.85-.29-.01-.62-.01-.96-.01-.33 0-.87.12-1.33.62-.46.5-1.75 1.71-1.75 4.17s1.79 4.84 2.04 5.17c.25.33 3.52 5.38 8.53 7.54 1.19.51 2.12.82 2.85 1.05 1.2.38 2.29.33 3.15.2.96-.14 2.96-1.21 3.38-2.38.42-1.17.42-2.17.29-2.38-.12-.21-.46-.33-.96-.58Z" fill="#fff"/>
  </svg>
);

const InstagramIcon = () => (
  <svg viewBox="0 0 48 48" width="36" height="36" fill="none" xmlns="http://www.w3.org/2000/svg">
    <radialGradient id="ig1" cx="19%" cy="99%" r="128%">
      <stop offset="0%" stopColor="#ffd600"/>
      <stop offset="20%" stopColor="#ff7a00"/>
      <stop offset="40%" stopColor="#ff0069"/>
      <stop offset="70%" stopColor="#d300c5"/>
      <stop offset="100%" stopColor="#7638fa"/>
    </radialGradient>
    <rect width="48" height="48" rx="12" fill="url(#ig1)"/>
    <rect x="10" y="10" width="28" height="28" rx="8" stroke="#fff" strokeWidth="2.5" fill="none"/>
    <circle cx="24" cy="24" r="7" stroke="#fff" strokeWidth="2.5" fill="none"/>
    <circle cx="33" cy="15" r="2" fill="#fff"/>
  </svg>
);

const LocationIcon = () => (
  <svg viewBox="0 0 48 48" width="36" height="36" fill="none" xmlns="http://www.w3.org/2000/svg">
    <circle cx="24" cy="24" r="24" fill="#C4A76E"/>
    <path d="M24 12c-5.523 0-10 4.477-10 10 0 7 10 16 10 16s10-9 10-16c0-5.523-4.477-10-10-10Zm0 13.5a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7Z" fill="#fff"/>
  </svg>
);

const ContactCard = ({ icon, label, value, href }) => (
  <a
    href={href || '#'}
    target={href ? '_blank' : undefined}
    rel="noopener noreferrer"
    className="mc-contact-card"
    style={ccS.card}
    onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-6px)'; e.currentTarget.style.boxShadow = '0 16px 48px rgba(0,0,0,0.25)'; }}
    onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = '0 4px 24px rgba(0,0,0,0.12)'; }}
  >
    <div style={ccS.iconRing}>
      {icon}
    </div>
    <span style={ccS.cardLabel}>{label}</span>
    <span style={ccS.cardValue}>{value}</span>
  </a>
);

const Contact = () => (
  <section className="mc-contact-section" style={ctS.section} id="contact">
    <div className="mc-contact-inner" style={ctS.inner}>
      <div style={ctS.header}>
        <div style={ctS.eyebrow}>
          <span style={ctS.line}></span>
          <span style={ctS.eyebrowText}>Contato</span>
          <span style={ctS.line}></span>
        </div>
        <h2 className="mc-contact-h2" style={ctS.h2}>Fale Conosco</h2>
        <div style={ctS.rule}></div>
        <p style={ctS.lead}>
          Entre em contato pelo WhatsApp ou nas nossas redes sociais.<br />
          Atendemos com atenção e agilidade.
        </p>
      </div>

      <div className="mc-contact-cards" style={ctS.cards}>
        <ContactCard
          icon={<WhatsAppIcon />}
          label="WhatsApp"
          value="(11) 9 7192-7652"
          href="https://wa.me/5511971927652"
        />
        <ContactCard
          icon={<InstagramIcon />}
          label="Instagram"
          value="@moratoecostaadvogados"
          href="https://instagram.com/moratoecostaadvogados"
        />
        <ContactCard
          icon={<LocationIcon />}
          label="Endereço"
          value="Rua Salem Bechara, 140, Sala 1402 — Osasco, SP"
          href="https://maps.google.com/?q=Rua+Salem+Bechara+140+Osasco+SP"
        />
      </div>
    </div>
  </section>
);

const ccS = {
  card: {
    display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 16,
    background: 'rgba(255,255,255,0.07)', border: '1px solid rgba(196,167,110,0.3)',
    borderRadius: 24, padding: '44px 32px', textDecoration: 'none',
    transition: 'transform 0.25s ease, box-shadow 0.25s ease',
    boxShadow: '0 4px 24px rgba(0,0,0,0.12)', cursor: 'pointer', flex: 1,
  },
  iconRing: {
    width: 80, height: 80, borderRadius: '50%',
    border: '2px solid rgba(196,167,110,0.5)',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    background: 'rgba(255,255,255,0.05)',
  },
  cardLabel: {
    fontFamily: "'DM Sans', sans-serif", fontSize: 10, fontWeight: 700,
    letterSpacing: '0.16em', textTransform: 'uppercase', color: '#C4A76E',
  },
  cardValue: {
    fontFamily: "'DM Sans', sans-serif", fontSize: 15, fontWeight: 300,
    color: 'rgba(255,255,255,0.85)', textAlign: 'center', lineHeight: 1.5,
  },
};

const ctS = {
  section: { background: '#436355', padding: '100px 0' },
  inner: { maxWidth: 1100, margin: '0 auto', padding: '0 40px', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 60 },
  header: { display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', gap: 16 },
  eyebrow: { display: 'flex', alignItems: 'center', gap: 12 },
  line: { display: 'block', width: 32, height: 1, background: '#C4A76E' },
  eyebrowText: { fontFamily: "'DM Sans', sans-serif", fontSize: 11, fontWeight: 700, letterSpacing: '0.16em', textTransform: 'uppercase', color: '#C4A76E' },
  h2: { fontFamily: "'Libre Caslon Text', serif", fontStyle: 'italic', fontSize: 42, fontWeight: 400, color: '#fff', lineHeight: 1.2 },
  rule: { height: 1, background: '#C4A76E', width: 48 },
  lead: { fontFamily: "'DM Sans', sans-serif", fontSize: 15, fontWeight: 300, color: 'rgba(255,255,255,0.65)', lineHeight: 1.8, maxWidth: 500 },
  cards: { display: 'flex', gap: 24, width: '100%', flexWrap: 'wrap' },
};

Object.assign(window, { Contact });