/* Footer + CTA strip */

function useFooterMobile(bp = 768) {
  const [m, setM] = React.useState(() => typeof window !== 'undefined' && window.innerWidth <= bp);
  React.useEffect(() => {
    const on = () => setM(window.innerWidth <= bp);
    window.addEventListener('resize', on);
    return () => window.removeEventListener('resize', on);
  }, [bp]);
  return m;
}

const FOOTER_HEAD = { fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.45)', marginBottom: 18 };
const FOOTER_LINK = { fontSize: 13, color: 'rgba(255,255,255,0.75)' };

const FooterBrandBlock = () => (
  <React.Fragment>
    <Logo inverted />
    <p style={{ marginTop: 16, fontSize: 14, lineHeight: 1.6, color: 'rgba(255,255,255,0.65)' }}>
      Especialistas en equipos de limpieza industrial. +15 años equipando talleres, lavaderos y empresas en todo el país.
    </p>
    <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginTop: 20, fontSize: 13, color: 'rgba(255,255,255,0.75)' }}>
      <a href="tel:+541125181264" style={{ display: 'flex', alignItems: 'center', gap: 8 }}><Icon name="phone" size={14} /> 11-2518-1264</a>
      <a href="mailto:ventas@rcpowerclean.com.ar" style={{ display: 'flex', alignItems: 'center', gap: 8 }}><Icon name="mail" size={14} /> ventas@rcpowerclean.com.ar</a>
      <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}><Icon name="pin" size={14} /> Tres Arroyos 456, Haedo</span>
    </div>
  </React.Fragment>
);

const FooterNewsletterBlock = () => (
  <div>
    <h5 className="mono" style={FOOTER_HEAD}>Newsletter</h5>
    <p style={{ fontSize: 13, color: 'rgba(255,255,255,0.65)', marginBottom: 12 }}>Ofertas y novedades. Sin spam.</p>
    <div style={{ display: 'flex', gap: 6 }}>
      <input placeholder="tu@email.com"
        style={{ flex: 1, padding: '10px 12px', borderRadius: 6, background: 'rgba(255,255,255,0.08)', border: '1px solid rgba(255,255,255,0.15)', color: '#fff', fontSize: 13 }} />
      <button className="btn btn-primary" style={{ padding: '10px 14px' }}><Icon name="arrowRight" size={16} /></button>
    </div>
    <div style={{ display: 'flex', gap: 10, marginTop: 24 }}>
      {[{ n: 'ig', l: 'Instagram' }, { n: 'fb', l: 'Facebook' }, { n: 'whatsapp', l: 'WhatsApp' }].map((s) =>
        <a key={s.n} href="#" aria-label={s.l}
          style={{ width: 36, height: 36, borderRadius: 6, background: 'rgba(255,255,255,0.06)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'rgba(255,255,255,0.8)' }}>
          <Icon name={s.n} size={16} />
        </a>
      )}
    </div>
  </div>
);

// Mobile-only collapsible section (accordion). Collapsed by default.
const FooterAccSection = ({ title, children }) => {
  const [open, setOpen] = React.useState(false);
  return (
    <div style={{ borderTop: '1px solid rgba(255,255,255,0.08)' }}>
      <button onClick={() => setOpen((o) => !o)} aria-expanded={open}
        style={{ width: '100%', display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '15px 0', color: '#fff' }}>
        <span className="mono" style={{ fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.7)' }}>{title}</span>
        <span style={{ display: 'inline-flex', color: 'rgba(255,255,255,0.6)', transition: 'transform .22s ease', transform: open ? 'rotate(180deg)' : 'none' }}>
          <Icon name="chevronDown" size={16} />
        </span>
      </button>
      {open &&
        <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 12, padding: '2px 0 16px' }}>{children}</ul>}
    </div>
  );
};

const Footer = ({ onNavigate }) => {
  const { CATEGORIES } = window.RC_DATA;
  const mobile = useFooterMobile();
  const empresa = ['Sobre nosotros', 'Servicio técnico', 'Cómo comprar', 'Medios de pago', 'Envíos', 'Garantía', 'Contacto'];
  const catItems = CATEGORIES.map((c) =>
    <li key={c.id}><a href="#" onClick={(e) => { e.preventDefault(); onNavigate(`/categoria/${c.slug}`); }} style={FOOTER_LINK}>{c.name}</a></li>
  );
  const empItems = empresa.map((x) =>
    <li key={x}><a href="#" style={FOOTER_LINK}>{x}</a></li>
  );

  return (
    <footer style={{ background: 'var(--ink)', color: '#fff', marginTop: 80 }}>
      {/* Pre-footer CTA */}
      <div style={{ background: 'var(--accent)', padding: '28px 0', backgroundColor: "rgb(160, 14, 12)" }}>
        <div className="container" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 20, flexWrap: 'wrap' }}>
          <div>
            <div style={{ fontSize: 22, fontWeight: 700, letterSpacing: '-0.02em' }}>¿Necesitás asesoramiento?</div>
            <div style={{ fontSize: 14, opacity: 0.9, marginTop: 4 }}>Respondemos en minutos por WhatsApp. Sin bots.</div>
          </div>
          <a href="#" className="btn btn-lg" style={{ background: '#fff', color: "rgb(160, 14, 12)" }}>
            <Icon name="whatsapp" size={18} /> Chatear ahora
          </a>
        </div>
      </div>

      {/* Main — desktop: grid (sin cambios) · mobile: marca + acordeones + newsletter */}
      {mobile ? (
        <div className="container" style={{ padding: '36px 20px 28px' }}>
          <div style={{ maxWidth: 420 }}><FooterBrandBlock /></div>
          <div style={{ marginTop: 28 }}>
            <FooterAccSection title="Catálogo">{catItems}</FooterAccSection>
            <FooterAccSection title="Empresa">{empItems}</FooterAccSection>
          </div>
          <div style={{ borderTop: '1px solid rgba(255,255,255,0.08)', paddingTop: 28 }}>
            <FooterNewsletterBlock />
          </div>
        </div>
      ) : (
        <div className="container" style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: 48, padding: '64px 24px 40px' }}>
          <div style={{ gridColumn: 'span 2', maxWidth: 380 }} className="footer-brand"><FooterBrandBlock /></div>
          <div>
            <h5 className="mono" style={FOOTER_HEAD}>Catálogo</h5>
            <ul style={{ display: 'flex', flexDirection: 'column', gap: 10, listStyle: 'none' }}>{catItems}</ul>
          </div>
          <div>
            <h5 className="mono" style={FOOTER_HEAD}>Empresa</h5>
            <ul style={{ display: 'flex', flexDirection: 'column', gap: 10, listStyle: 'none' }}>{empItems}</ul>
          </div>
          <FooterNewsletterBlock />
        </div>
      )}

      {/* Bottom bar */}
      <div style={{ borderTop: '1px solid rgba(255,255,255,0.08)', padding: '20px 0' }}>
        <div className="container" style={{ display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 10, fontSize: 12, color: 'rgba(255,255,255,0.5)' }}>
          <span>© 2026 RC Powerclean. Todos los derechos reservados.</span>
          <div style={{ display: 'flex', gap: 16 }}>
            <a href="#">Privacidad</a>
            <a href="#">Términos</a>
            <a href="#">Defensa del consumidor</a>
          </div>
        </div>
      </div>
    </footer>);

};

Object.assign(window, { Footer });