const WhatsIcon = ({ s = 16 }) => (
  <svg width={s} height={s} viewBox="0 0 24 24" fill="currentColor" style={{ flexShrink: 0 }}>
    <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
  </svg>
);
const MailIcon = ({ s = 16 }) => (
  <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" style={{ flexShrink: 0 }}>
    <rect x="2" y="4" width="20" height="16" rx="2"/><path d="m2 6 10 7 10-7"/>
  </svg>
);
const LinkedInIcon = ({ s = 16 }) => (
  <svg width={s} height={s} viewBox="0 0 24 24" fill="currentColor" style={{ flexShrink: 0 }}>
    <path d="M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.35V9h3.41v1.56h.05c.48-.9 1.63-1.85 3.36-1.85 3.6 0 4.27 2.37 4.27 5.45v6.29zM5.34 7.43a2.06 2.06 0 1 1 0-4.13 2.06 2.06 0 0 1 0 4.13zM7.12 20.45H3.56V9h3.56v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.72v20.56C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.72V1.72C24 .77 23.2 0 22.22 0z"/>
  </svg>
);

/* Big anchored nav link — bymonolog-style hover: index reveals, label
   slides right, arrow slides in, color brightens, faint wash. */
function FooterNavLink({ href, label, idx }) {
  const [h, setH] = React.useState(false);
  return (
    <a href={href} data-cursor="Ir"
      onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{
        position: 'relative', overflow: 'hidden', textDecoration: 'none',
        borderTop: '1px solid #2C2C2A', display: 'block',
      }}>
      <div aria-hidden="true" style={{
        position: 'absolute', inset: 0, background: 'rgba(227,221,216,0.04)',
        transformOrigin: 'left center', transform: h ? 'scaleX(1)' : 'scaleX(0)',
        transition: 'transform .55s cubic-bezier(.19,1,.22,1)',
      }}></div>
      <div style={{
        position: 'relative', zIndex: 1,
        display: 'flex', alignItems: 'center', gap: 18,
        padding: 'clamp(12px,1.6vw,22px) 8px',
      }}>
        <span style={{
          fontFamily: 'Helvetica, Arial, sans-serif', fontWeight: 400, fontSize: 13,
          color: h ? '#7A7A77' : '#3E3E3B', letterSpacing: '.1em', minWidth: 28,
          transition: 'color .4s ease',
        }}>{idx}</span>
        <span style={{
          fontFamily: 'HelveticaCompressed, "Arial Narrow", Arial, sans-serif',
          fontWeight: 700, fontSize: 'clamp(38px, 6.5vw, 88px)', lineHeight: .96,
          textTransform: 'uppercase', letterSpacing: '-.01em',
          color: h ? '#E3DDD8' : '#5A5A57',
          transform: h ? 'translateX(18px)' : 'translateX(0)',
          transition: 'color .4s ease, transform .55s cubic-bezier(.19,1,.22,1)',
        }}>{label}</span>
        <span aria-hidden="true" style={{
          marginLeft: 'auto', fontFamily: 'Helvetica, Arial, sans-serif',
          fontSize: 'clamp(22px,3vw,40px)', fontWeight: 400, color: '#E3DDD8',
          opacity: h ? 1 : 0, transform: h ? 'translateX(0)' : 'translateX(-18px)',
          transition: 'opacity .4s ease, transform .55s cubic-bezier(.19,1,.22,1)',
        }}>→</span>
      </div>
    </a>
  );
}

/* Prominent contact button — fills on hover */
function FooterContactBtn({ href, icon, label, sub }) {
  const [h, setH] = React.useState(false);
  return (
    <a href={href} target={href.startsWith('http') ? '_blank' : undefined} rel="noopener"
      data-cursor={sub}
      onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{
        display: 'flex', alignItems: 'center', gap: 14,
        padding: '16px 22px', borderRadius: 999,
        border: '1px solid ' + (h ? '#E3DDD8' : '#2C2C2A'),
        background: h ? '#E3DDD8' : 'transparent',
        color: h ? '#111110' : '#E3DDD8',
        textDecoration: 'none',
        transition: 'background .35s ease, color .35s ease, border-color .35s ease, transform .35s cubic-bezier(.19,1,.22,1)',
        transform: h ? 'translateX(6px)' : 'translateX(0)',
      }}>
      <span style={{ display: 'flex', color: 'inherit' }}>{icon}</span>
      <span style={{ display: 'flex', flexDirection: 'column', lineHeight: 1.3 }}>
        <span style={{ fontFamily: 'Helvetica, Arial, sans-serif', fontWeight: 700, fontSize: 16, letterSpacing: '.01em' }}>{label}</span>
        <span style={{ fontFamily: 'Helvetica, Arial, sans-serif', fontWeight: 400, fontSize: 12, opacity: .7, letterSpacing: '.02em' }}>{sub}</span>
      </span>
      <span aria-hidden="true" style={{ marginLeft: 'auto', fontSize: 20, fontWeight: 400, transform: h ? 'translateX(0)' : 'translateX(-4px)', opacity: h ? 1 : .5, transition: 'transform .35s ease, opacity .35s ease' }}>↗</span>
    </a>
  );
}

function Footer() {
  const { isMobile } = useViewport();
  const isProjectPage = typeof window !== 'undefined' && window.location.pathname.includes('project.html');
  const homePrefix = isProjectPage ? (window.PREFIX || '') + 'index.html' : '';
  const navItems = [
    [homePrefix + '#portfolio', T('Trabalhos', 'Works'), '01'],
    [homePrefix + '#servicos', T('Serviços', 'Services'), '02'],
    [homePrefix + '#sobre', T('Sobre', 'About'), '03'],
    [homePrefix + '#contato', T('Contato', 'Contact'), '04'],
  ];

  return (
    <footer style={{
      background: '#111110', position: 'relative', overflow: 'hidden',
      padding: isMobile ? '64px 20px 32px' : '110px 56px 44px',
    }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>

        {/* ── Masthead: big logo left + proportional wordmark right ── */}
        <div data-reveal style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          gap: 24, paddingBottom: isMobile ? 44 : 72, flexWrap: isMobile ? 'wrap' : 'nowrap',
        }}>
          <a href={isProjectPage ? (window.PREFIX || '') + 'index.html#inicio' : '#inicio'} data-cursor="Topo" style={{ display: 'inline-flex' }}>
            <img src={AP('../../assets/logo-icon-light.png')} alt="LSQ"
              style={{ height: isMobile ? 84 : 150, width: 'auto', display: 'block' }} />
          </a>
          <img src={AP('../../assets/wordmark-light.png')} alt="Marketing & Creative Consulting"
            style={{ height: isMobile ? 84 : 150, width: 'auto', display: 'block' }} />
        </div>

        {/* ── Big anchored nav + prominent contacts ── */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : '1.35fr 1fr',
          gap: isMobile ? 44 : 72, alignItems: 'start',
        }}>
          {!isProjectPage && (
            <nav data-reveal style={{ display: 'flex', flexDirection: 'column', borderBottom: '1px solid #2C2C2A' }}>
              {navItems.map(([href, label, idx]) => (
                <FooterNavLink key={label} href={href} label={label} idx={idx} />
              ))}
            </nav>
          )}

          <div data-reveal style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            <p style={{
              fontFamily: 'Helvetica, Arial, sans-serif', fontWeight: 400, fontSize: 11,
              color: '#5A5A57', letterSpacing: '.18em', textTransform: 'uppercase', margin: '0 0 8px',
            }}>{T('Contato Direto', 'Direct Contact')}</p>
            <FooterContactBtn href="https://wa.me/5511975514667?text=Quero%20trabalhar%20com%20a%20LSQ." icon={<WhatsIcon s={18} />} label="WhatsApp" sub="+55 11 97551 4667" />
            <FooterContactBtn href="mailto:lucasqueiroz@gmail.com" icon={<MailIcon s={18} />} label="E-mail" sub="lucasqueiroz@gmail.com" />
            <FooterContactBtn href="https://www.linkedin.com/in/lucasqueiroz86/" icon={<LinkedInIcon s={17} />} label="LinkedIn" sub="/in/lucasqueiroz86" />
          </div>
        </div>

        {/* ── Bottom bar ── */}
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          borderTop: '1px solid #2C2C2A', marginTop: isMobile ? 44 : 72, paddingTop: 24,
          flexWrap: 'wrap', gap: 16,
        }}>
          <p style={{
            fontFamily: 'Helvetica, Arial, sans-serif', fontWeight: 400, fontSize: 13,
            color: '#3E3E3B', margin: 0, letterSpacing: '.02em',
          }}>© 2026 LSQ Marketing &amp; Creative Consulting</p>
          <a href="#inicio" data-cursor="Topo" style={{
            fontFamily: 'Helvetica, Arial, sans-serif', fontWeight: 400, fontSize: 13,
            color: '#5A5A57', textDecoration: 'none', letterSpacing: '.06em',
            display: 'flex', alignItems: 'center', gap: 8, transition: 'color .2s',
          }}
          onMouseEnter={e => e.currentTarget.style.color = '#E3DDD8'}
          onMouseLeave={e => e.currentTarget.style.color = '#5A5A57'}
          >{T('Voltar ao topo', 'Back to top')} <span style={{ fontSize: 16 }}>↑</span></a>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Footer });
