function Contact() {
  const D = (window.SITE && window.SITE.contact) || {};
  const items = D.items || [];

  return (
    <section id="contato" style={{ background: '#0c1821', color: '#fff', position: 'relative', overflow: 'hidden' }}>
      <div style={{
        position: 'absolute', top: -200, right: -100, width: 600, height: 600, borderRadius: '50%',
        background: 'radial-gradient(circle, color-mix(in oklab, var(--primary) 35%, transparent) 0%, transparent 70%)',
      }} />
      <div style={{
        position: 'absolute', bottom: -160, left: -80, width: 480, height: 480, borderRadius: '50%',
        background: 'radial-gradient(circle, color-mix(in oklab, var(--accent) 22%, transparent) 0%, transparent 70%)',
      }} />

      <div className="container" style={{ position: 'relative' }}>
        <div className="contact-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 60, alignItems: 'center' }}>
          <div>
            <span className="eyebrow" style={{ color: '#34D399' }}>{D.eyebrow}</span>
            <h2 style={{ color: '#fff', marginTop: 14, marginBottom: 24 }}>{D.title}</h2>
            <p style={{ fontSize: 18, color: 'rgba(255,255,255,.8)', marginBottom: 36, maxWidth: 480 }}>
              {D.subtitle}
            </p>

            <div style={{ display: 'grid', gap: 18, marginBottom: 32 }}>
              {items.map((it, i) => (
                <ContactItem key={i} icon={it.icon} title={it.title} value={it.value} sub={it.sub} link={it.link} />
              ))}
            </div>
          </div>

          <div style={{
            aspectRatio: '4/3', borderRadius: 'var(--radius-lg)',
            border: '1px solid rgba(255,255,255,.12)',
            position: 'relative', overflow: 'hidden',
            boxShadow: '0 30px 60px -25px rgba(0,0,0,.5)',
            background: '#1a2438',
          }}>
            {D.mapEmbed && (
              <iframe
                src={D.mapEmbed}
                width="100%" height="100%"
                style={{ border: 0, display: 'block', filter: 'grayscale(.3) contrast(1.05)' }}
                loading="lazy"
                referrerPolicy="no-referrer-when-downgrade"
                title="SOSSEG"
              />
            )}
            {D.mapLink && (
              <a
                href={D.mapLink}
                target="_blank" rel="noopener"
                style={{
                  position: 'absolute', bottom: 16, left: 16, right: 16,
                  background: 'rgba(12,24,33,.92)', backdropFilter: 'blur(8px)',
                  color: '#fff', padding: '12px 16px', borderRadius: 12,
                  display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                  fontSize: 13.5, fontWeight: 500,
                  border: '1px solid rgba(255,255,255,.1)',
                }}
              >
                <span style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                  <Icon.Pin width="16" height="16" style={{ color: 'var(--accent)' }} />
                  {D.mapLabel}
                </span>
                <span style={{ fontSize: 12, opacity: .7, fontFamily: 'var(--mono)' }}>abrir ↗</span>
              </a>
            )}
          </div>
        </div>

        <style>{`
          @media (max-width: 900px) {
            .contact-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
          }
        `}</style>
      </div>
    </section>
  );
}

function ContactItem({ icon, title, value, sub, link }) {
  const Ico = Icon[icon] || Icon.Pin;
  const Wrap = link ? 'a' : 'div';
  return (
    <Wrap href={link} target={link ? '_blank' : undefined} rel="noopener" style={{
      display: 'flex', gap: 14, alignItems: 'flex-start', cursor: link ? 'pointer' : 'default',
    }}>
      <div style={{
        width: 44, height: 44, borderRadius: 12,
        background: 'rgba(255,255,255,.1)', color: '#fff',
        display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
      }}>
        <Ico width="20" height="20" />
      </div>
      <div>
        <div style={{ fontSize: 12, color: 'rgba(255,255,255,.6)', fontFamily: 'var(--mono)', textTransform: 'uppercase', letterSpacing: '.14em' }}>{title}</div>
        <div style={{ fontSize: 17, color: '#fff', fontWeight: 500, marginTop: 4 }}>{value}</div>
        {sub && <div style={{ fontSize: 13, color: 'rgba(255,255,255,.65)', marginTop: 2 }}>{sub}</div>}
      </div>
    </Wrap>
  );
}

function Footer() {
  const D = (window.SITE && window.SITE.footer) || {};
  const settings = (window.SITE && window.SITE.settings) || {};
  const cols = D.columns || [];
  const logo = (typeof window !== 'undefined' && window.__resources && window.__resources.logoSosseg) || "brand/sosseg-logo-oficial.png";

  return (
    <footer style={{ background: '#080f17', color: 'rgba(255,255,255,.7)', padding: '60px 0 32px', borderTop: '1px solid rgba(255,255,255,.06)' }}>
      <div className="container">
        <div className="footer-grid" style={{ display: 'grid', gridTemplateColumns: `1.5fr ${cols.map(()=>'1fr').join(' ')}`, gap: 40, marginBottom: 48 }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16 }}>
              <img src={logo} alt={`${(settings.brand && settings.brand.name) || 'SOSSEG'} ${(settings.brand && settings.brand.tagline) || ''}`}
                   style={{ height: 56, width: 'auto', display: 'block' }} />
            </div>
            <p style={{ fontSize: 14, lineHeight: 1.6, maxWidth: 320, color: 'rgba(255,255,255,.6)' }}>
              {D.tagline}
            </p>
          </div>

          {cols.map((c) => <FooterCol key={c.title} title={c.title} links={c.links} />)}
        </div>

        <div style={{
          paddingTop: 24, borderTop: '1px solid rgba(255,255,255,.1)',
          display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 16,
          fontSize: 12.5, color: 'rgba(255,255,255,.5)',
        }}>
          <span>{D.copyright}</span>
          <span style={{ fontFamily: 'var(--mono)' }}>{D.version}</span>
        </div>
      </div>
    </footer>
  );
}

function FooterCol({ title, links }) {
  return (
    <div>
      <div style={{ fontSize: 12, color: 'rgba(255,255,255,.5)', fontFamily: 'var(--mono)', textTransform: 'uppercase', letterSpacing: '.14em', marginBottom: 16 }}>{title}</div>
      <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 10 }}>
        {(links || []).map(l => <li key={l}><a href="#" style={{ fontSize: 14, color: 'rgba(255,255,255,.7)' }}>{l}</a></li>)}
      </ul>
    </div>
  );
}

window.Contact = Contact;
window.Footer = Footer;