const footerStyles = {
  footer: {
    background: 'var(--bg-2)',
    borderTop: '1px solid rgba(255,255,255,0.05)',
    padding: '64px 4rem',
  },
  inner: {
    maxWidth: 1300, margin: '0 auto',
    display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr',
    gap: 40, alignItems: 'start',
  },
  col: {
    color: 'var(--fg-muted)',
    fontSize: '0.82rem', lineHeight: 1.75, fontWeight: 300,
  },
  colRight: { textAlign: 'right' },
  brandImg: { maxWidth: 180, height: 'auto', opacity: 0.75, filter: 'brightness(0) invert(1)', display: 'block' },
  vat: { marginTop: 12, fontSize: '0.72rem', opacity: 0.35, color: 'inherit', maxWidth: 'none' },
  heading: {
    color: 'var(--fg)', fontWeight: 600, fontSize: '0.75rem',
    letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 10,
    maxWidth: 'none',
  },
  colP: { fontSize: '0.82rem', color: 'inherit', maxWidth: 'none', fontWeight: 300, lineHeight: 1.75 },
  btnTop: {
    background: 'none', border: 'none',
    fontSize: '0.8rem', fontWeight: 400, letterSpacing: '0.04em',
    cursor: 'pointer', transition: 'color .2s',
    fontFamily: "'Plus Jakarta Sans', sans-serif",
    padding: 0,
  },
  bottom: {
    background: 'var(--bg)', borderTop: '1px solid rgba(255,255,255,0.04)',
    padding: '20px 4rem',
  },
  bottomInner: {
    maxWidth: 1300, margin: '0 auto',
    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
    color: 'var(--fg-faint)', fontSize: '0.72rem',
    gap: 16, fontWeight: 300, flexWrap: 'wrap',
  },
  bottomP: { fontSize: '0.72rem', color: 'inherit', maxWidth: 'none' },
  link: { color: 'rgba(245,242,237,0.35)', transition: 'color .2s', textDecoration: 'none' },
  sep: { margin: '0 8px', opacity: 0.4 },
};

function BtnTop() {
  const [hov, setHov] = React.useState(false);
  return (
    <button onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}
      onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
      style={{ ...footerStyles.btnTop, color: hov ? 'var(--fg)' : 'var(--fg-muted)' }}>
      ↑ Torna su
    </button>
  );
}

function FooterLink({ href, children }) {
  const [hov, setHov] = React.useState(false);
  return (
    <a href={href} target="_blank" rel="noreferrer"
      onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}
      style={{ ...footerStyles.link, color: hov ? 'var(--fg-muted)' : 'rgba(245,242,237,0.35)' }}>
      {children}
    </a>
  );
}

function Footer() {
  return (
    <>
      <footer className="footer-block" style={footerStyles.footer}>
        <div className="footer-inner-grid" style={footerStyles.inner}>
          <div style={footerStyles.col}>
            <img src="../../assets/renderia-logo.svg" alt="REnderia" style={footerStyles.brandImg} />
            <p style={footerStyles.vat}>Vat number: 03787621204</p>
          </div>
          <div style={footerStyles.col}>
            <p style={footerStyles.heading}>Vection Technologies</p>
            <p style={footerStyles.colP}>Via Roma 36, 40069<br/>Zola Predosa (BO) Italy</p>
          </div>
          <div style={footerStyles.col}>
            <p style={footerStyles.heading}>Contact</p>
            <p style={footerStyles.colP}>marketing@vection-technologies.com</p>
          </div>
          <div className="footer-col-right" style={{ ...footerStyles.col, ...footerStyles.colRight }}>
            <BtnTop />
          </div>
        </div>
      </footer>
      <div className="footer-bottom-block" style={footerStyles.bottom}>
        <div className="footer-bottom-inner" style={footerStyles.bottomInner}>
          <div>
            <FooterLink href="https://www.iubenda.com/privacy-policy/79246773">Privacy Policy</FooterLink>
            <span style={footerStyles.sep}>·</span>
            <FooterLink href="https://www.iubenda.com/privacy-policy/79246773/cookie-policy">Cookie Policy</FooterLink>
          </div>
          <p style={footerStyles.bottomP}>© 2026 REnderia — un brand di Vection Technologies e Natuzzi</p>
        </div>
      </div>
    </>
  );
}

window.Footer = Footer;