/* global React, Icon, Eyebrow, Reveal, TBMark, useLanguage */
function Footer() {
  const { isPortuguese } = useLanguage();
  const homePrefix = /Projects\.html$/i.test(window.location.pathname) ? 'index.html' : '';
  const browseItems = isPortuguese ? [
    { label: 'retratos', href: 'Projects.html' },
    { label: 'casais', href: 'Projects.html' },
    { label: 'famílias', href: 'Projects.html' },
    { label: 'coleções', href: `${homePrefix}#collections` },
  ] : [
    { label: 'portraits', href: 'Projects.html' },
    { label: 'couples', href: 'Projects.html' },
    { label: 'families', href: 'Projects.html' },
    { label: 'collections', href: `${homePrefix}#collections` },
  ];
  const infoItems = isPortuguese ? [
    { label: 'sobre', href: `${homePrefix}#about` },
    { label: 'valores', href: `${homePrefix}#pricing` },
    { label: 'depoimentos', href: `${homePrefix}#testimonials` },
    { label: 'contato', href: `${homePrefix}#contact` },
  ] : [
    { label: 'about', href: `${homePrefix}#about` },
    { label: 'pricing', href: `${homePrefix}#pricing` },
    { label: 'kind words', href: `${homePrefix}#testimonials` },
    { label: 'contact', href: `${homePrefix}#contact` },
  ];

  return (
    <footer style={{
      background: 'transparent', color: 'var(--limestone)',
      padding: '88px 32px 32px',
      borderTop: '1px solid rgba(232,226,212,0.08)',
      position: 'relative',
    }}>
      <div style={{ maxWidth: 1440, margin: '0 auto' }}>
        <Reveal>
          <div className="tb-foot-grid" style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr', gap: 48, paddingBottom: 64, borderBottom: '1px solid rgba(232,226,212,0.14)' }}>
            <div>
              <img className="tb-footer-logo" src="assets/brand/footer-logo.png" alt="Tainá Borges Photography" loading="lazy" decoding="async" style={{ width: 'min(100%, 390px)', height: 'auto', display: 'block', marginBottom: 22 }} />
              <p style={{ fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 16, lineHeight: 1.5, color: '#C9C2B3', marginTop: 0, maxInlineSize: '40ch' }}>
                {isPortuguese ? 'fotógrafa em nova york. experiências leves, autênticas e cheias de memórias.' : 'new york photographer. relaxed, authentic experiences and memories that last.'}
              </p>
            </div>
            <FootCol title={isPortuguese ? 'explorar' : 'browse'} items={browseItems} />
            <FootCol title={isPortuguese ? 'informações' : 'info'} items={infoItems} />
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              <Eyebrow dark withBar={false}>{isPortuguese ? 'encontre-me' : 'elsewhere'}</Eyebrow>
              <FootLink icon="instagram" label="@tainaborgesphoto" href="https://www.instagram.com/tainaborgesphoto/" external />
              <FootLink icon="mail" label="tainaborgesphoto@outlook.com" href="mailto:tainaborgesphoto@outlook.com" />
              <FootLink icon="message-circle" label="whatsapp" href="https://wa.me/15165592237" external />
            </div>
          </div>
        </Reveal>
        <div className="tb-foot-end" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingTop: 24, fontFamily: 'var(--font-mono)', fontSize: 11, color: '#5C5750', letterSpacing: '0.06em', gap: 16, flexWrap: 'wrap' }}>
          <span>© tainá borges, new york, 2026</span>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
            <span style={{ width: 6, height: 6, background: 'var(--taxi)', borderRadius: 999 }} /> made on the 6 train
          </span>
        </div>
      </div>
      <style>{`
        @media (max-width: 880px) {
          .tb-foot-grid { grid-template-columns: 1fr 1fr !important; }
        }
        @media (max-width: 540px) {
          .tb-foot-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </footer>
  );
}

function FootCol({ title, items }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
      <Eyebrow dark withBar={false}>{title}</Eyebrow>
      {items.map(({ label, href }) => (
        <a key={`${label}-${href}`} href={href} style={{ color: '#C9C2B3', fontFamily: 'var(--font-sans)', fontSize: 14, textDecoration: 'none', padding: '2px 0', width: 'fit-content', borderBottom: '1px solid transparent', transition: 'border-color 180ms var(--ease-out), color 180ms var(--ease-out)' }}
          onMouseEnter={e => { e.currentTarget.style.color = 'var(--limestone)'; e.currentTarget.style.borderBottomColor = 'var(--taxi)'; }}
          onMouseLeave={e => { e.currentTarget.style.color = '#C9C2B3'; e.currentTarget.style.borderBottomColor = 'transparent'; }}
        >{label}</a>
      ))}
    </div>
  );
}

function FootLink({ icon, label, href, external }) {
  return (
    <a href={href} target={external ? '_blank' : undefined} rel={external ? 'noopener noreferrer' : undefined} style={{ color: '#C9C2B3', fontFamily: 'var(--font-sans)', fontSize: 14, textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 10 }}>
      <Icon name={icon} size={14}/>{label}
    </a>
  );
}

window.Footer = Footer;