/* global React, Button, useIsMobile, useInView, trackEvent, WA_URL */

const INFO = [
  {
    icon: 'map-pin',
    label: 'Endereço',
    value: 'Av. Um, 1600 - Sala 123\nMaiobão, Paço do Lumiar - MA',
  },
  {
    icon: 'clock',
    label: 'Horário',
    value: 'Seg–Sex · 08h–17h\nSáb · 08h–12h',
  },
  {
    icon: 'whatsapp-logo',
    label: 'WhatsApp',
    value: '(98) 98850-2010',
    href: WA_URL,
    external: true,
    source: 'contato_info',
  },
  {
    icon: 'instagram-logo',
    label: 'Instagram',
    value: '@cuidardosolhos',
    href: 'https://instagram.com/cuidardosolhos',
    external: true,
  },
];

function InfoBlock({ icon, label, value, href, external, last, mobile, source }) {
  const inner = (
    <div style={{
      display: 'flex', flexDirection: 'column', alignItems: 'center',
      textAlign: 'center', gap: 10,
      padding: mobile ? '24px 12px' : '32px 24px',
      borderRight: (last || mobile) ? 'none' : '1px solid rgba(255,255,255,0.1)',
    }}>
      <div style={{
        width: 48, height: 48, borderRadius: 14, flexShrink: 0,
        background: 'rgba(0,179,164,0.18)', color: 'var(--teal-300)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontSize: 24,
      }}>
        <i className={`ph ph-${icon}`} />
      </div>
      <div style={{
        fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 10,
        letterSpacing: '.22em', textTransform: 'uppercase', color: 'var(--teal-300)',
      }}>{label}</div>
      <div style={{
        fontFamily: 'var(--font-sans)', fontSize: 14, fontWeight: 500,
        color: '#fff', lineHeight: 1.5, whiteSpace: 'pre-line',
      }}>{value}</div>
    </div>
  );

  if (href) {
    return (
      <a href={href} target={external ? '_blank' : undefined}
        rel={external ? 'noopener noreferrer' : undefined}
        onClick={() => { if (source) trackEvent('whatsapp_click', { whatsapp_source: source }); }}
        style={{ textDecoration: 'none', transition: 'opacity .15s', flex: 1 }}
        onMouseEnter={e => { e.currentTarget.style.opacity = '.75'; }}
        onMouseLeave={e => { e.currentTarget.style.opacity = '1'; }}>
        {inner}
      </a>
    );
  }
  return <div style={{ flex: 1 }}>{inner}</div>;
}

function ContactSection() {
  const isMobile = useIsMobile();
  const [imgRef, imgInView] = useInView({ threshold: 0.25 });
  return (
    <section id="contact" style={{
      background: 'var(--brand-navy)', color: '#fff',
      padding: isMobile ? '64px 20px 56px' : '96px 32px 80px',
      position: 'relative', overflow: 'hidden',
    }}>
      {/* Eye motif — hidden on mobile to avoid clutter */}
      {!isMobile && (
        <svg style={{ position: 'absolute', right: -160, top: -100, width: 560, opacity: .1 }}
          viewBox="0 0 560 360" fill="none" xmlns="http://www.w3.org/2000/svg">
          <ellipse cx="280" cy="180" rx="250" ry="155" stroke="#00B3A4" strokeWidth="16" strokeLinecap="round" strokeDasharray="480 120 360 120"/>
          <circle cx="280" cy="180" r="62" stroke="#00B3A4" strokeWidth="16"/>
        </svg>
      )}

      <div style={{ maxWidth: 1200, margin: '0 auto', position: 'relative', zIndex: 1 }}>

        {/* 1 — Header centrado */}
        <div style={{ textAlign: 'center', marginBottom: 48 }}>
          <div style={{
            fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 12,
            letterSpacing: '.22em', textTransform: 'uppercase',
            color: 'var(--teal-300)', marginBottom: 12,
          }}>Contato · Localização</div>
          <h2 style={{
            fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: isMobile ? 36 : 44,
            margin: '4px 0 8px', letterSpacing: '-.01em',
          }}>Venha nos visitar.</h2>
          <div style={{ width: 48, height: 2, background: 'var(--brand-teal)', borderRadius: 2, margin: '0 auto 20px' }} />
          <p style={{
            fontFamily: 'var(--font-sans)', fontSize: 17, lineHeight: 1.7,
            color: 'rgba(255,255,255,.75)', maxWidth: 480, margin: '0 auto',
          }}>
            Estamos no Lumier Center, em um espaço pensado para receber você com conforto e sofisticação.
          </p>
        </div>

        {/* 2 — Fachada em largura total — desembaça ao entrar na tela */}
        <div ref={imgRef} style={{
          borderRadius: 20, overflow: 'hidden',
          boxShadow: '0 24px 64px rgba(0,0,0,0.35)',
          marginBottom: 48,
        }}>
          <img src="assets/fachada.png" alt="Fachada Cuidar dos Olhos"
            style={{
              width: '100%', height: 'auto', display: 'block',
              filter: imgInView ? 'blur(0px)' : 'blur(18px)',
              transform: imgInView ? 'scale(1)' : 'scale(1.04)',
              opacity: imgInView ? 1 : 0.6,
              transition: 'filter 2.5s ease, transform 2.5s ease, opacity 2.5s ease',
              willChange: 'filter, transform, opacity',
            }} />
        </div>

        {/* 3 — Info grid: 4-col on desktop, 2x2 on mobile */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? 'repeat(2, 1fr)' : 'repeat(4, 1fr)',
          background: 'rgba(255,255,255,0.06)',
          borderRadius: 16,
          overflow: 'hidden',
          marginBottom: 40,
        }}>
          {INFO.map((item, i) => (
            <InfoBlock key={item.label} {...item} last={i === INFO.length - 1} mobile={isMobile} />
          ))}
        </div>

        {/* 4 — CTA centralizado */}
        <div style={{ textAlign: 'center' }}>
          <a href={WA_URL} target="_blank" rel="noopener noreferrer" style={{ textDecoration: 'none' }}
            onClick={() => trackEvent('whatsapp_click', { whatsapp_source: 'contato_cta' })}>
            <Button variant="accent" icon="whatsapp-logo"
              style={isMobile ? { width: '100%', justifyContent: 'center' } : undefined}>
              Agendar pelo WhatsApp
            </Button>
          </a>
        </div>

      </div>
    </section>
  );
}

function Footer() {
  const isMobile = useIsMobile();
  return (
    <footer style={{ background: 'var(--navy-900)', color: 'rgba(255,255,255,.72)', padding: '32px 20px' }}>
      <div style={{
        maxWidth: 1200, margin: '0 auto',
        display: 'flex',
        flexDirection: isMobile ? 'column' : 'row',
        justifyContent: 'space-between', alignItems: isMobile ? 'flex-start' : 'center',
        fontFamily: 'var(--font-sans)', fontSize: 13,
        gap: isMobile ? 12 : 16,
      }}>
        <div>© 2026 Cuidar dos Olhos · Clínica Oftalmológica · CRM 15994-MA</div>
        <div style={{ display: 'flex', gap: 20 }}>
          <a href="https://instagram.com/cuidardosolhos" target="_blank" rel="noopener noreferrer"
            style={{ color: 'rgba(255,255,255,.72)', textDecoration: 'none' }}>Instagram</a>
          <a href="politica-de-privacidade.html"
            style={{ color: 'rgba(255,255,255,.72)', textDecoration: 'none' }}>Política de Privacidade</a>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { ContactSection, Footer });