/* global React, Sparkle, BeautyMark, Icon */

function Footer() {
  return (
    <footer style={fStyles.footer}>
      <div className="container">
        <div className="footer-grid" style={fStyles.grid}>
          <div className="footer-brand" style={fStyles.brand}>
            <img src="assets/logo-full.png" alt="Refinada Beauty" className="footer-logo" style={{ height: 90, width: 'auto', maxWidth: 'none', alignSelf: 'flex-start', filter: 'brightness(0) invert(1)', opacity: 0.96 }}/>
            <p style={fStyles.tagline}>Realce sua beleza.<br/>Sinta-se Refinada.</p>
            <div className="footer-socials" style={fStyles.socials}>
              <a href="https://www.instagram.com/refinada_beauty" target="_blank" style={fStyles.socDot}><Icon name="instagram" size={16}/></a>
              <a href="https://wa.me/5582999973643" target="_blank" style={fStyles.socDot}><Icon name="phone" size={16}/></a>
            </div>
          </div>
          <FCol title="Serviços" items={['Esmalteria','Cabelo','Sobrancelhas','Massagem','Depilação','Podologia','Boutique']}/>
          <FCol title="Salão"    items={['Sobre nós','Galeria','Depoimentos','Programa Refinada','Vale-presente']}/>
          <FCol title="Contato"  items={['Av. Siqueira Campos, 1538','Prado · Maceió/AL','(82) 99997-3643','@refinada_beauty']}/>
        </div>
        <div style={fStyles.bottom}>
          <span>© 2026 REFINADA BEAUTY · CNPJ 47.895.196/0001-93</span>
          <BeautyMark>Beauty</BeautyMark>
          <span>MACEIÓ · BRASIL</span>
        </div>
      </div>
    </footer>
  );
}

function FCol({ title, items }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 14, minWidth: 0 }}>
      <h5 style={fStyles.h5}>{title}</h5>
      <ul style={fStyles.ul}>{items.map(i => <li key={i} style={fStyles.li}>{i}</li>)}</ul>
    </div>
  );
}

const fStyles = {
  footer: { background: 'var(--rb-espresso)', color: 'var(--rb-creme)', padding: '72px var(--page-pad) 28px' },
  grid: { display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1.4fr', gap: 40 },
  brand: { display: 'flex', flexDirection: 'column', gap: 18 },
  tagline: { fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 20, lineHeight: 1.4, color: 'rgba(255,247,240,0.85)', margin: 0, maxWidth: 280 },
  socials: { display: 'flex', gap: 8 },
  socDot: { width: 38, height: 38, borderRadius: 999, border: '1px solid rgba(231,201,187,0.3)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: 'var(--rb-creme)', cursor: 'pointer' },
  h5: { fontFamily: 'var(--font-sans)', fontSize: 10, fontWeight: 500, letterSpacing: '0.32em', textTransform: 'uppercase', color: 'var(--rb-rose)', margin: 0 },
  ul: { listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 10 },
  li: { fontFamily: 'var(--font-sans)', fontSize: 14, color: 'rgba(255,247,240,0.78)' },
  bottom: {
    marginTop: 56, paddingTop: 20, borderTop: '1px solid rgba(231,201,187,0.18)',
    display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 14,
    fontFamily: 'var(--font-sans)', fontSize: 11, letterSpacing: '0.18em', color: 'rgba(255,247,240,0.5)',
  },
};

Object.assign(window, { Footer });