// ui_kits/website/Footer.jsx

const footerStyles = {
  outer: { background: '#151414', color: '#a8a6a5', padding: '72px 0 32px' },
  inner: {
    maxWidth: 1200, margin: '0 auto', padding: '0 32px',
    display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr', gap: 56,
  },
  brand: { display: 'flex', flexDirection: 'column', gap: 16 },
  logoRow: { display: 'flex', alignItems: 'center', gap: 14 },
  logoImg: { width: 56, height: 56, borderRadius: '50%' },
  wordmark: { fontFamily: 'var(--font-serif)', fontWeight: 700, color: '#fff', fontSize: 18, letterSpacing: '0.06em' },
  tagline: { fontFamily: 'var(--font-sans)', fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase', color: '#a8a6a5', marginTop: 3 },
  mission: { fontFamily: 'var(--font-sans)', fontSize: 14, lineHeight: 1.7, color: '#a8a6a5', maxWidth: '38ch' },
  colTitle: { fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#fff', marginBottom: 16 },
  link: { display: 'block', fontFamily: 'var(--font-sans)', fontSize: 14, color: '#a8a6a5', marginBottom: 10, textDecoration: 'none', cursor: 'pointer' },
  socialRow: { display: 'flex', gap: 10, marginTop: 8 },
  socialBtn: {
    width: 38, height: 38, borderRadius: '50%',
    background: '#383838', color: '#8FCFAE',
    display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer',
    transition: 'background 200ms var(--ease-out)',
  },
  bottom: {
    maxWidth: 1200, margin: '40px auto 0', padding: '24px 32px 0',
    borderTop: '1px solid #383838',
    display: 'flex', justifyContent: 'space-between',
    fontFamily: 'var(--font-sans)', fontSize: 12, color: '#767574',
  },
  disclaimer: {
    maxWidth: 1200, margin: '24px auto 0', padding: '0 32px',
    fontFamily: 'var(--font-sans)', fontSize: 11, lineHeight: 1.6, color: '#525150',
    fontStyle: 'italic', maxWidth: '70ch',
  },
};

function Footer() {
  const tr = useT();
  return (
    <footer style={footerStyles.outer}>
      <div style={footerStyles.inner}>
        <div style={footerStyles.brand}>
          <div style={footerStyles.logoRow}>
            <img src="logo.png" alt="" style={footerStyles.logoImg}/>
            <div>
              <div style={footerStyles.wordmark}>TOP NATURAL TIPS</div>
              <div style={footerStyles.tagline}>{tr('header.brand.tagline')}</div>
            </div>
          </div>
          <p style={footerStyles.mission}>{tr('foot.mission')}</p>
          <div style={footerStyles.socialRow}>
            <a style={footerStyles.socialBtn} href="https://www.instagram.com/topnaturaltips/" target="_blank" rel="noopener" title="Instagram"><InstagramIcon size={16}/></a>
            <a style={footerStyles.socialBtn} href="https://www.youtube.com/@top_naturaltips" target="_blank" rel="noopener" title="YouTube"><YouTubeIcon size={16}/></a>
            <a style={footerStyles.socialBtn} href="https://www.facebook.com/topnaturaltips" target="_blank" rel="noopener" title="Facebook"><FacebookIcon size={14}/></a>
            <a style={footerStyles.socialBtn} href="https://www.tiktok.com/@topnaturaltips" target="_blank" rel="noopener" title="TikTok"><TikTokIcon size={14}/></a>
          </div>
        </div>

        <div>
          <div style={footerStyles.colTitle}>{tr('foot.col.explore')}</div>
          <a style={footerStyles.link}>{tr('cat.Health')}</a>
          <a style={footerStyles.link}>{tr('cat.Beauty')}</a>
          <a style={footerStyles.link}>{tr('cat.Nutrition')}</a>
          <a style={footerStyles.link}>{tr('cat.Exercise')}</a>
          <a style={footerStyles.link}>{tr('foot.naturalTherapies')}</a>
        </div>

        <div>
          <div style={footerStyles.colTitle}>{tr('foot.col.more')}</div>
          <a style={footerStyles.link}>{tr('nav.podcasts')}</a>
          <a style={footerStyles.link}>{tr('foot.courses')}</a>
          <a style={footerStyles.link}>{tr('nav.shop')}</a>
          <a style={footerStyles.link}>{tr('foot.aboutPaola')}</a>
          <a style={footerStyles.link}>{tr('foot.contact')}</a>
        </div>

        <div>
          <div style={footerStyles.colTitle}>{tr('foot.col.legal')}</div>
          <a style={footerStyles.link}>{tr('foot.terms')}</a>
          <a style={footerStyles.link}>{tr('foot.privacy')}</a>
          <a style={footerStyles.link}>{tr('foot.sale')}</a>
          <a style={footerStyles.link}>{tr('foot.medical')}</a>
          <div style={{ ...footerStyles.link, color: '#8FCFAE', marginTop: 16, display: 'flex', alignItems: 'center', gap: 8 }}>
            <MailIcon size={14}/> support@topnaturaltips.com
          </div>
        </div>
      </div>

      <div style={footerStyles.disclaimer}>{tr('foot.disclaimer')}</div>

      <div style={footerStyles.bottom}>
        <div>{tr('foot.copyright')}</div>
        <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
          <Globe size={14}/> English · Español
        </div>
      </div>
    </footer>
  );
}

window.Footer = Footer;